@uniweb/content-reader 1.0.4 → 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.4",
+  "version": "1.0.5",
   "description": "Markdown to ProseMirror document structure converter",
   "type": "module",
   "main": "src/index.js",

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/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");
+  });
+});