@uniweb/semantic-parser 1.0.13 → 1.0.15

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.15",
   "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>`;
@@ -358,7 +378,7 @@ function processInlineElements(content) {
                 items.push({
                     type: "link",
                     attrs: {
-                        href: linkMark.attrs?.href,
+                        ...linkMark.attrs,  // Preserve all link attributes (role, target, etc.)
                         label: item.text || "",
                     },
                 });
@@ -600,7 +620,7 @@ function isLink(item) {
                     }
 
                     return {
-                        href: mark?.attrs?.href,
+                        ...mark?.attrs,  // Preserve all link attributes (role, target, etc.)
                         label: contentItem?.text || "",
                         iconBefore,
                         iconAfter,
@@ -653,14 +673,14 @@ function isOnlyLinks(item) {
 
     if (!allLinks) return false;
 
-    // Extract links as simple {href, label} objects
+    // Extract links with all their attributes
     // Icons in this paragraph go to body.icons separately (no association)
     return textContent.map((c) => {
         const linkMark = c.marks.find((m) => m.type === "link");
         return {
             type: "link",
             attrs: {
-                href: linkMark?.attrs?.href,
+                ...linkMark?.attrs,  // Preserve all link attributes (role, target, etc.)
                 label: c.text || "",
             },
         };