How to use roosterjs-editor-core - 10 common examples

this.dataProvider.selectOption &&
                (keyboardEvent.key == ENTER_CHARCODE || keyboardEvent.key == TAB_CHARCODE)
            ) {
                this.dataProvider.selectOption();
                this.cancelDefaultKeyDownEvent(event);
            } else {
                // Currently no op.
            }
        } else {
            if (keyboardEvent.key == BACKSPACE_CHARCODE) {
                const nodeRemoved = this.tryRemoveNode(event);
                if (nodeRemoved) {
                    this.cancelDefaultKeyDownEvent(event);
                }
            } else if (keyboardEvent.key == DELETE_CHARCODE) {
                let searcher = cacheGetContentSearcher(event, this.editor);
                let nodeAfterCursor = searcher.getInlineElementAfter()
                    ? searcher.getInlineElementAfter().getContainerNode()
                    : null;
                let nodeId = nodeAfterCursor ? this.getIdValue(nodeAfterCursor) : null;
                if (nodeId && nodeId.indexOf(this.pickerOptions.elementIdPrefix) == 0) {
                    let replacementNode = this.dataProvider.onRemove(nodeAfterCursor, false);
                    this.replaceNode(nodeAfterCursor, replacementNode);
                    this.cancelDefaultKeyDownEvent(event);
                }
            }
        }
    }

function cacheGetStructuredElement(event: PluginKeyboardEvent, editor: Editor) {
    return cacheGetEventData(event, 'FIRST_STRUCTURE', () => {
        // Provide a chance to keep browser default behavior by pressing SHIFT
        let element = event.rawEvent.shiftKey ? null : editor.getElementAtCursor(CHILD_SELECTOR);

        if (element) {
            let range = editor.getSelectionRange();
            if (
                range &&
                range.collapsed &&
                isPositionAtBeginningOf(Position.getStart(range), element) &&
                !editor.getBodyTraverser(element).getPreviousBlockElement()
            ) {
                return editor.getElementAtCursor(CHILD_PARENT_TAG_MAP[getTagOfNode(element)]);
            }
        }

        return null;

function cacheGetCommand(event: PluginKeyboardEvent) {
    return cacheGetEventData(event, 'DEFAULT_SHORT_COMMAND', () => {
        let e = event.rawEvent;
        let key =
            // Need to check ALT key to be false since in some language (e.g. Polski) uses AltGr to input some special charactors
            // In that case, ctrlKey and altKey are both true in Edge, but we should not trigger any shortcut function here
            event.eventType == PluginEventType.KeyDown && !e.altKey
                ? e.which |
                  (e.metaKey && Keys.Meta) |
                  (e.shiftKey && Keys.Shift) |
                  (e.ctrlKey && Keys.Ctrl)
                : 0;
        return key && commands.filter(cmd => (Browser.isMac ? cmd.macKey : cmd.winKey) == key)[0];
    });
}

function cacheGetLinkData(event: PluginEvent, editor: Editor): LinkData {
    return event.eventType == PluginEventType.KeyDown ||
        (event.eventType == PluginEventType.ContentChanged && event.source == ChangeSource.Paste)
        ? cacheGetEventData(event, 'LINK_DATA', () => {
              // First try to match link from the whole paste string from the plain text in clipboard.
              // This helps when we paste a link next to some existing character, and the text we got
              // from clipboard will only contain what we pasted, any existing characters will not
              // be included.
              let clipboardData =
                  event.eventType == PluginEventType.ContentChanged &&
                  event.source == ChangeSource.Paste &&
                  (event.data as ClipboardData);
              let link = matchLink((clipboardData.text || '').trim());
              let searcher = cacheGetContentSearcher(event, editor);

              // In case the matched link is already inside a <a> tag, we do a range search.
              // getRangeFromText will return null if the given text is already in a LinkInlineElement
              if (link &amp;&amp; searcher.getRangeFromText(link.originalUrl, false /*exactMatch*/)) {
                  return link;
              }
</a>

public componentDidMount(): void {
        const { readonly, activateRoosterOnMount, activateInViewMode } = this.props;

        if (!readonly && activateRoosterOnMount) {
            if (activateInViewMode) {
                this._editor = new Editor(this._contentDiv, this._editorOptions);
                this._updateContentToViewState(true /* isInitializing */);
            } else {
                this._trySwithToEditMode();
            }
        } else if (!this._hasPlaceholder) {
            this._refreshPlaceholder();
        }
    }

// So here we add an extra SPAN for Edge to workaround this bug
const NEWLINE_HTML = Browser.isEdge ? '<div><span><br></span></div>' : '<div><br></div>';
const CHILD_PARENT_TAG_MAP: { [childTag: string]: string } = {
    TD: 'TABLE',
    TH: 'TABLE',
    LI: 'OL,UL',
};
const CHILD_SELECTOR = Object.keys(CHILD_PARENT_TAG_MAP).join(',');

/**
 * InsertLineBeforeStructuredNode edit feature, provides the ability to insert an empty line before
 * a structured element (bullet/numbering list, blockquote, table) if the element is at beginning of
 * document
 */
export const InsertLineBeforeStructuredNodeFeature: ContentEditFeature = {
    keys: [Keys.ENTER],
    shouldHandleEvent: cacheGetStructuredElement,
    handleEvent: (event, editor) =&gt; {
        let element = cacheGetStructuredElement(event, editor);
        let div = fromHtml(NEWLINE_HTML, editor.getDocument())[0] as HTMLElement;
        editor.addUndoSnapshot(() =&gt; {
            element.parentNode.insertBefore(div, element);
            // Select the new line when we are in table. This is the same behavior with Word
            if (getTagOfNode(element) == 'TABLE') {
                editor.select(new Position(div, PositionType.Begin).normalize());
            }
        });
        event.rawEvent.preventDefault();
    },
};

function cacheGetStructuredElement(event: PluginKeyboardEvent, editor: Editor) {

/**
 * AutoLink edit feature, provides the ability to automatically convert text user typed or pasted
 * in hyperlink format into a real hyperlink
 */
export const AutoLink: GenericContentEditFeature = {
    keys: [Keys.ENTER, Keys.SPACE, Keys.CONTENTCHANGED],
    shouldHandleEvent: cacheGetLinkData,
    handleEvent: autoLink,
};

/**
 * UnlinkWhenBackspaceAfterLink edit feature, provides the ability to convert a hyperlink back into text
 * if user presses BACKSPACE right after a hyperlink
 */
export const UnlinkWhenBackspaceAfterLink: GenericContentEditFeature = {
    keys: [Keys.BACKSPACE],
    shouldHandleEvent: hasLinkBeforeCursor,
    handleEvent: (event, editor) => {
        event.rawEvent.preventDefault();
        removeLink(editor);
    },
};

function cacheGetLinkData(event: PluginEvent, editor: Editor): LinkData {
    return event.eventType == PluginEventType.KeyDown ||
        (event.eventType == PluginEventType.ContentChanged && event.source == ChangeSource.Paste)
        ? cacheGetEventData(event, 'LINK_DATA', () => {
              // First try to match link from the whole paste string from the plain text in clipboard.
              // This helps when we paste a link next to some existing character, and the text we got
              // from clipboard will only contain what we pasted, any existing characters will not
              // be included.
              let clipboardData =

if ((keyboardEvent.which === KEYCODE_COLON || keyboardEvent.which === KEYCODE_COLON_FIREFOX) && wordBeforeCursor === ":") {
            const { onKeyboardTriggered = NullFunction } = this.options;
            this._setIsSuggesting(true);
            onKeyboardTriggered();
        } else if (wordBeforeCursor) {
            const cursorData = cacheGetContentSearcher(event, this._editor);
            const charBeforeCursor = cursorData ? cursorData.getSubStringBefore(1) : null;

            // It is possible that the word before the cursor is ahead of the pluginEvent we are handling
            // ex. WordBeforeCursor is ":D"" but the event we are currently handling is for the : key
            // Check that the char before the cursor is actually the key event we are currently handling
            // Otherwise we set canUndoEmoji to early and user is unable to backspace undo on the inserted emoji
            if (keyboardEvent.key === charBeforeCursor) {
                const emoji = matchShortcut(wordBeforeCursor);
                if (emoji && this._insertEmoji(emoji, wordBeforeCursor)) {
                    clearContentSearcherCache(event);
                    this._canUndoEmoji = true;
                }
            }
        }
    }

editor.performAutoComplete(() => {
            replaceWithNode(editor, linkData.originalUrl, anchor, false /* exactMatch */, searcher);

            // The content at cursor has changed. Should also clear the cursor data cache
            clearContentSearcherCache(event);
            return anchor;
        }, ChangeSource.AutoLink);
    });

/**
 * DefaultShortcut edit feature, provides shortcuts for the following features:
 * Ctrl/Meta+B: toggle bold style
 * Ctrl/Meta+I: toggle italic style
 * Ctrl/Meta+U: toggle underline style
 * Ctrl/Meta+Z: undo
 * Ctrl+Y/Meta+Shift+Z: redo
 * Ctrl/Meta+PERIOD: toggle bullet list
 * Ctrl/Meta+/: toggle numbering list
 * Ctrl/Meta+Shift+>: increase font size
 * Ctrl/Meta+Shift+<: decrease font size
 */
export const DefaultShortcut: ContentEditFeature = {
    allowFunctionKeys: true,
    keys: [Keys.B, Keys.I, Keys.U, Keys.Y, Keys.Z, Keys.COMMA, Keys.PERIOD, Keys.FORWARDSLASH],
    shouldHandleEvent: cacheGetCommand,
    handleEvent: (event, editor) => {
        let command = cacheGetCommand(event);
        if (command) {
            command.action(editor);
            event.rawEvent.preventDefault();
            event.rawEvent.stopPropagation();
        }
    },
};

function cacheGetCommand(event: PluginKeyboardEvent) {
    return cacheGetEventData(event, 'DEFAULT_SHORT_COMMAND', () => {
        let e = event.rawEvent;
        let key =
            // Need to check ALT key to be false since in some language (e.g. Polski) uses AltGr to input some special charactors