fix: link preview decorations not showing on the correct node

fixes: #37

Author: b-kelly

src/rich-text/plugins/link-preview.ts

@@ -29,9 +29,16 @@ export interface LinkPreviewProvider {
  */
 function getValidProvider(
     providers: LinkPreviewProvider[],
-    node: ProsemirrorNode
-): { url: string; provider: LinkPreviewProvider } | null {
-    const n = node.isText ? node : node.content.firstChild;
+    node: ProsemirrorNode,
+    parent: ProsemirrorNode
+): {
+    url: string;
+    provider: LinkPreviewProvider;
+} | null {
+    if (!node?.isText || !parent) {
+        return null;
+    }
+    const n = node; // TODO CLEANUP
     const url = n?.marks.find((m) => m.type.name === "link")?.attrs
         ?.href as string;
 
@@ -47,7 +54,7 @@ function getValidProvider(
         }
 
         // full preview providers require links to be in a paragraph by themselves
-        if (!provider.textOnly && !isStandalonePreviewableLink(node)) {
+        if (!provider.textOnly && !isStandalonePreviewableLink(parent)) {
             continue;
         }
 
@@ -93,8 +100,8 @@ function getValidNodes(
     }[] = [];
 
     // iterate over current document structure
-    currState.doc.descendants((node, pos) => {
-        const provider = getValidProvider(providers, node);
+    currState.doc.descendants((node, pos, parent) => {
+        const provider = getValidProvider(providers, node, parent);
 
         if (provider) {
             validNodes.push({ provider, pos, node });
@@ -143,14 +150,20 @@ function generateRecentPreviewDecorations(
         if (!n.isTextOnly && n.content) {
             // if the url is in the cache, insert the link preview
             linkPreviewDecorations.push(insertLinkPreview(n.pos, n.content));
-        } else {
-            const node = doc.nodeAt(n.pos);
+        } else if (!n.content) {
             // otherwise, add the loading styles
+            // attach the node decorations to the text's parent node
+            const resolved = doc.resolve(n.pos);
+            const parentPos = resolved.posAtIndex(0, resolved.depth - 1);
             linkPreviewDecorations.push(
-                Decoration.node(n.pos, n.pos + node.nodeSize, {
-                    class: "is-loading js-link-preview-loading",
-                    title: "Loading...",
-                })
+                Decoration.node(
+                    parentPos,
+                    parentPos + resolved.parent.nodeSize,
+                    {
+                        class: "is-loading js-link-preview-loading",
+                        title: "Loading...",
+                    }
+                )
             );
         }
     });
@@ -173,7 +186,9 @@ function insertLinkPreview(pos: number, content: Node | null) {
         placeholder.appendChild(content.cloneNode(true));
     }
 
-    return Decoration.widget(pos, placeholder);
+    return Decoration.widget(pos, placeholder, {
+        side: -1,
+    });
 }
 
 /**

test/rich-text/plugins/link-preview.test.ts

@@ -79,23 +79,22 @@ describe("link-preview", () => {
             textOnly: true,
         });
 
-        // TODO loading indicator broken - decoration is not valid to be added to node
         // check that the loading indicator is shown
-        // let loadingIndicator = richEditorView.dom.querySelectorAll(
-        //     ".js-link-preview-loading"
-        // );
-        // expect(loadingIndicator).toHaveLength(1);
+        let loadingIndicator = richEditorView.dom.querySelectorAll(
+            ".js-link-preview-loading"
+        );
+        expect(loadingIndicator).toHaveLength(1);
 
         resolver(document.createTextNode(textOnlyPreviewText));
 
         // wait for the promise to resolve (immediately) and check that the async content was pulled in
         await sleepAsync(0);
 
         // check that the loading indicator is no longer showing
-        // loadingIndicator = richEditorView.dom.querySelectorAll(
-        //     ".js-link-preview-loading"
-        // );
-        // expect(loadingIndicator).toHaveLength(0);
+        loadingIndicator = richEditorView.dom.querySelectorAll(
+            ".js-link-preview-loading"
+        );
+        expect(loadingIndicator).toHaveLength(0);
 
         expect(richEditorView.document).toMatchNodeTree({
             childCount: 1,
@@ -115,4 +114,37 @@ describe("link-preview", () => {
             ],
         });
     });
+
+    it.each([
+        [
+            `| Column A | Column B |
+| --- | --- |
+| [Cell 1](https://example.com/foo/bar) | Cell 2 |
+| Cell 3 | Cell 4 |`,
+            "TD",
+        ],
+        [`# https://example.com/foo/bar`, "H1"],
+    ])(
+        "should add rich previews directly before the link in the same parent node",
+        async (markdown, parentNodeName) => {
+            const richEditorView = richView(markdown, {
+                domainTest: /example.com/,
+                renderer: (url) => {
+                    const promiseContent = document.createElement("div");
+                    promiseContent.textContent = url;
+                    return Promise.resolve(promiseContent);
+                },
+            });
+
+            // wait for the promise to resolve (immediately) and check that the async content was pulled in
+            await sleepAsync(0);
+
+            const oneboxDom = richEditorView.dom.querySelectorAll(
+                ".js-link-preview-decoration"
+            );
+            expect(oneboxDom).toHaveLength(1);
+            expect(oneboxDom[0].parentElement.nodeName).toBe(parentNodeName);
+            expect(oneboxDom[0].nextElementSibling.nodeName).toBe("A");
+        }
+    );
 });