@uniweb/content-reader 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/content-reader",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Markdown to ProseMirror document structure converter",
   "type": "module",
   "main": "src/index.js",

package/src/parser/block.js

@@ -111,8 +111,13 @@ function parseBlock(token, schema) {
         let currentParagraph = null;
 
         content.forEach((element) => {
-            if (element.type === "image") {
-                // If there's an open paragraph, push it to the result before the image
+            if (
+                (element.type === "image" && element.attrs?.role !== "icon") ||
+                element.type === "inline_child_ref"
+            ) {
+                // Extract non-icon images to root level so they become
+                // block-level elements. Icons stay inline so the semantic
+                // parser can associate them with adjacent links.
                 if (currentParagraph) {
                     result.push({
                         type: "paragraph",

package/src/parser/inline.js

@@ -148,6 +148,20 @@ function parseInline(token, schema, removeNewLine = false) {
     }
 
     if (token.type === "image") {
+        // Check for @ component reference: ![alt](@ComponentName){key=value}
+        if (token.href.startsWith('@') && token.href.length > 1) {
+            const component = token.href.slice(1)
+            const { role: _role, ...otherAttrs } = token.attrs || {}
+            return [{
+                type: "inline_child_ref",
+                attrs: {
+                    component,
+                    alt: text || null,
+                    ...otherAttrs,
+                },
+            }]
+        }
+
         let role, src, iconLibrary, iconName;
 
         // Supported icon families - friendly names and direct react-icons codes

package/tests/parser.test.js

@@ -200,7 +200,9 @@ describe("Extended Syntax", () => {
   });
 
   test("parses images with roles", () => {
-    // Images are extracted from paragraphs to root level for component rendering
+    // Icons stay inline (inside paragraphs) so the semantic parser can
+    // associate them with adjacent links. Non-icon images are extracted
+    // to root level.
     const markdown = '![Alt Text](icon:path/to/image.svg "Caption text")';
     const result = markdownToProseMirror(markdown);
 
@@ -208,13 +210,58 @@ describe("Extended Syntax", () => {
       type: "doc",
       content: [
         {
-          type: "image",
-          attrs: {
-            src: "path/to/image.svg",
-            caption: "Caption text",
-            alt: "Alt Text",
-            role: "icon",
-          },
+          type: "paragraph",
+          content: [
+            {
+              type: "image",
+              attrs: {
+                src: "path/to/image.svg",
+                caption: "Caption text",
+                alt: "Alt Text",
+                role: "icon",
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  test("keeps icon inline with adjacent link for icon-link association", () => {
+    // Icons must stay inline so the semantic parser can associate them
+    // with adjacent links (iconBefore / iconAfter)
+    const markdown = "![](lu-home) [Sports](/sports)";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result).toEqual({
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: [
+            {
+              type: "image",
+              attrs: {
+                src: null,
+                caption: null,
+                alt: null,
+                role: "icon",
+                library: "lu",
+                name: "home",
+              },
+            },
+            { type: "text", text: " " },
+            {
+              type: "text",
+              text: "Sports",
+              marks: [
+                {
+                  type: "link",
+                  attrs: { href: "/sports", title: null },
+                },
+              ],
+            },
+          ],
         },
       ],
     });
@@ -652,3 +699,87 @@ describe("Bracketed Spans", () => {
     expect(content[2].marks[0].attrs.class).toBe("muted");
   });
 });
+
+describe("Component References (@)", () => {
+  test("parses bare @ComponentName", () => {
+    const markdown = "![](@Hero)";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result).toEqual({
+      type: "doc",
+      content: [
+        {
+          type: "inline_child_ref",
+          attrs: {
+            component: "Hero",
+            alt: null,
+          },
+        },
+      ],
+    });
+  });
+
+  test("parses @ComponentName with alt text and params", () => {
+    const markdown = "![Architecture diagram](@NetworkDiagram){variant=compact size=lg}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result).toEqual({
+      type: "doc",
+      content: [
+        {
+          type: "inline_child_ref",
+          attrs: {
+            component: "NetworkDiagram",
+            alt: "Architecture diagram",
+            variant: "compact",
+            size: "lg",
+          },
+        },
+      ],
+    });
+  });
+
+  test("bare @ is treated as regular image", () => {
+    const markdown = "![](@)";
+    const result = markdownToProseMirror(markdown);
+
+    // Bare @ doesn't match component ref (length check), falls through to image
+    expect(result.content[0].type).toBe("image");
+  });
+
+  test("@ ref is lifted to block level (not inline in paragraph)", () => {
+    const markdown = "Some text before ![](@Widget) and after";
+    const result = markdownToProseMirror(markdown);
+
+    // inline_child_ref should be extracted from paragraph like images
+    const types = result.content.map((n) => n.type);
+    expect(types).toContain("inline_child_ref");
+    expect(types).toContain("paragraph");
+  });
+
+  test("icon syntax is not affected by @ detection", () => {
+    const markdown = "![](lu-house)";
+    const result = markdownToProseMirror(markdown);
+
+    // Icons still work as before
+    expect(result.content[0].type).toBe("paragraph");
+    expect(result.content[0].content[0].attrs.role).toBe("icon");
+    expect(result.content[0].content[0].attrs.library).toBe("lu");
+    expect(result.content[0].content[0].attrs.name).toBe("house");
+  });
+
+  test("multiple @ refs in same section", () => {
+    const markdown = "![](@Widget)\n\n![](@Chart)";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content).toHaveLength(2);
+    expect(result.content[0]).toEqual({
+      type: "inline_child_ref",
+      attrs: { component: "Widget", alt: null },
+    });
+    expect(result.content[1]).toEqual({
+      type: "inline_child_ref",
+      attrs: { component: "Chart", alt: null },
+    });
+  });
+});