How to use the roosterjs-editor-types.PluginEventType.KeyUp function in roosterjs-editor-types

// length here in preparation for onAndroidInputEvent
                    this.currentInputLength = this.calcInputLength(event);
                    this.isPendingInputEventHandling = true;
                } else {
                    this.onKeyDownEvent(event);
                    this.isPendingInputEventHandling = false;
                }
                break;

            case PluginEventType.Input:
                if (this.isPendingInputEventHandling) {
                    this.onAndroidInputEvent(event);
                }
                break;

            case PluginEventType.KeyUp:
                if (!this.eventHandledOnKeyDown && this.shouldHandleKeyUpEvent(event)) {
                    this.onKeyUpDomEvent(event);
                    this.isPendingInputEventHandling = false;
                }
                break;

            case PluginEventType.MouseUp:
                if (this.isSuggesting) {
                    this.setIsSuggesting(false);
                }
                break;

            case PluginEventType.Scroll:
                if (this.dataProvider.onScroll) {
                    // Dispatch scroll event to data provider
                    this.dataProvider.onScroll(event.scrollContainer);

private createEventHandlers() {
        this.eventDisposers = [
            attachDomEvent(this.core, 'input', null, this.stopPropagation),
            attachDomEvent(this.core, 'keypress', PluginEventType.KeyPress, this.onKeyPress),
            attachDomEvent(this.core, 'keydown', PluginEventType.KeyDown, this.stopPropagation),
            attachDomEvent(this.core, 'keyup', PluginEventType.KeyUp, this.stopPropagation),
            attachDomEvent(this.core, 'mousedown', PluginEventType.MouseDown),
            attachDomEvent(this.core, 'mouseup', PluginEventType.MouseUp),
            attachDomEvent(this.core, 'compositionstart', null, () => (this.inIME = true)),
            attachDomEvent(
                this.core,
                'compositionend',
                PluginEventType.CompositionEnd,
                () => (this.inIME = false)
            ),
            attachDomEvent(this.core, 'focus', null, () => {
                // Restore the last saved selection first
                if (this.core.cachedSelectionRange && !this.disableRestoreSelectionOnFocus) {
                    restoreSelection(this.core);
                }
                this.core.cachedSelectionRange = null;
            }),

public onPluginEvent(event: PluginEvent): void {
        const domEvent = event as PluginDomEvent;
        const keyboardEvent = domEvent.rawEvent as KeyboardEvent;

        if (event.eventType === PluginEventType.KeyDown) {
            this._eventHandledOnKeyDown = false;
            if (this._isSuggesting) {
                this._onKeyDownSuggestingDomEvent(domEvent);
            } else if (keyboardEvent.which === KeyCodes.backspace && this._canUndoEmoji) {
                // If KeyDown is backspace and canUndoEmoji, call editor undo
                this._editor.undo();
                this._handleEventOnKeyDown(domEvent);
                this._canUndoEmoji = false;
            }
        } else if (event.eventType === PluginEventType.KeyUp && !this._isModifierKey(keyboardEvent.key)) {
            if (this._isSuggesting) {
                this._onKeyUpSuggestingDomEvent(domEvent);
            } else {
                this._onKeyUpDomEvent(domEvent);
            }
        } else if (event.eventType === PluginEventType.MouseUp) {
            // If MouseUp, the emoji cannot be undone
            this._canUndoEmoji = false;
            this._setIsSuggesting(false);
        }
    }

public onPluginEvent(event: PluginEvent) {
        if (event.eventType == PluginEventType.KeyUp || event.eventType == PluginEventType.MouseUp || event.eventType == PluginEventType.ContentChanged) {
            let formatState = getFormatState(this.editor);
            if (formatState) {
                let result = '';
                if (formatState.fontName) {
                    result += ' <b>fontName:</b> ' + formatState.fontName;
                }
                if (formatState.fontSize) {
                    result += ' <b>fontSize:</b> ' + formatState.fontSize;
                }
                if (formatState.backgroundColor) {
                    result += ' <b>backgroundColor:</b> ' + formatState.backgroundColor;
                }
                if (formatState.textColor) {
                    result += ' <b>textColor:</b> ' + formatState.textColor;
                }
                if (formatState.isBold) {

public onPluginEvent(event: PluginEvent) {
        if (event.eventType == PluginEventType.KeyUp || event.eventType == PluginEventType.MouseUp || event.eventType == PluginEventType.ContentChanged) {
            let rect = this.editor.getCursorRect();
            if (rect) {
                let result =
                    'top=' +
                    rect.top +
                    '; bottom=' +
                    rect.bottom +
                    '; left=' +
                    rect.left +
                    '; right=' +
                    rect.right;
                this.resultContainer.innerText = result;
            }
        }
    }
}

import { Editor, EditorPlugin, browserData } from 'roosterjs-editor-core';
import { PluginEvent, PluginEventType, PluginDomEvent } from 'roosterjs-editor-types';
import { DefaultShortcut } from 'roosterjs-editor-plugins';
import { KeyCodes } from 'office-ui-fabric-react/lib/Utilities';
import { createLinkWithPrompt } from 'roosterjs-react-common';

import RoosterCommandBar from '../components/RoosterCommandBar';
import RoosterCommandBarPluginInterface from '../schema/RoosterCommandBarPluginInterface';

export default class RoosterCommandBarPlugin implements EditorPlugin, RoosterCommandBarPluginInterface {
    private static readonly EventTypesToHandle: { [eventType: number]: boolean } = {
        [PluginEventType.KeyUp]: true,
        [PluginEventType.MouseDown]: true,
        [PluginEventType.MouseUp]: true,
        [PluginEventType.ContentChanged]: true
    };

    private editor: Editor;
    private commandBars: RoosterCommandBar[] = [];
    private defaultShortcut: DefaultShortcut = new DefaultShortcut();
    private strings: { [key: string]: string };

    constructor(strings?: { [key: string]: string }) {
        this.strings = strings;
    }

    public initialize(editor: Editor): void {
        this.defaultShortcut.initialize(editor);

onPluginEvent(event: PluginEvent) {
        if (
            event.eventType == PluginEventType.KeyUp ||
            event.eventType == PluginEventType.MouseUp ||
            event.eventType == PluginEventType.ContentChanged
        ) {
            this.updateFormatState();
        }
    }

onPluginEvent(event: PluginEvent) {
        if (
            this.ribbon &&
            (event.eventType == PluginEventType.KeyUp ||
                event.eventType == PluginEventType.MouseUp ||
                event.eventType == PluginEventType.ContentChanged)
        ) {
            this.ribbon.forceUpdate();
        }
    }
}

private renderEvent(event: PluginEvent): JSX.Element {
        switch (event.eventType) {
            case PluginEventType.KeyDown:
            case PluginEventType.KeyPress:
            case PluginEventType.KeyUp:
                return (
                    <span>
                        Key=
                        {event.rawEvent.which}
                    </span>
                );

            case PluginEventType.MouseDown:
            case PluginEventType.MouseUp:
                return (
                    <span>
                        Button=
                        {event.rawEvent.button}, SrcElement=
                        {event.rawEvent.target &amp;&amp; getTagOfNode(event.rawEvent.target as Node)},
                        PageX=
                        {event.rawEvent.pageX}, PageY=
</span>

public onPluginEvent(event: PluginEvent): void {
        if (
            event.eventType == PluginEventType.KeyUp ||
            event.eventType == PluginEventType.MouseUp ||
            event.eventType == PluginEventType.ContentChanged
        ) {
            this.ribbons.forEach(ribbon => ribbon.onFormatChange());
        }
    }