@uniweb/content-reader 1.0.3 → 1.0.5

package/README.md

@@ -105,6 +105,46 @@ Buttons can be created using the `.button` class or the legacy `button:` prefix:
 | `icon` | Icon name or path |
 | `target`, `rel`, `download` | Same as links |
 
+#### Bracketed Spans
+
+Style inline text with semantic classes using Pandoc-style bracketed spans:
+
+```markdown
+# Basic class
+This has [highlighted text]{.highlight} for emphasis.
+
+# Multiple classes
+Here's [styled text]{.highlight .large} with two classes.
+
+# ID attribute
+Jump to [this section]{#anchor-point}.
+
+# Class and ID together
+[Important note]{.callout #note-1}
+
+# Custom attributes
+[Hover me]{.tooltip data-tip="More info here"}
+```
+
+Output structure:
+
+```js
+{
+  type: "text",
+  text: "highlighted text",
+  marks: [{ type: "span", attrs: { class: "highlight" } }]
+}
+```
+
+| Syntax | Result |
+|--------|--------|
+| `[text]{.class}` | `<span class="class">` |
+| `[text]{#id}` | `<span id="id">` |
+| `[text]{.a .b}` | `<span class="a b">` |
+| `[text]{key=value}` | `<span key="value">` |
+
+Spans can be combined with other marks (bold, italic, links).
+
 #### Legacy Prefix Syntax
 
 The original prefix syntax is still supported for backward compatibility:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/content-reader",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Markdown to ProseMirror document structure converter",
   "type": "module",
   "main": "src/index.js",
@@ -16,6 +16,7 @@
   "author": "Proximify Inc.",
   "license": "GPL-3.0-or-later",
   "dependencies": {
+    "js-yaml": "^4.1.0",
     "marked": "^11.1.0"
   },
   "devDependencies": {

package/src/parser/block.js

@@ -3,22 +3,23 @@
  */
 
 import { marked } from "marked";
+import yaml from "js-yaml";
 import { parseInline } from "./inline.js";
 import { parseList } from "./lists.js";
 import { parseTable } from "./tables.js";
 
 /**
- * Process code block info string (e.g., "javascript:example.js")
+ * Process code block info string (e.g., "json:tag-name")
  * @param {string} info - Code block info string
- * @returns {Object} Language and filename
+ * @returns {Object} Language and optional tag
  */
 function processCodeInfo(info) {
-    if (!info) return { language: null, filename: null };
+    if (!info) return { language: null, tag: null };
 
     const parts = info.split(":");
     return {
         language: parts[0] || null,
-        filename: parts[1] || null,
+        tag: parts[1] || null,
     };
 }
 
@@ -39,6 +40,37 @@ function cleanCodeText(text) {
         .trim();
 }
 
+/**
+ * Parse code block content based on language
+ * Only parses tagged blocks with json/yaml language
+ * @param {string} text - Raw code block text
+ * @param {string} language - Code block language
+ * @returns {*} Parsed data or null if not parseable
+ */
+function parseCodeBlockData(text, language) {
+    if (!text) return null;
+
+    const lang = (language || "").toLowerCase();
+
+    if (lang === "json") {
+        try {
+            return JSON.parse(text);
+        } catch {
+            return null;
+        }
+    }
+
+    if (lang === "yaml" || lang === "yml") {
+        try {
+            return yaml.load(text);
+        } catch {
+            return null;
+        }
+    }
+
+    return null;
+}
+
 /**
  * Parse a paragraph's content by tokenizing with marked
  * @param {Object} token - Marked token for paragraph
@@ -142,16 +174,32 @@ function parseBlock(token, schema) {
     }
 
     if (token.type === "code") {
-        const { language, filename } = processCodeInfo(token.lang);
+        const { language, tag } = processCodeInfo(token.lang);
+        const rawText = cleanCodeText(token.text);
+
+        // Tagged blocks become dataBlocks (structured data, not code for display)
+        if (tag) {
+            const parsedData = parseCodeBlockData(rawText, language);
+            if (parsedData !== null) {
+                // Successfully parsed - it's a dataBlock
+                return {
+                    type: "dataBlock",
+                    attrs: { tag, data: parsedData },
+                };
+            }
+            // Parsing failed - fall back to codeBlock with language for runtime fallback
+            return {
+                type: "codeBlock",
+                attrs: { language, tag },
+                content: [{ type: "text", text: rawText }],
+            };
+        }
+
+        // Untagged code block - for display with syntax highlighting
         return {
             type: "codeBlock",
-            attrs: { language, filename },
-            content: [
-                {
-                    type: "text",
-                    text: cleanCodeText(token.text),
-                },
-            ],
+            attrs: { language },
+            content: [{ type: "text", text: rawText }],
         };
     }
 

package/src/parser/inline.js

@@ -62,6 +62,40 @@ function parseInline(token, schema, removeNewLine = false) {
         ];
     }
 
+    if (token.type === "span") {
+        // Bracketed span: [text]{.class}
+        // Supports nested formatting via tokens
+        const { class: className, id, ...otherAttrs } = token.attrs || {};
+
+        const spanMark = {
+            type: "span",
+            attrs: {
+                ...(className && { class: className }),
+                ...(id && { id }),
+                ...otherAttrs,
+            },
+        };
+
+        // If there are child tokens (nested formatting), process them
+        if (token.tokens && token.tokens.length > 0) {
+            return token.tokens.flatMap((t) =>
+                parseInline(t, schema, removeNewLine).map((node) => ({
+                    ...node,
+                    marks: [...(node.marks || []), spanMark],
+                }))
+            );
+        }
+
+        // Simple text span
+        return [
+            {
+                type: "text",
+                marks: [spanMark],
+                text: token.text,
+            },
+        ];
+    }
+
     if (token.type === "link") {
         // Check for button: prefix or .button class in attrs
         const hasButtonPrefix = token.href.startsWith("button:");

package/src/parser/marked-extensions.js

@@ -19,6 +19,11 @@ const PATTERNS = {
   // Link: [text](href "title"){attrs}
   // Captures: text, href, title (optional), attrs (optional)
   link: /^\[([^\]]+)\]\(([^)"'\s]+)(?:\s+["']([^"']*)["'])?\)(?:\{([^}]*)\})?/,
+
+  // Span (bracketed span): [text]{attrs}
+  // Pandoc-style bracketed spans - text with attributes but no href
+  // Captures: text, attrs
+  span: /^\[([^\]]+)\]\{([^}]+)\}/,
 }
 
 /**
@@ -100,6 +105,58 @@ export function createLinkExtension() {
   }
 }
 
+/**
+ * Create a marked extension for bracketed spans (Pandoc-style)
+ *
+ * Syntax: [text]{.class #id key=value}
+ *
+ * Used for inline text with semantic attributes like:
+ * - [highlighted text]{.highlight}
+ * - [muted note]{.muted}
+ * - [important]{.callout}
+ *
+ * @returns {Object} Marked tokenizer extension
+ */
+export function createSpanExtension() {
+  return {
+    name: 'span',
+    level: 'inline',
+    start(src) {
+      // Find [ but we need to check it's not a link or image
+      const idx = src.indexOf('[')
+      return idx
+    },
+    tokenizer(src) {
+      // Don't match images or links
+      if (src.startsWith('![')) return
+
+      // Check if this is a link [text](url) - if so, skip
+      // We need to match span ONLY if there's no () after ]
+      const match = PATTERNS.span.exec(src)
+      if (!match) return
+
+      // Make sure this isn't actually a link (check there's no ( after ])
+      const bracketEnd = src.indexOf(']')
+      if (bracketEnd > 0 && src[bracketEnd + 1] === '(') return
+
+      const [raw, text, attrString] = match
+
+      // Parse attributes from curly braces
+      const attrs = parseAttributeString(attrString)
+
+      return {
+        type: 'span',
+        raw,
+        text,
+        attrs,
+        // Include tokens for nested formatting (bold, italic, etc.)
+        tokens: [],
+      }
+    },
+    childTokens: ['tokens'],
+  }
+}
+
 /**
  * Get all custom marked extensions
  *
@@ -110,6 +167,7 @@ export function getMarkedExtensions() {
     extensions: [
       createImageExtension(),
       createLinkExtension(),
+      createSpanExtension(),
     ],
   }
 }

package/tests/code.test.js

@@ -12,7 +12,6 @@ describe("Code Parsing", () => {
           type: "codeBlock",
           attrs: {
             language: "javascript",
-            filename: null,
           },
           content: [
             {
@@ -25,25 +24,19 @@ describe("Code Parsing", () => {
     });
   });
 
-  test("parses code blocks with filenames", () => {
-    const markdown = "```javascript:example.js\nconst x = 1;\n```";
+  test("parses tagged code blocks as dataBlocks", () => {
+    const markdown = "```json:nav-links\n[{\"label\": \"Home\"}]\n```";
     const result = markdownToProseMirror(markdown);
 
     expect(result).toEqual({
       type: "doc",
       content: [
         {
-          type: "codeBlock",
+          type: "dataBlock",  // Structured data, not code for display
           attrs: {
-            language: "javascript",
-            filename: "example.js",
+            tag: "nav-links",
+            data: [{ label: "Home" }],
           },
-          content: [
-            {
-              type: "text",
-              text: "const x = 1;",
-            },
-          ],
         },
       ],
     });
@@ -60,7 +53,6 @@ describe("Code Parsing", () => {
           type: "codeBlock",
           attrs: {
             language: null,
-            filename: null,
           },
           content: [
             {
@@ -107,7 +99,6 @@ describe("Code Parsing", () => {
           type: "codeBlock",
           attrs: {
             language: null,
-            filename: null,
           },
           content: [
             {

package/tests/parser.test.js

@@ -570,3 +570,85 @@ describe("Curly Brace Attributes", () => {
     });
   });
 });
+
+describe("Bracketed Spans", () => {
+  test("parses span with class", () => {
+    const markdown = "This is [highlighted text]{.highlight} in a sentence.";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].content).toEqual([
+      { type: "text", text: "This is " },
+      {
+        type: "text",
+        text: "highlighted text",
+        marks: [{ type: "span", attrs: { class: "highlight" } }],
+      },
+      { type: "text", text: " in a sentence." },
+    ]);
+  });
+
+  test("parses span with multiple classes", () => {
+    const markdown = "[important note]{.callout .bold}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].content[0]).toEqual({
+      type: "text",
+      text: "important note",
+      marks: [{ type: "span", attrs: { class: "callout bold" } }],
+    });
+  });
+
+  test("parses muted span", () => {
+    const markdown = "[This is less important]{.muted}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].content[0]).toEqual({
+      type: "text",
+      text: "This is less important",
+      marks: [{ type: "span", attrs: { class: "muted" } }],
+    });
+  });
+
+  test("parses span with id and class", () => {
+    const markdown = "[key term]{#glossary-term .highlight}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].content[0]).toEqual({
+      type: "text",
+      text: "key term",
+      marks: [{ type: "span", attrs: { class: "highlight", id: "glossary-term" } }],
+    });
+  });
+
+  test("parses span with custom attributes", () => {
+    const markdown = "[tooltip text]{data-tooltip=\"More info\" .info}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].content[0]).toEqual({
+      type: "text",
+      text: "tooltip text",
+      marks: [{ type: "span", attrs: { class: "info", "data-tooltip": "More info" } }],
+    });
+  });
+
+  test("does not confuse span with link", () => {
+    const markdown = "[Link](https://example.com) and [span]{.highlight}";
+    const result = markdownToProseMirror(markdown);
+
+    const content = result.content[0].content;
+    // First should be a link
+    expect(content[0].marks[0].type).toBe("link");
+    // Last should be a span
+    expect(content[content.length - 1].marks[0].type).toBe("span");
+  });
+
+  test("parses multiple spans in same paragraph", () => {
+    const markdown = "[first]{.highlight} normal [second]{.muted}";
+    const result = markdownToProseMirror(markdown);
+
+    const content = result.content[0].content;
+    expect(content[0].marks[0].attrs.class).toBe("highlight");
+    expect(content[1].text).toBe(" normal ");
+    expect(content[2].marks[0].attrs.class).toBe("muted");
+  });
+});