fix: compatibility with remark-directive

close #1766

packages/plugin-container-syntax/package.json

@@ -38,6 +38,7 @@
     "@types/mdast": "^3.0.15",
     "mdast-util-mdx-jsx": "^2.1.4",
     "rehype-stringify": "^9.0.4",
+    "remark-directive": "^2.0.1",
     "remark-mdx": "2.3.0",
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",

packages/plugin-container-syntax/src/remarkPlugin.ts

@@ -11,7 +11,7 @@
  * In fact, the syntax is usually used in SSG Frameworks, such as VuePress/Docusaurus.
  * So the plugin is used to solve the problem and support both syntaxes in above cases.
  */
-/// <reference types="mdast-util-mdx-jsx" />
+/// <reference types="remark-directive" />
 import type {
   BlockContent,
   Content,
@@ -124,21 +124,37 @@ function transformer(tree: Parent) {
         transformer(node);
       }
 
-      /**
-       * Support for Github Alerts
-       * > [!TIP]
-       * > This is a tip
-       *
-       * will be transformed to:
-       *
-       * <div class="rspress-directive tip">
-       *   <div class="rspress-directive-title">TIP</div>
-       *   <div class="rspress-directive-content">
-       *     <p>This is a tip</p>
-       *   </div>
-       * </div>
-       */
-      if (node.type === 'blockquote' && node.children[0].type === 'paragraph') {
+      if (node.type === 'containerDirective') {
+        const type = node.name as DirectiveType;
+        if (DIRECTIVE_TYPES.includes(type)) {
+          tree.children.splice(
+            i,
+            1,
+            createContainer(
+              type,
+              node.attributes?.title ?? type.toUpperCase(),
+              node.children as BlockContent[],
+            ) as Content,
+          );
+        }
+      } else if (
+        /**
+         * Support for Github Alerts
+         * > [!TIP]
+         * > This is a tip
+         *
+         * will be transformed to:
+         *
+         * <div class="rspress-directive tip">
+         *   <div class="rspress-directive-title">TIP</div>
+         *   <div class="rspress-directive-content">
+         *     <p>This is a tip</p>
+         *   </div>
+         * </div>
+         */
+        node.type === 'blockquote' &&
+        node.children[0].type === 'paragraph'
+      ) {
         const initiatorTag: string =
           // @ts-expect-error `value` is treated like `data`, but type expects `data`
           node.children[0].children[0].value;
@@ -169,15 +185,15 @@ function transformer(tree: Parent) {
         }
       }
 
-      if (node.type !== 'paragraph') {
-        i++;
-        continue;
-      }
-      // 1. We get the paragraph and check if it is a container directive
-      if (node.children[0].type !== 'text') {
+      if (
+        node.type !== 'paragraph' ||
+        // 1. We get the paragraph and check if it is a container directive
+        node.children[0].type !== 'text'
+      ) {
         i++;
         continue;
       }
+
       const firstTextNode = node.children[0];
       const text = firstTextNode.value;
       const metaText = text.split('\n')[0];

packages/plugin-container-syntax/tests/__snapshots__/index.test.ts.snap

@@ -8,8 +8,7 @@ sss</p></div></div>"
 exports[`remark-container > Has space before type 1`] = `"<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>This is a tip.</p></div></div>"`;
 
 exports[`remark-container > No newline 1`] = `
-"<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>
-This is a tip</p></div></div>
+"<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>This is a tip</p></div></div>
 <p>12312</p>"
 `;
 
@@ -39,11 +38,19 @@ exports[`remark-container > With link, inlineCode, img, list in container 1`] =
 </ul><p><img src="foo" alt="img"></p></div></div>"
 `;
 
-exports[`remark-container > With new line before the end position of container 1`] = `
-"<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>
-This is a tip</p></div></div>"
+exports[`remark-container > With link, inlineCode, img, spread list in container 1`] = `
+"<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>This is a tip with <code>code</code> and <a href="foo">link</a> some text</p><ul>
+<li>
+<p>list 1</p>
+</li>
+<li>
+<p>list 2</p>
+</li>
+</ul><p><img src="foo" alt="img"></p></div></div>"
 `;
 
+exports[`remark-container > With new line before the end position of container 1`] = `"<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>This is a tip</p></div></div>"`;
+
 exports[`remark-container > With new line in all case 1`] = `"<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>This is a tip</p></div></div>"`;
 
 exports[`remark-container > details 1`] = `
@@ -79,8 +86,7 @@ exports[`remark-container > nested in ordered list 1`] = `
 "<ol>
 <li>
 <p>Title1</p>
-<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>
-This is a tip.</p></div></div>
+<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>This is a tip.</p></div></div>
 </li>
 <li>
 <p>Title2</p>
@@ -92,8 +98,7 @@ exports[`remark-container > nested in ordered list inside mdx component 1`] = `
 "<div><div><div><ol>
 <li>
 <p>Title1</p>
-<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>
-This is a tip.</p></div></div>
+<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>This is a tip.</p></div></div>
 </li>
 <li>
 <p>Title2</p>
@@ -105,8 +110,7 @@ exports[`remark-container > nested in unordered list 1`] = `
 "<ul>
 <li>
 <p>Title1</p>
-<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>
-This is a tip.</p></div></div>
+<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>This is a tip.</p></div></div>
 </li>
 <li>
 <p>Title2</p>
@@ -118,8 +122,7 @@ exports[`remark-container > nested in unordered list inside mdx component 1`] =
 "<div><div><div><ul>
 <li>
 <p>Title1</p>
-<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>
-This is a tip.</p></div></div>
+<div class="rspress-directive tip"><div class="rspress-directive-title">TIP</div><div class="rspress-directive-content"><p>This is a tip.</p></div></div>
 </li>
 <li>
 <p>Title2</p>

packages/plugin-container-syntax/tests/index.test.ts

@@ -1,4 +1,5 @@
 import rehypeStringify from 'rehype-stringify';
+import remarkDirective from 'remark-directive';
 import remarkMdx from 'remark-mdx';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
@@ -10,6 +11,7 @@ describe('remark-container', () => {
   const processor = unified()
     .use(remarkParse)
     .use(remarkPluginContainer)
+    .use(remarkDirective)
     .use(remarkRehype)
     .use(rehypeStringify);
 
@@ -82,6 +84,21 @@ describe('remark-container', () => {
 
   test('With link, inlineCode, img, list in container', () => {
     const result = processor.processSync(`
+:::tip
+
+This is a tip with \`code\` and [link](foo) some text
+
+- list 1
+- list 2
+
+![img](foo)
+
+:::`);
+    expect(result.value).toMatchSnapshot();
+  });
+
+  test('With link, inlineCode, img, spread list in container', () => {
+    const result = processor.processSync(`
   :::tip
 
   This is a tip with \`code\` and [link](foo) some text