@37signals/lexxy 0.9.15-alpha.1 → 0.9.15-alpha.3

package/dist/lexxy.esm.js

@@ -5,7 +5,7 @@ import { SKIP_DOM_SELECTION_TAG, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, CAN_RED
 import { LinkNode, $createAutoLinkNode, $toggleLink, $createLinkNode, $isLinkNode, AutoLinkNode } from '@lexical/link';
 import { buildEditorFromExtensions } from '@lexical/extension';
 import { ListNode, ListItemNode, $getListDepth, INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, $isListItemNode, $isListNode, registerList } from '@lexical/list';
-import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, $descendantsMatching, mergeRegister, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from '@lexical/utils';
+import { $getNearestNodeOfType, $wrapNodeInElement, $lastToFirstIterator, $descendantsMatching, mergeRegister, $insertNodeToNearestRoot, $insertFirst, $unwrapAndFilterDescendants, $firstToLastIterator, $getNearestBlockElementAncestorOrThrow, IS_APPLE } from '@lexical/utils';
 import { registerPlainText } from '@lexical/plain-text';
 import { RichTextExtension, $isQuoteNode, $isHeadingNode, $createHeadingNode, $createQuoteNode, QuoteNode, HeadingNode, registerRichText } from '@lexical/rich-text';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -1968,6 +1968,11 @@ function safeCloneEditorState(editorState) {
   return clone
 }
 
+const INITIAL_PREVIEW_POLL_DELAY_MS = 3000;
+const MAX_PREVIEW_POLL_DELAY_MS = 120000;
+const MAX_PREVIEW_POLL_ATTEMPTS = 20;
+
+
 class ActionTextAttachmentNode extends DecoratorNode {
   static getType() {
     return "action_text_attachment"
@@ -2042,7 +2047,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
     return Lexxy.global.get("attachmentTagName")
   }
 
-  constructor({ tagName, sgid, src, previewSrc, previewable, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError }, key) {
+  constructor({ tagName, sgid, src, previewSrc, previewable, previewStatusUrl, pendingPreview, altText, caption, contentType, fileName, fileSize, width, height, uploadError }, key) {
     super(key);
 
     this.tagName = tagName || ActionTextAttachmentNode.TAG_NAME;
@@ -2050,6 +2055,7 @@ class ActionTextAttachmentNode extends DecoratorNode {
     this.src = src;
     this.previewSrc = previewSrc;
     this.previewable = parseBoolean(previewable);
+    this.previewStatusUrl = previewStatusUrl;
     this.pendingPreview = pendingPreview;
     this.altText = altText || "";
     this.caption = caption || "";
@@ -2128,6 +2134,8 @@ class ActionTextAttachmentNode extends DecoratorNode {
       sgid: this.sgid,
       src: this.src,
       previewable: this.previewable,
+      previewStatusUrl: this.previewStatusUrl,
+      pendingPreview: this.pendingPreview,
       altText: this.altText,
       caption: this.caption,
       contentType: this.contentType,
@@ -2246,41 +2254,68 @@ class ActionTextAttachmentNode extends DecoratorNode {
     });
   }
 
+  // While the file-icon is shown, watch for the preview to become ready.
+  // With a status URL, poll it (2xx = processing, anything else = ready).
+  // Without one, preload the preview URL once and swap on load.
   #pollForPreview(figure) {
+    if (this.previewStatusUrl) {
+      this.#waitForPreviewByPollingStatus(figure);
+    } else {
+      this.#waitForPreviewByPreloadingImage(figure);
+    }
+  }
+
+  #waitForPreviewByPollingStatus(figure) {
     let attempt = 0;
-    const maxAttempts = 10;
 
-    const tryLoad = () => {
+    const tryStatus = async () => {
       if (!this.editor.read(() => this.isAttached())) return
 
-      const img = new Image();
-      const cacheBustedSrc = `${this.src}${this.src.includes("?") ? "&" : "?"}_=${Date.now()}`;
+      try {
+        // redirect: "manual" prevents fetch from transparently following a
+        // 3xx response — without it, a status endpoint that redirected to,
+        // say, the preview URL would resolve to a 200 and look like
+        // "still processing." The contract is "any non-2xx means done."
+        const response = await fetch(this.previewStatusUrl, { credentials: "include", redirect: "manual" });
 
-      img.onload = () => {
         if (!this.editor.read(() => this.isAttached())) return
 
-        // The placeholder is a file-type icon SVG (86×100). A real thumbnail
-        // generated from PDF/video content is significantly larger.
-        if (img.naturalWidth > 150 && img.naturalHeight > 150) {
-          this.#swapToPreviewDOM(figure, cacheBustedSrc);
-        } else {
+        if (response.ok) {
           retry();
+        } else {
+          this.#swapToPreviewDOM(figure, this.src);
         }
-      };
-      img.onerror = () => retry();
-      img.src = cacheBustedSrc;
+      } catch {
+        retry();
+      }
     };
 
     const retry = () => {
       attempt++;
-      if (attempt < maxAttempts && this.editor.read(() => this.isAttached())) {
-        const delay = Math.min(2000 * Math.pow(1.5, attempt), 15000);
-        setTimeout(tryLoad, delay);
+      if (attempt < MAX_PREVIEW_POLL_ATTEMPTS && this.editor.read(() => this.isAttached())) {
+        const delay = Math.min(2000 * Math.pow(1.5, attempt), MAX_PREVIEW_POLL_DELAY_MS);
+        setTimeout(tryStatus, delay);
       }
     };
 
     // Give the server time to start processing before the first attempt
-    setTimeout(tryLoad, 3000);
+    setTimeout(tryStatus, INITIAL_PREVIEW_POLL_DELAY_MS);
+  }
+
+  #waitForPreviewByPreloadingImage(figure) {
+    const img = new Image();
+    img.onload = () => {
+      if (!this.editor.read(() => this.isAttached())) return
+      this.#swapToPreviewDOM(figure, this.src);
+    };
+    img.onerror = () => {
+      // Clear pendingPreview so undo/redo or any JSON round-trip doesn't
+      // re-enter the pending flow and issue another fetch. The file icon
+      // stays as the stable fallback.
+      if (!this.editor.read(() => this.isAttached())) return
+      this.patchAndRewriteHistory({ pendingPreview: false });
+    };
+    img.src = this.src;
   }
 
   #swapToPreviewDOM(figure, previewSrc) {
@@ -3625,8 +3660,7 @@ class CommandDispatcher {
   }
 
   dispatchInsertHorizontalDivider() {
-    this.contents.insertAtCursorEnsuringLineBelow(new HorizontalDividerNode());
-    this.editor.focus();
+    $insertNodeToNearestRoot(new HorizontalDividerNode);
   }
 
   dispatchSetFormatHeadingLarge() {
@@ -4859,7 +4893,7 @@ class ImageGalleryNode extends ElementNode {
   replaceWithSingularChild() {
     if (this.#hasSingularChild) {
       const child = this.getFirstChild();
-      return this.replace(child)
+      return this.replace($makeSafeForRoot(child))
     }
   }
 
@@ -5287,6 +5321,7 @@ class AttachmentNodeConversion {
       fileName: blob.filename,
       fileSize: blob.byte_size,
       previewable: blob.previewable,
+      previewStatusUrl: blob.preview_status_url
     }
   }
 
@@ -8638,6 +8673,10 @@ class LexicalPromptElement extends HTMLElement {
     return this.getAttribute("only-at")
   }
 
+  get verticalDirection() {
+    return this.getAttribute("vertical-direction")
+  }
+
   get open() {
     return this.popoverElement?.classList?.contains("lexxy-prompt-menu--visible")
   }
@@ -8866,11 +8905,15 @@ class LexicalPromptElement extends HTMLElement {
 
     const popoverRect = this.popoverElement.getBoundingClientRect();
 
-    if (popoverRect.right > window.innerWidth) {
+    if (popoverRect.right > editorRect.right) {
       this.popoverElement.toggleAttribute("data-clipped-at-right", true);
     }
 
-    if (popoverRect.bottom > window.innerHeight) {
+    const forceTop = this.verticalDirection === "top";
+    const forceBottom = this.verticalDirection === "bottom";
+    const overflowsWindow = popoverRect.bottom > window.innerHeight;
+
+    if (!forceBottom && (forceTop || overflowsWindow)) {
       this.#setPopoverOffsetY(contentRect.height - y + fontSize);
       this.popoverElement.toggleAttribute("data-clipped-at-bottom", true);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.9.15-alpha.1",
+  "version": "0.9.15-alpha.3",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",