Update codehike 1.0.0-beta.8

Author: pomber

clone-swiftui-tutorial/components/code.tsx

@@ -1,4 +1,10 @@
-import { AnnotationHandler, Pre, RawCode, highlight } from "codehike/code"
+import {
+  AnnotationHandler,
+  InnerLine,
+  Pre,
+  RawCode,
+  highlight,
+} from "codehike/code"
 import { FileIcon } from "./file-icon"
 import theme from "./theme"
 
@@ -28,23 +34,32 @@ export async function ProseCode({ codeblock }: { codeblock: RawCode }) {
 
 const mark: AnnotationHandler = {
   name: "Mark",
-  Block: ({ children }) => (
-    <div className="bg-indigo-50 shadow-[-4px_0_0] shadow-blue-400">
-      {children}
-    </div>
-  ),
+  Line: ({ annotation, ...props }) => {
+    const className = annotation
+      ? "flex bg-indigo-50 border-l-4 border-blue-400"
+      : "flex border-l-4 border-transparent"
+    return (
+      <div className={className}>
+        <InnerLine merge={props} className="px-2 flex-1" />
+      </div>
+    )
+  },
 }
 
 const lineNumber: AnnotationHandler = {
   name: "LineNumber",
-  Line: ({ annotation, icon, InnerLine, lineNumber, children, ...props }) => {
+  Line: ({ annotation, ...props }) => {
+    const width = props.totalLines.toString().length + 1
     return (
-      <InnerLine merge={props} data-line="true" className="px-2">
-        <span className="pl-2 pr-4 inline-block w-[2ch] box-content !opacity-50 text-right select-none">
-          {lineNumber}
+      <>
+        <span
+          style={{ minWidth: `${width}ch` }}
+          className="text-right opacity-50 select-none mx-1"
+        >
+          {props.lineNumber}
         </span>
-        {children}
-      </InnerLine>
+        <InnerLine merge={props} />
+      </>
     )
   },
 }

clone-swiftui-tutorial/components/section.tsx

@@ -1,7 +1,11 @@
 import { slugify } from "@/lib/utils"
 import { Code } from "@/components/code"
 import { Preview } from "@/components/preview"
-import { Selectable, Selection, SelectionProvider } from "codehike/utils"
+import {
+  Selectable,
+  Selection,
+  SelectionProvider,
+} from "codehike/utils/selection"
 import { RawCode } from "codehike/code"
 import { SectionData, loadImage } from "@/lib/content"
 import { Asset, AssetProvider } from "./context"

clone-swiftui-tutorial/license

@@ -19,7 +19,7 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "codehike": "^1.0.0-alpha.18",
+    "codehike": "^1.0.0-beta.8",
     "lucide-react": "^0.323.0",
     "next": "14.2.3",
     "react": "^18",