@37signals/lexxy 0.1.19-beta → 0.1.20-beta

package/dist/lexxy.esm.js

@@ -1095,8 +1095,10 @@ class CommandDispatcher {
 
   dispatchInsertHorizontalDivider() {
     this.editor.update(() => {
-      this.contents.insertAtCursor(new HorizontalDividerNode());
+      this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
     });
+
+    this.editor.focus();
   }
 
   dispatchRotateHeadingFormat() {
@@ -1308,6 +1310,52 @@ class Selection {
     });
   }
 
+  selectedNodeWithOffset() {
+    const selection = $getSelection();
+    if (!selection) return { node: null, offset: 0 }
+
+    if ($isRangeSelection(selection)) {
+      return {
+        node: selection.anchor.getNode(),
+        offset: selection.anchor.offset
+      }
+    } else if ($isNodeSelection(selection)) {
+      const [ node ] = selection.getNodes();
+      return {
+        node,
+        offset: 0
+      }
+    }
+
+    return { node: null, offset: 0 }
+  }
+
+  preservingSelection(fn) {
+    let selectionState = null;
+
+    this.editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if (selection && $isRangeSelection(selection)) {
+        selectionState = {
+          anchor: { key: selection.anchor.key, offset: selection.anchor.offset },
+          focus: { key: selection.focus.key, offset: selection.focus.offset }
+        };
+      }
+    });
+
+    fn();
+
+    if (selectionState) {
+      this.editor.update(() => {
+        const selection = $getSelection();
+        if (selection && $isRangeSelection(selection)) {
+          selection.anchor.set(selectionState.anchor.key, selectionState.anchor.offset, "text");
+          selection.focus.set(selectionState.focus.key, selectionState.focus.offset, "text");
+        }
+      });
+    }
+  }
+
   get hasSelectedWordsInSingleLine() {
     const selection = $getSelection();
     if (!$isRangeSelection(selection)) return false
@@ -2265,6 +2313,11 @@ class Contents {
     });
   }
 
+  insertAtCursorEnsuringLineBelow(node) {
+    this.insertAtCursor(node);
+    this.#insertLineBelowIfLastNode(node);
+  }
+
   insertNodeWrappingEachSelectedLine(newNodeFn) {
     this.editor.update(() => {
       const selection = $getSelection();
@@ -2549,6 +2602,17 @@ class Contents {
     return this.editorElement.selection
   }
 
+  #insertLineBelowIfLastNode(node) {
+    this.editor.update(() => {
+      const nextSibling = node.getNextSibling();
+      if (!nextSibling) {
+        const newParagraph = $createParagraphNode();
+        node.insertAfter(newParagraph);
+        newParagraph.selectStart();
+      }
+    });
+  }
+
   #unwrap(node) {
     const children = node.getChildren();
 
@@ -2891,7 +2955,8 @@ class Contents {
     lastInsertedNode.insertAfter(textNodeAfter);
 
     this.#appendLineBreakIfNeeded(textNodeAfter.getParentOrThrow());
-    textNodeAfter.select(0, 0);
+    const cursorOffset = textAfterCursor ? 0 : 1;
+    textNodeAfter.select(cursorOffset, cursorOffset);
   }
 
   #insertReplacementNodes(startNode, replacementNodes) {
@@ -3681,6 +3746,14 @@ class LexicalPromptElement extends HTMLElement {
     return this.hasAttribute("supports-space-in-searches")
   }
 
+  get open() {
+    return this.popoverElement?.classList?.contains("lexxy-prompt-menu--visible")
+  }
+
+  get closed() {
+    return !this.open
+  }
+
   get #doesSpaceSelect() {
     return !this.supportsSpaceInSearches
   }
@@ -3701,20 +3774,14 @@ class LexicalPromptElement extends HTMLElement {
   #addTriggerListener() {
     const unregister = this.#editor.registerUpdateListener(() => {
       this.#editor.read(() => {
-        const selection = $getSelection();
-        if (!selection) return
-        let node;
-        if ($isRangeSelection(selection)) {
-          node = selection.anchor.getNode();
-        } else if ($isNodeSelection(selection)) {
-          [ node ] = selection.getNodes();
-        }
+        const { node, offset } = this.#selection.selectedNodeWithOffset();
+        if (!node) return
 
-        if (node && $isTextNode(node)) {
-          const text = node.getTextContent().trim();
-          const lastChar = [ ...text ].pop();
+        if ($isTextNode(node) && offset > 0) {
+          const fullText = node.getTextContent();
+          const charBeforeCursor = fullText[offset - 1];
 
-          if (lastChar === this.trigger) {
+          if (charBeforeCursor === this.trigger) {
             unregister();
             this.#showPopover();
           }
@@ -3723,6 +3790,38 @@ class LexicalPromptElement extends HTMLElement {
     });
   }
 
+  #addCursorPositionListener() {
+    this.cursorPositionListener = this.#editor.registerUpdateListener(() => {
+      if (this.closed) return
+
+      this.#editor.read(() => {
+        const { node, offset } = this.#selection.selectedNodeWithOffset();
+        if (!node) return
+
+        if ($isTextNode(node) && offset > 0) {
+          const fullText = node.getTextContent();
+          const textBeforeCursor = fullText.slice(0, offset);
+          const lastTriggerIndex = textBeforeCursor.lastIndexOf(this.trigger);
+
+          // If trigger is not found, or cursor is at or before the trigger position, hide popover
+          if (lastTriggerIndex === -1 || offset <= lastTriggerIndex) {
+            this.#hidePopover();
+          }
+        } else {
+          // Cursor is not in a text node or at offset 0, hide popover
+          this.#hidePopover();
+        }
+      });
+    });
+  }
+
+  #removeCursorPositionListener() {
+    if (this.cursorPositionListener) {
+      this.cursorPositionListener();
+      this.cursorPositionListener = null;
+    }
+  }
+
   get #editor() {
     return this.#editorElement.editor
   }
@@ -3746,6 +3845,7 @@ class LexicalPromptElement extends HTMLElement {
     this.#editorElement.addEventListener("lexxy:change", this.#filterOptions);
 
     this.#registerKeyListeners();
+    this.#addCursorPositionListener();
   }
 
   #registerKeyListeners() {
@@ -3756,6 +3856,22 @@ class LexicalPromptElement extends HTMLElement {
     if (this.#doesSpaceSelect) {
       this.keyListeners.push(this.#editor.registerCommand(KEY_SPACE_COMMAND, this.#handleSelectedOption.bind(this), COMMAND_PRIORITY_HIGH));
     }
+
+    // Register arrow keys with HIGH priority to prevent Lexical's selection handlers from running
+    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_UP_COMMAND, this.#handleArrowUp.bind(this), COMMAND_PRIORITY_HIGH));
+    this.keyListeners.push(this.#editor.registerCommand(KEY_ARROW_DOWN_COMMAND, this.#handleArrowDown.bind(this), COMMAND_PRIORITY_HIGH));
+  }
+
+  #handleArrowUp(event) {
+    this.#moveSelectionUp();
+    event.preventDefault();
+    return true
+  }
+
+  #handleArrowDown(event) {
+    this.#moveSelectionDown();
+    event.preventDefault();
+    return true
   }
 
   #selectFirstOption() {
@@ -3773,8 +3889,14 @@ class LexicalPromptElement extends HTMLElement {
   #selectOption(listItem) {
     this.#clearSelection();
     listItem.toggleAttribute("aria-selected", true);
+    listItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
     listItem.focus();
-    this.#editorElement.focus();
+
+    // Preserve selection to prevent cursor jump
+    this.#selection.preservingSelection(() => {
+      this.#editorElement.focus();
+    });
+
     this.#editorContentElement.setAttribute("aria-controls", this.popoverElement.id);
     this.#editorContentElement.setAttribute("aria-activedescendant", listItem.id);
     this.#editorContentElement.setAttribute("aria-haspopup", "listbox");
@@ -3823,6 +3945,7 @@ class LexicalPromptElement extends HTMLElement {
     this.#editorElement.removeEventListener("keydown", this.#handleKeydownOnPopover);
 
     this.#unregisterKeyListeners();
+    this.#removeCursorPositionListener();
 
     await nextFrame();
     this.#addTriggerListener();
@@ -3841,6 +3964,7 @@ class LexicalPromptElement extends HTMLElement {
 
     if (this.#editorContents.containsTextBackUntil(this.trigger)) {
       await this.#showFilteredOptions();
+      await nextFrame();
       this.#positionPopover();
     } else {
       this.#hidePopover();
@@ -3881,15 +4005,8 @@ class LexicalPromptElement extends HTMLElement {
       this.#hidePopover();
       this.#editorElement.focus();
       event.stopPropagation();
-    } else if (event.key === "ArrowDown") {
-      this.#moveSelectionDown();
-      event.preventDefault();
-      event.stopPropagation();
-    } else if (event.key === "ArrowUp") {
-      this.#moveSelectionUp();
-      event.preventDefault();
-      event.stopPropagation();
     }
+    // Arrow keys are now handled via Lexical commands with HIGH priority
   }
 
   #moveSelectionDown() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.1.19-beta",
+  "version": "0.1.20-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",