lexxy 0.9.10.beta → 0.9.11.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2024c70d60976f4adb581f6159aabff11b43b0ebc4f9ac97ed0cc8abb274b6a5
-  data.tar.gz: debcaecfaaa76add426101adcdace209a627fbf28cc64fa3c23e7606e018a498
+  metadata.gz: ef69b926b8319017e570cf09c7350d7f9c57661f0619858200bc91e734084acc
+  data.tar.gz: 596bfbfcc0698ddde22d64b7b3c5f1ae9bd61f230729242d0f784667411aac7c
 SHA512:
-  metadata.gz: 78ad7f015a4f7572411625e02e0ebc3454822f417500ac7a7dcdc431f8985e481543472eaa719e959faf159d141d2247818858dc3027465b13e751be1d3e25b8
-  data.tar.gz: 2d4d79a3d49de53d52c7a6284d2cac605cc152d8e86831af14ac76e2b7eea21e163549640369571c29d7a2da49b7a91213a6e52e411448c652b569f0f876e87b
+  metadata.gz: efcf8ed40d96b16bee9c19e6a65b2ec461e9d498213ded2f9aa5e8b0c87222da464ae370c43d5c7d07b102bd4f27e67a12f288fba34bdffca29587bbb8c0dd16
+  data.tar.gz: 8a6694608d8a43e8a994d2d31960839580d71e591aa4866187f018796544c03b3e397eb275a672752de37d108b555062ba3acf887d1776106298fcf960fc9c66

data/app/assets/javascript/lexxy.js

@@ -6786,15 +6786,23 @@ class LexicalToolbarElement extends HTMLElement {
   #setButtonPressed(name, isPressed) {
     const button = this.querySelector(`[name="${name}"]`);
     if (button) {
-      button.setAttribute("aria-pressed", isPressed.toString());
+      const next = isPressed.toString();
+      if (button.getAttribute("aria-pressed") !== next) {
+        button.setAttribute("aria-pressed", next);
+      }
     }
   }
 
   #setButtonDisabled(name, isDisabled) {
     const button = this.querySelector(`[name="${name}"]`);
     if (button) {
-      button.disabled = isDisabled;
-      button.setAttribute("aria-disabled", isDisabled.toString());
+      if (button.disabled !== isDisabled) {
+        button.disabled = isDisabled;
+      }
+      const next = isDisabled.toString();
+      if (button.getAttribute("aria-disabled") !== next) {
+        button.setAttribute("aria-disabled", next);
+      }
     }
   }
 
@@ -7411,6 +7419,18 @@ class LexxyExtension {
   initializeToolbar(_lexxyToolbar) {
 
   }
+
+  dispose() {
+  }
+}
+
+function $containsRangeSelection(node, selection = $r()) {
+  if (wr(selection)) {
+    const { commonAncestor } = Al(selection.focus.getNode(), selection.anchor.getNode());
+    return Xs(commonAncestor, parent => parent.is(node))
+  } else {
+    return false
+  }
 }
 
 function $createNodeSelectionWith(...nodes) {
@@ -9196,17 +9216,12 @@ class CommandDispatcher {
     this.editor = editorElement.editor;
     this.selection = editorElement.selection;
     this.contents = editorElement.contents;
-    this.clipboard = editorElement.clipboard;
 
     this.#registerCommands();
     this.#registerKeyboardCommands();
     this.#registerDragAndDropHandlers();
   }
 
-  dispatchPaste(event) {
-    return this.clipboard.paste(event)
-  }
-
   dispatchBold() {
     this.editor.dispatchCommand(me$2, "bold");
   }
@@ -9433,8 +9448,6 @@ class CommandDispatcher {
       const methodName = `dispatch${capitalize(command)}`;
       this.#registerCommandHandler(command, 0, this[methodName].bind(this));
     }
-
-    this.#registerCommandHandler(ge$3, Gi, this.dispatchPaste.bind(this));
   }
 
   #registerCommandHandler(command, priority, handler) {
@@ -9795,6 +9808,11 @@ class Selection {
     return $isActionTextAttachmentNode(firstNode) && firstNode.isPreviewableImage
   }
 
+  get isAtNodeStart() {
+    const { anchorNode, offset } = this.#getCollapsedSelectionData();
+    return anchorNode && offset === 0
+  }
+
   get nodeAfterCursor() {
     const { anchorNode, offset } = this.#getCollapsedSelectionData();
     if (!anchorNode) return null
@@ -10969,8 +10987,9 @@ class Uploader {
     return new UploaderKlass(editorElement, files)
   }
 
-  constructor(editorElement, files) {
+  constructor(editorElement, files, options = {}) {
     this.#files = files;
+    this.options = options;
 
     this.editorElement = editorElement;
     this.contents = editorElement.contents;
@@ -11012,10 +11031,10 @@ class GalleryUploader extends Uploader {
   #gallery
 
   static handle(editorElement, files) {
-    return this.#isMultipleImageUpload(files) || this.#gallerySelection(editorElement.selection)
+    return this.isMultipleImageUpload(files) || this.gallerySelection(editorElement.selection)
   }
 
-  static #isMultipleImageUpload(files) {
+  static isMultipleImageUpload(files) {
     let imageFileCount = 0;
     for (const file of files) {
       if (isPreviewableImage(file.type)) imageFileCount++;
@@ -11024,11 +11043,12 @@ class GalleryUploader extends Uploader {
     return false
   }
 
-  static #gallerySelection(selection) {
-    if (selection.isOnPreviewableImage) return true
+  static gallerySelection(selection) {
+    return selection.isOnPreviewableImage || this.selectionIsAfterGalleryEdge(selection)
+  }
 
-    const { node: selectedNode } = selection.selectedNodeWithOffset();
-    return St$3(selectedNode, ImageGalleryNode) !== null
+  static selectionIsAfterGalleryEdge(selection) {
+    return selection.isAtNodeStart && ImageGalleryNode.canCollapseWith(selection.nodeBeforeCursor)
   }
 
   $insertUploadNodes() {
@@ -11040,18 +11060,26 @@ class GalleryUploader extends Uploader {
   #findOrCreateGallery() {
     if (this.selection.isOnPreviewableImage) {
       this.#gallery = $findOrCreateGalleryForImage(this.#selectedNode);
+    } else if (this.#selectionIsAfterGalleryEdge) {
+      this.#gallery = $findOrCreateGalleryForImage(this.selection.nodeBeforeCursor);
     } else {
       this.#gallery = $createImageGalleryNode();
       this.contents.insertAtCursor(this.#gallery);
     }
   }
 
+  get #selectionIsAfterGalleryEdge() {
+    return this.constructor.selectionIsAfterGalleryEdge(this.selection)
+  }
+
   get #selectedNode() {
     const { node } = this.selection.selectedNodeWithOffset();
     return node
   }
 
   get #galleryInsertPosition() {
+    if (this.#selectionIsAfterGalleryEdge) return this.#gallery.getChildrenSize()
+
     const anchor = $r()?.anchor;
     const galleryHasElementSelection = anchor?.getNode().is(this.#gallery);
     if (galleryHasElementSelection) return anchor.offset
@@ -11851,10 +11879,22 @@ ${e}</tr>
 Please report this to https://github.com/markedjs/marked.`,e){let r="<p>An error occurred:</p><pre>"+w(n.message+"",true)+"</pre>";return t?Promise.resolve(r):r}if(t)return Promise.reject(n);throw n}}};var _=new B;function k(u,e){return _.parse(u,e)}k.options=k.setOptions=function(u){return _.setOptions(u),k.defaults=_.defaults,G(k.defaults),k};k.getDefaults=L;k.defaults=T;k.use=function(...u){return _.use(...u),k.defaults=_.defaults,G(k.defaults),k};k.walkTokens=function(u,e){return _.walkTokens(u,e)};k.parseInline=_.parseInline;k.Parser=b;k.parser=b.parse;k.Renderer=P;k.TextRenderer=$;k.Lexer=x;k.lexer=x.lex;k.Tokenizer=y;k.Hooks=S;k.parse=k;k.options;k.setOptions;k.use;k.walkTokens;k.parseInline;b.parse;x.lex;
 
 class Clipboard {
+  #listeners = new ListenerBin()
+
   constructor(editorElement) {
     this.editorElement = editorElement;
     this.editor = editorElement.editor;
     this.contents = editorElement.contents;
+
+    this.#registerPasteCommands();
+  }
+
+  dispose() {
+    this.editorElement = null;
+    this.editor = null;
+    this.contents = null;
+
+    this.#listeners.dispose();
   }
 
   paste(event) {
@@ -11879,6 +11919,25 @@ class Clipboard {
     return handled
   }
 
+  #registerPasteCommands() {
+    this.#listeners.track(
+      this.editor.registerCommand(ge$3, this.paste.bind(this), Xi),
+      this.editor.registerCommand(
+        ie$4,
+        (payload) => this.#handleParsedClipboardNodes(payload),
+        Xi
+      )
+    );
+  }
+
+  #handleParsedClipboardNodes({ nodes, selection }) {
+    const url = $bareUrlFromSingleLink(nodes);
+    if (!url) return false
+
+    this.#insertSingleLinkAt(selection, url);
+    return true
+  }
+
   #isPlainTextOrURLPasted(clipboardData) {
     return this.#isOnlyPlainTextPasted(clipboardData) || this.#isOnlyURLPasted(clipboardData)
   }
@@ -11941,6 +12000,24 @@ class Clipboard {
     });
   }
 
+  #insertSingleLinkAt(selection, url) {
+    if (!wr(selection)) return
+
+    if (!selection.isCollapsed()) {
+      Q$1(null);
+      Q$1(url);
+      return
+    }
+
+    const linkNode = $$1(url).append(pr(url));
+    selection.insertNodes([ linkNode ]);
+
+    // Defer the lexxy:insert-link event until after the active update commits;
+    // listeners may run editor mutations of their own.
+    const nodeKey = linkNode.getKey();
+    Promise.resolve().then(() => this.#dispatchLinkInsertEvent(nodeKey, { url }));
+  }
+
   #dispatchLinkInsertEvent(nodeKey, payload) {
     const linkManipulationMethods = {
       replaceLinkWith: (html, options) => this.contents.replaceNodeWithHTML(nodeKey, html, options),
@@ -12032,6 +12109,28 @@ class Clipboard {
   }
 }
 
+function $bareUrlFromSingleLink(nodes) {
+  if (nodes.length !== 1) return null
+
+  const node = nodes[0];
+  if (z$3(node)) return $bareUrlFromLink(node)
+
+  if (qi(node)) {
+    const children = node.getChildren();
+    if (children.length === 1 && z$3(children[0])) {
+      return $bareUrlFromLink(children[0])
+    }
+  }
+
+  return null
+}
+
+function $bareUrlFromLink(linkNode) {
+  const url = linkNode.getURL();
+  if (!url) return null
+  return linkNode.getTextContent() === url ? url : null
+}
+
 class Extensions {
 
   constructor(lexxyElement) {
@@ -12052,6 +12151,12 @@ class Extensions {
     this.#addExtensionToolbarButtons(toolbar);
   }
 
+  dispose() {
+    while (this.enabledExtensions.length) {
+      this.enabledExtensions.pop().dispose();
+    }
+  }
+
   #clearPreviousExtensionToolbarButtons(toolbar) {
     toolbar.querySelectorAll("[data-lexxy-extension]").forEach(el => el.remove());
   }
@@ -12457,9 +12562,15 @@ class TablesExtension extends LexxyExtension {
         yn(editor);
 
         return ic(
-          // Register Lexical table plugins
           $n(editor),
-          Mn(editor, true),
+
+          // Lexxy registers extensions before setRootElement(), but table
+          // drag-selection needs a root before wiring its pointer handlers.
+          editor.registerRootListener((rootElement) => {
+            if (rootElement) {
+              return Mn(editor, true)
+            }
+          }),
 
           // Bug fix: Prevent hardcoded background color (Lexical #8089)
           editor.registerNodeTransform(Ke$1, (node) => {
@@ -13167,7 +13278,8 @@ class FormatEscapeExtension extends LexxyExtension {
             we$1,
             (event) => $handleArrowDownInCodeBlock(event),
             Xi
-          )
+          ),
+          editor.registerNodeTransform(Ft$2, $ensureQuoteHasParagraphChild)
         )
       }
     })
@@ -13220,6 +13332,13 @@ function $handleArrowDownInCodeBlock(event) {
   return false
 }
 
+function $ensureQuoteHasParagraphChild(quoteNode) {
+  if (!quoteNode.isEmpty()) return
+
+  quoteNode.append(Yi());
+  if ($containsRangeSelection(quoteNode)) quoteNode.getFirstChild().select();
+}
+
 class LinkOpenerExtension extends LexxyExtension {
   get enabled() {
     return this.editorElement.supportsRichText
@@ -13307,6 +13426,7 @@ class LexicalEditorElement extends HTMLElement {
     this.id ||= generateDomId("lexxy-editor");
     this.config = new EditorConfiguration(this);
     this.extensions = new Extensions(this);
+    this.#disposables.push(this.extensions);
 
     this.editor = this.#createEditor();
     this.#disposables.push(this.editor);
@@ -13319,6 +13439,8 @@ class LexicalEditorElement extends HTMLElement {
     this.#disposables.push(this.selection);
 
     this.clipboard = new Clipboard(this);
+    this.#disposables.push(this.clipboard);
+
     this.adapter = new BrowserAdapter();
 
     const commandDispatcher = CommandDispatcher.configureFor(this);
@@ -14283,7 +14405,10 @@ class HighlightDropdown extends ToolbarDropdown {
 
     this.#colorButtons.forEach(button => {
       const matchesSelection = button.dataset.value === textColor || button.dataset.value === backgroundColor;
-      button.setAttribute("aria-pressed", matchesSelection);
+      const next = matchesSelection.toString();
+      if (button.getAttribute("aria-pressed") !== next) {
+        button.setAttribute("aria-pressed", next);
+      }
     });
 
     const hasHighlight = textColor !== NO_STYLE || backgroundColor !== NO_STYLE;
@@ -14691,7 +14816,7 @@ class LexicalPromptElement extends HTMLElement {
   }
 
   #selectOption(listItem) {
-    this.#clearSelection();
+    this.#clearListItemSelection();
     listItem.toggleAttribute("aria-selected", true);
     listItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
     listItem.focus();
@@ -14701,18 +14826,28 @@ class LexicalPromptElement extends HTMLElement {
       this.#editorElement.focus();
     });
 
-    this.#editorContentElement.setAttribute("aria-controls", this.popoverElement.id);
-    this.#editorContentElement.setAttribute("aria-activedescendant", listItem.id);
-    this.#editorContentElement.setAttribute("aria-haspopup", "listbox");
+    this.#setEditorAssociationAttribute("aria-controls", this.popoverElement.id);
+    this.#setEditorAssociationAttribute("aria-activedescendant", listItem.id);
+    this.#setEditorAssociationAttribute("aria-haspopup", "listbox");
   }
 
-  #clearSelection() {
+  #clearListItemSelection() {
     this.#listItemElements.forEach((item) => { item.toggleAttribute("aria-selected", false); });
+  }
+
+  #clearSelection() {
+    this.#clearListItemSelection();
     this.#editorContentElement.removeAttribute("aria-controls");
     this.#editorContentElement.removeAttribute("aria-activedescendant");
     this.#editorContentElement.removeAttribute("aria-haspopup");
   }
 
+  #setEditorAssociationAttribute(name, value) {
+    if (this.#editorContentElement.getAttribute(name) !== value) {
+      this.#editorContentElement.setAttribute(name, value);
+    }
+  }
+
   #positionPopover() {
     const { x, y, fontSize } = this.#selection.cursorPosition;
     const editorRect = this.#editorElement.getBoundingClientRect();
@@ -15906,13 +16041,11 @@ function highlightElement(preElement) {
   code = new DOMParser().parseFromString(code, "text/html").body.textContent || "";
 
   const highlightedHtml = Prism$1.highlight(code, grammar, language);
-  const codeElement = createElement("code", { "data-language": language, innerHTML: highlightedHtml });
+  preElement.innerHTML = highlightedHtml;
 
   if (highlights.length > 0) {
-    applyHighlightRanges(codeElement, highlights);
+    applyHighlightRanges(preElement, highlights);
   }
-
-  preElement.replaceChildren(codeElement);
 }
 
 // Walk the DOM tree inside a <pre> element and build a list of