Skip to main content

API Documentation

EditorCore Class​

Certainly! Below is a detailed description of each property of the EditorCore class, providing insights into their roles and functionalities within the On-Codemerge editor.

Properties​

  • state (EditorState):

    • Manages the state of the editor's content.
    • Responsible for tracking changes, enabling undo/redo functionalities, and maintaining the current content state.

  • eventManager (EventManager):

    • Handles all event-related functionalities within the editor.
    • Manages event subscriptions and dispatches, allowing different components to communicate and react to various events.

  • modules (IEditorModule[]):

    • An array of modules integrated with the editor.
    • Each module can represent a distinct functionality or component, enhancing the editor's capabilities.

  • appElement (HTMLElement):

    • The main HTML element where the editor is mounted.
    • Serves as the root container for the editor in the DOM.

  • generalElement (HTMLElement):

    • A general HTML element that wraps around the entire editor.
    • Often used for applying styles and managing the overall layout of the editor.

  • i18n (I18n):

    • Provides internationalization support for the editor.
    • Manages language translations, allowing the editor to be used in different locales.

  • toolbar (Toolbar):

    • Manages the toolbar of the editor.
    • Responsible for rendering toolbar buttons and handling toolbar-related actions.

  • editor (Editor):

    • Manages the editable content area of the editor.
    • Handles text input, content rendering, and other editing functionalities.

  • footer (Footer):

    • Manages the footer area of the editor.
    • Can be used for displaying additional controls, information, or custom content.

  • history (string[]):

    • An array that keeps track of the history of content changes.
    • Used to implement undo/redo functionality by storing previous states of the content.

  • currentSelectionRange (Range | null):

    • Holds the current text selection range within the editor.
    • Used to manage and restore text selection, especially when the focus shifts away from the editor.

Constructor​

  • Signature: constructor(appElement: HTMLElement)
  • Description: Initializes a new instance of the EditorCore class. It sets up the essential components of the editor, such as state, eventManager, i18n, toolbar, editor, and footer. The constructor takes an HTMLElement where the editor will be mounted and initializes the editor's layout and styles.

Methods​

  • applyStyles(): Method to apply necessary styles to the editor elements.
  • handleKeydown(event: KeyboardEvent): Method to handle keyboard events.
  • injectStyles(): Method to inject styles into the editor.
  • saveCurrentSelection(): Method to save the current text selection within the editor.

EditorState Class​

Methods​

  • getContent(): Returns the current content of the editor.
  • setContent(newContent: string): Sets the content of the editor.
  • undo(): Reverts the last change made in the editor.
  • redo(): Reapplies the last undone change in the editor.
  • isUndo(): Checks if an undo operation is possible.
  • isRedo(): Checks if a redo operation is possible.

EventManager Class​

Methods​

  • subscribe(event: string, callback: Hook): Registers a callback to be executed when the specified event occurs.
  • publish(event: string, data?: any): Emits an event, triggering all associated callbacks.

I18n (Internationalization) Class​

Methods​

  • loadLanguage(lang: string): Loads the specified language asynchronously.
  • setCurrentLanguage(lang: string): Sets and loads the specified language.
  • translate(key: string): Translates a given key based on the current language.

Toolbar Class​

Methods​

  • applyStyles():

    • Applies a predefined set of styles to the toolbar.
    • These styles include border, background color, display type, alignment, and overflow behavior.

  • getToolbarElement(): HTMLDivElement | null:

    • Returns the HTML div element of the toolbar.
    • This method allows other plugins or components to access the toolbar's DOM element for additional manipulation or styling.

  • addHtmlItem(item: HTMLElement): void:

    • Adds a custom HTML element to the toolbar.
    • This method enables the integration of custom UI elements into the toolbar.

  • addButtonIcon(title: string, icon: string, action: () => void): HTMLDivElement:

    • Creates a button with an icon and adds it to the toolbar.
    • Parameters:
      • title: The tooltip text for the button.
      • icon: HTML string representing the icon to be displayed on the button.
      • action: A callback function executed when the button is clicked.
    • Returns the created button element, allowing further customization.

  • destroy(): void:

    • Removes the toolbar from the DOM and cleans up resources.
    • Ensures that references are cleared to prevent memory leaks.

Editor Class​

Methods​

  • applyStyles():

    • Applies custom styles to the editor element.
    • Styles include border, minimum height, overflow behavior, padding, and box-sizing.

  • getEditorElement(): HTMLDivElement | null:

    • Returns the editor's HTML div element.
    • This method allows access to the editor's DOM element for additional manipulation or styling.

  • setScreenSize(width: number, height: number): void:

    • Sets the width and height of the editor element.
    • Useful for dynamically adjusting the editor's size based on specific requirements or screen sizes.

  • clearScreenSize(): void:

    • Resets the width, height, and margin styles of the editor element to their default states.

  • handleBlur():

    • Internal method to handle blur events.
    • Saves the current selection range when the editor loses focus.

  • handleInput():

    • Internal method to handle input events.
    • Saves the current caret position and updates the editor's content in the core.

  • handlePaste(event: ClipboardEvent):

    • Internal method to handle paste events.
    • Processes pasted content, removes unwanted attributes, and inserts the cleaned content into the editor.

  • saveCaretPosition():

    • Saves the current position of the caret within the editor.

  • restoreCaretPosition():

    • Restores the caret to its saved position.

  • destroy(): void:

    • Cleans up the editor by removing event listeners and the editor element from the DOM.
    • Clears references to prevent memory leaks.

Methods​

  • applyStyles():

    • Applies a set of predefined styles to the footer.
    • Styles include border, background color, display type, alignment, and overflow behavior.

  • getElement(): HTMLDivElement | null:

    • Returns the HTML div element of the footer.
    • This method provides access to the footer's DOM element for further manipulation or styling.

  • enable():

    • Enables the footer, making it visible and interactive.
    • Adds the footer to the DOM if it's not already present and sets the enabled flag to true.

  • addHtmlItem(item: HTMLElement): void:

    • Adds a custom HTML element to the footer.
    • Enables the footer before appending the item, ensuring it's visible.

  • addButtonIcon(title: string, icon: string, action: () => void): HTMLDivElement:

    • Creates a button with an icon and adds it to the footer.
    • Parameters:
      • title: The tooltip text for the button.
      • icon: HTML string representing the icon to be displayed on the button.
      • action: A callback function executed when the button is clicked.
    • Returns the created button element for further customization.

  • destroy(): void:

    • Removes the footer from the DOM and clears resources.
    • Ensures that references are cleared to prevent memory leaks.