Use tokens from editor step

Author: pomber

packages/mdx/package.json

@@ -34,7 +34,8 @@
     "node-fetch": "^2.0.0",
     "remark-rehype": "^8.1.0",
     "unified": "^9.2.2",
-    "unist-util-visit": "^2.0.0"
+    "unist-util-visit": "^2.0.0",
+    "unist-util-visit-parents": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.3 || ^17 || ^18"

packages/mdx/src/index.scss

@@ -37,12 +37,17 @@
 .ch-section-link * {
   text-decoration: underline;
   text-decoration-style: dotted;
+  text-decoration-thickness: 1px;
   text-decoration-color: var(
     --ch-code-foreground,
     currentColor
   );
 }
-
 .ch-section-link[data-active="true"] {
   background-color: #bae6fd66;
 }
+
+.ch-section-link[data-active="true"],
+.ch-section-link[data-active="true"] * {
+  text-decoration-thickness: 1.5px;
+}

packages/mdx/src/plugin.ts

@@ -41,12 +41,12 @@ export function remarkCodeHike(
     }
 
     try {
-      await transformInlineCodes(tree, config)
       await transformPreviews(tree)
       await transformScrollycodings(tree, config)
       await transformSpotlights(tree, config)
       await transformSlideshows(tree, config)
       await transformSections(tree, config)
+      await transformInlineCodes(tree, config)
       await transformEditorNodes(tree, config)
       await transformCodeNodes(tree, config)
     } catch (e) {

packages/mdx/src/plugin/inline-code.ts

@@ -5,8 +5,11 @@ import {
 } from "./unist-utils"
 import { Node } from "unist"
 import visit from "unist-util-visit"
+import visitParents from "unist-util-visit-parents"
 import { Parent } from "hast-util-to-estree"
 import { highlight } from "@code-hike/highlighter"
+import { EditorStep } from "@code-hike/mini-editor"
+import { Code } from "@code-hike/utils"
 
 export async function transformInlineCodes(
   tree: Node,
@@ -32,14 +35,18 @@ export async function transformInlineCodes(
     ["mdxJsxFlowElement", "mdxJsxTextElement"],
     async (node: Parent) => {
       if (node.name === "CH.InlineCode") {
-        const code = await highlight({
-          code: node.children[0].value as string,
-          lang: "jsx",
-          theme,
-        })
+        const inlinedCode = node.children[0].value as string
+        const lang = node.attributes?.lang
+
         toJSX(node, {
           props: {
-            code,
+            code: await getCode(
+              tree,
+              node,
+              inlinedCode,
+              lang,
+              theme
+            ),
             codeConfig: CH_CODE_CONFIG_PLACEHOLDER,
           },
           appendProps: true,
@@ -48,3 +55,139 @@ export async function transformInlineCodes(
     }
   )
 }
+
+async function getCode(
+  tree: Node,
+  node: Parent,
+  inlinedCode: string,
+  lang: string | undefined,
+  theme: any
+) {
+  const ancestors = getAncestors(tree, node)
+  const sectionNode = ancestors.find(
+    n => n.data?.editorStep
+  )
+
+  // if node isn't inside a section-like parent, use provided lang or "jsx"
+  if (!sectionNode) {
+    return await highlight({
+      code: inlinedCode,
+      lang: lang || "jsx",
+      theme,
+    })
+  }
+
+  const editorStep = sectionNode.data
+    .editorStep as any as EditorStep
+
+  // if the same code is present in the editor step, use it
+  const existingCode = getExistingCode(
+    editorStep.files,
+    inlinedCode
+  )
+
+  if (existingCode) {
+    return existingCode
+  }
+
+  // or else, try to guess the language from somewhere
+  const activeFile =
+    editorStep.files?.find(
+      f => f.name === editorStep.northPanel?.active
+    ) || editorStep.files[0]
+
+  const activeLang = activeFile?.code?.lang
+
+  return await highlight({
+    code: inlinedCode,
+    lang: lang || activeLang || "jsx",
+    theme,
+  })
+}
+
+function getAncestors(tree: Node, node: Node): Parent[] {
+  let ancestors: Parent[] = []
+  visitParents(tree, node, (node, nodeAncestors) => {
+    ancestors = nodeAncestors
+  })
+  return ancestors
+}
+
+function getExistingCode(
+  files: EditorStep["files"] | undefined,
+  inlinedCode: string
+): Code | undefined {
+  if (!files) {
+    return undefined
+  }
+
+  for (const file of files) {
+    for (const line of file.code.lines) {
+      const lineContent = line.tokens
+        .map(t => t.content)
+        .join("")
+      const index = lineContent.indexOf(inlinedCode)
+      if (index !== -1) {
+        const tokens = sliceTokens(
+          line,
+          index,
+          inlinedCode.length
+        )
+        return { lang: file.code.lang, lines: [{ tokens }] }
+      }
+    }
+  }
+  return undefined
+}
+
+function sliceTokens(
+  line: Code["lines"][0],
+  start: number,
+  length: number
+) {
+  const tokens = line.tokens
+  let currentLength = 0
+
+  let headTokens = [] as Code["lines"][0]["tokens"]
+
+  for (let i = 0; i < tokens.length; i++) {
+    if (currentLength === start) {
+      headTokens = tokens.slice(i)
+      break
+    }
+    if (currentLength + tokens[i].content.length > start) {
+      const newToken = {
+        ...tokens[i],
+        content: tokens[i].content.slice(
+          start - currentLength
+        ),
+      }
+      headTokens = [newToken].concat(tokens.slice(i + 1))
+      break
+    }
+    currentLength += tokens[i].content.length
+  }
+
+  currentLength = 0
+  for (let i = 0; i < headTokens.length; i++) {
+    if (currentLength === length) {
+      return headTokens.slice(0, i)
+    }
+    if (
+      currentLength + headTokens[i].content.length >
+      length
+    ) {
+      const newToken = {
+        ...headTokens[i],
+        content: headTokens[i].content.slice(
+          0,
+          length - currentLength
+        ),
+      }
+
+      return headTokens.slice(0, i).concat([newToken])
+    }
+    currentLength += headTokens[i].content.length
+  }
+  return []
+}

packages/mdx/src/plugin/section.ts

@@ -26,17 +26,20 @@ async function transformSection(
   await visitAsync(
     node,
     ["mdxJsxFlowElement", "code"],
-    async (node, index, parent) => {
-      if (isEditorNode(node)) {
+    async (editorNode, index, parent) => {
+      if (isEditorNode(editorNode)) {
         props = await mapAnyCodeNode(
-          { node, index, parent: parent! },
+          { node: editorNode, index, parent: parent! },
           config
         )
-        toJSX(node, { name: "CH.SectionCode", props: {} })
+        toJSX(editorNode, {
+          name: "CH.SectionCode",
+          props: {},
+        })
       }
     }
   )
-
+  node.data = { editorStep: props }
   transformLinks(node)
 
   if (props) {

packages/mdx/src/plugin/steps.tsx

@@ -29,13 +29,11 @@ export async function extractStepsInfo(
     steps[stepIndex] = steps[stepIndex] || { children: [] }
     const step = steps[stepIndex]
     if (!step.editorStep && isEditorNode(child)) {
-      const {
-        codeConfig,
-        ...editorStep
-      } = await mapAnyCodeNode(
-        { node: child, parent, index: i },
-        config
-      )
+      const { codeConfig, ...editorStep } =
+        await mapAnyCodeNode(
+          { node: child, parent, index: i },
+          config
+        )
 
       if (stepIndex === 0) {
         // for the header props, keep it as it is
@@ -58,6 +56,7 @@ export async function extractStepsInfo(
     return {
       type: "mdxJsxFlowElement",
       children: step.children,
+      data: { editorStep: step.editorStep },
     }
   })
 

packages/playground/content/section.mdx

@@ -5,6 +5,7 @@ Lorem ipsum dolor sit amet.
 <CH.Section>
 
 Consectetur adipiscing elit, sed do eiusmod tempor [incididunt](focus://4:7) ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget.
+_`orem`_, _`sum`_
 
 ```js
 function lorem(ipsum, dolor) {
@@ -45,4 +46,6 @@ function lorem(ipsum, dolor) {
 
 </CH.Code>
 
+_`ackground-color: va`_
+
 </CH.Section>