radiant-docs 0.1.19 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "CLI tool for previewing Radiant documentation locally",
   "type": "module",
   "bin": {

package/template/src/components/user/CodeBlock.astro

@@ -340,61 +340,60 @@ const renderedCodeLinesHtml = normalizedTokenLines
       </div>
     </div>
   </div>
-</div>
-
-<script is:inline>
-  (() => {
-    const script = document.currentScript;
-    if (!(script instanceof HTMLScriptElement)) return;
-
-    const root = script.previousElementSibling;
-    if (!(root instanceof HTMLElement)) return;
-
-    const copyButtons = root.querySelectorAll("[data-rd-copy-trigger='true']");
-    if (copyButtons.length === 0) return;
-
-    const setCopiedState = (button, copied) => {
-      const copyIcon = button.querySelector("[data-rd-copy-icon]");
-      const checkIcon = button.querySelector("[data-rd-copy-check]");
+  <script is:inline>
+    (() => {
+      const script = document.currentScript;
+      if (!(script instanceof HTMLScriptElement)) return;
 
-      if (!copyIcon || !checkIcon) return;
+      const root = script.closest("[data-rd-code-block-root='true']");
+      if (!(root instanceof HTMLElement)) return;
 
-      if (copied) {
-        copyIcon.classList.add("scale-50", "opacity-0", "-rotate-6");
-        copyIcon.classList.remove("scale-100", "opacity-100", "rotate-0");
+      const copyButtons = root.querySelectorAll("[data-rd-copy-trigger='true']");
+      if (copyButtons.length === 0) return;
 
-        checkIcon.classList.remove("scale-50", "opacity-0", "rotate-6");
-        checkIcon.classList.add("scale-110", "opacity-100", "rotate-0");
-        return;
-      }
-
-      copyIcon.classList.remove("scale-50", "opacity-0", "-rotate-6");
-      copyIcon.classList.add("scale-100", "opacity-100", "rotate-0");
+      const setCopiedState = (button, copied) => {
+        const copyIcon = button.querySelector("[data-rd-copy-icon]");
+        const checkIcon = button.querySelector("[data-rd-copy-check]");
 
-      checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
-      checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
-    };
+        if (!copyIcon || !checkIcon) return;
 
-    copyButtons.forEach((button) => {
-      let timeoutId = null;
-      button.addEventListener("click", async () => {
-        const encodedCopyValue =
-          button.getAttribute("data-rd-copy-content") ?? "";
-        const copyValue = decodeURIComponent(encodedCopyValue);
+        if (copied) {
+          copyIcon.classList.add("scale-50", "opacity-0", "-rotate-6");
+          copyIcon.classList.remove("scale-100", "opacity-100", "rotate-0");
 
-        try {
-          await navigator.clipboard.writeText(copyValue);
-          setCopiedState(button, true);
+          checkIcon.classList.remove("scale-50", "opacity-0", "rotate-6");
+          checkIcon.classList.add("scale-110", "opacity-100", "rotate-0");
+          return;
+        }
 
-          if (timeoutId) window.clearTimeout(timeoutId);
-          timeoutId = window.setTimeout(() => {
+        copyIcon.classList.remove("scale-50", "opacity-0", "-rotate-6");
+        copyIcon.classList.add("scale-100", "opacity-100", "rotate-0");
+
+        checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
+        checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
+      };
+
+      copyButtons.forEach((button) => {
+        let timeoutId = null;
+        button.addEventListener("click", async () => {
+          const encodedCopyValue =
+            button.getAttribute("data-rd-copy-content") ?? "";
+          const copyValue = decodeURIComponent(encodedCopyValue);
+
+          try {
+            await navigator.clipboard.writeText(copyValue);
+            setCopiedState(button, true);
+
+            if (timeoutId) window.clearTimeout(timeoutId);
+            timeoutId = window.setTimeout(() => {
+              setCopiedState(button, false);
+              timeoutId = null;
+            }, 1200);
+          } catch {
             setCopiedState(button, false);
-            timeoutId = null;
-          }, 1200);
-        } catch {
-          setCopiedState(button, false);
-        }
+          }
+        });
       });
-    });
-  })();
-</script>
+    })();
+  </script>
+</div>

package/template/src/components/user/CodeGroup.astro

@@ -56,170 +56,169 @@ import CodeTabEdge from "../ui/CodeTabEdge.astro";
   <div data-rd-code-group-content class="min-w-0">
     <slot />
   </div>
-</div>
-
-<script is:inline>
-  (() => {
-    const script = document.currentScript;
-    if (!(script instanceof HTMLScriptElement)) return;
+  <script is:inline>
+    (() => {
+      const script = document.currentScript;
+      if (!(script instanceof HTMLScriptElement)) return;
 
-    const root = script.previousElementSibling;
-    if (!(root instanceof HTMLElement)) return;
+      const root = script.closest("[data-rd-code-group-root='true']");
+      if (!(root instanceof HTMLElement)) return;
 
-    const contentElement = root.querySelector("[data-rd-code-group-content]");
-    const tabsElement = root.querySelector("[data-rd-code-group-tabs]");
-    const pillElement = root.querySelector("[data-rd-code-group-pill]");
-    const copyButton = root.querySelector("[data-rd-copy-trigger='true']");
+      const contentElement = root.querySelector("[data-rd-code-group-content]");
+      const tabsElement = root.querySelector("[data-rd-code-group-tabs]");
+      const pillElement = root.querySelector("[data-rd-code-group-pill]");
+      const copyButton = root.querySelector("[data-rd-copy-trigger='true']");
 
-    if (!contentElement || !tabsElement || !pillElement) return;
+      if (!contentElement || !tabsElement || !pillElement) return;
 
-    const codeItems = Array.from(
-      contentElement.querySelectorAll("[data-rd-code-group-item='true']"),
-    );
-    if (codeItems.length === 0) return;
+      const codeItems = Array.from(
+        contentElement.querySelectorAll("[data-rd-code-group-item='true']"),
+      );
+      if (codeItems.length === 0) return;
 
-    let activeIndex = 0;
+      let activeIndex = 0;
 
-    const setCopiedState = (button, copied) => {
-      const copyIcon = button.querySelector("[data-rd-copy-icon]");
-      const checkIcon = button.querySelector("[data-rd-copy-check]");
-      if (!copyIcon || !checkIcon) return;
+      const setCopiedState = (button, copied) => {
+        const copyIcon = button.querySelector("[data-rd-copy-icon]");
+        const checkIcon = button.querySelector("[data-rd-copy-check]");
+        if (!copyIcon || !checkIcon) return;
 
-      if (copied) {
-        copyIcon.classList.add("scale-50", "opacity-0", "-rotate-6");
-        copyIcon.classList.remove("scale-100", "opacity-100", "rotate-0");
+        if (copied) {
+          copyIcon.classList.add("scale-50", "opacity-0", "-rotate-6");
+          copyIcon.classList.remove("scale-100", "opacity-100", "rotate-0");
 
-        checkIcon.classList.remove("scale-50", "opacity-0", "rotate-6");
-        checkIcon.classList.add("scale-110", "opacity-100", "rotate-0");
-        return;
-      }
+          checkIcon.classList.remove("scale-50", "opacity-0", "rotate-6");
+          checkIcon.classList.add("scale-110", "opacity-100", "rotate-0");
+          return;
+        }
 
-      copyIcon.classList.remove("scale-50", "opacity-0", "-rotate-6");
-      copyIcon.classList.add("scale-100", "opacity-100", "rotate-0");
+        copyIcon.classList.remove("scale-50", "opacity-0", "-rotate-6");
+        copyIcon.classList.add("scale-100", "opacity-100", "rotate-0");
 
-      checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
-      checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
-    };
+        checkIcon.classList.remove("scale-110", "opacity-100", "rotate-0");
+        checkIcon.classList.add("scale-50", "opacity-0", "rotate-6");
+      };
 
-    const tabs = codeItems.map((itemElement, index) => {
-      const filename =
-        itemElement.getAttribute("data-rd-tab-filename") ??
-        `file-name-${index + 1}.txt`;
-      const tabIconTemplate = itemElement.querySelector(
-        "template[data-rd-code-group-tab-icon]",
-      );
+      const tabs = codeItems.map((itemElement, index) => {
+        const filename =
+          itemElement.getAttribute("data-rd-tab-filename") ??
+          `file-name-${index + 1}.txt`;
+        const tabIconTemplate = itemElement.querySelector(
+          "template[data-rd-code-group-tab-icon]",
+        );
+
+        const tabWrapper = document.createElement("div");
+        tabWrapper.className = "relative z-10 text-xs font-medium";
+
+        const tabButton = document.createElement("button");
+        tabButton.type = "button";
+        tabButton.className =
+          "relative inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-neutral-600 transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer";
+        tabButton.setAttribute("aria-label", filename);
+        tabButton.setAttribute("data-rd-code-group-tab", String(index));
+
+        const iconContainer = document.createElement("span");
+        iconContainer.className =
+          "pointer-events-none inline-flex shrink-0 items-center rounded-[4px] transition-opacity duration-150";
+
+        if (tabIconTemplate && tabIconTemplate.innerHTML.trim().length > 0) {
+          iconContainer.innerHTML = tabIconTemplate.innerHTML;
+        } else {
+          iconContainer.classList.add("hidden");
+        }
 
-      const tabWrapper = document.createElement("div");
-      tabWrapper.className = "relative z-10 text-xs font-medium";
+        const labelElement = document.createElement("span");
+        labelElement.className = "whitespace-pre leading-none";
+        labelElement.textContent = filename;
+
+        tabButton.appendChild(iconContainer);
+        tabButton.appendChild(labelElement);
+        tabWrapper.appendChild(tabButton);
+        tabsElement.appendChild(tabWrapper);
+
+        return {
+          itemElement,
+          tabWrapper,
+          tabButton,
+          iconContainer,
+        };
+      });
 
-      const tabButton = document.createElement("button");
-      tabButton.type = "button";
-      tabButton.className =
-        "relative inline-flex h-9 items-center gap-2 border-0 bg-transparent px-3 py-1.5 text-xs font-medium text-neutral-600 transition-colors duration-150 focus:outline-none focus-visible:outline-none cursor-pointer";
-      tabButton.setAttribute("aria-label", filename);
-      tabButton.setAttribute("data-rd-code-group-tab", String(index));
+      const syncPill = () => {
+        const activeTab = tabs[activeIndex]?.tabWrapper;
+        if (!activeTab) {
+          pillElement.classList.add("opacity-0");
+          pillElement.classList.remove("opacity-100");
+          return;
+        }
 
-      const iconContainer = document.createElement("span");
-      iconContainer.className =
-        "pointer-events-none inline-flex shrink-0 items-center rounded-[4px] transition-opacity duration-150";
+        const activeRect = activeTab.getBoundingClientRect();
+        const tabsRect = tabsElement.getBoundingClientRect();
+        const left = activeRect.left - tabsRect.left + tabsElement.scrollLeft;
+        const width = activeRect.width;
+        pillElement.style.left = `${left}px`;
+        pillElement.style.width = `${width}px`;
+        pillElement.classList.remove("opacity-0");
+        pillElement.classList.add("opacity-100");
+      };
 
-      if (tabIconTemplate && tabIconTemplate.innerHTML.trim().length > 0) {
-        iconContainer.innerHTML = tabIconTemplate.innerHTML;
-      } else {
-        iconContainer.classList.add("hidden");
-      }
+      const syncActiveTab = () => {
+        tabs.forEach(({ itemElement, tabButton, iconContainer }, index) => {
+          const isActive = index === activeIndex;
+          itemElement.style.display = isActive ? "" : "none";
+          tabButton.classList.toggle("text-neutral-900", isActive);
+          tabButton.classList.toggle("text-neutral-600", !isActive);
+
+          if (iconContainer.classList.contains("hidden")) return;
+          iconContainer.classList.toggle("opacity-100", isActive);
+          iconContainer.classList.toggle("opacity-80", !isActive);
+        });
+        syncPill();
+      };
 
-      const labelElement = document.createElement("span");
-      labelElement.className = "whitespace-pre leading-none";
-      labelElement.textContent = filename;
+      tabs.forEach(({ tabButton }, index) => {
+        tabButton.addEventListener("click", () => {
+          if (activeIndex === index) return;
+          activeIndex = index;
+          syncActiveTab();
+        });
+      });
 
-      tabButton.appendChild(iconContainer);
-      tabButton.appendChild(labelElement);
-      tabWrapper.appendChild(tabButton);
-      tabsElement.appendChild(tabWrapper);
+      if (copyButton) {
+        let timeoutId = null;
+        copyButton.addEventListener("click", async () => {
+          const activeItem = tabs[activeIndex]?.itemElement;
+          const encodedCopyValue =
+            activeItem?.getAttribute("data-rd-copy-content") ?? "";
+          const copyValue = decodeURIComponent(encodedCopyValue);
+
+          try {
+            await navigator.clipboard.writeText(copyValue);
+            setCopiedState(copyButton, true);
+
+            if (timeoutId) window.clearTimeout(timeoutId);
+            timeoutId = window.setTimeout(() => {
+              setCopiedState(copyButton, false);
+              timeoutId = null;
+            }, 1200);
+          } catch {
+            setCopiedState(copyButton, false);
+          }
+        });
+      }
 
-      return {
-        itemElement,
-        tabWrapper,
-        tabButton,
-        iconContainer,
-      };
-    });
-
-    const syncPill = () => {
-      const activeTab = tabs[activeIndex]?.tabWrapper;
-      if (!activeTab) {
-        pillElement.classList.add("opacity-0");
-        pillElement.classList.remove("opacity-100");
-        return;
+      const resizeObserver =
+        typeof ResizeObserver !== "undefined"
+          ? new ResizeObserver(() => syncPill())
+          : null;
+      if (resizeObserver) {
+        resizeObserver.observe(tabsElement);
       }
 
-      const activeRect = activeTab.getBoundingClientRect();
-      const tabsRect = tabsElement.getBoundingClientRect();
-      const left = activeRect.left - tabsRect.left + tabsElement.scrollLeft;
-      const width = activeRect.width;
-      pillElement.style.left = `${left}px`;
-      pillElement.style.width = `${width}px`;
-      pillElement.classList.remove("opacity-0");
-      pillElement.classList.add("opacity-100");
-    };
-
-    const syncActiveTab = () => {
-      tabs.forEach(({ itemElement, tabButton, iconContainer }, index) => {
-        const isActive = index === activeIndex;
-        itemElement.style.display = isActive ? "" : "none";
-        tabButton.classList.toggle("text-neutral-900", isActive);
-        tabButton.classList.toggle("text-neutral-600", !isActive);
-
-        if (iconContainer.classList.contains("hidden")) return;
-        iconContainer.classList.toggle("opacity-100", isActive);
-        iconContainer.classList.toggle("opacity-80", !isActive);
-      });
-      syncPill();
-    };
-
-    tabs.forEach(({ tabButton }, index) => {
-      tabButton.addEventListener("click", () => {
-        if (activeIndex === index) return;
-        activeIndex = index;
-        syncActiveTab();
-      });
-    });
-
-    if (copyButton) {
-      let timeoutId = null;
-      copyButton.addEventListener("click", async () => {
-        const activeItem = tabs[activeIndex]?.itemElement;
-        const encodedCopyValue =
-          activeItem?.getAttribute("data-rd-copy-content") ?? "";
-        const copyValue = decodeURIComponent(encodedCopyValue);
-
-        try {
-          await navigator.clipboard.writeText(copyValue);
-          setCopiedState(copyButton, true);
-
-          if (timeoutId) window.clearTimeout(timeoutId);
-          timeoutId = window.setTimeout(() => {
-            setCopiedState(copyButton, false);
-            timeoutId = null;
-          }, 1200);
-        } catch {
-          setCopiedState(copyButton, false);
-        }
-      });
-    }
-
-    const resizeObserver =
-      typeof ResizeObserver !== "undefined"
-        ? new ResizeObserver(() => syncPill())
-        : null;
-    if (resizeObserver) {
-      resizeObserver.observe(tabsElement);
-    }
-
-    tabsElement.addEventListener("scroll", syncPill, { passive: true });
-    window.addEventListener("resize", syncPill);
-    syncActiveTab();
-    requestAnimationFrame(syncPill);
-  })();
-</script>
+      tabsElement.addEventListener("scroll", syncPill, { passive: true });
+      window.addEventListener("resize", syncPill);
+      syncActiveTab();
+      requestAnimationFrame(syncPill);
+    })();
+  </script>
+</div>

package/template/src/components/user/ComponentPreviewBlock.astro

@@ -134,19 +134,19 @@ const isInitiallyExpanded = shouldShowAllCode || totalLineCount <= visibleLines;
     margin-bottom: 0.5714286em;
   }
 
-  .rd-component-preview :global(.group\/prose-code) {
+  .rd-component-preview__code :global(.group\/prose-code) {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
   }
 
-  .rd-component-preview :global(.group\/prose-code > div) {
+  .rd-component-preview__code :global(.group\/prose-code > div) {
     background-color: var(--color-neutral-50) !important;
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
   }
 
-  .rd-component-preview :global(.group\/prose-code pre),
-  .rd-component-preview :global(.group\/prose-code code) {
+  .rd-component-preview__code :global(.group\/prose-code pre),
+  .rd-component-preview__code :global(.group\/prose-code code) {
     background-color: var(--color-neutral-50) !important;
   }
 

package/template/src/lib/mdx/remark-code-block-component.ts

@@ -275,6 +275,8 @@ function parseComponentPreviewChildren(rawCode: string): unknown[] {
     mdastExtensions: [gfmFromMarkdown(), mdxFromMarkdown()],
   }) as Root;
 
+  transformCodeBlockNodes(parsedTree);
+
   return transformPreviewChildren(
     Array.isArray(parsedTree.children) ? parsedTree.children : [],
   );
@@ -322,135 +324,139 @@ function buildDefaultCodeGroupFileName(
   return `file-name-${codeIndexInGroup + 1}.${extension}`;
 }
 
-export const remarkCodeBlockComponent: Plugin<[], Root> = () => {
-  return (tree) => {
-    visitParents(tree, "code", (node, ancestors) => {
-      const codeNode = node as CodeNode;
-      const parent = ancestors[ancestors.length - 1] as ParentNode | undefined;
-      const siblings = parent?.children;
-      if (!siblings) return;
+function transformCodeBlockNodes(tree: Root): void {
+  visitParents(tree, "code", (node, ancestors) => {
+    const codeNode = node as CodeNode;
+    const parent = ancestors[ancestors.length - 1] as ParentNode | undefined;
+    const siblings = parent?.children;
+    if (!siblings) return;
+
+    const currentIndex = siblings.indexOf(node);
+    if (currentIndex < 0) return;
+
+    const nearestMdxFlowElementName = getNearestMdxJsxFlowElementName(
+      ancestors,
+    );
+    const isInsideCodeGroup = nearestMdxFlowElementName === "CodeGroup";
+    const isInsideComponentPreview =
+      nearestMdxFlowElementName === COMPONENT_PREVIEW_NAME;
+    const componentPreviewNode = isInsideComponentPreview
+      ? getNearestMdxJsxFlowElement(ancestors, COMPONENT_PREVIEW_NAME)
+      : null;
+    const isInsideInlineMdx = isInsideMdxJsxTextElement(ancestors);
+    if (isInsideInlineMdx) return;
+
+    const meta = readMetaString(codeNode.meta);
+    const parsedMeta = parseParsedCodeMeta(meta);
+    const language =
+      typeof codeNode.lang === "string" && codeNode.lang.trim().length > 0
+        ? codeNode.lang.trim()
+        : "plaintext";
+    const normalizedLanguage = language.trim().toLowerCase();
+    const rawCode = typeof codeNode.value === "string" ? codeNode.value : "";
+    const codeIndexInGroup = isInsideCodeGroup
+      ? siblings
+          .slice(0, currentIndex)
+          .filter(
+            (sibling) => (sibling as { type?: string }).type === "code",
+          ).length
+      : 0;
+    const fileName =
+      parsedMeta.filename.length > 0
+        ? parsedMeta.filename
+        : isInsideCodeGroup
+          ? buildDefaultCodeGroupFileName(language, codeIndexInGroup)
+          : "";
+    const showFilename = isInsideCodeGroup || fileName.length > 0;
+
+    const attributes: MdxJsxAttributeNode[] = [
+      createAttribute("language", language),
+      createAttribute("raw", rawCode),
+      createAttribute("showFilename", showFilename ? "true" : "false"),
+      createAttribute(
+        "showLineNumbers",
+        parsedMeta.showLineNumbers ? "true" : "false",
+      ),
+    ];
+
+    if (parsedMeta.hideLanguageIcon) {
+      attributes.push(createAttribute("hideLanguageIcon", "true"));
+    }
 
-      const currentIndex = siblings.indexOf(node);
-      if (currentIndex < 0) return;
+    if (showFilename) {
+      attributes.push(createAttribute("filename", fileName));
+    }
 
-      const nearestMdxFlowElementName = getNearestMdxJsxFlowElementName(
-        ancestors,
-      );
-      const isInsideCodeGroup = nearestMdxFlowElementName === "CodeGroup";
-      const isInsideComponentPreview =
-        nearestMdxFlowElementName === COMPONENT_PREVIEW_NAME;
-      const componentPreviewNode = isInsideComponentPreview
-        ? getNearestMdxJsxFlowElement(ancestors, COMPONENT_PREVIEW_NAME)
-        : null;
-      const isInsideInlineMdx = isInsideMdxJsxTextElement(ancestors);
-      if (isInsideInlineMdx) return;
-
-      const meta = readMetaString(codeNode.meta);
-      const parsedMeta = parseParsedCodeMeta(meta);
-      const language =
-        typeof codeNode.lang === "string" && codeNode.lang.trim().length > 0
-          ? codeNode.lang.trim()
-          : "plaintext";
-      const normalizedLanguage = language.trim().toLowerCase();
-      const rawCode = typeof codeNode.value === "string" ? codeNode.value : "";
-      const codeIndexInGroup = isInsideCodeGroup
-        ? siblings
-            .slice(0, currentIndex)
-            .filter(
-              (sibling) => (sibling as { type?: string }).type === "code",
-            ).length
-        : 0;
-      const fileName =
-        parsedMeta.filename.length > 0
-          ? parsedMeta.filename
-          : isInsideCodeGroup
-            ? buildDefaultCodeGroupFileName(language, codeIndexInGroup)
-            : "";
-      const showFilename = isInsideCodeGroup || fileName.length > 0;
-
-      const attributes: MdxJsxAttributeNode[] = [
-        createAttribute("language", language),
-        createAttribute("raw", rawCode),
-        createAttribute("showFilename", showFilename ? "true" : "false"),
-        createAttribute(
-          "showLineNumbers",
-          parsedMeta.showLineNumbers ? "true" : "false",
-        ),
-      ];
-
-      if (parsedMeta.hideLanguageIcon) {
-        attributes.push(createAttribute("hideLanguageIcon", "true"));
-      }
+    if (isInsideCodeGroup) {
+      attributes.push(createAttribute("inCodeGroup", "true"));
+    }
 
-      if (showFilename) {
-        attributes.push(createAttribute("filename", fileName));
-      }
+    if (parsedMeta.highlightedLines.length > 0) {
+      attributes.push(
+        createAttribute("highlightedLines", parsedMeta.highlightedLines),
+      );
+    }
 
-      if (isInsideCodeGroup) {
-        attributes.push(createAttribute("inCodeGroup", "true"));
-      }
+    if (parsedMeta.collapsedLines.length > 0) {
+      attributes.push(
+        createAttribute("collapsedLines", parsedMeta.collapsedLines),
+      );
+    }
 
-      if (parsedMeta.highlightedLines.length > 0) {
-        attributes.push(
-          createAttribute("highlightedLines", parsedMeta.highlightedLines),
+    if (isInsideComponentPreview) {
+      if (!COMPONENT_PREVIEW_LANGUAGES.has(normalizedLanguage)) {
+        throw new Error(
+          `[USER_ERROR]: <${COMPONENT_PREVIEW_NAME}>: Fenced code blocks must use jsx, tsx, or mdx language (received "${language}")`,
         );
       }
 
-      if (parsedMeta.collapsedLines.length > 0) {
-        attributes.push(
-          createAttribute("collapsedLines", parsedMeta.collapsedLines),
+      let previewChildren: unknown[] = [];
+      try {
+        previewChildren = parseComponentPreviewChildren(rawCode);
+      } catch (error) {
+        const reason =
+          error instanceof Error && error.message.trim().length > 0
+            ? ` -> ${error.message}`
+            : "";
+        throw new Error(
+          `[USER_ERROR]: <${COMPONENT_PREVIEW_NAME}>: Failed to parse fenced code block as MDX content${reason}`,
         );
       }
 
-      if (isInsideComponentPreview) {
-        if (!COMPONENT_PREVIEW_LANGUAGES.has(normalizedLanguage)) {
-          throw new Error(
-            `[USER_ERROR]: <${COMPONENT_PREVIEW_NAME}>: Fenced code blocks must use jsx, tsx, or mdx language (received "${language}")`,
-          );
-        }
-
-        let previewChildren: unknown[] = [];
-        try {
-          previewChildren = parseComponentPreviewChildren(rawCode);
-        } catch (error) {
-          const reason =
-            error instanceof Error && error.message.trim().length > 0
-              ? ` -> ${error.message}`
-              : "";
-          throw new Error(
-            `[USER_ERROR]: <${COMPONENT_PREVIEW_NAME}>: Failed to parse fenced code block as MDX content${reason}`,
-          );
-        }
-
-        const previewAttributes = attributes.filter(
-          (attribute) => attribute.name !== "inCodeGroup",
-        );
-        const showAllCode = readBooleanAttribute(
-          componentPreviewNode?.attributes,
-          "showAllCode",
-        );
-        if (showAllCode) {
-          previewAttributes.push(createAttribute("showAllCode", "true"));
-        }
-        const previewNode: MdxJsxFlowElementNode = {
-          type: "mdxJsxFlowElement",
-          name: COMPONENT_PREVIEW_BLOCK_NAME,
-          attributes: previewAttributes,
-          children: previewChildren,
-        };
-        siblings[currentIndex] = previewNode;
-        return;
+      const previewAttributes = attributes.filter(
+        (attribute) => attribute.name !== "inCodeGroup",
+      );
+      const showAllCode = readBooleanAttribute(
+        componentPreviewNode?.attributes,
+        "showAllCode",
+      );
+      if (showAllCode) {
+        previewAttributes.push(createAttribute("showAllCode", "true"));
       }
-
-      const replacementNode: MdxJsxFlowElementNode = {
+      const previewNode: MdxJsxFlowElementNode = {
         type: "mdxJsxFlowElement",
-        name: INTERNAL_CODE_BLOCK_NAME,
-        attributes,
-        children: [],
+        name: COMPONENT_PREVIEW_BLOCK_NAME,
+        attributes: previewAttributes,
+        children: previewChildren,
       };
+      siblings[currentIndex] = previewNode;
+      return;
+    }
 
-      siblings[currentIndex] = replacementNode;
-    });
+    const replacementNode: MdxJsxFlowElementNode = {
+      type: "mdxJsxFlowElement",
+      name: INTERNAL_CODE_BLOCK_NAME,
+      attributes,
+      children: [],
+    };
+
+    siblings[currentIndex] = replacementNode;
+  });
+}
+
+export const remarkCodeBlockComponent: Plugin<[], Root> = () => {
+  return (tree) => {
+    transformCodeBlockNodes(tree);
   };
 };