@peaske7/readit 0.1.6 → 0.1.7

package/src/cli/index.ts

@@ -5,6 +5,7 @@ import {
   lstatSync,
   readdirSync,
   readFileSync,
+  realpathSync,
   statSync,
 } from "node:fs";
 import * as fs from "node:fs/promises";
@@ -116,7 +117,6 @@ function findReviewableFiles(dir: string): FileEntry[] {
           const type = getFileType(entry);
           if (type) {
             results.push({
-              content: readFileSync(fullPath, "utf-8"),
               type,
               filePath: fullPath,
             });
@@ -145,13 +145,15 @@ function resolveFiles(args: string[]): FileEntry[] {
   const files: FileEntry[] = [];
 
   for (const arg of args) {
-    const filePath = resolve(process.cwd(), arg);
+    const inputPath = resolve(process.cwd(), arg);
 
-    if (!existsSync(filePath)) {
-      console.error(`error: not found: ${filePath}`);
+    if (!existsSync(inputPath)) {
+      console.error(`error: not found: ${inputPath}`);
       process.exit(1);
     }
 
+    const filePath = realpathSync(inputPath);
+
     const stat = statSync(filePath);
 
     if (stat.isDirectory()) {
@@ -175,7 +177,6 @@ function resolveFiles(args: string[]): FileEntry[] {
 
       seen.add(filePath);
       files.push({
-        content: readFileSync(filePath, "utf-8"),
         type,
         filePath,
       });
@@ -185,6 +186,114 @@ function resolveFiles(args: string[]): FileEntry[] {
   return files;
 }
 
+// ─── Onboarding ──────────────────────────────────────────────────────
+
+const SETTINGS_PATH = join(os.homedir(), ".readit", "settings.json");
+
+function isOnboarded(): boolean {
+  try {
+    const content = readFileSync(SETTINGS_PATH, "utf-8");
+    const settings = JSON.parse(content);
+    return settings.onboarded === true;
+  } catch {
+    return false;
+  }
+}
+
+async function markOnboarded(): Promise<void> {
+  let settings: Record<string, unknown> = {};
+  try {
+    const content = readFileSync(SETTINGS_PATH, "utf-8");
+    settings = JSON.parse(content);
+  } catch {
+    // No existing settings
+  }
+  settings.onboarded = true;
+  const dir = join(os.homedir(), ".readit");
+  await fs.mkdir(dir, { recursive: true });
+  await fs.writeFile(SETTINGS_PATH, JSON.stringify(settings, null, 2), "utf-8");
+}
+
+const WELCOME_CONTENT = `# Welcome to readit
+
+A simple tool for reviewing markdown with inline comments.
+
+---
+
+## How It Works
+
+readit follows a simple loop: **read → comment → extract**.
+
+### 1. Read
+
+You're already doing this. Open any markdown file with \`readit <file.md>\` and it renders in your browser with a clean reading experience.
+
+### 2. Comment
+
+Select any text to add a comment. Try it now — **select this sentence** and type your first comment.
+
+Your comments appear as margin notes next to the highlighted text, just like reviewing a document in Google Docs. Add as many as you need.
+
+### 3. Extract
+
+When you're done reviewing, click the menu in the top-right and choose **Copy as Prompt**. This exports all your comments in a format ready for Claude, ChatGPT, or any AI assistant.
+
+You can also export as JSON if you prefer structured data.
+
+---
+
+## Everything is Plain Markdown
+
+Your comments are saved as \`.comments.md\` files in \`~/.readit/comments/\`. No database, no lock-in — just readable markdown files you can version control, search, or edit by hand.
+
+Each comment file looks something like this:
+
+\`\`\`markdown
+## Comment 1
+**Selected:** "select this sentence"
+**Comment:** This is my first comment!
+**Created:** 2024-01-15T10:30:00Z
+\`\`\`
+
+---
+
+## Navigating Comments
+
+Once you have multiple comments, use the navigation bar at the bottom of the screen to jump between them. You can also use keyboard shortcuts:
+
+| Shortcut | Action |
+|----------|--------|
+| \`Alt + ↑\` | Previous comment |
+| \`Alt + ↓\` | Next comment |
+| \`⌘ + C\` | Copy selected text (raw) |
+| \`⌘ + Shift + C\` | Copy selected text with context (for AI) |
+
+---
+
+## Quick Start
+
+\`\`\`bash
+# Review a markdown file
+readit document.md
+
+# Use a custom port
+readit document.md --port 3000
+
+# Start fresh (clear existing comments)
+readit document.md --clean
+\`\`\`
+
+---
+
+## Try It Now
+
+Go ahead and add a few comments to this document. When you're done, export them and see the output. That's the entire workflow — simple, transparent, and designed for reviewing AI-generated content.
+`;
+
+const WELCOME_PATH = join(os.homedir(), ".readit", "welcome.md");
+
+// ─── Program ─────────────────────────────────────────────────────────
+
 program
   .name("readit")
   .description("Review Markdown and HTML documents with inline comments")
@@ -273,9 +382,9 @@ program
     }
   });
 
-// Main review command (default) — accepts one or more files/directories
+// Main review command (default) — accepts zero or more files/directories
 program
-  .argument("<files...>", "Markdown or HTML files/directories to review")
+  .argument("[files...]", "Markdown or HTML files/directories to review")
   .option("-p, --port <number>", "Port to run server on", "4567")
   .option("--host <address>", "Host address to bind to", "127.0.0.1")
   .option("--no-open", "Don't automatically open browser")
@@ -290,11 +399,27 @@ program
         clean: boolean;
       },
     ) => {
-      const files = resolveFiles(fileArgs);
+      let files: FileEntry[];
 
-      if (files.length === 0) {
-        console.error("error: no reviewable files found");
-        process.exit(1);
+      if (fileArgs.length === 0) {
+        if (isOnboarded()) {
+          files = [];
+        } else {
+          files = [
+            {
+              content: WELCOME_CONTENT,
+              type: "markdown" as DocumentType,
+              filePath: WELCOME_PATH,
+            },
+          ];
+        }
+      } else {
+        files = resolveFiles(fileArgs);
+
+        if (files.length === 0) {
+          console.error("error: no reviewable files found");
+          process.exit(1);
+        }
       }
 
       const preferredPort = Number.parseInt(options.port, 10);
@@ -316,9 +441,21 @@ program
           clean: options.clean,
         });
 
-        const fileList = files.map((f) => `  ${f.filePath} (${f.type})`);
+        if (files.length === 0) {
+          console.log(`
+readit - Document Review Tool
 
-        console.log(`
+  URL:  ${url}
+
+  No files specified. Add files with:
+    readit open <file.md>
+
+  Server running. Press Ctrl+C to stop.
+`);
+        } else {
+          const fileList = files.map((f) => `  ${f.filePath} (${f.type})`);
+
+          console.log(`
 readit - Document Review Tool
 
   ${files.length === 1 ? "File:" : "Files:"}
@@ -328,11 +465,17 @@ ${fileList.join("\n")}
   Server running. Close browser tab to stop.
   Press Ctrl+C to force stop.
 `);
+        }
 
         if (options.open) {
           open(url);
         }
 
+        // Mark onboarding complete on first server start
+        if (fileArgs.length === 0) {
+          await markOnboarded();
+        }
+
         // Graceful shutdown on Ctrl+C
         process.on("SIGINT", async () => {
           console.log("\n\nShutting down...");
@@ -362,13 +505,15 @@ program
       // Resolve and validate files
       const resolvedFiles: { path: string; type: DocumentType }[] = [];
       for (const arg of fileArgs) {
-        const filePath = resolve(process.cwd(), arg);
+        const inputPath = resolve(process.cwd(), arg);
 
-        if (!existsSync(filePath)) {
-          console.error(`error: not found: ${filePath}`);
+        if (!existsSync(inputPath)) {
+          console.error(`error: not found: ${inputPath}`);
           process.exit(1);
         }
 
+        const filePath = realpathSync(inputPath);
+
         const type = getFileType(filePath);
         if (!type) {
           console.error(
@@ -388,7 +533,7 @@ program
         for (const file of resolvedFiles) {
           try {
             const res = await fetch(
-              `http://127.0.0.1:${server.port}/api/files`,
+              `http://127.0.0.1:${server.port}/api/documents`,
               {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
@@ -403,7 +548,11 @@ program
             }
 
             const data = await res.json();
-            console.log(`Added: ${data.fileName} (${data.type})`);
+            if (data.status === "added") {
+              console.log(`Added: ${data.fileName} (${data.type})`);
+            } else {
+              console.log(`Present: ${data.fileName} (${data.type})`);
+            }
           } catch (err) {
             console.error(
               "error: failed to connect to server:",
@@ -421,7 +570,6 @@ program
       console.log("No running server found, starting new one...\n");
 
       const files = resolvedFiles.map((f) => ({
-        content: readFileSync(f.path, "utf-8"),
         type: f.type,
         filePath: f.path,
       }));

package/src/components/ActionsMenu.tsx

@@ -12,6 +12,7 @@ import {
 import { useState } from "react";
 import { useCommentContext } from "../contexts/CommentContext";
 import { useLayoutContext } from "../contexts/LayoutContext";
+import { useLocale } from "../contexts/LocaleContext";
 import { RawModal } from "./RawModal";
 import { SettingsModal } from "./SettingsModal";
 import { Button } from "./ui/Button";
@@ -38,6 +39,7 @@ export function ActionsMenu({
 }: ActionsMenuProps) {
   const { commentCount } = useCommentContext();
   const { isFullscreen, toggleLayoutMode } = useLayoutContext();
+  const { t } = useLocale();
 
   const [menuOpen, setMenuOpen] = useState(false);
   const [rawModalOpen, setRawModalOpen] = useState(false);
@@ -51,7 +53,7 @@ export function ActionsMenu({
             variant="ghost"
             size="icon"
             className="size-7"
-            aria-label="Actions menu"
+            aria-label={t("actions.ariaLabel")}
           >
             <MoreHorizontal className="w-4 h-4" />
           </Button>
@@ -59,40 +61,40 @@ export function ActionsMenu({
         <DropdownMenuContent align="end" className="min-w-[160px]">
           <DropdownMenuItem onSelect={() => toggleLayoutMode()}>
             {isFullscreen ? <Minimize2 /> : <Maximize2 />}
-            {isFullscreen ? "Centered" : "Fullscreen"}
+            {isFullscreen ? t("actions.centered") : t("actions.fullscreen")}
           </DropdownMenuItem>
           <DropdownMenuItem onSelect={() => setSettingsOpen(true)}>
             <Settings />
-            Settings
+            {t("actions.settings")}
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={() => onReload()}>
             <RefreshCw />
-            Reload
+            {t("actions.reload")}
           </DropdownMenuItem>
           {commentCount > 0 && (
             <>
               <DropdownMenuItem
                 onSelect={() => onCopyAll()}
-                title="Copy in prompt format for AI assistants"
+                title={t("actions.copyAllAITitle")}
               >
                 <BotMessageSquare />
-                Copy All (AI)
+                {t("actions.copyAllAI")}
               </DropdownMenuItem>
               <DropdownMenuItem
                 onSelect={() => onCopyAllRaw()}
-                title="Copy as plain text"
+                title={t("actions.copyAllRawTitle")}
               >
                 <TextQuote />
-                Copy All (Raw)
+                {t("actions.copyAllRaw")}
               </DropdownMenuItem>
               <DropdownMenuItem onSelect={() => onExportJson()}>
                 <FileDown />
-                Export JSON
+                {t("actions.exportJson")}
               </DropdownMenuItem>
               <DropdownMenuItem onSelect={() => setRawModalOpen(true)}>
                 <FileText />
-                View Raw
+                {t("actions.viewRaw")}
               </DropdownMenuItem>
             </>
           )}

package/src/components/DocumentViewer/CodeBlock.tsx

@@ -1,75 +1,136 @@
-import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
-// Import only the languages we need (reduces bundle by ~800KB)
-import bash from "react-syntax-highlighter/dist/esm/languages/prism/bash";
-import css from "react-syntax-highlighter/dist/esm/languages/prism/css";
-import diff from "react-syntax-highlighter/dist/esm/languages/prism/diff";
-import go from "react-syntax-highlighter/dist/esm/languages/prism/go";
-import graphql from "react-syntax-highlighter/dist/esm/languages/prism/graphql";
-import javascript from "react-syntax-highlighter/dist/esm/languages/prism/javascript";
-import json from "react-syntax-highlighter/dist/esm/languages/prism/json";
-import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
-import markdown from "react-syntax-highlighter/dist/esm/languages/prism/markdown";
-import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
-import rust from "react-syntax-highlighter/dist/esm/languages/prism/rust";
-import sql from "react-syntax-highlighter/dist/esm/languages/prism/sql";
-import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
-import typescript from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
-import yaml from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
-import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { useEffect, useState } from "react";
 import { MermaidDiagram } from "./MermaidDiagram";
 
-// Register languages
-SyntaxHighlighter.registerLanguage("bash", bash);
-SyntaxHighlighter.registerLanguage("sh", bash);
-SyntaxHighlighter.registerLanguage("shell", bash);
-SyntaxHighlighter.registerLanguage("css", css);
-SyntaxHighlighter.registerLanguage("diff", diff);
-SyntaxHighlighter.registerLanguage("go", go);
-SyntaxHighlighter.registerLanguage("graphql", graphql);
-SyntaxHighlighter.registerLanguage("javascript", javascript);
-SyntaxHighlighter.registerLanguage("js", javascript);
-SyntaxHighlighter.registerLanguage("json", json);
-SyntaxHighlighter.registerLanguage("jsx", jsx);
-SyntaxHighlighter.registerLanguage("markdown", markdown);
-SyntaxHighlighter.registerLanguage("md", markdown);
-SyntaxHighlighter.registerLanguage("python", python);
-SyntaxHighlighter.registerLanguage("py", python);
-SyntaxHighlighter.registerLanguage("rust", rust);
-SyntaxHighlighter.registerLanguage("rs", rust);
-SyntaxHighlighter.registerLanguage("sql", sql);
-SyntaxHighlighter.registerLanguage("tsx", tsx);
-SyntaxHighlighter.registerLanguage("typescript", typescript);
-SyntaxHighlighter.registerLanguage("ts", typescript);
-SyntaxHighlighter.registerLanguage("yaml", yaml);
-SyntaxHighlighter.registerLanguage("yml", yaml);
-
 const CODE_BLOCK_STYLE = {
   margin: "1.5em 0",
   borderRadius: "0.5em",
   fontSize: "0.875em",
 };
 
+interface SyntaxHighlighterModule {
+  SyntaxHighlighter: typeof import("react-syntax-highlighter").PrismLight;
+  oneDark: typeof import("react-syntax-highlighter/dist/esm/styles/prism").oneDark;
+}
+
 interface CodeBlockProps {
   className?: string;
   children?: React.ReactNode;
 }
 
-export function CodeBlock({ className, children }: CodeBlockProps) {
-  // Extract language from className (e.g., "language-typescript" -> "typescript")
-  const langMatch = className?.match(/language-(\w+)/);
-  const language = langMatch?.[1] ?? "";
-  const codeString = String(children).replace(/\n$/, "");
+let syntaxHighlighterPromise: Promise<SyntaxHighlighterModule> | null = null;
 
-  // Mermaid diagrams
-  if (language === "mermaid") {
-    return <MermaidDiagram code={codeString} />;
+async function loadSyntaxHighlighter(): Promise<SyntaxHighlighterModule> {
+  if (syntaxHighlighterPromise) {
+    return syntaxHighlighterPromise;
   }
 
-  // Inline code (no language specified and no newlines)
-  if (!langMatch && !String(children).includes("\n")) {
-    return <code className={className}>{children}</code>;
+  syntaxHighlighterPromise = Promise.all([
+    import("react-syntax-highlighter"),
+    import("react-syntax-highlighter/dist/esm/styles/prism"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/bash"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/css"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/diff"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/go"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/graphql"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/javascript"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/json"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/jsx"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/markdown"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/python"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/rust"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/sql"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/tsx"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/typescript"),
+    import("react-syntax-highlighter/dist/esm/languages/prism/yaml"),
+  ]).then(
+    ([
+      syntaxModule,
+      styleModule,
+      bash,
+      css,
+      diff,
+      go,
+      graphql,
+      javascript,
+      json,
+      jsx,
+      markdown,
+      python,
+      rust,
+      sql,
+      tsx,
+      typescript,
+      yaml,
+    ]) => {
+      const SyntaxHighlighter = syntaxModule.PrismLight;
+
+      SyntaxHighlighter.registerLanguage("bash", bash.default);
+      SyntaxHighlighter.registerLanguage("sh", bash.default);
+      SyntaxHighlighter.registerLanguage("shell", bash.default);
+      SyntaxHighlighter.registerLanguage("css", css.default);
+      SyntaxHighlighter.registerLanguage("diff", diff.default);
+      SyntaxHighlighter.registerLanguage("go", go.default);
+      SyntaxHighlighter.registerLanguage("graphql", graphql.default);
+      SyntaxHighlighter.registerLanguage("javascript", javascript.default);
+      SyntaxHighlighter.registerLanguage("js", javascript.default);
+      SyntaxHighlighter.registerLanguage("json", json.default);
+      SyntaxHighlighter.registerLanguage("jsx", jsx.default);
+      SyntaxHighlighter.registerLanguage("markdown", markdown.default);
+      SyntaxHighlighter.registerLanguage("md", markdown.default);
+      SyntaxHighlighter.registerLanguage("python", python.default);
+      SyntaxHighlighter.registerLanguage("py", python.default);
+      SyntaxHighlighter.registerLanguage("rust", rust.default);
+      SyntaxHighlighter.registerLanguage("rs", rust.default);
+      SyntaxHighlighter.registerLanguage("sql", sql.default);
+      SyntaxHighlighter.registerLanguage("tsx", tsx.default);
+      SyntaxHighlighter.registerLanguage("typescript", typescript.default);
+      SyntaxHighlighter.registerLanguage("ts", typescript.default);
+      SyntaxHighlighter.registerLanguage("yaml", yaml.default);
+      SyntaxHighlighter.registerLanguage("yml", yaml.default);
+
+      return {
+        SyntaxHighlighter,
+        oneDark: styleModule.oneDark,
+      };
+    },
+  );
+
+  return syntaxHighlighterPromise;
+}
+
+function LazySyntaxCodeBlock({
+  codeString,
+  language,
+}: {
+  codeString: string;
+  language: string;
+}) {
+  const [module, setModule] = useState<SyntaxHighlighterModule | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    loadSyntaxHighlighter().then((loaded) => {
+      if (!cancelled) {
+        setModule(loaded);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!module) {
+    return (
+      <pre style={CODE_BLOCK_STYLE}>
+        <code>{codeString}</code>
+      </pre>
+    );
   }
 
+  const { SyntaxHighlighter, oneDark } = module;
+
   return (
     <SyntaxHighlighter
       style={oneDark}
@@ -81,3 +142,19 @@ export function CodeBlock({ className, children }: CodeBlockProps) {
     </SyntaxHighlighter>
   );
 }
+
+export function CodeBlock({ className, children }: CodeBlockProps) {
+  const langMatch = className?.match(/language-(\w+)/);
+  const language = langMatch?.[1] ?? "";
+  const codeString = String(children).replace(/\n$/, "");
+
+  if (language === "mermaid") {
+    return <MermaidDiagram code={codeString} />;
+  }
+
+  if (!langMatch && !String(children).includes("\n")) {
+    return <code className={className}>{children}</code>;
+  }
+
+  return <LazySyntaxCodeBlock codeString={codeString} language={language} />;
+}

package/src/components/DocumentViewer/DocumentViewer.tsx

@@ -16,6 +16,7 @@ import {
   type Highlighter,
 } from "../../lib/highlight";
 import { cn, getTextContent } from "../../lib/utils";
+import { useAppStore } from "../../store";
 import {
   AnchorConfidences,
   type Comment,
@@ -23,8 +24,8 @@ import {
   FontFamilies,
   type SelectionRange,
 } from "../../types";
-import { CodeBlock } from "./CodeBlock";
 import { IframeContainer } from "./IframeContainer";
+import { createCodeComponent } from "./InlineCode";
 
 function createHeadingComponent(
   level: 1 | 2 | 3 | 4 | 5 | 6,
@@ -101,7 +102,8 @@ export function DocumentViewer({
   onHighlightHover,
   onHighlightClick,
 }: DocumentViewerProps) {
-  const { isFullscreen, fontFamily } = useLayoutContext();
+  const { isFullscreen, fontFamily, editorScheme } = useLayoutContext();
+  const workingDirectory = useAppStore((s) => s.workingDirectory);
   const contentRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const adapterRef = useRef<Highlighter | null>(null);
@@ -208,16 +210,15 @@ export function DocumentViewer({
       h4: createHeadingComponent(4, headings, headingIndexRef),
       h5: createHeadingComponent(5, headings, headingIndexRef),
       h6: createHeadingComponent(6, headings, headingIndexRef),
-      code: CodeBlock,
+      code: createCodeComponent(editorScheme, workingDirectory),
     }),
-    [headings],
+    [headings, editorScheme, workingDirectory],
   );
 
   if (type === "html") {
     return (
       <main className="flex-1 min-w-0 flex flex-col">
         <IframeContainer
-          key={content}
           html={content}
           comments={comments}
           pendingSelection={pendingSelection}
@@ -244,7 +245,6 @@ export function DocumentViewer({
         )}
       >
         <Markdown
-          key={content}
           components={markdownComponents}
           remarkPlugins={[remarkGfm]}
           rehypePlugins={[rehypeRaw]}

package/src/components/DocumentViewer/InlineCode.tsx

@@ -0,0 +1,60 @@
+import type { ComponentPropsWithoutRef } from "react";
+import {
+  buildEditorUri,
+  parseFilePath,
+  resolveAbsolutePath,
+} from "../../lib/editor-links";
+import type { EditorScheme } from "../../types";
+import { EditorSchemes } from "../../types";
+import { CodeBlock } from "./CodeBlock";
+
+/**
+ * Creates a combined code component for react-markdown that:
+ * - Routes fenced code blocks to CodeBlock (syntax highlighting)
+ * - Wraps inline code containing file paths with editor links
+ * - Falls back to plain <code> for non-file-path inline code
+ */
+export function createCodeComponent(
+  editorScheme: EditorScheme,
+  workingDirectory: string | null,
+) {
+  return function CodeComponent({
+    children,
+    className,
+    ...props
+  }: ComponentPropsWithoutRef<"code">) {
+    // Fenced code blocks have className (e.g., "language-ts") or contain newlines
+    if (className || String(children).includes("\n")) {
+      return <CodeBlock className={className}>{children}</CodeBlock>;
+    }
+
+    // Inline code — check for file path patterns
+    if (editorScheme === EditorSchemes.NONE || !workingDirectory) {
+      return <code {...props}>{children}</code>;
+    }
+
+    const text = typeof children === "string" ? children : "";
+    if (!text) {
+      return <code {...props}>{children}</code>;
+    }
+
+    const match = parseFilePath(text);
+    if (!match) {
+      return <code {...props}>{children}</code>;
+    }
+
+    const absolutePath = resolveAbsolutePath(match.path, workingDirectory);
+    const uri = buildEditorUri(
+      editorScheme,
+      absolutePath,
+      match.line,
+      match.col,
+    );
+
+    return (
+      <a href={uri} title={`Open in ${editorScheme}`} className="editor-link">
+        <code {...props}>{children}</code>
+      </a>
+    );
+  };
+}