@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/lib/html-text.ts

@@ -0,0 +1,161 @@
+const BLOCK_ELEMENTS = new Set([
+  "p",
+  "div",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "pre",
+  "blockquote",
+  "li",
+  "tr",
+  "br",
+]);
+
+interface TextNode {
+  text: string;
+  blockAncestorPath: string[];
+}
+
+export function extractTextFromHtml(html: string): string {
+  const textNodes = collectTextNodesFromHtml(html);
+  if (textNodes.length === 0) return "";
+
+  let result = "";
+  let lastBlockPath: string[] | null = null;
+
+  for (const node of textNodes) {
+    if (lastBlockPath) {
+      const lastBlock = lastBlockPath;
+      const currBlock = node.blockAncestorPath;
+
+      if (
+        lastBlock.length > 0 &&
+        currBlock.length > 0 &&
+        !isNested(lastBlock, currBlock)
+      ) {
+        if (
+          lastBlock[lastBlock.length - 1] !== currBlock[currBlock.length - 1]
+        ) {
+          result += "\n";
+        }
+      }
+    }
+
+    result += node.text;
+    lastBlockPath = node.blockAncestorPath;
+  }
+
+  return result;
+}
+
+function isNested(pathA: string[], pathB: string[]): boolean {
+  const blockA = pathA[pathA.length - 1];
+  const blockB = pathB[pathB.length - 1];
+
+  if (pathB.includes(blockA)) return true;
+  if (pathA.includes(blockB)) return true;
+  return false;
+}
+
+function collectTextNodesFromHtml(html: string): TextNode[] {
+  const nodes: TextNode[] = [];
+  const stack: { tag: string; id: string }[] = [];
+  let idCounter = 0;
+
+  const tagPattern = /<\/?([a-zA-Z][a-zA-Z0-9]*)[^>]*\/?>/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  match = tagPattern.exec(html);
+  while (match !== null) {
+    if (match.index > lastIndex) {
+      const text = decodeEntities(html.slice(lastIndex, match.index));
+      if (text) {
+        nodes.push({
+          text,
+          blockAncestorPath: getBlockAncestorPath(stack),
+        });
+      }
+    }
+
+    const fullTag = match[0];
+    const tagName = match[1].toLowerCase();
+    const isClosing = fullTag.startsWith("</");
+    const isSelfClosing = fullTag.endsWith("/>") || isVoidElement(tagName);
+
+    if (isClosing) {
+      for (let i = stack.length - 1; i >= 0; i--) {
+        if (stack[i].tag === tagName) {
+          stack.splice(i);
+          break;
+        }
+      }
+    } else if (!isSelfClosing) {
+      stack.push({ tag: tagName, id: `e${idCounter++}` });
+    }
+
+    lastIndex = match.index + fullTag.length;
+    match = tagPattern.exec(html);
+  }
+
+  if (lastIndex < html.length) {
+    const text = decodeEntities(html.slice(lastIndex));
+    if (text) {
+      nodes.push({
+        text,
+        blockAncestorPath: getBlockAncestorPath(stack),
+      });
+    }
+  }
+
+  return nodes;
+}
+
+function getBlockAncestorPath(stack: { tag: string; id: string }[]): string[] {
+  const path: string[] = [];
+  for (const entry of stack) {
+    if (BLOCK_ELEMENTS.has(entry.tag)) {
+      path.push(entry.id);
+    }
+  }
+  return path;
+}
+
+const VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+]);
+
+function isVoidElement(tag: string): boolean {
+  return VOID_ELEMENTS.has(tag);
+}
+
+function decodeEntities(text: string): string {
+  return text
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&#x27;/g, "'")
+    .replace(/&nbsp;/g, "\u00A0")
+    .replace(/&#(\d+);/g, (_, code) => String.fromCharCode(Number(code)))
+    .replace(/&#x([0-9a-fA-F]+);/g, (_, hex) =>
+      String.fromCharCode(Number.parseInt(hex, 16)),
+    );
+}

package/src/lib/i18n/en.ts

@@ -87,4 +87,38 @@ export const en: Translations = {
   // Comment badge
   "commentBadge.title": "{{count}} comment",
   "commentBadge.titlePlural": "{{count}} comments",
+
+  // Keyboard shortcuts
+  "shortcuts.title": "Keyboard Shortcuts",
+  "shortcutGroup.copy": "Copy",
+  "shortcutGroup.navigate": "Navigate",
+  "shortcutGroup.other": "Other",
+  "shortcuts.resetToDefaults": "Reset to defaults",
+  "shortcuts.enableDisable": "Enable/disable shortcut",
+  "shortcutCapture.pressKeys": "Press keys...",
+  "shortcutCapture.reserved": "{{binding}} is reserved",
+  "shortcutCapture.ariaLabel": "Press a key combination",
+  "shortcut.copyAll.label": "Copy All (AI)",
+  "shortcut.copyAll.description": "Copy all comments in AI prompt format",
+  "shortcut.copyAllRaw.label": "Copy All (Raw)",
+  "shortcut.copyAllRaw.description": "Copy all comments as raw text",
+  "shortcut.navigateNext.label": "Next Comment",
+  "shortcut.navigateNext.description": "Navigate to next comment",
+  "shortcut.navigatePrevious.label": "Previous Comment",
+  "shortcut.navigatePrevious.description": "Navigate to previous comment",
+  "shortcut.copySelectionRaw.label": "Copy Selection",
+  "shortcut.copySelectionRaw.description": "Copy selected text",
+  "shortcut.copySelectionLLM.label": "Copy Selection (LLM)",
+  "shortcut.copySelectionLLM.description":
+    "Copy selected text with context for LLM",
+  "shortcut.clearSelection.label": "Clear Selection",
+  "shortcut.clearSelection.description": "Clear text selection",
+
+  // Mermaid diagram
+  "mermaid.modalTitle": "Mermaid diagram",
+  "mermaid.viewGraph": "Graph",
+  "mermaid.viewCode": "Code",
+  "mermaid.showSource": "Show source",
+  "mermaid.showDiagram": "Show diagram",
+  "mermaid.expand": "Expand diagram",
 };

package/src/lib/i18n/ja.ts

@@ -89,4 +89,38 @@ export const ja: Translations = {
   // Comment badge
   "commentBadge.title": "{{count}}件のコメント",
   "commentBadge.titlePlural": "{{count}}件のコメント",
+
+  // Keyboard shortcuts
+  "shortcuts.title": "キーボードショートカット",
+  "shortcutGroup.copy": "コピー",
+  "shortcutGroup.navigate": "ナビゲーション",
+  "shortcutGroup.other": "その他",
+  "shortcuts.resetToDefaults": "初期設定に戻す",
+  "shortcuts.enableDisable": "ショートカットの有効/無効",
+  "shortcutCapture.pressKeys": "キーを入力...",
+  "shortcutCapture.reserved": "{{binding}} は予約されています",
+  "shortcutCapture.ariaLabel": "キーの組み合わせを入力",
+  "shortcut.copyAll.label": "全てコピー (AI)",
+  "shortcut.copyAll.description": "全コメントをAIプロンプト形式でコピー",
+  "shortcut.copyAllRaw.label": "全てコピー (テキスト)",
+  "shortcut.copyAllRaw.description": "全コメントをテキストとしてコピー",
+  "shortcut.navigateNext.label": "次のコメント",
+  "shortcut.navigateNext.description": "次のコメントに移動",
+  "shortcut.navigatePrevious.label": "前のコメント",
+  "shortcut.navigatePrevious.description": "前のコメントに移動",
+  "shortcut.copySelectionRaw.label": "選択をコピー",
+  "shortcut.copySelectionRaw.description": "選択テキストをコピー",
+  "shortcut.copySelectionLLM.label": "選択をコピー (LLM)",
+  "shortcut.copySelectionLLM.description":
+    "選択テキストをLLMコンテキスト付きでコピー",
+  "shortcut.clearSelection.label": "選択を解除",
+  "shortcut.clearSelection.description": "テキスト選択を解除",
+
+  // Mermaid diagram
+  "mermaid.modalTitle": "Mermaid ダイアグラム",
+  "mermaid.viewGraph": "図",
+  "mermaid.viewCode": "コード",
+  "mermaid.showSource": "ソースを表示",
+  "mermaid.showDiagram": "図を表示",
+  "mermaid.expand": "拡大表示",
 };

package/src/lib/i18n/types.ts

@@ -92,6 +92,39 @@ export interface Translations {
   // Comment badge
   "commentBadge.title": string;
   "commentBadge.titlePlural": string;
+
+  // Keyboard shortcuts
+  "shortcuts.title": string;
+  "shortcutGroup.copy": string;
+  "shortcutGroup.navigate": string;
+  "shortcutGroup.other": string;
+  "shortcuts.resetToDefaults": string;
+  "shortcuts.enableDisable": string;
+  "shortcutCapture.pressKeys": string;
+  "shortcutCapture.reserved": string;
+  "shortcutCapture.ariaLabel": string;
+  "shortcut.copyAll.label": string;
+  "shortcut.copyAll.description": string;
+  "shortcut.copyAllRaw.label": string;
+  "shortcut.copyAllRaw.description": string;
+  "shortcut.navigateNext.label": string;
+  "shortcut.navigateNext.description": string;
+  "shortcut.navigatePrevious.label": string;
+  "shortcut.navigatePrevious.description": string;
+  "shortcut.copySelectionRaw.label": string;
+  "shortcut.copySelectionRaw.description": string;
+  "shortcut.copySelectionLLM.label": string;
+  "shortcut.copySelectionLLM.description": string;
+  "shortcut.clearSelection.label": string;
+  "shortcut.clearSelection.description": string;
+
+  // Mermaid diagram
+  "mermaid.modalTitle": string;
+  "mermaid.viewGraph": string;
+  "mermaid.viewCode": string;
+  "mermaid.showSource": string;
+  "mermaid.showDiagram": string;
+  "mermaid.expand": string;
 }
 
 export type TranslationKey = keyof Translations;

package/src/lib/key-lock.test.ts

@@ -0,0 +1,104 @@
+import { describe, expect, it } from "vitest";
+import { createKeyLock } from "./key-lock";
+
+function deferred<T>(): {
+  promise: Promise<T>;
+  resolve: (v: T) => void;
+  reject: (e: unknown) => void;
+} {
+  let resolve!: (v: T) => void;
+  let reject!: (e: unknown) => void;
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}
+
+describe("createKeyLock", () => {
+  it("serializes operations on the same key", async () => {
+    const withLock = createKeyLock("serial");
+    const order: number[] = [];
+    const a = deferred<void>();
+    const b = deferred<void>();
+
+    const p1 = withLock("k", async () => {
+      await a.promise;
+      order.push(1);
+    });
+    const p2 = withLock("k", async () => {
+      await b.promise;
+      order.push(2);
+    });
+
+    // p2 must NOT have started yet because p1 hasn't resolved
+    b.resolve();
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(order).toEqual([]);
+
+    a.resolve();
+    await p1;
+    await p2;
+    expect(order).toEqual([1, 2]);
+  });
+
+  it("runs different keys concurrently", async () => {
+    const withLock = createKeyLock("concurrent");
+    const order: string[] = [];
+    const a = deferred<void>();
+
+    const p1 = withLock("alpha", async () => {
+      await a.promise;
+      order.push("alpha");
+    });
+    const p2 = withLock("beta", async () => {
+      order.push("beta");
+    });
+
+    await p2;
+    expect(order).toEqual(["beta"]);
+
+    a.resolve();
+    await p1;
+    expect(order).toEqual(["beta", "alpha"]);
+  });
+
+  it("survives a thrown error in a previous holder", async () => {
+    const withLock = createKeyLock("error-recovery");
+    const p1 = withLock("k", async () => {
+      throw new Error("boom");
+    });
+    await expect(p1).rejects.toThrow("boom");
+
+    const p2 = withLock("k", async () => 42);
+    await expect(p2).resolves.toBe(42);
+  });
+
+  it("preserves resolved return values", async () => {
+    const withLock = createKeyLock("return-value");
+    const v = await withLock("k", async () => "value");
+    expect(v).toBe("value");
+  });
+
+  it("namespaces are independent", async () => {
+    const a = createKeyLock("ns-a");
+    const b = createKeyLock("ns-b");
+    const order: string[] = [];
+    const block = deferred<void>();
+
+    const pa = a("shared-key", async () => {
+      await block.promise;
+      order.push("a");
+    });
+    const pb = b("shared-key", async () => {
+      order.push("b");
+    });
+
+    await pb;
+    expect(order).toEqual(["b"]);
+    block.resolve();
+    await pa;
+    expect(order).toEqual(["b", "a"]);
+  });
+});

package/src/lib/key-lock.ts

@@ -0,0 +1,23 @@
+const locks = new Map<string, Map<string, Promise<unknown>>>();
+
+function namespace(name: string): Map<string, Promise<unknown>> {
+  let n = locks.get(name);
+  if (!n) {
+    n = new Map();
+    locks.set(name, n);
+  }
+  return n;
+}
+
+export function createKeyLock(name: string) {
+  const map = namespace(name);
+  return function withLock<T>(key: string, fn: () => Promise<T>): Promise<T> {
+    const prev = map.get(key) ?? Promise.resolve();
+    const next = prev.catch(() => {}).then(fn);
+    map.set(
+      key,
+      next.catch(() => {}),
+    );
+    return next;
+  };
+}

package/src/lib/margin-layout.bench.ts

@@ -0,0 +1,61 @@
+import { bench, describe } from "vitest";
+import {
+  COMMENTS_1,
+  COMMENTS_10,
+  COMMENTS_50,
+} from "./__fixtures__/bench-data";
+import { resolveMarginNotePositions } from "./margin-layout";
+
+function makeHighlightPositions(
+  commentIds: string[],
+  spacing: number,
+): Record<string, number> {
+  const positions: Record<string, number> = {};
+  for (let i = 0; i < commentIds.length; i++) {
+    positions[commentIds[i]] = i * spacing;
+  }
+  return positions;
+}
+
+describe("resolveMarginNotePositions — well-spaced", () => {
+  bench("1 comment", () => {
+    const ids = COMMENTS_1.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 300);
+    resolveMarginNotePositions(ids, positions, undefined);
+  });
+
+  bench("10 comments", () => {
+    const ids = COMMENTS_10.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 300);
+    resolveMarginNotePositions(ids, positions, undefined);
+  });
+
+  bench("50 comments", () => {
+    const ids = COMMENTS_50.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 300);
+    resolveMarginNotePositions(ids, positions, undefined);
+  });
+});
+
+describe("resolveMarginNotePositions — clustered", () => {
+  bench("10 comments, 10px apart", () => {
+    const ids = COMMENTS_10.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 10);
+    resolveMarginNotePositions(ids, positions, undefined);
+  });
+
+  bench("50 comments, 10px apart", () => {
+    const ids = COMMENTS_50.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 10);
+    resolveMarginNotePositions(ids, positions, undefined);
+  });
+});
+
+describe("resolveMarginNotePositions — with input zone", () => {
+  bench("50 comments, input at middle", () => {
+    const ids = COMMENTS_50.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 100);
+    const midpoint = 25 * 100;
+    resolveMarginNotePositions(ids, positions, midpoint);
+  });
+});

package/src/lib/margin-layout.ts

@@ -6,16 +6,11 @@ interface NotePosition {
   top: number;
 }
 
-/**
- * Resolves margin note positions to avoid overlaps.
- * Pass 1: push notes above input zone UP. Pass 2: push notes at/below DOWN.
- */
 export function resolveMarginNotePositions(
   commentIds: string[],
   highlightPositions: Record<string, number>,
   pendingSelectionTop: number | undefined,
 ): Map<string, number> {
-  // Only include comments with known positions (avoids jolt to position 0)
   const positions: NotePosition[] = commentIds
     .filter((id) => id in highlightPositions)
     .map((id) => ({
@@ -51,7 +46,6 @@ export function resolveMarginNotePositions(
       ? pendingSelectionTop + COMMENT_INPUT_HEIGHT_PX
       : Infinity;
 
-  // Pass 1: push notes above input UP (bottom to top)
   for (let i = positions.length - 2; i >= 0; i--) {
     const curr = positions[i];
     const next = positions[i + 1];
@@ -61,7 +55,6 @@ export function resolveMarginNotePositions(
     }
   }
 
-  // Pass 2: push notes at/below input DOWN (top to bottom)
   for (let i = 1; i < positions.length; i++) {
     const prev = positions[i - 1];
     const curr = positions[i];

package/src/lib/markdown-renderer.test.ts

@@ -0,0 +1,154 @@
+import { JSDOM } from "jsdom";
+import { describe, expect, it } from "vitest";
+import { renderMarkdown } from "./markdown-renderer";
+
+const SAMPLE_MARKDOWN = `# Hello World
+
+This is a paragraph with **bold** and *italic* text.
+
+## Code Example
+
+\`\`\`typescript
+function hello() {
+  return "world";
+}
+\`\`\`
+
+Some text after the code block.
+
+- Item 1
+- Item 2
+- Item 3
+
+### Table
+
+| Name | Value |
+|------|-------|
+| foo  | bar   |
+| baz  | qux   |
+
+> A blockquote with some text.
+
+Final paragraph.
+`;
+
+const SAMPLE_WITH_MERMAID = `# Diagrams
+
+\`\`\`mermaid
+graph TD
+  A --> B
+\`\`\`
+
+After mermaid.
+`;
+
+describe("renderMarkdown", () => {
+  it("renders basic markdown to HTML", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain("<h1");
+    expect(html).toContain("Hello World");
+    expect(html).toContain("<strong>bold</strong>");
+    expect(html).toContain("<em>italic</em>");
+    expect(html).toContain("<h2");
+    expect(html).toContain("Code Example");
+    expect(html).toContain("<h3");
+    expect(html).toContain("Table");
+  });
+
+  it("extracts headings with correct IDs", async () => {
+    const { headings } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(headings).toEqual([
+      { id: "hello-world", text: "Hello World", level: 1 },
+      { id: "code-example", text: "Code Example", level: 2 },
+      { id: "table", text: "Table", level: 3 },
+    ]);
+  });
+
+  it("injects heading IDs into HTML", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain('id="hello-world"');
+    expect(html).toContain('id="code-example"');
+    expect(html).toContain('id="table"');
+  });
+
+  it("syntax-highlights code blocks with shiki", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain("shiki");
+    expect(html).toContain("hello");
+    expect(html).toContain("world");
+  });
+
+  it("leaves mermaid blocks for client-side hydration", async () => {
+    const { html } = await renderMarkdown(SAMPLE_WITH_MERMAID);
+
+    expect(html).toContain('class="language-mermaid"');
+    expect(html).toContain("graph TD");
+    expect(html).not.toMatch(/class="shiki[^"]*"[^>]*>.*graph TD/s);
+  });
+
+  it("renders GFM tables", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain("<table>");
+    expect(html).toContain("<th>");
+    expect(html).toContain("foo");
+  });
+
+  it("renders lists", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain("<ul>");
+    expect(html).toContain("<li>");
+    expect(html).toContain("Item 1");
+  });
+
+  it("renders blockquotes", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain("<blockquote>");
+    expect(html).toContain("A blockquote with some text.");
+  });
+
+  it("handles duplicate headings", async () => {
+    const md = `## Section\n\n## Section\n\n## Section\n`;
+    const { headings } = await renderMarkdown(md);
+
+    expect(headings).toEqual([
+      { id: "section", text: "Section", level: 2 },
+      { id: "section-1", text: "Section", level: 2 },
+      { id: "section-2", text: "Section", level: 2 },
+    ]);
+  });
+});
+
+describe("text offset conformance", () => {
+  it("rendered HTML has proper block structure for text offset extraction", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    const dom = new JSDOM(html);
+    const doc = dom.window.document;
+
+    const paragraphs = doc.querySelectorAll("p");
+    expect(paragraphs.length).toBeGreaterThan(0);
+
+    const h1 = doc.querySelector("h1");
+    expect(h1?.id).toBe("hello-world");
+    expect(h1?.textContent).toBe("Hello World");
+
+    const pres = doc.querySelectorAll("pre");
+    expect(pres.length).toBeGreaterThan(0);
+
+    const lis = doc.querySelectorAll("li");
+    expect(lis.length).toBe(3);
+
+    const trs = doc.querySelectorAll("tr");
+    expect(trs.length).toBeGreaterThan(0);
+
+    const blockquote = doc.querySelector("blockquote");
+    expect(blockquote).not.toBeNull();
+  });
+});