lexxy 0.1.9.beta → 0.1.11.beta

data/app/assets/javascript/lexxy.js

@@ -5091,6 +5091,17 @@ function getListType(node) {
   return null
 }
 
+function isPrintableCharacter(event) {
+  // Ignore if modifier keys are pressed (except Shift for uppercase)
+  if (event.ctrlKey || event.metaKey || event.altKey) return false
+
+  // Ignore special keys
+  if (event.key.length > 1 && event.key !== 'Enter' && event.key !== 'Space') return false
+
+  // Accept single character keys (letters, numbers, punctuation)
+  return event.key.length === 1
+}
+
 class LexicalToolbarElement extends HTMLElement {
   constructor() {
     super();
@@ -5950,6 +5961,8 @@ class CommandDispatcher {
 
   dispatchInsertUnorderedList() {
     const selection = Nr();
+    if (!selection) return;
+
     const anchorNode = selection.anchor.getNode();
 
     if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "bullet") {
@@ -5961,6 +5974,8 @@ class CommandDispatcher {
 
   dispatchInsertOrderedList() {
     const selection = Nr();
+    if (!selection) return;
+
     const anchorNode = selection.anchor.getNode();
 
     if (this.selection.isInsideList && anchorNode && getListType(anchorNode) === "number") {
@@ -6133,11 +6148,14 @@ function nextFrame() {
 class Selection {
   constructor(editorElement) {
     this.editorElement = editorElement;
+    this.editorContentElement = editorElement.editorContentElement;
     this.editor = this.editorElement.editor;
     this.previouslySelectedKeys = new Set();
 
     this.#listenForNodeSelections();
     this.#processSelectionChangeCommands();
+    this.#handleInputWhenDecoratorNodesSelected();
+    this.#containEditorFocus();
   }
 
   clear() {
@@ -6231,6 +6249,21 @@ class Selection {
     return this.#findNextSiblingUp(anchorNode)
   }
 
+  get topLevelNodeAfterCursor() {
+    const { anchorNode, offset } = this.#getCollapsedSelectionData();
+    if (!anchorNode) return null
+
+    if (Qn(anchorNode)) {
+      return this.#getNextNodeFromTextEnd(anchorNode)
+    }
+
+    if (di(anchorNode)) {
+      return this.#getNodeAfterElementNode(anchorNode, offset)
+    }
+
+    return this.#findNextSiblingUp(anchorNode)
+  }
+
   get nodeBeforeCursor() {
     const { anchorNode, offset } = this.#getCollapsedSelectionData();
     if (!anchorNode) return null
@@ -6246,6 +6279,21 @@ class Selection {
     return this.#findPreviousSiblingUp(anchorNode)
   }
 
+  get topLevelNodeBeforeCursor() {
+    const { anchorNode, offset } = this.#getCollapsedSelectionData();
+    if (!anchorNode) return null
+
+    if (Qn(anchorNode)) {
+      return this.#getPreviousNodeFromTextStart(anchorNode)
+    }
+
+    if (di(anchorNode)) {
+      return this.#getNodeBeforeElementNode(anchorNode, offset)
+    }
+
+    return this.#findPreviousSiblingUp(anchorNode)
+  }
+
   get #contents() {
     return this.editorElement.contents
   }
@@ -6266,9 +6314,9 @@ class Selection {
 
   #processSelectionChangeCommands() {
     this.editor.registerCommand(Te$1, this.#selectPreviousNode.bind(this), Ii);
-    this.editor.registerCommand(Ne$1, this.#selectPreviousNode.bind(this), Ii);
     this.editor.registerCommand(ve$1, this.#selectNextNode.bind(this), Ii);
-    this.editor.registerCommand(we$1, this.#selectNextNode.bind(this), Ii);
+    this.editor.registerCommand(Ne$1, this.#selectPreviousTopLevelNode.bind(this), Ii);
+    this.editor.registerCommand(we$1, this.#selectNextTopLevelNode.bind(this), Ii);
 
     this.editor.registerCommand(De$1, this.#deleteSelectedOrNext.bind(this), Ii);
     this.editor.registerCommand(Ae$1, this.#deletePreviousOrNext.bind(this), Ii);
@@ -6299,6 +6347,93 @@ class Selection {
     });
   }
 
+  // In Safari, when the only node in the document is an attachment, it won't let you enter text
+  // before/below it. There is probably a better fix here, but this workaround solves the problem until
+  // we find it.
+  #handleInputWhenDecoratorNodesSelected() {
+    this.editor.getRootElement().addEventListener("keydown", (event) => {
+      if (isPrintableCharacter(event)) {
+        this.editor.update(() => {
+          const selection = Nr();
+
+          if (cr(selection) && selection.isCollapsed()) {
+            const anchorNode = selection.anchor.getNode();
+            const offset = selection.anchor.offset;
+
+            const nodeBefore = this.#getNodeBeforePosition(anchorNode, offset);
+            const nodeAfter = this.#getNodeAfterPosition(anchorNode, offset);
+
+            if (nodeBefore instanceof gi && !nodeBefore.isInline()) {
+              event.preventDefault();
+              this.#contents.createParagraphAfterNode(nodeBefore, event.key);
+              return
+            } else if (nodeAfter instanceof gi && !nodeAfter.isInline()) {
+              event.preventDefault();
+              this.#contents.createParagraphBeforeNode(nodeAfter, event.key);
+              return
+            }
+          }
+        });
+      }
+    }, true);
+  }
+
+  #getNodeBeforePosition(node, offset) {
+    if (Qn(node) && offset === 0) {
+      return node.getPreviousSibling()
+    }
+    if (di(node) && offset > 0) {
+      return node.getChildAtIndex(offset - 1)
+    }
+    return null
+  }
+
+  #getNodeAfterPosition(node, offset) {
+    if (Qn(node) && offset === node.getTextContentSize()) {
+      return node.getNextSibling()
+    }
+    if (di(node)) {
+      return node.getChildAtIndex(offset)
+    }
+    return null
+  }
+
+  #containEditorFocus() {
+    // Workaround for a bizarre Chrome bug where the cursor abandons the editor to focus on not-focusable elements
+    // above when navigating UP/DOWN when Lexical shows its fake cursor on custom decorator nodes.
+    this.editorContentElement.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowUp") {
+        const lexicalCursor = this.editor.getRootElement().querySelector('[data-lexical-cursor]');
+
+        if (lexicalCursor) {
+          let currentElement = lexicalCursor.previousElementSibling;
+          while (currentElement && currentElement.hasAttribute('data-lexical-cursor')) {
+            currentElement = currentElement.previousElementSibling;
+          }
+
+          if (!currentElement) {
+            event.preventDefault();
+          }
+        }
+      }
+
+      if (event.key === "ArrowDown") {
+        const lexicalCursor = this.editor.getRootElement().querySelector('[data-lexical-cursor]');
+
+        if (lexicalCursor) {
+          let currentElement = lexicalCursor.nextElementSibling;
+          while (currentElement && currentElement.hasAttribute('data-lexical-cursor')) {
+            currentElement = currentElement.nextElementSibling;
+          }
+
+          if (!currentElement) {
+            event.preventDefault();
+          }
+        }
+      }
+    }, true);
+  }
+
   #syncSelectedClasses() {
     this.#clearPreviouslyHighlightedItems();
     this.#highlightNewItems();
@@ -6341,6 +6476,22 @@ class Selection {
     }
   }
 
+  async #selectPreviousTopLevelNode() {
+    if (this.current) {
+      await this.#withCurrentNode((currentNode) => currentNode.selectPrevious());
+    } else {
+      this.#selectInLexical(this.topLevelNodeBeforeCursor);
+    }
+  }
+
+  async #selectNextTopLevelNode() {
+    if (this.current) {
+      await this.#withCurrentNode((currentNode) => currentNode.selectNext(0, 0));
+    } else {
+      this.#selectInLexical(this.topLevelNodeAfterCursor);
+    }
+  }
+
   async #withCurrentNode(fn) {
     await nextFrame();
     if (this.current) {
@@ -6589,6 +6740,105 @@ class Selection {
   }
 }
 
+class CustomActionTextAttachmentNode extends gi {
+  static getType() {
+    return "custom_action_text_attachment"
+  }
+
+  static clone(node) {
+    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
+  }
+
+  static importJSON(serializedNode) {
+    return new CustomActionTextAttachmentNode({ ...serializedNode })
+  }
+
+  static importDOM() {
+    return {
+      "action-text-attachment": (attachment) => {
+        const content = attachment.getAttribute("content");
+        if (!attachment.getAttribute("content")) {
+          return null
+        }
+
+        return {
+          conversion: () => {
+            // Preserve initial space if present since Lexical removes it
+            const nodes = [];
+            const previousSibling = attachment.previousSibling;
+            if (previousSibling && previousSibling.nodeType === Node.TEXT_NODE && /\s$/.test(previousSibling.textContent)) {
+              nodes.push(Xn(" "));
+            }
+
+            nodes.push(new CustomActionTextAttachmentNode({
+              sgid: attachment.getAttribute("sgid"),
+              innerHtml: JSON.parse(content),
+              contentType: attachment.getAttribute("content-type")
+            }));
+
+            nodes.push(Xn(" "));
+
+            return { node: nodes }
+          },
+          priority: 2
+        }
+      }
+    }
+  }
+
+  constructor({ sgid, contentType, innerHtml }, key) {
+    super(key);
+
+    this.sgid = sgid;
+    this.contentType = contentType || "application/vnd.actiontext.unknown";
+    this.innerHtml = innerHtml;
+  }
+
+  createDOM() {
+    const figure = createElement("action-text-attachment", { "content-type": this.contentType, "data-lexxy-decorator": true });
+
+    figure.addEventListener("click", (event) => {
+      dispatchCustomEvent(figure, "lexxy:internal:select-node", { key: this.getKey() });
+    });
+
+    figure.insertAdjacentHTML("beforeend", this.innerHtml);
+
+    return figure
+  }
+
+  updateDOM() {
+    return true
+  }
+
+  isInline() {
+    return true
+  }
+
+  exportDOM() {
+    const attachment = createElement("action-text-attachment", {
+      sgid: this.sgid,
+      content: JSON.stringify(this.innerHtml),
+      "content-type": this.contentType
+    });
+
+    return { element: attachment }
+  }
+
+  exportJSON() {
+    return {
+      type: "custom_action_text_attachment",
+      version: 1,
+      sgid: this.sgid,
+      contentType: this.contentType,
+      innerHtml: this.innerHtml
+    }
+  }
+
+  decorate() {
+    return null
+  }
+}
+
 class Contents {
   constructor(editorElement) {
     this.editorElement = editorElement;
@@ -6707,6 +6957,24 @@ class Contents {
     });
   }
 
+  createLink(url) {
+    let linkNodeKey = null;
+
+    this.editor.update(() => {
+      const textNode = Xn(url);
+      const linkNode = d$1(url);
+      linkNode.append(textNode);
+
+      const selection = Nr();
+      if (cr(selection)) {
+        selection.insertNodes([linkNode]);
+        linkNodeKey = linkNode.getKey();
+      }
+    });
+
+    return linkNodeKey
+  }
+
   createLinkWithSelectedText(url) {
     if (!this.hasSelectedText()) return
 
@@ -6778,6 +7046,30 @@ class Contents {
     });
   }
 
+  createParagraphAfterNode(node, text) {
+    const newParagraph = Pi();
+    node.insertAfter(newParagraph);
+    newParagraph.selectStart();
+
+    // Insert the typed text
+    if (text) {
+      newParagraph.append(Xn(text));
+      newParagraph.select(1, 1); // Place cursor after the text
+    }
+  }
+
+  createParagraphBeforeNode(node, text) {
+    const newParagraph = Pi();
+    node.insertBefore(newParagraph);
+    newParagraph.selectStart();
+
+    // Insert the typed text
+    if (text) {
+      newParagraph.append(Xn(text));
+      newParagraph.select(1, 1); // Place cursor after the text
+    }
+  }
+
   uploadFile(file) {
     if (!this.editorElement.supportsAttachments) {
       console.warn("This editor does not supports attachments (it's configured with [attachments=false])");
@@ -6812,26 +7104,76 @@ class Contents {
   deleteSelectedNodes() {
     this.editor.update(() => {
       if (ur(this.#selection.current)) {
-        let nodesWereRemoved = false;
-        this.#selection.current.getNodes().forEach((node) => {
+        const nodesToRemove = this.#selection.current.getNodes();
+        if (nodesToRemove.length === 0) return
+
+        // Use splice() instead of node.remove() for proper removal and
+        // reconciliation. Would have issues with removing unintended decorator nodes
+        // with node.remove()
+        nodesToRemove.forEach((node) => {
           const parent = node.getParent();
+          if (!di(parent)) return
 
-          node.remove();
+          const children = parent.getChildren();
+          const index = children.indexOf(node);
 
-          if (parent.getType() === "root" && parent.getChildrenSize() === 0) {
-            parent.append(Pi());
+          if (index >= 0) {
+            parent.splice(index, 1, []);
           }
-
-          nodesWereRemoved = true;
         });
 
-        if (nodesWereRemoved) {
-          this.#selection.clear();
-          this.editor.focus();
+        // Check if root is empty after all removals
+        const root = ps();
+        if (root.getChildrenSize() === 0) {
+          root.append(Pi());
+        }
 
-          return true
+        this.#selection.clear();
+        this.editor.focus();
+
+        return true
+      }
+    });
+  }
+
+  replaceNodeWithHTML(nodeKey, html, options = {}) {
+    this.editor.update(() => {
+      const node = us(nodeKey);
+      if (!node) return
+
+      const selection = Nr();
+      let wasSelected = false;
+
+      if (cr(selection)) {
+        const selectedNodes = selection.getNodes();
+        wasSelected = selectedNodes.includes(node) || selectedNodes.some(n => n.getParent() === node);
+
+        if (wasSelected) {
+          ms(null);
         }
       }
+
+      const replacementNode = options.attachment ? this.#createCustomAttachmentNodeWithHtml(html, options.attachment) : this.#createHtmlNodeWith(html);
+      node.replace(replacementNode);
+
+      if (wasSelected) {
+        replacementNode.selectEnd();
+      }
+    });
+  }
+
+  insertHTMLBelowNode(nodeKey, html, options = {}) {
+    this.editor.update(() => {
+      const node = us(nodeKey);
+      if (!node) return
+
+      let previousNode = node;
+      try {
+        previousNode = node.getTopLevelElementOrThrow();
+      } catch {}
+
+      const newNode = options.attachment ? this.#createCustomAttachmentNodeWithHtml(html, options.attachment) : this.#createHtmlNodeWith(html);
+      previousNode.insertAfter(newNode);
     });
   }
 
@@ -7077,6 +7419,21 @@ class Contents {
     }
   }
 
+  #createCustomAttachmentNodeWithHtml(html, options = {}) {
+    const attachmentConfig = typeof options === 'object' ? options : {};
+
+    return new CustomActionTextAttachmentNode({
+      sgid: attachmentConfig.sgid || null,
+      contentType: "text/html",
+      innerHtml: html
+    })
+  }
+
+  #createHtmlNodeWith(html) {
+    const htmlNodes = h$3(this.editor, parseHtml(html));
+    return htmlNodes[0] || Pi()
+  }
+
   #shouldUploadFile(file) {
     return dispatch(this.editorElement, 'lexxy:file-accept', { file }, true)
   }
@@ -7204,12 +7561,27 @@ class Clipboard {
     item.getAsString((text) => {
       if (isUrl(text) && this.contents.hasSelectedText()) {
         this.contents.createLinkWithSelectedText(text);
+      } else if (isUrl(text)) {
+        const nodeKey = this.contents.createLink(text);
+        this.#dispatchLinkInsertEvent(nodeKey, { url: text });
       } else {
         this.#pasteMarkdown(text);
       }
     });
   }
 
+  #dispatchLinkInsertEvent(nodeKey, payload) {
+    const linkManipulationMethods = {
+      replaceLinkWith: (html, options) => this.contents.replaceNodeWithHTML(nodeKey, html, options),
+      insertBelowLink: (html, options) => this.contents.insertHTMLBelowNode(nodeKey, html, options)
+    };
+
+    dispatch(this.editorElement, "lexxy:insert-link", {
+      ...payload,
+      ...linkManipulationMethods
+    });
+  }
+
   #pasteMarkdown(text) {
     const html = d(text);
     this.contents.insertHtml(html);
@@ -7242,113 +7614,15 @@ class Clipboard {
   }
 }
 
-class CustomActionTextAttachmentNode extends gi {
-  static getType() {
-    return "custom_action_text_attachment"
-  }
-
-  static clone(node) {
-    return new CustomActionTextAttachmentNode({ ...node }, node.__key)
-  }
-
-  static importJSON(serializedNode) {
-    return new CustomActionTextAttachmentNode({ ...serializedNode })
-  }
-
-  static importDOM() {
-    return {
-      "action-text-attachment": (attachment) => {
-        const content = attachment.getAttribute("content");
-        if (!attachment.getAttribute("content")) {
-          return null
-        }
-
-        return {
-          conversion: () => {
-            // Preserve initial space if present since Lexical removes it
-            const nodes = [];
-            const previousSibling = attachment.previousSibling;
-            if (previousSibling && previousSibling.nodeType === Node.TEXT_NODE && /\s$/.test(previousSibling.textContent)) {
-              nodes.push(Xn(" "));
-            }
-
-            nodes.push(new CustomActionTextAttachmentNode({
-              sgid: attachment.getAttribute("sgid"),
-              innerHtml: JSON.parse(content),
-              contentType: attachment.getAttribute("content-type")
-            }));
-
-            nodes.push(Xn(" "));
-
-            return { node: nodes }
-          },
-          priority: 2
-        }
-      }
-    }
-  }
-
-  constructor({ sgid, contentType, innerHtml }, key) {
-    super(key);
-
-    this.sgid = sgid;
-    this.contentType = contentType || "application/vnd.actiontext.unknown";
-    this.innerHtml = innerHtml;
-  }
-
-  createDOM() {
-    const figure = createElement("action-text-attachment", { "content-type": this.contentType, "data-lexxy-decorator": true });
-
-    figure.addEventListener("click", (event) => {
-      dispatchCustomEvent(figure, "lexxy:internal:select-node", { key: this.getKey() });
-    });
-
-    figure.insertAdjacentHTML("beforeend", this.innerHtml);
-
-    return figure
-  }
-
-  updateDOM() {
-    return true
-  }
-
-  isInline() {
-    return true
-  }
-
-  exportDOM() {
-    const attachment = createElement("action-text-attachment", {
-      sgid: this.sgid,
-      content: JSON.stringify(this.innerHtml),
-      "content-type": this.contentType
-    });
-
-    return { element: attachment }
-  }
-
-  exportJSON() {
-    return {
-      type: "custom_action_text_attachment",
-      version: 1,
-      sgid: this.sgid,
-      contentType: this.contentType,
-      innerHtml: this.innerHtml
-    }
-  }
-
-  decorate() {
-    return null
-  }
-}
-
 class LexicalEditorElement extends HTMLElement {
   static formAssociated = true
   static debug = true
   static commands = [ "bold", "italic", "" ]
 
-  static observedAttributes = [ "connected" ]
+  static observedAttributes = [ "connected", "required" ]
 
   #initialValue = ""
+  #validationTextArea = document.createElement("textarea")
 
   constructor() {
     super();
@@ -7381,6 +7655,11 @@ class LexicalEditorElement extends HTMLElement {
     if (name === "connected" && this.isConnected && oldValue != null && oldValue !== newValue) {
       requestAnimationFrame(() => this.#reconnect());
     }
+
+    if (name === "required" && this.isConnected) {
+      this.#validationTextArea.required = this.hasAttribute("required");
+      this.#setValidity();
+    }
   }
 
   formResetCallback() {
@@ -7434,7 +7713,7 @@ class LexicalEditorElement extends HTMLElement {
       Ys(Mi);
       const root = ps();
       root.clear();
-      root.append(...this.#parseHtmlIntoLexicalNodes(html));
+      if (html !== "") root.append(...this.#parseHtmlIntoLexicalNodes(html));
       root.select();
 
       this.#toggleEmptyStatus();
@@ -7547,6 +7826,7 @@ class LexicalEditorElement extends HTMLElement {
 
     this.internals.setFormValue(html);
     this._internalFormValue = html;
+    this.#validationTextArea.value = this.#isEmpty ? "" : html;
 
     if (changed) {
       dispatch(this, "lexxy:change");
@@ -7575,6 +7855,7 @@ class LexicalEditorElement extends HTMLElement {
       this.cachedValue = null;
       this.#internalFormValue = this.value;
       this.#toggleEmptyStatus();
+      this.#setValidity();
     }));
   }
 
@@ -7681,6 +7962,14 @@ class LexicalEditorElement extends HTMLElement {
     return !this.editorContentElement.textContent.trim() && !containsVisuallyRelevantChildren(this.editorContentElement)
   }
 
+  #setValidity() {
+    if (this.#validationTextArea.validity.valid) {
+      this.internals.setValidity({});
+    } else {
+      this.internals.setValidity(this.#validationTextArea.validity, this.#validationTextArea.validationMessage, this.editorContentElement);
+    }
+  }
+
   #reset() {
     this.#unregisterHandlers();