md-redline 0.1.0

package/src/components/rawView.test.ts

@@ -0,0 +1,291 @@
+import { describe, it, expect } from 'vitest';
+import {
+  buildHighlightedHtml,
+  escapeHtml,
+  extractRawHeadings,
+  splitHighlightedHtml,
+} from './RawView';
+
+describe('escapeHtml', () => {
+  it('escapes &, <, >, "', () => {
+    expect(escapeHtml('a & b < c > d "e"')).toBe('a &amp; b &lt; c &gt; d &quot;e&quot;');
+  });
+
+  it('returns empty string unchanged', () => {
+    expect(escapeHtml('')).toBe('');
+  });
+
+  it('does not double-escape', () => {
+    expect(escapeHtml('&amp;')).toBe('&amp;amp;');
+  });
+});
+
+describe('buildHighlightedHtml', () => {
+  describe('plain text', () => {
+    it('returns escaped plain text when no syntax matches', () => {
+      const html = buildHighlightedHtml('Just some plain text.');
+      expect(html).toBe('Just some plain text.');
+    });
+
+    it('preserves empty lines', () => {
+      const html = buildHighlightedHtml('line1\n\nline3');
+      expect(html).toBe('line1\n\nline3');
+    });
+  });
+
+  describe('headings', () => {
+    it('highlights ATX headings', () => {
+      const html = buildHighlightedHtml('# Hello World');
+      expect(html).toContain('class="raw-heading"');
+      expect(html).toContain('# Hello World');
+    });
+
+    it('highlights h2-h6', () => {
+      for (const prefix of ['##', '###', '####', '#####', '######']) {
+        const html = buildHighlightedHtml(`${prefix} Heading`);
+        expect(html).toContain('class="raw-heading"');
+      }
+    });
+
+    it('does not highlight # without space', () => {
+      const html = buildHighlightedHtml('#nospace');
+      expect(html).not.toContain('raw-heading');
+    });
+  });
+
+  describe('bold and italic', () => {
+    it('highlights bold text', () => {
+      const html = buildHighlightedHtml('**bold text**');
+      expect(html).toContain('class="raw-bold"');
+      expect(html).toContain('**bold text**');
+    });
+
+    it('highlights italic text', () => {
+      const html = buildHighlightedHtml('*italic text*');
+      expect(html).toContain('class="raw-italic"');
+    });
+
+    it('does not highlight bold as italic', () => {
+      const html = buildHighlightedHtml('**bold** *italic*');
+      // Bold should be matched, not italic within bold
+      expect(html).toContain('raw-bold');
+      expect(html).toContain('raw-italic');
+    });
+  });
+
+  describe('inline code', () => {
+    it('highlights inline code', () => {
+      const html = buildHighlightedHtml('Use `console.log()` here');
+      expect(html).toContain('class="raw-inline-code"');
+      expect(html).toContain('`console.log()`');
+    });
+  });
+
+  describe('links', () => {
+    it('highlights markdown links', () => {
+      const html = buildHighlightedHtml('[click here](https://example.com)');
+      expect(html).toContain('class="raw-link"');
+    });
+  });
+
+  describe('blockquotes', () => {
+    it('highlights blockquote lines', () => {
+      const html = buildHighlightedHtml('> This is a quote');
+      expect(html).toContain('class="raw-blockquote"');
+    });
+  });
+
+  describe('horizontal rules', () => {
+    it('highlights --- as HR', () => {
+      const html = buildHighlightedHtml('---');
+      expect(html).toContain('class="raw-hr"');
+    });
+
+    it('highlights ---- (4+ dashes) as HR', () => {
+      const html = buildHighlightedHtml('----');
+      expect(html).toContain('class="raw-hr"');
+    });
+
+    it('highlights *** as HR', () => {
+      const html = buildHighlightedHtml('***');
+      expect(html).toContain('class="raw-hr"');
+    });
+  });
+
+  describe('tables', () => {
+    it('highlights table rows', () => {
+      const html = buildHighlightedHtml('| A | B |\n|---|---|\n| 1 | 2 |');
+      expect(html).toContain('class="raw-table"');
+    });
+  });
+
+  describe('frontmatter', () => {
+    it('highlights YAML frontmatter at start of file', () => {
+      const html = buildHighlightedHtml('---\ntitle: Hello\n---\n# Content');
+      expect(html).toContain('class="raw-frontmatter"');
+      expect(html).toContain('class="raw-heading"');
+    });
+
+    it('does not highlight --- in middle of file as frontmatter', () => {
+      const html = buildHighlightedHtml('# Title\n\n---\n\nMore text');
+      // The --- should be an HR, not frontmatter
+      expect(html).not.toContain('raw-frontmatter');
+    });
+  });
+
+  describe('comment markers', () => {
+    const marker =
+      '<!-- @comment{"id":"abc","anchor":"hello","text":"fix this","author":"User","timestamp":"2026-01-01T00:00:00Z","replies":[]} -->';
+
+    it('highlights comment markers', () => {
+      const html = buildHighlightedHtml(`Some text ${marker}hello world`);
+      expect(html).toContain('class="raw-comment-marker"');
+    });
+
+    it('adds data-comment-id attribute', () => {
+      const html = buildHighlightedHtml(`${marker}hello`);
+      expect(html).toContain('data-comment-id="abc"');
+    });
+
+    it('handles multiline comment markers', () => {
+      // Use \\n in JSON (escaped newline) so JSON.parse succeeds — this is how the app serializes them
+      const multilineMarker =
+        '<!-- @comment{"id":"m1","anchor":"test","text":"long\\ncomment","author":"User","timestamp":"2026-01-01T00:00:00Z","replies":[]} -->';
+      const html = buildHighlightedHtml(`before ${multilineMarker}after`);
+      expect(html).toContain('data-comment-id="m1"');
+      expect(html).toContain('raw-comment-marker');
+    });
+
+    it('gives comment markers priority over bold', () => {
+      // When bold wraps around a comment marker: **<!-- @comment{...} -->text**
+      const raw = `**${marker}hello world**`;
+      const html = buildHighlightedHtml(raw);
+      // Comment marker should be highlighted, not swallowed by bold
+      expect(html).toContain('raw-comment-marker');
+      expect(html).toContain('data-comment-id="abc"');
+    });
+
+    it('gives comment markers priority over headings', () => {
+      const raw = `## ${marker}Section Title`;
+      const html = buildHighlightedHtml(raw);
+      expect(html).toContain('raw-comment-marker');
+      expect(html).toContain('data-comment-id="abc"');
+      // Heading should not overlap with the comment marker
+      expect(html).not.toContain('raw-heading');
+    });
+
+    it('handles multiple comment markers', () => {
+      const m1 =
+        '<!-- @comment{"id":"c1","anchor":"a","text":"x","author":"U","timestamp":"2026-01-01T00:00:00Z","replies":[]} -->';
+      const m2 =
+        '<!-- @comment{"id":"c2","anchor":"b","text":"y","author":"U","timestamp":"2026-01-01T00:00:00Z","replies":[]} -->';
+      const html = buildHighlightedHtml(`${m1}alpha ${m2}beta`);
+      expect(html).toContain('data-comment-id="c1"');
+      expect(html).toContain('data-comment-id="c2"');
+    });
+  });
+
+  describe('overlap resolution', () => {
+    it('first syntax match wins when two non-comment rules overlap', () => {
+      // Inline code appears before bold in rule order
+      // But if bold wraps inline code, the one that starts first wins
+      const html = buildHighlightedHtml('**bold `code` more**');
+      // Bold starts first, should capture everything
+      expect(html).toContain('raw-bold');
+    });
+
+    it('does not apply syntax highlighting inside comment markers', () => {
+      const marker =
+        '<!-- @comment{"id":"x","anchor":"# heading","text":"fix","author":"U","timestamp":"2026-01-01T00:00:00Z","replies":[]} -->';
+      const html = buildHighlightedHtml(marker);
+      // The "# heading" inside the JSON should not be highlighted as a heading
+      expect(html).not.toContain('raw-heading');
+      expect(html).toContain('raw-comment-marker');
+    });
+  });
+
+  describe('HTML escaping in output', () => {
+    it('escapes HTML entities in plain text', () => {
+      const html = buildHighlightedHtml('a < b & c > d');
+      expect(html).toContain('&lt;');
+      expect(html).toContain('&amp;');
+      expect(html).toContain('&gt;');
+    });
+
+    it('escapes HTML inside highlighted spans', () => {
+      const html = buildHighlightedHtml('## Title <script>');
+      expect(html).toContain('&lt;script&gt;');
+    });
+  });
+});
+
+describe('extractRawHeadings', () => {
+  it('extracts headings with stable slug ids and line indexes', () => {
+    const headings = extractRawHeadings('# Title\n\n## Section One\n\n## Section One\n');
+    expect(headings).toEqual([
+      { id: 'title', text: 'Title', level: 1, lineIndex: 0 },
+      { id: 'section-one', text: 'Section One', level: 2, lineIndex: 2 },
+      { id: 'section-one-1', text: 'Section One', level: 2, lineIndex: 4 },
+    ]);
+  });
+
+  it('ignores inline comment markers when matching heading lines', () => {
+    const headings = extractRawHeadings(
+      '# Intro\n\n## <!-- @comment{"id":"c1","anchor":"Heading","text":"Fix","author":"U","timestamp":"2026-01-01T00:00:00Z","replies":[]} -->Heading\n',
+    );
+    expect(headings).toEqual([
+      { id: 'intro', text: 'Intro', level: 1, lineIndex: 0 },
+      { id: 'heading', text: 'Heading', level: 2, lineIndex: 2 },
+    ]);
+  });
+});
+
+describe('splitHighlightedHtml', () => {
+  it('splits plain text into one segment per source line', () => {
+    const raw = 'line1\nline2\nline3';
+    const html = buildHighlightedHtml(raw);
+    const lines = splitHighlightedHtml(raw, html);
+    expect(lines).toHaveLength(3);
+    expect(lines[0]).toBe('line1');
+    expect(lines[1]).toBe('line2');
+    expect(lines[2]).toBe('line3');
+  });
+
+  it('handles a single line with no newlines', () => {
+    const raw = 'hello world';
+    const html = buildHighlightedHtml(raw);
+    const lines = splitHighlightedHtml(raw, html);
+    expect(lines).toHaveLength(1);
+    expect(lines[0]).toBe('hello world');
+  });
+
+  it('preserves empty lines', () => {
+    const raw = 'a\n\nb';
+    const html = buildHighlightedHtml(raw);
+    const lines = splitHighlightedHtml(raw, html);
+    expect(lines).toHaveLength(3);
+    expect(lines[0]).toBe('a');
+    expect(lines[1]).toBe('');
+    expect(lines[2]).toBe('b');
+  });
+
+  it('closes and reopens spans that cross line boundaries', () => {
+    const raw = '```mermaid\ngraph TD\n```';
+    const html = buildHighlightedHtml(raw);
+    const lines = splitHighlightedHtml(raw, html);
+    expect(lines).toHaveLength(3);
+    // Each line should have balanced tags
+    for (const line of lines) {
+      const opens = (line.match(/<span/g) ?? []).length;
+      const closes = (line.match(/<\/span>/g) ?? []).length;
+      expect(opens).toBe(closes);
+    }
+  });
+
+  it('matches source line count even with syntax-highlighted content', () => {
+    const raw = '# Title\n\n**bold** and *italic*\n\n> quote';
+    const html = buildHighlightedHtml(raw);
+    const lines = splitHighlightedHtml(raw, html);
+    expect(lines).toHaveLength(raw.split('\n').length);
+  });
+});

package/src/contexts/SettingsContext.tsx

@@ -0,0 +1,120 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+  type ReactNode,
+} from 'react';
+import {
+  type AppSettings,
+  type CommentTemplate,
+  DEFAULT_SETTINGS,
+  DEFAULT_TEMPLATES,
+  loadSettings,
+  saveSettings,
+} from '../lib/settings';
+import { fetchPreferences } from '../lib/preferences-client';
+
+interface SettingsContextValue {
+  settings: AppSettings;
+  updateTemplates: (templates: CommentTemplate[]) => void;
+  updateCommentMaxLength: (maxLength: number) => void;
+  updateShowTemplatesByDefault: (show: boolean) => void;
+  updateEnableResolve: (enable: boolean) => void;
+  updateQuickComment: (quick: boolean) => void;
+  resetTemplates: () => void;
+  resetAll: () => void;
+}
+
+const SettingsContext = createContext<SettingsContextValue | null>(null);
+
+export function SettingsProvider({ children }: { children: ReactNode }) {
+  const [settings, setSettings] = useState<AppSettings>(loadSettings);
+  const hasLocalMutationRef = useRef(false);
+
+  // Hydrate from disk on mount — disk overrides localStorage
+  useEffect(() => {
+    let cancelled = false;
+    fetchPreferences().then((prefs) => {
+      if (cancelled || hasLocalMutationRef.current) return;
+      if (prefs.settings && typeof prefs.settings === 'object') {
+        const diskSettings = prefs.settings as Partial<AppSettings>;
+        setSettings((prev) => {
+          const merged = { ...prev, ...diskSettings };
+          saveSettings(merged);
+          return merged;
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const update = useCallback((patch: Partial<AppSettings>) => {
+    hasLocalMutationRef.current = true;
+    setSettings((prev) => {
+      const next = { ...prev, ...patch };
+      saveSettings(next);
+      return next;
+    });
+  }, []);
+
+  const updateTemplates = useCallback(
+    (templates: CommentTemplate[]) => update({ templates }),
+    [update],
+  );
+
+  const updateCommentMaxLength = useCallback(
+    (commentMaxLength: number) => update({ commentMaxLength }),
+    [update],
+  );
+
+  const updateShowTemplatesByDefault = useCallback(
+    (showTemplatesByDefault: boolean) => update({ showTemplatesByDefault }),
+    [update],
+  );
+
+  const updateEnableResolve = useCallback(
+    (enableResolve: boolean) => update({ enableResolve }),
+    [update],
+  );
+
+  const updateQuickComment = useCallback(
+    (quickComment: boolean) => update({ quickComment }),
+    [update],
+  );
+
+  const resetTemplates = useCallback(() => update({ templates: DEFAULT_TEMPLATES }), [update]);
+
+  const resetAll = useCallback(() => {
+    hasLocalMutationRef.current = true;
+    setSettings(DEFAULT_SETTINGS);
+    saveSettings(DEFAULT_SETTINGS);
+  }, []);
+
+  return (
+    <SettingsContext.Provider
+      value={{
+        settings,
+        updateTemplates,
+        updateCommentMaxLength,
+        updateShowTemplatesByDefault,
+        updateEnableResolve,
+        updateQuickComment,
+        resetTemplates,
+        resetAll,
+      }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+}
+
+export function useSettings(): SettingsContextValue {
+  const ctx = useContext(SettingsContext);
+  if (!ctx) throw new Error('useSettings must be used within a SettingsProvider');
+  return ctx;
+}

package/src/hooks/useAuthor.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest';
+import { hashString, getAuthorColor } from './useAuthor';
+
+describe('hashString', () => {
+  it('returns a non-negative number', () => {
+    expect(hashString('test')).toBeGreaterThanOrEqual(0);
+    expect(hashString('another string')).toBeGreaterThanOrEqual(0);
+  });
+
+  it('returns the same hash for the same input', () => {
+    expect(hashString('hello')).toBe(hashString('hello'));
+  });
+
+  it('returns different hashes for different inputs', () => {
+    expect(hashString('alice')).not.toBe(hashString('bob'));
+  });
+
+  it('returns 0 for empty string', () => {
+    expect(hashString('')).toBe(0);
+  });
+
+  it('handles single character', () => {
+    expect(hashString('a')).toBeGreaterThanOrEqual(0);
+  });
+});
+
+describe('getAuthorColor', () => {
+  it('returns a color object with bg, text, border', () => {
+    const color = getAuthorColor('Alice');
+    expect(color).toHaveProperty('bg');
+    expect(color).toHaveProperty('text');
+    expect(color).toHaveProperty('border');
+    expect(color.bg).toMatch(/^#/);
+    expect(color.text).toMatch(/^#/);
+    expect(color.border).toMatch(/^#/);
+  });
+
+  it('returns the same color for the same author', () => {
+    expect(getAuthorColor('Alice')).toEqual(getAuthorColor('Alice'));
+  });
+
+  it('returns different colors for different authors', () => {
+    // Not guaranteed for all pairs, but very likely for these
+    const colors = new Set([
+      getAuthorColor('Alice').bg,
+      getAuthorColor('Bob').bg,
+      getAuthorColor('Charlie').bg,
+    ]);
+    expect(colors.size).toBeGreaterThan(1);
+  });
+
+  it('returns a valid color for empty string', () => {
+    const color = getAuthorColor('');
+    expect(color).toHaveProperty('bg');
+    expect(color).toHaveProperty('text');
+    expect(color).toHaveProperty('border');
+  });
+});

package/src/hooks/useAuthor.ts

@@ -0,0 +1,69 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { fetchPreferences, savePreferencesToDisk } from '../lib/preferences-client';
+
+const STORAGE_KEY = 'md-redline-author';
+const DEFAULT_AUTHOR = 'User';
+
+// 8 maximally distinct hues for author color coding
+const AUTHOR_COLORS = [
+  { bg: '#dbeafe', text: '#2563eb', border: '#93c5fd' }, // blue
+  { bg: '#fce7f3', text: '#db2777', border: '#f9a8d4' }, // pink
+  { bg: '#d1fae5', text: '#059669', border: '#6ee7b7' }, // green
+  { bg: '#fef3c7', text: '#d97706', border: '#fcd34d' }, // amber
+  { bg: '#ede9fe', text: '#7c3aed', border: '#c4b5fd' }, // violet
+  { bg: '#ffedd5', text: '#ea580c', border: '#fdba74' }, // orange
+  { bg: '#cffafe', text: '#0891b2', border: '#67e8f9' }, // cyan
+  { bg: '#fce4ec', text: '#e11d48', border: '#f48fb1' }, // rose
+];
+
+export function hashString(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash |= 0;
+  }
+  return Math.abs(hash);
+}
+
+export function getAuthorColor(author: string) {
+  return AUTHOR_COLORS[hashString(author) % AUTHOR_COLORS.length];
+}
+
+export function useAuthor() {
+  const [author, setAuthorState] = useState(DEFAULT_AUTHOR);
+  const hasLocalMutationRef = useRef(false);
+
+  // Hydrate from disk on mount
+  useEffect(() => {
+    let cancelled = false;
+    fetchPreferences().then((prefs) => {
+      if (cancelled || hasLocalMutationRef.current) return;
+      if (typeof prefs.author === 'string' && prefs.author.trim() && prefs.author !== author) {
+        setAuthorState(prefs.author);
+        try {
+          localStorage.setItem(STORAGE_KEY, prefs.author);
+        } catch {
+          /* storage unavailable */
+        }
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setAuthor = useCallback((name: string) => {
+    const trimmed = name.trim() || DEFAULT_AUTHOR;
+    hasLocalMutationRef.current = true;
+    setAuthorState(trimmed);
+    try {
+      localStorage.setItem(STORAGE_KEY, trimmed);
+    } catch {
+      // Storage unavailable
+    }
+    savePreferencesToDisk({ author: trimmed });
+  }, []);
+
+  return { author, setAuthor };
+}

package/src/hooks/useAutoResize.ts

@@ -0,0 +1,20 @@
+import { useCallback, useEffect, type RefObject } from 'react';
+
+/**
+ * Auto-resizes a textarea to fit its content.
+ * Call `trigger` after programmatic value changes (e.g. template insert).
+ */
+export function useAutoResize(ref: RefObject<HTMLTextAreaElement | null>, value: string) {
+  const resize = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [ref]);
+
+  useEffect(() => {
+    resize();
+  }, [value, resize]);
+
+  return resize;
+}

package/src/hooks/useCommentCardTriggers.ts

@@ -0,0 +1,20 @@
+import { useState, useCallback } from 'react';
+import type { SidebarCommentEditorState } from '../lib/comment-editor-state';
+
+export function useCommentCardTriggers() {
+  const [requestedEditor, setRequestedEditor] = useState<SidebarCommentEditorState>(null);
+
+  const triggerEdit = useCallback((commentId: string) => {
+    setRequestedEditor({ mode: 'comment-edit', commentId, token: Date.now() });
+  }, []);
+
+  const triggerReply = useCallback((commentId: string) => {
+    setRequestedEditor({ mode: 'reply-compose', commentId, token: Date.now() });
+  }, []);
+
+  return {
+    requestedEditor,
+    triggerEdit,
+    triggerReply,
+  };
+}