@veridical/plugins NPM

Plugins for veridical

See VeridicalEditorPlugins.tsx for usage of all these plugins along with many plugins from lexical and @lexical/react

AddLinkDialogPlugin

Shows a dialog to input link whenever a link node is created.

AddNodeDialogPlugin

Registers command to show AddNodeDialog

import { ADD_NODE_DIALOG_COMMAND } from '@veridical/utils';

editor.dispatchCommand(ADD_NODE_DIALOG_COMMAND, {
    selectedNode: node, // New node will be added after this node.
});

AddNodeShortcutPlugin

Registers a shortcut to dispatchCommand for AddNodeDialog

export default function Editor() {
    function isKeydown(ev: KeyboardEvent) {
        if (ev.ctrlKey && ev.key === 'k') return true;
        return false;
    }
    return (
        <Veridical>
            <AddNodeShortcutPlugin isKeydown={isKeydown} />
        </Veridical>
    );
}

AutoLinkPlugin

Creates links according to link's regex, uses @lexical/react/LexicalAutoLinkPlugin

CodeActionMenuLeft

A menu container is placed at code node's top left corner on hover, any React Component can be passed as children.

CodeActionMenuRight

Same as code action menu left.

CodeHighlightPlugin

Highlights code using registerCodeHighlighting from @lexical/code

HighlightMenuPlugin

Shows editing option menu when some text is highlighted.

ImageDialogPlugin

Registers command to show image dialog

import { IMAGE_DIALOG_COMMAND } from '@veridical/utils';

editor.dispatchCommand(IMAGE_DIALOG_COMMAND, {
    imageNode: imgNode,
    action: 'add', // add or edit
});