Refactor

Author: pomber

packages/mdx/src/annotations.tsx

@@ -198,16 +198,27 @@ export function extractJSXAnnotations(
       "mdxJsxFlowElement" &&
     parent.children[nextIndex].name === "CH.Annotation"
   ) {
-    const { attributes } = parent.children[nextIndex] as any
+    const jsxAnnotation = parent.children[nextIndex] as any
+
+    // copy attributes to props
     const props = {} as any
-    attributes.forEach((attr: any) => {
+    jsxAnnotation.attributes.forEach((attr: any) => {
       props[attr.name] = attr.value
     })
     const { as, focus, ...data } = props
+
     const Component = annotationsMap[as] || as
-    annotations.push({ Component, focus, data })
-    console.log(parent.children[nextIndex])
+    annotations.push({
+      Component,
+      focus,
+      data: isEmpty(data) ? undefined : data,
+    })
+    // console.log(jsxAnnotation)
     parent.children.splice(nextIndex, 1)
   }
   return annotations
 }
+
+function isEmpty(obj: any) {
+  return Object.keys(obj).length === 0
+}

packages/mdx/src/code.tsx

@@ -67,6 +67,25 @@ export function isEditorNode(node: Node) {
   )
 }
 
+async function transformCode(
+  nodeInfo: NodeInfo,
+  config: { theme: any }
+) {
+  toJSX(nodeInfo.node, {
+    name: "CH.Code",
+    props: await mapCode(nodeInfo, config),
+  })
+}
+export async function transformEditor(
+  nodeInfo: NodeInfo,
+  config: { theme: any }
+) {
+  toJSX(nodeInfo.node, {
+    name: "CH.Code",
+    props: await mapEditor(nodeInfo, config),
+  })
+}
+
 export async function mapAnyCodeNode(
   nodeInfo: NodeInfo,
   config: { theme: any }
@@ -98,39 +117,6 @@ async function mapCode(
   return props
 }
 
-async function transformCode(
-  nodeInfo: NodeInfo,
-  config: { theme: any }
-) {
-  const file = await mapFile(nodeInfo, config)
-  const props = {
-    northPanel: {
-      tabs: [file.name],
-      active: file.name,
-      heightRatio: 1,
-    },
-    files: [file],
-    codeConfig: {
-      theme: config.theme,
-    },
-  }
-  toJSX(nodeInfo.node, {
-    name: "CH.Code",
-    props,
-  })
-}
-export async function transformEditor(
-  nodeInfo: NodeInfo,
-  config: { theme: any }
-) {
-  const props = await mapEditor(nodeInfo, config)
-
-  toJSX(nodeInfo.node, {
-    name: "CH.Code",
-    props,
-  })
-}
-
 export async function mapEditor(
   { node }: NodeInfo,
   config: { theme: any }

packages/playground/content/custom-annotations.mdx

@@ -19,3 +19,8 @@ function adipiscing(...elit) {
   url="https://github.com/code-hike"
   title="Code Hike"
 />
+<CH.Annotation as="label" focus="8">
+  
+**Hello**
+
+</CH.Annotation>