Interface Options

Options

These are the options for configuring a new KullnaEditor when calling createEditor.

💡 Note: Additional options are available for configuring the editor after initialization. See the documentation for KullnaEditor for more information.

Below is a comprehensive example of how to use these options. All of these options are optional, but they are included here for your reference:

const editor = KullnaEditor.createEditor('#editor', {
    window,
    dir: 'ltr',
    tab: '  ',
    language: 'javascript',
    highlightElement: hljs.highlightElement,
    maxUndoHistory: 300,
    gutter: {
        class: 'gutter',
        width: '55px',
        border: false,
        renderGutterLine: (line, element) => {
            // Customize the line numbers in the gutter
        },
    },
    onUpdate: () => {
        // Handle changes to the editor's text
    },
    // TODO: onCursorUpdate(document: TextDocument) => void { }
    tabProcessor: {
        replacement: DefaultProcessors.tab({...
        })
    },
    enterProcessor: {
        indentOn: /[({\[]$/,
        moveToNewLine: /^[)}\]]/,
        preserveIndentation: true,
        replacement ? : DefaultProcessors.enter({...
        })
    },
    bracketProcessor: {
        replacement: DefaultProcessors.bracket({...
        })
    },
    keydownPipeline: [ ... ],
    keyupPipeline: [ ... ]
});

Hierarchy

  • Options

Properties

bracketProcessor dir gutter? highlightElement? keydownPipeline? keyupPipeline? language? maxUndoHistory? newlineProcessor tab tabProcessor window

Properties

bracketProcessor

bracketProcessor: {
    enabled: boolean;
    replacement?: InputProcessor;
}

The default keydown pipeline (see Processors) includes support for inserting closing brackets and for "typing over" closing brackets. These functions are implemented by the bracketProcessor in DefaultProcessors.

This processor can be excluded from the pipeline by setting the enabled option to false, or, by specifying a replacement for the bracket processor.

💡 Note: These options are ignored if a custom keydownPipeline is being used.

Type declaration

  • enabled: boolean

    If true, the editor will automatically add closing brackets, quotes, etc. when typing, and will "type-over" closing brackets, quotes, etc.

    Default: true.

  • Optional replacement?: InputProcessor

    The replacement for the bracket processor.

dir

dir: "ltr" | "rtl"

The dir option specifies the direction of the prevailing script in the editor. This is useful for languages like Arabic which read right to left.

💡 Note: Most properties which can be set after initialization are generally not included in the options, but this value is unlikely to change over the lifetime of the editor, so it is included here even though it can be changed after initialization at will.

Optional gutter

gutter?: {
    border?: boolean;
    class?: string;
    renderGutterLine?: GutterCustomizer;
    width?: string;
}

Settings for the Gutter. See Gutters

Type declaration

  • Optional border?: boolean

    Whether to show a border between the gutter and the editor's text.

    Default: false.

  • Optional class?: string

    The CSS class to apply to the gutter's DOM element.

    This is useful for applying styles to the gutter, such as background, foreground, and border colors.

  • Optional renderGutterLine?: GutterCustomizer

    A function that is called for each line in the gutter. It is passed the line number and the DOM element for the line. You may use this function to customize the line numbers in the gutter.

  • Optional width?: string

    The width of the gutter as a CSS value (e.x.: '55px')

    Default: '55px'.

Optional highlightElement

highlightElement?: ((element: HTMLElement) => void)

Type declaration

    • (element: HTMLElement): void

    • The syntax highlighting function. This function is called whenever the editor's text changes and syntax highlighting needs to be re-applied.

      💡 Note: Do not use this callback as a replacement for the onChange callback. The highlight function may be deferred to a later time, and may not be called immediately after the text changes. Use the onChange callback for that.

      💡 Note: Currently the entire contents of the source will be available to the highlighter. This may not remain true in the future, but we will add a setting to control this behavior if it changes.

      Parameters

      • element: HTMLElement

        The element to highlight. Its textContents will be the source code to highlight. The function should replace the element's innerHTML with the highlighted source code.

      Returns void

Optional keydownPipeline

keydownPipeline?: InputProcessor[]

When specified, all options related to default input processors will be ignored, and the specified processors will be used instead.

You may build your own pipelines by reusing the default processors, by writing your own, or by writing your own which include the default processors.

This pipeline handles keypresses before they have been inserted into the editor's text.

Optional keyupPipeline

keyupPipeline?: InputProcessor[]

Like keydownPipeline, but handles keypresses after they have been inserted into the editor's text.

Optional language

language?: string

The language to use for syntax highlighting.

Optional maxUndoHistory

maxUndoHistory?: number

The maximum number of recent changes to keep in the history.

Default: 300

newlineProcessor

newlineProcessor: {
    enabled: boolean;
    incrementIndentationOn?: RegExp;
    moveToNewLine?: RegExp;
    replacement?: InputProcessor;
}

The default keydown pipeline (see Processors) includes support for automatic indentation, and for inserting additional indentation when the preceeding line ends with an open bracket. There is also support for moving text after the cursor to the next line when the user presses the enter key. This is useful for automatically converting the closing bracket to the next line. These functions are implemented in DefaultProcessors#enterProcessor.

The characters (or sequence of characters) which trigger indentation are specified by the indentOn option.

The characters (or sequence of characters) which trigger automatically moving following text to the next line are specified by the moveToNewLine option.

This processor can be excluded from the pipeline by setting the enabled option to false, or, by specifying a replacement for the bracket processor.

💡 Note: These options are ignored if a custom keydownPipeline is being used.

Type declaration

  • enabled: boolean

    If enabled is true, the editor will preserve the indentation of the current line on the next line when pressing enter.

    Default: true.

  • Optional incrementIndentationOn?: RegExp

    The incrementIndentationOn option specifies a regular expression that is used to determine whether the editor should indent the new line further when the user presses the enter key.

    Typically this is open brackets, but it can be any character or sequence of characters.

    Default: /[({[]$/

  • Optional moveToNewLine?: RegExp

    The moveToNewLine option specifies a regular expression that is used to determine whether the editor should move the cursor to the beginning of the next line when the user presses the enter key.

    Typically this is closing brackets, but it can be any character or sequence of characters.

    Default: /^[)}\]]/

  • Optional replacement?: InputProcessor

    The replacement for the newline processor.

tab

tab: string

The tab option specifies the string that is inserted when the user presses the tab key.

💡 Note: this value is used across many different processors, so it is included here. For example, when the user presses the tab key, the tab processor inserts this value. When the user presses the enter key, the newline processor inserts this value at the beginning of the new line if the previous line ends with an open bracket. When we configure the default keydown pipeline, we need this value to be consistent across all processors. So it has been "elevated" from the processor configurations to here.

tabProcessor

tabProcessor: {
    enabled: boolean;
    replacement?: InputProcessor;
}

The default keydown pipeline (see Processors) includes support for automatically inserting custom tab characters when the user presses the tab key, for handling shift-tab to unindent, and for handling multi-line tabbing.

TODO: And for handling the backspace key at the beginning of a line.

This processor can be excluded from the pipeline by setting the enabled option to false, or, by specifying a replacement for the bracket processor.

💡 Note: These options are ignored if a custom keydownPipeline is being used.

Type declaration

  • enabled: boolean

    If enabled is true, the editor will insert custom tab characters when the user presses the tab key, and handle shift-tab to unindent, as well as multi-line selections.

    Default: true.

  • Optional replacement?: InputProcessor

    The replacement for the tab processor.

window

window: Window

If window is specified, the editor will use it instead of the global window object.

Settings

Member Visibility

Theme

Generated using TypeDoc