@changerawr/markdown 1.1.8 → 1.1.9

package/dist/react/index.mjs

@@ -491,20 +491,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: {
@@ -1115,6 +1154,28 @@ var ListExtension = {
     }
   ],
   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) => {
@@ -1163,15 +1224,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>`;
       }