lexxy 0.9.19.alpha.2 → 0.9.19.alpha.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f4e64b061d290f12430a666006c5845f242f1776474b8b8691c53e83a7a5674
-  data.tar.gz: 8f539bac381f8273f97d18c9d40093c917272d89e74a36ef3d8dee9888ab149d
+  metadata.gz: bf2150a951764595691835dfe6bb97aa8a0bf4be41600e611f94156646aaba51
+  data.tar.gz: f24a3dc76fec3b0d924b3f9cd2839c1faa747ff9a051e5c57075530c6ca0abbd
 SHA512:
-  metadata.gz: 2245d2ea20bae119bda7464502ef6c83390f08425ea998e9e2e4a84b4ac20d389fc967ae4d4aab1d821d462050c3358cf617d3170cf11a4fcad526d368d59453
-  data.tar.gz: db3cef1b72fcc42d00f66160292ce2f13b2c1b82a57bbe44fa53a7100a31e65143a52c68674ada67d20901be052c26a037516b5a13b72994673e1391d8c24883
+  metadata.gz: 9e1e04f1e9bd1f32513f1c64efbd69ca49519307906851d6c11958232a3a0307a0dd31f512007df583bee752c52e97dac2fa87be8bc13dcd2d1d7ef57aa0dc06
+  data.tar.gz: 231f6d4ad4a687800ac5ed43941af7cdea2386549cbc26c3df538db628a6847406013065f0c452c0bc2acfa093afa759a7007cce0639ecbdd9953ecd727da77f

data/app/assets/javascript/lexxy.js

@@ -6301,6 +6301,14 @@ class ListenerBin {
   }
 }
 
+function handlingDefault(handler) {
+  return event => {
+    const handled = handler(event);
+    if (handled) event.preventDefault();
+    return handled
+  }
+}
+
 function createElement(name, properties, content = "") {
   const element = document.createElement(name);
   for (const [ key, value ] of Object.entries(properties || {})) {
@@ -9189,6 +9197,30 @@ var theme = {
   }
 };
 
+class UploadRequests {
+  #requestsByKey = new Map()
+
+  track(key, request) {
+    this.#requestsByKey.set(key, request);
+  }
+
+  forget(key) {
+    this.#requestsByKey.delete(key);
+  }
+
+  abort(key) {
+    const request = this.#requestsByKey.get(key);
+    if (request) {
+      this.#requestsByKey.delete(key);
+      request.abort();
+    }
+  }
+
+  clear() {
+    this.#requestsByKey.clear();
+  }
+}
+
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -10574,10 +10606,10 @@ class Selection {
 
   #processSelectionChangeCommands() {
     this.#listeners.track(
-      this.editor.registerCommand(Ne$1, this.#selectPreviousNode.bind(this), io),
-      this.editor.registerCommand(ke$2, this.#selectNextNode.bind(this), io),
-      this.editor.registerCommand(we$1, this.#selectPreviousTopLevelNode.bind(this), io),
-      this.editor.registerCommand(Ee$3, this.#selectNextTopLevelNode.bind(this), io),
+      this.editor.registerCommand(Ne$1, handlingDefault(this.#selectPreviousNode.bind(this)), io),
+      this.editor.registerCommand(ke$2, handlingDefault(this.#selectNextNode.bind(this)), io),
+      this.editor.registerCommand(we$1, handlingDefault(this.#selectPreviousTopLevelNode.bind(this)), io),
+      this.editor.registerCommand(Ee$3, handlingDefault(this.#selectNextTopLevelNode.bind(this)), io),
 
       this.editor.registerCommand(fe$4, this.#selectDecoratorNodeBeforeDeletion.bind(this), io),
 
@@ -10676,49 +10708,58 @@ class Selection {
     }
   }
 
-  async #selectPreviousNode(event) {
-    if (event?.shiftKey) return false
+  #selectPreviousNode(event) {
+    if (event.shiftKey) {
+      return this.#withCurrentNodeSelectionNode((currentNode) => {
+        const selection = this.#rangeSelectDecorator(currentNode, "forward");
 
-    if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.selectPrevious())
+        // Can't rely on native pass-through with Playwright on firefox
+        selection.modify("extend", true, "character");
+        return true
+      })
     } else {
-      return this.#selectInLexical(this.nodeBeforeCursor)
+      return this.#withCurrentNodeSelectionNode((currentNode) => currentNode.selectPrevious())
+        || this.#selectInLexical(this.nodeBeforeCursor)
     }
   }
 
-  async #selectNextNode(event) {
-    if (event?.shiftKey) return false
+  #selectNextNode(event) {
+    if (event.shiftKey) {
+      return this.#withCurrentNodeSelectionNode((currentNode) => {
+        const selection = this.#rangeSelectDecorator(currentNode, "forward");
 
-    if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0))
+        // Can't rely on native pass-through with Playwright on firefox
+        selection.modify("extend", false, "character");
+        return true
+      })
     } else {
-      return this.#selectInLexical(this.nodeAfterCursor)
+      return this.#withCurrentNodeSelectionNode((currentNode) => currentNode.selectNext(0, 0))
+        || this.#selectInLexical(this.nodeAfterCursor)
     }
   }
 
-  async #selectPreviousTopLevelNode() {
-    if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.getTopLevelElement().selectPrevious())
-    } else {
-      return this.#selectInLexical(this.topLevelNodeBeforeCursor)
-    }
+  #selectPreviousTopLevelNode() {
+    return this.#withCurrentNodeSelectionNode((currentNode) => currentNode.getTopLevelElement().selectPrevious())
+      || this.#selectInLexical(this.topLevelNodeBeforeCursor)
+  }
+
+  #selectNextTopLevelNode() {
+    return this.#withCurrentNodeSelectionNode((currentNode) => currentNode.getTopLevelElement().selectNext(0, 0))
+      || this.#selectInLexical(this.topLevelNodeAfterCursor)
   }
 
-  async #selectNextTopLevelNode() {
+  #withCurrentNodeSelectionNode(fn) {
     if (this.hasNodeSelection) {
-      return await this.#withCurrentNode((currentNode) => currentNode.getTopLevelElement().selectNext(0, 0))
-    } else {
-      return this.#selectInLexical(this.topLevelNodeAfterCursor)
+      return fn(Qr().getNodes()[0])
     }
   }
 
-  async #withCurrentNode(fn) {
-    await nextFrame();
-    if (this.hasNodeSelection) {
-      this.editor.update(() => {
-        fn(Qr().getNodes()[0]);
-        this.editor.focus();
-      });
+  #rangeSelectDecorator(node, direction = "forward") {
+    if (ji(node)) {
+        const [ anchorOffset, focusOffset ] = direction === "forward" ? [ 0, 1 ] : [ 1, 0 ];
+        const indexAtNode = node.getIndexWithinParent();
+
+        return node.getParent().select(indexAtNode + anchorOffset, indexAtNode + focusOffset)
     }
   }
 
@@ -11340,9 +11381,9 @@ function $findOrCreateGalleryForImage(node) {
 class Uploader {
   #files
 
-  static for(editorElement, files) {
+  static for(editorElement, files, options = {}) {
     const UploaderKlass = GalleryUploader.handle(editorElement, files) ? GalleryUploader : Uploader;
-    return new UploaderKlass(editorElement, files)
+    return new UploaderKlass(editorElement, files, options)
   }
 
   constructor(editorElement, files, options = {}) {
@@ -11364,7 +11405,13 @@ class Uploader {
   }
 
   $createUploadNodes() {
-    this.nodes = this.files.map(file => this.contents.$createUploadNode(file));
+    this.nodes = this.files.map(file => this.#createUploadNode(file));
+  }
+
+  #createUploadNode(file) {
+    return this.options.pending
+      ? this.contents.$createPendingUploadNode(file)
+      : this.contents.$createUploadNode(file)
   }
 
   $insertUploadNodes() {
@@ -11622,6 +11669,8 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
     this.#dispatchEvent("lexxy:upload-start", { file: this.file });
 
     upload.create((error, blob) => {
+      this.#forgetUploadRequest();
+
       if (error) {
         this.#dispatchEvent("lexxy:upload-end", { file: this.file, error });
         this.#handleUploadError(error);
@@ -11644,12 +11693,26 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
       directUploadWillStoreFileWithXHR: (request) => {
         if (shouldAuthenticateUploads) request.withCredentials = true;
 
+        this.#rememberUploadRequest(request);
+
         const uploadProgressHandler = (event) => this.#handleUploadProgress(event, request);
         request.upload.addEventListener("progress", uploadProgressHandler);
       }
     }
   }
 
+  #forgetUploadRequest() {
+    this.#editorElement.uploadRequests.forget(this.getKey());
+  }
+
+  #rememberUploadRequest(request) {
+    this.#editorElement.uploadRequests.track(this.getKey(), request);
+  }
+
+  get #editorElement() {
+    return this.editor.getRootElement()?.closest("lexxy-editor")
+  }
+
   #setUploadStarted() {
     this.#setProgress(1);
   }
@@ -12027,11 +12090,6 @@ class Contents {
     inserter.insertNodes(nodes);
   }
 
-  insertAtCursorEnsuringLineBelow(node) {
-    this.insertAtCursor(node);
-    this.#insertLineBelowIfLastNode(node);
-  }
-
   applyParagraphFormat() {
     const selection = Qr();
     if (!Fr(selection)) return
@@ -12173,17 +12231,27 @@ class Contents {
       const fullText = anchorNode.getTextContent();
       const offset = anchor.offset;
 
-      const textBeforeCursor = fullText.slice(0, offset);
-
-      const lastIndex = textBeforeCursor.lastIndexOf(string);
+      const lastIndex = fullText.slice(0, offset).lastIndexOf(string);
       if (lastIndex !== -1) {
-        result = textBeforeCursor.slice(lastIndex + string.length);
+        result = fullText.slice(lastIndex + string.length, this.#endOffsetAt(fullText, offset));
       }
     });
 
     return result
   }
 
+  // The query runs from the trigger up to the next whitespace, even when the
+  // cursor sits inside an existing word — inserting "@" before "Jack" must
+  // filter by "Jack" rather than treating the prompt as empty.
+  #endOffsetAt(fullText, cursorOffset) {
+    const whitespaceOffset = fullText.slice(cursorOffset).search(/\s/);
+    if (whitespaceOffset === -1) {
+      return fullText.length
+    } else {
+      return cursorOffset + whitespaceOffset
+    }
+  }
+
   containsTextBackUntil(string) {
     let result = false;
 
@@ -12214,10 +12282,10 @@ class Contents {
     const { anchorNode, offset } = this.#getTextAnchorData();
     if (!anchorNode) return
 
-    const lastIndex = this.#findLastIndexBeforeCursor(anchorNode, offset, stringToReplace);
+    const lastIndex = this.#findReplacementStart(anchorNode, offset, stringToReplace);
     if (lastIndex === -1) return
 
-    this.#performTextReplacement(anchorNode, selection, offset, lastIndex, replacementNodes);
+    this.#performTextReplacement(anchorNode, selection, lastIndex, stringToReplace, replacementNodes);
   }
 
   uploadFiles(files, { selectLast } = {}) {
@@ -12250,24 +12318,46 @@ class Contents {
     })
   }
 
+  $createPendingUploadNode(file) {
+    return $createActionTextAttachmentUploadNode({
+      file,
+      uploadUrl: null,
+      blobUrlTemplate: this.editorElement.blobUrlTemplate,
+      contentType: file.type,
+    })
+  }
+
   insertPendingAttachment(file) {
     if (!this.editorElement.supportsAttachments) return null
 
     let nodeKey = null;
     this.editor.update(() => {
-      const uploadNode = new ActionTextAttachmentUploadNode({
-        file,
-        uploadUrl: null,
-        blobUrlTemplate: this.editorElement.blobUrlTemplate,
-        editor: this.editor
-      });
+      const uploadNode = this.$createPendingUploadNode(file);
       this.insertAtCursor(uploadNode);
       nodeKey = uploadNode.getKey();
-    }, { tag: Jn });
+    });
+
+    return nodeKey ? this.#pendingAttachmentHandle(nodeKey) : null
+  }
 
-    if (!nodeKey) return null
+  insertPendingAttachments(files) {
+    const fileList = Array.from(files);
+    if (!this.editorElement.supportsAttachments || fileList.length === 0) return []
 
+    let nodeKeys = [];
+    this.editor.update(() => {
+      const uploader = Uploader.for(this.editorElement, fileList, { pending: true });
+      uploader.$uploadFiles();
+      nodeKeys = (uploader.nodes ?? []).map(node => node.getKey());
+    });
+
+    return nodeKeys.map(nodeKey => this.#pendingAttachmentHandle(nodeKey))
+  }
+
+  #pendingAttachmentHandle(initialNodeKey) {
     const editor = this.editor;
+    let nodeKey = initialNodeKey;
+
     return {
       setAttributes(blob) {
         editor.update(() => {
@@ -12472,17 +12562,6 @@ class Contents {
     }
   }
 
-  #insertLineBelowIfLastNode(node) {
-    this.editor.update(() => {
-      const nextSibling = node.getNextSibling();
-      if (!nextSibling) {
-        const newParagraph = eo();
-        node.insertAfter(newParagraph);
-        newParagraph.selectStart();
-      }
-    });
-  }
-
   #unwrap(node) {
     const children = node.getChildren();
 
@@ -12515,19 +12594,27 @@ class Contents {
     return { anchorNode, offset: anchor.offset }
   }
 
-  #findLastIndexBeforeCursor(anchorNode, offset, stringToReplace) {
+  // The replaced span can straddle the cursor (e.g. "@Jack" when "@" was just
+  // inserted before "Jack"), so we anchor on the trigger before the cursor and
+  // verify the whole string matches there rather than searching text up to it.
+  #findReplacementStart(anchorNode, offset, stringToReplace) {
     const fullText = anchorNode.getTextContent();
-    const textBeforeCursor = fullText.slice(0, offset);
-    return textBeforeCursor.lastIndexOf(stringToReplace)
+    const triggerIndex = fullText.slice(0, offset).lastIndexOf(stringToReplace[0]);
+
+    if (triggerIndex !== -1 && fullText.startsWith(stringToReplace, triggerIndex)) {
+      return triggerIndex
+    } else {
+      return -1
+    }
   }
 
-  #performTextReplacement(anchorNode, selection, offset, lastIndex, replacementNodes) {
+  #performTextReplacement(anchorNode, selection, startIndex, stringToReplace, replacementNodes) {
     const fullText = anchorNode.getTextContent();
-    const textBeforeString = fullText.slice(0, lastIndex);
-    const textAfterCursor = fullText.slice(offset);
+    const textBeforeString = fullText.slice(0, startIndex);
+    const textAfterString = fullText.slice(startIndex + stringToReplace.length);
 
     const textNodeBefore = this.#cloneTextNodeFormatting(anchorNode, selection, textBeforeString);
-    const textNodeAfter = this.#cloneTextNodeFormatting(anchorNode, selection, textAfterCursor || " ");
+    const textNodeAfter = this.#cloneTextNodeFormatting(anchorNode, selection, textAfterString || " ");
 
     anchorNode.replace(textNodeBefore);
 
@@ -12535,7 +12622,7 @@ class Contents {
     lastInsertedNode.insertAfter(textNodeAfter);
 
     this.#appendLineBreakIfNeeded(textNodeAfter.getParentOrThrow());
-    const cursorOffset = textAfterCursor ? 0 : 1;
+    const cursorOffset = textAfterString ? 0 : 1;
     textNodeAfter.select(cursorOffset, cursorOffset);
   }
 
@@ -13851,11 +13938,12 @@ class AttachmentsExtension extends LexxyExtension {
 
   #handleUploadMutations(mutations) {
     const previousUploadsCount = this.#uploadsCount;
-    for (const [ , mutation ] of mutations) {
+    for (const [ key, mutation ] of mutations) {
       if (mutation === "created") {
         this.#uploadsCount++;
       } else if (mutation === "destroyed") {
         this.#uploadsCount--;
+        this.editorElement.uploadRequests.abort(key);
       }
     }
 
@@ -14299,6 +14387,7 @@ class LexicalEditorElement extends HTMLElement {
 
   #validity = new Map()
   #validationTextArea = document.createElement("textarea")
+  #uploadRequests
 
   constructor() {
     super();
@@ -14306,6 +14395,10 @@ class LexicalEditorElement extends HTMLElement {
     this.internals.role = "presentation";
   }
 
+  get uploadRequests() {
+    return this.#uploadRequests
+  }
+
   connectedCallback() {
     this.id ||= generateDomId("lexxy-editor");
     this.config = new EditorConfiguration(this);
@@ -14326,6 +14419,7 @@ class LexicalEditorElement extends HTMLElement {
     this.#disposables.push(this.clipboard);
 
     this.adapter = new BrowserAdapter();
+    this.#uploadRequests = new UploadRequests();
 
     const commandDispatcher = CommandDispatcher.configureFor(this);
     this.#disposables.push(commandDispatcher);
@@ -15099,6 +15193,7 @@ class LexicalEditorElement extends HTMLElement {
   #reset() {
     this.#dispose();
     this.#resetValidity();
+    this.#uploadRequests?.clear();
     this.editorContentElement?.remove();
     this.editorContentElement = null;
 
@@ -15465,24 +15560,33 @@ class LexicalPromptElement extends HTMLElement {
         const { node, offset } = this.#selection.selectedNodeWithOffset();
         if (!node) return
 
-        if (Tr(node) && offset > 0) {
-          const fullText = node.getTextContent();
-          const textBeforeCursor = fullText.slice(0, offset);
-          const lastTriggerIndex = textBeforeCursor.lastIndexOf(this.trigger);
-          const triggerEndIndex = lastTriggerIndex + this.trigger.length - 1;
-
-          // If trigger is not found, or cursor is at or before the trigger end position, hide popover
-          if (lastTriggerIndex === -1 || offset <= triggerEndIndex) {
-            this.#hidePopover();
-          }
+        if (this.#cursorIsTypingSearchTerm(node, offset)) {
+          return
         } else {
-          // Cursor is not in a text node or at offset 0, hide popover
           this.#hidePopover();
         }
       });
     }));
   }
 
+  // The popover should stay open only while the cursor sits at the end of the
+  // trigger and its search term. When the cursor moves away — before the
+  // trigger, or past the token into later text — the text between the trigger
+  // and the cursor breaks that run and we dismiss. A newline always breaks the
+  // run; a space breaks it only for triggers that don't support spaces in
+  // searches, since those that do (e.g. `person:`) expect multi-word terms.
+  #cursorIsTypingSearchTerm(node, offset) {
+    if (!Tr(node) || offset === 0) return false
+
+    const textBeforeCursor = node.getTextContent().slice(0, offset);
+    const lastTriggerIndex = textBeforeCursor.lastIndexOf(this.trigger);
+    if (lastTriggerIndex === -1) return false
+
+    const searchTerm = textBeforeCursor.slice(lastTriggerIndex + this.trigger.length);
+    const breakPattern = this.supportsSpaceInSearches ? /\n/ : /[ \n]/;
+    return !breakPattern.test(searchTerm)
+  }
+
   get #editor() {
     return this.#editorElement.editor
   }