lexxy 1.0.2 → 1.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f75c0788ef54e0cee25bbb2ef6c037d570b44f9dc40d5cdbb7373b168789dfbc
-  data.tar.gz: dad6f3a8057d1317a01f67f43081b3121af8562a09f4a2d6ec5f5d45878456f5
+  metadata.gz: f90f12597c2b6b34e544760455df98d3c4a8273230b159ff57e6ba693175a72b
+  data.tar.gz: 1ed0a3faa6d8ebc6bb810c102817ad281a7e638630d9c2f242d6c85c97276412
 SHA512:
-  metadata.gz: 21fec3530465ce58796bdb7c596ef491007d90e76e2991699647de9ede990913a85d2f630696e8e914e48c0a54234b0ea8a806c453dab04a6b5dfd61da75f330
-  data.tar.gz: '0584ef6c45f3262e8035715d7e48bc5bba837f6abb7d377ce0f80f29ce4f741e4f9a25c0a76f92939d0cd99a643c822a6d1e31eb7ce9a8e85c4f7acbac9daed4'
+  metadata.gz: 47ecc7aedf386f5d58e9e72f86eb4d81e4c61a44d858becf2096459fc64c8cfc016c80f68b737d4ecc82307be76e3508e7f3c48557d7177afe229286f1cc36a4
+  data.tar.gz: 6b40a63ef8cf45c5451e3190c4feee447358e1c224f259d370d5337e1b2a1f2a70126e98b307e51fa4247289cfecf0c5b4c50cb5267dbaf5d0b56d18c34b9581

data/app/assets/javascript/lexxy.js

@@ -7754,8 +7754,17 @@ class LexicalToolbarElement extends HTMLElement {
 
   #updateButtonStates() {
     const selection = Qr();
-    if (!Fr(selection)) return
 
+    this.#setButtonDisabled("link", Ir(selection) && !this.selection.hasLinkableAttachment);
+
+    if (Ir(selection)) {
+      this.#setButtonPressed("link", this.selection.isInLink);
+    } else if (Fr(selection)) {
+      this.#updateFormatButtonStates(selection);
+    }
+  }
+
+  #updateFormatButtonStates(selection) {
     const anchorNode = selection.anchor.getNode();
     if (!anchorNode.getParent()) { return }
 
@@ -8138,7 +8147,7 @@ class ToolbarDropdown extends HTMLElement {
   #handleTriggerClick = (event) => {
     if (this.isOpen) {
       this.close({ focusEditor: false });
-    } else {
+    } else if (this.trigger.ariaDisabled !== "true") {
       this.#shouldReturnFocusToTrigger = this.#isOpenedFromHost(event);
       this.host?.closeDropdowns({ except: this });
       this.open();
@@ -9751,9 +9760,11 @@ function $consecutiveSiblingGroups(blocks) {
   return groups
 }
 
-// Payload: Record<nodeKey, { patch?, replace? }>
+// Payload: Record<nodeKey, { patch?, replace?, replaceInHistory? }>
 //   - patch: plain object, shallow-merged into the existing node's properties
 //   - replace: a LexicalNode instance that replaces the node
+//   - replaceInHistory: builds each history entry's replacement from the node
+//     that entry holds, so edits made between entries survive; defaults to replace
 const REWRITE_HISTORY_COMMAND = re$5("REWRITE_HISTORY_COMMAND");
 
 class RewritableHistoryExtension extends LexxyExtension {
@@ -9813,14 +9824,14 @@ class RewritableHistoryExtension extends LexxyExtension {
 
       const editorState = entry.editorState = safeCloneEditorState(entry.editorState);
 
-      for (const [ nodeKey, { patch, replace } ] of Object.entries(rewrites)) {
+      for (const [ nodeKey, { patch, replace, replaceInHistory } ] of Object.entries(rewrites)) {
         const node = editorState._nodeMap.get(nodeKey);
         if (!node) continue
 
         if (patch) {
           this.#patchNodeInEditorState(editorState, node, patch);
         } else if (replace) {
-          this.#replaceNodeInEditorState(editorState, node, replace);
+          this.#replaceNodeInEditorState(editorState, node, replaceInHistory?.(node) ?? replace);
         }
       }
     }
@@ -9894,6 +9905,7 @@ class ActionTextAttachmentNode extends Ji {
           conversion: (attachment) => ({
             node: new ActionTextAttachmentNode({
               sgid: attachment.getAttribute("sgid"),
+              href: attachment.getAttribute("href"),
               src: attachment.getAttribute("url"),
               previewable: attachment.getAttribute("previewable"),
               altText: attachment.getAttribute("alt"),
@@ -9948,10 +9960,11 @@ class ActionTextAttachmentNode extends Ji {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ sgid, src, previewSrc, previewable, previewStatusUrl, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError } = {}, key) {
+  constructor({ sgid, href, src, previewSrc, previewable, previewStatusUrl, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError } = {}, key) {
     super(key);
 
     this.sgid = sgid;
+    this.href = href || null;
     this.src = src;
     this.previewSrc = previewSrc;
     this.previewable = parseBoolean(previewable);
@@ -10024,6 +10037,7 @@ class ActionTextAttachmentNode extends Ji {
   exportDOM() {
     const attachment = createElement(ActionTextAttachmentNode.TAG_NAME, {
       sgid: this.sgid,
+      href: this.href,
       previewable: this.previewable || null,
       url: this.src,
       alt: this.altText,
@@ -10044,6 +10058,7 @@ class ActionTextAttachmentNode extends Ji {
       type: "action_text_attachment",
       version: 1,
       sgid: this.sgid,
+      href: this.href,
       src: this.src,
       previewable: this.previewable,
       previewStatusUrl: this.previewStatusUrl,
@@ -10115,9 +10130,9 @@ class ActionTextAttachmentNode extends Ji {
     });
   }
 
-  replaceAndRewriteHistory(node) {
+  replaceAndRewriteHistory(node, replaceInHistory) {
     this.editor.dispatchCommand(REWRITE_HISTORY_COMMAND, {
-      [this.getKey()]: { replace: node }
+      [this.getKey()]: { replace: node, replaceInHistory }
     });
   }
 
@@ -10313,6 +10328,12 @@ function $isActionTextAttachmentNode(node) {
   return node instanceof ActionTextAttachmentNode
 }
 
+// Only images can carry a link: Action Text keeps an attachment's `href`, and a
+// host's blob partial can wrap the image in it.
+function $isLinkableAttachmentNode(node) {
+  return $isActionTextAttachmentNode(node) && node.isPreviewableImage
+}
+
 async function loadFileIntoImage(file, image) {
   return new Promise((resolve) => {
     const reader = new FileReader();
@@ -10562,14 +10583,20 @@ class ActionTextAttachmentUploadNode extends ActionTextAttachmentNode {
   $showUploadedAttachment(blob) {
     const previewSrc = this.isPreviewableImage && this.#canPreviewLocally ? URL.createObjectURL(this.file) : null;
 
-    const replacementNode = this.#toActionTextAttachmentNodeWith(blob, previewSrc);
-    this.replaceAndRewriteHistory(replacementNode);
+    const replacementNode = this.#toActionTextAttachmentNodeWith(this.#latest, blob, previewSrc);
+    this.replaceAndRewriteHistory(replacementNode, (uploadNode) => this.#toActionTextAttachmentNodeWith(uploadNode, blob, previewSrc));
 
     return replacementNode.getKey()
   }
 
-  #toActionTextAttachmentNodeWith(blob, previewSrc) {
-    const conversion = new AttachmentNodeConversion(this, blob, previewSrc);
+  // The node the upload started from, as edited since. It is gone when the
+  // attachment was removed mid-upload, and only history entries still hold it.
+  get #latest() {
+    return Yo(this.getKey()) ?? this
+  }
+
+  #toActionTextAttachmentNodeWith(uploadNode, blob, previewSrc) {
+    const conversion = new AttachmentNodeConversion(uploadNode, blob, previewSrc);
     return conversion.toAttachmentNode()
   }
 
@@ -12057,17 +12084,11 @@ class CommandDispatcher {
       this.selection.placeCursorInsideAdjacentLink();
 
       const selection = Qr();
-      if (!Fr(selection)) return
-
-      const anchorNode = selection.anchor.getNode();
 
-      if (selection.isCollapsed() && !At$2(anchorNode, F$4)) {
-        const autoLinkNode = H$5(url);
-        const textNode = kr(url);
-        autoLinkNode.append(textNode);
-        selection.insertNodes([ autoLinkNode ]);
-      } else {
-        Q$5(url);
+      if (Ir(selection)) {
+        $setHrefOnSelectedImages(selection, url);
+      } else if (Fr(selection)) {
+        $linkSelectedText(url, selection);
       }
     });
   }
@@ -12081,7 +12102,13 @@ class CommandDispatcher {
         return
       }
 
-      Q$5(null);
+      const selection = Qr();
+
+      if (Ir(selection)) {
+        $setHrefOnSelectedImages(selection, null);
+      } else {
+        Q$5(null);
+      }
     });
   }
 
@@ -12429,6 +12456,25 @@ class CommandDispatcher {
 
 }
 
+function $setHrefOnSelectedImages(selection, href) {
+  for (const node of selection.getNodes()) {
+    if ($isLinkableAttachmentNode(node)) node.getWritable().href = href;
+  }
+}
+
+function $linkSelectedText(url, selection) {
+  const anchorNode = selection.anchor.getNode();
+
+  if (selection.isCollapsed() && !At$2(anchorNode, F$4)) {
+    const autoLinkNode = H$5(url);
+    const textNode = kr(url);
+    autoLinkNode.append(textNode);
+    selection.insertNodes([ autoLinkNode ]);
+  } else {
+    Q$5(url);
+  }
+}
+
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
@@ -12525,7 +12571,7 @@ class Selection {
       isStrikethrough: selection.hasFormat("strikethrough"),
       isUnderline: selection.hasFormat("underline"),
       isHighlight: isSelectionHighlighted(selection),
-      isInLink: this.linkUrl !== null,
+      isInLink: this.isInLink,
       isInQuote: Mt$2(topLevelElement),
       isInHeading: headingNode !== null,
       isInCode: this.#isInCode(selection, anchorNode),
@@ -12536,8 +12582,18 @@ class Selection {
     }
   }
 
+  get isInLink() {
+    return this.linkUrl !== null
+  }
+
   get linkUrl() {
-    return this.linkAtCursor?.getURL() ?? null
+    const { node } = this.selectedNodeWithOffset();
+
+    if ($isActionTextAttachmentNode(node)) {
+      return $isLinkableAttachmentNode(node) ? node.href : null
+    } else {
+      return this.linkAtCursor?.getURL() ?? null
+    }
   }
 
   get linkAtCursor() {
@@ -12545,6 +12601,11 @@ class Selection {
     return At$2(anchorNode, F$4) ?? this.#linkEndingAtCursor()
   }
 
+  get hasLinkableAttachment() {
+    const selection = Qr();
+    return Ir(selection) && selection.getNodes().some($isLinkableAttachmentNode)
+  }
+
   nearestNodeOfType(nodeType) {
     const anchorNode = Qr()?.anchor?.getNode();
     return At$2(anchorNode, nodeType)
@@ -17025,7 +17086,7 @@ function customAttachmentBesideAnchor(selection) {
 }
 
 const ATTACHMENT_ATTRIBUTES = [ "alt", "caption", "content", "content-type", "data-direct-upload-id",
-  "data-sgid", "filename", "filesize", "height", "presentation", "previewable", "sgid", "url", "width" ];
+  "data-sgid", "filename", "filesize", "height", "href", "presentation", "previewable", "sgid", "url", "width" ];
 
 class AttachmentsExtension extends LexxyExtension {
   #uploadsCount = 0
@@ -19506,14 +19567,51 @@ class LexicalPromptElement extends HTMLElement {
 
     const forceTop = this.verticalDirection === "top";
     const forceBottom = this.verticalDirection === "bottom";
-    const overflowsWindow = popoverRect.bottom > window.innerHeight;
 
-    if (!forceBottom && (forceTop || overflowsWindow)) {
+    if (!forceBottom && (forceTop || this.#fitsBetterAbove(popoverRect, fontSize))) {
       this.#setPopoverOffsetY(contentRect.height - y + fontSize);
       this.popoverElement.toggleAttribute("data-clipped-at-bottom", true);
     }
   }
 
+  #fitsBetterAbove(popoverRect, fontSize) {
+    const { top, bottom } = this.#visibleBounds();
+    const overflowsBelow = popoverRect.bottom > bottom;
+    const roomAbove = popoverRect.top - fontSize - top;
+    const roomBelow = bottom - popoverRect.top;
+
+    return overflowsBelow && roomAbove > roomBelow
+  }
+
+  // A scroll container or modal around the editor clips the menu at its scrollport before the
+  // window does, so the visible area is the window narrowed by every clipping ancestor. A fixed
+  // ancestor escapes the clipping of everything up to its containing block: the window, or the
+  // nearest ancestor that a transform, filter or containment makes contain fixed descendants.
+  // A top-layer ancestor, such as a modal dialog, escapes everything outside it.
+  #visibleBounds() {
+    let top = 0;
+    let bottom = window.innerHeight;
+    let escapingToContainingBlock = false;
+
+    for (let node = this.#editorElement; node && node !== document.body; node = node.parentElement) {
+      const style = getComputedStyle(node);
+
+      if (style.display !== "contents" && (!escapingToContainingBlock || containsFixedDescendants(style))) {
+        escapingToContainingBlock = style.position === "fixed";
+
+        if (clipsDescendants(style)) {
+          const scrollport = scrollportBounds(node);
+          top = Math.max(top, scrollport.top);
+          bottom = Math.min(bottom, scrollport.bottom);
+        }
+      }
+
+      if (node.matches(":modal, :popover-open")) break
+    }
+
+    return { top, bottom }
+  }
+
   #setPopoverOffsetX(value) {
     this.popoverElement.style.setProperty("--lexxy-prompt-offset-x", `${value}px`);
   }
@@ -19799,6 +19897,29 @@ class LexicalPromptElement extends HTMLElement {
   }
 }
 
+function clipsDescendants(style) {
+  return style.overflowY !== "visible" || /paint|strict|content/.test(style.contain) || style.contentVisibility === "auto"
+}
+
+// The bounding rect is in viewport coordinates, already scaled by any transform, while
+// clientTop and clientHeight are untransformed layout sizes, so they're scaled to match.
+function scrollportBounds(element) {
+  const rect = element.getBoundingClientRect();
+  const scale = rect.height / element.offsetHeight || 1;
+  const top = rect.top + element.clientTop * scale;
+
+  return { top, bottom: top + element.clientHeight * scale }
+}
+
+function containsFixedDescendants(style) {
+  return [ style.transform, style.translate, style.rotate, style.scale, style.perspective, style.filter, style.backdropFilter ]
+    .some(value => value && value !== "none") ||
+    /transform|translate|rotate|scale|perspective|filter/.test(style.willChange) ||
+    /paint|layout|strict|content/.test(style.contain) ||
+    /size/.test(style.containerType) ||
+    style.contentVisibility === "auto"
+}
+
 class CodeLanguagePicker extends HTMLElement {
   #abortController = null
   #listeners = new ListenerBin()
@@ -21862,5 +21983,5 @@ queueMicrotask(() => {
   }
 });
 
-export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, $isCustomActionTextAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, EditorSanitizer, LexxyExtension as Extension, HorizontalDividerNode, Lexical_prod as Lexical, NativeAdapter, REWRITE_HISTORY_COMMAND, configure, highlightCode, highlightElement };
+export { $createActionTextAttachmentNode, $createActionTextAttachmentUploadNode, $isActionTextAttachmentNode, $isCustomActionTextAttachmentNode, $isLinkableAttachmentNode, ActionTextAttachmentNode, ActionTextAttachmentUploadNode, CustomActionTextAttachmentNode, EditorSanitizer, LexxyExtension as Extension, HorizontalDividerNode, Lexical_prod as Lexical, NativeAdapter, REWRITE_HISTORY_COMMAND, configure, highlightCode, highlightElement };
 //# sourceMappingURL=lexxy.js.map