@peaske7/readit 0.2.0 → 0.2.1

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,30 @@ 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",
 };

package/src/lib/i18n/ja.ts

@@ -89,4 +89,30 @@ 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": "テキスト選択を解除",
 };

package/src/lib/i18n/types.ts

@@ -92,6 +92,31 @@ 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;
 }
 
 export type TranslationKey = keyof Translations;

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();
+  });
+});

package/src/lib/markdown-renderer.ts

@@ -0,0 +1,177 @@
+import MarkdownIt from "markdown-it";
+import type { BundledLanguage, BundledTheme, HighlighterGeneric } from "shiki";
+import { type Heading, parseMarkdownHeadings } from "./headings";
+import { renderMermaidBlocks } from "./mermaid-renderer";
+
+const SHIKI_LANGUAGES: BundledLanguage[] = [
+  "bash",
+  "css",
+  "diff",
+  "go",
+  "graphql",
+  "javascript",
+  "json",
+  "jsx",
+  "markdown",
+  "python",
+  "rust",
+  "sql",
+  "tsx",
+  "typescript",
+  "yaml",
+];
+
+const SHIKI_THEME: BundledTheme = "one-dark-pro";
+
+let shikiInstance: HighlighterGeneric<BundledLanguage, BundledTheme> | null =
+  null;
+let shikiPromise: Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> | null = null;
+
+export async function getShiki(): Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> {
+  if (shikiInstance) return shikiInstance;
+  if (shikiPromise) return shikiPromise;
+
+  shikiPromise = import("shiki").then(async ({ createHighlighter }) => {
+    const highlighter = await createHighlighter({
+      themes: [SHIKI_THEME],
+      langs: SHIKI_LANGUAGES,
+    });
+    shikiInstance = highlighter;
+    return highlighter;
+  });
+
+  return shikiPromise;
+}
+
+function createMarkdownRenderer(
+  shiki: HighlighterGeneric<BundledLanguage, BundledTheme>,
+): MarkdownIt {
+  const md = new MarkdownIt({
+    html: true, // Allow raw HTML (matches rehype-raw behavior)
+    linkify: true,
+    typographer: false,
+    highlight(code: string, lang: string): string {
+      if (lang === "mermaid") {
+        return `<pre><code class="language-mermaid">${md.utils.escapeHtml(code)}</code></pre>`;
+      }
+
+      const language = normalizeLanguage(lang);
+
+      if (language && shiki.getLoadedLanguages().includes(language)) {
+        return shiki.codeToHtml(code, {
+          lang: language,
+          theme: SHIKI_THEME,
+        });
+      }
+
+      return `<pre class="shiki"><code>${md.utils.escapeHtml(code)}</code></pre>`;
+    },
+  });
+
+  return md;
+}
+
+function normalizeLanguage(lang: string): BundledLanguage | undefined {
+  const aliases: Record<string, BundledLanguage> = {
+    sh: "bash",
+    shell: "bash",
+    js: "javascript",
+    ts: "typescript",
+    py: "python",
+    rs: "rust",
+    yml: "yaml",
+    md: "markdown",
+  };
+  const normalized = lang.toLowerCase().trim();
+  if (SHIKI_LANGUAGES.includes(normalized as BundledLanguage)) {
+    return normalized as BundledLanguage;
+  }
+  return aliases[normalized];
+}
+
+function injectHeadingIds(html: string, headings: Heading[]): string {
+  let headingIdx = 0;
+
+  return html.replace(
+    /<(h[1-6])([^>]*)>([\s\S]*?)<\/\1>/gi,
+    (match, tag: string, attrs: string, content: string) => {
+      if (headingIdx >= headings.length) return match;
+
+      const heading = headings[headingIdx];
+      headingIdx++;
+
+      if (/\bid\s*=/.test(attrs)) return match;
+
+      return `<${tag} id="${heading.id}"${attrs}>${content}</${tag}>`;
+    },
+  );
+}
+
+interface RenderResult {
+  html: string;
+  headings: Heading[];
+}
+
+const MERMAID_BLOCK_RE =
+  /<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g;
+
+function unescapeHtml(str: string): string {
+  return str
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"');
+}
+
+async function replaceMermaidBlocks(html: string): Promise<string> {
+  MERMAID_BLOCK_RE.lastIndex = 0;
+  const matches: { fullMatch: string; code: string; index: number }[] = [];
+
+  let match: RegExpExecArray | null = MERMAID_BLOCK_RE.exec(html);
+  while (match !== null) {
+    matches.push({
+      fullMatch: match[0],
+      code: unescapeHtml(match[1]),
+      index: match.index,
+    });
+    match = MERMAID_BLOCK_RE.exec(html);
+  }
+
+  if (matches.length === 0) return html;
+
+  const codes = matches.map((m) => m.code);
+  const svgs = await renderMermaidBlocks(codes);
+
+  // Replace in reverse order to preserve string indices
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const svg = svgs[i];
+    if (svg !== null) {
+      const { fullMatch, index } = matches[i];
+      const replacement = `<div class="mermaid-container">${svg}</div>`;
+      html =
+        html.slice(0, index) +
+        replacement +
+        html.slice(index + fullMatch.length);
+    }
+  }
+
+  return html;
+}
+
+export async function renderMarkdown(content: string): Promise<RenderResult> {
+  const shiki = await getShiki();
+  const md = createMarkdownRenderer(shiki);
+
+  const headings = parseMarkdownHeadings(content);
+
+  let html = md.render(content);
+
+  html = injectHeadingIds(html, headings);
+  html = await replaceMermaidBlocks(html);
+
+  return { html, headings };
+}