fix: Fix unsupported traditional markdown list issue. #58

Author: jaywcjlove

src/index.ts

@@ -1,5 +1,5 @@
 import type { Plugin } from 'unified';
-import type { Root, Element, Comment, Properties, Literal } from 'hast';
+import type { Root, Element, Comment, Properties, Literal, RootContent, ElementContent } from 'hast';
 import { visit } from 'unist-util-visit';
 import { propertiesHandle, nextChild, prevChild, getCommentObject } from './utils.js';
 
@@ -76,18 +76,36 @@ const rehypeAttrs: Plugin<[RehypeAttrsOptions?], Root> = (options = {}) => {
         }
       }
       let rootnode = parent as Root
-      if ((/^(em|strong|b|a|i|p|pre|kbd|blockquote|h(1|2|3|4|5|6)|code|table|img|del|ul|ol|li)$/.test(node.tagName) || rootnode.type == "root") && parent && Array.isArray(parent.children) && typeof index === 'number') {
-        const child = nextChild(parent.children, index, '', commentStart, commentEnd)
-        if (child) {
-          const attr = getCommentObject(child as Comment, commentStart, commentEnd)
-          if (Object.keys(attr).length > 0) {
-            node.properties = propertiesHandle(node.properties, attr, properties) as Properties
-          }
+      let testTagName = /^(em|strong|b|a|i|p|pre|kbd|blockquote|h(1|2|3|4|5|6)|code|table|img|del|ul|ol|li)$/.test(node.tagName)
+      if ((testTagName || rootnode.type == "root") && parent && Array.isArray(parent.children) && typeof index === 'number') {
+        addPropertyToNode(node, parent.children, index, properties, commentStart, commentEnd)
+        if (node.tagName == "ul") {
+          node.children.forEach((li, _) => {
+            if (li.type == "element" && li.tagName == "li") {
+              addPropertyToNode(li, li.children, 0, properties, commentStart, commentEnd)
+            }
+          })
         }
       }
     });
   }
 }
 
+function addPropertyToNode(
+  node: Element, 
+  children: RootContent[] | ElementContent[] = [], 
+  index: number, 
+  properties: RehypeAttrsOptions['properties'], 
+  commentStart = "<!--", 
+  commentEnd = "-->"
+) {
+  const child = nextChild(children, index, "", commentStart, commentEnd)
+  if (child) {
+    const attr = getCommentObject(child as Comment, commentStart, commentEnd)
+    if (Object.keys(attr).length > 0) {
+      node.properties = propertiesHandle(node.properties, attr, properties) as Properties
+    }
+  }
+}
 
 export default rehypeAttrs

src/utils.ts

@@ -26,13 +26,12 @@ export const nextChild = (data: RootContent[] | ElementContent[] = [], index: nu
   let i = index;
   while (i < data.length) {
     i++;
+    const element = data[i] as Literal & Element;
     if (tagName) {
-      const element = data[i] as Literal & Element;
       if (element && element.value && (element.value as string).replace(/(\n|\s)/g, '') !== '' || data[i] && (data[i].type as string) === 'element') {
         return element.tagName === tagName ? element : undefined
       }
     } else {
-      const element = data[i] as ElementContent & Literal;
       if (!element || element.type === 'element') return;
       if (element.type === 'text') {
         const nextNode = nextChild(data, i, undefined)

test/index.test.ts

@@ -368,6 +368,11 @@ describe('rehype-attr test case', () => {
       markdown: '#### This is a title\n<!--rehype:className=test test2-->',
       expected: '<h4 class="test test2">This is a title</h4>\n<!--rehype:className=test test2-->',
     },
+    {
+      title: 'options="attr" - <li> `- list 1111`',
+      markdown: '- hello<!--rehype:data-testid=1111-->\n- world<!--rehype:data-testid=2222-->',
+      expected: '<ul>\n<li data-testid="1111">hello<!--rehype:data-testid=1111--></li>\n<li data-testid="2222">world<!--rehype:data-testid=2222--></li>\n</ul>',
+    },
   ].forEach((data, idx) => {
     it(data.title, async () => {
       const htmlStr = unified()
@@ -450,6 +455,11 @@ describe('rehype-attr test case', () => {
       markdown: '<blockquote>content</blockquote><!--rehype:style=color:pink;-->',
       expected: '<blockquote style="color:pink;">content</blockquote><!--rehype:style=color:pink;-->',
     },
+    {
+      title: 'options="attr" - <li> `- list`',
+      markdown: '<ul>\n<li>hello world!</li><!--rehype:data-testid=111-->\n</ul>',
+      expected: '<ul>\n<li data-testid="111">hello world!</li><!--rehype:data-testid=111-->\n</ul>',
+    },
     {
       title: 'options="attr" - <ol>',
       markdown: '<ol><li>Red</li><li>Green</li></ol><!--rehype:style=color:pink;-->',