Convert paragraph content to markdown

- Introduce `isMarkdownEnabled` helper function to detect whether an MDX element sets `markdownEnabled` (either via shorthand or boolean expression).
- Convert paragraph content to Markdown if `markdownEnabled` is set, accumulating the result in a new `node.markdown` field.
- Use `toMarkdown` from `mdast-util-to-markdown` to transform AST nodes to Markdown.

Author: gurkerl83

packages/codehike/package.json

@@ -57,6 +57,7 @@
     "diff": "^5.1.0",
     "estree-util-visit": "^2.0.0",
     "mdast-util-mdx-jsx": "^3.0.0",
+    "mdast-util-to-markdown": "^2.1.2",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {

packages/codehike/src/mdx/1.0.transform-hikes.ts

@@ -1,10 +1,47 @@
 import { Root } from "mdast"
-import { MdxJsxFlowElement } from "mdast-util-mdx-jsx"
+import { MdxJsxAttribute, MdxJsxFlowElement } from "mdast-util-mdx-jsx"
 import { visit } from "unist-util-visit"
 import { isHikeElement, listToSection } from "./1.1.remark-list-to-section.js"
 import { sectionToAttribute } from "./1.2.remark-section-to-attribute.js"
 import { CodeHikeConfig } from "./config.js"
 
+/**
+ * Determines whether Markdown is enabled for the given MDX JSX element.
+ *
+ * This function checks for the presence of a `markdownEnabled` attribute:
+ * - If no attribute is found, it returns `false`.
+ * - If the attribute is present in shorthand form (e.g. `<SomeTag
+ *   markdownEnabled>`), it returns `true`.
+ * - If the attribute is an MDX expression (e.g. `<SomeTag
+ *   markdownEnabled={true} />`), it checks if the raw expression text is
+ *   literally `"true"`.
+ */
+export function isMarkdownEnabled(node: MdxJsxFlowElement): boolean {
+  // Look for the "markdownEnabled" attribute within the node’s attributes.
+  const markdownEnabledAttr = node.attributes.find(
+    (attr): attr is MdxJsxAttribute =>
+      attr.type === "mdxJsxAttribute" && attr.name === "markdownEnabled",
+  )
+
+  if (!markdownEnabledAttr) return false
+
+  // Shorthand (<Component markdownEnabled>) implies true.
+  if (markdownEnabledAttr.value === null) return true
+
+  // If the attribute value is an object, it indicates an MDX expression
+  // (e.g. markdownEnabled={true}). The `.value` property on this object is the
+  // raw string representation of the expression, so we check if it’s
+  // literally "true".
+  if (
+    typeof markdownEnabledAttr.value === "object" &&
+    markdownEnabledAttr.value.type === "mdxJsxAttributeValueExpression"
+  ) {
+    return markdownEnabledAttr.value.value.trim() === "true"
+  }
+
+  return false
+}
+
 export async function transformAllHikes(root: Root, config: CodeHikeConfig) {
   let tree = wrapInHike(root)
 
@@ -42,8 +79,10 @@ async function transformRemarkHike(
   node: MdxJsxFlowElement,
   config: CodeHikeConfig,
 ) {
+  const markdownEnabled = isMarkdownEnabled(node)
+
   const section = await listToSection(node, config)
-  const { children, attributes } = sectionToAttribute(section)
+  const { children, attributes } = sectionToAttribute(section, markdownEnabled)
 
   node.children = children
   node.attributes.push(...attributes)

packages/codehike/src/mdx/1.2.remark-section-to-attribute.ts

@@ -1,15 +1,15 @@
 import { MdxJsxAttribute, MdxJsxFlowElement } from "mdast-util-mdx-jsx"
-import {
-  HikeContent,
-  HikeSection,
-  JSXChild,
-} from "./1.1.remark-list-to-section.js"
+import { toMarkdown } from "mdast-util-to-markdown"
+import { HikeSection, JSXChild } from "./1.1.remark-list-to-section.js"
 import { getObjectAttribute } from "./estree.js"
 
-export function sectionToAttribute(root: HikeSection) {
+export function sectionToAttribute(
+  root: HikeSection,
+  markdownEnabled: boolean,
+) {
   const children: JSXChild[] = getSectionContainers(root, "")
 
-  const serializableTree = getSerializableNode(root, "")
+  const serializableTree = getSerializableNode(root, "", markdownEnabled)
 
   return {
     children,
@@ -23,7 +23,11 @@ export function sectionToAttribute(root: HikeSection) {
   }
 }
 
-function getSerializableNode(section: HikeSection, path: string) {
+function getSerializableNode(
+  section: HikeSection,
+  path: string,
+  markdownEnabled: boolean = false,
+) {
   const newPath = path ? [path, section.name].join(".") : section.name
   const node: any = {
     children: newPath,
@@ -33,10 +37,21 @@ function getSerializableNode(section: HikeSection, path: string) {
 
   section.children.forEach((child) => {
     if (child.type === "content") {
+      if (markdownEnabled) {
+        // If Markdown is enabled, convert paragraph nodes into Markdown text
+        // and accumulate them in the `node.markdown` property.
+        if (child.value.type === "paragraph") {
+          if (node.markdown == null) {
+            node.markdown = toMarkdown(child.value)
+          } else {
+            node.markdown += toMarkdown(child.value)
+          }
+        }
+      }
       return
     }
     if (child.type === "section") {
-      const childNode = getSerializableNode(child, newPath)
+      const childNode = getSerializableNode(child, newPath, markdownEnabled)
 
       if (child.multi) {
         node[child.name] = node[child.name] || []