Interface KullnaEditor

Kullna Editor

A small but feature-rich code editor for the web.

Create a new editor instance using the createEditor function, passing in a CSS selector and an Options object.

import {createEditor} from '@kullna/editor';

const editor = createEditor('#editor', {
  language: 'javascript',
  // This tells the editor to use Highlight.JS for syntax highlighting:
  highlightElement: hljs.highlightElement,
  // This tells the editor to show a gutter with line numbers and a border:
  gutter: {
    border: true,
    class: 'gutter'
  }
});
// Warning! Disabling spellcheck will disable spellcheck for the entire page.
editor.spellcheck = false;
editor.wrapsText = true;

See the Package Documentation @kullna/editor for more information.

Hierarchy

  • KullnaEditor

Accessors

code dir document language naturalHeight readonly spellcheck wrapsText

Methods

createHighlight destroy invalidateGutterLine onSelectionFocusChanged onUpdate scrollToLine

Accessors

code

dir

document

language

  • get language(): string

  • The programming language of the editor's content. This is used to determine the syntax highlighting strategy by common libraries like Highlight.js and Prism.js.

    Returns string

  • set language(language: string): void

  • Parameters

    • language: string

    Returns void

naturalHeight

  • get naturalHeight(): string

  • Gets the total height of the editor's content as a CSS value such as 123px or min(x, y).

    Remarks

    Intended to be queried as part of an onUpdate implementation.

    Returns string

readonly

  • get readonly(): boolean

  • Gets or sets whether the editor is readonly.

    Returns boolean

  • set readonly(readonly: boolean): void

  • Parameters

    • readonly: boolean

    Returns void

spellcheck

  • get spellcheck(): boolean

  • Gets or sets whether spellchecking is enabled.

    💡 Note: This isn't set to false by default because the implementation changes the setting document-wide, and we think it's important you know that. This is also why it's not part of the settings. We want you to set it explicitly.

    Default: true.

    Returns boolean

  • set spellcheck(spellcheck: boolean): void

  • Parameters

    • spellcheck: boolean

    Returns void

wrapsText

  • get wrapsText(): boolean

  • Determines whether the editor wraps text or allows it to scroll horizontally.

    Returns boolean

  • set wrapsText(wrapsText: boolean): void

  • Parameters

    • wrapsText: boolean

    Returns void

Methods

createHighlight

destroy

  • Removes elements from the DOM and releases all DOM event hooks.

    Returns void

invalidateGutterLine

  • Marks a line as invalid, causing the gutter to re-render it, potentially with new customizations. See: GutterCustomizer

    Parameters

    • line: number

    Returns void

onSelectionFocusChanged

  • Changes the function to be called when the editor's selection is updated.

    Parameters

    • callback: ((document: TextDocument) => void)

      The callback to invoke when the editor's selection is updated. The callback is not invoked when the editor's selection is updated via the code property.

    Returns void

onUpdate

  • Changes the function to be called when the editor's text content is updated.

    Parameters

    • callback: ((code: string) => void)

      The callback to invoke when the editor's text content is updated. The callback is not invoked when the editor's text content is updated via the code property.

        • (code: string): void

        • Parameters

          • code: string

          Returns void

    Returns void

scrollToLine

  • Ensures a specific line number is within view.

    Parameters

    • line: number

      The line number to scroll to.

    Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc