From b5eb697cdd5171cac0258a476749709c06a164ba Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Fri, 2 Jan 2026 11:51:52 -0600
Subject: [PATCH] feat: MarkdownEditor component with comprehensive tests and
 prose styling.

---
 web/src/components/NoteEditor.tsx             |  92 ++--
 web/src/components/notes/MarkdownEditor.tsx   | 220 ++++++++++
 .../notes/tests/MarkdownEditor.test.tsx       | 414 ++++++++++++++++++
 web/src/index.css                             |  87 ++++
 web/src/pages/NoteView.tsx                    |   4 +-
 5 files changed, 752 insertions(+), 65 deletions(-)
 create mode 100644 web/src/components/notes/MarkdownEditor.tsx
 create mode 100644 web/src/components/notes/tests/MarkdownEditor.test.tsx

diff --git a/web/src/components/NoteEditor.tsx b/web/src/components/NoteEditor.tsx
index 7403e64..78cfa8a 100644
--- a/web/src/components/NoteEditor.tsx
+++ b/web/src/components/NoteEditor.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable solid/no-innerhtml */
 import { EditorToolbar } from "$components/notes/EditorToolbar";
+import { MarkdownEditor, type MarkdownEditorAPI } from "$components/notes/MarkdownEditor";
 import { api } from "$lib/api";
 import type { Note } from "$lib/model";
 import { toast } from "$lib/toast";
@@ -12,7 +13,7 @@ import rehypeExternalLinks from "rehype-external-links";
 import rehypeStringify from "rehype-stringify";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
-import { createEffect, createMemo, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import { createEffect, createResource, createSignal, onCleanup, Show } from "solid-js";
 import { unified } from "unified";
 
 export type EditorFont = "neon" | "argon" | "krypton" | "radon" | "xenon" | "jetbrains" | "google";
@@ -21,25 +22,6 @@ type NoteEditorProps = { noteId?: string; initialTitle?: string; initialContent?
 
 type EditorTab = "write" | "preview";
 
-function getFontName(font: EditorFont | (() => EditorFont)) {
-  switch (typeof font === "function" ? font() : font) {
-    case "neon":
-      return "Monaspace Neon";
-    case "argon":
-      return "Monaspace Argon";
-    case "krypton":
-      return "Monaspace Krypton";
-    case "radon":
-      return "Monaspace Radon";
-    case "xenon":
-      return "Monaspace Xenon";
-    case "google":
-      return "Google Sans Code";
-    default:
-      return "JetBrains Mono";
-  }
-}
-
 const processor = unified().use(remarkParse).use(remarkRehype).use(rehypeShiki, { theme: "vitesse-dark" }).use(
   rehypeExternalLinks,
   { target: "_blank", rel: ["nofollow"] },
@@ -57,7 +39,7 @@ export function NoteEditor(props: NoteEditorProps) {
   const [editorFont, setEditorFont] = createSignal<EditorFont>("jetbrains");
   const [activeTab, setActiveTab] = createSignal<EditorTab>("write");
 
-  let textareaRef: HTMLTextAreaElement | undefined;
+  let editorApi: MarkdownEditorAPI | undefined;
   let textcomplete: Textcomplete | undefined;
 
   const [allNotes] = createResource(async (): Promise<Note[]> => {
@@ -75,10 +57,16 @@ export function NoteEditor(props: NoteEditorProps) {
     updatePreviewContent().catch(e => console.error(`Preview error: ${e instanceof Error ? e.message : e}`));
   });
 
-  onMount(() => {
-    if (!textareaRef) return;
+  onCleanup(() => {
+    textcomplete?.destroy();
+  });
 
-    const editor = new TextareaEditor(textareaRef);
+  const initTextcomplete = (api: MarkdownEditorAPI) => {
+    editorApi = api;
+    const textarea = api.getTextarea();
+    if (!textarea) return;
+
+    const editor = new TextareaEditor(textarea);
     textcomplete = new Textcomplete(editor, [{
       match: /\[\[([^\]]*)/,
       search: (term: string, callback: (results: string[]) => void) => {
@@ -91,28 +79,10 @@ export function NoteEditor(props: NoteEditorProps) {
       replace: (title: string) => `[[${title}]]`,
       template: (title: string) => title,
     }]);
-  });
-
-  onCleanup(() => {
-    textcomplete?.destroy();
-  });
-
-  const fontValue = createMemo(() => getFontName(editorFont));
-
-  const insertAtCursor = (before: string, after: string = "") => {
-    if (!textareaRef) return;
-    const start = textareaRef.selectionStart;
-    const end = textareaRef.selectionEnd;
-    const text = content();
-    const selectedText = text.substring(start, end);
-    const newText = text.substring(0, start) + before + selectedText + after + text.substring(end);
-    setContent(newText);
-    setTimeout(() => {
-      textareaRef!.focus();
-      textareaRef!.setSelectionRange(start + before.length, start + before.length + selectedText.length);
-    }, 0);
   };
 
+  const insertAtCursor = (before: string, after: string = "") => editorApi?.insertAtCursor(before, after);
+
   const handleBold = () => insertAtCursor("**", "**");
   const handleItalic = () => insertAtCursor("*", "*");
   const handleLink = () => insertAtCursor("[", "](url)");
@@ -141,6 +111,8 @@ export function NoteEditor(props: NoteEditorProps) {
     }
   };
 
+  const handleEditorKeyDown = (e: KeyboardEvent) => handleKeyDown(e);
+
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
     try {
@@ -183,8 +155,6 @@ export function NoteEditor(props: NoteEditorProps) {
     }
   };
 
-  const lineNumbers = () => Array.from({ length: content().split("\n").length }, (_, i) => i + 1);
-
   return (
     <div class="max-w-5xl mx-auto p-6">
       <div class="flex items-center justify-between mb-6">
@@ -253,7 +223,9 @@ export function NoteEditor(props: NoteEditorProps) {
           </div>
 
           <Show when={activeTab() === "write"}>
-            <div class="border border-slate-700 border-t-0 rounded-b-lg overflow-hidden">
+            <div
+              class="border border-slate-700 border-t-0 rounded-b-lg overflow-hidden"
+              onKeyDown={handleEditorKeyDown}>
               <EditorToolbar
                 onBold={handleBold}
                 onItalic={handleItalic}
@@ -263,26 +235,18 @@ export function NoteEditor(props: NoteEditorProps) {
                 onCodeBlock={handleCodeBlock}
                 onWikilink={handleWikilink}
                 onList={handleList} />
-              <div class="flex">
-                <Show when={showLineNumbers()}>
-                  <div
-                    class={`bg-slate-900 border-r border-slate-700 text-slate-600 text-right px-2 py-3 select-none text-sm leading-relaxed`}>
-                    <For each={lineNumbers()}>{(num) => <div>{num}</div>}</For>
-                  </div>
-                </Show>
-                <textarea
-                  ref={textareaRef}
-                  value={content()}
-                  onInput={(e) => setContent(e.target.value)}
-                  style={{ "font-family": fontValue() }}
-                  onKeyDown={handleKeyDown}
-                  class={`flex-1 bg-slate-800 text-white p-3 text-sm leading-relaxed resize-none focus:outline-none min-h-[400px]`}
-                  placeholder="# Heading
+              <MarkdownEditor
+                value={content()}
+                onChange={setContent}
+                showLineNumbers={showLineNumbers()}
+                font={editorFont()}
+                ref={initTextcomplete}
+                placeholder="# Heading
 
 Write your thoughts...
 
-Link to other notes with [[Title]]" />
-              </div>
+Link to other notes with [[Title]]"
+                class="bg-slate-800 min-h-[400px]" />
             </div>
           </Show>
 
diff --git a/web/src/components/notes/MarkdownEditor.tsx b/web/src/components/notes/MarkdownEditor.tsx
new file mode 100644
index 0000000..77be171
--- /dev/null
+++ b/web/src/components/notes/MarkdownEditor.tsx
@@ -0,0 +1,220 @@
+import type { EditorFont } from "$components/NoteEditor";
+import { type BundledTheme, codeToHtml } from "shiki";
+import { type Component, createEffect, createSignal, For, onCleanup, onMount, Show } from "solid-js";
+
+export type MarkdownEditorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  showLineNumbers?: boolean;
+  font?: EditorFont;
+  theme?: BundledTheme;
+  class?: string;
+  /** Ref callback to expose insertAtCursor method */
+  ref?: (api: MarkdownEditorAPI) => void;
+};
+
+export type MarkdownEditorAPI = {
+  insertAtCursor: (before: string, after?: string) => void;
+  focus: () => void;
+  getTextarea: () => HTMLTextAreaElement | undefined;
+  insertTab: () => void;
+};
+
+function escapeHtml(text: string): string {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(
+    /'/g,
+    "&#039;",
+  );
+}
+
+function getFontFamily(font: EditorFont | undefined): string {
+  switch (font) {
+    case "neon":
+      return "Monaspace Neon, monospace";
+    case "argon":
+      return "Monaspace Argon, monospace";
+    case "krypton":
+      return "Monaspace Krypton, monospace";
+    case "radon":
+      return "Monaspace Radon, monospace";
+    case "xenon":
+      return "Monaspace Xenon, monospace";
+    case "google":
+      return "Google Sans Code, monospace";
+    default:
+      return "JetBrains Mono, monospace";
+  }
+}
+
+/**
+ * A markdown editor component with live syntax highlighting.
+ *
+ * Uses a layered approach: hidden textarea for input + visible div with highlighted HTML overlay.
+ * Handles IME composition events to prevent disruption during CJK input.
+ */
+export const MarkdownEditor: Component<MarkdownEditorProps> = (props) => {
+  let textareaRef: HTMLTextAreaElement | undefined;
+  let overlayRef: HTMLDivElement | undefined;
+  let containerRef: HTMLDivElement | undefined;
+
+  const [highlightedHtml, setHighlightedHtml] = createSignal("");
+  const [isComposing, setIsComposing] = createSignal(false);
+  const [currentLine, setCurrentLine] = createSignal(1);
+
+  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+  const updateHighlight = async (text: string) => {
+    if (isComposing()) return;
+
+    try {
+      const textToHighlight = text || " ";
+      const html = await codeToHtml(textToHighlight, { lang: "markdown", theme: props.theme ?? "vitesse-dark" });
+      setHighlightedHtml(html);
+    } catch (e) {
+      console.error("Highlight error:", e);
+      setHighlightedHtml(`<pre><code>${escapeHtml(text)}</code></pre>`);
+    }
+  };
+
+  const debouncedHighlight = (text: string) => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => updateHighlight(text), 50);
+  };
+
+  const syncScroll = () => {
+    if (textareaRef && overlayRef) {
+      overlayRef.scrollTop = textareaRef.scrollTop;
+      overlayRef.scrollLeft = textareaRef.scrollLeft;
+    }
+  };
+
+  const handleCompositionStart = () => {
+    setIsComposing(true);
+  };
+
+  const handleCompositionEnd = () => {
+    setIsComposing(false);
+    debouncedHighlight(props.value);
+  };
+
+  const handleInput = (e: InputEvent) => {
+    const target = e.target as HTMLTextAreaElement;
+    props.onChange(target.value);
+    updateCurrentLine(target);
+    if (!isComposing()) {
+      debouncedHighlight(target.value);
+    }
+  };
+
+  const updateCurrentLine = (textarea: HTMLTextAreaElement) => {
+    const text = textarea.value.substring(0, textarea.selectionStart);
+    const line = text.split("\n").length;
+    setCurrentLine(line);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      insertTab();
+    }
+  };
+
+  const handleSelect = () => {
+    if (textareaRef) {
+      updateCurrentLine(textareaRef);
+    }
+  };
+
+  const insertTab = () => {
+    insertAtCursor("  "); // 2-space soft tab
+  };
+
+  const insertAtCursor = (before: string, after: string = "") => {
+    if (!textareaRef) return;
+
+    const start = textareaRef.selectionStart;
+    const end = textareaRef.selectionEnd;
+    const text = props.value;
+    const selectedText = text.substring(start, end);
+    const newText = text.substring(0, start) + before + selectedText + after + text.substring(end);
+
+    props.onChange(newText);
+
+    setTimeout(() => {
+      if (textareaRef) {
+        textareaRef.focus();
+        const newCursorPos = start + before.length + selectedText.length;
+        textareaRef.setSelectionRange(newCursorPos, newCursorPos);
+      }
+    }, 0);
+  };
+
+  onMount(() => {
+    if (props.ref) {
+      props.ref({ insertAtCursor, focus: () => textareaRef?.focus(), getTextarea: () => textareaRef, insertTab });
+    }
+
+    updateHighlight(props.value);
+  });
+
+  onCleanup(() => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+  });
+
+  createEffect(() => {
+    const value = props.value;
+    if (!isComposing()) {
+      debouncedHighlight(value);
+    }
+  });
+
+  const lineNumbers = () => Array.from({ length: Math.max(props.value.split("\n").length, 1) }, (_, i) => i + 1);
+  const fontFamily = () => getFontFamily(props.font);
+
+  return (
+    <div ref={containerRef} class={`relative overflow-hidden ${props.class ?? ""}`} style={{ "min-height": "400px" }}>
+      <div class="flex h-full">
+        <Show when={props.showLineNumbers !== false}>
+          <div
+            class="bg-slate-900 border-r border-slate-700 text-slate-600 text-right px-2 py-3 select-none text-sm leading-relaxed shrink-0"
+            style={{ "font-family": fontFamily() }}
+            aria-hidden="true">
+            <For each={lineNumbers()}>
+              {(num) => <div class={num === currentLine() ? "text-blue-400" : ""}>{num}</div>}
+            </For>
+          </div>
+        </Show>
+
+        <div class="relative flex-1 min-h-full">
+          <div
+            ref={overlayRef}
+            class="absolute inset-0 p-3 text-sm leading-relaxed overflow-hidden pointer-events-none whitespace-pre-wrap break-word"
+            style={{ "font-family": fontFamily() }}>
+            {/* eslint-disable-next-line solid/no-innerhtml */}
+            <div class="shiki-editor-highlight" innerHTML={highlightedHtml()} />
+          </div>
+
+          <textarea
+            ref={textareaRef}
+            value={props.value}
+            onInput={handleInput}
+            onScroll={syncScroll}
+            onKeyDown={handleKeyDown}
+            onSelect={handleSelect}
+            onClick={handleSelect}
+            onCompositionStart={handleCompositionStart}
+            onCompositionEnd={handleCompositionEnd}
+            placeholder={props.placeholder}
+            aria-label="Markdown editor"
+            aria-multiline="true"
+            class="absolute inset-0 w-full h-full p-3 text-sm leading-relaxed resize-none focus:outline-none bg-transparent text-transparent caret-white selection:bg-blue-500/30"
+            style={{ "font-family": fontFamily(), "white-space": "pre-wrap", "word-break": "break-word" }}
+            spellcheck={false} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MarkdownEditor;
diff --git a/web/src/components/notes/tests/MarkdownEditor.test.tsx b/web/src/components/notes/tests/MarkdownEditor.test.tsx
new file mode 100644
index 0000000..0ed0591
--- /dev/null
+++ b/web/src/components/notes/tests/MarkdownEditor.test.tsx
@@ -0,0 +1,414 @@
+import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MarkdownEditor, type MarkdownEditorAPI } from "../MarkdownEditor";
+
+vi.mock("shiki", () => ({ codeToHtml: vi.fn(async (code: string) => `<pre><code>${code}</code></pre>`) }));
+
+describe("MarkdownEditor", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  describe("Basic Rendering", () => {
+    it("renders editor with initial value", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="# Hello" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      expect(textarea).toBeInTheDocument();
+      expect(textarea.value).toBe("# Hello");
+    });
+
+    it("renders placeholder when provided", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="" onChange={onChange} placeholder="Write here..." />);
+
+      const textarea = screen.getByPlaceholderText("Write here...");
+      expect(textarea).toBeInTheDocument();
+    });
+
+    it("renders line numbers by default", () => {
+      const [value, setValue] = createSignal("line1\nline2\nline3");
+      render(() => <MarkdownEditor value={value()} onChange={setValue} />);
+
+      expect(screen.getByText("1")).toBeInTheDocument();
+      expect(screen.getByText("2")).toBeInTheDocument();
+      expect(screen.getByText("3")).toBeInTheDocument();
+    });
+
+    it("hides line numbers when showLineNumbers is false", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="line1\nline2" onChange={onChange} showLineNumbers={false} />);
+
+      expect(screen.queryByText("1")).not.toBeInTheDocument();
+      expect(screen.queryByText("2")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Input Handling", () => {
+    it("calls onChange when user types", async () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox");
+      fireEvent.input(textarea, { target: { value: "new text" } });
+
+      expect(onChange).toHaveBeenCalledWith("new text");
+    });
+
+    it("updates value when controlled externally", () => {
+      const [value, setValue] = createSignal("initial");
+      render(() => <MarkdownEditor value={value()} onChange={setValue} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      expect(textarea.value).toBe("initial");
+
+      setValue("updated");
+      expect(textarea.value).toBe("updated");
+    });
+  });
+
+  describe("Cursor Positioning", () => {
+    it("maintains selectionStart and selectionEnd on textarea", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="Hello World" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      textarea.setSelectionRange(0, 5);
+
+      expect(textarea.selectionStart).toBe(0);
+      expect(textarea.selectionEnd).toBe(5);
+    });
+
+    it("preserves cursor position when onChange updates value", async () => {
+      const onChange = vi.fn();
+
+      render(() => <MarkdownEditor value="Hello" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      textarea.focus();
+      textarea.setSelectionRange(5, 5);
+      fireEvent.input(textarea, { target: { value: "Hello!" } });
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it("selection range preserved during typing", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="ABC" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      textarea.setSelectionRange(0, 3);
+
+      expect(textarea.selectionStart).toBe(0);
+      expect(textarea.selectionEnd).toBe(3);
+    });
+  });
+
+  describe("IME Composition Handling", () => {
+    let editorApi: MarkdownEditorAPI | undefined;
+
+    beforeEach(() => {
+      editorApi = undefined;
+    });
+
+    it("blocks highlight updates during composition", async () => {
+      const onChange = vi.fn();
+      render(() => (
+        <MarkdownEditor
+          value=""
+          onChange={onChange}
+          ref={(api) => {
+            editorApi = api;
+            void editorApi;
+          }} />
+      ));
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      fireEvent.compositionStart(textarea);
+      fireEvent.input(textarea, { target: { value: "中" } });
+      expect(onChange).toHaveBeenCalledWith("中");
+    });
+
+    it("triggers highlight after compositionend", async () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      fireEvent.compositionStart(textarea);
+      fireEvent.input(textarea, { target: { value: "日本語" } });
+      fireEvent.compositionEnd(textarea);
+      expect(onChange).toHaveBeenCalledWith("日本語");
+    });
+
+    it("cursor position stable during IME input", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="prefix " onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      textarea.setSelectionRange(7, 7);
+      fireEvent.compositionStart(textarea);
+      expect(textarea.selectionStart).toBe(7);
+    });
+  });
+
+  describe("Toolbar Integration via API", () => {
+    let editorApi: MarkdownEditorAPI | undefined;
+
+    beforeEach(() => {
+      editorApi = undefined;
+    });
+
+    it("exposes insertAtCursor via ref callback", () => {
+      const onChange = vi.fn();
+      render(() => (
+        <MarkdownEditor
+          value="Hello World"
+          onChange={onChange}
+          ref={(api) => {
+            editorApi = api;
+          }} />
+      ));
+
+      expect(editorApi).toBeDefined();
+      expect(typeof editorApi?.insertAtCursor).toBe("function");
+    });
+
+    it("insertAtCursor inserts text at cursor position", async () => {
+      let currentValue = "Hello World";
+      const onChange = (val: string) => {
+        currentValue = val;
+      };
+
+      render(() => (
+        <MarkdownEditor
+          value={currentValue}
+          onChange={onChange}
+          ref={(api) => {
+            editorApi = api;
+          }} />
+      ));
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      textarea.focus();
+      textarea.setSelectionRange(6, 6);
+      editorApi?.insertAtCursor("**", "**");
+      expect(currentValue).toBe("Hello ****World");
+    });
+
+    it("insertAtCursor wraps selected text", async () => {
+      let currentValue = "Hello World";
+      const onChange = (val: string) => {
+        currentValue = val;
+      };
+
+      render(() => (
+        <MarkdownEditor
+          value={currentValue}
+          onChange={onChange}
+          ref={(api) => {
+            editorApi = api;
+          }} />
+      ));
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      textarea.focus();
+      textarea.setSelectionRange(6, 11);
+      editorApi?.insertAtCursor("**", "**");
+      expect(currentValue).toBe("Hello **World**");
+    });
+
+    it("focus method focuses the textarea", () => {
+      const onChange = vi.fn();
+      render(() => (
+        <MarkdownEditor
+          value=""
+          onChange={onChange}
+          ref={(api) => {
+            editorApi = api;
+          }} />
+      ));
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      expect(document.activeElement).not.toBe(textarea);
+
+      editorApi?.focus();
+      expect(document.activeElement).toBe(textarea);
+    });
+
+    it("getTextarea returns the textarea element", () => {
+      const onChange = vi.fn();
+      render(() => (
+        <MarkdownEditor
+          value=""
+          onChange={onChange}
+          ref={(api) => {
+            editorApi = api;
+          }} />
+      ));
+
+      const textarea = screen.getByRole("textbox");
+      const apiTextarea = editorApi?.getTextarea();
+
+      expect(apiTextarea).toBe(textarea);
+    });
+  });
+
+  describe("Line Numbers", () => {
+    it("updates line count when text changes", async () => {
+      const [value, setValue] = createSignal("line1");
+      render(() => <MarkdownEditor value={value()} onChange={setValue} />);
+
+      expect(screen.getByText("1")).toBeInTheDocument();
+      expect(screen.queryByText("2")).not.toBeInTheDocument();
+
+      setValue("line1\nline2");
+
+      expect(screen.getByText("1")).toBeInTheDocument();
+      expect(screen.getByText("2")).toBeInTheDocument();
+    });
+
+    it("shows at least one line number for empty content", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="" onChange={onChange} />);
+      expect(screen.getByText("1")).toBeInTheDocument();
+    });
+  });
+
+  describe("Font Selection", () => {
+    it("applies JetBrains Mono font by default", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="test" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      expect(textarea.style.fontFamily).toContain("JetBrains Mono");
+    });
+
+    it("applies custom font when specified", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="test" onChange={onChange} font="neon" />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      expect(textarea.style.fontFamily).toContain("Monaspace Neon");
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("Tab key inserts 2-space soft tab", () => {
+      let currentValue = "Hello";
+      const onChange = (val: string) => {
+        currentValue = val;
+      };
+
+      render(() => <MarkdownEditor value={currentValue} onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      textarea.focus();
+      textarea.setSelectionRange(5, 5);
+
+      fireEvent.keyDown(textarea, { key: "Tab" });
+
+      expect(currentValue).toBe("Hello  ");
+    });
+
+    it("Tab key is prevented from default behavior", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="test" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox");
+      const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+      const preventDefaultSpy = vi.spyOn(event, "preventDefault");
+
+      textarea.dispatchEvent(event);
+
+      expect(preventDefaultSpy).toHaveBeenCalled();
+    });
+
+    it("paste event triggers onChange with pasted content", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="Hello " onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+      textarea.focus();
+      textarea.setSelectionRange(6, 6);
+
+      fireEvent.input(textarea, { target: { value: "Hello World" } });
+      expect(onChange).toHaveBeenCalledWith("Hello World");
+    });
+
+    it("handles rapid typing without crashing", async () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox");
+
+      for (let i = 0; i < 10; i++) {
+        fireEvent.input(textarea, { target: { value: "a".repeat(i + 1) } });
+      }
+
+      expect(onChange).toHaveBeenCalledTimes(10);
+    });
+  });
+
+  describe("Current Line Highlighting", () => {
+    it("highlights line 1 by default", () => {
+      const [value, setValue] = createSignal("line1\nline2\nline3");
+      render(() => <MarkdownEditor value={value()} onChange={setValue} />);
+
+      const line1 = screen.getByText("1");
+      expect(line1.className).toContain("text-blue-400");
+
+      const line2 = screen.getByText("2");
+      expect(line2.className).not.toContain("text-blue-400");
+    });
+
+    it("updates highlight when cursor moves to different line", () => {
+      const [value, setValue] = createSignal("line1\nline2\nline3");
+      render(() => <MarkdownEditor value={value()} onChange={setValue} />);
+
+      const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+
+      textarea.focus();
+      textarea.setSelectionRange(6, 6);
+      fireEvent.click(textarea);
+      const line2 = screen.getByText("2");
+      expect(line2.className).toContain("text-blue-400");
+
+      const line1 = screen.getByText("1");
+      expect(line1.className).not.toContain("text-blue-400");
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("has aria-label on textarea", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="test" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox");
+      expect(textarea).toHaveAttribute("aria-label", "Markdown editor");
+    });
+
+    it("has aria-multiline on textarea", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="test" onChange={onChange} />);
+
+      const textarea = screen.getByRole("textbox");
+      expect(textarea).toHaveAttribute("aria-multiline", "true");
+    });
+
+    it("line numbers are aria-hidden", () => {
+      const onChange = vi.fn();
+      render(() => <MarkdownEditor value="line1\nline2" onChange={onChange} />);
+
+      const lineContainer = screen.getByText("1").parentElement;
+      expect(lineContainer).toHaveAttribute("aria-hidden", "true");
+    });
+  });
+});
diff --git a/web/src/index.css b/web/src/index.css
index 22dcb5b..bca4535 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -237,3 +237,90 @@ button {
     color: #fbbf24;
     text-decoration: line-through;
 }
+
+/* Prose styling for rendered markdown */
+.prose h1 {
+    @apply text-3xl font-bold mb-4 mt-8 text-white;
+}
+
+.prose h2 {
+    @apply text-2xl font-semibold mb-3 mt-6 text-white;
+}
+
+.prose h3 {
+    @apply text-xl font-semibold mb-2 mt-4 text-white;
+}
+
+.prose h4 {
+    @apply text-lg font-semibold mb-2 mt-3 text-white;
+}
+
+.prose h5 {
+    @apply text-base font-semibold mb-1 mt-2 text-white;
+}
+
+.prose h6 {
+    @apply text-sm font-semibold mb-1 mt-2 text-slate-300;
+}
+
+.prose p {
+    @apply mb-4 leading-relaxed text-slate-300;
+}
+
+.prose a:not(.wikilink) {
+    @apply text-blue-400 hover:text-blue-300 underline;
+}
+
+.prose code:not(pre code) {
+    @apply bg-slate-700 px-1.5 py-0.5 rounded text-sm text-emerald-400;
+}
+
+.prose pre {
+    @apply bg-slate-800 rounded-lg p-4 overflow-x-auto my-4;
+}
+
+.prose blockquote {
+    @apply border-l-4 border-blue-500 pl-4 italic text-slate-400 my-4;
+}
+
+.prose ul {
+    @apply list-disc list-inside mb-4 space-y-1 text-slate-300;
+}
+
+.prose ol {
+    @apply list-decimal list-inside mb-4 space-y-1 text-slate-300;
+}
+
+.prose li {
+    @apply leading-relaxed;
+}
+
+.prose hr {
+    @apply border-slate-600 my-6;
+}
+
+.prose strong {
+    @apply font-semibold text-white;
+}
+
+.prose em {
+    @apply italic text-slate-200;
+}
+
+/* Shiki editor highlight container styling */
+.shiki-editor-highlight {
+    @apply w-full h-full;
+}
+
+.shiki-editor-highlight pre {
+    @apply bg-transparent m-0 p-0;
+}
+
+.shiki-editor-highlight code {
+    @apply bg-transparent;
+}
+
+/* Shiki content in preview mode */
+.shiki-content pre {
+    @apply bg-slate-800 rounded-lg p-4 overflow-x-auto my-4;
+}
diff --git a/web/src/pages/NoteView.tsx b/web/src/pages/NoteView.tsx
index 202e3f8..e16e5b3 100644
--- a/web/src/pages/NoteView.tsx
+++ b/web/src/pages/NoteView.tsx
@@ -104,7 +104,9 @@ const NoteView: Component = () => {
                     {n().title || "Untitled"}
                   </h1>
                   <div class="flex items-center gap-3 text-sm text-slate-500 dark:text-slate-400">
-                    <span>Updated {new Date(n().updated_at).toLocaleDateString()}</span>
+                    <Show when={n().updated_at ?? n().created_at}>
+                      {val => <span>Updated {new Date(val()).toLocaleDateString()}</span>}
+                    </Show>
                     <Show when={n().visibility.type !== "Private"}>
                       <span class="inline-flex items-center rounded-full bg-green-50 dark:bg-green-900/30 px-2 py-0.5 text-xs font-medium text-green-700 dark:text-green-300">
                         {n().visibility.type}
-- 
2.51.2