lexxy 0.1.18.beta → 0.1.20.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d349d41ecbbcda9310a94ca35f54b0c888dd484a6edb7728a34c02a1576f0a36
-  data.tar.gz: b806d34fb4fc44969d94f1d625fbb0edf2410ab4eb91c3d71abe66170bc3483b
+  metadata.gz: 28ddded3fff65c55a5e194a1ba8246411fad9193b32ab319cc5a6330ab999420
+  data.tar.gz: 98a6bf19a11687400a21baed5117d65de05f02e595f3d7684f1fb70f8c8ffeea
 SHA512:
-  metadata.gz: 7062ff796823d7218ad93683b81bc215813a9c7844da2d57626da33021fb6c25a4049d8b7f534a28df2f210a7f8ae2f9f19324f542417743556e9955871ab606
-  data.tar.gz: 38049c719a2bce471c97281f034040aaf26fd2c673b0839d9a36f44568405f5200bb2250be665ffba747db2f637f6711390881558ac199fcb0a566bf46d4a640
+  metadata.gz: 00025443273a087c88de7463ab211f85e1e887ee3e33958f4813101c370f6f5949d79e88ba1c3e4347f77d4a5aaebf0231215f2af86e3fdaab35ce230572927f
+  data.tar.gz: ebb4db2b79be6937eca5af5e77aa62c8efd41a8e5bb6af0576865dd2f415f6d8de26f2e8c476e60c5f648ef0ce37cd1333e2490efd5c8c4fc5b4f28367d0f870

data/app/assets/javascript/lexxy.js

@@ -5869,6 +5869,10 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     return new ActionTextAttachmentUploadNode({ ...node }, node.__key)
   }
 
+  static importJSON(serializedNode) {
+    return new ActionTextAttachmentUploadNode({ ...serializedNode })
+  }
+
   constructor({ file, uploadUrl, blobUrlTemplate, editor, progress }, key) {
     super({ contentType: file.type }, key);
     this.file = file;
@@ -5908,6 +5912,17 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     return { element: img }
   }
 
+  exportJSON() {
+    return {
+      type: "action_text_attachment_upload",
+      version: 1,
+      progress: this.progress,
+      uploadUrl: this.uploadUrl,
+      blobUrlTemplate: this.blobUrlTemplate,
+      ...super.exportJSON()
+    }
+  }
+
   #createDOMForImage() {
     return createElement("img")
   }
@@ -6193,8 +6208,10 @@ class CommandDispatcher {
 
   dispatchInsertHorizontalDivider() {
     this.editor.update(() => {
-      this.contents.insertAtCursor(new HorizontalDividerNode());
+      this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
     });
+
+    this.editor.focus();
   }
 
   dispatchRotateHeadingFormat() {
@@ -6406,6 +6423,52 @@ class Selection {
     });
   }
 
+  selectedNodeWithOffset() {
+    const selection = Lr();
+    if (!selection) return { node: null, offset: 0 }
+
+    if (yr(selection)) {
+      return {
+        node: selection.anchor.getNode(),
+        offset: selection.anchor.offset
+      }
+    } else if (xr(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 = Lr();
+      if (selection && yr(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 = Lr();
+        if (selection && yr(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 = Lr();
     if (!yr(selection)) return false
@@ -6774,22 +6837,24 @@ class Selection {
     const node = this.nodeAfterCursor;
     if (node instanceof ki) {
       this.#selectInLexical(node);
+      return true
     } else {
       this.#contents.deleteSelectedNodes();
     }
 
-    return true
+    return false
   }
 
   #deletePreviousOrNext() {
     const node = this.nodeBeforeCursor;
     if (node instanceof ki) {
       this.#selectInLexical(node);
+      return true
     } else {
       this.#contents.deleteSelectedNodes();
     }
 
-    return true
+    return false
   }
 
   #getValidSelectionRange() {
@@ -7361,6 +7426,11 @@ class Contents {
     });
   }
 
+  insertAtCursorEnsuringLineBelow(node) {
+    this.insertAtCursor(node);
+    this.#insertLineBelowIfLastNode(node);
+  }
+
   insertNodeWrappingEachSelectedLine(newNodeFn) {
     this.editor.update(() => {
       const selection = Lr();
@@ -7645,6 +7715,17 @@ class Contents {
     return this.editorElement.selection
   }
 
+  #insertLineBelowIfLastNode(node) {
+    this.editor.update(() => {
+      const nextSibling = node.getNextSibling();
+      if (!nextSibling) {
+        const newParagraph = Li();
+        node.insertAfter(newParagraph);
+        newParagraph.selectStart();
+      }
+    });
+  }
+
   #unwrap(node) {
     const children = node.getChildren();
 
@@ -7987,7 +8068,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) {
@@ -8849,6 +8931,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
   }
@@ -8869,20 +8959,14 @@ class LexicalPromptElement extends HTMLElement {
   #addTriggerListener() {
     const unregister = this.#editor.registerUpdateListener(() => {
       this.#editor.read(() => {
-        const selection = Lr();
-        if (!selection) return
-        let node;
-        if (yr(selection)) {
-          node = selection.anchor.getNode();
-        } else if (xr(selection)) {
-          [ node ] = selection.getNodes();
-        }
+        const { node, offset } = this.#selection.selectedNodeWithOffset();
+        if (!node) return
 
-        if (node && lr(node)) {
-          const text = node.getTextContent().trim();
-          const lastChar = [ ...text ].pop();
+        if (lr(node) && offset > 0) {
+          const fullText = node.getTextContent();
+          const charBeforeCursor = fullText[offset - 1];
 
-          if (lastChar === this.trigger) {
+          if (charBeforeCursor === this.trigger) {
             unregister();
             this.#showPopover();
           }
@@ -8891,6 +8975,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 (lr(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
   }
@@ -8914,6 +9030,7 @@ class LexicalPromptElement extends HTMLElement {
     this.#editorElement.addEventListener("lexxy:change", this.#filterOptions);
 
     this.#registerKeyListeners();
+    this.#addCursorPositionListener();
   }
 
   #registerKeyListeners() {
@@ -8924,6 +9041,22 @@ class LexicalPromptElement extends HTMLElement {
     if (this.#doesSpaceSelect) {
       this.keyListeners.push(this.#editor.registerCommand(be$1, this.#handleSelectedOption.bind(this), Bi));
     }
+
+    // Register arrow keys with HIGH priority to prevent Lexical's selection handlers from running
+    this.keyListeners.push(this.#editor.registerCommand(ke$1, this.#handleArrowUp.bind(this), Bi));
+    this.keyListeners.push(this.#editor.registerCommand(Te$1, this.#handleArrowDown.bind(this), Bi));
+  }
+
+  #handleArrowUp(event) {
+    this.#moveSelectionUp();
+    event.preventDefault();
+    return true
+  }
+
+  #handleArrowDown(event) {
+    this.#moveSelectionDown();
+    event.preventDefault();
+    return true
   }
 
   #selectFirstOption() {
@@ -8941,8 +9074,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");
@@ -8991,6 +9130,7 @@ class LexicalPromptElement extends HTMLElement {
     this.#editorElement.removeEventListener("keydown", this.#handleKeydownOnPopover);
 
     this.#unregisterKeyListeners();
+    this.#removeCursorPositionListener();
 
     await nextFrame();
     this.#addTriggerListener();
@@ -9009,6 +9149,7 @@ class LexicalPromptElement extends HTMLElement {
 
     if (this.#editorContents.containsTextBackUntil(this.trigger)) {
       await this.#showFilteredOptions();
+      await nextFrame();
       this.#positionPopover();
     } else {
       this.#hidePopover();
@@ -9049,15 +9190,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() {