@uniweb/content-reader 1.0.1 → 1.0.3

package/README.md

@@ -17,25 +17,116 @@ A JavaScript library for converting Markdown content into ProseMirror-compatible
 
 ### Extended Syntax
 
-- **Enhanced Images**: Support for image roles (content, background, icon, gallery) using prefix syntax:
+#### Curly Brace Attributes
 
-  ```markdown
-  ![Alt text](icon:path/to/icon.svg)
-  ![Alt text](background:path/to/bg.jpg)
-  ```
+Add rich attributes to images and links using `{...}` syntax:
 
-- **Enhanced Links**: Button variants with predefined styles:
+```markdown
+![Alt](./image.jpg){role=hero width=800 loading=lazy}
+[Link](https://example.com){target=_blank rel=noopener}
+[Button](https://example.com){.button variant=secondary icon=arrow}
+```
+
+**Supported attribute formats:**
+- `key=value` - Standard attribute
+- `key="value with spaces"` - Quoted value
+- `.className` - CSS class (multiple allowed)
+- `#idName` - Element ID
+- `booleanAttr` - Boolean attribute (sets to `true`)
+
+#### Image Attributes
+
+```markdown
+# Basic image with role and dimensions
+![Hero](./hero.jpg){role=hero width=1200 height=600}
+
+# Video with poster and playback options
+![Intro Video](./intro.mp4){role=video poster=./poster.jpg autoplay muted loop}
+
+# PDF with preview thumbnail
+![User Guide](./guide.pdf){role=pdf preview=./preview.jpg}
+
+# Styling attributes
+![Background](./bg.jpg){fit=cover position=center loading=lazy}
+
+# Classes and IDs
+![Logo](./logo.svg){.featured .rounded #main-logo}
+```
+
+| Attribute | Description |
+|-----------|-------------|
+| `role` | Semantic role: `image`, `icon`, `hero`, `video`, `pdf`, etc. |
+| `width`, `height` | Dimensions (pixels) |
+| `loading` | Loading behavior: `lazy`, `eager` |
+| `poster` | Poster image for videos |
+| `preview` | Preview image for PDFs/documents |
+| `autoplay`, `muted`, `loop`, `controls` | Video playback options |
+| `fit` | Object-fit: `cover`, `contain`, `fill`, etc. |
+| `position` | Object-position value |
+| `.class`, `#id` | CSS class and ID |
+
+#### Link Attributes
+
+```markdown
+# External link with target
+[External Link](https://example.com){target=_blank rel="noopener noreferrer"}
+
+# Download link
+[Download PDF](./document.pdf){download}
+
+# Link with custom filename for download
+[Get Report](./data.pdf){download="annual-report.pdf"}
+```
+
+| Attribute | Description |
+|-----------|-------------|
+| `target` | Link target: `_blank`, `_self`, etc. |
+| `rel` | Link relationship: `noopener`, `noreferrer`, etc. |
+| `download` | Download attribute (boolean or filename) |
+| `.class` | CSS class |
+
+#### Button Attributes
+
+Buttons can be created using the `.button` class or the legacy `button:` prefix:
+
+```markdown
+# Using .button class (recommended)
+[Get Started](https://example.com){.button variant=primary size=lg}
+[Learn More](https://example.com){.button variant=secondary icon=arrow-right}
+
+# Legacy prefix syntax (still supported)
+[Button Text](button:https://example.com)
+```
 
-  ```markdown
-  [Button Text](button:https://example.com)
-  ```
+| Attribute | Description |
+|-----------|-------------|
+| `variant` | Style variant: `primary`, `secondary`, `outline`, `ghost` |
+| `size` | Button size: `sm`, `md`, `lg` |
+| `icon` | Icon name or path |
+| `target`, `rel`, `download` | Same as links |
 
-- **Tables with Alignment**: Full support for aligned columns:
-  ```markdown
-  | Left | Center | Right |
-  | :--- | :----: | ----: |
-  | Text |  Text  |  Text |
-  ```
+#### Legacy Prefix Syntax
+
+The original prefix syntax is still supported for backward compatibility:
+
+```markdown
+# Image with role prefix
+![Alt text](icon:path/to/icon.svg)
+![Alt text](hero:path/to/bg.jpg)
+
+# Button with prefix
+[Button Text](button:https://example.com)
+```
+
+#### Tables with Alignment
+
+Full support for aligned columns:
+
+```markdown
+| Left | Center | Right |
+| :--- | :----: | ----: |
+| Text |  Text  |  Text |
+```
 
 ### Developer-Friendly Features
 
@@ -48,7 +139,7 @@ A JavaScript library for converting Markdown content into ProseMirror-compatible
 ## Installation
 
 ```bash
-npm install @uniwebcms/content-reader
+npm install @uniweb/content-reader
 ```
 
 ## Usage
@@ -56,7 +147,7 @@ npm install @uniwebcms/content-reader
 Basic usage:
 
 ```javascript
-const { markdownToProseMirror } = require("@uniwebcms/content-reader");
+const { markdownToProseMirror } = require("@uniweb/content-reader");
 
 const markdown = `
 # Hello World
@@ -77,7 +168,7 @@ The library is designed to work seamlessly with TipTap editors:
 
 ```javascript
 import { Editor } from "@tiptap/core";
-import { markdownToProseMirror } from "@uniwebcms/content-reader";
+import { markdownToProseMirror } from "@uniweb/content-reader";
 
 const editor = new Editor({
   content: markdownToProseMirror(markdown),
@@ -87,19 +178,34 @@ const editor = new Editor({
 
 ### Advanced Features
 
-#### Working with Image Roles
+#### Working with Rich Media
+
+The library supports extended syntax for images, videos, and documents:
+
+```javascript
+const markdown = `
+![Hero Banner](./hero.jpg){role=hero width=1200 fit=cover}
+![Intro Video](./intro.mp4){role=video poster=./poster.jpg autoplay muted}
+![Documentation](./guide.pdf){role=pdf preview=./preview.jpg}
+`;
+
+const doc = markdownToProseMirror(markdown);
+// Each media element will have rich attributes for component rendering
+```
+
+#### Working with Buttons and Links
 
-The library supports extended image syntax for different display contexts:
+Create styled buttons and links with attributes:
 
 ```javascript
 const markdown = `
-![Header image](background:header.jpg)
-![Profile photo](gallery:profile.jpg)
-![Settings](icon:settings.svg)
+[Get Started](https://example.com){.button variant=primary size=lg}
+[Download](./file.pdf){download}
+[External](https://example.com){target=_blank rel=noopener}
 `;
 
 const doc = markdownToProseMirror(markdown);
-// Each image will have a 'role' attribute in its output structure
+// Links and buttons will have appropriate attributes for rendering
 ```
 
 #### Handling Tables with Alignment
@@ -137,7 +243,7 @@ We welcome contributions! Please see our contributing guidelines for details.
 1. Clone the repository:
 
    ```bash
-   git clone https://github.com/uniwebcms/content-reader.git
+   git clone https://github.com/uniweb/content-reader.git
    ```
 
 2. Install dependencies:

package/package.json

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

package/src/index.js

@@ -7,6 +7,10 @@ import { marked } from "marked";
 import { parseMarkdownContent } from "./parser/index.js";
 import { getBaseSchema } from "./schema/index.js";
 import { isValidUniwebMarkdown } from "./utils.js";
+import { getMarkedExtensions } from "./parser/marked-extensions.js";
+
+// Configure marked with our custom extensions for attribute syntax
+marked.use(getMarkedExtensions());
 
 /**
  * Convert markdown content to ProseMirror document structure

package/src/parser/attributes.js

@@ -0,0 +1,144 @@
+/**
+ * @fileoverview Parse curly brace attributes from markdown
+ *
+ * Supports syntax like: {role=hero width=1200 .class #id autoplay}
+ *
+ * Attribute types:
+ * - key=value     → { key: "value" }
+ * - key="value"   → { key: "value" } (quoted, allows spaces)
+ * - key='value'   → { key: "value" } (single quoted)
+ * - .className    → added to classes array
+ * - #idName       → { id: "idName" }
+ * - booleanKey    → { booleanKey: true }
+ */
+
+/**
+ * Parse an attribute string like "role=hero width=1200 .featured autoplay"
+ *
+ * @param {string} attrString - The attribute string (without curly braces)
+ * @returns {Object} Parsed attributes object
+ */
+export function parseAttributeString(attrString) {
+  if (!attrString || typeof attrString !== 'string') {
+    return {}
+  }
+
+  const attrs = {}
+  const classes = []
+
+  // Regex to match different attribute patterns
+  // Handles: key="value", key='value', key=value, .class, #id, boolean
+  const pattern = /(?:([a-zA-Z_][\w-]*)=(?:"([^"]*)"|'([^']*)'|([^\s}]+))|\.([a-zA-Z_][\w-]*)|#([a-zA-Z_][\w-]*)|([a-zA-Z_][\w-]*)(?=\s|$))/g
+
+  let match
+  while ((match = pattern.exec(attrString)) !== null) {
+    const [, key, quotedDouble, quotedSingle, unquoted, className, idName, booleanKey] = match
+
+    if (key) {
+      // key=value attribute
+      attrs[key] = quotedDouble ?? quotedSingle ?? unquoted
+    } else if (className) {
+      // .className
+      classes.push(className)
+    } else if (idName) {
+      // #id
+      attrs.id = idName
+    } else if (booleanKey) {
+      // boolean attribute (no value)
+      attrs[booleanKey] = true
+    }
+  }
+
+  // Add classes array if any were found
+  if (classes.length > 0) {
+    attrs.class = classes.join(' ')
+  }
+
+  return attrs
+}
+
+/**
+ * Extract attributes block from the end of a string
+ *
+ * @param {string} text - Text that may end with {attributes}
+ * @returns {{ text: string, attrs: Object }} The text without attrs and parsed attrs
+ */
+export function extractTrailingAttributes(text) {
+  if (!text || typeof text !== 'string') {
+    return { text: text || '', attrs: {} }
+  }
+
+  // Match {attributes} at the end of the string
+  // Handles nested braces in values by matching balanced braces
+  const match = text.match(/\{([^{}]*(?:\{[^{}]*\}[^{}]*)*)\}\s*$/)
+
+  if (!match) {
+    return { text, attrs: {} }
+  }
+
+  const attrString = match[1]
+  const textWithoutAttrs = text.slice(0, match.index).trimEnd()
+
+  return {
+    text: textWithoutAttrs,
+    attrs: parseAttributeString(attrString)
+  }
+}
+
+/**
+ * Check if a string contains an attribute block
+ *
+ * @param {string} text - Text to check
+ * @returns {boolean} True if text contains {attributes}
+ */
+export function hasAttributes(text) {
+  return /\{[^{}]+\}\s*$/.test(text)
+}
+
+/**
+ * Merge multiple attribute objects, with later objects taking precedence
+ *
+ * @param  {...Object} attrObjects - Attribute objects to merge
+ * @returns {Object} Merged attributes
+ */
+export function mergeAttributes(...attrObjects) {
+  const result = {}
+  const allClasses = []
+
+  for (const attrs of attrObjects) {
+    if (!attrs) continue
+
+    for (const [key, value] of Object.entries(attrs)) {
+      if (key === 'class') {
+        // Accumulate classes
+        allClasses.push(value)
+      } else {
+        result[key] = value
+      }
+    }
+  }
+
+  if (allClasses.length > 0) {
+    result.class = allClasses.join(' ')
+  }
+
+  return result
+}
+
+/**
+ * Normalize attribute names to camelCase
+ *
+ * @param {Object} attrs - Attributes with potentially kebab-case keys
+ * @returns {Object} Attributes with camelCase keys
+ */
+export function normalizeAttributeNames(attrs) {
+  const result = {}
+
+  for (const [key, value] of Object.entries(attrs)) {
+    // Convert kebab-case to camelCase
+    const camelKey = key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+    result[camelKey] = value
+  }
+
+  return result
+}

package/src/parser/block.js

@@ -137,7 +137,7 @@ function parseBlock(token, schema) {
     if (token.type === "hr") {
         return {
             type: "divider",
-            attrs: { style: "dot", size: "normal" },
+            attrs: { style: "line", size: "normal" },
         };
     }
 

package/src/parser/inline.js

@@ -63,8 +63,29 @@ function parseInline(token, schema, removeNewLine = false) {
     }
 
     if (token.type === "link") {
-        const isButton = token.href.startsWith("button:");
-        const href = isButton ? token.href.substring(7) : token.href;
+        // Check for button: prefix or .button class in attrs
+        const hasButtonPrefix = token.href.startsWith("button:");
+        const hasButtonClass = token.attrs?.class?.includes("button");
+        const isButton = hasButtonPrefix || hasButtonClass;
+
+        const href = hasButtonPrefix ? token.href.substring(7) : token.href;
+
+        // Extract known link/button attributes from curly brace attrs
+        const {
+            variant = "primary",
+            download,
+            target,
+            rel,
+            size,
+            icon,
+            ...otherAttrs
+        } = token.attrs || {};
+
+        // Remove 'button' from class if present (it's used as a type indicator)
+        let className = otherAttrs.class;
+        if (className) {
+            className = className.replace(/\bbutton\b/, "").trim() || undefined;
+        }
 
         return [
             {
@@ -75,7 +96,13 @@ function parseInline(token, schema, removeNewLine = false) {
                         attrs: {
                             href,
                             title: token.title || null,
-                            ...(isButton && { variant: "primary" }),
+                            ...(isButton && { variant }),
+                            ...(download !== undefined && { download }),
+                            ...(target && { target }),
+                            ...(rel && { rel }),
+                            ...(size && { size }),
+                            ...(icon && { icon }),
+                            ...(className && { class: className }),
                         },
                     },
                 ],
@@ -87,16 +114,35 @@ function parseInline(token, schema, removeNewLine = false) {
     if (token.type === "image") {
         let role, src;
 
-        // Find the first colon to handle role:url format correctly
+        // Find the first colon to handle role:url format correctly (legacy syntax)
         if (token.href.includes(":") && !token.href.startsWith("http")) {
             const colonIndex = token.href.indexOf(":");
             role = token.href.substring(0, colonIndex);
             src = token.href.substring(colonIndex + 1);
         } else {
-            role = "image";
             src = token.href;
         }
 
+        // Extract known image attributes from curly brace attrs
+        const {
+            role: attrRole,
+            width,
+            height,
+            loading,
+            poster,       // For videos: explicit poster image
+            preview,      // For PDFs/documents: preview image
+            autoplay,
+            muted,
+            loop,
+            controls,
+            fit,          // object-fit: cover, contain, etc.
+            position,     // object-position
+            ...otherAttrs
+        } = token.attrs || {};
+
+        // Attribute role takes precedence over prefix role
+        const finalRole = attrRole || role || "image";
+
         return [
             {
                 type: "image",
@@ -104,7 +150,26 @@ function parseInline(token, schema, removeNewLine = false) {
                     src,
                     caption: token.title || null,
                     alt: text || null,
-                    role,
+                    role: finalRole,
+                    // Dimension attributes
+                    ...(width && { width: parseInt(width, 10) || width }),
+                    ...(height && { height: parseInt(height, 10) || height }),
+                    // Loading behavior
+                    ...(loading && { loading }),
+                    // Media attributes (for video/document roles)
+                    ...(poster && { poster }),
+                    ...(preview && { preview }),
+                    // Video-specific attributes
+                    ...(autoplay !== undefined && { autoplay }),
+                    ...(muted !== undefined && { muted }),
+                    ...(loop !== undefined && { loop }),
+                    ...(controls !== undefined && { controls }),
+                    // Styling attributes
+                    ...(fit && { fit }),
+                    ...(position && { position }),
+                    // Any other custom attributes
+                    ...(otherAttrs.class && { class: otherAttrs.class }),
+                    ...(otherAttrs.id && { id: otherAttrs.id }),
                 },
             },
         ];

package/src/parser/marked-extensions.js

@@ -0,0 +1,117 @@
+/**
+ * @fileoverview Marked extensions for enhanced markdown syntax
+ *
+ * Adds support for curly brace attributes on images and links:
+ * - ![alt](src){attrs}
+ * - [text](href){attrs}
+ */
+
+import { parseAttributeString } from './attributes.js'
+
+/**
+ * Regex patterns for matching markdown elements with optional attributes
+ */
+const PATTERNS = {
+  // Image: ![alt](src "title"){attrs}
+  // Captures: alt, src, title (optional), attrs (optional)
+  image: /^!\[([^\]]*)\]\(([^)"'\s]+)(?:\s+["']([^"']*)["'])?\)(?:\{([^}]*)\})?/,
+
+  // Link: [text](href "title"){attrs}
+  // Captures: text, href, title (optional), attrs (optional)
+  link: /^\[([^\]]+)\]\(([^)"'\s]+)(?:\s+["']([^"']*)["'])?\)(?:\{([^}]*)\})?/,
+}
+
+/**
+ * Create a marked extension for images with attribute support
+ *
+ * @returns {Object} Marked tokenizer extension
+ */
+export function createImageExtension() {
+  return {
+    name: 'image',
+    level: 'inline',
+    start(src) {
+      return src.indexOf('![')
+    },
+    tokenizer(src) {
+      const match = PATTERNS.image.exec(src)
+      if (!match) return
+
+      const [raw, alt, href, title, attrString] = match
+
+      // Parse attributes from curly braces
+      const attrs = attrString ? parseAttributeString(attrString) : {}
+
+      return {
+        type: 'image',
+        raw,
+        text: alt || '',
+        href,
+        title: title || null,
+        attrs, // Extended: parsed attributes
+      }
+    },
+  }
+}
+
+/**
+ * Create a marked extension for links with attribute support
+ *
+ * @returns {Object} Marked tokenizer extension
+ */
+export function createLinkExtension() {
+  return {
+    name: 'link',
+    level: 'inline',
+    start(src) {
+      // Don't match images (starting with !)
+      const idx = src.indexOf('[')
+      if (idx > 0 && src[idx - 1] === '!') {
+        // Find next [ that's not part of an image
+        const nextIdx = src.indexOf('[', idx + 1)
+        return nextIdx >= 0 ? nextIdx : -1
+      }
+      return idx
+    },
+    tokenizer(src) {
+      // Don't match if this is an image
+      if (src.startsWith('![')) return
+
+      const match = PATTERNS.link.exec(src)
+      if (!match) return
+
+      const [raw, text, href, title, attrString] = match
+
+      // Parse attributes from curly braces
+      const attrs = attrString ? parseAttributeString(attrString) : {}
+
+      return {
+        type: 'link',
+        raw,
+        text,
+        href,
+        title: title || null,
+        attrs, // Extended: parsed attributes
+        // Include tokens for nested content
+        tokens: [],
+      }
+    },
+    childTokens: ['tokens'],
+  }
+}
+
+/**
+ * Get all custom marked extensions
+ *
+ * @returns {Object} Marked extensions configuration
+ */
+export function getMarkedExtensions() {
+  return {
+    extensions: [
+      createImageExtension(),
+      createLinkExtension(),
+    ],
+  }
+}
+
+export default getMarkedExtensions

package/src/parser/tables.js

@@ -2,7 +2,6 @@
  * @fileoverview Parse markdown tables
  */
 
-import { marked } from "marked";
 import { parseInline } from "./inline.js";
 
 /**
@@ -21,7 +20,7 @@ function getColumnAlignment(colDef) {
 
 /**
  * Parse table row content
- * @param {Object} token - Row token
+ * @param {Array} row - Row cells (objects with { text, tokens } in marked v11+)
  * @param {boolean} isHeader - Whether this is a header row
  * @param {Array} alignments - Column alignments
  * @param {Object} schema - ProseMirror schema
@@ -30,23 +29,27 @@ function getColumnAlignment(colDef) {
 function parseTableRow(row, isHeader, alignments, schema) {
   return {
     type: "tableRow",
-    content: row.map((cell, index) => ({
-      type: "tableCell",
-      attrs: {
-        colspan: 1,
-        rowspan: 1,
-        align: alignments[index] || null,
-        header: isHeader,
-      },
-      content: [
-        {
-          type: "paragraph",
-          content: marked.Lexer.lexInline(cell).flatMap((t) =>
-            parseInline(t, schema)
-          ),
+    content: row.map((cell, index) => {
+      // In marked v11+, cells are objects with { text, tokens }
+      // Use the pre-parsed tokens array directly
+      const tokens = cell.tokens || [];
+
+      return {
+        type: "tableCell",
+        attrs: {
+          colspan: 1,
+          rowspan: 1,
+          align: alignments[index] || null,
+          header: isHeader,
         },
-      ],
-    })),
+        content: [
+          {
+            type: "paragraph",
+            content: tokens.flatMap((t) => parseInline(t, schema)),
+          },
+        ],
+      };
+    }),
   };
 }
 

package/src/schema/index.js

@@ -32,10 +32,30 @@ const baseNodes = {
 
     image: {
         attrs: {
+            // Core attributes
             src: {},
             caption: { default: null },
             alt: { default: null },
-            role: { default: "content" },
+            role: { default: "image" }, // image, icon, hero, video, pdf, etc.
+            // Dimension attributes
+            width: { default: null },
+            height: { default: null },
+            // Loading behavior
+            loading: { default: null }, // lazy, eager
+            // Media attributes (for video/document roles)
+            poster: { default: null },  // Explicit poster image for videos
+            preview: { default: null }, // Preview image for PDFs/documents
+            // Video-specific attributes
+            autoplay: { default: null },
+            muted: { default: null },
+            loop: { default: null },
+            controls: { default: null },
+            // Styling attributes
+            fit: { default: null },     // object-fit: cover, contain, fill, etc.
+            position: { default: null }, // object-position
+            // Generic attributes
+            class: { default: null },
+            id: { default: null },
         },
         // group: "block inline",
     },
@@ -114,13 +134,25 @@ const baseMarks = {
         attrs: {
             href: {},
             title: { default: null },
+            // Extended attributes
+            target: { default: null },   // _blank, _self, etc.
+            rel: { default: null },      // noopener, noreferrer, etc.
+            download: { default: null }, // Download attribute (true or filename)
+            class: { default: null },
         },
     },
     button: {
         attrs: {
             href: {},
             title: { default: null },
-            variant: { default: "primary" },
+            variant: { default: "primary" }, // primary, secondary, outline, ghost, etc.
+            // Extended attributes
+            size: { default: null },     // sm, md, lg
+            icon: { default: null },     // Icon name or path
+            target: { default: null },
+            rel: { default: null },
+            download: { default: null },
+            class: { default: null },
         },
     },
     code: {

package/tests/parser.test.js

@@ -179,75 +179,63 @@ describe("Basic Markdown Parsing", () => {
 
 describe("Extended Syntax", () => {
   test("parses images without role", () => {
-    const markdown = "![Title](path/to/image.svg)";
+    // Images are extracted from paragraphs to root level for component rendering
+    const markdown = "![Alt Text](path/to/image.svg)";
     const result = markdownToProseMirror(markdown);
 
     expect(result).toEqual({
       type: "doc",
       content: [
         {
-          type: "paragraph",
-          content: [
-            {
-              type: "image",
-              attrs: {
-                src: "path/to/image.svg",
-                title: "Title",
-                alt: null,
-                role: "image",
-              },
-            },
-          ],
+          type: "image",
+          attrs: {
+            src: "path/to/image.svg",
+            caption: null,
+            alt: "Alt Text",
+            role: "image",
+          },
         },
       ],
     });
   });
 
   test("parses images with roles", () => {
-    const markdown = '![Title](icon:path/to/image.svg "Alt text")';
+    // Images are extracted from paragraphs to root level for component rendering
+    const markdown = '![Alt Text](icon:path/to/image.svg "Caption text")';
     const result = markdownToProseMirror(markdown);
 
     expect(result).toEqual({
       type: "doc",
       content: [
         {
-          type: "paragraph",
-          content: [
-            {
-              type: "image",
-              attrs: {
-                src: "path/to/image.svg",
-                title: "Title",
-                alt: "Alt text",
-                role: "icon",
-              },
-            },
-          ],
+          type: "image",
+          attrs: {
+            src: "path/to/image.svg",
+            caption: "Caption text",
+            alt: "Alt Text",
+            role: "icon",
+          },
         },
       ],
     });
   });
 
-  test("parses images without URL", () => {
-    const markdown = "![Title](https://test.com)";
+  test("parses images with URL", () => {
+    // Images are extracted from paragraphs to root level for component rendering
+    const markdown = "![Alt Text](https://test.com)";
     const result = markdownToProseMirror(markdown);
 
     expect(result).toEqual({
       type: "doc",
       content: [
         {
-          type: "paragraph",
-          content: [
-            {
-              type: "image",
-              attrs: {
-                src: "https://test.com",
-                title: "Title",
-                alt: null,
-                role: "image",
-              },
-            },
-          ],
+          type: "image",
+          attrs: {
+            src: "https://test.com",
+            caption: null,
+            alt: "Alt Text",
+            role: "image",
+          },
         },
       ],
     });
@@ -341,3 +329,244 @@ describe("Extended Syntax", () => {
     });
   });
 });
+
+describe("Curly Brace Attributes", () => {
+  test("parses image with role attribute", () => {
+    const markdown = "![Hero Image](./hero.jpg){role=hero}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0]).toEqual({
+      type: "image",
+      attrs: expect.objectContaining({
+        src: "./hero.jpg",
+        alt: "Hero Image",
+        role: "hero",
+      }),
+    });
+  });
+
+  test("parses image with multiple attributes", () => {
+    const markdown = '![Photo](./photo.jpg "A beautiful photo"){width=800 height=600 loading=lazy}';
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0]).toEqual({
+      type: "image",
+      attrs: expect.objectContaining({
+        src: "./photo.jpg",
+        alt: "Photo",
+        caption: "A beautiful photo",
+        width: 800,
+        height: 600,
+        loading: "lazy",
+      }),
+    });
+  });
+
+  test("parses video with poster attribute", () => {
+    const markdown = "![Intro Video](./intro.mp4){role=video poster=./poster.jpg autoplay muted loop}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0]).toEqual({
+      type: "image",
+      attrs: expect.objectContaining({
+        src: "./intro.mp4",
+        role: "video",
+        poster: "./poster.jpg",
+        autoplay: true,
+        muted: true,
+        loop: true,
+      }),
+    });
+  });
+
+  test("parses PDF with preview attribute", () => {
+    const markdown = "![User Guide](./guide.pdf){role=pdf preview=./guide-preview.jpg}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0]).toEqual({
+      type: "image",
+      attrs: expect.objectContaining({
+        src: "./guide.pdf",
+        role: "pdf",
+        preview: "./guide-preview.jpg",
+      }),
+    });
+  });
+
+  test("parses image with class and id", () => {
+    const markdown = "![Logo](./logo.svg){.featured #main-logo}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0]).toEqual({
+      type: "image",
+      attrs: expect.objectContaining({
+        src: "./logo.svg",
+        class: "featured",
+        id: "main-logo",
+      }),
+    });
+  });
+
+  test("parses link with target attribute", () => {
+    const markdown = '[External Link](https://example.com){target=_blank rel="noopener noreferrer"}';
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].content[0]).toEqual({
+      type: "text",
+      text: "External Link",
+      marks: [
+        {
+          type: "link",
+          attrs: expect.objectContaining({
+            href: "https://example.com",
+            target: "_blank",
+            rel: "noopener noreferrer",
+          }),
+        },
+      ],
+    });
+  });
+
+  test("parses download link", () => {
+    const markdown = "[Download PDF](./document.pdf){download}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].content[0]).toEqual({
+      type: "text",
+      text: "Download PDF",
+      marks: [
+        {
+          type: "link",
+          attrs: expect.objectContaining({
+            href: "./document.pdf",
+            download: true,
+          }),
+        },
+      ],
+    });
+  });
+
+  test("parses button with .button class", () => {
+    const markdown = "[Get Started](https://example.com){.button variant=secondary size=lg}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].content[0]).toEqual({
+      type: "text",
+      text: "Get Started",
+      marks: [
+        {
+          type: "button",
+          attrs: expect.objectContaining({
+            href: "https://example.com",
+            variant: "secondary",
+            size: "lg",
+          }),
+        },
+      ],
+    });
+  });
+
+  test("parses button with icon", () => {
+    const markdown = "[Learn More](https://example.com){.button icon=arrow-right}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].content[0]).toEqual({
+      type: "text",
+      text: "Learn More",
+      marks: [
+        {
+          type: "button",
+          attrs: expect.objectContaining({
+            href: "https://example.com",
+            icon: "arrow-right",
+          }),
+        },
+      ],
+    });
+  });
+
+  test("attribute role overrides prefix role (legacy compatibility)", () => {
+    // If both prefix and attribute role are present, attribute takes precedence
+    const markdown = "![Alt](icon:./image.svg){role=hero}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].attrs.role).toBe("hero");
+  });
+
+  test("parses image with fit and position attributes", () => {
+    const markdown = "![Background](./bg.jpg){fit=cover position=center}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0]).toEqual({
+      type: "image",
+      attrs: expect.objectContaining({
+        src: "./bg.jpg",
+        fit: "cover",
+        position: "center",
+      }),
+    });
+  });
+
+  test("parses video with controls attribute", () => {
+    const markdown = "![Demo Video](./demo.mp4){role=video controls muted}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0]).toEqual({
+      type: "image",
+      attrs: expect.objectContaining({
+        src: "./demo.mp4",
+        role: "video",
+        controls: true,
+        muted: true,
+      }),
+    });
+  });
+
+  test("parses download link with custom filename", () => {
+    const markdown = '[Get Report](./data.pdf){download="annual-report.pdf"}';
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0].content[0]).toEqual({
+      type: "text",
+      text: "Get Report",
+      marks: [
+        {
+          type: "link",
+          attrs: expect.objectContaining({
+            href: "./data.pdf",
+            download: "annual-report.pdf",
+          }),
+        },
+      ],
+    });
+  });
+
+  test("parses image with multiple classes", () => {
+    const markdown = "![Gallery](./photo.jpg){.featured .rounded .shadow}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0]).toEqual({
+      type: "image",
+      attrs: expect.objectContaining({
+        src: "./photo.jpg",
+        class: "featured rounded shadow",
+      }),
+    });
+  });
+
+  test("parses booleans in different positions", () => {
+    const markdown = "![Video](./clip.mp4){muted role=video autoplay loop}";
+    const result = markdownToProseMirror(markdown);
+
+    expect(result.content[0]).toEqual({
+      type: "image",
+      attrs: expect.objectContaining({
+        src: "./clip.mp4",
+        role: "video",
+        muted: true,
+        autoplay: true,
+        loop: true,
+      }),
+    });
+  });
+});