How to use the quill/modules/keyboard.match function in quill

To help you get started, we’ve selected a few quill examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vanilla / vanilla / plugins / rich-editor / src / scripts / quill / FocusModule.ts View on Github external
blotForActiveElement.remove();
                forceSelectionUpdate();

                // Otherwise if we're just in quill normally, we special handling in case the previous item is an embed blot.
            } else if (this.quill.hasFocus()) {
                const eventWasHandled = this.handleDeleteOnQuill();
                if (eventWasHandled) {
                    event.preventDefault();
                    event.stopPropagation();
                    return;
                }
            }
        }

        // Handle the enter key.
        if (KeyboardModule.match(event, KeyboardModule.keys.ENTER)) {
            if (blotForActiveElement instanceof FocusableEmbedBlot) {
                event.preventDefault();
                event.stopPropagation();
                blotForActiveElement.insertNewlineAfter();
            }
        }
    };
github vanilla / vanilla / plugins / rich-editor / src / scripts / quill / FocusModule.ts View on Github external
private tabListener = (event: KeyboardEvent) => {
        if (!this.formWrapper!.contains(document.activeElement)) {
            return;
        }

        let eventWasHandled = false;

        if (KeyboardModule.match(event, { key: KeyboardModule.keys.TAB, shiftKey: true })) {
            eventWasHandled = this.handleShiftTab();
        } else if (KeyboardModule.match(event, { key: KeyboardModule.keys.TAB, shiftKey: false })) {
            eventWasHandled = this.handleTab();
        }

        if (eventWasHandled) {
            event.preventDefault();
            event.stopPropagation();
        }
    };
github vanilla / vanilla / plugins / rich-editor / src / scripts / toolbars / MentionToolbar.tsx View on Github external
const currentItemIsLoader = activeSuggestionID === this.loaderID;

            const getIDFromIndex = (newIndex: number) => {
                return isLoading && newIndex === lastIndex ? this.loaderID : suggestions.data![newIndex].domID;
            };

            switch (true) {
                case Keyboard.match(event, Keyboard.keys.DOWN): {
                    const newIndex = activeSuggestionIndex === lastIndex ? firstIndex : nextIndex;
                    const newItemID = getIDFromIndex(newIndex);
                    this.props.suggestionActions.setActive(newItemID, newIndex);
                    event.preventDefault();
                    event.stopPropagation();
                    break;
                }
                case Keyboard.match(event, Keyboard.keys.UP): {
                    const newIndex = activeSuggestionIndex === firstIndex ? lastIndex : prevIndex;
                    const newItemID = getIDFromIndex(newIndex);
                    this.props.suggestionActions.setActive(newItemID, newIndex);
                    event.preventDefault();
                    event.stopPropagation();
                    break;
                }
                case Keyboard.match(event, Keyboard.keys.ENTER): {
                    if (suggestions.data.length > 0 && !currentItemIsLoader) {
                        this.confirmActiveMention();
                        event.preventDefault();
                        event.stopPropagation();
                    } else {
                        this.cancelActiveMention();
                    }
                    break;
github vanilla / vanilla / plugins / rich-editor / src / scripts / flyouts / EmbedFlyout.tsx View on Github external
const buttonKeyDownHandler = (event: React.KeyboardEvent) => {
        if (KeyboardModule.match(event.nativeEvent, "enter")) {
            event.preventDefault();
            event.stopPropagation();
            isInputValid && submitUrl();
        }
    };
github vanilla / vanilla / plugins / rich-editor / src / scripts / components / toolbars / InlineToolbar.tsx View on Github external
private onInputKeyDown = (event: React.KeyboardEvent) => {
        if (Keyboard.match(event.nativeEvent, "enter")) {
            event.preventDefault();
            this.formatter.link(this.props.lastGoodSelection, this.state.inputValue);
            this.clearLinkInput();
        }

        this.escFunction(event.nativeEvent);
    };
github vanilla / vanilla / plugins / rich-editor / src / scripts / toolbars / MentionToolbar.tsx View on Github external
event.preventDefault();
                        event.stopPropagation();
                    } else {
                        this.cancelActiveMention();
                    }
                    break;
                }
                case Keyboard.match(event, Keyboard.keys.TAB): {
                    if (!currentItemIsLoader) {
                        this.confirmActiveMention();
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    break;
                }
                case Keyboard.match(event, Keyboard.keys.ESCAPE): {
                    this.cancelActiveMention();
                    event.preventDefault();
                    event.stopPropagation();
                    break;
                }
            }
        }
    };
github vanilla / vanilla / plugins / rich-editor / src / scripts / toolbars / MentionToolbar.tsx View on Github external
private keyDownListener = (event: KeyboardEvent) => {
        const { suggestions, activeSuggestionIndex, activeSuggestionID, isLoading } = this.props;
        const { mentionSelection } = this.props;
        const inActiveMention = mentionSelection !== null;

        if (!suggestions || suggestions.status !== LoadStatus.SUCCESS || !suggestions.data) {
            return;
        }

        if (this.quill.hasFocus() && inActiveMention && !this.hasApiResponse) {
            if (Keyboard.match(event, Keyboard.keys.ENTER)) {
                this.cancelActiveMention();
            }
            return;
        }

        if (this.quill.hasFocus() && inActiveMention) {
            const firstIndex = 0;
            const nextIndex = activeSuggestionIndex + 1;
            const prevIndex = activeSuggestionIndex - 1;
            const userLength = Math.min(MentionToolbar.SUGGESTION_LIMIT, suggestions.data.length);
            const lastIndex = isLoading ? userLength : userLength - 1;
            const currentItemIsLoader = activeSuggestionID === this.loaderID;

            const getIDFromIndex = (newIndex: number) => {
                return isLoading && newIndex === lastIndex ? this.loaderID : suggestions.data![newIndex].domID;
            };
github vanilla / vanilla / plugins / rich-editor / src / scripts / toolbars / MentionToolbar.tsx View on Github external
}

        if (this.quill.hasFocus() && inActiveMention) {
            const firstIndex = 0;
            const nextIndex = activeSuggestionIndex + 1;
            const prevIndex = activeSuggestionIndex - 1;
            const userLength = Math.min(MentionToolbar.SUGGESTION_LIMIT, suggestions.data.length);
            const lastIndex = isLoading ? userLength : userLength - 1;
            const currentItemIsLoader = activeSuggestionID === this.loaderID;

            const getIDFromIndex = (newIndex: number) => {
                return isLoading && newIndex === lastIndex ? this.loaderID : suggestions.data![newIndex].domID;
            };

            switch (true) {
                case Keyboard.match(event, Keyboard.keys.DOWN): {
                    const newIndex = activeSuggestionIndex === lastIndex ? firstIndex : nextIndex;
                    const newItemID = getIDFromIndex(newIndex);
                    this.props.suggestionActions.setActive(newItemID, newIndex);
                    event.preventDefault();
                    event.stopPropagation();
                    break;
                }
                case Keyboard.match(event, Keyboard.keys.UP): {
                    const newIndex = activeSuggestionIndex === firstIndex ? lastIndex : prevIndex;
                    const newItemID = getIDFromIndex(newIndex);
                    this.props.suggestionActions.setActive(newItemID, newIndex);
                    event.preventDefault();
                    event.stopPropagation();
                    break;
                }
                case Keyboard.match(event, Keyboard.keys.ENTER): {
github vanilla / vanilla / plugins / rich-editor / src / scripts / toolbars / InlineToolbar.tsx View on Github external
private onInputKeyDown = (event: React.KeyboardEvent) => {
        if (Keyboard.match(event.nativeEvent, "enter")) {
            event.preventDefault();
            this.formatter.link(this.state.inputValue);
            this.clearLinkInput();
        }

        this.escFunction(event.nativeEvent);
    };