Esbuild & Mentions: Updated interaction stability and build system

- Updated esbuild system to be module, and fixed build command.
- Reverted module use in package.json by default as this impacted test
  runs/files.
- Updated mention user select:
  - To look better in dark mode.
  - To not remove text after on select.
  - To properly revert/restore focus on enter or cancel.

resources/js/wysiwyg/index.ts

@@ -151,8 +151,6 @@ export function createCommentEditorInstance(container: HTMLElement, htmlContent:
         theme: theme,
     });
 
-    // TODO - Dedupe this with the basic editor instance
-    //   Changed elements: namespace, registerMentions, toolbar, public event usage, mentioned decorator
     const context: EditorUiContext = buildEditorUI(container, editor, options);
     editor.setRootElement(context.editorDOM);
 

resources/js/wysiwyg/services/mentions.ts

@@ -6,6 +6,7 @@ import {KEY_AT_COMMAND} from "lexical/LexicalCommands";
 import {$createMentionNode, $isMentionNode, MentionNode} from "@lexical/link/LexicalMentionNode";
 import {EditorUiContext} from "../ui/framework/core";
 import {MentionDecorator} from "../ui/decorators/MentionDecorator";
+import {$selectSingleNode} from "../utils/selection";
 
 
 function enterUserSelectMode(context: EditorUiContext, selection: RangeSelection) {
@@ -25,10 +26,13 @@ function enterUserSelectMode(context: EditorUiContext, selection: RangeSelection
     }
 
     const split = textNode.splitText(offset);
-    const newNode = split[atStart ? 0 : 1];
+    const priorTextNode = split[0];
+    const afterTextNode = split[atStart ? 0 : 1];
 
     const mention = $createMentionNode(0, '', '');
-    newNode.replace(mention);
+    priorTextNode.insertAfter(mention);
+    afterTextNode.spliceText(0, 1, '', false);
+    $selectSingleNode(mention);
 
     requestAnimationFrame(() => {
         const mentionDecorator = context.manager.getDecoratorByNodeKey(mention.getKey());

resources/js/wysiwyg/ui/decorators/MentionDecorator.ts

@@ -170,14 +170,24 @@ export class MentionDecorator extends EditorDecorator {
         this.dropdownContainer?.remove();
         this.abortController = null;
         this.dropdownContainer = null;
+        this.context.manager.focus();
     }
 
     revertMention() {
         this.hideSelection();
         this.context.editor.update(() => {
             const text = $createTextNode('@');
+            const before = this.getNode().getPreviousSibling();
             this.getNode().replace(text);
-            text.selectEnd();
+            requestAnimationFrame(() => {
+                this.context.editor.update(() => {
+                    if (text.isAttached()) {
+                        text.selectEnd();
+                    } else if (before?.isAttached()) {
+                        before?.selectEnd();
+                    }
+                });
+            });
         });
     }
 

resources/js/wysiwyg/ui/framework/manager.ts

@@ -206,6 +206,14 @@ export class EditorUIManager {
         }
     }
 
+    /**
+     * Set the UI focus to the editor.
+     */
+    focus(): void {
+        this.getContext().editorDOM.focus();
+        this.getContext().editor.focus();
+    }
+
     protected updateContextToolbars(update: EditorUiStateUpdate): void {
         for (let i = this.activeContextToolbars.length - 1; i >= 0; i--) {
             const toolbar = this.activeContextToolbars[i];