InputMediator Class ​

class MyCustomInputMediatorClass implements InputMediator {
    /* implementation details */
}

deepdeskSDK.mount(element, {
    inputMediator: new MyCustomInputMediatorClass(element)
});

abstract class InputMediator<HTMLElementType extends HTMLElement> {
    /*
     * Internal reference to HTML Element
     */
    protected element: HTMLElementType;

    /*
     * Instantiate the input mediator by pointing it to an element.
     */
    constructor(element: HTMLElementType);

    /*
     * Get the plain text from the input element
     * To be implemented in inheriting class
     */
    abstract getText(): string;

    /*
     * Get the raw html from the input element
     * To be implemented in inheriting class
     */
    abstract getHTML(): string;

    /*
     * Wrapper around a callback function which changes the contents of the input element.
     * The callback is invoked immediatly.
     * This method should prevent applied changes to bubble up as user changes.
     * This methos is also responsible for repositioning the typing cursor.
     * To be implemented in inheriting class
     */
    abstract applyChanges(callback: (element: HTMLElementType) => void | Promise<void>): void | Promise<void>;

    /*
     * Focus the input element
     */
    focus(): void;

    /*
     * Internally used to emit one of the InputEventMap events
     */
    emit<K extends keyof InputEventMap>(type: K, ...args: Parameters<InputEventMap[K]>): void;

    /*
     * Add event listener for one of the InputEventMap events.
     * Returns a function which removes the listener.
     */
    on<K extends keyof InputEventMap>(type: K, handler: InputHandler<K>): void;

    /*
     * Ignore events from the input element.
     */
    deactivate(): void;

    /*
     * Continue listening to events from the input element.
     * The input mediator starts as active.
     */
    activate(): void;

    /*
     * Cleanup all event listeners and changes made to the platform's DOM.
     */
    dispose(): void;
}

interface InputEventMap {
    /**
     * The InputMediator should emit a change event when a user changes the input directly
     * or indirectly via the platform (eg. inserting an emoji from a dropdown).
     */
    change: (event: { plainText: string }) => void;

    /**
     * An updated event should be triggered when the input's contents has changed.
     */
    updated: (event: { plainText: string }) => void;

    /**
     * A selection event is emitted only when the selection or caret position changes,
     * and nothing else.
     */
    selection: (selection: { start: number; end: number }) => void;

    /**
     * Fired when the input element receives a keydown event
     */
    keydown: (event: KeyboardEvent) => void;

    /**
     * Fired when the input element receives a paste event.
     * The input mediator is responsible for providing the selected and pasted texts.
     */
    paste: (event: {
        pastedText: string;
        selectionText: string;
    }) => void;

    /**
     * Fired when the input element receives a cut event.
     * The input mediator is responsible for providing the selected text.
     */
    cut: (event: { selectionText: string }) => void;

    /**
     * Fired when the input element detects if the message is succesfully submitted.
     * By default a mounted instance does not listen to input submit.
     * Either manually trigger `deepdeskSDK.notifySubmit()` on successful submit. (Preferred)
     * Or enable submit detection `deepdeskSDK.mount(element, { detectSubmit: true })`
     */
    submit: () => void;

    /**
     * Fired when the input element is disabled.
     * Textarea: <textarea disabled />
     * Content editable: <div contenteditable="false" />
     */
    disabled: () => void;

    /**
     * Fired when the input element is enabled after being disabled.
     */
    enabled: () => void;

    /**
     * Fired when the input element received a focus event
     */
    focus: () => void;

    /**
     * Fired when the input element received a blur event
     */
    blur: () => void;
}