BookStack/resources/js/wysiwyg/nodes/callout.js

import {$createParagraphNode, ElementNode} from 'lexical';

export class Callout extends ElementNode {

    __category = 'info';

    static getType() {
        return 'callout';
    }

    static clone(node) {
        return new Callout(node.__category, node.__key);
    }

    constructor(category, key) {
        super(key);
        this.__category = category;
    }

    createDOM(_config, _editor) {
        const element = document.createElement('p');
        element.classList.add('callout', this.__category || '');
        return element;
    }

    updateDOM(prevNode, dom) {
        // Returning false tells Lexical that this node does not need its
        // DOM element replacing with a new copy from createDOM.
        return false;
    }

    insertNewAfter(selection, restoreSelection) {
        const anchorOffset = selection ? selection.anchor.offset : 0;
        const newElement = anchorOffset === this.getTextContentSize() || !selection
            ? $createParagraphNode() : $createCalloutNode(this.__category);

        newElement.setDirection(this.getDirection());
        this.insertAfter(newElement, restoreSelection);

        if (anchorOffset === 0 && !this.isEmpty() && selection) {
            const paragraph = $createParagraphNode();
            paragraph.select();
            this.replace(paragraph, true);
        }

        return newElement;
    }

    static importDOM() {
        return {
            p: node => {
                if (node.classList.contains('callout')) {
                    return {
                        conversion: element => {
                            let category = 'info';
                            const categories = ['info', 'success', 'warning', 'danger'];

                            for (const c of categories) {
                                if (element.classList.contains(c)) {
                                    category = c;
                                    break;
                                }
                            }

                            return {
                                node: new Callout(category),
                            };
                        },
                        priority: 3,
                    };
                }
                return null;
            },
        };
    }

    exportJSON() {
        return {
            ...super.exportJSON(),
            type: 'callout',
            version: 1,
            category: this.__category,
        };
    }

    static importJSON(serializedNode) {
        return $createCalloutNode(serializedNode.category);
    }

}

export function $createCalloutNode(category = 'info') {
    return new Callout(category);
}

export function $isCalloutNode(node) {
    return node instanceof Callout;
}