@uniweb/semantic-parser 1.0.13 → 1.0.14

package/README.md

@@ -322,10 +322,30 @@ Inline formatting is preserved as HTML tags:
 // Input: Text with bold mark
 // Output: "Text with <strong>bold</strong>"
 
+// Input: Text with italic mark
+// Output: "Text with <em>emphasis</em>"
+
 // Input: Link mark
 // Output: "Click <a href=\"/docs\">here</a>"
+
+// Input: Span mark (bracketed spans)
+// Output: "This is <span class=\"highlight\">highlighted</span> text"
 ```
 
+### Span Marks
+
+Bracketed spans (`[text]{.class}`) are converted to `<span>` elements with their attributes:
+
+```js
+// Input mark
+{ type: "span", attrs: { class: "highlight", id: "note-1" } }
+
+// Output HTML
+'<span class="highlight" id="note-1">text</span>'
+```
+
+Spans can have classes, IDs, and custom attributes. They combine with other marks—a span with bold becomes `<strong><span class="...">text</span></strong>`.
+
 ## Documentation
 
 - **[Content Writing Guide](./docs/guide.md)**: Learn how to structure content for optimal parsing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/semantic-parser",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Semantic parser for ProseMirror/TipTap content structures",
   "type": "module",
   "main": "./src/index.js",

package/src/processors/sequence.js

@@ -282,6 +282,26 @@ function getTextContent(content, options = {}) {
                     styledText = `<span style="background-color: var(--highlight)">${styledText}</span>`;
                 }
 
+                // span (bracketed spans with class/id/attributes)
+                if (marks.some((mark) => mark.type === "span")) {
+                    const spanMark = marks.find((mark) => mark.type === "span");
+                    const attrs = spanMark?.attrs || {};
+                    const attrParts = [];
+
+                    if (attrs.class) attrParts.push(`class="${attrs.class}"`);
+                    if (attrs.id) attrParts.push(`id="${attrs.id}"`);
+
+                    // Add any other custom attributes (data-*, etc.)
+                    for (const [key, value] of Object.entries(attrs)) {
+                        if (key !== 'class' && key !== 'id') {
+                            attrParts.push(`${key}="${value}"`);
+                        }
+                    }
+
+                    const attrString = attrParts.length > 0 ? ` ${attrParts.join(' ')}` : '';
+                    styledText = `<span${attrString}>${styledText}</span>`;
+                }
+
                 // bold
                 if (marks.some((mark) => mark.type === "bold")) {
                     styledText = `<strong>${styledText}</strong>`;