@changerawr/markdown 1.1.7 → 1.1.9

package/dist/standalone.browser.js

@@ -1543,20 +1543,59 @@ var ChangerawrMarkdown = (() => {
           format: this.config.format
         })
       }));
-      const htmlParts = tokensWithFormat.map((token) => this.renderToken(token));
+      const groupedTokens = this.groupListItems(tokensWithFormat);
+      const htmlParts = groupedTokens.map((token) => this.renderToken(token));
       const combinedHtml = htmlParts.join("");
       if (this.config.sanitize && !this.config.allowUnsafeHtml) {
         return sanitizeHtml(combinedHtml);
       }
       return combinedHtml;
     }
+    groupListItems(tokens) {
+      const result = [];
+      let i = 0;
+      while (i < tokens.length) {
+        const token = tokens[i];
+        const isListItem = (token == null ? void 0 : token.type) === "list-item" || (token == null ? void 0 : token.type) === "ordered-list-item" || (token == null ? void 0 : token.type) === "task-item";
+        if (isListItem) {
+          const listItems = [];
+          const firstItemType = token.type;
+          const isOrdered = firstItemType === "ordered-list-item";
+          while (i < tokens.length) {
+            const item = tokens[i];
+            if (!item) break;
+            const itemType = item.type;
+            const isSameListType = isOrdered && itemType === "ordered-list-item" || !isOrdered && (itemType === "list-item" || itemType === "task-item");
+            if (isSameListType) {
+              listItems.push(item);
+              i++;
+            } else {
+              break;
+            }
+          }
+          const wrappedList = {
+            type: isOrdered ? "ol" : "ul",
+            content: "",
+            raw: "",
+            children: listItems,
+            attributes: { format: this.config.format }
+          };
+          wrappedList._isWrapped = true;
+          result.push(wrappedList);
+        } else {
+          result.push(token);
+          i++;
+        }
+      }
+      return result;
+    }
     renderToken(token) {
       const rule = this.rules.get(token.type);
       if (rule) {
         try {
           let tokenToRender = token;
           if (token.children && token.children.length > 0) {
-            const renderedChildren = this.render(token.children);
+            const renderedChildren = token.type === "ul" || token.type === "ol" ? token.children.map((child) => this.renderToken(child)).join("") : this.render(token.children);
             tokenToRender = __spreadProps(__spreadValues({}, token), {
               attributes: __spreadProps(__spreadValues({}, token.attributes), {
                 renderedChildren
@@ -2065,7 +2104,8 @@ var ChangerawrMarkdown = (() => {
           attributes: {
             alt: match[1] || "",
             src: match[2] || "",
-            title: match[3] || ""
+            caption: match[3] || ""
+            // Renamed from 'title' to 'caption' for clarity
           }
         })
       }
@@ -2077,13 +2117,24 @@ var ChangerawrMarkdown = (() => {
           var _a, _b, _c, _d;
           const src = ((_a = token.attributes) == null ? void 0 : _a.src) || "";
           const alt = ((_b = token.attributes) == null ? void 0 : _b.alt) || "";
-          const title = ((_c = token.attributes) == null ? void 0 : _c.title) || "";
-          const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
+          const caption = ((_c = token.attributes) == null ? void 0 : _c.caption) || "";
           const format = ((_d = token.attributes) == null ? void 0 : _d.format) || "html";
+          if (caption) {
+            if (format === "html") {
+              return `<figure style="margin: 16px 0; text-align: center;">
+            <img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" style="max-width: 100%; height: auto; border-radius: 8px;" loading="lazy" />
+            <figcaption style="margin-top: 8px; font-size: 14px; color: #6b7280; font-style: italic;">${escapeHtml(caption)}</figcaption>
+          </figure>`;
+            }
+            return `<figure class="my-4 text-center">
+            <img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="max-w-full h-auto rounded-lg" loading="lazy" />
+            <figcaption class="mt-2 text-sm text-gray-500 italic">${escapeHtml(caption)}</figcaption>
+          </figure>`;
+          }
           if (format === "html") {
-            return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}"${titleAttr} style="max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0;" loading="lazy" />`;
+            return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" style="max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0;" loading="lazy" />`;
           }
-          return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}"${titleAttr} class="max-w-full h-auto rounded-lg my-4" loading="lazy" />`;
+          return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="max-w-full h-auto rounded-lg my-4" loading="lazy" />`;
         }
       }
     ]
@@ -2136,16 +2187,65 @@ var ChangerawrMarkdown = (() => {
     name: "list",
     parseRules: [
       {
-        name: "list-item",
+        name: "unordered-list-item",
         pattern: /^(\s*)[-*+]\s+(.+)$/m,
-        render: (match) => ({
-          type: "list-item",
-          content: match[2] || "",
-          raw: match[0] || ""
-        })
+        render: (match) => {
+          var _a, _b;
+          return {
+            type: "list-item",
+            content: match[2] || "",
+            raw: match[0] || "",
+            attributes: {
+              indent: ((_a = match[1]) == null ? void 0 : _a.length) || 0,
+              ordered: false,
+              marker: match[1] ? (_b = match[0].match(/[-*+]/)) == null ? void 0 : _b[0] : "-"
+            }
+          };
+        }
+      },
+      {
+        name: "ordered-list-item",
+        pattern: /^(\s*)(\d+)\.\s+(.+)$/m,
+        render: (match) => {
+          var _a;
+          return {
+            type: "ordered-list-item",
+            content: match[3] || "",
+            raw: match[0] || "",
+            attributes: {
+              indent: ((_a = match[1]) == null ? void 0 : _a.length) || 0,
+              ordered: true,
+              number: parseInt(match[2] || "1")
+            }
+          };
+        }
       }
     ],
     renderRules: [
+      {
+        type: "ul",
+        render: (token) => {
+          var _a, _b;
+          const format = ((_a = token.attributes) == null ? void 0 : _a.format) || "tailwind";
+          const content = ((_b = token.attributes) == null ? void 0 : _b.renderedChildren) || "";
+          if (format === "html") {
+            return `<ul style="margin: 8px 0; padding-left: 24px; list-style: disc;">${content}</ul>`;
+          }
+          return `<ul class="my-2 pl-6 list-disc">${content}</ul>`;
+        }
+      },
+      {
+        type: "ol",
+        render: (token) => {
+          var _a, _b;
+          const format = ((_a = token.attributes) == null ? void 0 : _a.format) || "tailwind";
+          const content = ((_b = token.attributes) == null ? void 0 : _b.renderedChildren) || "";
+          if (format === "html") {
+            return `<ol style="margin: 8px 0; padding-left: 24px; list-style: decimal;">${content}</ol>`;
+          }
+          return `<ol class="my-2 pl-6 list-decimal">${content}</ol>`;
+        }
+      },
       {
         type: "list-item",
         render: (token) => {
@@ -2157,6 +2257,18 @@ var ChangerawrMarkdown = (() => {
           }
           return `<li>${content}</li>`;
         }
+      },
+      {
+        type: "ordered-list-item",
+        render: (token) => {
+          var _a, _b;
+          const format = ((_a = token.attributes) == null ? void 0 : _a.format) || "tailwind";
+          const content = ((_b = token.attributes) == null ? void 0 : _b.renderedChildren) || escapeHtml(token.content);
+          if (format === "html") {
+            return `<li>${content}</li>`;
+          }
+          return `<li>${content}</li>`;
+        }
       }
     ]
   };
@@ -2166,14 +2278,18 @@ var ChangerawrMarkdown = (() => {
       {
         name: "task-item",
         pattern: /^(\s*)-\s*\[([ xX])\]\s*(.+)$/m,
-        render: (match) => ({
-          type: "task-item",
-          content: match[3] || "",
-          raw: match[0] || "",
-          attributes: {
-            checked: String((match[2] || "").toLowerCase() === "x")
-          }
-        })
+        render: (match) => {
+          var _a;
+          return {
+            type: "task-item",
+            content: match[3] || "",
+            raw: match[0] || "",
+            attributes: {
+              indent: ((_a = match[1]) == null ? void 0 : _a.length) || 0,
+              checked: String((match[2] || "").toLowerCase() === "x")
+            }
+          };
+        }
       }
     ],
     renderRules: [
@@ -2184,15 +2300,20 @@ var ChangerawrMarkdown = (() => {
           const isChecked = ((_a = token.attributes) == null ? void 0 : _a.checked) === "true";
           const content = ((_b = token.attributes) == null ? void 0 : _b.renderedChildren) || escapeHtml(token.content);
           const format = ((_c = token.attributes) == null ? void 0 : _c.format) || "html";
+          const checkmark = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 2px;"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+          const checkbox = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 2px;"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>`;
           if (format === "html") {
-            return `<div style="display: flex; align-items: center; gap: 8px; margin: 8px 0;">
-            <input type="checkbox" ${isChecked ? "checked" : ""} disabled style="margin: 0;" />
+            return `<div style="display: flex; align-items: flex-start; gap: 8px; margin: 8px 0;">
+            <div style="color: ${isChecked ? "#10b981" : "#9ca3af"}; margin-top: 2px;">
+              ${isChecked ? checkmark : checkbox}
+            </div>
             <span${isChecked ? ' style="text-decoration: line-through; color: #6b7280;"' : ""}>${content}</span>
           </div>`;
           }
-          return `<div class="flex items-center gap-2 my-2 task-list-item">
-          <input type="checkbox" ${isChecked ? "checked" : ""} disabled
-            class="form-checkbox h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" />
+          return `<div class="flex items-start gap-2 my-2 task-list-item">
+          <div class="${isChecked ? "text-green-600" : "text-gray-400"} flex-shrink-0 mt-0.5">
+            ${isChecked ? checkmark : checkbox}
+          </div>
           <span${isChecked ? ' class="line-through text-muted-foreground"' : ""}>${content}</span>
         </div>`;
         }
@@ -2238,6 +2359,36 @@ var ChangerawrMarkdown = (() => {
     ]
   };
 
+  // src/extensions/core/strikethrough.ts
+  var StrikethroughExtension = {
+    name: "strikethrough",
+    parseRules: [
+      {
+        name: "strikethrough",
+        pattern: /~~((?:(?!~~).)+)~~/,
+        render: (match) => ({
+          type: "strikethrough",
+          content: match[1] || "",
+          raw: match[0] || ""
+        })
+      }
+    ],
+    renderRules: [
+      {
+        type: "strikethrough",
+        render: (token) => {
+          var _a;
+          const content = escapeHtml(token.content);
+          const format = (_a = token.attributes) == null ? void 0 : _a.format;
+          if (format === "html") {
+            return `<del style="text-decoration: line-through; color: #6b7280;">${content}</del>`;
+          }
+          return `<del class="line-through text-gray-500">${content}</del>`;
+        }
+      }
+    ]
+  };
+
   // src/extensions/core/index.ts
   var CoreExtensions = [
     TextExtension,
@@ -2252,6 +2403,7 @@ var ChangerawrMarkdown = (() => {
     TaskListExtension,
     BlockquoteExtension,
     HorizontalRuleExtension,
+    StrikethroughExtension,
     ParagraphExtension,
     LineBreakExtension
   ];

package/dist/standalone.js

@@ -528,20 +528,59 @@ var MarkdownRenderer = class {
         format: this.config.format
       }
     }));
-    const htmlParts = tokensWithFormat.map((token) => this.renderToken(token));
+    const groupedTokens = this.groupListItems(tokensWithFormat);
+    const htmlParts = groupedTokens.map((token) => this.renderToken(token));
     const combinedHtml = htmlParts.join("");
     if (this.config.sanitize && !this.config.allowUnsafeHtml) {
       return sanitizeHtml(combinedHtml);
     }
     return combinedHtml;
   }
+  groupListItems(tokens) {
+    const result = [];
+    let i = 0;
+    while (i < tokens.length) {
+      const token = tokens[i];
+      const isListItem = token?.type === "list-item" || token?.type === "ordered-list-item" || token?.type === "task-item";
+      if (isListItem) {
+        const listItems = [];
+        const firstItemType = token.type;
+        const isOrdered = firstItemType === "ordered-list-item";
+        while (i < tokens.length) {
+          const item = tokens[i];
+          if (!item) break;
+          const itemType = item.type;
+          const isSameListType = isOrdered && itemType === "ordered-list-item" || !isOrdered && (itemType === "list-item" || itemType === "task-item");
+          if (isSameListType) {
+            listItems.push(item);
+            i++;
+          } else {
+            break;
+          }
+        }
+        const wrappedList = {
+          type: isOrdered ? "ol" : "ul",
+          content: "",
+          raw: "",
+          children: listItems,
+          attributes: { format: this.config.format }
+        };
+        wrappedList._isWrapped = true;
+        result.push(wrappedList);
+      } else {
+        result.push(token);
+        i++;
+      }
+    }
+    return result;
+  }
   renderToken(token) {
     const rule = this.rules.get(token.type);
     if (rule) {
       try {
         let tokenToRender = token;
         if (token.children && token.children.length > 0) {
-          const renderedChildren = this.render(token.children);
+          const renderedChildren = token.type === "ul" || token.type === "ol" ? token.children.map((child) => this.renderToken(child)).join("") : this.render(token.children);
           tokenToRender = {
             ...token,
             attributes: {
@@ -1042,7 +1081,8 @@ var ImageExtension = {
         attributes: {
           alt: match[1] || "",
           src: match[2] || "",
-          title: match[3] || ""
+          caption: match[3] || ""
+          // Renamed from 'title' to 'caption' for clarity
         }
       })
     }
@@ -1053,13 +1093,24 @@ var ImageExtension = {
       render: (token) => {
         const src = token.attributes?.src || "";
         const alt = token.attributes?.alt || "";
-        const title = token.attributes?.title || "";
-        const titleAttr = title ? ` title="${escapeHtml(title)}"` : "";
+        const caption = token.attributes?.caption || "";
         const format = token.attributes?.format || "html";
+        if (caption) {
+          if (format === "html") {
+            return `<figure style="margin: 16px 0; text-align: center;">
+            <img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" style="max-width: 100%; height: auto; border-radius: 8px;" loading="lazy" />
+            <figcaption style="margin-top: 8px; font-size: 14px; color: #6b7280; font-style: italic;">${escapeHtml(caption)}</figcaption>
+          </figure>`;
+          }
+          return `<figure class="my-4 text-center">
+            <img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="max-w-full h-auto rounded-lg" loading="lazy" />
+            <figcaption class="mt-2 text-sm text-gray-500 italic">${escapeHtml(caption)}</figcaption>
+          </figure>`;
+        }
         if (format === "html") {
-          return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}"${titleAttr} style="max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0;" loading="lazy" />`;
+          return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" style="max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0;" loading="lazy" />`;
         }
-        return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}"${titleAttr} class="max-w-full h-auto rounded-lg my-4" loading="lazy" />`;
+        return `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="max-w-full h-auto rounded-lg my-4" loading="lazy" />`;
       }
     }
   ]
@@ -1111,16 +1162,57 @@ var ListExtension = {
   name: "list",
   parseRules: [
     {
-      name: "list-item",
+      name: "unordered-list-item",
       pattern: /^(\s*)[-*+]\s+(.+)$/m,
       render: (match) => ({
         type: "list-item",
         content: match[2] || "",
-        raw: match[0] || ""
+        raw: match[0] || "",
+        attributes: {
+          indent: match[1]?.length || 0,
+          ordered: false,
+          marker: match[1] ? match[0].match(/[-*+]/)?.[0] : "-"
+        }
+      })
+    },
+    {
+      name: "ordered-list-item",
+      pattern: /^(\s*)(\d+)\.\s+(.+)$/m,
+      render: (match) => ({
+        type: "ordered-list-item",
+        content: match[3] || "",
+        raw: match[0] || "",
+        attributes: {
+          indent: match[1]?.length || 0,
+          ordered: true,
+          number: parseInt(match[2] || "1")
+        }
       })
     }
   ],
   renderRules: [
+    {
+      type: "ul",
+      render: (token) => {
+        const format = token.attributes?.format || "tailwind";
+        const content = token.attributes?.renderedChildren || "";
+        if (format === "html") {
+          return `<ul style="margin: 8px 0; padding-left: 24px; list-style: disc;">${content}</ul>`;
+        }
+        return `<ul class="my-2 pl-6 list-disc">${content}</ul>`;
+      }
+    },
+    {
+      type: "ol",
+      render: (token) => {
+        const format = token.attributes?.format || "tailwind";
+        const content = token.attributes?.renderedChildren || "";
+        if (format === "html") {
+          return `<ol style="margin: 8px 0; padding-left: 24px; list-style: decimal;">${content}</ol>`;
+        }
+        return `<ol class="my-2 pl-6 list-decimal">${content}</ol>`;
+      }
+    },
     {
       type: "list-item",
       render: (token) => {
@@ -1131,6 +1223,17 @@ var ListExtension = {
         }
         return `<li>${content}</li>`;
       }
+    },
+    {
+      type: "ordered-list-item",
+      render: (token) => {
+        const format = token.attributes?.format || "tailwind";
+        const content = token.attributes?.renderedChildren || escapeHtml(token.content);
+        if (format === "html") {
+          return `<li>${content}</li>`;
+        }
+        return `<li>${content}</li>`;
+      }
     }
   ]
 };
@@ -1145,6 +1248,7 @@ var TaskListExtension = {
         content: match[3] || "",
         raw: match[0] || "",
         attributes: {
+          indent: match[1]?.length || 0,
           checked: String((match[2] || "").toLowerCase() === "x")
         }
       })
@@ -1157,15 +1261,20 @@ var TaskListExtension = {
         const isChecked = token.attributes?.checked === "true";
         const content = token.attributes?.renderedChildren || escapeHtml(token.content);
         const format = token.attributes?.format || "html";
+        const checkmark = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 2px;"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
+        const checkbox = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0; margin-top: 2px;"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect></svg>`;
         if (format === "html") {
-          return `<div style="display: flex; align-items: center; gap: 8px; margin: 8px 0;">
-            <input type="checkbox" ${isChecked ? "checked" : ""} disabled style="margin: 0;" />
+          return `<div style="display: flex; align-items: flex-start; gap: 8px; margin: 8px 0;">
+            <div style="color: ${isChecked ? "#10b981" : "#9ca3af"}; margin-top: 2px;">
+              ${isChecked ? checkmark : checkbox}
+            </div>
             <span${isChecked ? ' style="text-decoration: line-through; color: #6b7280;"' : ""}>${content}</span>
           </div>`;
         }
-        return `<div class="flex items-center gap-2 my-2 task-list-item">
-          <input type="checkbox" ${isChecked ? "checked" : ""} disabled
-            class="form-checkbox h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary" />
+        return `<div class="flex items-start gap-2 my-2 task-list-item">
+          <div class="${isChecked ? "text-green-600" : "text-gray-400"} flex-shrink-0 mt-0.5">
+            ${isChecked ? checkmark : checkbox}
+          </div>
           <span${isChecked ? ' class="line-through text-muted-foreground"' : ""}>${content}</span>
         </div>`;
       }
@@ -1210,6 +1319,35 @@ var TextExtension = {
   ]
 };
 
+// src/extensions/core/strikethrough.ts
+var StrikethroughExtension = {
+  name: "strikethrough",
+  parseRules: [
+    {
+      name: "strikethrough",
+      pattern: /~~((?:(?!~~).)+)~~/,
+      render: (match) => ({
+        type: "strikethrough",
+        content: match[1] || "",
+        raw: match[0] || ""
+      })
+    }
+  ],
+  renderRules: [
+    {
+      type: "strikethrough",
+      render: (token) => {
+        const content = escapeHtml(token.content);
+        const format = token.attributes?.format;
+        if (format === "html") {
+          return `<del style="text-decoration: line-through; color: #6b7280;">${content}</del>`;
+        }
+        return `<del class="line-through text-gray-500">${content}</del>`;
+      }
+    }
+  ]
+};
+
 // src/extensions/core/index.ts
 var CoreExtensions = [
   TextExtension,
@@ -1224,6 +1362,7 @@ var CoreExtensions = [
   TaskListExtension,
   BlockquoteExtension,
   HorizontalRuleExtension,
+  StrikethroughExtension,
   ParagraphExtension,
   LineBreakExtension
 ];