Lexical: Changed mention to be a decorator node

Allows better selection.
Also updated existing decorator file names to align with classes so
they're easier to find.
Also aligned/fixed decorator constuctor/setup methods.

Author: ssddanbrown

app/Util/HtmlDescriptionFilter.php

@@ -19,7 +19,7 @@ class HtmlDescriptionFilter
      */
     protected static array $allowedAttrsByElements = [
         'p' => [],
-        'a' => ['href', 'title', 'target'],
+        'a' => ['href', 'title', 'target', 'data-mention-user-id'],
         'ol' => [],
         'ul' => [],
         'li' => [],

resources/js/wysiwyg/index.ts

@@ -22,12 +22,13 @@ import {registerKeyboardHandling} from "./services/keyboard-handling";
 import {registerAutoLinks} from "./services/auto-links";
 import {contextToolbars, getBasicEditorToolbar, getMainEditorFullToolbar} from "./ui/defaults/toolbars";
 import {modals} from "./ui/defaults/modals";
-import {CodeBlockDecorator} from "./ui/decorators/code-block";
-import {DiagramDecorator} from "./ui/decorators/diagram";
+import {CodeBlockDecorator} from "./ui/decorators/CodeBlockDecorator";
+import {DiagramDecorator} from "./ui/decorators/DiagramDecorator";
 import {registerMouseHandling} from "./services/mouse-handling";
 import {registerSelectionHandling} from "./services/selection-handling";
 import {EditorApi} from "./api/api";
 import {registerMentions} from "./services/mentions";
+import {MentionDecorator} from "./ui/decorators/MentionDecorator";
 
 const theme = {
     text: {
@@ -151,7 +152,7 @@ export function createCommentEditorInstance(container: HTMLElement, htmlContent:
     });
 
     // TODO - Dedupe this with the basic editor instance
-    //   Changed elements: namespace, registerMentions, toolbar, public event usage
+    //   Changed elements: namespace, registerMentions, toolbar, public event usage, mentioned decorator
     const context: EditorUiContext = buildEditorUI(container, editor, options);
     editor.setRootElement(context.editorDOM);
 
@@ -168,6 +169,7 @@ export function createCommentEditorInstance(container: HTMLElement, htmlContent:
     context.manager.registerContextToolbar('link', contextToolbars.link);
     context.manager.registerModal('link', modals.link);
     context.manager.onTeardown(editorTeardown);
+    context.manager.registerDecoratorType('mention', MentionDecorator);
 
     setEditorContentFromHtml(editor, htmlContent);
 

resources/js/wysiwyg/lexical/link/LexicalMentionNode.ts

@@ -1,28 +1,28 @@
 import {
+    DecoratorNode,
     DOMConversion,
-    DOMConversionMap, DOMConversionOutput,
+    DOMConversionMap, DOMConversionOutput, DOMExportOutput,
     type EditorConfig,
-    ElementNode,
     LexicalEditor, LexicalNode,
-    SerializedElementNode,
+    SerializedLexicalNode,
     Spread
 } from "lexical";
+import {EditorDecoratorAdapter} from "../../ui/framework/decorator";
 
 export type SerializedMentionNode = Spread<{
     user_id: number;
     user_name: string;
     user_slug: string;
-}, SerializedElementNode>
+}, SerializedLexicalNode>
 
-export class MentionNode extends ElementNode {
+export class MentionNode extends DecoratorNode<EditorDecoratorAdapter> {
     __user_id: number = 0;
     __user_name: string = '';
     __user_slug: string = '';
 
     static getType(): string {
         return 'mention';
     }
-
     static clone(node: MentionNode): MentionNode {
         const newNode = new MentionNode(node.__key);
         newNode.__user_id = node.__user_id;
@@ -42,34 +42,55 @@ export class MentionNode extends ElementNode {
         return true;
     }
 
+    isParentRequired(): boolean {
+        return true;
+    }
+
+    decorate(editor: LexicalEditor, config: EditorConfig): EditorDecoratorAdapter {
+        return {
+            type: 'mention',
+            getNode: () => this,
+        };
+    }
+
     createDOM(_config: EditorConfig, _editor: LexicalEditor) {
         const element = document.createElement('a');
         element.setAttribute('target', '_blank');
-        element.setAttribute('href', window.baseUrl('/users/' + this.__user_slug));
-        element.setAttribute('data-user-mention-id', String(this.__user_id));
+        element.setAttribute('href', window.baseUrl('/user/' + this.__user_slug));
+        element.setAttribute('data-mention-user-id', String(this.__user_id));
         element.textContent = '@' + this.__user_name;
+        // element.setAttribute('contenteditable', 'false');
         return element;
     }
 
     updateDOM(prevNode: MentionNode): boolean {
         return prevNode.__user_id !== this.__user_id;
     }
 
+    exportDOM(editor: LexicalEditor): DOMExportOutput {
+        const element = this.createDOM(editor._config, editor);
+        // element.removeAttribute('contenteditable');
+        return {element};
+    }
+
     static importDOM(): DOMConversionMap|null {
         return {
             a(node: HTMLElement): DOMConversion|null {
-                if (node.hasAttribute('data-user-mention-id')) {
+                if (node.hasAttribute('data-mention-user-id')) {
                     return {
                         conversion: (element: HTMLElement): DOMConversionOutput|null => {
                             const node = new MentionNode();
                             node.setUserDetails(
-                                Number(element.getAttribute('data-user-mention-id') || '0'),
+                                Number(element.getAttribute('data-mention-user-id') || '0'),
                                 element.innerText.replace(/^@/, ''),
                                 element.getAttribute('href')?.split('/user/')[1] || ''
                             );
 
                             return {
                                 node,
+                                after(childNodes): LexicalNode[] {
+                                    return [];
+                                }
                             };
                         },
                         priority: 4,
@@ -82,7 +103,6 @@ export class MentionNode extends ElementNode {
 
     exportJSON(): SerializedMentionNode {
         return {
-            ...super.exportJSON(),
             type: 'mention',
             version: 1,
             user_id: this.__user_id,

resources/js/wysiwyg/services/mentions.ts

@@ -1,14 +1,11 @@
 import {
-    $createTextNode,
     $getSelection, $isRangeSelection,
     COMMAND_PRIORITY_NORMAL, RangeSelection, TextNode
 } from "lexical";
 import {KEY_AT_COMMAND} from "lexical/LexicalCommands";
 import {$createMentionNode} from "@lexical/link/LexicalMentionNode";
-import {el, htmlToDom} from "../utils/dom";
 import {EditorUiContext} from "../ui/framework/core";
-import {debounce} from "../../services/util";
-import {removeLoading, showLoading} from "../../services/dom";
+import {MentionDecorator} from "../ui/decorators/MentionDecorator";
 
 
 function enterUserSelectMode(context: EditorUiContext, selection: RangeSelection) {
@@ -32,128 +29,15 @@ function enterUserSelectMode(context: EditorUiContext, selection: RangeSelection
 
     const mention = $createMentionNode(0, '', '');
     newNode.replace(mention);
-    mention.select();
-
-    const revertEditorMention = () => {
-        context.editor.update(() => {
-            const text = $createTextNode('@');
-            mention.replace(text);
-            text.selectEnd();
-        });
-    };
 
     requestAnimationFrame(() => {
-        const mentionDOM = context.editor.getElementByKey(mention.getKey());
-        if (!mentionDOM) {
-            revertEditorMention();
-            return;
-        }
-
-        const selectList = buildAndShowUserSelectorAtElement(context, mentionDOM);
-        handleUserListLoading(selectList);
-        handleUserSelectCancel(context, selectList, revertEditorMention);
-    });
-
-
-    // TODO - On enter, replace with name mention element.
-}
-
-function handleUserSelectCancel(context: EditorUiContext, selectList: HTMLElement, revertEditorMention: () => void) {
-    const controller = new AbortController();
-
-    const onCancel = () => {
-        revertEditorMention();
-        selectList.remove();
-        controller.abort();
-    }
-
-    selectList.addEventListener('keydown', (event) => {
-        if (event.key === 'Escape') {
-            onCancel();
-        }
-    }, {signal: controller.signal});
-
-    const input = selectList.querySelector('input') as HTMLInputElement;
-    input.addEventListener('keydown', (event) => {
-        if (event.key === 'Backspace' && input.value === '') {
-            onCancel();
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }, {signal: controller.signal});
-
-    context.editorDOM.addEventListener('click', (event) => {
-        onCancel()
-    }, {signal: controller.signal});
-    context.editorDOM.addEventListener('keydown', (event) => {
-        onCancel();
-    }, {signal: controller.signal});
-}
-
-function handleUserListLoading(selectList: HTMLElement) {
-    const cache = new Map<string, string>();
-
-    const updateUserList = async (searchTerm: string) => {
-        // Empty list
-        for (const child of [...selectList.children].slice(1)) {
-            child.remove();
-        }
-
-        // Fetch new content
-        let responseHtml = '';
-        if (cache.has(searchTerm)) {
-            responseHtml = cache.get(searchTerm) || '';
-        } else {
-            const loadingWrap = el('li');
-            showLoading(loadingWrap);
-            selectList.appendChild(loadingWrap);
-
-            const resp = await window.$http.get(`/search/users/mention?search=${searchTerm}`);
-            responseHtml = resp.data as string;
-            cache.set(searchTerm, responseHtml);
-            loadingWrap.remove();
+        const mentionDecorator = context.manager.getDecoratorByNodeKey(mention.getKey());
+        if (mentionDecorator instanceof MentionDecorator) {
+            mentionDecorator.showSelection()
         }
-
-        const doc = htmlToDom(responseHtml);
-        const toInsert = doc.querySelectorAll('li');
-        for (const listEl of toInsert) {
-            const adopted = window.document.adoptNode(listEl) as HTMLElement;
-            selectList.appendChild(adopted);
-        }
-
-    };
-
-    // Initial load
-    updateUserList('');
-
-    const input = selectList.querySelector('input') as HTMLInputElement;
-    const updateUserListDebounced = debounce(updateUserList, 200, false);
-    input.addEventListener('input', () => {
-        const searchTerm = input.value;
-        updateUserListDebounced(searchTerm);
     });
 }
 
-function buildAndShowUserSelectorAtElement(context: EditorUiContext, mentionDOM: HTMLElement): HTMLElement {
-    const searchInput = el('input', {type: 'text'});
-    const searchItem = el('li', {}, [searchInput]);
-    const userSelect = el('ul', {class: 'suggestion-box dropdown-menu'}, [searchItem]);
-
-    context.containerDOM.appendChild(userSelect);
-
-    userSelect.style.display = 'block';
-    userSelect.style.top = '0';
-    userSelect.style.left = '0';
-    const mentionPos = mentionDOM.getBoundingClientRect();
-    const userSelectPos = userSelect.getBoundingClientRect();
-    userSelect.style.top = `${mentionPos.bottom - userSelectPos.top + 3}px`;
-    userSelect.style.left = `${mentionPos.left - userSelectPos.left}px`;
-
-    searchInput.focus();
-
-    return userSelect;
-}
-
 export function registerMentions(context: EditorUiContext): () => void {
     const editor = context.editor;
 

…s/js/wysiwyg/ui/decorators/code-block.ts …iwyg/ui/decorators/CodeBlockDecorator.tsresources/js/wysiwyg/ui/decorators/code-block.ts renamed to resources/js/wysiwyg/ui/decorators/CodeBlockDecorator.ts resources/js/wysiwyg/ui/decorators/code-block.ts renamed to resources/js/wysiwyg/ui/decorators/CodeBlockDecorator.ts

@@ -14,7 +14,7 @@ export class CodeBlockDecorator extends EditorDecorator {
     // @ts-ignore
     protected editor: any = null;
 
-    setup(context: EditorUiContext, element: HTMLElement) {
+    setup(element: HTMLElement) {
         const codeNode = this.getNode() as CodeBlockNode;
         const preEl = element.querySelector('pre');
         if (!preEl) {
@@ -35,24 +35,24 @@ export class CodeBlockDecorator extends EditorDecorator {
 
         element.addEventListener('click', event => {
             requestAnimationFrame(() => {
-                context.editor.update(() => {
+                this.context.editor.update(() => {
                     $selectSingleNode(this.getNode());
                 });
             });
         });
 
         element.addEventListener('dblclick', event => {
-            context.editor.getEditorState().read(() => {
-                $openCodeEditorForNode(context.editor, (this.getNode() as CodeBlockNode));
+            this.context.editor.getEditorState().read(() => {
+                $openCodeEditorForNode(this.context.editor, (this.getNode() as CodeBlockNode));
             });
         });
 
         const selectionChange = (selection: BaseSelection|null): void => {
             element.classList.toggle('selected', $selectionContainsNode(selection, codeNode));
         };
-        context.manager.onSelectionChange(selectionChange);
+        this.context.manager.onSelectionChange(selectionChange);
         this.onDestroy(() => {
-            context.manager.offSelectionChange(selectionChange);
+            this.context.manager.offSelectionChange(selectionChange);
         });
 
         // @ts-ignore
@@ -89,11 +89,11 @@ export class CodeBlockDecorator extends EditorDecorator {
         }
     }
 
-    render(context: EditorUiContext, element: HTMLElement): void {
+    render(element: HTMLElement): void {
         if (this.completedSetup) {
             this.update();
         } else {
-            this.setup(context, element);
+            this.setup(element);
         }
     }
 }