Multiline mark

Author: pomber

packages/mdx/dev/content/comment-annotations.mdx

@@ -20,22 +20,22 @@ function adipiscing(...elit) {
 console.log("hey")
 ```
 
-Same with other annotations like `bg` and `box`.
+Same with other annotations like `mark` and `box`.
 
 ```js
-// bg(1:2)
+// mark(1:2)
 function foo() {
   // box[6:9]
   console.log("hover me")
   return 8
 }
 ```
 
-You can pass a string parameter to comment annotations. For `bg` and `box`, it will be used as a color.
+You can pass a string parameter to comment annotations. For `mark` and `box`, it will be used as a color.
 
 ```js index.js
 function lorem(ipsum, dolor = 1) {
-  // bg(1:3) linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%)
+  // mark(1:3) linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%)
   const sit = ipsum == null && 0
   dolor = sit - amet(dolor)
   return sit ? consectetur(ipsum) : []

packages/mdx/pages/themes.tsx

@@ -9,7 +9,7 @@ const mdx = `
 
 <CH.Code>
 
-~~~json package.json
+~~~json package.json mark=2[12:23]
 {
   "name": "package.json"
 }
@@ -31,6 +31,7 @@ function PostPage() {
 
 ~~~js pages/alpha.ts
 function AlphaPage() {
+  // mark
   return 1
 }
 ~~~

packages/mdx/src/mdx-client/annotations.tsx

@@ -11,14 +11,64 @@ export const annotationsMap: Record<
   CodeAnnotation["Component"]
 > = {
   box: Box,
-  bg: Background,
+  bg: MultilineMark,
   label: Label,
   link: CodeLink,
   mark: Mark,
   withClass: WithClass,
 }
 
-function Mark({
+function Mark(props: any) {
+  if (props.isInline) {
+    return <InlineMark {...props} />
+  } else {
+    return <MultilineMark {...props} />
+  }
+}
+
+function MultilineMark({
+  children,
+  data,
+  style,
+  theme,
+}: {
+  data: string
+  children: React.ReactNode
+  style?: React.CSSProperties
+  theme?: any
+}) {
+  const bg =
+    data ||
+    (((theme as any).colors[
+      "editor.lineHighlightBackground"
+    ] ||
+      (theme as any).colors[
+        "editor.selectionHighlightBackground"
+      ]) as string)
+  return (
+    <div
+      style={{
+        ...style,
+        background: bg,
+      }}
+      className="ch-code-bg-annotation"
+    >
+      <span
+        className="ch-code-bg-annotation-border"
+        style={{
+          background: "#00a2d3",
+          width: "3px",
+          height: "100%",
+          position: "absolute",
+          left: 0,
+        }}
+      />
+      {children}
+    </div>
+  )
+}
+
+function InlineMark({
   children,
   data,
   theme,
@@ -64,7 +114,7 @@ function tryGuessColor(
     grandChild?.props?.children || []
   )[0] as any
 
-  const { color } = grandGrandChild?.props?.style
+  const { color } = grandGrandChild?.props?.style || {}
 
   if (color) {
     return transparent(color as string, 0.2)
@@ -117,49 +167,6 @@ function WithClass({
   )
 }
 
-function Background({
-  children,
-  data,
-  style,
-  theme,
-}: {
-  data: string
-  children: React.ReactNode
-  style?: React.CSSProperties
-  theme?: any
-}) {
-  const bg =
-    data ||
-    (((theme as any).colors[
-      "editor.lineHighlightBackground"
-    ] ||
-      (theme as any).colors[
-        "editor.selectionHighlightBackground"
-      ]) as string)
-  return (
-    <div
-      style={{
-        ...style,
-        background: bg,
-        // cursor: "pointer",
-      }}
-      className="ch-code-bg-annotation"
-    >
-      <span
-        className="ch-code-bg-annotation-border"
-        style={{
-          background: "#00a2d3",
-          width: "3px",
-          height: "100%",
-          position: "absolute",
-          left: 0,
-        }}
-      />
-      {children}
-    </div>
-  )
-}
-
 function Label({
   children,
   data,

packages/mdx/src/smooth-code/partial-step-parser.ts

@@ -142,6 +142,7 @@ export type MultiLineAnnotation = {
     children: React.ReactNode
     data: any
     theme: EditorTheme
+    isInline: boolean
   }) => React.ReactElement
 }
 
@@ -155,6 +156,7 @@ export type InlineAnnotation = {
     children: React.ReactNode
     data: any
     theme: EditorTheme
+    isInline: boolean
   }) => React.ReactElement
 }
 

packages/mdx/src/smooth-code/smooth-lines.tsx

@@ -108,6 +108,7 @@ function Lines({
             key={i}
             data={group.annotation.data}
             theme={group.annotation.theme}
+            isInline={false}
           >
             <LineGroup
               lines={group.lines}
@@ -258,6 +259,7 @@ function AnnotatedTokens({
       children={children}
       data={annotated?.annotation?.data}
       theme={annotated?.annotation?.theme!}
+      isInline={true}
     />
   ) : (
     <>{children}</>