Lexical: Played with commands, extracted & improved callout node

resources/js/wysiwyg/nodes/callout.js

@@ -0,0 +1,98 @@
+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;
+}

resources/js/wysiwyg/nodes/index.js

@@ -0,0 +1,14 @@
+import {HeadingNode, QuoteNode} from '@lexical/rich-text';
+import {Callout} from './callout';
+
+/**
+ * Load the nodes for lexical.
+ * @returns {LexicalNode[]}
+ */
+export function getNodesForPageEditor() {
+    return [
+        Callout,
+        HeadingNode,
+        QuoteNode,
+    ];
+}