@rspress-theme-anatole/plugin-container-syntax 0.1.30 → 0.1.32

package/container.css

@@ -129,28 +129,6 @@
   color: var(--rp-container-tip-text);
 }
 
-
-
-
-.rspress-doc .rspress-directive.tabs {
-  border-color: var(--rp-container-tip-border);
-  background-color: var(--rp-container-tip-bg);
-}
-
-.rspress-doc .rspress-directive.tabs .rspress-directive-title {
-  color: var(--rp-container-tip-text);
-}
-
-.rspress-doc .rspress-directive.tabs code {
-  color: var(--rp-container-tip-text);
-  background-color: var(--rp-container-tip-code-bg);
-}
-
-.rspress-doc .rspress-directive.tabs a {
-  color: var(--rp-container-tip-text);
-}
-
-
 .rspress-doc .rspress-directive.info {
   border-color: var(--rp-container-info-border);
   background-color: var(--rp-container-info-bg);
@@ -225,4 +203,105 @@
 
 .rspress-doc .rspress-directive.details a {
   color: var(--rp-container-details-link);
+}
+
+
+
+
+
+
+.rspress-doc .rspress-directive.tabs {
+  border-color: var(--rp-container-tip-border);
+  background-color: var(--rp-container-tip-bg);
+  padding: 0;
+  overflow: hidden;
+}
+
+.rspress-doc .rspress-directive.tabs .rspress-directive-title {
+  color: var(--rp-container-tip-text);
+  display: none;
+  /* Hide the default title for tabs */
+}
+
+.rspress-doc .rspress-directive.tabs .rspress-directive-content {
+  padding: 0;
+}
+
+/* Tabs navigation styling */
+.rspress-doc .tabs-nav {
+  display: flex;
+  border-bottom: 1px solid var(--rp-container-tip-border);
+  background-color: rgba(7, 156, 112, 0.03);
+  padding: 0;
+  margin: 0;
+}
+
+.rspress-doc .tabs-nav-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--rp-container-tip-text);
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.rspress-doc .tabs-nav-item.active {
+  border-bottom: 2px solid var(--rp-container-tip-text);
+  background-color: rgba(7, 156, 112, 0.08);
+}
+
+/* Tab content styling */
+.rspress-doc .tabs-content {
+  padding: 16px 24px;
+}
+
+.rspress-doc .tabs-panel {
+  display: none;
+}
+
+.rspress-doc .tabs-panel.active {
+  display: block;
+}
+
+.rspress-doc .tabs-nav-item:hover {
+  background-color: rgba(7, 156, 112, 0.06);
+  cursor: pointer;
+}
+
+
+
+/* ...existing styles... */
+
+.rspress-directive.tabs {
+  margin: 1rem 0;
+}
+
+.tabs-nav {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: 1rem;
+}
+
+.tabs-nav-item {
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-bottom: none;
+  margin-bottom: -1px;
+}
+
+.tabs-nav-item.active {
+  background-color: #fff;
+  border-color: #ddd;
+  border-bottom-color: #fff;
+}
+
+.tabs-panel {
+  display: none;
+}
+
+.tabs-panel.active {
+  display: block;
 }

package/dist/index.js

@@ -21,10 +21,138 @@ const parseTitle = (rawTitle = '', isMDX = false) => {
     const matched = rawTitle?.match(isMDX ? TITLE_REGEX_IN_MDX : TITLE_REGEX_IN_MD);
     return trimTailingQuote(matched?.[1] || rawTitle);
 };
+
 const createContainer = (type, title, children) => {
+    // console.log('createContainer', JSON.stringify(children, null, 2));
+
     const isDetails = 'details' === type;
+    const isTabs = 'tabs' === type;
     const rootHName = isDetails ? 'details' : 'div';
     const titleHName = isDetails ? 'summary' : 'div';
+
+    // Handle tabs differently
+    if (isTabs) {
+        // Identify tab sections by finding paragraphs starting with ==
+        const tabSections = [];
+        let currentTabTitle = '';
+        let currentTabContent = null;
+
+        // Process children to find tab sections
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+
+            if (child.type === 'paragraph' &&
+                child.children &&
+                child.children[0] &&
+                child.children[0].type === 'text' &&
+                child.children[0].value.trim().startsWith('==')) {
+                // If we already have a tab section, push it
+                if (currentTabContent) {
+                    tabSections.push({
+                        title: currentTabTitle,
+                        content: currentTabContent
+                    });
+                }
+
+                let text = child.children[0].value.trim();
+
+                if (text.includes('\r\n')) {
+                    let match = text.split('\r\n', 2);
+                    currentTabTitle = match[0].substring(2).trim();
+                    currentTabContent = [{
+                        type: 'text',
+                        value: text.substring(match[0].length).trim()
+                    }];
+                }
+                else {
+                    currentTabTitle = text.substring(2).trim();
+                    currentTabContent = [];
+                }
+
+                continue;
+            }
+
+            // Add content to the current tab section
+            if (currentTabContent !== null) {
+                currentTabContent.push(child);
+            }
+        }
+
+        // Add the last tab section if it exists
+        if (currentTabContent && currentTabContent.length) {
+            tabSections.push({
+                title: currentTabTitle,
+                content: currentTabContent
+            });
+        }
+
+        // Create tab navigation
+        const tabNavItems = tabSections.map((section, index) => ({
+            type: 'paragraph',
+            data: {
+                hName: 'div',
+                hProperties: {
+                    class: `tabs-nav-item${index === 0 ? ' active' : ''}`,
+                    'data-tab-index': index
+                }
+            },
+            children: [
+                {
+                    type: 'text',
+                    value: section.title
+                }
+            ]
+        }));
+
+        // Create tab content panels
+        const tabContentPanels = tabSections.map((section, index) => ({
+            type: 'paragraph',
+            data: {
+                hName: 'div',
+                hProperties: {
+                    class: `tabs-panel${index === 0 ? ' active' : ''}`,
+                    id: `tab-${index}`
+                }
+            },
+            children: section.content
+        }));
+
+        // Create the tabs container
+        return {
+            type: 'containerDirective',
+            data: {
+                hName: rootHName,
+                hProperties: {
+                    class: `rspress-directive ${type}`
+                }
+            },
+            children: [
+                // Navigation tabs
+                {
+                    type: 'paragraph',
+                    data: {
+                        hName: 'div',
+                        hProperties: {
+                            class: 'tabs-nav'
+                        }
+                    },
+                    children: tabNavItems
+                },
+                // Tab content container
+                {
+                    type: 'paragraph',
+                    data: {
+                        hName: 'div',
+                        hProperties: {
+                            class: 'tabs-content'
+                        }
+                    },
+                    children: tabContentPanels
+                },
+            ]
+        };
+    }
+
     return {
         type: 'containerDirective',
         data: {
@@ -62,12 +190,15 @@ const createContainer = (type, title, children) => {
         ]
     };
 };
+
 function transformer(tree) {
     let i = 0;
     try {
         while (i < tree.children.length) {
             const node = tree.children[i];
-            if ('children' in node) transformer(node);
+            if ('children' in node) {
+                transformer(node);
+            }
             if ('containerDirective' === node.type) {
                 const type = node.name;
                 if (DIRECTIVE_TYPES.includes(type)) tree.children.splice(i, 1, createContainer(type, node.attributes?.title ?? type.toUpperCase(), node.children));
@@ -89,6 +220,7 @@ function transformer(tree) {
                 i++;
                 continue;
             }
+
             const firstTextNode = node.children[0];
             const text = firstTextNode.value;
             const metaText = text.split('\n')[0];
@@ -110,7 +242,7 @@ function transformer(tree) {
                 continue;
             }
             const wrappedChildren = [];
-            if (content?.endsWith(':::')) {
+            if (node.type === 'text' && node.value.endsWith(':::')) {
                 wrappedChildren.push({
                     type: 'paragraph',
                     children: [
@@ -133,30 +265,40 @@ function transformer(tree) {
                     value: content
                 });
                 paragraphChild.children.push(...node.children.slice(1, -1));
+
                 if (0 === paragraphChild.children.length) wrappedChildren.pop();
+
                 const lastChildInNode = node.children[node.children.length - 1];
+
                 if ('text' === lastChildInNode.type && REGEX_END.test(lastChildInNode.value)) {
                     const lastChildInNodeText = lastChildInNode.value;
                     const matchedEndContent = lastChildInNodeText.slice(0, -3).trim();
-                    if (wrappedChildren.length) wrappedChildren[0].children.push({
-                        type: 'text',
-                        value: matchedEndContent
-                    });
-                    else if (matchedEndContent) wrappedChildren.push({
-                        type: 'paragraph',
-                        children: [
-                            {
-                                type: 'text',
-                                value: matchedEndContent
-                            }
-                        ]
-                    });
+                    if (wrappedChildren.length) {
+                        wrappedChildren[0].children.push({
+                            type: 'text',
+                            value: matchedEndContent
+                        });
+                    }
+                    else if (matchedEndContent) {
+                        wrappedChildren.push({
+                            type: 'paragraph',
+                            children: [
+                                {
+                                    type: 'text',
+                                    value: matchedEndContent
+                                }
+                            ]
+                        });
+                    }
+
                     const newChild = createContainer(type, title, wrappedChildren);
                     tree.children.splice(i, 1, newChild);
                     i++;
                     continue;
                 }
-                if (lastChildInNode !== firstTextNode && wrappedChildren.length) wrappedChildren[0].children.push(lastChildInNode);
+                if (lastChildInNode !== firstTextNode && wrappedChildren.length) {
+                    wrappedChildren[0].children.push(lastChildInNode);
+                }
                 let j = i + 1;
                 while (j < tree.children.length) {
                     const currentParagraph = tree.children[j];
@@ -166,6 +308,7 @@ function transformer(tree) {
                         continue;
                     }
                     const lastChild = currentParagraph.children[currentParagraph.children.length - 1];
+
                     if (lastChild === firstTextNode || 'text' === lastChild.type && REGEX_END.test(lastChild.value)) {
                         const lastChildText = lastChild.value;
                         const matchedEndContent = lastChildText.slice(0, -3).trim();
@@ -179,6 +322,7 @@ function transformer(tree) {
                                 }
                             ]
                         });
+
                         const newChild = createContainer(type, title, wrappedChildren);
                         tree.children.splice(i, j - i + 1, newChild);
                         break;
@@ -197,6 +341,7 @@ function transformer(tree) {
         throw e;
     }
 }
+
 const remarkPluginContainer = () => transformer;
 const src_dirname = (0, __WEBPACK_EXTERNAL_MODULE__rspress_shared_baa012d0__.normalizePosixPath)(__WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].dirname((0, __WEBPACK_EXTERNAL_MODULE_node_url_e96de089__.fileURLToPath)(import.meta.url)));
 function pluginContainerSyntax() {
@@ -207,7 +352,9 @@ function pluginContainerSyntax() {
                 remarkPluginContainer
             ]
         },
-        globalStyles: __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].posix.join(src_dirname, '../container.css')
+        globalStyles: __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].posix.join(src_dirname, '../container.css'),
+
     };
 }
+
 export { pluginContainerSyntax };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress-theme-anatole/plugin-container-syntax",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "license": "MIT",
   "sideEffects": [
     "*.css",