md-redline 0.1.0

package/src/hooks/useContextMenuItems.ts

@@ -0,0 +1,392 @@
+import { useState, useCallback, type RefObject, type Dispatch, type SetStateAction } from 'react';
+import type { ContextMenuEntry, ContextMenuItem } from '../components/ContextMenu';
+import type { ViewerContextMenuInfo, MarkdownViewerHandle } from '../components/MarkdownViewer';
+import type { ExplorerContextMenuInfo } from '../components/FileExplorer';
+import type { TabContextMenuInfo } from '../components/TabBar';
+import type { SidebarContextMenuInfo } from '../components/CommentSidebar';
+import type { MdComment, SelectionInfo } from '../types';
+import { getEffectiveStatus } from '../types';
+import { getPathBasename } from '../lib/path-utils';
+
+type ContextMenuInstance = {
+  open: (x: number, y: number) => void;
+  close: () => void;
+};
+
+interface CommentTemplate {
+  label: string;
+  text: string;
+}
+
+export interface UseContextMenuItemsParams {
+  comments: MdComment[];
+  enableResolve: boolean;
+  templates: CommentTemplate[];
+  handleResolve: (id: string) => void;
+  handleUnresolve: (id: string) => void;
+  handleDelete: (id: string) => void;
+  handleAddComment: (
+    anchor: string,
+    text: string,
+    contextBefore?: string,
+    contextAfter?: string,
+    hintOffset?: number,
+  ) => void;
+  setActiveCommentId: Dispatch<SetStateAction<string | null>>;
+  setSidebarVisible: (v: boolean | ((prev: boolean) => boolean)) => void;
+  selectionRef: RefObject<SelectionInfo | null>;
+  lockSelection: () => void;
+  setAutoExpandForm: Dispatch<SetStateAction<boolean>>;
+  triggerEdit: (id: string) => void;
+  triggerReply: (id: string) => void;
+  viewerRef: RefObject<MarkdownViewerHandle | null>;
+  handleExplorerOpenFile: (path: string) => void;
+  openTabInBackground: (path: string) => void;
+  addRecentFile: (path: string) => void;
+  revealInFinder: (path: string) => void;
+  revealLabel: string;
+  setExplorerDir: Dispatch<SetStateAction<string | undefined>>;
+  setExplorerVisible: (v: boolean | ((prev: boolean) => boolean)) => void;
+  tabs: Array<{ filePath: string }>;
+  closeTab: (path: string) => void;
+  closeOtherTabs: (path: string) => void;
+  closeAllTabs: () => void;
+  closeTabsToRight: (path: string) => void;
+  viewerCtxMenu: ContextMenuInstance;
+  explorerCtxMenu: ContextMenuInstance;
+  tabCtxMenu: ContextMenuInstance;
+  sidebarCtxMenu: ContextMenuInstance;
+}
+
+export function useContextMenuItems(params: UseContextMenuItemsParams) {
+  const {
+    comments,
+    enableResolve,
+    templates,
+    handleResolve,
+    handleUnresolve,
+    handleDelete,
+    handleAddComment,
+    setActiveCommentId,
+    setSidebarVisible,
+    selectionRef,
+    lockSelection,
+    setAutoExpandForm,
+    triggerEdit,
+    triggerReply,
+    viewerRef,
+    handleExplorerOpenFile,
+    openTabInBackground,
+    addRecentFile,
+    revealInFinder,
+    revealLabel,
+    setExplorerDir,
+    setExplorerVisible,
+    tabs,
+    closeTab,
+    closeOtherTabs,
+    closeAllTabs,
+    closeTabsToRight,
+    viewerCtxMenu,
+    explorerCtxMenu,
+    tabCtxMenu,
+    sidebarCtxMenu,
+  } = params;
+
+  const [ctxMenuItems, setCtxMenuItems] = useState<ContextMenuEntry[]>([]);
+  const [explorerCtxMenuItems, setExplorerCtxMenuItems] = useState<ContextMenuEntry[]>([]);
+  const [tabCtxMenuItems, setTabCtxMenuItems] = useState<ContextMenuEntry[]>([]);
+  const [sidebarCtxMenuItems, setSidebarCtxMenuItems] = useState<ContextMenuEntry[]>([]);
+
+  const handleViewerContextMenu = useCallback(
+    (info: ViewerContextMenuInfo) => {
+      explorerCtxMenu.close();
+      tabCtxMenu.close();
+      sidebarCtxMenu.close();
+
+      if (info.type === 'highlight' && info.commentIds?.length) {
+        const commentId = info.commentIds[0];
+        const comment = comments.find((c) => c.id === commentId);
+        if (!comment) return;
+
+        const resolveItems: ContextMenuEntry[] = enableResolve
+          ? [
+              { type: 'divider' as const },
+              getEffectiveStatus(comment) === 'resolved'
+                ? { label: 'Reopen', onClick: () => handleUnresolve(commentId) }
+                : { label: 'Resolve', onClick: () => handleResolve(commentId) },
+            ]
+          : [];
+
+        const items: ContextMenuEntry[] = [
+          {
+            label: 'Edit',
+            onClick: () => {
+              setActiveCommentId(commentId);
+              setSidebarVisible(true);
+              triggerEdit(commentId);
+            },
+          },
+          {
+            label: 'Reply',
+            onClick: () => {
+              setActiveCommentId(commentId);
+              setSidebarVisible(true);
+              triggerReply(commentId);
+            },
+          },
+          ...resolveItems,
+          { type: 'divider' as const },
+          {
+            label: 'Delete',
+            danger: true,
+            onClick: () => handleDelete(commentId),
+          },
+          { type: 'divider' as const },
+          {
+            label: 'Copy Anchor Text',
+            onClick: () => navigator.clipboard.writeText(comment.anchor),
+          },
+          {
+            label: 'Copy Comment Text',
+            onClick: () => navigator.clipboard.writeText(comment.text),
+          },
+          {
+            label: 'Jump to Sidebar',
+            onClick: () => {
+              setActiveCommentId(commentId);
+              setSidebarVisible(true);
+            },
+          },
+        ];
+
+        setCtxMenuItems(items);
+        viewerCtxMenu.open(info.x, info.y);
+      } else if (info.type === 'selection') {
+        const sel = selectionRef.current;
+        if (!sel) return;
+
+        const templateItems: ContextMenuItem[] = templates.map((t) => ({
+          label: t.label,
+          onClick: () => {
+            handleAddComment(sel.text, t.text, sel.contextBefore, sel.contextAfter, sel.offset);
+          },
+        }));
+
+        const items: ContextMenuEntry[] = [
+          {
+            label: 'Comment',
+            onClick: () => {
+              lockSelection();
+              setAutoExpandForm(true);
+            },
+          },
+          {
+            label: 'Templates',
+            items: templateItems,
+          },
+          { type: 'divider' as const },
+          {
+            label: 'Copy',
+            onClick: () => {
+              navigator.clipboard.writeText(sel.text);
+            },
+          },
+        ];
+
+        setCtxMenuItems(items);
+        viewerCtxMenu.open(info.x, info.y);
+      }
+    },
+    [
+      comments,
+      enableResolve,
+      templates,
+      handleResolve,
+      handleUnresolve,
+      handleDelete,
+      handleAddComment,
+      lockSelection,
+      setSidebarVisible,
+      triggerEdit,
+      triggerReply,
+      selectionRef,
+      setActiveCommentId,
+      setAutoExpandForm,
+      viewerCtxMenu,
+      explorerCtxMenu,
+      tabCtxMenu,
+      sidebarCtxMenu,
+    ],
+  );
+
+  const handleExplorerContextMenu = useCallback(
+    (info: ExplorerContextMenuInfo) => {
+      viewerCtxMenu.close();
+      tabCtxMenu.close();
+      sidebarCtxMenu.close();
+
+      if (info.type === 'file') {
+        const items: ContextMenuEntry[] = [
+          { label: 'Open', onClick: () => handleExplorerOpenFile(info.path) },
+          {
+            label: 'Open in Background Tab',
+            onClick: () => {
+              openTabInBackground(info.path);
+              addRecentFile(info.path);
+            },
+          },
+          { type: 'divider' as const },
+          { label: revealLabel, onClick: () => revealInFinder(info.path) },
+          { label: 'Copy Path', onClick: () => navigator.clipboard.writeText(info.path) },
+          { label: 'Copy File Name', onClick: () => navigator.clipboard.writeText(info.name) },
+        ];
+        setExplorerCtxMenuItems(items);
+        explorerCtxMenu.open(info.x, info.y);
+      } else if (info.type === 'directory') {
+        const items: ContextMenuEntry[] = [
+          {
+            label: 'Open in Explorer',
+            onClick: () => {
+              setExplorerDir(info.path);
+              setExplorerVisible(true);
+            },
+          },
+          { type: 'divider' as const },
+          { label: revealLabel, onClick: () => revealInFinder(info.path) },
+          { label: 'Copy Path', onClick: () => navigator.clipboard.writeText(info.path) },
+        ];
+        setExplorerCtxMenuItems(items);
+        explorerCtxMenu.open(info.x, info.y);
+      } else {
+        const items: ContextMenuEntry[] = [
+          { label: revealLabel, onClick: () => revealInFinder(info.path) },
+          { label: 'Copy Path', onClick: () => navigator.clipboard.writeText(info.path) },
+        ];
+        setExplorerCtxMenuItems(items);
+        explorerCtxMenu.open(info.x, info.y);
+      }
+    },
+    [
+      handleExplorerOpenFile,
+      openTabInBackground,
+      addRecentFile,
+      revealInFinder,
+      revealLabel,
+      setExplorerVisible,
+      setExplorerDir,
+      viewerCtxMenu,
+      explorerCtxMenu,
+      tabCtxMenu,
+      sidebarCtxMenu,
+    ],
+  );
+
+  const handleTabContextMenu = useCallback(
+    (info: TabContextMenuInfo) => {
+      viewerCtxMenu.close();
+      explorerCtxMenu.close();
+      sidebarCtxMenu.close();
+
+      const tabIndex = tabs.findIndex((t) => t.filePath === info.filePath);
+      const hasTabsToRight = tabIndex >= 0 && tabIndex < tabs.length - 1;
+      const hasOtherTabs = tabs.length > 1;
+      const fileName = getPathBasename(info.filePath) || info.filePath;
+
+      const items: ContextMenuEntry[] = [
+        { label: 'Close', onClick: () => closeTab(info.filePath) },
+        {
+          label: 'Close Others',
+          onClick: () => closeOtherTabs(info.filePath),
+          disabled: !hasOtherTabs,
+        },
+        {
+          label: 'Close Tabs to the Right',
+          onClick: () => closeTabsToRight(info.filePath),
+          disabled: !hasTabsToRight,
+        },
+        { label: 'Close All', onClick: () => closeAllTabs() },
+        { type: 'divider' as const },
+        { label: revealLabel, onClick: () => revealInFinder(info.filePath) },
+        { label: 'Copy Path', onClick: () => navigator.clipboard.writeText(info.filePath) },
+        { label: 'Copy File Name', onClick: () => navigator.clipboard.writeText(fileName) },
+      ];
+      setTabCtxMenuItems(items);
+      tabCtxMenu.open(info.x, info.y);
+    },
+    [
+      tabs,
+      closeTab,
+      closeOtherTabs,
+      closeAllTabs,
+      closeTabsToRight,
+      revealInFinder,
+      revealLabel,
+      viewerCtxMenu,
+      explorerCtxMenu,
+      tabCtxMenu,
+      sidebarCtxMenu,
+    ],
+  );
+
+  const handleSidebarContextMenu = useCallback(
+    (info: SidebarContextMenuInfo) => {
+      viewerCtxMenu.close();
+      explorerCtxMenu.close();
+      tabCtxMenu.close();
+
+      const comment = comments.find((c) => c.id === info.commentId);
+      if (!comment) return;
+
+      const resolveItems: ContextMenuEntry[] = enableResolve
+        ? [
+            getEffectiveStatus(comment) === 'resolved'
+              ? { label: 'Reopen', onClick: () => handleUnresolve(info.commentId) }
+              : { label: 'Resolve', onClick: () => handleResolve(info.commentId) },
+          ]
+        : [];
+
+      const items: ContextMenuEntry[] = [
+        ...resolveItems,
+        { label: 'Delete', danger: true, onClick: () => handleDelete(info.commentId) },
+        { type: 'divider' as const },
+        { label: 'Copy Anchor Text', onClick: () => navigator.clipboard.writeText(comment.anchor) },
+        { label: 'Copy Comment Text', onClick: () => navigator.clipboard.writeText(comment.text) },
+        { type: 'divider' as const },
+        {
+          label: 'Scroll to Highlight',
+          onClick: () => {
+            setActiveCommentId(info.commentId);
+            viewerRef.current?.scrollToComment(info.commentId);
+          },
+        },
+      ];
+      setSidebarCtxMenuItems(items);
+      sidebarCtxMenu.open(info.x, info.y);
+    },
+    [
+      comments,
+      enableResolve,
+      handleResolve,
+      handleUnresolve,
+      handleDelete,
+      setActiveCommentId,
+      viewerRef,
+      viewerCtxMenu,
+      explorerCtxMenu,
+      tabCtxMenu,
+      sidebarCtxMenu,
+    ],
+  );
+
+  return {
+    ctxMenuItems,
+    explorerCtxMenuItems,
+    tabCtxMenuItems,
+    sidebarCtxMenuItems,
+    handleViewerContextMenu,
+    handleExplorerContextMenu,
+    handleTabContextMenu,
+    handleSidebarContextMenu,
+  };
+}

package/src/hooks/useDiffSnapshot.test.ts

@@ -0,0 +1,130 @@
+// @vitest-environment jsdom
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useDiffSnapshot } from './useDiffSnapshot';
+
+const STORAGE_KEY = 'md-redline-snapshots';
+
+function setup(activeFilePath: string | null = '/test.md', initialContent: string = 'hello world') {
+  const rawMarkdownRef = { current: initialContent };
+  const showToast = vi.fn();
+  const setDiffEnabled = vi.fn();
+  return {
+    rawMarkdownRef,
+    showToast,
+    setDiffEnabled,
+    hookArgs: [activeFilePath, rawMarkdownRef, showToast, setDiffEnabled] as const,
+  };
+}
+
+describe('useDiffSnapshot', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('currentSnapshot is null when no snapshot exists for active file', () => {
+    const { hookArgs } = setup();
+    const { result } = renderHook(() => useDiffSnapshot(...hookArgs));
+    expect(result.current.currentSnapshot).toBeNull();
+  });
+
+  it('handleSnapshot saves rawMarkdownRef.current to snapshots', () => {
+    const { hookArgs, rawMarkdownRef } = setup('/test.md', 'file content');
+    const { result } = renderHook(() => useDiffSnapshot(...hookArgs));
+
+    act(() => result.current.handleSnapshot());
+
+    expect(result.current.currentSnapshot).toBe('file content');
+
+    // Confirm it tracks the ref's value at call time
+    rawMarkdownRef.current = 'changed';
+    act(() => result.current.handleSnapshot());
+    expect(result.current.currentSnapshot).toBe('changed');
+  });
+
+  it('after handleSnapshot, currentSnapshot returns the saved content', () => {
+    const { hookArgs } = setup('/doc.md', 'saved text');
+    const { result } = renderHook(() => useDiffSnapshot(...hookArgs));
+
+    act(() => result.current.handleSnapshot());
+    expect(result.current.currentSnapshot).toBe('saved text');
+  });
+
+  it('handleSnapshot with extraEntries saves additional file snapshots', () => {
+    const { hookArgs } = setup('/a.md', 'content a');
+    const { result, rerender } = renderHook(({ args }) => useDiffSnapshot(...args), {
+      initialProps: { args: hookArgs },
+    });
+
+    const extras = new Map([
+      ['/b.md', 'content b'],
+      ['/c.md', 'content c'],
+    ]);
+    act(() => result.current.handleSnapshot(extras));
+
+    // Current file has its snapshot
+    expect(result.current.currentSnapshot).toBe('content a');
+
+    // Switch to /b.md to verify extra entry was saved
+    const { hookArgs: bArgs } = setup('/b.md', '');
+    rerender({ args: bArgs });
+    expect(result.current.currentSnapshot).toBe('content b');
+  });
+
+  it('handleClearSnapshot removes the snapshot and calls setDiffEnabled(false)', () => {
+    const { hookArgs, setDiffEnabled, showToast } = setup('/test.md', 'content');
+    const { result } = renderHook(() => useDiffSnapshot(...hookArgs));
+
+    act(() => result.current.handleSnapshot());
+    expect(result.current.currentSnapshot).toBe('content');
+
+    act(() => result.current.handleClearSnapshot());
+    expect(result.current.currentSnapshot).toBeNull();
+    expect(setDiffEnabled).toHaveBeenCalledWith(false);
+    expect(showToast).toHaveBeenCalledWith('Snapshot cleared');
+  });
+
+  it('first save shows "Snapshot saved", second shows "Snapshot updated"', () => {
+    const rawMarkdownRef = { current: 'v1' };
+    const showToast = vi.fn();
+    const setDiffEnabled = vi.fn();
+
+    const { result, rerender } = renderHook(
+      ({ path }) => useDiffSnapshot(path, rawMarkdownRef, showToast, setDiffEnabled),
+      { initialProps: { path: '/test.md' } },
+    );
+
+    // First snapshot
+    act(() => result.current.handleSnapshot());
+    expect(showToast).toHaveBeenLastCalledWith('Snapshot saved — diff view will show changes');
+
+    // Force a re-render so the hook picks up committed state and recreates handleSnapshot
+    rerender({ path: '/test.md' });
+
+    // Second snapshot — should detect the existing entry
+    act(() => result.current.handleSnapshot());
+    expect(showToast).toHaveBeenLastCalledWith('Snapshot updated');
+  });
+
+  it('snapshots persist to localStorage', () => {
+    const { hookArgs } = setup('/test.md', 'persisted');
+    const { result } = renderHook(() => useDiffSnapshot(...hookArgs));
+
+    act(() => result.current.handleSnapshot());
+
+    const stored = JSON.parse(localStorage.getItem(STORAGE_KEY)!);
+    expect(stored['/test.md']).toBe('persisted');
+  });
+
+  it('initializes from localStorage on mount', () => {
+    // Pre-populate localStorage
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ '/existing.md': 'pre-existing content' }));
+
+    const { hookArgs } = setup('/existing.md', 'new content');
+    const { result } = renderHook(() => useDiffSnapshot(...hookArgs));
+
+    // Should read the pre-existing snapshot, not null
+    expect(result.current.currentSnapshot).toBe('pre-existing content');
+  });
+});

package/src/hooks/useDiffSnapshot.ts

@@ -0,0 +1,67 @@
+import { useState, useCallback, useEffect, type RefObject } from 'react';
+
+const STORAGE_KEY = 'md-redline-snapshots';
+
+export function useDiffSnapshot(
+  activeFilePath: string | null,
+  rawMarkdownRef: RefObject<string>,
+  showToast: (msg: string) => void,
+  setDiffEnabled: (v: boolean) => void,
+) {
+  const [snapshots, setSnapshots] = useState<Map<string, string>>(() => {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return new Map();
+      return new Map(Object.entries(JSON.parse(raw)));
+    } catch {
+      return new Map();
+    }
+  });
+
+  useEffect(() => {
+    try {
+      if (snapshots.size === 0) {
+        localStorage.removeItem(STORAGE_KEY);
+      } else {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(Object.fromEntries(snapshots)));
+      }
+    } catch {
+      /* ignore quota errors */
+    }
+  }, [snapshots]);
+
+  const currentSnapshot = activeFilePath ? (snapshots.get(activeFilePath) ?? null) : null;
+
+  const handleSnapshot = useCallback(
+    (extraEntries?: Map<string, string>) => {
+      if (!activeFilePath) return;
+      let isUpdate = false;
+      setSnapshots((prev) => {
+        isUpdate = prev.has(activeFilePath);
+        const next = new Map(prev);
+        next.set(activeFilePath, rawMarkdownRef.current);
+        if (extraEntries) {
+          for (const [path, content] of extraEntries) {
+            next.set(path, content);
+          }
+        }
+        return next;
+      });
+      showToast(isUpdate ? 'Snapshot updated' : 'Snapshot saved — diff view will show changes');
+    },
+    [activeFilePath, showToast, rawMarkdownRef],
+  );
+
+  const handleClearSnapshot = useCallback(() => {
+    if (!activeFilePath) return;
+    setSnapshots((prev) => {
+      const next = new Map(prev);
+      next.delete(activeFilePath);
+      return next;
+    });
+    setDiffEnabled(false);
+    showToast('Snapshot cleared');
+  }, [activeFilePath, setDiffEnabled, showToast]);
+
+  return { currentSnapshot, handleSnapshot, handleClearSnapshot };
+}