Merge pull request #199 from code-hike/multiline-mark-annotation

Multiline mark annotation

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]
+  // mark[6:9] mark-box
   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) mark-red-background
   const sit = ipsum == null && 0
   dolor = sit - amet(dolor)
   return sit ? consectetur(ipsum) : []
@@ -47,7 +47,7 @@ function lorem(ipsum, dolor = 1) {
 // å
 function adipiscing(...elit) {
   console.log(elit)
-  // box[19:36] aqua
+  // mark[19:36]
   return elit.map(ipsum => ipsum.sit)
 }
 ```
@@ -85,7 +85,7 @@ def lorem(ipsum, dolor = 1):
 ```bash
 function lorem(ipsum, dolor = 1) {
   # focus(1:3)
-  # box[3:7]
+  # mark[3:7]
   local sit=0
   # label something something
   dolor=$((sit - amet(dolor)))

packages/mdx/pages/styles.css

@@ -36,3 +36,19 @@ div#__next > div {
 .annotation-class span {
   text-decoration: line-through;
 }
+
+.mark-red-background {
+  background: #550000 !important;
+}
+
+.mark-red-background .ch-code-multiline-mark-border {
+  background: #bb0000 !important;
+}
+
+.mark-box {
+  background: #000 !important;
+}
+
+.mark-box * {
+  color: #0f0 !important;
+}

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/index.scss

@@ -53,3 +53,16 @@
 .ch-section-link[data-active="true"] * {
   text-decoration-thickness: 1.5px;
 }
+
+.ch-code-inline-mark {
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.15rem 0.1rem;
+  margin: 0 -0.15rem;
+}
+
+.ch-code-multiline-mark-border {
+  width: 3px;
+  height: 100%;
+  position: absolute;
+  left: 0;
+}

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

@@ -11,14 +11,56 @@ 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 className = `ch-code-multiline-mark ` + (data ?? "")
+  const bg = getColor(
+    theme,
+    ColorName.RangeHighlightBackground
+  )
+  const border = getColor(
+    theme,
+    ColorName.EditorInfoForeground
+  )
+
+  return (
+    <div
+      style={{ ...style, background: bg }}
+      className={className}
+    >
+      <span
+        className="ch-code-multiline-mark-border"
+        style={{ background: border }}
+      />
+      {children}
+    </div>
+  )
+}
+
+function InlineMark({
   children,
   data,
   theme,
@@ -28,24 +70,15 @@ function Mark({
   theme: any
 }) {
   const bg =
-    data && typeof data === "string"
-      ? data
-      : tryGuessColor(children) ||
-        transparent(
-          getColor(theme, ColorName.CodeForeground),
-          0.2
-        )
+    tryGuessColor(children) ||
+    transparent(
+      getColor(theme, ColorName.CodeForeground),
+      0.2
+    )
 
+  const className = "ch-code-inline-mark " + (data ?? "")
   return (
-    <span
-      className="ch-code-mark-annotation"
-      style={{
-        background: bg,
-        borderRadius: "0.25rem",
-        padding: "0.2rem 0.15rem 0.1rem",
-        margin: "0 -0.15rem",
-      }}
-    >
+    <span className={className} style={{ background: bg }}>
       {children}
     </span>
   )
@@ -64,7 +97,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 +150,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}</>

packages/mdx/src/utils/theme.ts

@@ -32,6 +32,7 @@ export enum ColorName {
   CodeBackground,
   EditorForeground,
   EditorBackground,
+  FocusBorder,
   ActiveTabBackground,
   ActiveTabForeground,
   InactiveTabBackground,
@@ -53,6 +54,12 @@ export enum ColorName {
   SideBarBackground,
   SideBarForeground,
   SideBarBorder,
+  // Background color for the highlight of line at the cursor position
+  LineHighlightBackground,
+  // Background color of highlighted ranges, like by quick open and find features
+  RangeHighlightBackground,
+  // Foreground color of info squigglies in the editor
+  EditorInfoForeground,
 }
 
 type Color = string | undefined
@@ -97,6 +104,15 @@ export function getColor(
           hc: "#fffffe",
         })
       )
+    case ColorName.FocusBorder:
+      return (
+        colors["focusBorder"] ||
+        getDefault(theme, {
+          light: "#0090F1",
+          dark: "#007FD4",
+          hc: contrastBorder,
+        })
+      )
     case ColorName.ActiveTabBackground:
       return (
         colors["tab.activeBackground"] ||
@@ -267,6 +283,34 @@ export function getColor(
       )
     case ColorName.ListHoverForeground:
       return colors["list.hoverForeground"] || undefined
+    case ColorName.LineHighlightBackground:
+      return (
+        colors["editor.lineHighlightBackground"] ||
+        getDefault(theme, {
+          dark: undefined,
+          light: undefined,
+          hc: undefined,
+        })
+      )
+    case ColorName.RangeHighlightBackground:
+      return (
+        colors["editor.rangeHighlightBackground"] ||
+        getDefault(theme, {
+          dark: "#ffffff0b",
+          light: "#fdff0033",
+          hc: undefined,
+        })
+      )
+
+    case ColorName.EditorInfoForeground:
+      return (
+        colors["editor.infoForeground"] ||
+        getDefault(theme, {
+          dark: "#3794FF",
+          light: "#1a85ff",
+          hc: "#3794FF",
+        })
+      )
 
     default:
       return "#f00"