@peaske7/readit 0.1.4 → 0.1.5

package/src/lib/shortcut-registry.ts

@@ -0,0 +1,209 @@
+import type { KeybindingOverride, ShortcutBinding } from "../types";
+
+export type { ShortcutBinding, KeybindingOverride };
+
+export const ShortcutActions = {
+  COPY_ALL: "copyAll",
+  COPY_ALL_RAW: "copyAllRaw",
+  NAVIGATE_NEXT: "navigateNext",
+  NAVIGATE_PREVIOUS: "navigatePrevious",
+  COPY_SELECTION_RAW: "copySelectionRaw",
+  COPY_SELECTION_LLM: "copySelectionLLM",
+  CLEAR_SELECTION: "clearSelection",
+} as const;
+
+export type ShortcutAction =
+  (typeof ShortcutActions)[keyof typeof ShortcutActions];
+
+export interface ShortcutDefinition {
+  id: ShortcutAction;
+  label: string;
+  description: string;
+  defaultBinding: ShortcutBinding;
+  binding: ShortcutBinding; // resolved (default or user override)
+  enabled: boolean;
+}
+
+export const DEFAULT_SHORTCUTS: ShortcutDefinition[] = [
+  {
+    id: ShortcutActions.COPY_ALL,
+    label: "Copy All (AI)",
+    description: "Copy all comments in AI prompt format",
+    defaultBinding: { key: "c", alt: true },
+    binding: { key: "c", alt: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.COPY_ALL_RAW,
+    label: "Copy All (Raw)",
+    description: "Copy all comments as raw text",
+    defaultBinding: { key: "c", alt: true, shift: true },
+    binding: { key: "c", alt: true, shift: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.NAVIGATE_NEXT,
+    label: "Next Comment",
+    description: "Navigate to next comment",
+    defaultBinding: { key: "ArrowDown", alt: true },
+    binding: { key: "ArrowDown", alt: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.NAVIGATE_PREVIOUS,
+    label: "Previous Comment",
+    description: "Navigate to previous comment",
+    defaultBinding: { key: "ArrowUp", alt: true },
+    binding: { key: "ArrowUp", alt: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.COPY_SELECTION_RAW,
+    label: "Copy Selection",
+    description: "Copy selected text",
+    defaultBinding: { key: "c", meta: true },
+    binding: { key: "c", meta: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.COPY_SELECTION_LLM,
+    label: "Copy Selection (LLM)",
+    description: "Copy selected text with context for LLM",
+    defaultBinding: { key: "c", meta: true, shift: true },
+    binding: { key: "c", meta: true, shift: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.CLEAR_SELECTION,
+    label: "Clear Selection",
+    description: "Clear text selection",
+    defaultBinding: { key: "Escape" },
+    binding: { key: "Escape" },
+    enabled: true,
+  },
+];
+
+/**
+ * Check if a KeyboardEvent matches a ShortcutBinding.
+ * All modifier flags must match exactly (no extra modifiers allowed).
+ */
+export function matchesBinding(
+  event: KeyboardEvent,
+  binding: ShortcutBinding,
+): boolean {
+  if (event.key.toLowerCase() !== binding.key.toLowerCase()) return false;
+  if (event.altKey !== (binding.alt ?? false)) return false;
+  if (event.metaKey !== (binding.meta ?? false)) return false;
+  if (event.shiftKey !== (binding.shift ?? false)) return false;
+  return true;
+}
+
+const KEY_DISPLAY: Record<string, string> = {
+  ArrowUp: "↑",
+  ArrowDown: "↓",
+  ArrowLeft: "←",
+  ArrowRight: "→",
+  Escape: "Esc",
+  " ": "Space",
+  Enter: "Enter",
+};
+
+/**
+ * Format a ShortcutBinding for display.
+ * Shows ⌘ on Mac, Ctrl on other platforms.
+ */
+export function formatBinding(
+  binding: ShortcutBinding,
+  isMac: boolean,
+): string {
+  const parts: string[] = [];
+
+  if (binding.meta) parts.push(isMac ? "⌘" : "Ctrl");
+  if (binding.alt) parts.push("Alt");
+  if (binding.shift) parts.push("Shift");
+
+  const keyDisplay = KEY_DISPLAY[binding.key] ?? binding.key.toUpperCase();
+  parts.push(keyDisplay);
+
+  return parts.join("+");
+}
+
+/**
+ * Merge user overrides with default shortcuts.
+ * Unknown override IDs are ignored.
+ */
+export function resolveShortcuts(
+  overrides: KeybindingOverride[],
+): ShortcutDefinition[] {
+  if (overrides.length === 0) return DEFAULT_SHORTCUTS;
+
+  const overrideMap = new Map(overrides.map((o) => [o.id, o]));
+
+  return DEFAULT_SHORTCUTS.map((shortcut) => {
+    const override = overrideMap.get(shortcut.id);
+    if (!override) return shortcut;
+
+    return {
+      ...shortcut,
+      binding: override.binding ?? shortcut.defaultBinding,
+      enabled: override.enabled,
+    };
+  });
+}
+
+/**
+ * Browser-reserved key combos that cannot be rebound.
+ */
+export const RESERVED_BINDINGS: ShortcutBinding[] = [
+  { key: "w", meta: true },
+  { key: "t", meta: true },
+  { key: "n", meta: true },
+  { key: "q", meta: true },
+  { key: "l", meta: true },
+  { key: "r", meta: true },
+  { key: "F5" },
+  { key: "F11" },
+  { key: "F12" },
+];
+
+/**
+ * Check if a binding conflicts with browser-reserved shortcuts.
+ */
+export function isReservedBinding(binding: ShortcutBinding): boolean {
+  return RESERVED_BINDINGS.some(
+    (reserved) =>
+      reserved.key.toLowerCase() === binding.key.toLowerCase() &&
+      (reserved.meta ?? false) === (binding.meta ?? false) &&
+      (reserved.alt ?? false) === (binding.alt ?? false) &&
+      (reserved.shift ?? false) === (binding.shift ?? false),
+  );
+}
+
+/**
+ * Convert a KeyboardEvent to a ShortcutBinding (for the capture UI).
+ */
+export function eventToBinding(
+  event: KeyboardEvent,
+): ShortcutBinding | undefined {
+  // Ignore standalone modifier keys
+  if (["Alt", "Shift", "Control", "Meta"].includes(event.key)) return undefined;
+
+  const binding: ShortcutBinding = { key: event.key };
+  if (event.altKey) binding.alt = true;
+  if (event.metaKey) binding.meta = true;
+  if (event.shiftKey) binding.shift = true;
+
+  return binding;
+}
+
+/**
+ * Check if two bindings are equal.
+ */
+export function bindingsEqual(a: ShortcutBinding, b: ShortcutBinding): boolean {
+  return (
+    a.key.toLowerCase() === b.key.toLowerCase() &&
+    (a.alt ?? false) === (b.alt ?? false) &&
+    (a.meta ?? false) === (b.meta ?? false) &&
+    (a.shift ?? false) === (b.shift ?? false)
+  );
+}

package/src/lib/utils.test.ts

@@ -0,0 +1,110 @@
+import { createElement } from "react";
+import { describe, expect, it } from "vitest";
+import { getTextContent, slugify } from "./utils";
+
+describe("slugify", () => {
+  it("converts text to lowercase", () => {
+    expect(slugify("Hello World")).toBe("hello-world");
+  });
+
+  it("replaces spaces with hyphens", () => {
+    expect(slugify("hello world")).toBe("hello-world");
+  });
+
+  it("removes special characters", () => {
+    expect(slugify("Hello, World!")).toBe("hello-world");
+  });
+
+  it("handles multiple spaces", () => {
+    expect(slugify("hello   world")).toBe("hello-world");
+  });
+
+  it("handles leading/trailing whitespace", () => {
+    expect(slugify("  hello world  ")).toBe("hello-world");
+  });
+
+  it("preserves underscores", () => {
+    expect(slugify("hello_world")).toBe("hello_world");
+  });
+
+  it("handles hyphens", () => {
+    expect(slugify("hello-world")).toBe("hello-world");
+  });
+
+  it("collapses multiple hyphens", () => {
+    expect(slugify("hello---world")).toBe("hello-world");
+  });
+});
+
+describe("getTextContent", () => {
+  it("returns string children directly", () => {
+    expect(getTextContent("Hello")).toBe("Hello");
+  });
+
+  it("converts number children to string", () => {
+    expect(getTextContent(123)).toBe("123");
+  });
+
+  it("joins array of strings", () => {
+    expect(getTextContent(["Hello", " ", "World"])).toBe("Hello World");
+  });
+
+  it("extracts text from React element", () => {
+    const element = createElement("strong", null, "Bold");
+    expect(getTextContent(element)).toBe("Bold");
+  });
+
+  it("extracts text from nested React elements", () => {
+    const element = createElement(
+      "span",
+      null,
+      "Hello ",
+      createElement("strong", null, "World"),
+    );
+    expect(getTextContent(element)).toBe("Hello World");
+  });
+
+  it("handles mixed array of strings and elements", () => {
+    const children = ["Hello ", createElement("strong", null, "World"), "!"];
+    expect(getTextContent(children)).toBe("Hello World!");
+  });
+
+  it("handles deeply nested elements", () => {
+    const element = createElement(
+      "div",
+      null,
+      createElement("span", null, createElement("strong", null, "Deep")),
+    );
+    expect(getTextContent(element)).toBe("Deep");
+  });
+
+  it("returns empty string for null", () => {
+    expect(getTextContent(null)).toBe("");
+  });
+
+  it("returns empty string for undefined", () => {
+    expect(getTextContent(undefined)).toBe("");
+  });
+
+  it("returns empty string for boolean", () => {
+    expect(getTextContent(true)).toBe("");
+    expect(getTextContent(false)).toBe("");
+  });
+
+  it("handles markdown-style inline formatting", () => {
+    // Simulates what react-markdown produces for "## Hello **World**"
+    const children = ["Hello ", createElement("strong", null, "World")];
+    expect(getTextContent(children)).toBe("Hello World");
+  });
+
+  it("handles complex markdown with multiple formatting", () => {
+    // Simulates "## Hello **World** and _italic_"
+    const children = [
+      "Hello ",
+      createElement("strong", null, "World"),
+      " and ",
+      createElement("em", null, "italic"),
+    ];
+    expect(getTextContent(children)).toBe("Hello World and italic");
+  });
+});

package/src/lib/utils.ts

@@ -0,0 +1,50 @@
+import { type ClassValue, clsx } from "clsx";
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ReadonlyArray<ClassValue>) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Truncate text with ellipsis for toast notifications.
+ */
+export function truncate(text: string, maxLength = 30): string {
+  if (text.length <= maxLength) return text;
+  return `${text.slice(0, maxLength)}…`;
+}
+
+/**
+ * Recursively extract text content from React children.
+ * Handles strings, numbers, arrays, and React elements.
+ */
+export function getTextContent(children: ReactNode): string {
+  if (typeof children === "string" || typeof children === "number") {
+    return String(children);
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextContent).join("");
+  }
+  if (
+    typeof children === "object" &&
+    children !== null &&
+    "props" in children
+  ) {
+    return getTextContent(
+      (children as { props: { children?: ReactNode } }).props.children,
+    );
+  }
+  return "";
+}
+
+/**
+ * Slugify text to create URL-friendly IDs
+ */
+export function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-");
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);