Compare commits

..
Author SHA1 Message Date
amitwh 3f0bf911a0 chore(repo-map): add auto-generated structural map
Generated with ~/.claude-shared/scripts/repo-map.sh (universal-ctags).
Signatures-only map of classes/functions/methods/interfaces/enums.

Amit Haridas
2026-07-18 07:23:25 +05:30
amitwh 2cac075c0e fix(word): harden DOCX preprocessing and temp-file cleanup
- Make the HTML preprocessor code-block and inline-code aware so code

  examples containing <style> / <div> / comments are preserved.

- Strip all raw <div> tags (not just alignment attributes) to avoid

  malformed output from unmatched closing tags.

- Handle uppercase tags and single/unquoted attributes.

- Create temporary DOCX input files inside private mkdtemp directories

  instead of predictable names in the shared temp directory.

- Wrap batch DOCX preprocessing in try/catch so one unreadable file

  does not abort the entire batch.

- Add regression tests for the edge cases above.
2026-06-30 19:57:40 +05:30
amitwh 94906a068a chore(release): bump version to 4.4.5 2026-06-30 13:57:34 +05:30
amitwh e72b863362 fix(word): strip HTML style blocks and alignment divs from DOCX input
Pre-process markdown before Word/DOCX export to remove raw HTML artifacts

(<style> blocks, HTML comments, and <div align=...> tags) that were

visible in the generated document. Applies to single and batch DOCX exports

via both Pandoc and WordTemplateExporter paths.
2026-06-30 13:57:29 +05:30
amitwh d705cfc30b fix(batch): resolve pandoc path handling and include-subfolders option
- Normalize pandoc command parsing with path.basename() to support bundled binary paths
- Use bundled pandoc binary in convertWithPandoc instead of relying on PATH
- Forward includeSubfolders checkbox state from renderer to main process
- Add pandoc availability check before batch conversion
- Re-enable Start button when batch conversion completes
- Clean up obsolete dist build artifact causing test snapshot warning
- Bump version to 4.4.4
2026-06-30 12:56:33 +05:30
amitwh 02e307f758 docs(claude-md): add tailored CLAUDE.md for master branch
Documents project architecture, Pandoc dependency resolution, build
pipeline (electron-builder, no bundler), security model notes
(contextIsolation: false on this branch), and development commands
extracted from actual package.json and source.

Amit Haridas
2026-06-19 23:18:00 +05:30
amitwh 5ad1d1d4b3 chore(release): bump version to 4.4.3 2026-06-11 21:17:37 +05:30
amitwh f480449301 fix(renderer): resolve syntax errors and undefined electronAPI on startup 2026-06-11 21:15:25 +05:30
100 changed files with 17230 additions and 18719 deletions
+103
View File
@@ -0,0 +1,103 @@
# CLAUDE.md — MarkdownConverter (master)
> General code-quality, JavaScript, git, security, and testing standards are in the **global CLAUDE.md**. This file holds project- and branch-specific notes.
## Project Overview
Electron desktop app for Markdown editing and universal file conversion powered by Pandoc. Cross-platform (Win/macOS/Linux). Features: multi-tab editor with live preview, 25+ themes, PDF viewer/editor (merge/split/compress/rotate/watermark/password), export to 20+ formats (PDF/DOCX/ODT/EPUB/HTML/LaTeX/RTF/PPTX), batch conversion, syntax highlighting, diagram support (Mermaid), Git integration, and a plugin system.
- **Version:** 4.4.5
- **License:** MIT
- **App ID:** `com.concreteinfo.markdownconverter`
## Branch Specifics
This is the **primary/release branch** — a vanilla JavaScript Electron app with no bundler or framework in the renderer. The renderer is a single large `renderer.js` (5,300+ lines) loaded directly via `src/index.html`. All UI is hand-rolled DOM manipulation.
## Architecture
### Main Process (`src/main.js` — 4,260 lines)
Monolithic main process file. Contains all IPC handlers, Pandoc invocation, file operations, menu definitions (600+ lines), and window lifecycle. Key modules extracted:
- `src/main/PDFOperations.js` — PDF manipulation via `pdf-lib` (merge, split, compress, rotate, delete, reorder, watermark, encrypt, decrypt, permissions)
- `src/main/GitOperations.js` — Git status/stage/commit/log via `simple-git`
### Renderer (`src/renderer.js` — 5,361 lines)
Vanilla JS, no framework. Directly manipulates DOM. Loads CodeMirror 6 via `src/editor/codemirror-setup.js`. Uses `marked` + `highlight.js` + `DOMPurify` + `mermaid` for rendering. Lazy-loads sidebar panels, REPL, command palette, zen mode.
### Preload (`src/preload.js` — 448 lines)
Exists as IPC bridge, but **`contextIsolation: false` and `nodeIntegration: true`** — the renderer has full Node access. Preload is effectively a thin passthrough.
### Security Model
- `contextIsolation: false` + `nodeIntegration: true` (legacy; the react-electron branch fixes this)
- Pandoc invoked via `execFile` (not `exec`) to prevent shell injection
- Path traversal protection: `validatePath()`, `resolveWritablePath()`, blocks sensitive system dirs
- Permission handler only allows `clipboard-read`/`clipboard-write`
- Rate limiter on conversions (2-second minimum interval)
- File size limit: 50MB
- Error message sanitization strips absolute paths
### Plugin System (`src/plugins/`)
Manifest-based discovery (`manifest.json`). Built-in `writing-studio` plugin with sprint/goal/snapshot management. Plugin API exposed via `src/plugins/plugin-api.js`.
### Settings
Custom JSON file store at `<userData>/settings.json` (NOT `electron-store` despite the dependency). Recent files at `<userData>/recent-files.json`.
## System Dependencies
| Dependency | Required | Notes |
|---|---|---|
| **Node.js** | >= 20 | Electron 41 bundles Node 20.x |
| **Pandoc** | Yes (for exports) | Downloaded to `bin/<platform>/pandoc` via `scripts/download-tools.js` (v3.9.0.2). Falls back to system PATH. Must be present for DOCX/ODT/EPUB/LaTeX/PPTX export. |
| **FFmpeg** | Bundled | `ffmpeg-static` npm package; `asarUnpacked` for packaged builds |
| **MiKTeX / TeX Live** | Optional | For LaTeX PDF export; MiKTeX PATH injected on Windows automatically |
| **ImageMagick** | Optional | Linux image conversion; listed as deb dependency |
| **LibreOffice** | Optional | Enhanced document conversion; listed as deb dependency |
## Development Commands
```bash
npm start # Launch Electron app (dev mode)
npm test # Jest test suite
npm test:watch # Jest in watch mode
npm test:coverage # Jest with coverage report
npm run lint # ESLint check (src + tests)
npm run lint:fix # ESLint auto-fix
npm run format # Prettier write
npm run format:check # Prettier check only
npm run download-tools # Download Pandoc binaries to bin/
npm run generate-icons # Generate app icons via sharp
```
## Build & Package
**Tool:** `electron-builder` (v26.0.12), config inline in `package.json` (no separate config file).
| Target | Platforms |
|---|---|
| `npm run build` | electron-builder (default platform) |
| `npm run build:win` | Windows: NSIS installer + portable + zip (x64) |
| `npm run build:mac` | macOS: default dmg |
| `npm run build:linux` | Linux: deb + AppImage + snap |
| `npm run dist` | Build without publish |
| `npm run dist:all` | Build for all platforms |
**Bundled with builds:** Pandoc binary per platform. FFmpeg via `ffmpeg-static` (asarUnpacked). NSIS installer uses custom script at `scripts/nsis-installer.nsh`.
**Output:** `dist/` directory.
**CI:** GitHub Actions workflows in `.github/workflows/` (ci.yml, release.yml).
## Project Conventions / Gotchas
- **No bundler/transpilation.** The app uses vanilla CommonJS JavaScript. `src/main.js` is loaded directly by Electron. No webpack, no Vite, no TypeScript, no Babel.
- **Monolithic files.** `main.js` (4,260 lines) and `renderer.js` (5,361 lines) contain most logic. Not ideal but is the current state of this branch.
- **CodeMirror 6** for the editor, configured in `src/editor/codemirror-setup.js`.
- **PDF rendering** uses `pdfjs-dist`; **PDF manipulation** uses `pdf-lib` in the main process.
- **Renderer security is weak** — full Node access in renderer. Do NOT introduce new privileged renderer code without understanding this.
- **Pandoc is external.** Must be installed separately or downloaded via `npm run download-tools`. HTML and built-in PDF export work without Pandoc; other formats require it.
- **PDF export fallback chain:** xelatex -> pdflatex -> lualatex -> Electron built-in `printToPDF()`.
- **ESLint flat config** (`eslint.config.js`) with ECMAScript 2022. Prettier with 2-space indent, single quotes, semicolons, 100-char width.
- **Tests:** Jest with jsdom environment, 15% coverage threshold. 24 test files in `tests/`.
- **File associations:** `.md`, `.markdown`, `.pdf` registered at install.
- **Single instance lock** enforced via `app.requestSingleInstanceLock()`.
- **Adapters layer** (`src/adapters/`) abstracts file system operations for potential future non-Electron targets.
+1 -1
View File
@@ -162,4 +162,4 @@ Amit Haridas (amit.wh@gmail.com)
## Version ## Version
v4.1.0 v4.4.5
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 361 KiB

File diff suppressed because it is too large Load Diff
@@ -1,361 +0,0 @@
# MarkdownConverter — React + shadcn/ui UI Redesign
**Date:** 2026-06-05
**Status:** Design (awaiting user approval)
**Branch:** `react-electron`
**Author:** Brainstormed with user via superpowers:brainstorming
## Summary
Replace the legacy vanilla JS renderer (`src/renderer.js` is 213 KB; `src/styles.css` is 74 KB) with a modern React 19 + Vite + TypeScript + shadcn/ui renderer that achieves visual feature parity while delivering a Polished + Glassy (Raycast/Arc-style) aesthetic. The Electron main process, preload bridge, and IPC contracts stay unchanged. Work proceeds via vertical slices — each PR ships a demoable feature.
## Goals
1. Replace every render-time feature of the legacy renderer with an idiomatic React + shadcn/ui implementation.
2. Adopt the "Polished + Glassy" visual language (subtle shadows, 812 px radii, gradient accents, gentle depth) on top of the existing ConcreteInfo brand tokens and design system.
3. Use a single component foundation (shadcn/ui) and a single motion library (Motion / Framer Motion) to keep the dependency surface narrow and the design coherent.
4. Keep the main process, preload, and IPC contracts untouched. The renderer is the only surface being rewritten.
5. Keep the app runnable at every commit. No "big bang" merge.
## Non-Goals
- Migrating the main process to TypeScript (out of scope for this spec).
- Adding new features the legacy renderer does not have (plugin system, AI features, etc. — those are future specs).
- Replacing Pandoc/FFmpeg/ImageMagick orchestration.
- Changing the packaging pipeline (electron-builder config stays).
- Replacing the CodeMirror 6 editor — it is the right tool and is already wired up.
## Decisions Locked During Brainstorming
| Decision | Choice | Why |
|---|---|---|
| Scope | Full feature parity with legacy renderer | User-selected option. Renderer is one cohesive surface; splitting it across specs would force premature contracts. |
| Visual style | **B — Polished + Glassy** (Raycast/Arc aesthetic) | "Fancy" comes from elevation, gradient accents, and material depth — not over-designed visuals. |
| Layout | **2 — IDE-style** (equal editor/preview, draggable divider, collapsible sidebar) | Power-user markdown apps converge on this. Draggable divider + keyboard reset. |
| Modal patterns | **A (Centered Dialog), B (Right Side-Sheet), D (Toasts)** | No command palette. |
| Command palette | **No** — full menus, no ⌘K | Power users can use the OS-level launcher. App stays focused on writing. |
| Animation | **Motion (Framer Motion)** | Best for layout transitions, modal/drawer enter/exit, drag. Sparingly used. |
| Component library | **shadcn/ui** | Tailwind + Radix primitives, copy-paste ownership, perfect fit for the "glassy" aesthetic and the HSL-CSS-variable foundation that is already in place. |
| Implementation strategy | **Vertical slices** — one feature end-to-end per PR | App stays runnable. Each PR is reviewable. |
## Defaults (Used Unless Overridden Later)
| Item | Default | Why |
|---|---|---|
| State management | Zustand (already in deps) + Immer for nested patches | Already in `package.json`; perfect for editor state. |
| Theming | shadcn `next-themes`, dark default + light, system-aware | shadcn canonical pattern. Brand colors already in CSS vars. |
| Icons | `lucide-react` (already in deps) | 1000+ tree-shakable icons. |
| Forms | `react-hook-form` + `zod` | Standard for shadcn forms. |
| Drag/drop (sortable lists) | `@dnd-kit/core` | De facto React drag lib (file tree reordering, plugin list reorder). |
| Pane resize (split layout) | `react-resizable-panels` | Canonical React lib for resizable pane groups; handles drag, arrow keys, snap, persisted sizes. |
| Testing | Vitest + RTL + Playwright (E2E + visual regression) | Standard for React + Electron. |
| TypeScript | Strict mode (already wired) | Already in deps and `vite.renderer.config.ts`. |
## Architecture
The Electron app keeps its existing process model. Only the renderer is rewritten.
```
┌──────────────────────────────────────────────────────────┐
│ Electron Main (UNCHANGED) │
│ - BrowserWindow, IPC handlers, file/fs ops │
│ - Pandoc, FFmpeg, ImageMagick orchestration │
└────────────┬─────────────────────────────────────────────┘
│ contextBridge (UNCHANGED preload.js)
┌────────────▼─────────────────────────────────────────────┐
│ React Renderer (REWRITTEN) │
│ ┌────────────────────────────────────────────────────┐ │
│ │ AppShell (layout) │ │
│ │ ├─ MenuBar (native) │ │
│ │ ├─ AppHeader (logo, breadcrumbs, theme toggle) │ │
│ │ ├─ TabBar (open files) │ │
│ │ ├─ Toolbar (formatting) │ │
│ │ ├─ ResizablePaneGroup (sidebar | editor | preview) │ │
│ │ │ ├─ Sidebar (file tree, outline) │ │
│ │ │ ├─ EditorPane (CodeMirror 6) │ │
│ │ │ └─ PreviewPane (marked + KaTeX + Mermaid) │ │
│ │ ├─ StatusBar (word count, encoding, cursor pos) │ │
│ │ └─ ModalLayer (Dialog, SideSheet, Toaster) │ │
│ └────────────────────────────────────────────────────┘ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Feature Modules (each owns UI + state slice) │ │
│ │ ├─ editor/ CodeMirror wrapper, syntax, themes │ │
│ │ ├─ preview/ markdown→html, KaTeX, Mermaid │ │
│ │ ├─ tabs/ open files, dirty state │ │
│ │ ├─ sidebar/ file tree, outline, search results │ │
│ │ ├─ modals/ export, settings, about, etc. │ │
│ │ ├─ tools/ zen, repl, ascii-gen, table-gen │ │
│ │ └─ export/ pdf, docx, html, image batch │ │
│ └────────────────────────────────────────────────────┘ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Shared Infrastructure │ │
│ │ ├─ stores/ Zustand slices per feature │ │
│ │ ├─ hooks/ useFile, useEditor, useTheme, etc. │ │
│ │ ├─ lib/ cn, ipc, formatters, validators │ │
│ │ ├─ ui/ shadcn primitives: button, dialog… │ │
│ │ └─ types/ shared TS types │ │
│ └────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘
```
### Architectural Rules
- **Shell components** (`AppHeader`, `TabBar`, `StatusBar`) subscribe only to `useAppStore`.
- **Feature components** subscribe to their own feature's store.
- **Cross-feature access** goes through hooks, not direct store imports (e.g., `useFileTree()` wraps `useFileStore`).
- **Feature modules are self-contained** — each owns its components, its Zustand slice, and its types. Safe to develop in parallel later.
- **No direct `window.electronAPI` calls** from feature code. All IPC goes through `lib/ipc.ts` for type safety and error normalization.
## State Management
```
stores/
├─ useAppStore // global UI: theme, sidebar, pane sizes, modals open
├─ useFileStore // file system: tree, open files, active tab
├─ useEditorStore // editor: per-file content, cursor, selection, dirty
├─ usePreviewStore // preview: scroll sync, zoom, theme
├─ useSettingsStore // user prefs (persisted to electron-store)
└─ useCommandStore // menu actions registry, recent actions
```
**Why slices instead of one mega-store?** Editor content can be megabytes. Keeping it in its own slice lets React avoid re-rendering the preview when only the editor changes — components subscribe with selectors.
**Persistent state** (auto-saved to electron-store via Zustand `persist` middleware): theme, sidebar visibility, last open files, pane divider positions, settings.
**Ephemeral state** (lost on quit): active modal, hover states, search query, current file content (saved to disk on idle).
## Visual Design System
### Color Tokens
The existing `globals.css` HSL variables stay. Additions for the "glassy" aesthetic:
```css
--shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
--shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
--shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
--shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
--glass-bg-light: rgba(255, 255, 255, 0.72);
--glass-bg-dark: rgba(13, 11, 9, 0.72);
--glass-border-light: rgba(255, 255, 255, 0.4);
--glass-border-dark: rgba(255, 255, 255, 0.08);
```
### shadcn Components
Install via `npx shadcn@latest add`:
**Primitives** (need all of these): `button`, `dialog`, `sheet`, `popover`, `tooltip`, `select`, `dropdown-menu`, `tabs`, `separator`, `scroll-area`, `toggle`, `switch`, `slider`, `input`, `textarea`, `label`, `form`, `skeleton`, `sonner`, `command`.
**Composite** (custom-built on top of primitives): `file-tree`, `pane-group`, `divider`, `status-bar`, `menu-bar`, `toast`.
### Typography
- Body: Plus Jakarta Sans 15 px / line-height 1.6
- Code: JetBrains Mono 13.5 px
- Display: Barlow Condensed 700/800 — used sparingly (page titles, big metrics)
- Headings: Plus Jakarta Sans 600/700 with tight letter-spacing
- Labels (`.label`): Plus Jakarta Sans 500, 12 px, uppercase, 0.05 em letter-spacing
### Motion Choreography
| Element | Motion | Duration | Easing |
|---|---|---|---|
| Modal (Dialog A) | Scale 0.96→1, opacity 0→1 | 200 ms | `ease-out` |
| Side sheet (B) | TranslateX 100%→0, opacity 0→1 | 300 ms | `cubic-bezier(0.16, 1, 0.3, 1)` |
| Toast | TranslateY 100%→0, opacity | 250 ms | spring(stiffness: 300, damping: 30) |
| Sidebar toggle | Width 264 px↔72 px, content fade | 250 ms | `ease-in-out` |
| Divider drag | Live width update | 0 ms | none (instant) |
| Theme switch | CSS variables, opacity overlay | 300 ms | `ease-in-out` |
| Tab switch | Underline slide | 200 ms | `ease-out` |
| Hover (buttons) | `bg` + `shadow` shift | 150 ms | `ease-out` |
| Focus ring | Outline grow | 100 ms | `ease-out` |
**Rules:** Every motion has a purpose. No gratuitous animation. Respects `prefers-reduced-motion` (Motion handles this automatically).
### Empty / Loading / Error States
Every async surface ships all three. Sonner toasts for ephemeral feedback. Skeleton screens for content areas. Empty-state components with icon + message + primary CTA.
## Modal/Overlay Patterns
| Use case | Pattern | Why |
|---|---|---|
| Export (PDF/DOCX/HTML) | A — Centered Dialog | Focused decision, ~35 fields, "do one thing" |
| Settings | B — Right Side-Sheet | Long form, tabbed sections, stays open while editing |
| Find/Replace | Inline toolbar (not modal) | Always-visible utility |
| About | A — Centered Dialog | Tiny info dump |
| Confirm destructive (delete, close unsaved) | A — Centered Dialog | Forces attention |
| File save error | D — Toast | Non-blocking info |
| Pandoc/FFmpeg progress | D — Toast → sticky on >3 s | Background work feedback |
| Plugin manager | B — Right Side-Sheet | Lists + per-item actions |
| ASCII/Table generators | A — Centered Dialog | Tool-style focused input → output |
| Print preview | A — Centered Dialog | Full-screen-ish modal overlay |
| Welcome (first launch) | A — Centered Dialog | One-time onboarding |
| Word export | A — Centered Dialog | Template selection |
| Zen mode | Full-viewport toggle (no modal) | Replaces the editor entirely |
| REPL | Bottom-pinned panel (split-pane) | Persistent terminal-like UI |
| Quick file open | B — Right Side-Sheet | File tree, search, recent |
### Dialog A Anatomy (Export as example)
```
┌─ Backdrop (rgba(13,11,9,0.45) + backdrop-blur 4px) ─────────┐
│ │
│ ┌──── Modal (max-w-md, rounded-2xl, shadow-lg) ─────┐ │
│ │ ┌── Header ────────────────────────────────────┐ │ │
│ │ │ [Icon] Export as PDF [×] │ │ │
│ │ │ Choose format options │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ ┌── Body ──────────────────────────────────────┐ │ │
│ │ │ Format: [Letter] [A4] [Legal] │ │ │
│ │ │ Margins: ────●──── │ │ │
│ │ │ ☐ Include table of contents │ │ │
│ │ │ ☐ Embed fonts │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ ┌── Footer ────────────────────────────────────┐ │ │
│ │ │ [Cancel] [Export →] │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────┘
```
### Side-Sheet B Anatomy (Settings as example)
Slides in from right, ~50 % width (max 560 px). Backdrop is `rgba(13,11,9,0.2)` with `backdrop-blur(2 px)` (lighter than dialog — the sheet is the focus). Tab navigation in the sheet header (Editor / Theme / Export / Plugins / About).
### Toast D Anatomy (Sonner)
Stacked bottom-right, max 3 visible. Glass background. Color-coded 3 px left border — success `#1a7a56`, error `#ef4444`, info `#0ea5e9`, warning `#eab308`. Icon + title + description. Optional action button. Auto-dismiss 4 s for success, sticky for error.
## Data Flow (Editor → Preview Pipeline)
```
User types
CodeMirror onChange
useEditorStore.updateContent(tabId, content) ← debounced 50 ms
┌─ Persist to electron-store on idle (1 s) ─┐
│ │
└─ Publish to usePreviewStore (subscribed) ─┘
marked(content) → sanitized HTML
PreviewPane renders HTML
KaTeX post-processes $...$
Mermaid post-processes ```mermaid
Highlight.js post-processes ```lang
useEffect: scroll-sync editor cursor → preview position
```
**Bidirectional scroll sync:** editor scroll → preview (primary), preview click → editor cursor (secondary). Throttled to 60 fps via `requestAnimationFrame`.
## IPC Contract
The preload bridge stays unchanged. A new `src/renderer/lib/ipc.ts` wraps every channel with TypeScript types and normalizes errors to a discriminated union:
```ts
type IpcResult<T> =
| { ok: true; data: T }
| { ok: false; error: { code: string; message: string } };
export const ipc = {
file: {
open: (): Promise<IpcResult<FileResult>>,
read: (path: string): Promise<IpcResult<string>>,
write: (path: string, content: string): Promise<IpcResult<void>>,
list: (dir: string): Promise<IpcResult<FileEntry[]>>,
onChange: (cb: (path: string) => void) => () => void,
},
export: {
pdf: (opts: PdfOptions): Promise<IpcResult<ExportResult>>,
docx: (opts: DocxOptions): Promise<IpcResult<ExportResult>>,
html: (opts: HtmlOptions): Promise<IpcResult<ExportResult>>,
batch: (items: BatchItem[], opts: BatchOptions): Promise<IpcResult<BatchResult>>,
},
app: {
getVersion: (): Promise<IpcResult<string>>,
openExternal: (url: string): Promise<IpcResult<void>>,
showItemInFolder: (path: string): Promise<IpcResult<void>>,
},
};
```
## Error Handling
Layered defense — no single failure can crash the app:
1. **IPC errors** → caught in `lib/ipc.ts` wrapper, returned as `IpcResult<T>` discriminated union. Components show toast on error.
2. **Component errors** → React error boundary per feature area (one for editor, one for preview, one for modals). On error: show inline error UI with "Reload this panel" + "Copy details" actions.
3. **Async operations** (export, file ops) → loading state on button + toast on completion. Long ops (>2 s) get a sticky toast with cancel.
4. **Validation errors** (settings, export options) → inline form errors via `react-hook-form` + `zod`. shadcn `Form` component for consistent error display.
5. **Pandoc/FFmpeg missing** → detected at startup, banner + disable export menu items. Don't surprise-fail at export time.
## Testing Strategy
- **Unit (Vitest):** stores, hooks, lib utilities, formatters, validators
- **Component (Vitest + RTL):** shadcn wrappers, dialog interactions, sidebar toggle, divider drag, theme toggle
- **Integration (Vitest + RTL):** editor ↔ preview flow, file open → tab add → content display, settings change persists
- **E2E (Playwright):** app launches, file opens, markdown renders, export to PDF works
- **Visual regression (Playwright snapshots):** locked-in screenshots for header, sidebar, dialogs, toasts — catch accidental style drift
- **Target coverage:** stores/hooks/lib ≥ 90 %, components ≥ 75 %, E2E covers all critical paths
## Accessibility (WCAG 2.1 AA)
Baked in via shadcn + Radix:
- All dialogs focus-trap, Esc to close, return focus to trigger
- All interactive elements keyboard-reachable
- Visible focus rings (2 px brand ring)
- 4.5:1 contrast minimum (already met by brand colors)
- `aria-label` on icon buttons, `role="alert"` on toasts
- Respects `prefers-reduced-motion` (Motion handles this automatically)
## Implementation Phases (Vertical Slices)
Each phase is a shippable PR that keeps the app runnable. The legacy `renderer.js` is gradually replaced; until each phase is complete, the old renderer code still runs the missing parts.
| # | Phase | Output | Acceptance |
|---|---|---|---|
| 1 | **Foundation** | shadcn installed; `next-themes`, `motion`, `react-hook-form`, `zod`, `@dnd-kit/core`, `react-resizable-panels`, `sonner` installed; design tokens finalized; `lib/utils.ts` (`cn`), `lib/ipc.ts` typed wrappers, `lib/motion.ts` preset transitions, `App.tsx` shell skeleton renders | `npm run build` succeeds; dev server shows the new shell with theme toggle working |
| 2 | **App shell + layout** | `AppHeader`, `TabBar`, `Toolbar`, `Breadcrumb`, `StatusBar`, `ResizablePaneGroup` with sidebar toggle and draggable divider. Empty editor/preview panes. | Resize divider with mouse and arrow keys; sidebar collapses; pane sizes persist. |
| 3 | **Editor pane** | CodeMirror 6 wrapped, dark/light themes wired to shadcn theme, syntax highlighting, line numbers, search, autocomplete | Open `.md` file → renders in editor; can edit and save. |
| 4 | **Preview pane** | marked + DOMPurify + KaTeX + Mermaid + highlight.js. Bidirectional scroll sync with editor. | Open file → preview renders, follows cursor. |
| 5 | **File tree + tabs** | Sidebar file tree (read directory on demand, lazy-expand children only on click). Tabs for open files. Dirty state indicator. File content is read from disk only when the tab is activated. | Open folder → root populates; click folder → children load; click file → opens in tab; close tab reverts dirty. |
| 6 | **Native menus + toolbar** | Replace the legacy `CommandPalette` with full menus (File / Edit / View / Insert / Format / Tools / Help) bound to keyboard shortcuts. Toolbar buttons. | All menu items invoke the right action; shortcuts work; toolbar reflects active state. |
| 7 | **Modals** | Export dialog (PDF/DOCX/HTML/batch), Settings side-sheet (Editor/Theme/Export/Plugins/About tabs), About dialog, Confirm-destructive dialog | All dialogs and sheet render with proper motion; settings persist; export works end-to-end. |
| 8 | **Toasts** | Sonner wired into all async operations (save, export, errors, tool missing) | All operations give appropriate feedback; no silent failures. |
| 9 | **Advanced tools** | Zen mode (full-viewport toggle), REPL (bottom-pinned panel), ASCII generator, Table generator, Word export template picker, Print preview | Each tool is feature-complete vs. legacy version. |
| 10 | **Polish + delete legacy** | Visual regression snapshots locked; remove `renderer.js` and old `styles*.css` references from build; `npm run build:linux` produces a working installer | Final PR ships an installer with no legacy code paths. |
## Risks and Mitigations
| Risk | Mitigation |
|---|---|
| shadcn CLI requires Vite (not vanilla Electron renderer) | Vite is already configured for the renderer in `vite.renderer.config.ts`; the CLI works against the same project. |
| shadcn CLI assumes Tailwind is at project root; we have it in renderer/ only | Point the CLI at `src/renderer/components.json` and set `tailwind.css` to the right path. |
| Marked + KaTeX + Mermaid + highlight.js together is heavy | Lazy-load Mermaid (only when `mermaid` code block encountered). KaTeX is loaded once, cached. |
| Editor content state can be megabytes → re-render storms | Editor content lives in its own slice; preview subscribes to a derived/cached HTML string; components use `useShallow` / selector subscriptions. |
| Bidirectional scroll sync loops | `useEffect` debounce + ignore if cursor/selection is the sync source. |
| CodeMirror 6 doesn't ship a Tailwind theme by default | Use `@codemirror/theme-one-dark` for dark; build a custom theme that pulls from CSS variables for light. |
| The legacy `renderer.js` and `styles*.css` are referenced from `index.html` (now `src/renderer/index.html`) | Phase 10 deletes the references; until then, both run side-by-side and the new React app sits in a known root div. |
| Electron `nodeIntegration` is off; we use contextBridge | Already the case. Document the contract clearly in `lib/ipc.ts`. |
## Open Questions (to confirm before implementation)
None. All major decisions are locked. Defaults will be used unless the user overrides them when reviewing the implementation plan.
## References
- `src/renderer.js` (213 KB) — legacy renderer being replaced
- `src/styles.css` (74 KB), `src/styles-modern.css` (71 KB), `src/styles-concreteinfo.css` (21 KB) — legacy styles being replaced
- `src/renderer/styles/globals.css` — already shadcn-compatible (HSL CSS variables)
- `src/renderer/App.tsx` — empty skeleton that references components we will build
- `tailwind.config.js` — brand colors and fonts already defined
- `vite.renderer.config.ts` — Vite + React plugin already configured
- `package.json` — CodeMirror 6, TanStack Table, lucide-react, cva, clsx, tailwind-merge, tailwindcss-animate already installed
+38 -1812
View File
File diff suppressed because it is too large Load Diff
+3 -20
View File
@@ -1,6 +1,6 @@
{ {
"name": "markdown-converter", "name": "markdown-converter",
"version": "4.4.2", "version": "4.4.5",
"description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting", "description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
"main": "src/main.js", "main": "src/main.js",
"scripts": { "scripts": {
@@ -44,12 +44,6 @@
}, },
"devDependencies": { "devDependencies": {
"@testing-library/dom": "^10.4.1", "@testing-library/dom": "^10.4.1",
"@types/react": "^19.2.16",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.2",
"autoprefixer": "^10.5.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cross-env": "^10.0.0", "cross-env": "^10.0.0",
"electron": "^41.1.1", "electron": "^41.1.1",
"electron-builder": "^26.0.12", "electron-builder": "^26.0.12",
@@ -58,15 +52,8 @@
"eslint-plugin-prettier": "^5.5.4", "eslint-plugin-prettier": "^5.5.4",
"jest": "^30.2.0", "jest": "^30.2.0",
"jest-environment-jsdom": "^30.2.0", "jest-environment-jsdom": "^30.2.0",
"lucide-react": "^1.17.0",
"postcss": "^8.5.15",
"prettier": "^3.7.4", "prettier": "^3.7.4",
"sharp": "^0.34.3", "sharp": "^0.34.3"
"tailwind-merge": "^3.6.0",
"tailwindcss": "^3.4.19",
"tailwindcss-animate": "^1.0.7",
"typescript": "^6.0.3",
"vite": "^8.0.16"
}, },
"dependencies": { "dependencies": {
"@codemirror/autocomplete": "^6.20.1", "@codemirror/autocomplete": "^6.20.1",
@@ -83,7 +70,6 @@
"@codemirror/state": "^6.5.4", "@codemirror/state": "^6.5.4",
"@codemirror/theme-one-dark": "^6.1.3", "@codemirror/theme-one-dark": "^6.1.3",
"@codemirror/view": "^6.39.16", "@codemirror/view": "^6.39.16",
"@tanstack/react-table": "^8.21.3",
"codemirror": "^6.0.2", "codemirror": "^6.0.2",
"core-util-is": "^1.0.3", "core-util-is": "^1.0.3",
"docx": "^9.6.0", "docx": "^9.6.0",
@@ -101,11 +87,8 @@
"pdfjs-dist": "^5.5.207", "pdfjs-dist": "^5.5.207",
"pdfkit": "^0.17.2", "pdfkit": "^0.17.2",
"pizzip": "^3.2.0", "pizzip": "^3.2.0",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"simple-git": "^3.32.3", "simple-git": "^3.32.3",
"tslib": "^2.8.1", "tslib": "^2.8.1"
"zustand": "^5.0.14"
}, },
"overrides": { "overrides": {
"jszip": "^3.10.1", "jszip": "^3.10.1",
-6
View File
@@ -1,6 +0,0 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
+604
View File
@@ -0,0 +1,604 @@
# Repository Structure Map
Auto-generated by `~/.claude-shared/scripts/repo-map.sh` (universal-ctags).
Signatures only — classes, functions, methods, interfaces, enums, types, namespaces, traits.
Regenerate after structural changes. Languages: `JavaScript,Sh`.
```
scripts/download-tools.js:
L22 method extract (PANDOC_CONFIG.linux)
L36 method extract (PANDOC_CONFIG.win32)
L51 method extract (PANDOC_CONFIG.darwin)
L63 function download
L70 function get (download)
L109 function downloadPandoc
scripts/generate-icons.js:
L17 function generateIcons
src/adapters/electron/fs.js:
L20 method readFile (electronFsAdapter)
L30 method writeFile (electronFsAdapter)
L39 method deleteFile (electronFsAdapter)
L48 method ensureDir (electronFsAdapter)
L57 method listDirectory (electronFsAdapter)
L77 method exists (electronFsAdapter)
L86 method isDirectory (electronFsAdapter)
L96 method copy (electronFsAdapter)
L106 method move (electronFsAdapter)
src/analytics/analytics-panel.js:
L7 function showAnalyticsModal
L105 function escHandler (showAnalyticsModal)
L116 function escapeHtml
src/analytics/writing-analytics.js:
L77 function countSyllables
L83 function extractWords
L87 function getReadabilityLabel
L95 function analyze
src/command-palette.js:
L1 class CommandPalette
L2 method constructor (CommandPalette)
L12 method register (CommandPalette)
L16 method open (CommandPalette)
L24 method close (CommandPalette)
L28 method isOpen (CommandPalette)
L32 method setupEventListeners (CommandPalette)
L61 method renderResults (CommandPalette)
L90 method highlightMatch (CommandPalette)
L96 method updateSelection (CommandPalette)
L105 method executeSelected (CommandPalette)
src/editor/codemirror-setup.js:
L46 function createEditor
L61 function onChange (createEditor)
L118 function getLanguageExtension
L120 method javascript (getLanguageExtension.loaders)
L124 method html (getLanguageExtension.loaders)
L128 method css (getLanguageExtension.loaders)
L132 method json (getLanguageExtension.loaders)
L136 method python (getLanguageExtension.loaders)
src/main.js:
L18 function getPandocPath
L36 function getFFmpegPath
L55 function sanitizeErrorMessage
L64 function createRateLimiter
L66 function canProceed (createRateLimiter)
L83 function validatePath
L136 function resolveWritablePath
L181 function isPathAccessible
L203 function convertDataToMarkdown
L225 function runPandocCmd
L247 function parseCommand
L282 method get (store)
L291 method set (store)
L488 function checkPandocAvailability
L500 function createWindow
L586 function buildRecentFilesMenu
L599 method click (buildRecentFilesMenu.anonymousObjectc5643c890c05)
L637 function getRecentFiles
L647 function createMenu
L872 method click (createMenu.anonymousObjectc5643c890e05.anonymousObjectc5643c894505)
L1118 method click (createMenu.anonymousObjectc5643c895205.anonymousObjectc5643c897e05)
L1279 method click (createMenu.anonymousObjectc5643c899305.anonymousObjectc5643c89a505)
L1351 function showAboutDialog
L1452 function showDependenciesDialog
L1564 function openPDFFile
L1583 function openFile
L1622 function openPdfFile
L1645 function saveAsFile
L1664 function exportFile
L1673 function showExportOptionsDialog
L1676 function showBatchConversionDialog
L1681 function selectWordTemplate
L1705 function showTemplateSettings
L1902 function processDynamicFields
L1921 function setDocxPageSize
L1980 function addHeaderFooterToDocx
L2111 function exportWordWithTemplate
L2153 function exportPDFViaWordTemplate
L2231 function showUniversalConverterDialog
L2236 function showPDFEditorDialog
L2246 function checkConverterAvailable
L2370 function collectFiles
L2464 function convertWithLibreOffice
L2498 function convertWithImageMagick
L2507 function convertWithFFmpeg
L2515 function convertWithPandoc
L2521 function performExportWithOptions
L2805 function tryPdfFallback
L2882 function showExportSuccess
L2892 function exportWithPandoc
L2964 function exportToHTML
L3080 function exportToPDFElectron
L3224 function exportSpreadsheet
L3233 function importDocument
L3355 function setTheme
L3536 function extractTablesFromMarkdown
L3574 function performBatchConversion
L3597 function findMarkdownFiles (performBatchConversion)
L3636 function processNextFile (performBatchConversion)
L3970 function handleCLIConversion
L3997 function showConversionDialog
L4064 function performCLIConversion
L4098 function buildPandocCommand
L4319 function openFileFromPath
L4394 function openAsciiGenerator
L4426 function openTableGenerator
L4724 function loadSnippets
L4734 function saveSnippetsFile
src/main/GitOperations.js:
L3 function getGitInstance
L7 function getStatus
L16 function stage
L26 function commit
L35 function log
src/main/PDFOperations.js:
L5 function parsePageRanges
L28 function hexToRgb
L39 function pdfMerge
L59 function pdfSplit
L126 function pdfCompress
L152 function pdfRotate
L182 function pdfDeletePages
L208 function pdfReorder
L233 function pdfWatermark
L319 function pdfEncrypt
L353 function pdfDecrypt
L370 function pdfSetPermissions
L404 function executeOperation
L431 function getPageCount
src/plugins/built-in/_sample/index.js:
L3 class SamplePlugin
L4 method init (SamplePlugin)
src/plugins/built-in/writing-studio/goal-tracker.js:
L3 class GoalTracker
L7 method constructor (GoalTracker)
L11 method _getHistory (GoalTracker)
L16 method _setHistory (GoalTracker)
L20 method _setHistoryDay (GoalTracker)
L26 method addWords (GoalTracker)
L37 method getDailyProgress (GoalTracker)
L44 method getStreak (GoalTracker)
L61 method getLast30Days (GoalTracker)
L74 method getWeeklyTotal (GoalTracker)
src/plugins/built-in/writing-studio/index.js:
L7 class WritingStudioPlugin
L8 method init (WritingStudioPlugin)
L34 method _registerCommands (WritingStudioPlugin)
L112 method _registerStatusBar (WritingStudioPlugin)
L123 method deactivate (WritingStudioPlugin)
L127 method getEngines (WritingStudioPlugin)
src/plugins/built-in/writing-studio/panels/goals-panel.js:
L1 function renderGoalsPanel
src/plugins/built-in/writing-studio/panels/manuscript-panel.js:
L1 function renderManuscriptPanel
src/plugins/built-in/writing-studio/panels/proofread-panel.js:
L1 function renderProofreadPanel
L41 method callback (anonymousObject39a0f0110105)
L50 function renderIssues
src/plugins/built-in/writing-studio/panels/snapshots-panel.js:
L1 function renderSnapshotsPanel
src/plugins/built-in/writing-studio/project-manager.js:
L1 class ProjectManager
L5 method constructor (ProjectManager)
L9 method createProject (ProjectManager)
L21 method loadProject (ProjectManager)
L27 method _saveProject (ProjectManager)
L31 method addChapter (ProjectManager)
L38 method updateChapter (ProjectManager)
L45 method compileManuscript (ProjectManager)
L56 method getStats (ProjectManager)
src/plugins/built-in/writing-studio/snapshot-manager.js:
L1 class SnapshotManager
L6 method constructor (SnapshotManager)
L11 method _getAll (SnapshotManager)
L16 method _saveAll (SnapshotManager)
L20 method create (SnapshotManager)
L34 method list (SnapshotManager)
L38 method getById (SnapshotManager)
L42 method restore (SnapshotManager)
L48 method delete (SnapshotManager)
L53 method diff (SnapshotManager)
L71 method prune (SnapshotManager)
src/plugins/built-in/writing-studio/sprint-engine.js:
L1 class SprintEngine
L6 method constructor (SprintEngine)
L14 method start (SprintEngine)
L22 method stop (SprintEngine)
L33 method tick (SprintEngine)
L43 method isActive (SprintEngine)
L47 method getRemaining (SprintEngine)
src/plugins/event-bus.js:
L1 class EventBus
L2 method constructor (EventBus)
L6 method on (EventBus)
L13 method off (EventBus)
L25 method emit (EventBus)
L37 method hasHandler (EventBus)
src/plugins/plugin-api.js:
L1 class PluginAPI
L7 method init (PluginAPI)
L12 method activate (PluginAPI)
L15 method deactivate (PluginAPI)
L18 method getManifest (PluginAPI)
src/plugins/plugin-context.js:
L1 class PluginContext
L14 method constructor (PluginContext)
L23 method register (PluginContext.constructor.commands)
L24 function safeHandler (PluginContext.constructor.commands.register)
L65 method registerPreHook (PluginContext.constructor.exports)
L68 method registerPostHook (PluginContext.constructor.exports)
src/plugins/plugin-loader.js:
L4 class PluginLoader
L8 method constructor (PluginLoader)
L17 method discoverPlugins (PluginLoader)
L66 method validateManifest (PluginLoader)
src/plugins/plugin-registry.js:
L4 class PluginRegistry
L5 method constructor (PluginRegistry)
L15 method register (PluginRegistry)
L49 method getPlugin (PluginRegistry)
L53 method getAll (PluginRegistry)
L57 method activate (PluginRegistry)
L68 method deactivate (PluginRegistry)
src/plugins/settings-store.js:
L1 class SettingsStore
L5 method constructor (SettingsStore)
L9 method get (SettingsStore)
L13 method set (SettingsStore)
L17 method onChanged (SettingsStore)
src/preload.js:
L257 method send (anonymousObjectb0724fcb0105)
L271 method invoke (anonymousObjectb0724fcb0105)
L290 method on (anonymousObjectb0724fcb0105)
L292 function subscription (anonymousObjectb0724fcb0105.on)
L310 method once (anonymousObjectb0724fcb0105)
L322 method removeAllListeners (anonymousObjectb0724fcb0105)
src/print-preview.js:
L1 class PrintPreview
L2 method constructor (PrintPreview)
L9 method open (PrintPreview)
L20 method close (PrintPreview)
L28 method setupEventListeners (PrintPreview)
L53 method updateScaleLabel (PrintPreview)
L59 method updatePreview (PrintPreview)
L111 method refreshPreview (PrintPreview)
L117 method getOptions (PrintPreview)
L130 method executePrint (PrintPreview)
src/renderer.js:
L19 method send (window.electronAPI)
L22 method invoke (window.electronAPI)
L25 method on (window.electronAPI)
L26 function subscription (window.electronAPI.on)
L32 method once (window.electronAPI)
L35 method removeAllListeners (window.electronAPI)
L81 function getSidebarManager
L85 function getRenderTemplatesPanel
L90 function getRenderExplorerPanel
L95 function getRenderGitPanel
L99 function getRenderSnippetsPanel
L105 function getRenderOutlinePanel
L110 function getReplPanel
L114 function getCommandPalette
L118 function getPrintPreview
L122 function getCreateWelcomeContent
L127 function getZenMode
L132 function getShowAnalyticsModal
L137 function ensureToastContainer
L147 function notifyUser
L159 function dismiss (notifyUser)
L173 method highlight (anonymousObject71555c7b0405)
L202 method start (anonymousObject71555c7b0705.anonymousObject71555c7b0805)
L205 method tokenizer (anonymousObject71555c7b0705.anonymousObject71555c7b0805)
L221 method renderer (anonymousObject71555c7b0705.anonymousObject71555c7b0805)
L241 function plantumlEncode (notifyUser)
L249 function scopeCSS (notifyUser)
L271 class TabManager (notifyUser)
L272 method constructor (notifyUser.TabManager)
L306 method setupEventListeners (notifyUser.TabManager)
L354 method createNewTab (notifyUser.TabManager)
L379 method createPdfTab (notifyUser.TabManager)
L405 method createPdfTabElements (notifyUser.TabManager)
L436 method setupPdfTabEvents (notifyUser.TabManager)
L503 method loadPdfInTab (notifyUser.TabManager)
L528 method renderPdfPageInTab (notifyUser.TabManager)
L555 method createTabElements (notifyUser.TabManager)
L580 method onChange (anonymousObject71555c7b0d05)
L602 method onUpdate (anonymousObject71555c7b0d05)
L614 method switchToTab (notifyUser.TabManager)
L641 method switchToNextTab (notifyUser.TabManager)
L647 method closeTab (notifyUser.TabManager)
L692 method updateTabBar (notifyUser.TabManager)
L718 method updateUI (notifyUser.TabManager)
L748 method saveCurrentTabState (notifyUser.TabManager)
L756 method restoreTabState (notifyUser.TabManager)
L765 method focusActiveEditor (notifyUser.TabManager)
L771 method updatePreview (notifyUser.TabManager)
L800 method _hash (notifyUser.TabManager)
L809 method _renderPreview (notifyUser.TabManager)
L963 function onerror (img)
L997 method updatePreviewVisibility (notifyUser.TabManager)
L1010 method updateLineNumbers (notifyUser.TabManager)
L1015 method updateWordCount (notifyUser.TabManager)
L1031 method updateCursorPosition (notifyUser.TabManager)
L1038 method updateFilePath (notifyUser.TabManager)
L1046 method updateBreadcrumb (notifyUser.TabManager)
L1054 method setupEditorEvents (notifyUser.TabManager)
L1058 method handleEditorInput (notifyUser.TabManager)
L1073 method startAutoSave (notifyUser.TabManager)
L1081 method stopAutoSave (notifyUser.TabManager)
L1087 method performAutoSave (notifyUser.TabManager)
L1103 method showAutoSaveIndicator (notifyUser.TabManager)
L1119 method addToRecentFiles (notifyUser.TabManager)
L1135 method getRecentFiles (notifyUser.TabManager)
L1145 method setupToolbarEvents (notifyUser.TabManager)
L1215 method wrapSelection (notifyUser.TabManager)
L1233 method insertAtLineStart (notifyUser.TabManager)
L1249 method insertTable (notifyUser.TabManager)
L1259 method insertCodeBlock (notifyUser.TabManager)
L1277 method insertHorizontalRule (notifyUser.TabManager)
L1280 method setupFindEvents (notifyUser.TabManager)
L1350 method performFind (notifyUser.TabManager)
L1384 method findNext (notifyUser.TabManager)
L1390 method findPrevious (notifyUser.TabManager)
L1399 method highlightMatch (notifyUser.TabManager)
L1430 method replaceOne (notifyUser.TabManager)
L1454 method replaceAll (notifyUser.TabManager)
L1485 method clearFindHighlights (notifyUser.TabManager)
L1492 method checkForLargeFile (notifyUser.TabManager)
L1508 method openFile (notifyUser.TabManager)
L1555 method getEditorContent (notifyUser.TabManager)
L1564 method setEditorContent (notifyUser.TabManager)
L1579 method insertAtCursor (notifyUser.TabManager)
L1594 method getSelection (notifyUser.TabManager)
L1602 method replaceSelection (notifyUser.TabManager)
L1616 method getCurrentContent (notifyUser.TabManager)
L1620 method getCurrentFilePath (notifyUser.TabManager)
L1735 method render (anonymousObject71555c7b2d05)
L1788 method registerIndicator (anonymousObject71555c7b3105.statusBar)
L1881 function onload (reader)
L2032 method onChange (anonymousObject71555c7b3405)
L2040 method onUpdate (anonymousObject71555c7b3405)
L2164 function applyCustomPreviewCSS (notifyUser)
L2174 function triggerLoadCustomCSS (notifyUser)
L2188 function triggerClearCustomCSS (notifyUser)
L2202 function updateFontSizes (notifyUser)
L2234 function openPrintPreviewDialog (notifyUser)
L2255 function showExportDialog (notifyUser)
L2269 function hideExportDialog (notifyUser)
L2273 function initializeExportForm (notifyUser)
L2343 function collectExportOptions (notifyUser)
L2444 function loadExportProfiles (notifyUser)
L2456 function saveExportProfiles (notifyUser)
L2459 function populateProfileDropdown (notifyUser)
L2476 function saveCurrentProfile (notifyUser)
L2511 function loadProfile (notifyUser)
L2545 function deleteSelectedProfile (notifyUser)
L2679 function onchange (input)
L2776 function showBatchDialog (notifyUser)
L2796 function hideBatchDialog (notifyUser)
L2799 function updateBatchProgress (notifyUser)
L2816 function validateBatchForm (notifyUser)
L3375 function showUniversalConverterDialog (notifyUser)
L3383 function updateConverterFormats (notifyUser)
L3423 function updateConverterAdvancedOptions (notifyUser)
L3434 function collectConverterAdvancedOptions (notifyUser)
L3645 function showPDFEditorDialog (notifyUser)
L3769 function hidePDFEditorDialog (notifyUser)
L3780 function updateMergeFilesList (notifyUser)
L4107 function getPDFStatusElement (notifyUser)
L4110 function showPDFStatus (notifyUser)
L4117 function clearPDFStatus (notifyUser)
L4124 function showPDFValidationMessage (notifyUser)
L4135 function processPDFOperation (notifyUser)
L4379 function initMathSupport (notifyUser)
L4391 function onload (katexJS)
L4396 function onload (autoRenderJS)
L4417 function openHeaderFooterDialog (notifyUser)
L4425 function closeHeaderFooterDialog (notifyUser)
L4430 function openFieldPickerDialog (notifyUser)
L4436 function closeFieldPickerDialog (notifyUser)
L4477 function toggleConfigContent (notifyUser)
L4488 function saveHeaderFooterSettings (notifyUser)
L4509 function browseForLogo (notifyUser)
L4519 function clearLogo (notifyUser)
L4528 function insertDynamicField (notifyUser)
L4594 function showTableGenerator (notifyUser)
L4605 function hideTableGenerator (notifyUser)
L4608 function generateTablePreview (notifyUser)
L4616 function generateMarkdownTable (notifyUser)
L4685 function insertGeneratedTable (notifyUser)
L4742 function showASCIIGenerator (notifyUser)
L4753 function hideASCIIGenerator (notifyUser)
L4756 function switchASCIIMode (notifyUser)
L4784 function generateASCIIPreview (notifyUser)
L4802 function textToASCII (notifyUser)
L5238 function createASCIIBox (notifyUser)
L5312 function getASCIITemplate (notifyUser)
L5469 function loadASCIITemplate (notifyUser)
L5473 function insertASCIIArt (notifyUser)
L5523 function anonymousFunction71555c7bd300
L5603 function getPdfjsLib (notifyUser)
L5612 function openPdfFile (notifyUser)
L5627 function renderPdfPage (notifyUser)
L5733 function closePdfViewer (notifyUser)
L5783 function openPdfEditorDialog (notifyUser)
L5831 function initPaneResizer (notifyUser)
L5920 function onPDFFileSelected (notifyUser)
L5935 function loadPDFThumbnails (notifyUser)
L5966 function renderThumbnailGrid (notifyUser)
L6060 function renderThumbnail (notifyUser)
L6085 function syncRotateInput (notifyUser)
L6094 function syncDeleteInput (notifyUser)
L6103 function syncReorderInput (notifyUser)
src/repl/repl-panel.js:
L1 class ReplPanel
L2 method constructor (ReplPanel)
L8 method setupEventListeners (ReplPanel)
L13 method toggle (ReplPanel)
L19 method show (ReplPanel)
L25 method clear (ReplPanel)
L29 method appendOutput (ReplPanel)
L42 method escapeHtml (ReplPanel)
src/sidebar/explorer-panel.js:
L1 function renderExplorerPanel
L40 function renderTree
L79 function getFileIcon
src/sidebar/git-panel.js:
L1 function renderGitPanel
L24 function loadGitStatus (renderGitPanel)
src/sidebar/outline-panel.js:
L6 function renderOutlinePanel
L18 function parseHeadings (renderOutlinePanel)
L36 function findActiveHeading (renderOutlinePanel)
L48 function renderHeadings (renderOutlinePanel)
L89 function escapeHtml (renderOutlinePanel)
L95 function refresh (renderOutlinePanel)
L100 function setActiveHeading (renderOutlinePanel)
src/sidebar/sidebar-manager.js:
L1 class SidebarManager
L2 method constructor (SidebarManager)
L11 method setupEventListeners (SidebarManager)
L20 method registerPanel (SidebarManager)
L24 method togglePanel (SidebarManager)
L32 method expand (SidebarManager)
L45 method collapse (SidebarManager)
src/sidebar/snippets-panel.js:
L1 function renderSnippetsPanel
L14 function loadSnippets (renderSnippetsPanel)
L19 function renderList (renderSnippetsPanel)
src/sidebar/templates-panel.js:
L18 function renderTemplatesPanel
src/utils/ModalManager.js:
L5 class ModalManager
L16 method constructor (ModalManager)
L31 method init (ModalManager)
L47 method setupCloseTriggers (ModalManager)
L51 function handler (ModalManager.setupCloseTriggers)
L65 function handler
L74 method getFocusableElements (ModalManager)
L89 method trapFocus (ModalManager)
L111 method handleKeydown (ModalManager)
L119 method open (ModalManager)
L141 function keydownHandler (ModalManager.open)
L164 method close (ModalManager)
L182 function addHidden (ModalManager.close)
L188 function onTransitionEnd (ModalManager.close)
L223 method isOpen (ModalManager)
L227 method destroy (ModalManager)
src/welcome.js:
L1 function createWelcomeContent
src/wordTemplateExporter.js:
L11 class WordTemplateExporter
L12 method constructor (WordTemplateExporter)
L24 method preprocessMarkdownForWordExport (WordTemplateExporter)
L33 function flush (WordTemplateExporter.preprocessMarkdownForWordExport)
L59 function stripArtifacts (WordTemplateExporter.preprocessMarkdownForWordExport)
src/zen-mode.js:
L10 class ZenMode
L14 method constructor (ZenMode)
L23 method activate (ZenMode)
L65 method deactivate (ZenMode)
L101 method toggle (ZenMode)
L109 method _applyTypewriterBehavior (ZenMode)
L111 function scrollFn (ZenMode._applyTypewriterBehavior)
L151 method _createHUD (ZenMode)
L169 method _updateHUD (ZenMode)
L220 method constructor (anonymousObject3acf7ce30205)
L240 function getOpacity
L250 method constructor (anonymousObject3acf7ce30405)
tests/git-operations.test.js:
L26 function asyncFn
L35 function asyncFnWithError
tests/main-utils.test.js:
L7 function sanitizeErrorMessage
L49 function createRateLimiter
L51 function canProceed (createRateLimiter)
tests/markdown-extensions.test.js:
L83 method start (extension)
L86 method tokenizer (extension)
L102 method renderer (extension)
L151 function plantumlEncode
L176 function slugify
L203 function scopeCSS
tests/modal-manager.test.js:
L11 function createModalElement
tests/plugin-api.test.js:
L18 class MyPlugin
L19 method init (MyPlugin)
tests/plugin-context.test.js:
L39 function badHandler
tests/plugin-loader.test.js:
L17 function writeManifest
tests/plugin-registry.test.js:
L5 class TestPlugin
L6 method init (TestPlugin)
L10 method activate (TestPlugin)
L13 method deactivate (TestPlugin)
L69 class BadPlugin
L70 method init (BadPlugin)
tests/setup.js:
L96 function error (console)
tests/sidebar.test.js:
L41 method render (anonymousObjectfe2d35d70105)
L52 method render (anonymousObjectfe2d35d70205)
L62 method render (anonymousObjectfe2d35d70305)
L68 method render (anonymousObjectfe2d35d70405)
L80 method render (anonymousObjectfe2d35d70505)
L88 method render (anonymousObjectfe2d35d70605)
L96 method render (anonymousObjectfe2d35d70705)
L120 method render (anonymousObjectfe2d35d70905)
L130 method render (anonymousObjectfe2d35d70a05)
tests/utils.test.js:
L9 function parseCommand
L78 function hexToRgb
L121 function getExtension
L133 function replaceExtension
```
+89 -89
View File
@@ -12,100 +12,100 @@
* @type {import('../types').FileSystemAdapter} * @type {import('../types').FileSystemAdapter}
*/ */
const electronFsAdapter = { const electronFsAdapter = {
/** /**
* Read file content * Read file content
* @param {string} path - File path * @param {string} path - File path
* @returns {Promise<string>} File content * @returns {Promise<string>} File content
*/ */
async readFile(path) { async readFile(path) {
return await window.electronAPI.file.read(path); return await window.electronAPI.file.read(path);
}, },
/** /**
* Write content to file * Write content to file
* @param {string} path - File path * @param {string} path - File path
* @param {string} content - File content * @param {string} content - File content
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async writeFile(path, content) { async writeFile(path, content) {
return await window.electronAPI.file.write(path, content); return await window.electronAPI.file.write(path, content);
}, },
/** /**
* Delete file * Delete file
* @param {string} path - File path * @param {string} path - File path
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async deleteFile(path) { async deleteFile(path) {
return await window.electronAPI.file.delete(path); return await window.electronAPI.file.delete(path);
}, },
/** /**
* Ensure directory exists * Ensure directory exists
* @param {string} path - Directory path * @param {string} path - Directory path
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async ensureDir(path) { async ensureDir(path) {
return await window.electronAPI.file.ensureDir(path); return await window.electronAPI.file.ensureDir(path);
}, },
/** /**
* List directory contents * List directory contents
* @param {string} path - Directory path * @param {string} path - Directory path
* @returns {Promise<Array<import('../types').FileInfo>>} * @returns {Promise<Array<import('../types').FileInfo>>}
*/ */
async listDirectory(path) { async listDirectory(path) {
const result = await window.electronAPI.invoke('list-directory', path); const result = await window.electronAPI.invoke('list-directory', path);
if (!result?.entries) { if (!result?.entries) {
return []; return [];
}
return result.entries.map((entry) => ({
name: entry.name,
isDir: entry.isDirectory,
size: entry.size ?? 0,
modified: entry.modified ?? 0,
path: entry.path
}));
},
/**
* Check if path exists
* @param {string} path - Path to check
* @returns {Promise<boolean>}
*/
async exists(path) {
return await window.electronAPI.file.exists(path);
},
/**
* Check if path is a directory
* @param {string} path - Path to check
* @returns {Promise<boolean>}
*/
async isDirectory(path) {
return await window.electronAPI.file.isDirectory(path);
},
/**
* Copy file or directory
* @param {string} source - Source path
* @param {string} dest - Destination path
* @returns {Promise<void>}
*/
async copy(source, dest) {
return await window.electronAPI.file.copy(source, dest);
},
/**
* Move file or directory
* @param {string} source - Source path
* @param {string} dest - Destination path
* @returns {Promise<void>}
*/
async move(source, dest) {
return await window.electronAPI.file.move(source, dest);
} }
return result.entries.map((entry) => ({
name: entry.name,
isDir: entry.isDirectory,
size: entry.size ?? 0,
modified: entry.modified ?? 0,
path: entry.path,
}));
},
/**
* Check if path exists
* @param {string} path - Path to check
* @returns {Promise<boolean>}
*/
async exists(path) {
return await window.electronAPI.file.exists(path);
},
/**
* Check if path is a directory
* @param {string} path - Path to check
* @returns {Promise<boolean>}
*/
async isDirectory(path) {
return await window.electronAPI.file.isDirectory(path);
},
/**
* Copy file or directory
* @param {string} source - Source path
* @param {string} dest - Destination path
* @returns {Promise<void>}
*/
async copy(source, dest) {
return await window.electronAPI.file.copy(source, dest);
},
/**
* Move file or directory
* @param {string} source - Source path
* @param {string} dest - Destination path
* @returns {Promise<void>}
*/
async move(source, dest) {
return await window.electronAPI.file.move(source, dest);
},
}; };
module.exports = { electronFsAdapter }; module.exports = { electronFsAdapter };
+1 -1
View File
@@ -129,5 +129,5 @@
*/ */
module.exports = { module.exports = {
// Type definitions are JSDoc only, no runtime exports needed // Type definitions are JSDoc only, no runtime exports needed
}; };
+41 -31
View File
@@ -5,19 +5,19 @@
const { analyze } = require('./writing-analytics'); const { analyze } = require('./writing-analytics');
function showAnalyticsModal(tabManager) { function showAnalyticsModal(tabManager) {
const existing = document.getElementById('analytics-modal'); const existing = document.getElementById('analytics-modal');
if (existing) existing.remove(); if (existing) existing.remove();
const content = tabManager.getEditorContent(); const content = tabManager.getEditorContent();
const metrics = analyze(content); const metrics = analyze(content);
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.id = 'analytics-modal'; overlay.id = 'analytics-modal';
overlay.className = 'analytics-overlay'; overlay.className = 'analytics-overlay';
const maxCount = metrics.topWords.length > 0 ? metrics.topWords[0].count : 1; const maxCount = metrics.topWords.length > 0 ? metrics.topWords[0].count : 1;
overlay.innerHTML = ` overlay.innerHTML = `
<div class="analytics-modal"> <div class="analytics-modal">
<div class="analytics-header"> <div class="analytics-header">
<h2>Writing Analytics</h2> <h2>Writing Analytics</h2>
@@ -61,11 +61,15 @@ function showAnalyticsModal(tabManager) {
<span class="analytics-label">Avg Sentence</span> <span class="analytics-label">Avg Sentence</span>
<span class="analytics-value">${metrics.avgSentenceLength} words</span> <span class="analytics-value">${metrics.avgSentenceLength} words</span>
</div> </div>
${metrics.longestSentenceLength > 0 ? ` ${
metrics.longestSentenceLength > 0
? `
<div class="analytics-row analytics-longest"> <div class="analytics-row analytics-longest">
<span class="analytics-label">Longest (${metrics.longestSentenceLength} words)</span> <span class="analytics-label">Longest (${metrics.longestSentenceLength} words)</span>
<span class="analytics-value analytics-sentence-preview">${escapeHtml(metrics.longestSentence)}</span> <span class="analytics-value analytics-sentence-preview">${escapeHtml(metrics.longestSentence)}</span>
</div>` : ''} </div>`
: ''
}
</div> </div>
<div class="analytics-section"> <div class="analytics-section">
@@ -74,39 +78,45 @@ function showAnalyticsModal(tabManager) {
<span class="analytics-label">Unique</span> <span class="analytics-label">Unique</span>
<span class="analytics-value">${metrics.uniqueWordCount} / ${metrics.wordCount}<small>${metrics.lexicalDiversity}%</small></span> <span class="analytics-value">${metrics.uniqueWordCount} / ${metrics.wordCount}<small>${metrics.lexicalDiversity}%</small></span>
</div> </div>
${metrics.topWords.length > 0 ? ` ${
metrics.topWords.length > 0
? `
<div class="word-cloud"> <div class="word-cloud">
${metrics.topWords.map(w => { ${metrics.topWords
.map((w) => {
const scale = 13 + Math.round((w.count / maxCount) * 3); const scale = 13 + Math.round((w.count / maxCount) * 3);
return `<span class="word-tag" style="font-size:${scale}px">${escapeHtml(w.word)}<small>${w.count}</small></span>`; return `<span class="word-tag" style="font-size:${scale}px">${escapeHtml(w.word)}<small>${w.count}</small></span>`;
}).join('')} })
</div>` : ''} .join('')}
</div>`
: ''
}
</div> </div>
</div> </div>
</div> </div>
`; `;
const closeBtn = overlay.querySelector('.analytics-close'); const closeBtn = overlay.querySelector('.analytics-close');
closeBtn.addEventListener('click', () => overlay.remove()); closeBtn.addEventListener('click', () => overlay.remove());
overlay.addEventListener('click', (e) => { overlay.addEventListener('click', (e) => {
if (e.target === overlay) overlay.remove(); if (e.target === overlay) overlay.remove();
}); });
const escHandler = (e) => { const escHandler = (e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
overlay.remove(); overlay.remove();
document.removeEventListener('keydown', escHandler); document.removeEventListener('keydown', escHandler);
} }
}; };
document.addEventListener('keydown', escHandler); document.addEventListener('keydown', escHandler);
document.body.appendChild(overlay); document.body.appendChild(overlay);
} }
function escapeHtml(str) { function escapeHtml(str) {
const div = document.createElement('div'); const div = document.createElement('div');
div.textContent = str; div.textContent = str;
return div.innerHTML; return div.innerHTML;
} }
module.exports = { showAnalyticsModal }; module.exports = { showAnalyticsModal };
+177 -104
View File
@@ -4,124 +4,197 @@
*/ */
const STOP_WORDS = new Set([ const STOP_WORDS = new Set([
'the', 'a', 'an', 'is', 'are', 'was', 'were', 'be', 'been', 'the',
'have', 'has', 'had', 'do', 'does', 'did', 'will', 'would', 'a',
'could', 'should', 'to', 'of', 'in', 'for', 'on', 'with', 'an',
'at', 'by', 'from', 'as', 'and', 'or', 'but', 'if', 'it', 'is',
'its', 'this', 'that', 'these', 'those', 'i', 'me', 'my', 'are',
'we', 'our', 'you', 'your', 'he', 'him', 'his', 'she', 'her', 'was',
'they', 'them', 'their', 'not', 'no', 'so', 'than', 'too', 'were',
'very', 'also', 'just', 'about', 'up', 'out', 'what', 'which', 'who' 'be',
'been',
'have',
'has',
'had',
'do',
'does',
'did',
'will',
'would',
'could',
'should',
'to',
'of',
'in',
'for',
'on',
'with',
'at',
'by',
'from',
'as',
'and',
'or',
'but',
'if',
'it',
'its',
'this',
'that',
'these',
'those',
'i',
'me',
'my',
'we',
'our',
'you',
'your',
'he',
'him',
'his',
'she',
'her',
'they',
'them',
'their',
'not',
'no',
'so',
'than',
'too',
'very',
'also',
'just',
'about',
'up',
'out',
'what',
'which',
'who',
]); ]);
function countSyllables(word) { function countSyllables(word) {
word = word.toLowerCase().replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, ''); word = word.toLowerCase().replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '');
word = word.replace(/^y/, ''); word = word.replace(/^y/, '');
return word.match(/[aeiouy]{1,2}/gi)?.length || 1; return word.match(/[aeiouy]{1,2}/gi)?.length || 1;
} }
function extractWords(text) { function extractWords(text) {
return text.match(/[a-zA-Z]+(?:['-][a-zA-Z]+)*/g) || []; return text.match(/[a-zA-Z]+(?:['-][a-zA-Z]+)*/g) || [];
} }
function getReadabilityLabel(score) { function getReadabilityLabel(score) {
if (score >= 90) return 'Very Easy'; if (score >= 90) return 'Very Easy';
if (score >= 70) return 'Easy'; if (score >= 70) return 'Easy';
if (score >= 50) return 'Standard'; if (score >= 50) return 'Standard';
if (score >= 30) return 'Difficult'; if (score >= 30) return 'Difficult';
return 'Very Difficult'; return 'Very Difficult';
} }
function analyze(text) { function analyze(text) {
if (!text || !text.trim()) { if (!text || !text.trim()) {
return {
wordCount: 0,
sentenceCount: 0,
paragraphCount: 0,
fleschEase: 0,
fleschGrade: 0,
readabilityLabel: 'N/A',
readingTime: 0,
speakingTime: 0,
uniqueWordCount: 0,
lexicalDiversity: 0,
avgSentenceLength: 0,
longestSentence: '',
longestSentenceLength: 0,
topWords: []
};
}
const words = extractWords(text);
const wordCount = words.length;
const sentences = text.split(/[.!?]+/).map(s => s.trim()).filter(Boolean);
const sentenceCount = Math.max(sentences.length, 1);
const paragraphs = text.split(/\n\s*\n/).map(p => p.trim()).filter(Boolean);
const paragraphCount = Math.max(paragraphs.length, 1);
let totalSyllables = 0;
for (const w of words) {
totalSyllables += countSyllables(w);
}
const fleschEase = Math.round((206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount)) * 10) / 10;
const fleschGrade = Math.round((0.39 * (wordCount / sentenceCount) + 11.8 * (totalSyllables / wordCount) - 15.59) * 10) / 10;
const readabilityLabel = getReadabilityLabel(fleschEase);
const readingTime = Math.ceil(wordCount / 200);
const speakingTime = Math.ceil(wordCount / 130);
const uniqueWords = new Set(words.map(w => w.toLowerCase()));
const uniqueWordCount = uniqueWords.size;
const lexicalDiversity = wordCount > 0 ? Math.round((uniqueWordCount / wordCount) * 1000) / 10 : 0;
const avgSentenceLength = Math.round((wordCount / sentenceCount) * 10) / 10;
let longestSentence = '';
let longestSentenceLength = 0;
for (const s of sentences) {
const sWords = extractWords(s);
if (sWords.length > longestSentenceLength) {
longestSentenceLength = sWords.length;
longestSentence = s.trim();
}
}
if (longestSentence.length > 80) {
longestSentence = longestSentence.substring(0, 80) + '...';
}
const wordFreq = {};
for (const w of words) {
const lower = w.toLowerCase();
if (!STOP_WORDS.has(lower) && lower.length > 1) {
wordFreq[lower] = (wordFreq[lower] || 0) + 1;
}
}
const topWords = Object.entries(wordFreq)
.sort((a, b) => b[1] - a[1])
.slice(0, 10)
.map(([word, count]) => ({ word, count }));
return { return {
wordCount, wordCount: 0,
sentenceCount, sentenceCount: 0,
paragraphCount, paragraphCount: 0,
fleschEase, fleschEase: 0,
fleschGrade, fleschGrade: 0,
readabilityLabel, readabilityLabel: 'N/A',
readingTime, readingTime: 0,
speakingTime, speakingTime: 0,
uniqueWordCount, uniqueWordCount: 0,
lexicalDiversity, lexicalDiversity: 0,
avgSentenceLength, avgSentenceLength: 0,
longestSentence, longestSentence: '',
longestSentenceLength, longestSentenceLength: 0,
topWords topWords: [],
}; };
}
const words = extractWords(text);
const wordCount = words.length;
const sentences = text
.split(/[.!?]+/)
.map((s) => s.trim())
.filter(Boolean);
const sentenceCount = Math.max(sentences.length, 1);
const paragraphs = text
.split(/\n\s*\n/)
.map((p) => p.trim())
.filter(Boolean);
const paragraphCount = Math.max(paragraphs.length, 1);
let totalSyllables = 0;
for (const w of words) {
totalSyllables += countSyllables(w);
}
const fleschEase =
Math.round(
(206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount)) * 10
) / 10;
const fleschGrade =
Math.round(
(0.39 * (wordCount / sentenceCount) + 11.8 * (totalSyllables / wordCount) - 15.59) * 10
) / 10;
const readabilityLabel = getReadabilityLabel(fleschEase);
const readingTime = Math.ceil(wordCount / 200);
const speakingTime = Math.ceil(wordCount / 130);
const uniqueWords = new Set(words.map((w) => w.toLowerCase()));
const uniqueWordCount = uniqueWords.size;
const lexicalDiversity =
wordCount > 0 ? Math.round((uniqueWordCount / wordCount) * 1000) / 10 : 0;
const avgSentenceLength = Math.round((wordCount / sentenceCount) * 10) / 10;
let longestSentence = '';
let longestSentenceLength = 0;
for (const s of sentences) {
const sWords = extractWords(s);
if (sWords.length > longestSentenceLength) {
longestSentenceLength = sWords.length;
longestSentence = s.trim();
}
}
if (longestSentence.length > 80) {
longestSentence = longestSentence.substring(0, 80) + '...';
}
const wordFreq = {};
for (const w of words) {
const lower = w.toLowerCase();
if (!STOP_WORDS.has(lower) && lower.length > 1) {
wordFreq[lower] = (wordFreq[lower] || 0) + 1;
}
}
const topWords = Object.entries(wordFreq)
.sort((a, b) => b[1] - a[1])
.slice(0, 10)
.map(([word, count]) => ({ word, count }));
return {
wordCount,
sentenceCount,
paragraphCount,
fleschEase,
fleschGrade,
readabilityLabel,
readingTime,
speakingTime,
uniqueWordCount,
lexicalDiversity,
avgSentenceLength,
longestSentence,
longestSentenceLength,
topWords,
};
} }
module.exports = { analyze }; module.exports = { analyze };
+675 -526
View File
File diff suppressed because it is too large Load Diff
+91 -87
View File
@@ -1,109 +1,113 @@
class CommandPalette { class CommandPalette {
constructor() { constructor() {
this.overlay = document.getElementById('command-palette-overlay'); this.overlay = document.getElementById('command-palette-overlay');
this.input = document.getElementById('command-palette-input'); this.input = document.getElementById('command-palette-input');
this.results = document.getElementById('command-palette-results'); this.results = document.getElementById('command-palette-results');
this.commands = []; this.commands = [];
this.selectedIndex = 0; this.selectedIndex = 0;
this.filteredCommands = []; this.filteredCommands = [];
this.setupEventListeners(); this.setupEventListeners();
} }
register(label, shortcut, action) { register(label, shortcut, action) {
this.commands.push({ label, shortcut, action }); this.commands.push({ label, shortcut, action });
} }
open() { open() {
this.overlay.classList.remove('hidden'); this.overlay.classList.remove('hidden');
this.input.value = ''; this.input.value = '';
this.input.focus(); this.input.focus();
this.selectedIndex = 0; this.selectedIndex = 0;
this.renderResults(''); this.renderResults('');
} }
close() { close() {
this.overlay.classList.add('hidden'); this.overlay.classList.add('hidden');
} }
isOpen() { isOpen() {
return !this.overlay.classList.contains('hidden'); return !this.overlay.classList.contains('hidden');
} }
setupEventListeners() { setupEventListeners() {
this.input.addEventListener('input', () => { this.input.addEventListener('input', () => {
this.selectedIndex = 0; this.selectedIndex = 0;
this.renderResults(this.input.value); this.renderResults(this.input.value);
}); });
this.overlay.addEventListener('click', (e) => { this.overlay.addEventListener('click', (e) => {
if (e.target === this.overlay) this.close(); if (e.target === this.overlay) this.close();
}); });
this.input.addEventListener('keydown', (e) => { this.input.addEventListener('keydown', (e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
e.preventDefault(); e.preventDefault();
this.close(); this.close();
} else if (e.key === 'Enter') { } else if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();
this.executeSelected(); this.executeSelected();
} else if (e.key === 'ArrowDown') { } else if (e.key === 'ArrowDown') {
e.preventDefault(); e.preventDefault();
this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredCommands.length - 1); this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredCommands.length - 1);
this.updateSelection(); this.updateSelection();
} else if (e.key === 'ArrowUp') { } else if (e.key === 'ArrowUp') {
e.preventDefault(); e.preventDefault();
this.selectedIndex = Math.max(this.selectedIndex - 1, 0); this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
this.updateSelection(); this.updateSelection();
} }
}); });
} }
renderResults(query) { renderResults(query) {
this.filteredCommands = query this.filteredCommands = query
? this.commands.filter(cmd => cmd.label.toLowerCase().includes(query.toLowerCase())) ? this.commands.filter((cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()))
: [...this.commands]; : [...this.commands];
this.results.innerHTML = this.filteredCommands.map((cmd, i) => ` this.results.innerHTML = this.filteredCommands
.map(
(cmd, i) => `
<div class="command-item ${i === this.selectedIndex ? 'selected' : ''}" data-index="${i}"> <div class="command-item ${i === this.selectedIndex ? 'selected' : ''}" data-index="${i}">
<span class="command-label">${this.highlightMatch(cmd.label, query)}</span> <span class="command-label">${this.highlightMatch(cmd.label, query)}</span>
${cmd.shortcut ? `<span class="command-shortcut">${cmd.shortcut}</span>` : ''} ${cmd.shortcut ? `<span class="command-shortcut">${cmd.shortcut}</span>` : ''}
</div> </div>
`).join(''); `
)
.join('');
this.results.querySelectorAll('.command-item').forEach((el) => { this.results.querySelectorAll('.command-item').forEach((el) => {
el.addEventListener('click', () => { el.addEventListener('click', () => {
const idx = parseInt(el.dataset.index); const idx = parseInt(el.dataset.index);
this.filteredCommands[idx].action(); this.filteredCommands[idx].action();
this.close(); this.close();
}); });
el.addEventListener('mouseenter', () => { el.addEventListener('mouseenter', () => {
this.selectedIndex = parseInt(el.dataset.index); this.selectedIndex = parseInt(el.dataset.index);
this.updateSelection(); this.updateSelection();
}); });
}); });
} }
highlightMatch(text, query) { highlightMatch(text, query) {
if (!query) return text; if (!query) return text;
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'); const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
return text.replace(regex, '<strong>$1</strong>'); return text.replace(regex, '<strong>$1</strong>');
} }
updateSelection() { updateSelection() {
this.results.querySelectorAll('.command-item').forEach((el, i) => { this.results.querySelectorAll('.command-item').forEach((el, i) => {
el.classList.toggle('selected', i === this.selectedIndex); el.classList.toggle('selected', i === this.selectedIndex);
}); });
// Scroll selected into view // Scroll selected into view
const selected = this.results.querySelector('.command-item.selected'); const selected = this.results.querySelector('.command-item.selected');
if (selected) selected.scrollIntoView({ block: 'nearest' }); if (selected) selected.scrollIntoView({ block: 'nearest' });
} }
executeSelected() { executeSelected() {
if (this.filteredCommands[this.selectedIndex]) { if (this.filteredCommands[this.selectedIndex]) {
this.filteredCommands[this.selectedIndex].action(); this.filteredCommands[this.selectedIndex].action();
this.close(); this.close();
}
} }
}
} }
module.exports = { CommandPalette }; module.exports = { CommandPalette };
+36 -29
View File
@@ -12,38 +12,23 @@ const { EditorState } = require('@codemirror/state');
const { markdown, markdownLanguage } = require('@codemirror/lang-markdown'); const { markdown, markdownLanguage } = require('@codemirror/lang-markdown');
// Language extensions loaded lazily on first use // Language extensions loaded lazily on first use
let _javascript, _html, _css, _json, _python; let _javascript, _html, _css, _json, _python;
const { const { defaultKeymap, history, historyKeymap, indentWithTab } = require('@codemirror/commands');
defaultKeymap, const { searchKeymap, highlightSelectionMatches } = require('@codemirror/search');
history, const { autocompletion, completionKeymap } = require('@codemirror/autocomplete');
historyKeymap, const { bracketMatching, foldGutter, indentOnInput } = require('@codemirror/language');
indentWithTab,
} = require('@codemirror/commands');
const {
searchKeymap,
highlightSelectionMatches,
} = require('@codemirror/search');
const {
autocompletion,
completionKeymap,
} = require('@codemirror/autocomplete');
const {
bracketMatching,
foldGutter,
indentOnInput,
} = require('@codemirror/language');
const { oneDark } = require('@codemirror/theme-one-dark'); const { oneDark } = require('@codemirror/theme-one-dark');
// Custom theme for JetBrains Mono font // Custom theme for JetBrains Mono font
const jetBrainsMonoTheme = EditorView.theme({ const jetBrainsMonoTheme = EditorView.theme({
'&': { '&': {
fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace" fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace",
}, },
'.cm-content': { '.cm-content': {
fontFamily: 'inherit' fontFamily: 'inherit',
}, },
'.cm-scroller': { '.cm-scroller': {
fontFamily: 'inherit' fontFamily: 'inherit',
} },
}); });
/** /**
@@ -59,7 +44,14 @@ const jetBrainsMonoTheme = EditorView.theme({
* @returns {EditorView} the created editor view * @returns {EditorView} the created editor view
*/ */
function createEditor(parentElement, options = {}) { function createEditor(parentElement, options = {}) {
console.log('[createEditor] Called with parentElement:', parentElement?.id, 'dimensions:', parentElement?.clientWidth, 'x', parentElement?.clientHeight); console.log(
'[createEditor] Called with parentElement:',
parentElement?.id,
'dimensions:',
parentElement?.clientWidth,
'x',
parentElement?.clientHeight
);
if (!parentElement) { if (!parentElement) {
console.error('[createEditor] ERROR: parentElement is null or undefined!'); console.error('[createEditor] ERROR: parentElement is null or undefined!');
return null; return null;
@@ -125,11 +117,26 @@ function createEditor(parentElement, options = {}) {
*/ */
function getLanguageExtension(lang) { function getLanguageExtension(lang) {
const loaders = { const loaders = {
javascript: () => { if (!_javascript) _javascript = require('@codemirror/lang-javascript').javascript; return _javascript(); }, javascript: () => {
html: () => { if (!_html) _html = require('@codemirror/lang-html').html; return _html(); }, if (!_javascript) _javascript = require('@codemirror/lang-javascript').javascript;
css: () => { if (!_css) _css = require('@codemirror/lang-css').css; return _css(); }, return _javascript();
json: () => { if (!_json) _json = require('@codemirror/lang-json').json; return _json(); }, },
python: () => { if (!_python) _python = require('@codemirror/lang-python').python; return _python(); }, html: () => {
if (!_html) _html = require('@codemirror/lang-html').html;
return _html();
},
css: () => {
if (!_css) _css = require('@codemirror/lang-css').css;
return _css();
},
json: () => {
if (!_json) _json = require('@codemirror/lang-json').json;
return _json();
},
python: () => {
if (!_python) _python = require('@codemirror/lang-python').python;
return _python();
},
markdown: () => markdown({ base: markdownLanguage }), markdown: () => markdown({ base: markdownLanguage }),
}; };
loaders.js = loaders.javascript; loaders.js = loaders.javascript;
+45 -45
View File
@@ -2,74 +2,74 @@
/* Inter Font Family */ /* Inter Font Family */
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
font-display: swap; font-display: swap;
src: url('../assets/fonts/Inter-Light.woff2') format('woff2'); src: url('../assets/fonts/Inter-Light.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url('../assets/fonts/Inter-Regular.woff2') format('woff2'); src: url('../assets/fonts/Inter-Regular.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-display: swap; font-display: swap;
src: url('../assets/fonts/Inter-Medium.woff2') format('woff2'); src: url('../assets/fonts/Inter-Medium.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-display: swap; font-display: swap;
src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2'); src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
src: url('../assets/fonts/Inter-Bold.woff2') format('woff2'); src: url('../assets/fonts/Inter-Bold.woff2') format('woff2');
} }
/* JetBrains Mono Font Family - For code, markdown editor, and ASCII art */ /* JetBrains Mono Font Family - For code, markdown editor, and ASCII art */
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2'); src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-display: swap; font-display: swap;
src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2'); src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-display: swap; font-display: swap;
src: url('../assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); src: url('../assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
} }
@font-face { @font-face {
font-family: 'JetBrains Mono'; font-family: 'JetBrains Mono';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2'); src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
} }
+2381 -1594
View File
File diff suppressed because it is too large Load Diff
+1693 -1165
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -8,7 +8,7 @@ async function getStatus(dir) {
try { try {
const git = getGitInstance(dir); const git = getGitInstance(dir);
return await git.status(); return await git.status();
} catch (err) { } catch {
return { error: 'Not a git repository' }; return { error: 'Not a git repository' };
} }
} }
+62 -43
View File
@@ -4,11 +4,11 @@ const { PDFDocument, rgb, degrees, StandardFonts } = require('pdf-lib');
function parsePageRanges(rangeString, totalPages) { function parsePageRanges(rangeString, totalPages) {
const pages = []; const pages = [];
const ranges = rangeString.split(',').map(r => r.trim()); const ranges = rangeString.split(',').map((r) => r.trim());
for (const range of ranges) { for (const range of ranges) {
if (range.includes('-')) { if (range.includes('-')) {
const [start, end] = range.split('-').map(n => parseInt(n.trim())); const [start, end] = range.split('-').map((n) => parseInt(n.trim()));
for (let i = start; i <= end && i <= totalPages; i++) { for (let i = start; i <= end && i <= totalPages; i++) {
if (i > 0 && !pages.includes(i - 1)) { if (i > 0 && !pages.includes(i - 1)) {
pages.push(i - 1); pages.push(i - 1);
@@ -27,11 +27,13 @@ function parsePageRanges(rangeString, totalPages) {
function hexToRgb(hex) { function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? { return result
r: parseInt(result[1], 16) / 255, ? {
g: parseInt(result[2], 16) / 255, r: parseInt(result[1], 16) / 255,
b: parseInt(result[3], 16) / 255 g: parseInt(result[2], 16) / 255,
} : { r: 0, g: 0, b: 0 }; b: parseInt(result[3], 16) / 255,
}
: { r: 0, g: 0, b: 0 };
} }
async function pdfMerge(data) { async function pdfMerge(data) {
@@ -42,7 +44,7 @@ async function pdfMerge(data) {
const pdfBytes = fs.readFileSync(filePath); const pdfBytes = fs.readFileSync(filePath);
const pdf = await PDFDocument.load(pdfBytes); const pdf = await PDFDocument.load(pdfBytes);
const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices()); const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
copiedPages.forEach(page => mergedPdf.addPage(page)); copiedPages.forEach((page) => mergedPdf.addPage(page));
} }
const pdfBytes = await mergedPdf.save(); const pdfBytes = await mergedPdf.save();
@@ -63,13 +65,13 @@ async function pdfSplit(data) {
const splits = []; const splits = [];
if (data.splitMode === 'pages') { if (data.splitMode === 'pages') {
const ranges = data.pageRanges.split(',').map(r => r.trim()); const ranges = data.pageRanges.split(',').map((r) => r.trim());
for (let i = 0; i < ranges.length; i++) { for (let i = 0; i < ranges.length; i++) {
const range = ranges[i]; const range = ranges[i];
const pages = []; const pages = [];
if (range.includes('-')) { if (range.includes('-')) {
const [start, end] = range.split('-').map(n => parseInt(n.trim())); const [start, end] = range.split('-').map((n) => parseInt(n.trim()));
for (let p = start; p <= end && p <= totalPages; p++) { for (let p = start; p <= end && p <= totalPages; p++) {
pages.push(p - 1); pages.push(p - 1);
} }
@@ -108,7 +110,7 @@ async function pdfSplit(data) {
for (const split of splits) { for (const split of splits) {
const newPdf = await PDFDocument.create(); const newPdf = await PDFDocument.create();
const copiedPages = await newPdf.copyPages(pdf, split.pages); const copiedPages = await newPdf.copyPages(pdf, split.pages);
copiedPages.forEach(page => newPdf.addPage(page)); copiedPages.forEach((page) => newPdf.addPage(page));
const outputPath = path.join(data.outputFolder, `${baseName}_${split.name}.pdf`); const outputPath = path.join(data.outputFolder, `${baseName}_${split.name}.pdf`);
const newPdfBytes = await newPdf.save(); const newPdfBytes = await newPdf.save();
@@ -129,18 +131,18 @@ async function pdfCompress(data) {
const compressedPdfBytes = await pdf.save({ const compressedPdfBytes = await pdf.save({
useObjectStreams: true, useObjectStreams: true,
addDefaultPage: false, addDefaultPage: false,
objectsPerTick: 50 objectsPerTick: 50,
}); });
fs.writeFileSync(data.outputPath, compressedPdfBytes); fs.writeFileSync(data.outputPath, compressedPdfBytes);
const originalSize = fs.statSync(data.inputPath).size; const originalSize = fs.statSync(data.inputPath).size;
const compressedSize = fs.statSync(data.outputPath).size; const compressedSize = fs.statSync(data.outputPath).size;
const savings = ((originalSize - compressedSize) / originalSize * 100).toFixed(1); const savings = (((originalSize - compressedSize) / originalSize) * 100).toFixed(1);
return { return {
success: true, success: true,
message: `PDF compressed. Size reduced by ${savings}% (${(originalSize / 1024).toFixed(1)}KB → ${(compressedSize / 1024).toFixed(1)}KB)` message: `PDF compressed. Size reduced by ${savings}% (${(originalSize / 1024).toFixed(1)}KB → ${(compressedSize / 1024).toFixed(1)}KB)`,
}; };
} catch (error) { } catch (error) {
return { success: false, error: error.message }; return { success: false, error: error.message };
@@ -160,7 +162,7 @@ async function pdfRotate(data) {
pagesToRotate = Array.from({ length: totalPages }, (_, i) => i); pagesToRotate = Array.from({ length: totalPages }, (_, i) => i);
} }
pagesToRotate.forEach(pageIndex => { pagesToRotate.forEach((pageIndex) => {
const page = pdf.getPage(pageIndex); const page = pdf.getPage(pageIndex);
page.setRotation(degrees(data.angle)); page.setRotation(degrees(data.angle));
}); });
@@ -170,7 +172,7 @@ async function pdfRotate(data) {
return { return {
success: true, success: true,
message: `Successfully rotated ${pagesToRotate.length} page(s) by ${data.angle}\u00B0` message: `Successfully rotated ${pagesToRotate.length} page(s) by ${data.angle}\u00B0`,
}; };
} catch (error) { } catch (error) {
return { success: false, error: error.message }; return { success: false, error: error.message };
@@ -185,16 +187,18 @@ async function pdfDeletePages(data) {
const pagesToDelete = parsePageRanges(data.pages, totalPages); const pagesToDelete = parsePageRanges(data.pages, totalPages);
pagesToDelete.sort((a, b) => b - a).forEach(pageIndex => { pagesToDelete
pdf.removePage(pageIndex); .sort((a, b) => b - a)
}); .forEach((pageIndex) => {
pdf.removePage(pageIndex);
});
const newPdfBytes = await pdf.save(); const newPdfBytes = await pdf.save();
fs.writeFileSync(data.outputPath, newPdfBytes); fs.writeFileSync(data.outputPath, newPdfBytes);
return { return {
success: true, success: true,
message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages` message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`,
}; };
} catch (error) { } catch (error) {
return { success: false, error: error.message }; return { success: false, error: error.message };
@@ -207,7 +211,7 @@ async function pdfReorder(data) {
const pdf = await PDFDocument.load(pdfBytes); const pdf = await PDFDocument.load(pdfBytes);
const totalPages = pdf.getPageCount(); const totalPages = pdf.getPageCount();
const newOrder = data.newOrder.split(',').map(n => parseInt(n.trim()) - 1); const newOrder = data.newOrder.split(',').map((n) => parseInt(n.trim()) - 1);
if (newOrder.length !== totalPages) { if (newOrder.length !== totalPages) {
return { success: false, error: `New order must include all ${totalPages} pages` }; return { success: false, error: `New order must include all ${totalPages} pages` };
@@ -215,7 +219,7 @@ async function pdfReorder(data) {
const newPdf = await PDFDocument.create(); const newPdf = await PDFDocument.create();
const copiedPages = await newPdf.copyPages(pdf, newOrder); const copiedPages = await newPdf.copyPages(pdf, newOrder);
copiedPages.forEach(page => newPdf.addPage(page)); copiedPages.forEach((page) => newPdf.addPage(page));
const reorderedPdfBytes = await newPdf.save(); const reorderedPdfBytes = await newPdf.save();
fs.writeFileSync(data.outputPath, reorderedPdfBytes); fs.writeFileSync(data.outputPath, reorderedPdfBytes);
@@ -246,7 +250,9 @@ async function pdfWatermark(data) {
const page = pdf.getPage(pageIndex); const page = pdf.getPage(pageIndex);
const { width, height } = page.getSize(); const { width, height } = page.getSize();
let x, y, rotation = 0; let x,
y,
rotation = 0;
switch (data.position) { switch (data.position) {
case 'center': case 'center':
@@ -294,7 +300,7 @@ async function pdfWatermark(data) {
font, font,
color: rgb(color.r, color.g, color.b), color: rgb(color.r, color.g, color.b),
opacity: data.opacity, opacity: data.opacity,
rotate: degrees(rotation) rotate: degrees(rotation),
}); });
} }
@@ -303,7 +309,7 @@ async function pdfWatermark(data) {
return { return {
success: true, success: true,
message: `Successfully added watermark to ${pagesToWatermark.length} page(s)` message: `Successfully added watermark to ${pagesToWatermark.length} page(s)`,
}; };
} catch (error) { } catch (error) {
return { success: false, error: error.message }; return { success: false, error: error.message };
@@ -325,8 +331,8 @@ async function pdfEncrypt(data) {
annotating: data.permissions.annotating, annotating: data.permissions.annotating,
fillingForms: data.permissions.fillingForms, fillingForms: data.permissions.fillingForms,
contentAccessibility: data.permissions.contentAccessibility, contentAccessibility: data.permissions.contentAccessibility,
documentAssembly: data.permissions.documentAssembly documentAssembly: data.permissions.documentAssembly,
} },
}); });
fs.writeFileSync(data.outputPath, encryptedPdfBytes); fs.writeFileSync(data.outputPath, encryptedPdfBytes);
@@ -336,7 +342,8 @@ async function pdfEncrypt(data) {
if (error.message.includes('encrypt') || error.message.includes('password')) { if (error.message.includes('encrypt') || error.message.includes('password')) {
return { return {
success: false, success: false,
error: 'PDF encryption requires pdf-lib with encryption support. This feature may not be available in the current version.' error:
'PDF encryption requires pdf-lib with encryption support. This feature may not be available in the current version.',
}; };
} }
return { success: false, error: error.message }; return { success: false, error: error.message };
@@ -375,8 +382,8 @@ async function pdfSetPermissions(data) {
annotating: data.permissions.annotating, annotating: data.permissions.annotating,
fillingForms: data.permissions.fillingForms, fillingForms: data.permissions.fillingForms,
contentAccessibility: data.permissions.contentAccessibility, contentAccessibility: data.permissions.contentAccessibility,
documentAssembly: data.permissions.documentAssembly documentAssembly: data.permissions.documentAssembly,
} },
}); });
fs.writeFileSync(data.outputPath, newPdfBytes); fs.writeFileSync(data.outputPath, newPdfBytes);
@@ -386,7 +393,8 @@ async function pdfSetPermissions(data) {
if (error.message.includes('encrypt') || error.message.includes('permission')) { if (error.message.includes('encrypt') || error.message.includes('permission')) {
return { return {
success: false, success: false,
error: 'PDF permissions require pdf-lib with encryption support. This feature may not be available in the current version.' error:
'PDF permissions require pdf-lib with encryption support. This feature may not be available in the current version.',
}; };
} }
return { success: false, error: error.message }; return { success: false, error: error.message };
@@ -395,17 +403,28 @@ async function pdfSetPermissions(data) {
function executeOperation(operation, data) { function executeOperation(operation, data) {
switch (operation) { switch (operation) {
case 'merge': return pdfMerge(data); case 'merge':
case 'split': return pdfSplit(data); return pdfMerge(data);
case 'compress': return pdfCompress(data); case 'split':
case 'rotate': return pdfRotate(data); return pdfSplit(data);
case 'delete': return pdfDeletePages(data); case 'compress':
case 'reorder': return pdfReorder(data); return pdfCompress(data);
case 'watermark': return pdfWatermark(data); case 'rotate':
case 'encrypt': return pdfEncrypt(data); return pdfRotate(data);
case 'decrypt': return pdfDecrypt(data); case 'delete':
case 'permissions': return pdfSetPermissions(data); return pdfDeletePages(data);
default: return Promise.resolve({ success: false, error: `Unknown operation: ${operation}` }); case 'reorder':
return pdfReorder(data);
case 'watermark':
return pdfWatermark(data);
case 'encrypt':
return pdfEncrypt(data);
case 'decrypt':
return pdfDecrypt(data);
case 'permissions':
return pdfSetPermissions(data);
default:
return Promise.resolve({ success: false, error: `Unknown operation: ${operation}` });
} }
} }
@@ -429,5 +448,5 @@ module.exports = {
pdfDecrypt, pdfDecrypt,
pdfSetPermissions, pdfSetPermissions,
executeOperation, executeOperation,
getPageCount getPageCount,
}; };
+1 -3
View File
@@ -5,9 +5,7 @@
"description": "Demonstrates the plugin system. Safe to delete.", "description": "Demonstrates the plugin system. Safe to delete.",
"icon": "puzzle", "icon": "puzzle",
"extensionPoints": { "extensionPoints": {
"commands": [ "commands": [{ "id": "hello", "label": "Sample: Hello World", "shortcut": "" }]
{ "id": "hello", "label": "Sample: Hello World", "shortcut": "" }
]
}, },
"settings": [] "settings": []
} }
+69 -39
View File
@@ -9,7 +9,7 @@ class WritingStudioPlugin extends PluginAPI {
this.context = context; this.context = context;
this.sprintEngine = new SprintEngine({ this.sprintEngine = new SprintEngine({
onEvent: (name, data) => context.events.emit(name, data) onEvent: (name, data) => context.events.emit(name, data),
}); });
this.goalTracker = new GoalTracker(context.settings); this.goalTracker = new GoalTracker(context.settings);
this.snapshotManager = new SnapshotManager(context.settings); this.snapshotManager = new SnapshotManager(context.settings);
@@ -17,14 +17,14 @@ class WritingStudioPlugin extends PluginAPI {
readFile: (p) => context.ipc.invoke('read-file', p), readFile: (p) => context.ipc.invoke('read-file', p),
writeFile: (p, c) => context.ipc.invoke('write-file', p, c), writeFile: (p, c) => context.ipc.invoke('write-file', p, c),
fileExists: (p) => context.ipc.invoke('path-exists', p), fileExists: (p) => context.ipc.invoke('path-exists', p),
listDir: (p) => context.ipc.invoke('list-directory', p) listDir: (p) => context.ipc.invoke('list-directory', p),
}); });
this._engines = { this._engines = {
sprint: this.sprintEngine, sprint: this.sprintEngine,
goals: this.goalTracker, goals: this.goalTracker,
snapshots: this.snapshotManager, snapshots: this.snapshotManager,
projects: this.projectManager projects: this.projectManager,
}; };
this._registerCommands(context); this._registerCommands(context);
@@ -34,59 +34,89 @@ class WritingStudioPlugin extends PluginAPI {
_registerCommands(context) { _registerCommands(context) {
const { sprintEngine, snapshotManager, goalTracker } = this; const { sprintEngine, snapshotManager, goalTracker } = this;
context.commands.register('start-sprint', 'Studio: Start Sprint', () => { context.commands.register(
const duration = context.settings.get('sprintDuration') || 25; 'start-sprint',
const content = context.editor.getContent() || ''; 'Studio: Start Sprint',
const words = content.split(/\s+/).filter(Boolean).length; () => {
sprintEngine.start(duration, words); const duration = context.settings.get('sprintDuration') || 25;
}, 'Ctrl+Alt+S'); const content = context.editor.getContent() || '';
const words = content.split(/\s+/).filter(Boolean).length;
sprintEngine.start(duration, words);
},
'Ctrl+Alt+S'
);
context.commands.register('stop-sprint', 'Studio: Stop Sprint', () => { context.commands.register(
if (!sprintEngine.isActive()) return; 'stop-sprint',
const content = context.editor.getContent() || ''; 'Studio: Stop Sprint',
const words = content.split(/\s+/).filter(Boolean).length; () => {
const result = sprintEngine.stop(words); if (!sprintEngine.isActive()) return;
goalTracker.addWords(result.wordDelta); const content = context.editor.getContent() || '';
context.events.emit('sprint:stopped', result); const words = content.split(/\s+/).filter(Boolean).length;
}, 'Ctrl+Alt+Shift+S'); const result = sprintEngine.stop(words);
goalTracker.addWords(result.wordDelta);
context.events.emit('sprint:stopped', result);
},
'Ctrl+Alt+Shift+S'
);
context.commands.register('take-snapshot', 'Studio: Take Snapshot', () => { context.commands.register(
const content = context.editor.getContent() || ''; 'take-snapshot',
snapshotManager.create(content, 'manual'); 'Studio: Take Snapshot',
context.events.emit('snapshot:created', {}); () => {
}, 'Ctrl+Alt+N'); const content = context.editor.getContent() || '';
snapshotManager.create(content, 'manual');
context.events.emit('snapshot:created', {});
},
'Ctrl+Alt+N'
);
context.commands.register('restore-last-snapshot', 'Studio: Restore Last Snapshot', () => { context.commands.register(
const snaps = snapshotManager.list(); 'restore-last-snapshot',
if (snaps.length === 0) return; 'Studio: Restore Last Snapshot',
const content = snapshotManager.restore(snaps[0].id); () => {
context.editor.insertAtCursor(content); const snaps = snapshotManager.list();
}, 'Ctrl+Alt+Z'); if (snaps.length === 0) return;
const content = snapshotManager.restore(snaps[0].id);
context.editor.insertAtCursor(content);
},
'Ctrl+Alt+Z'
);
context.commands.register('new-project', 'Studio: New Project', () => { context.commands.register('new-project', 'Studio: New Project', () => {
context.events.emit('studio:new-project', {}); context.events.emit('studio:new-project', {});
}); });
context.commands.register('compile-manuscript', 'Studio: Compile Manuscript', () => { context.commands.register(
context.events.emit('studio:compile', {}); 'compile-manuscript',
}, 'Ctrl+Alt+E'); 'Studio: Compile Manuscript',
() => {
context.events.emit('studio:compile', {});
},
'Ctrl+Alt+E'
);
context.commands.register('proofread-document', 'Studio: Proofread Document', () => { context.commands.register(
if (context.events.hasHandler('ai:analyze')) { 'proofread-document',
const content = context.editor.getContent() || ''; 'Studio: Proofread Document',
context.events.emit('ai:analyze', { text: content, type: 'grammar' }); () => {
} if (context.events.hasHandler('ai:analyze')) {
}, 'Ctrl+Alt+G'); const content = context.editor.getContent() || '';
context.events.emit('ai:analyze', { text: content, type: 'grammar' });
}
},
'Ctrl+Alt+G'
);
} }
_registerStatusBar(context) { _registerStatusBar(context) {
context.statusBar.registerIndicator('word-goal', { context.statusBar.registerIndicator('word-goal', {
text: '0/1000', text: '0/1000',
tooltip: 'Daily word goal progress' tooltip: 'Daily word goal progress',
}); });
context.statusBar.registerIndicator('sprint-timer', { context.statusBar.registerIndicator('sprint-timer', {
text: '', text: '',
tooltip: 'Writing sprint timer' tooltip: 'Writing sprint timer',
}); });
} }
@@ -15,17 +15,34 @@
{ "id": "start-sprint", "label": "Studio: Start Sprint", "shortcut": "Ctrl+Alt+S" }, { "id": "start-sprint", "label": "Studio: Start Sprint", "shortcut": "Ctrl+Alt+S" },
{ "id": "stop-sprint", "label": "Studio: Stop Sprint", "shortcut": "Ctrl+Alt+Shift+S" }, { "id": "stop-sprint", "label": "Studio: Stop Sprint", "shortcut": "Ctrl+Alt+Shift+S" },
{ "id": "take-snapshot", "label": "Studio: Take Snapshot", "shortcut": "Ctrl+Alt+N" }, { "id": "take-snapshot", "label": "Studio: Take Snapshot", "shortcut": "Ctrl+Alt+N" },
{ "id": "restore-last-snapshot", "label": "Studio: Restore Last Snapshot", "shortcut": "Ctrl+Alt+Z" }, {
"id": "restore-last-snapshot",
"label": "Studio: Restore Last Snapshot",
"shortcut": "Ctrl+Alt+Z"
},
{ "id": "new-project", "label": "Studio: New Project", "shortcut": "" }, { "id": "new-project", "label": "Studio: New Project", "shortcut": "" },
{ "id": "compile-manuscript", "label": "Studio: Compile Manuscript", "shortcut": "Ctrl+Alt+E" }, {
{ "id": "proofread-document", "label": "Studio: Proofread Document", "shortcut": "Ctrl+Alt+G" } "id": "compile-manuscript",
"label": "Studio: Compile Manuscript",
"shortcut": "Ctrl+Alt+E"
},
{
"id": "proofread-document",
"label": "Studio: Proofread Document",
"shortcut": "Ctrl+Alt+G"
}
], ],
"statusBar": { "indicators": ["sprint-timer", "word-goal"] } "statusBar": { "indicators": ["sprint-timer", "word-goal"] }
}, },
"settings": [ "settings": [
{ "key": "dailyGoal", "type": "number", "default": 1000, "label": "Daily word goal" }, { "key": "dailyGoal", "type": "number", "default": 1000, "label": "Daily word goal" },
{ "key": "sprintDuration", "type": "number", "default": 25, "label": "Sprint duration (min)" }, { "key": "sprintDuration", "type": "number", "default": 25, "label": "Sprint duration (min)" },
{ "key": "autoSnapshotInterval", "type": "number", "default": 0, "label": "Auto-snapshot interval (min, 0=off)" }, {
"key": "autoSnapshotInterval",
"type": "number",
"default": 0,
"label": "Auto-snapshot interval (min, 0=off)"
},
{ "key": "maxSnapshots", "type": "number", "default": 50, "label": "Max snapshots to keep" } { "key": "maxSnapshots", "type": "number", "default": 50, "label": "Max snapshots to keep" }
] ]
} }
@@ -29,7 +29,8 @@ function renderGoalsPanel(container, { engines, settings }) {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'ws-stat-row'; row.className = 'ws-stat-row';
const label = document.createElement('span'); const label = document.createElement('span');
label.textContent = progress.written.toLocaleString() + ' / ' + dailyGoal.toLocaleString() + ' words'; label.textContent =
progress.written.toLocaleString() + ' / ' + dailyGoal.toLocaleString() + ' words';
const pct = document.createElement('span'); const pct = document.createElement('span');
pct.className = 'ws-pct'; pct.className = 'ws-pct';
pct.textContent = progress.pct + '%'; pct.textContent = progress.pct + '%';
@@ -81,7 +82,7 @@ function renderGoalsPanel(container, { engines, settings }) {
const chart = document.createElement('div'); const chart = document.createElement('div');
chart.className = 'ws-chart'; chart.className = 'ws-chart';
const maxWords = Math.max(...last30.map(d => d.words), 1); const maxWords = Math.max(...last30.map((d) => d.words), 1);
for (const day of last30) { for (const day of last30) {
const barEl = document.createElement('div'); const barEl = document.createElement('div');
const height = Math.max(2, (day.words / maxWords) * 60); const height = Math.max(2, (day.words / maxWords) * 60);
@@ -69,7 +69,8 @@ function renderManuscriptPanel(container, { engines, editor, settings }) {
const row = document.createElement('div'); const row = document.createElement('div');
row.className = 'ws-stat-row'; row.className = 'ws-stat-row';
const label = document.createElement('span'); const label = document.createElement('span');
label.textContent = stats.totalWords.toLocaleString() + ' / ' + stats.targetWords.toLocaleString() + ' words'; label.textContent =
stats.totalWords.toLocaleString() + ' / ' + stats.targetWords.toLocaleString() + ' words';
const pct = document.createElement('span'); const pct = document.createElement('span');
pct.className = 'ws-pct'; pct.className = 'ws-pct';
pct.textContent = stats.pctComplete + '%'; pct.textContent = stats.pctComplete + '%';
@@ -42,7 +42,7 @@ function renderProofreadPanel(container, { events, editor }) {
if (result && result.issues) { if (result && result.issues) {
renderIssues(issuesList, result.issues); renderIssues(issuesList, result.issues);
} }
} },
}); });
}); });
} }
@@ -80,7 +80,10 @@ function renderIssues(container, issues) {
const actions = document.createElement('div'); const actions = document.createElement('div');
actions.className = 'ws-issue-actions'; actions.className = 'ws-issue-actions';
for (const [action, label] of [['accept', 'Accept'], ['dismiss', 'Dismiss']]) { for (const [, label] of [
['accept', 'Accept'],
['dismiss', 'Dismiss'],
]) {
const actionBtn = document.createElement('button'); const actionBtn = document.createElement('button');
actionBtn.className = 'ws-btn ws-btn-sm'; actionBtn.className = 'ws-btn ws-btn-sm';
actionBtn.textContent = label; actionBtn.textContent = label;
@@ -45,7 +45,11 @@ function renderSnapshotsPanel(container, { engines, editor }) {
const actions = document.createElement('div'); const actions = document.createElement('div');
actions.className = 'ws-snapshot-actions'; actions.className = 'ws-snapshot-actions';
for (const [action, text, cls] of [['restore', 'Restore', ''], ['diff', 'Diff', ''], ['delete', 'Delete', 'ws-btn-danger']]) { for (const [action, text, cls] of [
['restore', 'Restore', ''],
['diff', 'Diff', ''],
['delete', 'Delete', 'ws-btn-danger'],
]) {
const actionBtn = document.createElement('button'); const actionBtn = document.createElement('button');
actionBtn.className = 'ws-btn ws-btn-sm' + (cls ? ' ' + cls : ''); actionBtn.className = 'ws-btn ws-btn-sm' + (cls ? ' ' + cls : '');
actionBtn.textContent = text; actionBtn.textContent = text;
@@ -12,7 +12,7 @@ class ProjectManager {
type: opts.type || 'manuscript', type: opts.type || 'manuscript',
target: { words: opts.targetWords || 0, deadline: opts.deadline || null }, target: { words: opts.targetWords || 0, deadline: opts.deadline || null },
chapters: [], chapters: [],
metadata: opts.metadata || {} metadata: opts.metadata || {},
}; };
this.fs.writeFile(dir + '/.project.json', JSON.stringify(project, null, 2)); this.fs.writeFile(dir + '/.project.json', JSON.stringify(project, null, 2));
return project; return project;
@@ -66,7 +66,7 @@ class ProjectManager {
totalWords, totalWords,
chapterCount: project.chapters.length, chapterCount: project.chapters.length,
targetWords: target, targetWords: target,
pctComplete: target > 0 ? Math.min(100, Math.round((totalWords / target) * 100)) : 0 pctComplete: target > 0 ? Math.min(100, Math.round((totalWords / target) * 100)) : 0,
}; };
} }
} }
@@ -24,7 +24,7 @@ class SnapshotManager {
timestamp: new Date().toISOString(), timestamp: new Date().toISOString(),
content, content,
wordCount: content.split(/\s+/).filter(Boolean).length, wordCount: content.split(/\s+/).filter(Boolean).length,
label label,
}; };
snaps.unshift(snap); snaps.unshift(snap);
this._saveAll(snaps); this._saveAll(snaps);
@@ -36,7 +36,7 @@ class SnapshotManager {
} }
getById(id) { getById(id) {
return this._getAll().find(s => s.id === id) || null; return this._getAll().find((s) => s.id === id) || null;
} }
restore(id) { restore(id) {
@@ -46,7 +46,7 @@ class SnapshotManager {
} }
delete(id) { delete(id) {
const snaps = this._getAll().filter(s => s.id !== id); const snaps = this._getAll().filter((s) => s.id !== id);
this._saveAll(snaps); this._saveAll(snaps);
} }
@@ -59,8 +59,12 @@ class SnapshotManager {
const newSet = new Set(newLines); const newSet = new Set(newLines);
let added = 0; let added = 0;
let removed = 0; let removed = 0;
for (const line of newLines) { if (!oldSet.has(line)) added++; } for (const line of newLines) {
for (const line of oldLines) { if (!newSet.has(line)) removed++; } if (!oldSet.has(line)) added++;
}
for (const line of oldLines) {
if (!newSet.has(line)) removed++;
}
return { added, removed }; return { added, removed };
} }
@@ -40,7 +40,9 @@ class SprintEngine {
} }
} }
isActive() { return this._active; } isActive() {
return this._active;
}
getRemaining() { getRemaining() {
if (!this._active) return 0; if (!this._active) return 0;
+15 -10
View File
@@ -12,10 +12,11 @@ class PluginContext {
* @param {object} deps.exportHooks - { preHooks: [], postHooks: [] } * @param {object} deps.exportHooks - { preHooks: [], postHooks: [] }
*/ */
constructor(deps) { constructor(deps) {
const { pluginId, sidebar, commands, statusBar, eventBus, settings, editor, ipc, exportHooks } = deps; const { pluginId, sidebar, commands, statusBar, eventBus, settings, editor, ipc, exportHooks } =
deps;
this.sidebar = { this.sidebar = {
registerPanel: (id, opts) => sidebar.registerPanel(`${pluginId}:${id}`, opts) registerPanel: (id, opts) => sidebar.registerPanel(`${pluginId}:${id}`, opts),
}; };
this.commands = { this.commands = {
@@ -28,41 +29,45 @@ class PluginContext {
} }
}; };
commands.register(`${pluginId}:${id}`, label, safeHandler, shortcut); commands.register(`${pluginId}:${id}`, label, safeHandler, shortcut);
} },
}; };
this.statusBar = { this.statusBar = {
registerIndicator: (id, opts) => statusBar.registerIndicator(`${pluginId}:${id}`, opts) registerIndicator: (id, opts) => statusBar.registerIndicator(`${pluginId}:${id}`, opts),
}; };
this.settings = { this.settings = {
get: (key) => settings.get(`plugins.${pluginId}.${key}`), get: (key) => settings.get(`plugins.${pluginId}.${key}`),
set: (key, value) => settings.set(`plugins.${pluginId}.${key}`, value), set: (key, value) => settings.set(`plugins.${pluginId}.${key}`, value),
onChanged: (key, cb) => settings.onChanged(`plugins.${pluginId}.${key}`, cb) onChanged: (key, cb) => settings.onChanged(`plugins.${pluginId}.${key}`, cb),
}; };
this.editor = { this.editor = {
getContent: () => editor.getContent(), getContent: () => editor.getContent(),
getSelection: () => editor.getSelection(), getSelection: () => editor.getSelection(),
insertAtCursor: (text) => editor.insertAtCursor(text), insertAtCursor: (text) => editor.insertAtCursor(text),
onContentChanged: (cb) => editor.onContentChanged(cb) onContentChanged: (cb) => editor.onContentChanged(cb),
}; };
this.events = { this.events = {
on: (event, handler) => eventBus.on(event, handler), on: (event, handler) => eventBus.on(event, handler),
off: (event, handler) => eventBus.off(event, handler), off: (event, handler) => eventBus.off(event, handler),
emit: (event, payload) => eventBus.emit(event, payload), emit: (event, payload) => eventBus.emit(event, payload),
hasHandler: (event) => eventBus.hasHandler(event) hasHandler: (event) => eventBus.hasHandler(event),
}; };
this.ipc = { this.ipc = {
invoke: (channel, ...args) => ipc.invoke(channel, ...args), invoke: (channel, ...args) => ipc.invoke(channel, ...args),
on: (channel, handler) => ipc.on(channel, handler) on: (channel, handler) => ipc.on(channel, handler),
}; };
this.exports = { this.exports = {
registerPreHook: (handler) => { if (exportHooks) exportHooks.preHooks.push(handler); }, registerPreHook: (handler) => {
registerPostHook: (handler) => { if (exportHooks) exportHooks.postHooks.push(handler); } if (exportHooks) exportHooks.preHooks.push(handler);
},
registerPostHook: (handler) => {
if (exportHooks) exportHooks.postHooks.push(handler);
},
}; };
} }
} }
+5 -2
View File
@@ -35,7 +35,10 @@ class PluginLoader {
const loaded = require(indexPath); const loaded = require(indexPath);
PluginClass = loaded.Plugin || loaded.default || null; PluginClass = loaded.Plugin || loaded.default || null;
} catch (err) { } catch (err) {
console.error(`[PluginLoader] Failed to load index.js for "${manifest.id}":`, err.message); console.error(
`[PluginLoader] Failed to load index.js for "${manifest.id}":`,
err.message
);
continue; continue;
} }
} }
@@ -46,7 +49,7 @@ class PluginLoader {
description: manifest.description, description: manifest.description,
manifest, manifest,
PluginClass, PluginClass,
dir: pluginDir dir: pluginDir,
}); });
this.loadedIds.add(manifest.id); this.loadedIds.add(manifest.id);
} catch (err) { } catch (err) {
+1 -1
View File
@@ -32,7 +32,7 @@ class PluginRegistry {
settings: this.deps.settings, settings: this.deps.settings,
editor: this.deps.editor, editor: this.deps.editor,
ipc: this.deps.ipc, ipc: this.deps.ipc,
exportHooks: this.exportHooks exportHooks: this.exportHooks,
}); });
try { try {
+1 -1
View File
@@ -14,7 +14,7 @@ class SettingsStore {
this.backend.set(key, value); this.backend.set(key, value);
} }
onChanged(key, callback) { onChanged(_key, _callback) {
// Deferred: plugins read settings on init/activate for MVP. // Deferred: plugins read settings on init/activate for MVP.
// Full change notification requires IPC watcher in main process. // Full change notification requires IPC watcher in main process.
} }
+25 -18
View File
@@ -140,7 +140,7 @@ const ALLOWED_SEND_CHANNELS = [
// Plugin settings // Plugin settings
'plugin-settings:get', 'plugin-settings:get',
'plugin-settings:set' 'plugin-settings:set',
]; ];
const ALLOWED_RECEIVE_CHANNELS = [ const ALLOWED_RECEIVE_CHANNELS = [
@@ -237,7 +237,7 @@ const ALLOWED_RECEIVE_CHANNELS = [
'load-template-menu', 'load-template-menu',
'toggle-command-palette', 'toggle-command-palette',
'toggle-sidebar-panel', 'toggle-sidebar-panel',
'toggle-bottom-panel' 'toggle-bottom-panel',
]; ];
/** /**
@@ -344,23 +344,23 @@ contextBridge.exposeInMainWorld('electronAPI', {
exists: (filePath) => ipcRenderer.invoke('path-exists', filePath), exists: (filePath) => ipcRenderer.invoke('path-exists', filePath),
isDirectory: (filePath) => ipcRenderer.invoke('is-directory', filePath), isDirectory: (filePath) => ipcRenderer.invoke('is-directory', filePath),
copy: (source, destination) => ipcRenderer.invoke('copy-path', { source, destination }), copy: (source, destination) => ipcRenderer.invoke('copy-path', { source, destination }),
move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination }) move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination }),
}, },
// Theme Operations // Theme Operations
theme: { theme: {
get: () => ipcRenderer.send('get-theme') get: () => ipcRenderer.send('get-theme'),
}, },
// Print Operations // Print Operations
print: { print: {
doPrint: (options) => ipcRenderer.send('do-print', options) doPrint: (options) => ipcRenderer.send('do-print', options),
}, },
// Export Operations // Export Operations
export: { export: {
withOptions: (format, options) => ipcRenderer.send('export-with-options', { format, options }), withOptions: (format, options) => ipcRenderer.send('export-with-options', { format, options }),
spreadsheet: (content, format) => ipcRenderer.send('export-spreadsheet', { content, format }) spreadsheet: (content, format) => ipcRenderer.send('export-spreadsheet', { content, format }),
}, },
// Batch Conversion // Batch Conversion
@@ -368,7 +368,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
convert: (inputFolder, outputFolder, format, options) => { convert: (inputFolder, outputFolder, format, options) => {
ipcRenderer.send('batch-convert', { inputFolder, outputFolder, format, options }); ipcRenderer.send('batch-convert', { inputFolder, outputFolder, format, options });
}, },
selectFolder: (type) => ipcRenderer.send('select-folder', type) selectFolder: (type) => ipcRenderer.send('select-folder', type),
}, },
// Universal Converter // Universal Converter
@@ -377,8 +377,14 @@ contextBridge.exposeInMainWorld('electronAPI', {
ipcRenderer.send('universal-convert', { tool, fromFormat, toFormat, filePath }); ipcRenderer.send('universal-convert', { tool, fromFormat, toFormat, filePath });
}, },
convertBatch: (tool, fromFormat, toFormat, inputFolder, outputFolder) => { convertBatch: (tool, fromFormat, toFormat, inputFolder, outputFolder) => {
ipcRenderer.send('universal-convert-batch', { tool, fromFormat, toFormat, inputFolder, outputFolder }); ipcRenderer.send('universal-convert-batch', {
} tool,
fromFormat,
toFormat,
inputFolder,
outputFolder,
});
},
}, },
// Header/Footer Operations // Header/Footer Operations
@@ -386,22 +392,23 @@ contextBridge.exposeInMainWorld('electronAPI', {
getSettings: () => ipcRenderer.send('get-header-footer-settings'), getSettings: () => ipcRenderer.send('get-header-footer-settings'),
saveSettings: (settings) => ipcRenderer.send('save-header-footer-settings', settings), saveSettings: (settings) => ipcRenderer.send('save-header-footer-settings', settings),
browseLogo: (position) => ipcRenderer.send('browse-header-footer-logo', position), browseLogo: (position) => ipcRenderer.send('browse-header-footer-logo', position),
saveLogo: (position, filePath) => ipcRenderer.send('save-header-footer-logo', { position, filePath }), saveLogo: (position, filePath) =>
clearLogo: (position) => ipcRenderer.send('clear-header-footer-logo', position) ipcRenderer.send('save-header-footer-logo', { position, filePath }),
clearLogo: (position) => ipcRenderer.send('clear-header-footer-logo', position),
}, },
// Page Settings // Page Settings
page: { page: {
getSettings: () => ipcRenderer.send('get-page-settings'), getSettings: () => ipcRenderer.send('get-page-settings'),
updateSettings: (settings) => ipcRenderer.send('update-page-settings', settings), updateSettings: (settings) => ipcRenderer.send('update-page-settings', settings),
setCustomStartPage: (pageNumber) => ipcRenderer.send('set-custom-start-page', pageNumber) setCustomStartPage: (pageNumber) => ipcRenderer.send('set-custom-start-page', pageNumber),
}, },
// PDF Operations // PDF Operations
pdf: { pdf: {
processOperation: (data) => ipcRenderer.send('process-pdf-operation', data), processOperation: (data) => ipcRenderer.send('process-pdf-operation', data),
getPageCount: (filePath) => ipcRenderer.send('get-pdf-page-count', filePath), getPageCount: (filePath) => ipcRenderer.send('get-pdf-page-count', filePath),
selectFolder: (inputId) => ipcRenderer.send('select-pdf-folder', inputId) selectFolder: (inputId) => ipcRenderer.send('select-pdf-folder', inputId),
}, },
// Image Converter Operations // Image Converter Operations
@@ -410,7 +417,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
batchConvert: (data) => ipcRenderer.send('image-batch-convert', data), batchConvert: (data) => ipcRenderer.send('image-batch-convert', data),
resize: (data) => ipcRenderer.send('image-resize', data), resize: (data) => ipcRenderer.send('image-resize', data),
compress: (data) => ipcRenderer.send('image-compress', data), compress: (data) => ipcRenderer.send('image-compress', data),
rotate: (data) => ipcRenderer.send('image-rotate', data) rotate: (data) => ipcRenderer.send('image-rotate', data),
}, },
// Audio Converter Operations // Audio Converter Operations
@@ -419,7 +426,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
batchConvert: (data) => ipcRenderer.send('audio-batch-convert', data), batchConvert: (data) => ipcRenderer.send('audio-batch-convert', data),
extract: (data) => ipcRenderer.send('audio-extract', data), extract: (data) => ipcRenderer.send('audio-extract', data),
trim: (data) => ipcRenderer.send('audio-trim', data), trim: (data) => ipcRenderer.send('audio-trim', data),
merge: (data) => ipcRenderer.send('audio-merge', data) merge: (data) => ipcRenderer.send('audio-merge', data),
}, },
// Video Converter Operations // Video Converter Operations
@@ -429,16 +436,16 @@ contextBridge.exposeInMainWorld('electronAPI', {
compress: (data) => ipcRenderer.send('video-compress', data), compress: (data) => ipcRenderer.send('video-compress', data),
trim: (data) => ipcRenderer.send('video-trim', data), trim: (data) => ipcRenderer.send('video-trim', data),
extractFrames: (data) => ipcRenderer.send('video-frames', data), extractFrames: (data) => ipcRenderer.send('video-frames', data),
toGif: (data) => ipcRenderer.send('video-gif', data) toGif: (data) => ipcRenderer.send('video-gif', data),
}, },
// Generator Windows // Generator Windows
generators: { generators: {
openAscii: () => ipcRenderer.send('open-ascii-generator'), openAscii: () => ipcRenderer.send('open-ascii-generator'),
openTable: () => ipcRenderer.send('open-table-generator') openTable: () => ipcRenderer.send('open-table-generator'),
}, },
getAppVersion: () => ipcRenderer.invoke('get-app-version') getAppVersion: () => ipcRenderer.invoke('get-app-version'),
}); });
// Log successful preload initialization // Log successful preload initialization
+90 -90
View File
@@ -1,85 +1,85 @@
class PrintPreview { class PrintPreview {
constructor() { constructor() {
this.overlay = document.getElementById('print-preview-overlay'); this.overlay = document.getElementById('print-preview-overlay');
this.modal = window.modals?.printPreviewModal; this.modal = window.modals?.printPreviewModal;
this._lastContent = ''; this._lastContent = '';
this.setupEventListeners(); this.setupEventListeners();
}
open(htmlContent) {
this._lastContent = htmlContent;
if (this.modal) {
this.modal.open();
} else {
this.overlay.classList.remove('hidden');
} }
this.updatePreview(htmlContent);
this.updateScaleLabel();
}
open(htmlContent) { close() {
this._lastContent = htmlContent; if (this.modal) {
if (this.modal) { this.modal.close();
this.modal.open(); } else {
} else { this.overlay.classList.add('hidden');
this.overlay.classList.remove('hidden');
}
this.updatePreview(htmlContent);
this.updateScaleLabel();
} }
}
close() { setupEventListeners() {
if (this.modal) { document.getElementById('print-preview-close')?.addEventListener('click', () => this.close());
this.modal.close(); document.getElementById('print-cancel')?.addEventListener('click', () => this.close());
} else { document.getElementById('print-execute')?.addEventListener('click', () => this.executePrint());
this.overlay.classList.add('hidden');
}
}
setupEventListeners() { // Update preview on option changes
document.getElementById('print-preview-close')?.addEventListener('click', () => this.close()); ['print-paper-size', 'print-orientation', 'print-margins'].forEach((id) => {
document.getElementById('print-cancel')?.addEventListener('click', () => this.close()); document.getElementById(id)?.addEventListener('change', () => this.refreshPreview());
document.getElementById('print-execute')?.addEventListener('click', () => this.executePrint()); });
// Update preview on option changes // Scale slider
['print-paper-size', 'print-orientation', 'print-margins'].forEach(id => { const scaleSlider = document.getElementById('print-scale');
document.getElementById(id)?.addEventListener('change', () => this.refreshPreview()); scaleSlider?.addEventListener('input', () => this.updateScaleLabel());
});
// Scale slider // Page range toggle
const scaleSlider = document.getElementById('print-scale'); document.getElementById('print-pages')?.addEventListener('change', (e) => {
scaleSlider?.addEventListener('input', () => this.updateScaleLabel()); const rangeInput = document.getElementById('print-page-range');
if (rangeInput) {
rangeInput.classList.toggle('hidden', e.target.value !== 'custom');
}
});
// Page range toggle // Note: Backdrop click and Escape key are now handled by ModalManager
document.getElementById('print-pages')?.addEventListener('change', (e) => { }
const rangeInput = document.getElementById('print-page-range');
if (rangeInput) {
rangeInput.classList.toggle('hidden', e.target.value !== 'custom');
}
});
// Note: Backdrop click and Escape key are now handled by ModalManager updateScaleLabel() {
} const scale = document.getElementById('print-scale')?.value || 100;
const label = document.getElementById('print-scale-value');
if (label) label.textContent = `${scale}%`;
}
updateScaleLabel() { updatePreview(htmlContent) {
const scale = document.getElementById('print-scale')?.value || 100; const frame = document.getElementById('print-preview-frame');
const label = document.getElementById('print-scale-value'); if (!frame) return;
if (label) label.textContent = `${scale}%`;
}
updatePreview(htmlContent) { this._lastContent = htmlContent;
const frame = document.getElementById('print-preview-frame');
if (!frame) return;
this._lastContent = htmlContent; const orientation = document.getElementById('print-orientation')?.value || 'portrait';
const paperSize = document.getElementById('print-paper-size')?.value || 'A4';
const orientation = document.getElementById('print-orientation')?.value || 'portrait'; // Get dimensions for paper size
const paperSize = document.getElementById('print-paper-size')?.value || 'A4'; const sizes = {
A3: { width: '297mm', height: '420mm' },
A4: { width: '210mm', height: '297mm' },
A5: { width: '148mm', height: '210mm' },
Letter: { width: '8.5in', height: '11in' },
Legal: { width: '8.5in', height: '14in' },
Tabloid: { width: '11in', height: '17in' },
};
// Get dimensions for paper size const size = sizes[paperSize] || sizes['A4'];
const sizes = { const width = orientation === 'landscape' ? size.height : size.width;
'A3': { width: '297mm', height: '420mm' }, const height = orientation === 'landscape' ? size.width : size.height;
'A4': { width: '210mm', height: '297mm' },
'A5': { width: '148mm', height: '210mm' },
'Letter': { width: '8.5in', height: '11in' },
'Legal': { width: '8.5in', height: '14in' },
'Tabloid': { width: '11in', height: '17in' },
};
const size = sizes[paperSize] || sizes['A4']; const previewHtml = `
const width = orientation === 'landscape' ? size.height : size.width;
const height = orientation === 'landscape' ? size.width : size.height;
const previewHtml = `
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
@@ -105,34 +105,34 @@ class PrintPreview {
</html> </html>
`; `;
frame.srcdoc = previewHtml; frame.srcdoc = previewHtml;
} }
refreshPreview() { refreshPreview() {
if (this._lastContent) { if (this._lastContent) {
this.updatePreview(this._lastContent); this.updatePreview(this._lastContent);
}
} }
}
getOptions() { getOptions() {
return { return {
paperSize: document.getElementById('print-paper-size')?.value || 'A4', paperSize: document.getElementById('print-paper-size')?.value || 'A4',
orientation: document.getElementById('print-orientation')?.value || 'portrait', orientation: document.getElementById('print-orientation')?.value || 'portrait',
margins: document.getElementById('print-margins')?.value || 'default', margins: document.getElementById('print-margins')?.value || 'default',
scale: parseInt(document.getElementById('print-scale')?.value || '100'), scale: parseInt(document.getElementById('print-scale')?.value || '100'),
headers: document.getElementById('print-headers')?.checked ?? true, headers: document.getElementById('print-headers')?.checked ?? true,
background: document.getElementById('print-background')?.checked ?? true, background: document.getElementById('print-background')?.checked ?? true,
pages: document.getElementById('print-pages')?.value || 'all', pages: document.getElementById('print-pages')?.value || 'all',
pageRange: document.getElementById('print-page-range')?.value || '', pageRange: document.getElementById('print-page-range')?.value || '',
}; };
} }
executePrint() { executePrint() {
const options = this.getOptions(); const options = this.getOptions();
const { ipcRenderer } = require('electron'); const { ipcRenderer } = require('electron');
ipcRenderer.send('do-print-with-options', options); ipcRenderer.send('do-print-with-options', options);
this.close(); this.close();
} }
} }
module.exports = { PrintPreview }; module.exports = { PrintPreview };
+5179 -4389
View File
File diff suppressed because it is too large Load Diff
-47
View File
@@ -1,47 +0,0 @@
import React from 'react';
import { AppHeader } from './components/layout/AppHeader';
import { TabBar } from './components/layout/TabBar';
import { Toolbar } from './components/layout/Toolbar';
import { Breadcrumb } from './components/layout/Breadcrumb';
import { Sidebar } from './components/sidebar/Sidebar';
import { EditorPane } from './components/editor/EditorPane';
import { PreviewPane } from './components/preview/PreviewPane';
import { StatusBar } from './components/layout/StatusBar';
import { CommandPalette } from './components/modals/CommandPalette';
import { ExportDialog } from './components/modals/ExportDialog';
import { SettingsDialog } from './components/modals/SettingsDialog';
import { useAppStore } from './stores/appStore';
function App() {
const { sidebarVisible, previewVisible, activeTabId } = useAppStore();
return (
<div className="flex flex-col h-screen bg-background text-foreground overflow-hidden">
<AppHeader />
<TabBar />
<Toolbar />
<Breadcrumb />
<main className="flex flex-1 overflow-hidden">
{sidebarVisible && <Sidebar />}
<div className="flex flex-1 overflow-hidden">
<EditorPane className={previewVisible ? 'flex-1' : 'flex-1'} />
{previewVisible && (
<>
<div className="w-px bg-border cursor-col-resize hover:bg-brand transition-colors" />
<PreviewPane className="flex-1" />
</>
)}
</div>
</main>
<StatusBar />
<CommandPalette />
<ExportDialog />
<SettingsDialog />
</div>
);
}
export default App;
-16
View File
@@ -1,16 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MarkdownConverter</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="font-sans antialiased">
<div id="root"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>
-10
View File
@@ -1,10 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './styles/globals.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
-82
View File
@@ -1,82 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 9%;
--primary: 11 79% 51%;
--primary-foreground: 0 0% 100%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 11 79% 51%;
--radius: 0.5rem;
}
.dark {
--background: 30 14% 4%;
--foreground: 0 0% 98%;
--card: 30 14% 6%;
--card-foreground: 0 0% 98%;
--popover: 30 14% 6%;
--popover-foreground: 0 0% 98%;
--primary: 11 79% 51%;
--primary-foreground: 0 0% 100%;
--secondary: 30 6% 15%;
--secondary-foreground: 0 0% 98%;
--muted: 30 6% 15%;
--muted-foreground: 0 0% 63%;
--accent: 30 6% 15%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62% 30%;
--destructive-foreground: 0 0% 100%;
--border: 30 6% 15%;
--input: 30 6% 15%;
--ring: 11 79% 51%;
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: hsl(var(--muted-foreground) / 0.3);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.5);
}
/* CodeMirror integration */
.cm-editor {
@apply h-full;
}
.cm-editor .cm-scroller {
@apply font-mono text-sm;
}
-90
View File
@@ -1,90 +0,0 @@
export interface ElectronAPI {
// App info
getAppVersion: () => Promise<string>;
// File operations
openFile: () => Promise<{ canceled: boolean; filePaths: string[] }>;
saveFile: (data: { path: string; content: string }) => Promise<void>;
readFile: (path: string) => Promise<string>;
setCurrentFile: (path: string | null) => void;
// Export
exportDocument: (format: string, options?: Record<string, any>) => Promise<void>;
// Theme
getTheme: () => void;
onThemeChanged: (callback: (theme: string) => void) => () => void;
// File events
onFileOpened: (callback: (data: { path: string; content: string }) => void) => () => void;
onFileNew: (callback: () => void) => () => void;
onFileSave: (callback: () => void) => () => void;
// Conversion status
onConversionStatus: (callback: (message: string) => void) => () => void;
onConversionComplete: (callback: (data: { format: string; outputPath: string }) => void) => () => void;
// Dialogs
showExportDialog: (format: string) => void;
showBatchDialog: () => void;
showUniversalConverterDialog: () => void;
showTableGenerator: () => void;
showPdfEditorDialog: () => void;
showHeaderFooterDialog: () => void;
showFieldPickerDialog: () => void;
// Settings
getSettings: (key: string) => Promise<any>;
setSettings: (key: string, value: any) => Promise<void>;
// Plugin settings
getPluginSetting: (key: string) => Promise<any>;
setPluginSetting: (key: string, value: any) => Promise<void>;
// Sidebar
toggleSidebar: () => void;
toggleBottomPanel: () => void;
// Print
doPrint: (options?: any) => void;
// PDF
openPdfViewer: (filePath: string) => void;
processPdfOperation: (data: any) => void;
// Images
selectFolder: () => Promise<string | null>;
savePastedImage: (data: { base64: string; ext: string }) => Promise<{ relativePath: string } | null>;
// Templates
loadTemplate: (file: string) => Promise<string>;
getSnippets: () => Promise<any[]>;
saveSnippet: (snippet: any) => Promise<void>;
deleteSnippet: (id: string) => Promise<void>;
// Git
gitStatus: () => Promise<any>;
gitDiff: (file: string) => Promise<any>;
gitStage: (files: string[]) => Promise<void>;
gitCommit: (message: string) => Promise<void>;
gitLog: () => Promise<any[]>;
// Directory
listDirectory: (dir: string) => Promise<any[] | null>;
openFilePath: (path: string) => void;
// Custom CSS
selectCustomCSS: () => Promise<string | null>;
loadCustomCSS: () => void;
clearCustomCSS: () => void;
// Generic invoke/on
invoke: (channel: string, data?: any) => Promise<any>;
on: (channel: string, callback: (...args: any[]) => void) => () => void;
}
declare global {
interface Window {
electronAPI: ElectronAPI;
}
}
+34 -34
View File
@@ -1,49 +1,49 @@
class ReplPanel { class ReplPanel {
constructor() { constructor() {
this.panel = document.getElementById('bottom-panel'); this.panel = document.getElementById('bottom-panel');
this.output = document.getElementById('repl-output'); this.output = document.getElementById('repl-output');
this.setupEventListeners(); this.setupEventListeners();
} }
setupEventListeners() { setupEventListeners() {
document.getElementById('bottom-panel-toggle')?.addEventListener('click', () => this.toggle()); document.getElementById('bottom-panel-toggle')?.addEventListener('click', () => this.toggle());
document.getElementById('repl-clear')?.addEventListener('click', () => this.clear()); document.getElementById('repl-clear')?.addEventListener('click', () => this.clear());
} }
toggle() { toggle() {
this.panel.classList.toggle('collapsed'); this.panel.classList.toggle('collapsed');
const btn = document.getElementById('bottom-panel-toggle'); const btn = document.getElementById('bottom-panel-toggle');
if (btn) btn.textContent = this.panel.classList.contains('collapsed') ? '\u25BC' : '\u25B2'; if (btn) btn.textContent = this.panel.classList.contains('collapsed') ? '\u25BC' : '\u25B2';
} }
show() { show() {
this.panel.classList.remove('collapsed'); this.panel.classList.remove('collapsed');
const btn = document.getElementById('bottom-panel-toggle'); const btn = document.getElementById('bottom-panel-toggle');
if (btn) btn.textContent = '\u25B2'; if (btn) btn.textContent = '\u25B2';
} }
clear() { clear() {
if (this.output) this.output.innerHTML = ''; if (this.output) this.output.innerHTML = '';
} }
appendOutput(command, result) { appendOutput(command, result) {
const entry = document.createElement('div'); const entry = document.createElement('div');
entry.className = 'repl-entry'; entry.className = 'repl-entry';
entry.innerHTML = ` entry.innerHTML = `
<div class="repl-command">\u25B6 ${command}</div> <div class="repl-command">\u25B6 ${command}</div>
${result.stdout ? `<div class="repl-stdout">${this.escapeHtml(result.stdout)}</div>` : ''} ${result.stdout ? `<div class="repl-stdout">${this.escapeHtml(result.stdout)}</div>` : ''}
${result.stderr ? `<div class="repl-stderr">${this.escapeHtml(result.stderr)}</div>` : ''} ${result.stderr ? `<div class="repl-stderr">${this.escapeHtml(result.stderr)}</div>` : ''}
${result.error ? `<div class="repl-error">Error: ${this.escapeHtml(result.error)}</div>` : ''} ${result.error ? `<div class="repl-error">Error: ${this.escapeHtml(result.error)}</div>` : ''}
`; `;
this.output?.appendChild(entry); this.output?.appendChild(entry);
this.output?.scrollTo(0, this.output.scrollHeight); this.output?.scrollTo(0, this.output.scrollHeight);
} }
escapeHtml(text) { escapeHtml(text) {
const div = document.createElement('div'); const div = document.createElement('div');
div.textContent = text; div.textContent = text;
return div.innerHTML; return div.innerHTML;
} }
} }
module.exports = { ReplPanel }; module.exports = { ReplPanel };
+65 -41
View File
@@ -1,7 +1,5 @@
const path = require('path');
function renderExplorerPanel(container, { listDirectory, onFileOpen, currentDir }) { function renderExplorerPanel(container, { listDirectory, onFileOpen, currentDir }) {
container.innerHTML = ` container.innerHTML = `
<div class="explorer-panel"> <div class="explorer-panel">
<div class="explorer-toolbar"> <div class="explorer-toolbar">
<input type="text" class="explorer-path" id="explorer-path" value="${currentDir || ''}" placeholder="Open a folder..." readonly> <input type="text" class="explorer-path" id="explorer-path" value="${currentDir || ''}" placeholder="Open a folder..." readonly>
@@ -11,60 +9,86 @@ function renderExplorerPanel(container, { listDirectory, onFileOpen, currentDir
</div> </div>
`; `;
document.getElementById('explorer-browse')?.addEventListener('click', async () => { document.getElementById('explorer-browse')?.addEventListener('click', async () => {
const dir = await listDirectory(null); // null means open folder dialog const dir = await listDirectory(null); // null means open folder dialog
if (dir) { if (dir) {
document.getElementById('explorer-path').value = dir.path; document.getElementById('explorer-path').value = dir.path;
renderTree(document.getElementById('explorer-tree'), dir.entries, listDirectory, onFileOpen, dir.path); renderTree(
} document.getElementById('explorer-tree'),
}); dir.entries,
listDirectory,
if (currentDir) { onFileOpen,
listDirectory(currentDir).then(dir => { dir.path
if (dir) renderTree(document.getElementById('explorer-tree'), dir.entries, listDirectory, onFileOpen, currentDir); );
});
} }
});
if (currentDir) {
listDirectory(currentDir).then((dir) => {
if (dir)
renderTree(
document.getElementById('explorer-tree'),
dir.entries,
listDirectory,
onFileOpen,
currentDir
);
});
}
} }
function renderTree(container, entries, listDirectory, onFileOpen, basePath) { function renderTree(container, entries, listDirectory, onFileOpen, _basePath) {
container.innerHTML = entries.map(entry => { container.innerHTML = entries
if (entry.isDirectory) { .map((entry) => {
return `<div class="tree-item tree-folder collapsed" data-path="${entry.path}"> if (entry.isDirectory) {
return `<div class="tree-item tree-folder collapsed" data-path="${entry.path}">
<span class="tree-icon">&#x25B6;</span> <span class="tree-icon">&#x25B6;</span>
<span class="tree-name">${entry.name}</span> <span class="tree-name">${entry.name}</span>
<div class="tree-children"></div> <div class="tree-children"></div>
</div>`; </div>`;
} }
return `<div class="tree-item tree-file" data-path="${entry.path}"> return `<div class="tree-item tree-file" data-path="${entry.path}">
<span class="tree-icon">${getFileIcon(entry.name)}</span> <span class="tree-icon">${getFileIcon(entry.name)}</span>
<span class="tree-name">${entry.name}</span> <span class="tree-name">${entry.name}</span>
</div>`; </div>`;
}).join(''); })
.join('');
container.querySelectorAll('.tree-folder').forEach(el => { container.querySelectorAll('.tree-folder').forEach((el) => {
el.querySelector('.tree-name').addEventListener('click', async () => { el.querySelector('.tree-name').addEventListener('click', async () => {
const isCollapsed = el.classList.contains('collapsed'); const isCollapsed = el.classList.contains('collapsed');
if (isCollapsed) { if (isCollapsed) {
const dir = await listDirectory(el.dataset.path); const dir = await listDirectory(el.dataset.path);
if (dir) { if (dir) {
const childContainer = el.querySelector('.tree-children'); const childContainer = el.querySelector('.tree-children');
renderTree(childContainer, dir.entries, listDirectory, onFileOpen, el.dataset.path); renderTree(childContainer, dir.entries, listDirectory, onFileOpen, el.dataset.path);
} }
} }
el.classList.toggle('collapsed'); el.classList.toggle('collapsed');
el.querySelector('.tree-icon').textContent = el.classList.contains('collapsed') ? '\u25B6' : '\u25BC'; el.querySelector('.tree-icon').textContent = el.classList.contains('collapsed')
}); ? '\u25B6'
: '\u25BC';
}); });
});
container.querySelectorAll('.tree-file').forEach(el => { container.querySelectorAll('.tree-file').forEach((el) => {
el.addEventListener('click', () => onFileOpen(el.dataset.path)); el.addEventListener('click', () => onFileOpen(el.dataset.path));
}); });
} }
function getFileIcon(filename) { function getFileIcon(filename) {
const ext = filename.split('.').pop().toLowerCase(); const ext = filename.split('.').pop().toLowerCase();
const icons = { md: '\u{1F4DD}', js: '\u{1F4DC}', json: '{}', html: '\u{1F310}', css: '\u{1F3A8}', py: '\u{1F40D}', pdf: '\u{1F4D5}', txt: '\u{1F4C4}' }; const icons = {
return icons[ext] || '\u{1F4C4}'; md: '\u{1F4DD}',
js: '\u{1F4DC}',
json: '{}',
html: '\u{1F310}',
css: '\u{1F3A8}',
py: '\u{1F40D}',
pdf: '\u{1F4D5}',
txt: '\u{1F4C4}',
};
return icons[ext] || '\u{1F4C4}';
} }
module.exports = { renderExplorerPanel }; module.exports = { renderExplorerPanel };
+55 -45
View File
@@ -1,5 +1,5 @@
function renderGitPanel(container, { gitStatus, gitDiff, gitStage, gitCommit, gitLog }) { function renderGitPanel(container, { gitStatus, _gitDiff, gitStage, gitCommit, gitLog }) {
container.innerHTML = ` container.innerHTML = `
<div class="git-panel"> <div class="git-panel">
<div class="git-section"> <div class="git-section">
<h4 class="git-section-title">Changes</h4> <h4 class="git-section-title">Changes</h4>
@@ -19,66 +19,76 @@ function renderGitPanel(container, { gitStatus, gitDiff, gitStage, gitCommit, gi
</div> </div>
`; `;
loadGitStatus(); loadGitStatus();
async function loadGitStatus() { async function loadGitStatus() {
const status = await gitStatus(); const status = await gitStatus();
const changesEl = document.getElementById('git-changes'); const changesEl = document.getElementById('git-changes');
if (!status || !changesEl) return; if (!status || !changesEl) return;
if (status.error) { if (status.error) {
changesEl.innerHTML = `<p class="git-info">${status.error}</p>`; changesEl.innerHTML = `<p class="git-info">${status.error}</p>`;
return; return;
} }
const files = [ const files = [
...status.modified.map(f => ({ file: f, status: 'M', color: '#f59e0b' })), ...status.modified.map((f) => ({ file: f, status: 'M', color: '#f59e0b' })),
...status.not_added.map(f => ({ file: f, status: '?', color: '#6b7280' })), ...status.not_added.map((f) => ({ file: f, status: '?', color: '#6b7280' })),
...status.created.map(f => ({ file: f, status: 'A', color: '#10b981' })), ...status.created.map((f) => ({ file: f, status: 'A', color: '#10b981' })),
...status.deleted.map(f => ({ file: f, status: 'D', color: '#ef4444' })), ...status.deleted.map((f) => ({ file: f, status: 'D', color: '#ef4444' })),
...status.staged.map(f => ({ file: f, status: 'S', color: '#3b82f6' })), ...status.staged.map((f) => ({ file: f, status: 'S', color: '#3b82f6' })),
]; ];
if (files.length === 0) { if (files.length === 0) {
changesEl.innerHTML = '<p class="git-info">No changes</p>'; changesEl.innerHTML = '<p class="git-info">No changes</p>';
} else { } else {
changesEl.innerHTML = files.map(f => ` changesEl.innerHTML = files
.map(
(f) => `
<div class="git-file" data-file="${f.file}"> <div class="git-file" data-file="${f.file}">
<span class="git-file-status" style="color:${f.color}">${f.status}</span> <span class="git-file-status" style="color:${f.color}">${f.status}</span>
<span class="git-file-name">${f.file}</span> <span class="git-file-name">${f.file}</span>
<button class="git-stage-btn" data-file="${f.file}" title="Stage file">+</button> <button class="git-stage-btn" data-file="${f.file}" title="Stage file">+</button>
</div> </div>
`).join(''); `
)
.join('');
changesEl.querySelectorAll('.git-stage-btn').forEach(btn => { changesEl.querySelectorAll('.git-stage-btn').forEach((btn) => {
btn.addEventListener('click', async (e) => { btn.addEventListener('click', async (e) => {
e.stopPropagation(); e.stopPropagation();
await gitStage([btn.dataset.file]); await gitStage([btn.dataset.file]);
loadGitStatus(); loadGitStatus();
}); });
}); });
} }
// Load log // Load log
const log = await gitLog(); const log = await gitLog();
const logEl = document.getElementById('git-log'); const logEl = document.getElementById('git-log');
if (log && logEl) { if (log && logEl) {
logEl.innerHTML = (log.all || []).slice(0, 10).map(entry => ` logEl.innerHTML =
(log.all || [])
.slice(0, 10)
.map(
(entry) => `
<div class="git-log-entry"> <div class="git-log-entry">
<div class="git-log-msg">${entry.message}</div> <div class="git-log-msg">${entry.message}</div>
<div class="git-log-meta">${entry.date?.substring(0, 10) || ''} &middot; ${entry.author_name || ''}</div> <div class="git-log-meta">${entry.date?.substring(0, 10) || ''} &middot; ${entry.author_name || ''}</div>
</div> </div>
`).join('') || '<p class="git-info">No commits</p>'; `
} )
.join('') || '<p class="git-info">No commits</p>';
} }
}
document.getElementById('git-commit-btn')?.addEventListener('click', async () => { document.getElementById('git-commit-btn')?.addEventListener('click', async () => {
const msg = document.getElementById('git-commit-msg')?.value?.trim(); const msg = document.getElementById('git-commit-msg')?.value?.trim();
if (!msg) return; if (!msg) return;
await gitCommit(msg); await gitCommit(msg);
document.getElementById('git-commit-msg').value = ''; document.getElementById('git-commit-msg').value = '';
loadGitStatus(); loadGitStatus();
}); });
} }
module.exports = { renderGitPanel }; module.exports = { renderGitPanel };
+79 -73
View File
@@ -4,54 +4,54 @@
*/ */
function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHeadingClick }) { function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHeadingClick }) {
container.innerHTML = ` container.innerHTML = `
<div class="outline-panel"> <div class="outline-panel">
<div class="outline-list" id="outline-list"></div> <div class="outline-list" id="outline-list"></div>
</div> </div>
`; `;
const listEl = document.getElementById('outline-list'); const listEl = document.getElementById('outline-list');
let headings = []; let headings = [];
let activeLine = 1; let activeLine = 1;
let debounceTimer = null; let debounceTimer = null;
function parseHeadings(content) { function parseHeadings(content) {
const result = []; const result = [];
if (!content) return result; if (!content) return result;
const lines = content.split('\n'); const lines = content.split('\n');
const regex = /^(#{1,6})\s+(.+)$/; const regex = /^(#{1,6})\s+(.+)$/;
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
const match = regex.exec(lines[i]); const match = regex.exec(lines[i]);
if (match) { if (match) {
result.push({ result.push({
level: match[1].length, level: match[1].length,
text: match[2].trim(), text: match[2].trim(),
line: i + 1 line: i + 1,
}); });
} }
}
return result;
} }
return result;
}
function findActiveHeading(currentLine) { function findActiveHeading(currentLine) {
let active = null; let active = null;
for (const h of headings) { for (const h of headings) {
if (h.line <= currentLine) { if (h.line <= currentLine) {
active = h; active = h;
} else { } else {
break; break;
} }
}
return active;
} }
return active;
}
function renderHeadings() { function renderHeadings() {
const content = getEditorContent(); const content = getEditorContent();
headings = parseHeadings(content); headings = parseHeadings(content);
activeLine = getActiveLine(); activeLine = getActiveLine();
if (headings.length === 0) { if (headings.length === 0) {
listEl.innerHTML = ` listEl.innerHTML = `
<div class="outline-empty"> <div class="outline-empty">
<p>No headings found</p> <p>No headings found</p>
<p class="outline-hint"># Heading 1</p> <p class="outline-hint"># Heading 1</p>
@@ -59,56 +59,62 @@ function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHead
<p class="outline-hint">### Heading 3</p> <p class="outline-hint">### Heading 3</p>
</div> </div>
`; `;
return; return;
} }
const activeHeading = findActiveHeading(activeLine); const activeHeading = findActiveHeading(activeLine);
listEl.innerHTML = headings.map((h, idx) => ` listEl.innerHTML =
headings
.map(
(h, idx) => `
<div class="outline-item outline-level-${h.level}${activeHeading && h.line === activeHeading.line ? ' active' : ''}" <div class="outline-item outline-level-${h.level}${activeHeading && h.line === activeHeading.line ? ' active' : ''}"
data-line="${h.line}" data-index="${idx}"> data-line="${h.line}" data-index="${idx}">
<span class="outline-text">${escapeHtml(h.text)}</span> <span class="outline-text">${escapeHtml(h.text)}</span>
<span class="outline-badge">H${h.level}</span> <span class="outline-badge">H${h.level}</span>
</div> </div>
`).join('') + `<div class="outline-footer">${headings.length} heading${headings.length !== 1 ? 's' : ''}</div>`; `
)
.join('') +
`<div class="outline-footer">${headings.length} heading${headings.length !== 1 ? 's' : ''}</div>`;
listEl.querySelectorAll('.outline-item').forEach(item => { listEl.querySelectorAll('.outline-item').forEach((item) => {
item.addEventListener('click', () => { item.addEventListener('click', () => {
const line = parseInt(item.dataset.line, 10); const line = parseInt(item.dataset.line, 10);
onHeadingClick(line); onHeadingClick(line);
}); });
}); });
} }
function escapeHtml(text) { function escapeHtml(text) {
const div = document.createElement('div'); const div = document.createElement('div');
div.textContent = text; div.textContent = text;
return div.innerHTML; return div.innerHTML;
} }
function refresh() { function refresh() {
clearTimeout(debounceTimer); clearTimeout(debounceTimer);
debounceTimer = setTimeout(renderHeadings, 300); debounceTimer = setTimeout(renderHeadings, 300);
} }
function setActiveHeading(line) { function setActiveHeading(line) {
activeLine = line; activeLine = line;
const activeHeading = findActiveHeading(line); const activeHeading = findActiveHeading(line);
listEl.querySelectorAll('.outline-item').forEach(item => { listEl.querySelectorAll('.outline-item').forEach((item) => {
const itemLine = parseInt(item.dataset.line, 10); const itemLine = parseInt(item.dataset.line, 10);
if (activeHeading && itemLine === activeHeading.line) { if (activeHeading && itemLine === activeHeading.line) {
item.classList.add('active'); item.classList.add('active');
} else { } else {
item.classList.remove('active'); item.classList.remove('active');
} }
}); });
} }
container._refreshOutline = refresh; container._refreshOutline = refresh;
container._setActiveHeading = setActiveHeading; container._setActiveHeading = setActiveHeading;
renderHeadings(); renderHeadings();
} }
module.exports = { renderOutlinePanel }; module.exports = { renderOutlinePanel };
+42 -40
View File
@@ -1,50 +1,52 @@
class SidebarManager { class SidebarManager {
constructor() { constructor() {
this.sidebar = document.getElementById('sidebar'); this.sidebar = document.getElementById('sidebar');
this.panelContent = document.getElementById('sidebar-panel-content'); this.panelContent = document.getElementById('sidebar-panel-content');
this.panelTitle = document.querySelector('.sidebar-panel-title'); this.panelTitle = document.querySelector('.sidebar-panel-title');
this.activePanel = null; this.activePanel = null;
this.panels = new Map(); this.panels = new Map();
this.setupEventListeners(); this.setupEventListeners();
} }
setupEventListeners() { setupEventListeners() {
document.querySelectorAll('.sidebar-icon').forEach(btn => { document.querySelectorAll('.sidebar-icon').forEach((btn) => {
btn.addEventListener('click', () => this.togglePanel(btn.dataset.panel)); btn.addEventListener('click', () => this.togglePanel(btn.dataset.panel));
}); });
document.querySelector('.sidebar-panel-close')?.addEventListener('click', () => this.collapse()); document
} .querySelector('.sidebar-panel-close')
?.addEventListener('click', () => this.collapse());
}
registerPanel(name, { title, render }) { registerPanel(name, { title, render }) {
this.panels.set(name, { title, render }); this.panels.set(name, { title, render });
} }
togglePanel(name) { togglePanel(name) {
if (this.activePanel === name) { if (this.activePanel === name) {
this.collapse(); this.collapse();
} else { } else {
this.expand(name); this.expand(name);
}
} }
}
expand(name) { expand(name) {
const panel = this.panels.get(name); const panel = this.panels.get(name);
if (!panel) return; if (!panel) return;
this.sidebar.classList.remove('collapsed'); this.sidebar.classList.remove('collapsed');
this.panelTitle.textContent = panel.title; this.panelTitle.textContent = panel.title;
this.panelContent.innerHTML = ''; this.panelContent.innerHTML = '';
panel.render(this.panelContent); panel.render(this.panelContent);
this.activePanel = name; this.activePanel = name;
document.querySelectorAll('.sidebar-icon').forEach(btn => { document.querySelectorAll('.sidebar-icon').forEach((btn) => {
btn.classList.toggle('active', btn.dataset.panel === name); btn.classList.toggle('active', btn.dataset.panel === name);
}); });
} }
collapse() { collapse() {
this.sidebar.classList.add('collapsed'); this.sidebar.classList.add('collapsed');
this.activePanel = null; this.activePanel = null;
document.querySelectorAll('.sidebar-icon').forEach(btn => btn.classList.remove('active')); document.querySelectorAll('.sidebar-icon').forEach((btn) => btn.classList.remove('active'));
} }
} }
module.exports = { SidebarManager }; module.exports = { SidebarManager };
+52 -40
View File
@@ -1,5 +1,5 @@
function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippet, onInsert }) { function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippet, onInsert }) {
container.innerHTML = ` container.innerHTML = `
<div class="snippets-panel"> <div class="snippets-panel">
<div class="snippets-toolbar"> <div class="snippets-toolbar">
<input type="text" class="snippets-search" id="snippets-search" placeholder="Search snippets..."> <input type="text" class="snippets-search" id="snippets-search" placeholder="Search snippets...">
@@ -9,22 +9,29 @@ function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippe
</div> </div>
`; `;
let snippets = []; let snippets = [];
async function loadSnippets() { async function loadSnippets() {
snippets = await getSnippets() || []; snippets = (await getSnippets()) || [];
renderList(document.getElementById('snippets-search')?.value || ''); renderList(document.getElementById('snippets-search')?.value || '');
} }
function renderList(query) { function renderList(query) {
const list = document.getElementById('snippets-list'); const list = document.getElementById('snippets-list');
if (!list) return; if (!list) return;
const filtered = query const filtered = query
? snippets.filter(s => s.name.toLowerCase().includes(query.toLowerCase()) || (s.language || '').toLowerCase().includes(query.toLowerCase())) ? snippets.filter(
: snippets; (s) =>
s.name.toLowerCase().includes(query.toLowerCase()) ||
(s.language || '').toLowerCase().includes(query.toLowerCase())
)
: snippets;
list.innerHTML = filtered.length ? filtered.map(s => ` list.innerHTML = filtered.length
? filtered
.map(
(s) => `
<div class="snippet-item" data-id="${s.id}"> <div class="snippet-item" data-id="${s.id}">
<div class="snippet-header"> <div class="snippet-header">
<span class="snippet-name">${s.name}</span> <span class="snippet-name">${s.name}</span>
@@ -36,36 +43,41 @@ function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippe
<button class="snippet-delete" data-id="${s.id}" title="Delete">&times;</button> <button class="snippet-delete" data-id="${s.id}" title="Delete">&times;</button>
</div> </div>
</div> </div>
`).join('') : '<p class="git-info">No snippets yet. Click + to add one.</p>'; `
)
.join('')
: '<p class="git-info">No snippets yet. Click + to add one.</p>';
list.querySelectorAll('.snippet-insert').forEach(btn => { list.querySelectorAll('.snippet-insert').forEach((btn) => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
const s = snippets.find(sn => sn.id === btn.dataset.id); const s = snippets.find((sn) => sn.id === btn.dataset.id);
if (s) onInsert(s.code); if (s) onInsert(s.code);
}); });
});
list.querySelectorAll('.snippet-delete').forEach(btn => {
btn.addEventListener('click', async () => {
await deleteSnippet(btn.dataset.id);
loadSnippets();
});
});
}
document.getElementById('snippets-search')?.addEventListener('input', (e) => renderList(e.target.value));
document.getElementById('snippets-add')?.addEventListener('click', () => {
const name = prompt('Snippet name:');
if (!name) return;
const language = prompt('Language (e.g., javascript, python, html):') || 'text';
const code = prompt('Paste your code snippet:');
if (!code) return;
saveSnippet({ id: Date.now().toString(), name, language, code }).then(() => loadSnippets());
}); });
loadSnippets(); list.querySelectorAll('.snippet-delete').forEach((btn) => {
btn.addEventListener('click', async () => {
await deleteSnippet(btn.dataset.id);
loadSnippets();
});
});
}
document
.getElementById('snippets-search')
?.addEventListener('input', (e) => renderList(e.target.value));
document.getElementById('snippets-add')?.addEventListener('click', () => {
const name = prompt('Snippet name:');
if (!name) return;
const language = prompt('Language (e.g., javascript, python, html):') || 'text';
const code = prompt('Paste your code snippet:');
if (!code) return;
saveSnippet({ id: Date.now().toString(), name, language, code }).then(() => loadSnippets());
});
loadSnippets();
} }
module.exports = { renderSnippetsPanel }; module.exports = { renderSnippetsPanel };
+24 -19
View File
@@ -1,34 +1,39 @@
const fs = require('fs');
const path = require('path');
const templates = [ const templates = [
{ name: 'Blog Post', file: 'blog-post.md', description: 'Article with frontmatter' }, { name: 'Blog Post', file: 'blog-post.md', description: 'Article with frontmatter' },
{ name: 'Meeting Notes', file: 'meeting-notes.md', description: 'Agenda, notes, action items' }, { name: 'Meeting Notes', file: 'meeting-notes.md', description: 'Agenda, notes, action items' },
{ name: 'Technical Spec', file: 'technical-spec.md', description: 'Requirements and architecture' }, {
{ name: 'Changelog', file: 'changelog.md', description: 'Keep a Changelog format' }, name: 'Technical Spec',
{ name: 'README', file: 'readme.md', description: 'Project documentation' }, file: 'technical-spec.md',
{ name: 'Project Plan', file: 'project-plan.md', description: 'Goals, milestones, timeline' }, description: 'Requirements and architecture',
{ name: 'API Docs', file: 'api-docs.md', description: 'API endpoint documentation' }, },
{ name: 'Tutorial', file: 'tutorial.md', description: 'Step-by-step guide' }, { name: 'Changelog', file: 'changelog.md', description: 'Keep a Changelog format' },
{ name: 'Release Notes', file: 'release-notes.md', description: 'Version release summary' }, { name: 'README', file: 'readme.md', description: 'Project documentation' },
{ name: 'Comparison', file: 'comparison.md', description: 'Feature comparison table' }, { name: 'Project Plan', file: 'project-plan.md', description: 'Goals, milestones, timeline' },
{ name: 'API Docs', file: 'api-docs.md', description: 'API endpoint documentation' },
{ name: 'Tutorial', file: 'tutorial.md', description: 'Step-by-step guide' },
{ name: 'Release Notes', file: 'release-notes.md', description: 'Version release summary' },
{ name: 'Comparison', file: 'comparison.md', description: 'Feature comparison table' },
]; ];
function renderTemplatesPanel(container, onSelect) { function renderTemplatesPanel(container, onSelect) {
container.innerHTML = ` container.innerHTML = `
<div class="panel-list"> <div class="panel-list">
${templates.map(t => ` ${templates
.map(
(t) => `
<div class="panel-list-item template-item" data-file="${t.file}"> <div class="panel-list-item template-item" data-file="${t.file}">
<div class="panel-list-item-title">${t.name}</div> <div class="panel-list-item-title">${t.name}</div>
<div class="panel-list-item-desc">${t.description}</div> <div class="panel-list-item-desc">${t.description}</div>
</div> </div>
`).join('')} `
)
.join('')}
</div> </div>
`; `;
container.querySelectorAll('.template-item').forEach(el => { container.querySelectorAll('.template-item').forEach((el) => {
el.addEventListener('click', () => onSelect(el.dataset.file)); el.addEventListener('click', () => onSelect(el.dataset.file));
}); });
} }
module.exports = { renderTemplatesPanel, templates }; module.exports = { renderTemplatesPanel, templates };
+21 -6
View File
@@ -675,18 +675,33 @@ body.theme-concreteinfo-dark .modal-footer {
Animations Animations
============================================ */ ============================================ */
@keyframes fadeIn { @keyframes fadeIn {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes slideUp { @keyframes slideUp {
from { transform: translateY(20px); opacity: 0; } from {
to { transform: translateY(0); opacity: 1; } transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { transform: scale(1); } 0%,
50% { transform: scale(1.05); } 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
} }
.animate-fade-in { .animate-fade-in {
+331 -197
View File
@@ -60,7 +60,15 @@
/* Base styles - Reset is in styles.css */ /* Base styles - Reset is in styles.css */
body { body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
'Helvetica Neue',
Arial,
sans-serif;
overflow: hidden; overflow: hidden;
height: 100vh; height: 100vh;
/* Background controlled by themes - do not set here */ /* Background controlled by themes - do not set here */
@@ -68,9 +76,15 @@ body {
} }
@keyframes gradientShift { @keyframes gradientShift {
0% { background-position: 0% 50%; } 0% {
50% { background-position: 100% 50%; } background-position: 0% 50%;
100% { background-position: 0% 50%; } }
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
} }
.container { .container {
@@ -345,7 +359,9 @@ body {
} }
/* Preview Styles - Modern Typography */ /* Preview Styles - Modern Typography */
.preview-content h1, .preview-content h2, .preview-content h3 { .preview-content h1,
.preview-content h2,
.preview-content h3 {
/* Color controlled by theme */ /* Color controlled by theme */
font-weight: 700; font-weight: 700;
margin-top: 28px; margin-top: 28px;
@@ -695,11 +711,7 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: linear-gradient(90deg, background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
animation: shimmer 2s infinite; animation: shimmer 2s infinite;
} }
@@ -798,7 +810,9 @@ body {
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s; transition:
width 0.6s,
height 0.6s;
} }
.toolbar button:hover::before, .toolbar button:hover::before,
@@ -1046,7 +1060,7 @@ body.theme-paper .pdf-viewer-toolbar,
body.theme-rosepine-dawn .pdf-viewer-toolbar { body.theme-rosepine-dawn .pdf-viewer-toolbar {
background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%) !important; background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%) !important;
border-bottom: 1px solid #d0d0d0 !important; border-bottom: 1px solid #d0d0d0 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
} }
body.theme-light .pdf-viewer-toolbar button, body.theme-light .pdf-viewer-toolbar button,
@@ -1061,7 +1075,7 @@ body.theme-rosepine-dawn .pdf-viewer-toolbar button {
background: #fff !important; background: #fff !important;
border: 1px solid #ccc !important; border: 1px solid #ccc !important;
color: #333 !important; color: #333 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
} }
body.theme-light .pdf-viewer-toolbar button:hover, body.theme-light .pdf-viewer-toolbar button:hover,
@@ -1444,7 +1458,7 @@ body.theme-rosepine-dawn .pdf-viewer {
.export-dialog, .export-dialog,
.batch-dialog, .batch-dialog,
.editor-pane, .editor-pane,
[id^="editor-pane-"], [id^='editor-pane-'],
.new-tab-button, .new-tab-button,
.tab-close { .tab-close {
display: none !important; display: none !important;
@@ -1452,9 +1466,9 @@ body.theme-rosepine-dawn .pdf-viewer {
/* Show preview content */ /* Show preview content */
.preview-pane, .preview-pane,
[id^="preview-pane-"], [id^='preview-pane-'],
.preview-content, .preview-content,
[id^="preview-"] { [id^='preview-'] {
display: block !important; display: block !important;
width: 100% !important; width: 100% !important;
padding: 20px !important; padding: 20px !important;
@@ -1491,9 +1505,9 @@ body.theme-rosepine-dawn .pdf-viewer {
body.printing-no-styles .tab-content, body.printing-no-styles .tab-content,
body.printing-no-styles .pane, body.printing-no-styles .pane,
body.printing-no-styles .preview-pane, body.printing-no-styles .preview-pane,
body.printing-no-styles [id^="preview-pane-"], body.printing-no-styles [id^='preview-pane-'],
body.printing-no-styles .preview-content, body.printing-no-styles .preview-content,
body.printing-no-styles [id^="preview-"] { body.printing-no-styles [id^='preview-'] {
background: white !important; background: white !important;
color: #000 !important; color: #000 !important;
} }
@@ -1539,27 +1553,27 @@ body.theme-rosepine-dawn .pdf-viewer {
/* Common dark theme styles for preview content */ /* Common dark theme styles for preview content */
body.theme-dark .preview-content, body.theme-dark .preview-content,
body.theme-dark [id^="preview-"], body.theme-dark [id^='preview-'],
body.theme-one-dark .preview-content, body.theme-one-dark .preview-content,
body.theme-one-dark [id^="preview-"], body.theme-one-dark [id^='preview-'],
body.theme-dracula .preview-content, body.theme-dracula .preview-content,
body.theme-dracula [id^="preview-"], body.theme-dracula [id^='preview-'],
body.theme-nord .preview-content, body.theme-nord .preview-content,
body.theme-nord [id^="preview-"], body.theme-nord [id^='preview-'],
body.theme-tokyo-night .preview-content, body.theme-tokyo-night .preview-content,
body.theme-tokyo-night [id^="preview-"], body.theme-tokyo-night [id^='preview-'],
body.theme-palenight .preview-content, body.theme-palenight .preview-content,
body.theme-palenight [id^="preview-"], body.theme-palenight [id^='preview-'],
body.theme-ayu-dark .preview-content, body.theme-ayu-dark .preview-content,
body.theme-ayu-dark [id^="preview-"], body.theme-ayu-dark [id^='preview-'],
body.theme-ayu-mirage .preview-content, body.theme-ayu-mirage .preview-content,
body.theme-ayu-mirage [id^="preview-"], body.theme-ayu-mirage [id^='preview-'],
body.theme-oceanic-next .preview-content, body.theme-oceanic-next .preview-content,
body.theme-oceanic-next [id^="preview-"], body.theme-oceanic-next [id^='preview-'],
body.theme-gruvbox-dark .preview-content, body.theme-gruvbox-dark .preview-content,
body.theme-gruvbox-dark [id^="preview-"], body.theme-gruvbox-dark [id^='preview-'],
body.theme-cobalt2 .preview-content, body.theme-cobalt2 .preview-content,
body.theme-cobalt2 [id^="preview-"] { body.theme-cobalt2 [id^='preview-'] {
color: #e6e6e6; color: #e6e6e6;
background: transparent; background: transparent;
} }
@@ -2145,233 +2159,353 @@ body.theme-rosepine-dawn .batch-dialog-footer {
Command Palette (Ctrl+Shift+P) Command Palette (Ctrl+Shift+P)
======================================== */ ======================================== */
.command-palette-overlay { .command-palette-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.3);
z-index: 1000; z-index: 1000;
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 80px; padding-top: 80px;
} }
.command-palette-overlay.hidden { .command-palette-overlay.hidden {
display: none; display: none;
} }
.command-palette { .command-palette {
width: 560px; width: 560px;
max-height: 400px; max-height: 400px;
background: #fff; background: #fff;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.command-palette-input { .command-palette-input {
width: 100%; width: 100%;
padding: 14px 18px; padding: 14px 18px;
border: none; border: none;
outline: none; outline: none;
font-size: 15px; font-size: 15px;
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
font-family: inherit; font-family: inherit;
} }
.command-palette-results { .command-palette-results {
overflow-y: auto; overflow-y: auto;
max-height: 340px; max-height: 340px;
} }
.command-item { .command-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 18px; padding: 10px 18px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
} }
.command-item:hover, .command-item:hover,
.command-item.selected { .command-item.selected {
background: #f3f4f6; background: #f3f4f6;
} }
.command-label strong { .command-label strong {
color: #5661b3; color: #5661b3;
} }
.command-shortcut { .command-shortcut {
font-size: 12px; font-size: 12px;
color: #9ca3af; color: #9ca3af;
background: #f3f4f6; background: #f3f4f6;
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 4px;
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
} }
/* Dark theme command palette */ /* Dark theme command palette */
body[class*="dark"] .command-palette { body[class*='dark'] .command-palette {
background: #1e1e1e; background: #1e1e1e;
border: 1px solid #333; border: 1px solid #333;
} }
body[class*="dark"] .command-palette-input { body[class*='dark'] .command-palette-input {
background: #1e1e1e; background: #1e1e1e;
color: #eee; color: #eee;
border-color: #333; border-color: #333;
} }
body[class*="dark"] .command-item:hover, body[class*='dark'] .command-item:hover,
body[class*="dark"] .command-item.selected { body[class*='dark'] .command-item.selected {
background: #2d2d2d; background: #2d2d2d;
} }
body[class*="dark"] .command-shortcut { body[class*='dark'] .command-shortcut {
background: #333; background: #333;
color: #888; color: #888;
} }
/* ======================================== /* ========================================
Breadcrumb Bar Breadcrumb Bar
======================================== */ ======================================== */
.breadcrumb-bar { .breadcrumb-bar {
padding: 4px 12px; padding: 4px 12px;
font-size: 12px; font-size: 12px;
color: var(--gray-500, #6b7280); color: var(--gray-500, #6b7280);
border-bottom: 1px solid var(--gray-200, #e5e7eb); border-bottom: 1px solid var(--gray-200, #e5e7eb);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
flex-shrink: 0; flex-shrink: 0;
background: var(--gray-50, #f9fafb); background: var(--gray-50, #f9fafb);
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
} }
body[class*="dark"] .breadcrumb-bar { body[class*='dark'] .breadcrumb-bar {
background: #1a1a1a; background: #1a1a1a;
color: #888; color: #888;
border-color: #333; border-color: #333;
} }
/* Print Preview Dialog */ /* Print Preview Dialog */
.print-preview-dialog { .print-preview-dialog {
width: 90vw; width: 90vw;
max-width: 1200px; max-width: 1200px;
height: 80vh; height: 80vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.print-preview-body { .print-preview-body {
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
.print-preview-sidebar { .print-preview-sidebar {
width: 260px; width: 260px;
padding: 16px; padding: 16px;
border-right: 1px solid var(--gray-200, #e5e7eb); border-right: 1px solid var(--gray-200, #e5e7eb);
overflow-y: auto; overflow-y: auto;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
} }
.print-preview-content { .print-preview-content {
flex: 1; flex: 1;
padding: 16px; padding: 16px;
background: #e5e7eb; background: #e5e7eb;
display: flex; display: flex;
justify-content: center; justify-content: center;
overflow: auto; overflow: auto;
} }
.print-preview-content iframe { .print-preview-content iframe {
box-shadow: 0 2px 8px rgba(0,0,0,0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 4px;
} }
.print-option-group { .print-option-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
} }
.print-option-group label { .print-option-group label {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: var(--gray-600, #4b5563); color: var(--gray-600, #4b5563);
} }
.print-option-group select, .print-option-group select,
.print-option-group input[type="text"] { .print-option-group input[type='text'] {
padding: 8px 10px; padding: 8px 10px;
border: 1px solid var(--gray-300, #d1d5db); border: 1px solid var(--gray-300, #d1d5db);
border-radius: 8px; border-radius: 8px;
font-size: 13px; font-size: 13px;
background: white; background: white;
} }
.scale-control { .scale-control {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
} }
.scale-control input[type="range"] { .scale-control input[type='range'] {
flex: 1; flex: 1;
} }
.checkbox-label { .checkbox-label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
cursor: pointer; cursor: pointer;
} }
.print-range-input { .print-range-input {
margin-top: 6px; margin-top: 6px;
} }
.print-actions { .print-actions {
display: flex; display: flex;
gap: 8px; gap: 8px;
margin-top: auto; margin-top: auto;
padding-top: 16px; padding-top: 16px;
} }
.btn-primary { .btn-primary {
flex: 1; flex: 1;
padding: 10px; padding: 10px;
background: var(--primary-dark, #5661b3); background: var(--primary-dark, #5661b3);
color: white; color: white;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
} }
.btn-primary:hover { .btn-primary:hover {
opacity: 0.9; opacity: 0.9;
} }
.btn-secondary { .btn-secondary {
flex: 1; flex: 1;
padding: 10px; padding: 10px;
background: var(--gray-100, #f3f4f6); background: var(--gray-100, #f3f4f6);
color: var(--gray-700, #374151); color: var(--gray-700, #374151);
border: 1px solid var(--gray-300, #d1d5db); border: 1px solid var(--gray-300, #d1d5db);
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
} }
/* Writing Analytics Modal */ /* Writing Analytics Modal */
.analytics-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:10000; animation:analyticsFadeIn 0.2s ease; } .analytics-overlay {
.analytics-modal { background:var(--bg-primary,#fff); border-radius:12px; width:520px; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation:analyticsSlideUp 0.3s ease; } position: fixed;
.analytics-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--border-color,#e5e7eb); } inset: 0;
.analytics-header h2 { margin:0; font-size:18px; font-weight:600; color:var(--text-primary); } background: rgba(0, 0, 0, 0.5);
.analytics-close { background:none; border:none; font-size:24px; cursor:pointer; color:var(--text-muted); padding:4px 8px; border-radius:4px; } backdrop-filter: blur(4px);
.analytics-close:hover { background:var(--bg-tertiary); color:var(--text-primary); } display: flex;
.analytics-body { padding:16px 24px 24px; } align-items: center;
.analytics-section { margin-bottom:20px; } justify-content: center;
.analytics-section h3 { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted,#9ca3af); margin:0 0 10px; } z-index: 10000;
.analytics-row { display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; font-size:14px; } animation: analyticsFadeIn 0.2s ease;
.analytics-label { color:var(--text-secondary,#6b7280); } }
.analytics-value { font-weight:500; color:var(--text-primary); } .analytics-modal {
.analytics-value small { color:var(--text-muted); font-weight:400; margin-left:6px; } background: var(--bg-primary, #fff);
.readability-meter { height:4px; background:var(--bg-tertiary,#f3f4f6); border-radius:2px; margin-top:8px; overflow:hidden; } border-radius: 12px;
.readability-fill { height:100%; background:linear-gradient(90deg,#ef4444,#f59e0b,#10b981); border-radius:2px; transition:width 0.5s ease; } width: 520px;
.word-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } max-height: 80vh;
.word-tag { background:var(--bg-tertiary,#f3f4f6); padding:4px 10px; border-radius:12px; font-size:13px; color:var(--text-secondary); } overflow-y: auto;
.word-tag small { opacity:0.5; font-size:10px; margin-left:2px; } box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
.analytics-longest { flex-direction:column; gap:4px; } animation: analyticsSlideUp 0.3s ease;
.analytics-sentence-preview { font-style:italic; font-size:13px; color:var(--text-secondary); font-weight:400; } }
@keyframes analyticsFadeIn { from{opacity:0} to{opacity:1} } .analytics-header {
@keyframes analyticsSlideUp { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} } display: flex;
body[class*="dark"] .analytics-modal { background:var(--gray-800,#1f2937); } justify-content: space-between;
body[class*="dark"] .word-tag { background:var(--gray-700,#374151); } align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.analytics-header h2 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
}
.analytics-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--text-muted);
padding: 4px 8px;
border-radius: 4px;
}
.analytics-close:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.analytics-body {
padding: 16px 24px 24px;
}
.analytics-section {
margin-bottom: 20px;
}
.analytics-section h3 {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted, #9ca3af);
margin: 0 0 10px;
}
.analytics-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
font-size: 14px;
}
.analytics-label {
color: var(--text-secondary, #6b7280);
}
.analytics-value {
font-weight: 500;
color: var(--text-primary);
}
.analytics-value small {
color: var(--text-muted);
font-weight: 400;
margin-left: 6px;
}
.readability-meter {
height: 4px;
background: var(--bg-tertiary, #f3f4f6);
border-radius: 2px;
margin-top: 8px;
overflow: hidden;
}
.readability-fill {
height: 100%;
background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
border-radius: 2px;
transition: width 0.5s ease;
}
.word-cloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.word-tag {
background: var(--bg-tertiary, #f3f4f6);
padding: 4px 10px;
border-radius: 12px;
font-size: 13px;
color: var(--text-secondary);
}
.word-tag small {
opacity: 0.5;
font-size: 10px;
margin-left: 2px;
}
.analytics-longest {
flex-direction: column;
gap: 4px;
}
.analytics-sentence-preview {
font-style: italic;
font-size: 13px;
color: var(--text-secondary);
font-weight: 400;
}
@keyframes analyticsFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes analyticsSlideUp {
from {
transform: translateY(16px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
body[class*='dark'] .analytics-modal {
background: var(--gray-800, #1f2937);
}
body[class*='dark'] .word-tag {
background: var(--gray-700, #374151);
}
/* ======================================== /* ========================================
Interactive PDF Thumbnail Sidebar Styles Interactive PDF Thumbnail Sidebar Styles
@@ -2449,7 +2583,7 @@ body[class*="dark"] .word-tag { background:var(--gray-700,#374151); }
} }
.pdf-thumbnail-card.marked-delete::after { .pdf-thumbnail-card.marked-delete::after {
content: "DELETE"; content: 'DELETE';
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@@ -2604,21 +2738,21 @@ body[class*="dark"] .word-tag { background:var(--gray-700,#374151); }
} }
/* Dark mode adjustments */ /* Dark mode adjustments */
body[class*="dark"] .pdf-thumbnail-card { body[class*='dark'] .pdf-thumbnail-card {
background: var(--gray-800, #1f2937); background: var(--gray-800, #1f2937);
border-color: var(--gray-700, #374151); border-color: var(--gray-700, #374151);
} }
body[class*="dark"] .pdf-thumbnail-header .badge { body[class*='dark'] .pdf-thumbnail-header .badge {
background: var(--gray-700, #374151); background: var(--gray-700, #374151);
color: var(--gray-200); color: var(--gray-200);
} }
body[class*="dark"] .canvas-container { body[class*='dark'] .canvas-container {
background: var(--gray-900, #111827); background: var(--gray-900, #111827);
border-color: var(--gray-700); border-color: var(--gray-700);
} }
body[class*="dark"] .btn-rotate-thumbnail, body[class*='dark'] .btn-rotate-thumbnail,
body[class*="dark"] .btn-reorder-left, body[class*='dark'] .btn-reorder-left,
body[class*="dark"] .btn-reorder-right { body[class*='dark'] .btn-reorder-right {
background: var(--gray-700, #374151); background: var(--gray-700, #374151);
border-color: var(--gray-600); border-color: var(--gray-600);
color: var(--gray-200); color: var(--gray-200);
+415 -196
View File
@@ -1,304 +1,523 @@
/* Sidebar */ /* Sidebar */
.main-content { .main-content {
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
min-height: 0; min-height: 0;
} }
.sidebar { .sidebar {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
height: 100%; height: 100%;
transition: width 0.2s ease; transition: width 0.2s ease;
} }
.sidebar.collapsed { .sidebar.collapsed {
width: 48px; width: 48px;
} }
.sidebar:not(.collapsed) { .sidebar:not(.collapsed) {
width: 328px; /* 48px icons + 280px panel */ width: 328px; /* 48px icons + 280px panel */
} }
.sidebar-icons { .sidebar-icons {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 48px; width: 48px;
background: var(--gray-100, #f3f4f6); background: var(--gray-100, #f3f4f6);
border-right: 1px solid var(--gray-200, #e5e7eb); border-right: 1px solid var(--gray-200, #e5e7eb);
padding: 8px 0; padding: 8px 0;
gap: 4px; gap: 4px;
align-items: center; align-items: center;
} }
.sidebar-icon { .sidebar-icon {
width: 36px; width: 36px;
height: 36px; height: 36px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: none; border: none;
background: transparent; background: transparent;
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
color: var(--gray-500, #6b7280); color: var(--gray-500, #6b7280);
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.sidebar-icon:hover { .sidebar-icon:hover {
background: var(--gray-200, #e5e7eb); background: var(--gray-200, #e5e7eb);
color: var(--gray-700, #374151); color: var(--gray-700, #374151);
} }
.sidebar-icon.active { .sidebar-icon.active {
background: var(--gray-200, #e5e7eb); background: var(--gray-200, #e5e7eb);
color: var(--primary-dark, #5661b3); color: var(--primary-dark, #5661b3);
box-shadow: inset 3px 0 0 var(--primary-dark, #5661b3); box-shadow: inset 3px 0 0 var(--primary-dark, #5661b3);
} }
.sidebar-icon:focus-visible { .sidebar-icon:focus-visible {
outline: 2px solid var(--primary-dark, #5661b3); outline: 2px solid var(--primary-dark, #5661b3);
outline-offset: 2px; outline-offset: 2px;
} }
.sidebar-panel { .sidebar-panel {
width: 280px; width: 280px;
background: var(--gray-50, #f9fafb); background: var(--gray-50, #f9fafb);
border-right: 1px solid var(--gray-200, #e5e7eb); border-right: 1px solid var(--gray-200, #e5e7eb);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
.sidebar.collapsed .sidebar-panel { .sidebar.collapsed .sidebar-panel {
display: none; display: none;
} }
.sidebar-panel-header { .sidebar-panel-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 16px; padding: 12px 16px;
border-bottom: 1px solid var(--gray-200, #e5e7eb); border-bottom: 1px solid var(--gray-200, #e5e7eb);
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: var(--gray-600, #4b5563); color: var(--gray-600, #4b5563);
} }
.sidebar-panel-close { .sidebar-panel-close {
background: none; background: none;
border: none; border: none;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
color: var(--gray-400, #9ca3af); color: var(--gray-400, #9ca3af);
padding: 0 4px; padding: 0 4px;
border-radius: 4px; border-radius: 4px;
} }
.sidebar-panel-close:hover { .sidebar-panel-close:hover {
background: var(--gray-200, #e5e7eb); background: var(--gray-200, #e5e7eb);
color: var(--gray-600, #4b5563); color: var(--gray-600, #4b5563);
} }
.sidebar-panel-close:focus-visible { .sidebar-panel-close:focus-visible {
outline: 2px solid var(--primary-dark, #5661b3); outline: 2px solid var(--primary-dark, #5661b3);
outline-offset: 2px; outline-offset: 2px;
} }
.sidebar-panel-content { .sidebar-panel-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 12px; padding: 12px;
} }
/* Dark theme support */ /* Dark theme support */
body[class*="dark"] .sidebar-icons, body[class*='dark'] .sidebar-icons,
body[class*="dark"] .sidebar-panel { body[class*='dark'] .sidebar-panel {
background: #1e1e1e; background: #1e1e1e;
border-color: #333; border-color: #333;
} }
body[class*="dark"] .sidebar-icon { body[class*='dark'] .sidebar-icon {
color: #888; color: #888;
} }
body[class*="dark"] .sidebar-icon:hover { body[class*='dark'] .sidebar-icon:hover {
background: #333; background: #333;
color: #ccc; color: #ccc;
} }
body[class*="dark"] .sidebar-icon.active { body[class*='dark'] .sidebar-icon.active {
background: #333; background: #333;
color: #8b9aff; color: #8b9aff;
box-shadow: inset 3px 0 0 #8b9aff; box-shadow: inset 3px 0 0 #8b9aff;
} }
body[class*="dark"] .sidebar-panel-header { body[class*='dark'] .sidebar-panel-header {
border-color: #333; border-color: #333;
color: #ccc; color: #ccc;
} }
/* Panel list items (templates, etc.) */ /* Panel list items (templates, etc.) */
.panel-list-item { .panel-list-item {
padding: 10px 12px; padding: 10px 12px;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
margin-bottom: 4px; margin-bottom: 4px;
} }
.panel-list-item:hover { .panel-list-item:hover {
background: var(--gray-200, #e5e7eb); background: var(--gray-200, #e5e7eb);
} }
.panel-list-item-title { .panel-list-item-title {
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: var(--gray-800, #1f2937); color: var(--gray-800, #1f2937);
} }
.panel-list-item-desc { .panel-list-item-desc {
font-size: 11px; font-size: 11px;
color: var(--gray-500, #6b7280); color: var(--gray-500, #6b7280);
margin-top: 2px; margin-top: 2px;
} }
body[class*="dark"] .panel-list-item:hover { body[class*='dark'] .panel-list-item:hover {
background: #333; background: #333;
} }
body[class*="dark"] .panel-list-item-title { body[class*='dark'] .panel-list-item-title {
color: #ddd; color: #ddd;
} }
body[class*="dark"] .panel-list-item-desc { body[class*='dark'] .panel-list-item-desc {
color: #888; color: #888;
} }
/* Explorer Panel */ /* Explorer Panel */
.explorer-toolbar { .explorer-toolbar {
display: flex; display: flex;
gap: 4px; gap: 4px;
margin-bottom: 8px; margin-bottom: 8px;
} }
.explorer-path { .explorer-path {
flex: 1; flex: 1;
padding: 6px 8px; padding: 6px 8px;
border: 1px solid var(--gray-300, #d1d5db); border: 1px solid var(--gray-300, #d1d5db);
border-radius: 6px; border-radius: 6px;
font-size: 12px; font-size: 12px;
background: white; background: white;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.explorer-browse-btn { .explorer-browse-btn {
border: 1px solid var(--gray-300, #d1d5db); border: 1px solid var(--gray-300, #d1d5db);
border-radius: 6px; border-radius: 6px;
background: white; background: white;
cursor: pointer; cursor: pointer;
padding: 4px 8px; padding: 4px 8px;
} }
.tree-item { .tree-item {
padding: 3px 0; padding: 3px 0;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
user-select: none; user-select: none;
} }
.tree-item:hover { .tree-item:hover {
background: var(--gray-100, #f3f4f6); background: var(--gray-100, #f3f4f6);
border-radius: 4px; border-radius: 4px;
} }
.tree-icon { .tree-icon {
margin-right: 4px; margin-right: 4px;
font-size: 12px; font-size: 12px;
} }
.tree-children { .tree-children {
padding-left: 16px; padding-left: 16px;
} }
.tree-folder.collapsed .tree-children { .tree-folder.collapsed .tree-children {
display: none; display: none;
} }
.tree-name { .tree-name {
font-size: 13px; font-size: 13px;
} }
/* Git Panel */ /* Git Panel */
.git-section { margin-bottom: 16px; } .git-section {
.git-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin-bottom: 8px; } margin-bottom: 16px;
.git-file { display: flex; align-items: center; padding: 4px 6px; border-radius: 4px; font-size: 13px; gap: 6px; } }
.git-file:hover { background: var(--gray-100, #f3f4f6); } .git-section-title {
.git-file-status { font-weight: 700; font-family: monospace; width: 16px; text-align: center; } font-size: 11px;
.git-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } text-transform: uppercase;
.git-stage-btn { border: none; background: var(--gray-200); border-radius: 4px; cursor: pointer; font-size: 14px; width: 22px; height: 22px; } letter-spacing: 0.05em;
.git-commit-input { width: 100%; padding: 8px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical; box-sizing: border-box; } color: var(--gray-500);
.git-commit-btn { width: 100%; margin-top: 8px; padding: 8px; background: var(--primary-dark, #5661b3); color: white; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; } margin-bottom: 8px;
.git-commit-btn:hover { opacity: 0.9; } }
.git-log-entry { padding: 6px 0; border-bottom: 1px solid var(--gray-100); } .git-file {
.git-log-msg { font-size: 13px; } display: flex;
.git-log-meta { font-size: 11px; color: var(--gray-500); margin-top: 2px; } align-items: center;
.git-info { font-size: 13px; color: var(--gray-500); padding: 8px 0; } padding: 4px 6px;
.git-loading { font-size: 13px; color: var(--gray-400); } border-radius: 4px;
font-size: 13px;
gap: 6px;
}
.git-file:hover {
background: var(--gray-100, #f3f4f6);
}
.git-file-status {
font-weight: 700;
font-family: monospace;
width: 16px;
text-align: center;
}
.git-file-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.git-stage-btn {
border: none;
background: var(--gray-200);
border-radius: 4px;
cursor: pointer;
font-size: 14px;
width: 22px;
height: 22px;
}
.git-commit-input {
width: 100%;
padding: 8px;
border: 1px solid var(--gray-300);
border-radius: 6px;
font-size: 13px;
font-family: inherit;
resize: vertical;
box-sizing: border-box;
}
.git-commit-btn {
width: 100%;
margin-top: 8px;
padding: 8px;
background: var(--primary-dark, #5661b3);
color: white;
border: none;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
}
.git-commit-btn:hover {
opacity: 0.9;
}
.git-log-entry {
padding: 6px 0;
border-bottom: 1px solid var(--gray-100);
}
.git-log-msg {
font-size: 13px;
}
.git-log-meta {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
}
.git-info {
font-size: 13px;
color: var(--gray-500);
padding: 8px 0;
}
.git-loading {
font-size: 13px;
color: var(--gray-400);
}
/* Snippets Panel */ /* Snippets Panel */
.snippets-toolbar { display: flex; gap: 4px; margin-bottom: 8px; } .snippets-toolbar {
.snippets-search { flex: 1; padding: 6px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; } display: flex;
.snippets-add-btn { width: 32px; border: 1px solid var(--gray-300); border-radius: 6px; background: white; font-size: 18px; cursor: pointer; } gap: 4px;
.snippet-item { padding: 8px; border: 1px solid var(--gray-200); border-radius: 6px; margin-bottom: 6px; } margin-bottom: 8px;
.snippet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } }
.snippet-name { font-size: 13px; font-weight: 500; } .snippets-search {
.snippet-lang { font-size: 11px; background: var(--gray-100); padding: 2px 6px; border-radius: 4px; color: var(--gray-500); } flex: 1;
.snippet-preview { font-size: 12px; background: var(--gray-50); padding: 6px; border-radius: 4px; margin: 4px 0; overflow: hidden; max-height: 60px; } padding: 6px 10px;
.snippet-preview code { font-family: 'JetBrains Mono', monospace; } border: 1px solid var(--gray-300);
.snippet-actions { display: flex; gap: 4px; } border-radius: 6px;
.snippet-insert { font-size: 12px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: white; cursor: pointer; } font-size: 13px;
.snippet-delete { font-size: 14px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: white; cursor: pointer; color: #ef4444; } }
.snippets-add-btn {
width: 32px;
border: 1px solid var(--gray-300);
border-radius: 6px;
background: white;
font-size: 18px;
cursor: pointer;
}
.snippet-item {
padding: 8px;
border: 1px solid var(--gray-200);
border-radius: 6px;
margin-bottom: 6px;
}
.snippet-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.snippet-name {
font-size: 13px;
font-weight: 500;
}
.snippet-lang {
font-size: 11px;
background: var(--gray-100);
padding: 2px 6px;
border-radius: 4px;
color: var(--gray-500);
}
.snippet-preview {
font-size: 12px;
background: var(--gray-50);
padding: 6px;
border-radius: 4px;
margin: 4px 0;
overflow: hidden;
max-height: 60px;
}
.snippet-preview code {
font-family: 'JetBrains Mono', monospace;
}
.snippet-actions {
display: flex;
gap: 4px;
}
.snippet-insert {
font-size: 12px;
padding: 4px 8px;
border: 1px solid var(--gray-300);
border-radius: 4px;
background: white;
cursor: pointer;
}
.snippet-delete {
font-size: 14px;
padding: 4px 8px;
border: 1px solid var(--gray-300);
border-radius: 4px;
background: white;
cursor: pointer;
color: #ef4444;
}
/* Dark theme for sidebar panels */ /* Dark theme for sidebar panels */
body[class*="dark"] .explorer-path, body[class*='dark'] .explorer-path,
body[class*="dark"] .explorer-browse-btn, body[class*='dark'] .explorer-browse-btn,
body[class*="dark"] .snippets-search, body[class*='dark'] .snippets-search,
body[class*="dark"] .snippets-add-btn, body[class*='dark'] .snippets-add-btn,
body[class*="dark"] .snippet-insert, body[class*='dark'] .snippet-insert,
body[class*="dark"] .snippet-delete { body[class*='dark'] .snippet-delete {
background: #2d2d2d; background: #2d2d2d;
border-color: #444; border-color: #444;
color: #ccc; color: #ccc;
} }
body[class*="dark"] .git-commit-input { body[class*='dark'] .git-commit-input {
background: #2d2d2d; background: #2d2d2d;
border-color: #444; border-color: #444;
color: #ccc; color: #ccc;
} }
body[class*="dark"] .snippet-item { body[class*='dark'] .snippet-item {
border-color: #444; border-color: #444;
} }
body[class*="dark"] .snippet-preview { body[class*='dark'] .snippet-preview {
background: #2d2d2d; background: #2d2d2d;
} }
body[class*="dark"] .tree-item:hover, body[class*='dark'] .tree-item:hover,
body[class*="dark"] .git-file:hover { body[class*='dark'] .git-file:hover {
background: #333; background: #333;
} }
/* Outline Panel */ /* Outline Panel */
.outline-panel { display: flex; flex-direction: column; height: 100%; } .outline-panel {
.outline-list { flex: 1; overflow-y: auto; padding: 4px 0; } display: flex;
.outline-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; cursor: pointer; font-size: 13px; color: var(--text-secondary, #6b7280); transition: background 0.15s, color 0.15s; border-left: 2px solid transparent; } flex-direction: column;
.outline-item:hover { background: var(--bg-tertiary, #f3f4f6); color: var(--text-primary, #1f2937); } height: 100%;
.outline-item.active { color: var(--accent-blue, #3b82f6); background: rgba(59, 130, 246, 0.08); border-left-color: var(--accent-blue, #3b82f6); font-weight: 600; } }
.outline-level-1 { padding-left: 12px; } .outline-list {
.outline-level-2 { padding-left: 24px; } flex: 1;
.outline-level-3 { padding-left: 36px; } overflow-y: auto;
.outline-level-4 { padding-left: 48px; } padding: 4px 0;
.outline-level-5 { padding-left: 56px; } }
.outline-level-6 { padding-left: 64px; } .outline-item {
.outline-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } display: flex;
.outline-badge { font-size: 10px; opacity: 0.5; margin-left: 8px; flex-shrink: 0; } align-items: center;
.outline-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; color: var(--text-muted, #9ca3af); text-align: center; } justify-content: space-between;
.outline-empty p { margin: 4px 0; } padding: 4px 12px;
.outline-hint { font-family: monospace; font-size: 12px; opacity: 0.7; } cursor: pointer;
.outline-footer { padding: 8px 12px; border-top: 1px solid var(--border-color, #e5e7eb); font-size: 11px; color: var(--text-muted, #9ca3af); } font-size: 13px;
color: var(--text-secondary, #6b7280);
transition:
background 0.15s,
color 0.15s;
border-left: 2px solid transparent;
}
.outline-item:hover {
background: var(--bg-tertiary, #f3f4f6);
color: var(--text-primary, #1f2937);
}
.outline-item.active {
color: var(--accent-blue, #3b82f6);
background: rgba(59, 130, 246, 0.08);
border-left-color: var(--accent-blue, #3b82f6);
font-weight: 600;
}
.outline-level-1 {
padding-left: 12px;
}
.outline-level-2 {
padding-left: 24px;
}
.outline-level-3 {
padding-left: 36px;
}
.outline-level-4 {
padding-left: 48px;
}
.outline-level-5 {
padding-left: 56px;
}
.outline-level-6 {
padding-left: 64px;
}
.outline-text {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.outline-badge {
font-size: 10px;
opacity: 0.5;
margin-left: 8px;
flex-shrink: 0;
}
.outline-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
color: var(--text-muted, #9ca3af);
text-align: center;
}
.outline-empty p {
margin: 4px 0;
}
.outline-hint {
font-family: monospace;
font-size: 12px;
opacity: 0.7;
}
.outline-footer {
padding: 8px 12px;
border-top: 1px solid var(--border-color, #e5e7eb);
font-size: 11px;
color: var(--text-muted, #9ca3af);
}
/* Outline dark mode */ /* Outline dark mode */
body[class*="dark"] .outline-item { color: #9ca3af; } body[class*='dark'] .outline-item {
body[class*="dark"] .outline-item:hover { background: #374151; color: #e5e7eb; } color: #9ca3af;
body[class*="dark"] .outline-item.active { color: #8b9aff; background: rgba(139, 154, 255, 0.1); border-left-color: #8b9aff; } }
body[class*="dark"] .outline-empty { color: #6b7280; } body[class*='dark'] .outline-item:hover {
body[class*="dark"] .outline-footer { border-color: #333; color: #6b7280; } background: #374151;
color: #e5e7eb;
}
body[class*='dark'] .outline-item.active {
color: #8b9aff;
background: rgba(139, 154, 255, 0.1);
border-left-color: #8b9aff;
}
body[class*='dark'] .outline-empty {
color: #6b7280;
}
body[class*='dark'] .outline-footer {
border-color: #333;
color: #6b7280;
}
+121 -24
View File
@@ -1,24 +1,121 @@
.welcome-container { padding: 40px; max-width: 900px; margin: 0 auto; } .welcome-container {
.welcome-hero { text-align: center; margin-bottom: 40px; } padding: 40px;
.welcome-title { font-size: 32px; font-weight: 700; color: var(--gray-800, #1f2937); } max-width: 900px;
.welcome-version { font-size: 14px; color: var(--primary-dark, #5661b3); margin-top: 4px; font-weight: 500; } margin: 0 auto;
.welcome-subtitle { font-size: 16px; color: var(--gray-500, #6b7280); margin-top: 8px; } }
.welcome-grid { display: grid; gap: 32px; } .welcome-hero {
.welcome-section h2 { font-size: 18px; margin-bottom: 16px; color: var(--gray-700, #374151); } text-align: center;
.welcome-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } margin-bottom: 40px;
.welcome-card { padding: 20px; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px; cursor: pointer; text-align: center; transition: all 0.2s; } }
.welcome-card:hover { border-color: var(--primary-dark, #5661b3); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); } .welcome-title {
.welcome-card-icon { font-size: 28px; margin-bottom: 8px; } font-size: 32px;
.welcome-card h3 { font-size: 15px; margin-bottom: 4px; } font-weight: 700;
.welcome-card p { font-size: 13px; color: var(--gray-500); } color: var(--gray-800, #1f2937);
.welcome-card kbd { display: inline-block; margin-top: 8px; padding: 2px 8px; background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 4px; font-size: 12px; font-family: 'JetBrains Mono', monospace; } }
.welcome-features { list-style: none; padding: 0; } .welcome-version {
.welcome-features li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--gray-100, #f3f4f6); } font-size: 14px;
.welcome-features strong { color: var(--primary-dark, #5661b3); } color: var(--primary-dark, #5661b3);
.welcome-recent-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; } margin-top: 4px;
.welcome-recent-item:hover { background: var(--gray-100); } font-weight: 500;
.welcome-recent-name { font-size: 14px; font-weight: 500; display: block; } }
.welcome-recent-path { font-size: 12px; color: var(--gray-500); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; } .welcome-subtitle {
.welcome-muted { color: var(--gray-400); font-size: 14px; } font-size: 16px;
.welcome-footer { margin-top: 32px; text-align: center; } color: var(--gray-500, #6b7280);
.welcome-checkbox { font-size: 13px; color: var(--gray-500); cursor: pointer; } margin-top: 8px;
}
.welcome-grid {
display: grid;
gap: 32px;
}
.welcome-section h2 {
font-size: 18px;
margin-bottom: 16px;
color: var(--gray-700, #374151);
}
.welcome-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.welcome-card {
padding: 20px;
border: 1px solid var(--gray-200, #e5e7eb);
border-radius: 12px;
cursor: pointer;
text-align: center;
transition: all 0.2s;
}
.welcome-card:hover {
border-color: var(--primary-dark, #5661b3);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.welcome-card-icon {
font-size: 28px;
margin-bottom: 8px;
}
.welcome-card h3 {
font-size: 15px;
margin-bottom: 4px;
}
.welcome-card p {
font-size: 13px;
color: var(--gray-500);
}
.welcome-card kbd {
display: inline-block;
margin-top: 8px;
padding: 2px 8px;
background: var(--gray-100);
border: 1px solid var(--gray-300);
border-radius: 4px;
font-size: 12px;
font-family: 'JetBrains Mono', monospace;
}
.welcome-features {
list-style: none;
padding: 0;
}
.welcome-features li {
padding: 6px 0;
font-size: 14px;
border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.welcome-features strong {
color: var(--primary-dark, #5661b3);
}
.welcome-recent-item {
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
margin-bottom: 4px;
}
.welcome-recent-item:hover {
background: var(--gray-100);
}
.welcome-recent-name {
font-size: 14px;
font-weight: 500;
display: block;
}
.welcome-recent-path {
font-size: 12px;
color: var(--gray-500);
display: block;
margin-top: 2px;
overflow: hidden;
text-overflow: ellipsis;
}
.welcome-muted {
color: var(--gray-400);
font-size: 14px;
}
.welcome-footer {
margin-top: 32px;
text-align: center;
}
.welcome-checkbox {
font-size: 13px;
color: var(--gray-500);
cursor: pointer;
}
+48 -48
View File
@@ -7,96 +7,96 @@ body.zen-mode .toolbar,
body.zen-mode .status-bar, body.zen-mode .status-bar,
body.zen-mode .sidebar, body.zen-mode .sidebar,
body.zen-mode .breadcrumb-bar { body.zen-mode .breadcrumb-bar {
display: none !important; display: none !important;
} }
/* Main content fills viewport */ /* Main content fills viewport */
body.zen-mode .main-content { body.zen-mode .main-content {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} }
/* Editor container takes full width */ /* Editor container takes full width */
body.zen-mode .editor-container { body.zen-mode .editor-container {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
} }
/* Hide preview panes */ /* Hide preview panes */
body.zen-mode .preview-container, body.zen-mode .preview-container,
body.zen-mode .preview-pane, body.zen-mode .preview-pane,
body.zen-mode .pane-resizer { body.zen-mode .pane-resizer {
display: none !important; display: none !important;
} }
/* Center and style editor content for comfortable reading width */ /* Center and style editor content for comfortable reading width */
body.zen-mode .cm-content { body.zen-mode .cm-content {
max-width: 700px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
font-size: 18px; font-size: 18px;
line-height: 1.8; line-height: 1.8;
padding-top: 80px; padding-top: 80px;
} }
body.zen-mode .cm-line { body.zen-mode .cm-line {
padding: 4px 0; padding: 4px 0;
} }
body.zen-mode .editor-wrapper { body.zen-mode .editor-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
/* Floating HUD pill */ /* Floating HUD pill */
.zen-hud { .zen-hud {
position: fixed; position: fixed;
bottom: 24px; bottom: 24px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
padding: 10px 24px; padding: 10px 24px;
border-radius: 24px; border-radius: 24px;
font-size: 13px; font-size: 13px;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
z-index: 9999; z-index: 9999;
pointer-events: none; pointer-events: none;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.zen-hud-stat { .zen-hud-stat {
opacity: 0.7; opacity: 0.7;
} }
.zen-hud-sep { .zen-hud-sep {
opacity: 0.3; opacity: 0.3;
margin: 0 4px; margin: 0 4px;
} }
/* Word goal progress bar */ /* Word goal progress bar */
.zen-progress-container { .zen-progress-container {
width: 120px; width: 120px;
height: 4px; height: 4px;
background: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.15);
border-radius: 2px; border-radius: 2px;
margin-top: 8px; margin-top: 8px;
overflow: hidden; overflow: hidden;
display: none; display: none;
} }
.zen-progress-bar { .zen-progress-bar {
height: 100%; height: 100%;
background: rgba(255, 178, 70, 0.85); background: rgba(255, 178, 70, 0.85);
border-radius: 2px; border-radius: 2px;
transition: width 0.3s ease; transition: width 0.3s ease;
} }
/* Dark mode — HUD stays dark in both themes */ /* Dark mode — HUD stays dark in both themes */
body[class*="dark"].zen-mode .zen-hud { body[class*='dark'].zen-mode .zen-hud {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
} }
+1998 -1813
View File
File diff suppressed because it is too large Load Diff
+128 -124
View File
@@ -9,13 +9,13 @@
* ============================================ */ * ============================================ */
.modal-backdrop { .modal-backdrop {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
z-index: 0; z-index: 0;
cursor: pointer; cursor: pointer;
} }
/* ============================================ /* ============================================
@@ -23,22 +23,23 @@
* ============================================ */ * ============================================ */
.modal { .modal {
position: fixed; position: fixed;
inset: 0; inset: 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: calc(var(--z-modal, 200) + 1); z-index: calc(var(--z-modal, 200) + 1);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1)), transition:
visibility var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1)); opacity var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
padding: var(--spacing-4, 1rem); visibility var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1));
padding: var(--spacing-4, 1rem);
} }
.modal.open { .modal.open {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
/* ============================================ /* ============================================
@@ -46,23 +47,23 @@
* ============================================ */ * ============================================ */
.modal-content { .modal-content {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 100%; width: 100%;
background: hsl(var(--background, 0 0% 100%)); background: hsl(var(--background, 0 0% 100%));
border-radius: var(--radius-lg, 0.5rem); border-radius: var(--radius-lg, 0.5rem);
box-shadow: var(--shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)); box-shadow: var(--shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
max-width: 90vw; max-width: 90vw;
max-height: 90vh; max-height: 90vh;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transform: scale(0.95); transform: scale(0.95);
transition: transform var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1)); transition: transform var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1));
} }
.modal.open .modal-content { .modal.open .modal-content {
transform: scale(1); transform: scale(1);
} }
/* ============================================ /* ============================================
@@ -70,19 +71,19 @@
* ============================================ */ * ============================================ */
.modal-header { .modal-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem); padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
border-bottom: 1px solid hsl(var(--border, 214.3 31.8% 91.4%)); border-bottom: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
background: hsl(var(--muted, 210 40% 96.1%)); background: hsl(var(--muted, 210 40% 96.1%));
} }
.modal-header h3 { .modal-header h3 {
margin: 0; margin: 0;
font-size: var(--text-lg, 1.125rem); font-size: var(--text-lg, 1.125rem);
font-weight: var(--font-semibold, 600); font-weight: var(--font-semibold, 600);
color: hsl(var(--foreground, 222.2 84% 4.9%)); color: hsl(var(--foreground, 222.2 84% 4.9%));
} }
/* ============================================ /* ============================================
@@ -90,31 +91,32 @@
* ============================================ */ * ============================================ */
.modal-close { .modal-close {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 32px; width: 32px;
height: 32px; height: 32px;
padding: 0; padding: 0;
border: none; border: none;
border-radius: var(--radius, 0.5rem); border-radius: var(--radius, 0.5rem);
background: transparent; background: transparent;
color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%)); color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%));
font-size: 24px; font-size: 24px;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
transition: background-color var(--transition-fast, 150ms), transition:
color var(--transition-fast, 150ms); background-color var(--transition-fast, 150ms),
color var(--transition-fast, 150ms);
} }
.modal-close:hover { .modal-close:hover {
background: hsl(var(--accent, 210 40% 96.1%)); background: hsl(var(--accent, 210 40% 96.1%));
color: hsl(var(--foreground, 222.2 84% 4.9%)); color: hsl(var(--foreground, 222.2 84% 4.9%));
} }
.modal-close:focus-visible { .modal-close:focus-visible {
outline: 2px solid hsl(var(--ring, 227 44% 52%)); outline: 2px solid hsl(var(--ring, 227 44% 52%));
outline-offset: 2px; outline-offset: 2px;
} }
/* ============================================ /* ============================================
@@ -122,9 +124,9 @@
* ============================================ */ * ============================================ */
.modal-body { .modal-body {
padding: var(--spacing-6, 1.5rem); padding: var(--spacing-6, 1.5rem);
overflow-y: auto; overflow-y: auto;
flex: 1; flex: 1;
} }
/* ============================================ /* ============================================
@@ -132,19 +134,19 @@
* ============================================ */ * ============================================ */
.modal-footer { .modal-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: var(--spacing-3, 0.75rem); gap: var(--spacing-3, 0.75rem);
padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem); padding: var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);
border-top: 1px solid hsl(var(--border, 214.3 31.8% 91.4%)); border-top: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
background: hsl(var(--muted, 210 40% 96.1%)); background: hsl(var(--muted, 210 40% 96.1%));
} }
.modal-footer .btn { .modal-footer .btn {
min-width: 80px; min-width: 80px;
/* styles-modern.css sets flex:1 on .btn-primary/.btn-secondary globally /* styles-modern.css sets flex:1 on .btn-primary/.btn-secondary globally
* which causes footer buttons to stretch to full width. Override here. */ * which causes footer buttons to stretch to full width. Override here. */
flex: none; flex: none;
} }
/* ============================================ /* ============================================
@@ -152,60 +154,60 @@
* ============================================ */ * ============================================ */
.modal-body .form-row { .modal-body .form-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-3, 0.75rem); gap: var(--spacing-3, 0.75rem);
margin-bottom: var(--spacing-3, 0.75rem); margin-bottom: var(--spacing-3, 0.75rem);
} }
.modal-body .form-row label { .modal-body .form-row label {
min-width: 100px; min-width: 100px;
font-size: var(--text-sm, 0.875rem); font-size: var(--text-sm, 0.875rem);
color: hsl(var(--foreground, 222.2 84% 4.9%)); color: hsl(var(--foreground, 222.2 84% 4.9%));
} }
.modal-body .form-row input, .modal-body .form-row input,
.modal-body .form-row select { .modal-body .form-row select {
flex: 1; flex: 1;
padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem); padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
border: 1px solid hsl(var(--input, 214.3 31.8% 91.4%)); border: 1px solid hsl(var(--input, 214.3 31.8% 91.4%));
border-radius: var(--radius, 0.5rem); border-radius: var(--radius, 0.5rem);
font-size: var(--text-sm, 0.875rem); font-size: var(--text-sm, 0.875rem);
background: hsl(var(--background, 0 0% 100%)); background: hsl(var(--background, 0 0% 100%));
color: hsl(var(--foreground, 222.2 84% 4.9%)); color: hsl(var(--foreground, 222.2 84% 4.9%));
} }
.modal-body .form-row input:focus, .modal-body .form-row input:focus,
.modal-body .form-row select:focus { .modal-body .form-row select:focus {
outline: 2px solid hsl(var(--ring, 227 44% 52%)); outline: 2px solid hsl(var(--ring, 227 44% 52%));
outline-offset: 1px; outline-offset: 1px;
} }
.modal-body .export-section { .modal-body .export-section {
margin-bottom: var(--spacing-4, 1rem); margin-bottom: var(--spacing-4, 1rem);
padding-bottom: var(--spacing-4, 1rem); padding-bottom: var(--spacing-4, 1rem);
border-bottom: 1px solid hsl(var(--border, 214.3 31.8% 91.4%)); border-bottom: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
} }
.modal-body .export-section:last-child { .modal-body .export-section:last-child {
border-bottom: none; border-bottom: none;
margin-bottom: 0; margin-bottom: 0;
} }
.modal-body .export-section label { .modal-body .export-section label {
display: block; display: block;
font-weight: var(--font-medium, 500); font-weight: var(--font-medium, 500);
margin-bottom: var(--spacing-2, 0.5rem); margin-bottom: var(--spacing-2, 0.5rem);
color: hsl(var(--foreground, 222.2 84% 4.9%)); color: hsl(var(--foreground, 222.2 84% 4.9%));
} }
.modal-body .checkbox-group label { .modal-body .checkbox-group label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--spacing-2, 0.5rem); gap: var(--spacing-2, 0.5rem);
margin-bottom: var(--spacing-2, 0.5rem); margin-bottom: var(--spacing-2, 0.5rem);
font-weight: var(--font-normal, 400); font-weight: var(--font-normal, 400);
cursor: pointer; cursor: pointer;
} }
/* ============================================ /* ============================================
@@ -213,19 +215,19 @@
* ============================================ */ * ============================================ */
.modal-content.small { .modal-content.small {
max-width: 400px; max-width: 400px;
min-width: 320px; min-width: 320px;
} }
.modal-content.large { .modal-content.large {
max-width: 800px; max-width: 800px;
min-width: 560px; min-width: 560px;
} }
.modal-content.full { .modal-content.full {
max-width: 95vw; max-width: 95vw;
max-height: 95vh; max-height: 95vh;
min-width: min(95vw, 700px); min-width: min(95vw, 700px);
} }
/* ============================================ /* ============================================
@@ -233,16 +235,18 @@
* ============================================ */ * ============================================ */
.dark .modal-content, .dark .modal-content,
[data-theme="dark"] .modal-content { [data-theme='dark'] .modal-content {
background: hsl(var(--background)); background: hsl(var(--background));
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3); box-shadow:
0 20px 25px -5px rgb(0 0 0 / 0.4),
0 8px 10px -6px rgb(0 0 0 / 0.3);
} }
.dark .modal-header, .dark .modal-header,
.dark .modal-footer, .dark .modal-footer,
[data-theme="dark"] .modal-header, [data-theme='dark'] .modal-header,
[data-theme="dark"] .modal-footer { [data-theme='dark'] .modal-footer {
background: hsl(var(--muted)); background: hsl(var(--muted));
} }
/* ============================================ /* ============================================
@@ -250,10 +254,10 @@
* ============================================ */ * ============================================ */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.modal, .modal,
.modal-content { .modal-content {
transition: none; transition: none;
} }
} }
/* ============================================ /* ============================================
@@ -261,5 +265,5 @@
* ============================================ */ * ============================================ */
.modal.hidden { .modal.hidden {
display: none; display: none;
} }
+49 -17
View File
@@ -148,7 +148,7 @@
* ============================================ */ * ============================================ */
.dark, .dark,
[data-theme="dark"] { [data-theme='dark'] {
/* Background and foreground */ /* Background and foreground */
--background: 222.2 84% 4.9%; --background: 222.2 84% 4.9%;
--foreground: 210 40% 98%; --foreground: 210 40% 98%;
@@ -205,24 +205,56 @@
* Semantic Color Classes * Semantic Color Classes
* ============================================ */ * ============================================ */
.bg-background { background-color: hsl(var(--background)); } .bg-background {
.bg-foreground { background-color: hsl(var(--foreground)); } background-color: hsl(var(--background));
.bg-card { background-color: hsl(var(--card)); } }
.bg-primary { background-color: hsl(var(--primary)); } .bg-foreground {
.bg-secondary { background-color: hsl(var(--secondary)); } background-color: hsl(var(--foreground));
.bg-muted { background-color: hsl(var(--muted)); } }
.bg-accent { background-color: hsl(var(--accent)); } .bg-card {
.bg-destructive { background-color: hsl(var(--destructive)); } background-color: hsl(var(--card));
}
.bg-primary {
background-color: hsl(var(--primary));
}
.bg-secondary {
background-color: hsl(var(--secondary));
}
.bg-muted {
background-color: hsl(var(--muted));
}
.bg-accent {
background-color: hsl(var(--accent));
}
.bg-destructive {
background-color: hsl(var(--destructive));
}
.text-foreground { color: hsl(var(--foreground)); } .text-foreground {
.text-primary { color: hsl(var(--primary)); } color: hsl(var(--foreground));
.text-secondary { color: hsl(var(--secondary-foreground)); } }
.text-muted-foreground { color: hsl(var(--muted-foreground)); } .text-primary {
.text-destructive { color: hsl(var(--destructive)); } color: hsl(var(--primary));
}
.text-secondary {
color: hsl(var(--secondary-foreground));
}
.text-muted-foreground {
color: hsl(var(--muted-foreground));
}
.text-destructive {
color: hsl(var(--destructive));
}
.border-border { border-color: hsl(var(--border)); } .border-border {
.border-primary { border-color: hsl(var(--primary)); } border-color: hsl(var(--border));
.border-input { border-color: hsl(var(--input)); } }
.border-primary {
border-color: hsl(var(--primary));
}
.border-input {
border-color: hsl(var(--input));
}
/* ============================================ /* ============================================
* Utility Classes * Utility Classes
+491 -470
View File
File diff suppressed because it is too large Load Diff
+10 -10
View File
@@ -22,10 +22,10 @@ GET /resources
**Query Parameters:** **Query Parameters:**
| Parameter | Type | Required | Description | | Parameter | Type | Required | Description |
|-----------|------|----------|-------------| | --------- | ------- | -------- | ---------------------------- |
| page | integer | No | Page number (default: 1) | | page | integer | No | Page number (default: 1) |
| limit | integer | No | Items per page (default: 20) | | limit | integer | No | Items per page (default: 20) |
**Response:** **Response:**
@@ -82,9 +82,9 @@ DELETE /resources/:id
## Error Codes ## Error Codes
| Code | Description | | Code | Description |
|------|-------------| | ---- | --------------------- |
| 400 | Bad Request | | 400 | Bad Request |
| 401 | Unauthorized | | 401 | Unauthorized |
| 404 | Not Found | | 404 | Not Found |
| 500 | Internal Server Error | | 500 | Internal Server Error |
+1 -1
View File
@@ -1,6 +1,6 @@
--- ---
title: Blog Post Title title: Blog Post Title
date: {{DATE}} date: { { DATE } }
author: Your Name author: Your Name
tags: [] tags: []
--- ---
+5
View File
@@ -3,18 +3,23 @@
## [Unreleased] ## [Unreleased]
### Added ### Added
- New feature - New feature
### Changed ### Changed
- Updated feature - Updated feature
### Fixed ### Fixed
- Bug fix - Bug fix
### Removed ### Removed
- Removed feature - Removed feature
## [1.0.0] - {{DATE}} ## [1.0.0] - {{DATE}}
### Added ### Added
- Initial release - Initial release
+20 -16
View File
@@ -9,50 +9,54 @@ Brief description of what is being compared and why.
## Feature Comparison ## Feature Comparison
| Feature | Option A | Option B | | Feature | Option A | Option B |
|---------|----------|----------| | --------- | -------- | -------- |
| Feature 1 | Yes | Yes | | Feature 1 | Yes | Yes |
| Feature 2 | Yes | No | | Feature 2 | Yes | No |
| Feature 3 | No | Yes | | Feature 3 | No | Yes |
| Feature 4 | Partial | Yes | | Feature 4 | Partial | Yes |
## Pricing ## Pricing
| Plan | Option A | Option B | | Plan | Option A | Option B |
|------|----------|----------| | ---------- | -------- | -------- |
| Free | Limited | Limited | | Free | Limited | Limited |
| Pro | $10/mo | $15/mo | | Pro | $10/mo | $15/mo |
| Enterprise | Custom | Custom | | Enterprise | Custom | Custom |
## Pros and Cons ## Pros and Cons
### Option A ### Option A
**Pros:** **Pros:**
- Pro 1 - Pro 1
- Pro 2 - Pro 2
**Cons:** **Cons:**
- Con 1 - Con 1
- Con 2 - Con 2
### Option B ### Option B
**Pros:** **Pros:**
- Pro 1 - Pro 1
- Pro 2 - Pro 2
**Cons:** **Cons:**
- Con 1 - Con 1
- Con 2 - Con 2
## Performance ## Performance
| Metric | Option A | Option B | | Metric | Option A | Option B |
|--------|----------|----------| | ----------- | -------- | --------- |
| Speed | Fast | Moderate | | Speed | Fast | Moderate |
| Memory | Low | Medium | | Memory | Low | Medium |
| Scalability | Good | Excellent | | Scalability | Good | Excellent |
## Recommendation ## Recommendation
+1
View File
@@ -2,6 +2,7 @@
**Date:** {{DATE}} **Date:** {{DATE}}
**Attendees:** **Attendees:**
- Name 1 - Name 1
- Name 2 - Name 2
+17 -12
View File
@@ -12,43 +12,48 @@
## Scope ## Scope
### In Scope ### In Scope
- Item 1 - Item 1
- Item 2 - Item 2
### Out of Scope ### Out of Scope
- Item 1 - Item 1
## Milestones ## Milestones
| Milestone | Target Date | Status | | Milestone | Target Date | Status |
|-----------|-------------|--------| | --------- | ----------- | ----------- |
| Kickoff | {{DATE}} | Not Started | | Kickoff | {{DATE}} | Not Started |
| MVP | TBD | Not Started | | MVP | TBD | Not Started |
| Launch | TBD | Not Started | | Launch | TBD | Not Started |
## Resources ## Resources
| Role | Person | Allocation | | Role | Person | Allocation |
|------|--------|------------| | --------- | ------ | ---------- |
| Lead | Name | 100% | | Lead | Name | 100% |
| Developer | Name | 50% | | Developer | Name | 50% |
## Risks ## Risks
| Risk | Impact | Likelihood | Mitigation | | Risk | Impact | Likelihood | Mitigation |
|------|--------|------------|------------| | ------ | ------ | ---------- | ---------- |
| Risk 1 | High | Medium | Plan | | Risk 1 | High | Medium | Plan |
## Timeline ## Timeline
### Phase 1: Planning ### Phase 1: Planning
- [ ] Define requirements - [ ] Define requirements
- [ ] Create design documents - [ ] Create design documents
### Phase 2: Development ### Phase 2: Development
- [ ] Implement core features - [ ] Implement core features
- [ ] Write tests - [ ] Write tests
### Phase 3: Launch ### Phase 3: Launch
- [ ] Deploy to production - [ ] Deploy to production
- [ ] Monitor and iterate - [ ] Monitor and iterate
+3 -3
View File
@@ -21,9 +21,9 @@ const project = require('project-name');
## Configuration ## Configuration
| Option | Default | Description | | Option | Default | Description |
|--------|---------|-------------| | ------- | ------- | ----------- |
| option1 | true | Description | | option1 | true | Description |
## Contributing ## Contributing
+8 -6
View File
@@ -12,10 +12,12 @@ Brief description of what this feature does.
## Requirements ## Requirements
### Functional Requirements ### Functional Requirements
1. Requirement 1 1. Requirement 1
2. Requirement 2 2. Requirement 2
### Non-Functional Requirements ### Non-Functional Requirements
1. Performance requirement 1. Performance requirement
2. Security requirement 2. Security requirement
@@ -27,9 +29,9 @@ Describe the technical approach.
### Endpoints ### Endpoints
| Method | Path | Description | | Method | Path | Description |
|--------|------|-------------| | ------ | ------------- | ------------ |
| GET | /api/resource | Get resource | | GET | /api/resource | Get resource |
## Testing Strategy ## Testing Strategy
@@ -37,6 +39,6 @@ Describe how this will be tested.
## Timeline ## Timeline
| Phase | Duration | Deliverables | | Phase | Duration | Deliverables |
|-------|----------|-------------| | ------- | -------- | ------------------- |
| Phase 1 | 1 week | Core implementation | | Phase 1 | 1 week | Core implementation |
+3 -1
View File
@@ -42,7 +42,7 @@ Walk through the implementation.
```javascript ```javascript
// Example code // Example code
function example() { function example() {
return 'Hello'; return 'Hello';
} }
``` ```
@@ -53,10 +53,12 @@ How to verify everything works.
## Common Issues ## Common Issues
### Issue 1 ### Issue 1
**Problem:** Description of the problem. **Problem:** Description of the problem.
**Solution:** How to fix it. **Solution:** How to fix it.
### Issue 2 ### Issue 2
**Problem:** Description of the problem. **Problem:** Description of the problem.
**Solution:** How to fix it. **Solution:** How to fix it.
+204 -203
View File
@@ -1,245 +1,246 @@
/** /**
* ModalManager - Unified modal system with accessibility support * ModalManager - Unified modal system with accessibility support
* @version 4.4.2 * @version 4.4.5
*/ */
class ModalManager { class ModalManager {
#modal; #modal;
#backdrop; #backdrop;
#options; #options;
#lastFocusedElement; #lastFocusedElement;
#focusableElements; #focusableElements;
#eventListeners; #eventListeners;
#isOpen; #isOpen;
static #openModals = []; static #openModals = [];
constructor(element, options = {}) { constructor(element, options = {}) {
this.#modal = typeof element === 'string' ? document.querySelector(element) : element; this.#modal = typeof element === 'string' ? document.querySelector(element) : element;
this.#options = { this.#options = {
closeOnBackdrop: true, closeOnBackdrop: true,
closeOnEscape: true, closeOnEscape: true,
focusFirst: true, focusFirst: true,
onOpen: null, onOpen: null,
onClose: null, onClose: null,
...options ...options,
}; };
this.#isOpen = false; this.#isOpen = false;
this.#eventListeners = []; this.#eventListeners = [];
this.#init(); this.#init();
}
#init() {
// Ensure modal has required attributes
if (!this.#modal.hasAttribute('role')) {
this.#modal.setAttribute('role', 'dialog');
}
if (!this.#modal.hasAttribute('aria-modal')) {
this.#modal.setAttribute('aria-modal', 'true');
} }
#init() { // Find or create backdrop
// Ensure modal has required attributes this.#backdrop = this.#modal.querySelector('.modal-backdrop');
if (!this.#modal.hasAttribute('role')) {
this.#modal.setAttribute('role', 'dialog');
}
if (!this.#modal.hasAttribute('aria-modal')) {
this.#modal.setAttribute('aria-modal', 'true');
}
// Find or create backdrop // Setup close triggers
this.#backdrop = this.#modal.querySelector('.modal-backdrop'); this.#setupCloseTriggers();
}
// Setup close triggers #setupCloseTriggers() {
this.#setupCloseTriggers(); // Close button
const closeBtn = this.#modal.querySelector('.modal-close');
if (closeBtn) {
const handler = (e) => {
e.preventDefault();
this.close();
};
closeBtn.addEventListener('click', handler);
this.#eventListeners.push({ el: closeBtn, type: 'click', handler });
} }
#setupCloseTriggers() { // Elements with data-close attribute
// Close button const closeTriggers = this.#modal.querySelectorAll('[data-close]');
const closeBtn = this.#modal.querySelector('.modal-close'); closeTriggers.forEach((el) => {
if (closeBtn) { if (el.classList.contains('modal-backdrop') && !this.#options.closeOnBackdrop) {
const handler = (e) => { return;
e.preventDefault(); }
this.close(); const handler = (e) => {
}; e.preventDefault();
closeBtn.addEventListener('click', handler); this.close();
this.#eventListeners.push({ el: closeBtn, type: 'click', handler }); };
} el.addEventListener('click', handler);
this.#eventListeners.push({ el, type: 'click', handler });
});
}
// Elements with data-close attribute #getFocusableElements() {
const closeTriggers = this.#modal.querySelectorAll('[data-close]'); const selector = [
closeTriggers.forEach(el => { 'button:not([disabled])',
if (el.classList.contains('modal-backdrop') && !this.#options.closeOnBackdrop) { 'input:not([disabled])',
return; 'select:not([disabled])',
} 'textarea:not([disabled])',
const handler = (e) => { 'a[href]',
e.preventDefault(); '[tabindex]:not([tabindex="-1"])',
this.close(); ].join(', ');
};
el.addEventListener('click', handler); return Array.from(this.#modal.querySelectorAll(selector)).filter(
this.#eventListeners.push({ el, type: 'click', handler }); (el) => el.offsetParent !== null && !el.classList.contains('modal-backdrop')
}); );
}
#trapFocus(e) {
if (e.key !== 'Tab') return;
const focusable = this.#getFocusableElements();
if (focusable.length === 0) return;
const firstEl = focusable[0];
const lastEl = focusable[focusable.length - 1];
if (e.shiftKey) {
if (document.activeElement === firstEl) {
e.preventDefault();
lastEl.focus();
}
} else {
if (document.activeElement === lastEl) {
e.preventDefault();
firstEl.focus();
}
} }
}
#getFocusableElements() { #handleKeydown(e) {
const selector = [ if (e.key === 'Escape' && this.#options.closeOnEscape) {
'button:not([disabled])', e.preventDefault();
'input:not([disabled])', this.close();
'select:not([disabled])',
'textarea:not([disabled])',
'a[href]',
'[tabindex]:not([tabindex="-1"])'
].join(', ');
return Array.from(this.#modal.querySelectorAll(selector))
.filter(el => el.offsetParent !== null && !el.classList.contains('modal-backdrop'));
} }
this.#trapFocus(e);
}
#trapFocus(e) { open() {
if (e.key !== 'Tab') return; if (this.#isOpen) return;
// Store last focused element
this.#lastFocusedElement = document.activeElement;
// Track open modals
ModalManager.#openModals.push(this);
// Show modal: remove hidden first, force a reflow so the browser
// records opacity:0 as the start state, then add 'open' to trigger
// the CSS transition. Without the reflow, both class changes are
// batched into one style recalculation and the transition is skipped.
this.#modal.classList.remove('hidden');
void this.#modal.offsetHeight; // Force reflow — do not remove
this.#modal.classList.add('open');
this.#isOpen = true;
// Prevent body scroll
document.body.style.overflow = 'hidden';
// Add keyboard listener
const keydownHandler = (e) => this.#handleKeydown(e);
document.addEventListener('keydown', keydownHandler);
this.#eventListeners.push({ el: document, type: 'keydown', handler: keydownHandler });
// Focus first element
if (this.#options.focusFirst) {
requestAnimationFrame(() => {
const focusable = this.#getFocusableElements(); const focusable = this.#getFocusableElements();
if (focusable.length === 0) return; if (focusable.length > 0) {
focusable[0].focus();
const firstEl = focusable[0];
const lastEl = focusable[focusable.length - 1];
if (e.shiftKey) {
if (document.activeElement === firstEl) {
e.preventDefault();
lastEl.focus();
}
} else {
if (document.activeElement === lastEl) {
e.preventDefault();
firstEl.focus();
}
} }
});
} }
#handleKeydown(e) { // Callback
if (e.key === 'Escape' && this.#options.closeOnEscape) { if (this.#options.onOpen) {
e.preventDefault(); this.#options.onOpen(this);
this.close();
}
this.#trapFocus(e);
} }
open() { // Dispatch custom event
if (this.#isOpen) return; this.#modal.dispatchEvent(new CustomEvent('modal:open'));
}
// Store last focused element close() {
this.#lastFocusedElement = document.activeElement; if (!this.#isOpen) return;
// Track open modals // Remove from open modals
ModalManager.#openModals.push(this); const index = ModalManager.#openModals.indexOf(this);
if (index > -1) {
// Show modal: remove hidden first, force a reflow so the browser ModalManager.#openModals.splice(index, 1);
// records opacity:0 as the start state, then add 'open' to trigger
// the CSS transition. Without the reflow, both class changes are
// batched into one style recalculation and the transition is skipped.
this.#modal.classList.remove('hidden');
void this.#modal.offsetHeight; // Force reflow — do not remove
this.#modal.classList.add('open');
this.#isOpen = true;
// Prevent body scroll
document.body.style.overflow = 'hidden';
// Add keyboard listener
const keydownHandler = (e) => this.#handleKeydown(e);
document.addEventListener('keydown', keydownHandler);
this.#eventListeners.push({ el: document, type: 'keydown', handler: keydownHandler });
// Focus first element
if (this.#options.focusFirst) {
requestAnimationFrame(() => {
const focusable = this.#getFocusableElements();
if (focusable.length > 0) {
focusable[0].focus();
}
});
}
// Callback
if (this.#options.onOpen) {
this.#options.onOpen(this);
}
// Dispatch custom event
this.#modal.dispatchEvent(new CustomEvent('modal:open'));
} }
close() { // Start hide transition
if (!this.#isOpen) return; this.#modal.classList.remove('open');
this.#isOpen = false;
// Remove from open modals // Re-add 'hidden' after the CSS transition completes so the modal
const index = ModalManager.#openModals.indexOf(this); // is fully removed from rendering (display:none), not just invisible.
if (index > -1) { // We use both transitionend and a setTimeout fallback because
ModalManager.#openModals.splice(index, 1); // transitionend never fires when prefers-reduced-motion disables transitions.
} let hidden = false;
const addHidden = () => {
if (hidden || this.#isOpen) return;
hidden = true;
this.#modal.removeEventListener('transitionend', onTransitionEnd);
this.#modal.classList.add('hidden');
};
const onTransitionEnd = (e) => {
if (e.target !== this.#modal) return;
addHidden();
};
this.#modal.addEventListener('transitionend', onTransitionEnd);
setTimeout(addHidden, 250); // fallback: slightly longer than 200ms transition
// Start hide transition // Restore body scroll if no modals open
this.#modal.classList.remove('open'); if (ModalManager.#openModals.length === 0) {
this.#isOpen = false; document.body.style.overflow = '';
// Re-add 'hidden' after the CSS transition completes so the modal
// is fully removed from rendering (display:none), not just invisible.
// We use both transitionend and a setTimeout fallback because
// transitionend never fires when prefers-reduced-motion disables transitions.
let hidden = false;
const addHidden = () => {
if (hidden || this.#isOpen) return;
hidden = true;
this.#modal.removeEventListener('transitionend', onTransitionEnd);
this.#modal.classList.add('hidden');
};
const onTransitionEnd = (e) => {
if (e.target !== this.#modal) return;
addHidden();
};
this.#modal.addEventListener('transitionend', onTransitionEnd);
setTimeout(addHidden, 250); // fallback: slightly longer than 200ms transition
// Restore body scroll if no modals open
if (ModalManager.#openModals.length === 0) {
document.body.style.overflow = '';
}
// Remove keyboard listener
const keydownListener = this.#eventListeners.find(
l => l.el === document && l.type === 'keydown'
);
if (keydownListener) {
document.removeEventListener('keydown', keydownListener.handler);
this.#eventListeners = this.#eventListeners.filter(l => l !== keydownListener);
}
// Restore focus
if (this.#lastFocusedElement && typeof this.#lastFocusedElement.focus === 'function') {
this.#lastFocusedElement.focus();
}
// Callback
if (this.#options.onClose) {
this.#options.onClose(this);
}
// Dispatch custom event
this.#modal.dispatchEvent(new CustomEvent('modal:close'));
} }
isOpen() { // Remove keyboard listener
return this.#isOpen; const keydownListener = this.#eventListeners.find(
(l) => l.el === document && l.type === 'keydown'
);
if (keydownListener) {
document.removeEventListener('keydown', keydownListener.handler);
this.#eventListeners = this.#eventListeners.filter((l) => l !== keydownListener);
} }
destroy() { // Restore focus
// Close if open if (this.#lastFocusedElement && typeof this.#lastFocusedElement.focus === 'function') {
if (this.#isOpen) { this.#lastFocusedElement.focus();
this.close();
}
// Remove all event listeners
this.#eventListeners.forEach(({ el, type, handler }) => {
el.removeEventListener(type, handler);
});
this.#eventListeners = [];
} }
// Callback
if (this.#options.onClose) {
this.#options.onClose(this);
}
// Dispatch custom event
this.#modal.dispatchEvent(new CustomEvent('modal:close'));
}
isOpen() {
return this.#isOpen;
}
destroy() {
// Close if open
if (this.#isOpen) {
this.close();
}
// Remove all event listeners
this.#eventListeners.forEach(({ el, type, handler }) => {
el.removeEventListener(type, handler);
});
this.#eventListeners = [];
}
} }
// Export for use in renderer - avoid duplicate declaration // Export for use in renderer - avoid duplicate declaration
if (typeof window !== 'undefined' && !window.ModalManager) { if (typeof window !== 'undefined' && !window.ModalManager) {
window.ModalManager = ModalManager; window.ModalManager = ModalManager;
} }
// CommonJS export // CommonJS export
+9 -7
View File
@@ -1,12 +1,14 @@
function createWelcomeContent(recentFiles = [], appVersion = '') { function createWelcomeContent(recentFiles = [], appVersion = '') {
const recentHtml = recentFiles.length const recentHtml = recentFiles.length
? recentFiles.map(f => { ? recentFiles
const name = f.split(/[/\\]/).pop(); .map((f) => {
return `<div class="welcome-recent-item" data-path="${f}"><span class="welcome-recent-name">${name}</span><span class="welcome-recent-path">${f}</span></div>`; const name = f.split(/[/\\]/).pop();
}).join('') return `<div class="welcome-recent-item" data-path="${f}"><span class="welcome-recent-name">${name}</span><span class="welcome-recent-path">${f}</span></div>`;
: '<p class="welcome-muted">No recent files</p>'; })
.join('')
: '<p class="welcome-muted">No recent files</p>';
return ` return `
<div class="welcome-container"> <div class="welcome-container">
<div class="welcome-hero"> <div class="welcome-hero">
<h1 class="welcome-title">MarkdownConverter</h1> <h1 class="welcome-title">MarkdownConverter</h1>
Binary file not shown.
+217 -225
View File
@@ -4,172 +4,154 @@
* Toggle with F11, exit with Escape. * Toggle with F11, exit with Escape.
*/ */
const { const { EditorView, ViewPlugin, Decoration } = require('@codemirror/view');
EditorView,
ViewPlugin,
Decoration,
DecorationSet,
} = require('@codemirror/view');
const { RangeSetBuilder } = require('@codemirror/state'); const { RangeSetBuilder } = require('@codemirror/state');
class ZenMode { class ZenMode {
/** /**
* @param {import('./renderer').TabManager} tabManager * @param {import('./renderer').TabManager} tabManager
*/ */
constructor(tabManager) { constructor(tabManager) {
this.tabManager = tabManager; this.tabManager = tabManager;
this.active = false; this.active = false;
this._hud = null; this._hud = null;
this._timerInterval = null; this._timerInterval = null;
this._sessionStart = null; this._sessionStart = null;
this._extensions = []; this._extensions = [];
}
activate() {
if (this.active) return;
this.active = true;
document.body.classList.add('zen-mode');
// Collapse sidebar
const sidebar = document.getElementById('sidebar');
if (sidebar) sidebar.classList.add('collapsed');
// Hide preview pane for the active tab
const tab = this.tabManager.tabs.get(this.tabManager.activeTabId);
if (tab) {
const previewContainer = document.getElementById(`preview-pane-${tab.id}`);
if (previewContainer) previewContainer.classList.add('hidden');
const editorPane = document.getElementById(`editor-pane-${tab.id}`);
if (editorPane) editorPane.classList.add('full-width');
// Add CM6 extensions to the active editor
if (tab.editorView) {
this._extensions = [typewriterScrollExtension, lineDimmingExtension];
// Reconfigure is not straightforward with CM6's immutable state.
// Instead we dispatch effects or simply rebuild with new extensions.
// Since we cannot hot-swap extensions on an existing EditorView,
// we store a reference and the CSS + updateListener handle the rest.
// The typewriter + dimming plugins are applied via a compartment approach
// would be ideal, but for simplicity we use DOM + updateListener.
this._applyTypewriterBehavior(tab.editorView);
}
} }
activate() { // Create HUD
if (this.active) return; this._createHUD();
this.active = true;
document.body.classList.add('zen-mode'); // Start session timer
this._sessionStart = Date.now();
this._timerInterval = setInterval(() => this._updateHUD(), 1000);
// Collapse sidebar // Focus editor
const sidebar = document.getElementById('sidebar'); if (tab?.editorView) tab.editorView.focus();
if (sidebar) sidebar.classList.add('collapsed'); }
// Hide preview pane for the active tab deactivate() {
const tab = this.tabManager.tabs.get(this.tabManager.activeTabId); if (!this.active) return;
if (tab) { this.active = false;
const previewContainer = document.getElementById(`preview-pane-${tab.id}`);
if (previewContainer) previewContainer.classList.add('hidden');
const editorPane = document.getElementById(`editor-pane-${tab.id}`);
if (editorPane) editorPane.classList.add('full-width');
// Add CM6 extensions to the active editor document.body.classList.remove('zen-mode');
if (tab.editorView) {
this._extensions = [
typewriterScrollExtension,
lineDimmingExtension,
];
// Reconfigure is not straightforward with CM6's immutable state.
// Instead we dispatch effects or simply rebuild with new extensions.
// Since we cannot hot-swap extensions on an existing EditorView,
// we store a reference and the CSS + updateListener handle the rest.
// The typewriter + dimming plugins are applied via a compartment approach
// would be ideal, but for simplicity we use DOM + updateListener.
this._applyTypewriterBehavior(tab.editorView);
}
}
// Create HUD // Restore preview pane for the active tab
this._createHUD(); const tab = this.tabManager.tabs.get(this.tabManager.activeTabId);
if (tab) {
const previewContainer = document.getElementById(`preview-pane-${tab.id}`);
if (previewContainer) previewContainer.classList.remove('hidden');
const editorPane = document.getElementById(`editor-pane-${tab.id}`);
if (editorPane) editorPane.classList.remove('full-width');
// Start session timer // Remove typewriter listener
this._sessionStart = Date.now(); if (tab.editorView && this._selectionListener) {
this._timerInterval = setInterval(() => this._updateHUD(), 1000); window.removeEventListener('zen-typewriter', this._selectionListener);
this._selectionListener = null;
// Focus editor }
if (tab?.editorView) tab.editorView.focus();
} }
deactivate() { // Remove HUD
if (!this.active) return; if (this._hud && this._hud.parentNode) {
this.active = false; this._hud.parentNode.removeChild(this._hud);
this._hud = null;
document.body.classList.remove('zen-mode');
// Restore preview pane for the active tab
const tab = this.tabManager.tabs.get(this.tabManager.activeTabId);
if (tab) {
const previewContainer = document.getElementById(`preview-pane-${tab.id}`);
if (previewContainer) previewContainer.classList.remove('hidden');
const editorPane = document.getElementById(`editor-pane-${tab.id}`);
if (editorPane) editorPane.classList.remove('full-width');
// Remove typewriter listener
if (tab.editorView && this._selectionListener) {
window.removeEventListener('zen-typewriter', this._selectionListener);
this._selectionListener = null;
}
}
// Remove HUD
if (this._hud && this._hud.parentNode) {
this._hud.parentNode.removeChild(this._hud);
this._hud = null;
}
// Stop timer
if (this._timerInterval) {
clearInterval(this._timerInterval);
this._timerInterval = null;
}
this._sessionStart = null;
this._extensions = [];
} }
toggle() { // Stop timer
if (this.active) { if (this._timerInterval) {
this.deactivate(); clearInterval(this._timerInterval);
} else { this._timerInterval = null;
this.activate();
}
} }
this._sessionStart = null;
this._extensions = [];
}
_applyTypewriterBehavior(view) { toggle() {
// We use a custom update listener that scrolls the cursor to center. if (this.active) {
// This is stored on the instance so we can clean it up. this.deactivate();
const scrollTimeout = null; } else {
this.activate();
}
}
const scrollFn = () => { _applyTypewriterBehavior(view) {
if (!this.active) return; // We use a custom update listener that scrolls the cursor to center.
const pos = view.state.selection.main.head; const scrollFn = () => {
requestAnimationFrame(() => { if (!this.active) return;
view.dispatch({ const pos = view.state.selection.main.head;
effects: EditorView.scrollIntoView(pos, { y: 'center' }), requestAnimationFrame(() => {
}); view.dispatch({
}); effects: EditorView.scrollIntoView(pos, { y: 'center' }),
};
// Listen for selection/doc changes via a polling approach
// since we cannot add extensions to an existing view.
// Instead, use the DOM scrollIntoView after selection changes.
const observer = new MutationObserver(() => {
// No-op, we use interval below
}); });
});
};
// Use interval to keep cursor centered during typing // Use interval to keep cursor centered during typing
this._scrollInterval = setInterval(() => { this._scrollInterval = setInterval(() => {
if (!this.active) { if (!this.active) {
clearInterval(this._scrollInterval); clearInterval(this._scrollInterval);
this._scrollInterval = null; this._scrollInterval = null;
return; return;
} }
// Typewriter scroll: center the cursor line // Typewriter scroll: center the cursor line
try { try {
const pos = view.state.selection.main.head; const pos = view.state.selection.main.head;
const coords = view.coordsAtPos(pos); const coords = view.coordsAtPos(pos);
const scroller = view.scrollDOM; const scroller = view.scrollDOM;
if (coords && scroller) { if (coords && scroller) {
const scrollerRect = scroller.getBoundingClientRect(); const scrollerRect = scroller.getBoundingClientRect();
const cursorCenter = coords.top + (coords.bottom - coords.top) / 2; const cursorCenter = coords.top + (coords.bottom - coords.top) / 2;
const viewCenter = scrollerRect.top + scrollerRect.height / 2; const viewCenter = scrollerRect.top + scrollerRect.height / 2;
const diff = cursorCenter - viewCenter; const diff = cursorCenter - viewCenter;
if (Math.abs(diff) > 30) { if (Math.abs(diff) > 30) {
scroller.scrollTop += diff; scroller.scrollTop += diff;
} }
} }
} catch (e) { } catch {
// Ignore errors from destroyed views // Ignore errors from destroyed views
} }
}, 200); }, 200);
// Initial scroll to center // Initial scroll to center
scrollFn(); scrollFn();
} }
_createHUD() { _createHUD() {
const hud = document.createElement('div'); const hud = document.createElement('div');
hud.className = 'zen-hud'; hud.className = 'zen-hud';
hud.innerHTML = ` hud.innerHTML = `
<span class="zen-hud-item" id="zen-words">0 words</span> <span class="zen-hud-item" id="zen-words">0 words</span>
<span class="zen-hud-sep">&middot;</span> <span class="zen-hud-sep">&middot;</span>
<span class="zen-hud-item" id="zen-reading-time">0 min read</span> <span class="zen-hud-item" id="zen-reading-time">0 min read</span>
@@ -179,114 +161,124 @@ class ZenMode {
<div class="zen-progress-bar" id="zen-progress-bar"></div> <div class="zen-progress-bar" id="zen-progress-bar"></div>
</div> </div>
`; `;
document.body.appendChild(hud); document.body.appendChild(hud);
this._hud = hud; this._hud = hud;
this._updateHUD(); this._updateHUD();
}
_updateHUD() {
if (!this.active || !this._hud) return;
const content = this.tabManager.getEditorContent();
const words = content.trim()
? content
.trim()
.split(/\s+/)
.filter((w) => w.length > 0).length
: 0;
const readingTime = Math.max(1, Math.ceil(words / 200));
const wordsEl = document.getElementById('zen-words');
const readingEl = document.getElementById('zen-reading-time');
const timerEl = document.getElementById('zen-timer');
if (wordsEl) wordsEl.textContent = `${words.toLocaleString()} words`;
if (readingEl) readingEl.textContent = `${readingTime} min read`;
// Session timer
if (this._sessionStart) {
const elapsed = Math.floor((Date.now() - this._sessionStart) / 1000);
const minutes = String(Math.floor(elapsed / 60)).padStart(2, '0');
const seconds = String(elapsed % 60).padStart(2, '0');
if (timerEl) timerEl.textContent = `${minutes}:${seconds}`;
} }
_updateHUD() { // Word goal progress
if (!this.active || !this._hud) return; const goalStr = localStorage.getItem('zen-word-goal');
const progressBar = document.getElementById('zen-progress-bar');
const content = this.tabManager.getEditorContent(); const progressContainer = document.getElementById('zen-progress-container');
const words = content.trim() ? content.trim().split(/\s+/).filter(w => w.length > 0).length : 0; if (progressBar && progressContainer) {
const readingTime = Math.max(1, Math.ceil(words / 200)); if (goalStr) {
const goal = parseInt(goalStr, 10);
const wordsEl = document.getElementById('zen-words'); if (goal > 0) {
const readingEl = document.getElementById('zen-reading-time'); const pct = Math.min(100, Math.round((words / goal) * 100));
const timerEl = document.getElementById('zen-timer'); progressBar.style.width = `${pct}%`;
progressContainer.style.display = 'block';
if (wordsEl) wordsEl.textContent = `${words.toLocaleString()} words`; } else {
if (readingEl) readingEl.textContent = `${readingTime} min read`; progressContainer.style.display = 'none';
// Session timer
if (this._sessionStart) {
const elapsed = Math.floor((Date.now() - this._sessionStart) / 1000);
const minutes = String(Math.floor(elapsed / 60)).padStart(2, '0');
const seconds = String(elapsed % 60).padStart(2, '0');
if (timerEl) timerEl.textContent = `${minutes}:${seconds}`;
}
// Word goal progress
const goalStr = localStorage.getItem('zen-word-goal');
const progressBar = document.getElementById('zen-progress-bar');
const progressContainer = document.getElementById('zen-progress-container');
if (progressBar && progressContainer) {
if (goalStr) {
const goal = parseInt(goalStr, 10);
if (goal > 0) {
const pct = Math.min(100, Math.round((words / goal) * 100));
progressBar.style.width = `${pct}%`;
progressContainer.style.display = 'block';
} else {
progressContainer.style.display = 'none';
}
} else {
progressContainer.style.display = 'none';
}
} }
} else {
progressContainer.style.display = 'none';
}
} }
}
} }
// Typewriter scroll ViewPlugin // Typewriter scroll ViewPlugin
const typewriterScrollExtension = ViewPlugin.fromClass(class { const typewriterScrollExtension = ViewPlugin.fromClass(
class {
constructor(view) { constructor(view) {
this.view = view; this.view = view;
} }
update(update) { update(update) {
if (update.selectionSet || update.docChanged) { if (update.selectionSet || update.docChanged) {
const pos = update.state.selection.main.head; const pos = update.state.selection.main.head;
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (this.view.dom && this.view.dom.isConnected) { if (this.view.dom && this.view.dom.isConnected) {
this.view.dispatch({ this.view.dispatch({
effects: EditorView.scrollIntoView(pos, { y: 'center' }), effects: EditorView.scrollIntoView(pos, { y: 'center' }),
});
}
}); });
} }
});
}
} }
}); }
);
// Line dimming ViewPlugin // Line dimming ViewPlugin
function getOpacity(distance) { function getOpacity(distance) {
if (distance === 0) return 1.0; if (distance === 0) return 1.0;
if (distance === 1) return 0.7; if (distance === 1) return 0.7;
if (distance === 2) return 0.6; if (distance === 2) return 0.6;
if (distance === 3) return 0.45; if (distance === 3) return 0.45;
return 0.3; return 0.3;
} }
const lineDimmingExtension = ViewPlugin.fromClass(class { const lineDimmingExtension = ViewPlugin.fromClass(
class {
constructor(view) { constructor(view) {
this.decorations = this.buildDecorations(view); this.decorations = this.buildDecorations(view);
} }
update(update) { update(update) {
if (update.docChanged || update.selectionSet || update.viewportChanged) { if (update.docChanged || update.selectionSet || update.viewportChanged) {
this.decorations = this.buildDecorations(update.view); this.decorations = this.buildDecorations(update.view);
} }
} }
buildDecorations(view) { buildDecorations(view) {
const builder = new RangeSetBuilder(); const builder = new RangeSetBuilder();
const pos = view.state.selection.main.head; const pos = view.state.selection.main.head;
const activeLine = view.state.doc.lineAt(pos).number; const activeLine = view.state.doc.lineAt(pos).number;
const doc = view.state.doc; const doc = view.state.doc;
for (let lineNum = 1; lineNum <= doc.lines; lineNum++) { for (let lineNum = 1; lineNum <= doc.lines; lineNum++) {
const line = doc.line(lineNum); const line = doc.line(lineNum);
const distance = Math.abs(lineNum - activeLine); const distance = Math.abs(lineNum - activeLine);
const opacity = getOpacity(distance); const opacity = getOpacity(distance);
const deco = Decoration.line({ const deco = Decoration.line({
attributes: { style: `opacity:${opacity};transition:opacity 0.15s ease` }, attributes: { style: `opacity:${opacity};transition:opacity 0.15s ease` },
}); });
builder.add(line.from, line.from, deco); builder.add(line.from, line.from, deco);
} }
return builder.finish(); return builder.finish();
} }
}, { },
decorations: v => v.decorations, {
}); decorations: (v) => v.decorations,
}
);
module.exports = { ZenMode }; module.exports = { ZenMode };
-47
View File
@@ -1,47 +0,0 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class'],
content: [
'./src/renderer/**/*.{js,ts,jsx,tsx}',
'./src/renderer/index.html',
],
theme: {
extend: {
colors: {
brand: {
DEFAULT: '#e5461f',
dark: '#c93a18',
light: '#ff6b47',
},
success: '#1a7a56',
warning: '#eab308',
danger: '#ef4444',
info: '#0ea5e9',
warm: {
50: '#fafbfc',
100: '#f5f5f5',
200: '#e3e3e3',
300: '#d1d1d1',
400: '#b0b0b0',
500: '#9a9696',
600: '#7a7878',
700: '#5a5858',
800: '#4e4e4e',
900: '#464646',
950: '#0d0b09',
},
},
fontFamily: {
sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
display: ['"Barlow Condensed"', 'system-ui', 'sans-serif'],
mono: ['"JetBrains Mono"', '"Fira Code"', '"SF Mono"', 'Consolas', 'monospace'],
},
borderRadius: {
lg: '0.75rem',
md: '0.5rem',
sm: '0.25rem',
},
},
},
plugins: [require('tailwindcss-animate')],
};
+28
View File
@@ -0,0 +1,28 @@
/**
* Tests for bundled external tools
*/
const fs = require('fs');
const path = require('path');
describe('Bundled Pandoc binary', () => {
const rootDir = path.resolve(__dirname, '..');
const platform = process.platform;
const binaryPath = path.join(rootDir, 'bin', platform, 'pandoc');
const windowsBinaryPath = path.join(rootDir, 'bin', platform, 'pandoc.exe');
test('Pandoc binary exists for current platform', () => {
const exists = fs.existsSync(binaryPath) || fs.existsSync(windowsBinaryPath);
expect(exists).toBe(true);
});
test('Pandoc binary is executable', () => {
if (platform === 'win32') {
expect(fs.existsSync(windowsBinaryPath)).toBe(true);
} else {
expect(fs.existsSync(binaryPath)).toBe(true);
const stats = fs.statSync(binaryPath);
expect(stats.mode & 0o111).toBeGreaterThan(0);
}
});
});
+110 -110
View File
@@ -8,10 +8,10 @@
*/ */
describe('CommandPalette', () => { describe('CommandPalette', () => {
let CommandPalette; let CommandPalette;
beforeEach(() => { beforeEach(() => {
document.body.innerHTML = ` document.body.innerHTML = `
<div class="command-palette-overlay hidden" id="command-palette-overlay"> <div class="command-palette-overlay hidden" id="command-palette-overlay">
<div class="command-palette"> <div class="command-palette">
<input type="text" id="command-palette-input"> <input type="text" id="command-palette-input">
@@ -19,126 +19,126 @@ describe('CommandPalette', () => {
</div> </div>
</div> </div>
`; `;
CommandPalette = require('../src/command-palette').CommandPalette; CommandPalette = require('../src/command-palette').CommandPalette;
}); });
test('starts hidden', () => { test('starts hidden', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
expect(palette.isOpen()).toBe(false); expect(palette.isOpen()).toBe(false);
}); });
test('opens and focuses input', () => { test('opens and focuses input', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.open(); palette.open();
expect(palette.isOpen()).toBe(true); expect(palette.isOpen()).toBe(true);
}); });
test('closes', () => { test('closes', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.open(); palette.open();
palette.close(); palette.close();
expect(palette.isOpen()).toBe(false); expect(palette.isOpen()).toBe(false);
}); });
test('registers and renders commands', () => { test('registers and renders commands', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.register('Test Command', 'Ctrl+T', () => {}); palette.register('Test Command', 'Ctrl+T', () => {});
palette.register('Another Command', '', () => {}); palette.register('Another Command', '', () => {});
palette.open(); palette.open();
const items = document.querySelectorAll('.command-item'); const items = document.querySelectorAll('.command-item');
expect(items.length).toBe(2); expect(items.length).toBe(2);
}); });
test('filters commands by search', () => { test('filters commands by search', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.register('Save File', 'Ctrl+S', () => {}); palette.register('Save File', 'Ctrl+S', () => {});
palette.register('Open File', 'Ctrl+O', () => {}); palette.register('Open File', 'Ctrl+O', () => {});
palette.register('Bold Text', 'Ctrl+B', () => {}); palette.register('Bold Text', 'Ctrl+B', () => {});
palette.renderResults('file'); palette.renderResults('file');
const items = document.querySelectorAll('.command-item'); const items = document.querySelectorAll('.command-item');
expect(items.length).toBe(2); expect(items.length).toBe(2);
}); });
test('executes command', () => { test('executes command', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
const action = jest.fn(); const action = jest.fn();
palette.register('Test', '', action); palette.register('Test', '', action);
palette.open(); palette.open();
palette.executeSelected(); palette.executeSelected();
expect(action).toHaveBeenCalled(); expect(action).toHaveBeenCalled();
}); });
test('highlights matching text', () => { test('highlights matching text', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
const result = palette.highlightMatch('Save File', 'save'); const result = palette.highlightMatch('Save File', 'save');
expect(result).toContain('<strong>'); expect(result).toContain('<strong>');
expect(result).toContain('Save'); expect(result).toContain('Save');
}); });
test('highlightMatch returns original text when no query', () => { test('highlightMatch returns original text when no query', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
const result = palette.highlightMatch('Save File', ''); const result = palette.highlightMatch('Save File', '');
expect(result).toBe('Save File'); expect(result).toBe('Save File');
}); });
test('filters case-insensitively', () => { test('filters case-insensitively', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.register('Save File', '', () => {}); palette.register('Save File', '', () => {});
palette.register('Open File', '', () => {}); palette.register('Open File', '', () => {});
palette.renderResults('SAVE'); palette.renderResults('SAVE');
const items = document.querySelectorAll('.command-item'); const items = document.querySelectorAll('.command-item');
expect(items.length).toBe(1); expect(items.length).toBe(1);
}); });
test('shows all commands when query is empty', () => { test('shows all commands when query is empty', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.register('Cmd1', '', () => {}); palette.register('Cmd1', '', () => {});
palette.register('Cmd2', '', () => {}); palette.register('Cmd2', '', () => {});
palette.register('Cmd3', '', () => {}); palette.register('Cmd3', '', () => {});
palette.renderResults(''); palette.renderResults('');
const items = document.querySelectorAll('.command-item'); const items = document.querySelectorAll('.command-item');
expect(items.length).toBe(3); expect(items.length).toBe(3);
}); });
test('displays shortcut when provided', () => { test('displays shortcut when provided', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.register('Save File', 'Ctrl+S', () => {}); palette.register('Save File', 'Ctrl+S', () => {});
palette.open(); palette.open();
const shortcut = document.querySelector('.command-shortcut'); const shortcut = document.querySelector('.command-shortcut');
expect(shortcut).not.toBeNull(); expect(shortcut).not.toBeNull();
expect(shortcut.textContent).toBe('Ctrl+S'); expect(shortcut.textContent).toBe('Ctrl+S');
}); });
test('does not display shortcut when empty', () => { test('does not display shortcut when empty', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.register('Test Command', '', () => {}); palette.register('Test Command', '', () => {});
palette.open(); palette.open();
const shortcut = document.querySelector('.command-shortcut'); const shortcut = document.querySelector('.command-shortcut');
expect(shortcut).toBeNull(); expect(shortcut).toBeNull();
}); });
test('closes on overlay click', () => { test('closes on overlay click', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.open(); palette.open();
// Simulate click on the overlay itself // Simulate click on the overlay itself
const event = new Event('click', { bubbles: true }); const event = new Event('click', { bubbles: true });
Object.defineProperty(event, 'target', { value: palette.overlay }); Object.defineProperty(event, 'target', { value: palette.overlay });
palette.overlay.dispatchEvent(event); palette.overlay.dispatchEvent(event);
expect(palette.isOpen()).toBe(false); expect(palette.isOpen()).toBe(false);
}); });
test('executeSelected does nothing when no commands', () => { test('executeSelected does nothing when no commands', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.open(); palette.open();
// Should not throw // Should not throw
expect(() => palette.executeSelected()).not.toThrow(); expect(() => palette.executeSelected()).not.toThrow();
}); });
test('closes after executing command', () => { test('closes after executing command', () => {
const palette = new CommandPalette(); const palette = new CommandPalette();
palette.register('Test', '', jest.fn()); palette.register('Test', '', jest.fn());
palette.open(); palette.open();
palette.executeSelected(); palette.executeSelected();
expect(palette.isOpen()).toBe(false); expect(palette.isOpen()).toBe(false);
}); });
}); });
+3 -1
View File
@@ -48,7 +48,9 @@ describe('EventBus', () => {
test('handler errors are caught and logged, not thrown', () => { test('handler errors are caught and logged, not thrown', () => {
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
bus.on('bad:event', () => { throw new Error('boom'); }); bus.on('bad:event', () => {
throw new Error('boom');
});
expect(() => bus.emit('bad:event', {})).not.toThrow(); expect(() => bus.emit('bad:event', {})).not.toThrow();
expect(errorSpy).toHaveBeenCalled(); expect(errorSpy).toHaveBeenCalled();
errorSpy.mockRestore(); errorSpy.mockRestore();
+9 -15
View File
@@ -56,24 +56,20 @@ describe('GitOperations Utilities', () => {
'branch', 'branch',
'checkout', 'checkout',
'push', 'push',
'pull' 'pull',
]; ];
expect(gitOps.length).toBeGreaterThan(0); expect(gitOps.length).toBeGreaterThan(0);
gitOps.forEach(op => { gitOps.forEach((op) => {
expect(typeof op).toBe('string'); expect(typeof op).toBe('string');
expect(op.length).toBeGreaterThan(0); expect(op.length).toBeGreaterThan(0);
}); });
}); });
it('should handle directory paths', () => { it('should handle directory paths', () => {
const paths = [ const paths = ['/home/user/project', './current/dir', '../parent/dir'];
'/home/user/project',
'./current/dir',
'../parent/dir'
];
paths.forEach(pathStr => { paths.forEach((pathStr) => {
expect(typeof pathStr).toBe('string'); expect(typeof pathStr).toBe('string');
expect(pathStr.length).toBeGreaterThan(0); expect(pathStr.length).toBeGreaterThan(0);
}); });
@@ -83,10 +79,10 @@ describe('GitOperations Utilities', () => {
const messages = [ const messages = [
'fix: bug in git panel', 'fix: bug in git panel',
'feat: add new feature', 'feat: add new feature',
'refactor: clean up code' 'refactor: clean up code',
]; ];
messages.forEach(msg => { messages.forEach((msg) => {
expect(typeof msg).toBe('string'); expect(typeof msg).toBe('string');
expect(msg.length).toBeGreaterThan(0); expect(msg.length).toBeGreaterThan(0);
}); });
@@ -101,7 +97,7 @@ describe('GitOperations Utilities', () => {
deleted: [], deleted: [],
modified: [], modified: [],
renamed: [], renamed: [],
staged: ['file.md'] staged: ['file.md'],
}; };
expect(statusResponse).toHaveProperty('staged'); expect(statusResponse).toHaveProperty('staged');
@@ -110,10 +106,8 @@ describe('GitOperations Utilities', () => {
it('should return log entries', () => { it('should return log entries', () => {
const logResponse = { const logResponse = {
all: [ all: [{ hash: 'abc123', message: 'fix: something' }],
{ hash: 'abc123', message: 'fix: something' } latest: { hash: 'abc123', message: 'fix: something' },
],
latest: { hash: 'abc123', message: 'fix: something' }
}; };
expect(logResponse).toHaveProperty('all'); expect(logResponse).toHaveProperty('all');
+3 -1
View File
@@ -8,7 +8,9 @@ describe('GoalTracker', () => {
store = {}; store = {};
tracker = new GoalTracker({ tracker = new GoalTracker({
get: (key) => store[key], get: (key) => store[key],
set: (key, value) => { store[key] = value; } set: (key, value) => {
store[key] = value;
},
}); });
}); });
+18
View File
@@ -0,0 +1,18 @@
/**
* Tests ensuring the codebase has no ESLint warnings.
*/
const { execSync } = require('child_process');
const path = require('path');
describe('ESLint quality gate', () => {
test('src and tests have no ESLint warnings', () => {
const rootDir = path.resolve(__dirname, '..');
const result = execSync('npm run lint', {
cwd: rootDir,
encoding: 'utf8',
stdio: ['pipe', 'pipe', 'pipe'],
});
expect(result).not.toMatch(/warning/);
});
});
+76 -77
View File
@@ -4,97 +4,96 @@
*/ */
describe('sanitizeErrorMessage', () => { describe('sanitizeErrorMessage', () => {
const sanitizeErrorMessage = (message) => { const sanitizeErrorMessage = (message) => {
if (typeof message !== 'string') return String(message); if (typeof message !== 'string') return String(message);
return message return message
.replace(/[A-Z]:\\[^\s"']+\\([^\s"'\\]+)/gi, '$1') .replace(/[A-Z]:\\[^\s"']+\\([^\s"'\\]+)/gi, '$1')
.replace(/\/[^\s"']+\/([^\s"'/]+)/g, '$1'); .replace(/\/[^\s"']+\/([^\s"'/]+)/g, '$1');
}; };
test('strips Windows absolute paths', () => { test('strips Windows absolute paths', () => {
expect(sanitizeErrorMessage('Error in C:\\Users\\test\\file.js')) expect(sanitizeErrorMessage('Error in C:\\Users\\test\\file.js')).toBe('Error in file.js');
.toBe('Error in file.js'); });
});
test('strips Unix absolute paths', () => { test('strips Unix absolute paths', () => {
expect(sanitizeErrorMessage('Error in /home/user/project/file.js')) expect(sanitizeErrorMessage('Error in /home/user/project/file.js')).toBe('Error in file.js');
.toBe('Error in file.js'); });
});
test('handles non-string input', () => { test('handles non-string input', () => {
expect(sanitizeErrorMessage(42)).toBe('42'); expect(sanitizeErrorMessage(42)).toBe('42');
expect(sanitizeErrorMessage(null)).toBe('null'); expect(sanitizeErrorMessage(null)).toBe('null');
}); });
test('preserves messages without paths', () => { test('preserves messages without paths', () => {
expect(sanitizeErrorMessage('Something went wrong')) expect(sanitizeErrorMessage('Something went wrong')).toBe('Something went wrong');
.toBe('Something went wrong'); });
});
test('strips nested Windows paths', () => { test('strips nested Windows paths', () => {
expect(sanitizeErrorMessage('Cannot read C:\\Users\\admin\\AppData\\Local\\config.json')) expect(sanitizeErrorMessage('Cannot read C:\\Users\\admin\\AppData\\Local\\config.json')).toBe(
.toBe('Cannot read config.json'); 'Cannot read config.json'
}); );
});
test('strips nested Unix paths', () => { test('strips nested Unix paths', () => {
expect(sanitizeErrorMessage('File not found: /var/log/app/error.log')) expect(sanitizeErrorMessage('File not found: /var/log/app/error.log')).toBe(
.toBe('File not found: error.log'); 'File not found: error.log'
}); );
});
test('handles undefined input', () => { test('handles undefined input', () => {
expect(sanitizeErrorMessage(undefined)).toBe('undefined'); expect(sanitizeErrorMessage(undefined)).toBe('undefined');
}); });
}); });
describe('createRateLimiter', () => { describe('createRateLimiter', () => {
const createRateLimiter = (minIntervalMs = 2000) => { const createRateLimiter = (minIntervalMs = 2000) => {
let lastCall = 0; let lastCall = 0;
return function canProceed() { return function canProceed() {
const now = Date.now(); const now = Date.now();
if (now - lastCall < minIntervalMs) return false; if (now - lastCall < minIntervalMs) return false;
lastCall = now; lastCall = now;
return true; return true;
};
}; };
};
test('allows first call', () => { test('allows first call', () => {
const limiter = createRateLimiter(1000); const limiter = createRateLimiter(1000);
expect(limiter()).toBe(true); expect(limiter()).toBe(true);
}); });
test('blocks rapid calls', () => { test('blocks rapid calls', () => {
const limiter = createRateLimiter(1000); const limiter = createRateLimiter(1000);
limiter(); // first call limiter(); // first call
expect(limiter()).toBe(false); // too soon expect(limiter()).toBe(false); // too soon
}); });
test('allows call after interval', () => { test('allows call after interval', () => {
jest.useFakeTimers(); jest.useFakeTimers();
const limiter = createRateLimiter(1000); const limiter = createRateLimiter(1000);
limiter(); limiter();
jest.advanceTimersByTime(1001); jest.advanceTimersByTime(1001);
expect(limiter()).toBe(true); expect(limiter()).toBe(true);
jest.useRealTimers(); jest.useRealTimers();
}); });
test('uses default interval of 2000ms', () => { test('uses default interval of 2000ms', () => {
jest.useFakeTimers(); jest.useFakeTimers();
const limiter = createRateLimiter(); const limiter = createRateLimiter();
limiter(); limiter();
jest.advanceTimersByTime(1999); jest.advanceTimersByTime(1999);
expect(limiter()).toBe(false); expect(limiter()).toBe(false);
jest.advanceTimersByTime(2); jest.advanceTimersByTime(2);
expect(limiter()).toBe(true); expect(limiter()).toBe(true);
jest.useRealTimers(); jest.useRealTimers();
}); });
test('resets after successful call', () => { test('resets after successful call', () => {
jest.useFakeTimers(); jest.useFakeTimers();
const limiter = createRateLimiter(500); const limiter = createRateLimiter(500);
limiter(); limiter();
jest.advanceTimersByTime(501); jest.advanceTimersByTime(501);
limiter(); // resets the timer limiter(); // resets the timer
expect(limiter()).toBe(false); // too soon after second call expect(limiter()).toBe(false); // too soon after second call
jest.useRealTimers(); jest.useRealTimers();
}); });
}); });
+236 -222
View File
@@ -4,245 +4,259 @@
*/ */
describe('Markdown Extensions', () => { describe('Markdown Extensions', () => {
describe('TOC generation from headings', () => { describe('TOC generation from headings', () => {
test('extracts all heading levels', () => { test('extracts all heading levels', () => {
const html = '<h1>Title</h1><h2>Section 1</h2><h2>Section 2</h2><h3>Subsection</h3>'; const html = '<h1>Title</h1><h2>Section 1</h2><h2>Section 2</h2><h3>Subsection</h3>';
const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi; const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
const toc = []; const toc = [];
let match; let match;
while ((match = headingRegex.exec(html)) !== null) { while ((match = headingRegex.exec(html)) !== null) {
toc.push({ level: parseInt(match[1]), text: match[2] }); toc.push({ level: parseInt(match[1]), text: match[2] });
} }
expect(toc).toHaveLength(4); expect(toc).toHaveLength(4);
expect(toc[0]).toEqual({ level: 1, text: 'Title' }); expect(toc[0]).toEqual({ level: 1, text: 'Title' });
expect(toc[3]).toEqual({ level: 3, text: 'Subsection' }); expect(toc[3]).toEqual({ level: 3, text: 'Subsection' });
});
test('handles empty HTML', () => {
const html = '<p>No headings here</p>';
const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
const toc = [];
let match;
while ((match = headingRegex.exec(html)) !== null) {
toc.push({ level: parseInt(match[1]), text: match[2] });
}
expect(toc).toHaveLength(0);
});
test('handles headings with attributes', () => {
const html = '<h1 id="title" class="main">Title</h1><h2 id="sec">Section</h2>';
const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
const toc = [];
let match;
while ((match = headingRegex.exec(html)) !== null) {
toc.push({ level: parseInt(match[1]), text: match[2] });
}
expect(toc).toHaveLength(2);
expect(toc[0].text).toBe('Title');
});
}); });
describe('Admonition regex matching', () => { test('handles empty HTML', () => {
test('matches note admonition', () => { const html = '<p>No headings here</p>';
const src = ':::note\nThis is a note.\n:::\n'; const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m); const toc = [];
expect(match).not.toBeNull(); let match;
expect(match[1]).toBe('note'); while ((match = headingRegex.exec(html)) !== null) {
expect(match[2].trim()).toBe('This is a note.'); toc.push({ level: parseInt(match[1]), text: match[2] });
}); }
expect(toc).toHaveLength(0);
test('matches all admonition types', () => {
const types = ['note', 'warning', 'tip', 'danger', 'info'];
types.forEach(type => {
const src = `:::${type}\nContent\n:::\n`;
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).not.toBeNull();
expect(match[1]).toBe(type);
});
});
test('does not match invalid admonition type', () => {
const src = ':::custom\nContent\n:::\n';
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).toBeNull();
});
test('captures multiline content', () => {
const src = ':::warning\nLine 1\nLine 2\nLine 3\n:::\n';
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).not.toBeNull();
expect(match[2]).toContain('Line 1');
expect(match[2]).toContain('Line 3');
});
}); });
describe('Admonitions full parsing integration (mocked environment)', () => { test('handles headings with attributes', () => {
const extension = { const html = '<h1 id="title" class="main">Title</h1><h2 id="sec">Section</h2>';
name: 'admonition', const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
level: 'block', const toc = [];
start(src) { return src.match(/^:::(note|warning|tip|danger|info)/m)?.index; }, let match;
tokenizer(src) { while ((match = headingRegex.exec(html)) !== null) {
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m); toc.push({ level: parseInt(match[1]), text: match[2] });
if (match && match.index === 0) { }
const admonitionType = match[1]; expect(toc).toHaveLength(2);
const text = match[2].trim(); expect(toc[0].text).toBe('Title');
const tokens = []; });
this.lexer.blockTokens(text, tokens); });
return {
type: 'admonition', describe('Admonition regex matching', () => {
raw: match[0], test('matches note admonition', () => {
admonitionType, const src = ':::note\nThis is a note.\n:::\n';
text, const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
tokens expect(match).not.toBeNull();
}; expect(match[1]).toBe('note');
} expect(match[2].trim()).toBe('This is a note.');
}, });
renderer(token) {
const icons = { note: '', warning: '⚠', tip: '💡', danger: '🔴', info: '' }; test('matches all admonition types', () => {
const icon = icons[token.admonitionType] || ''; const types = ['note', 'warning', 'tip', 'danger', 'info'];
const inner = this.parser.parse(token.tokens || []); types.forEach((type) => {
return `<div class="admonition admonition-${token.admonitionType}"> const src = `:::${type}\nContent\n:::\n`;
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).not.toBeNull();
expect(match[1]).toBe(type);
});
});
test('does not match invalid admonition type', () => {
const src = ':::custom\nContent\n:::\n';
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).toBeNull();
});
test('captures multiline content', () => {
const src = ':::warning\nLine 1\nLine 2\nLine 3\n:::\n';
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).not.toBeNull();
expect(match[2]).toContain('Line 1');
expect(match[2]).toContain('Line 3');
});
});
describe('Admonitions full parsing integration (mocked environment)', () => {
const extension = {
name: 'admonition',
level: 'block',
start(src) {
return src.match(/^:::(note|warning|tip|danger|info)/m)?.index;
},
tokenizer(src) {
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
if (match && match.index === 0) {
const admonitionType = match[1];
const text = match[2].trim();
const tokens = [];
this.lexer.blockTokens(text, tokens);
return {
type: 'admonition',
raw: match[0],
admonitionType,
text,
tokens,
};
}
},
renderer(token) {
const icons = { note: '', warning: '⚠', tip: '💡', danger: '🔴', info: '' };
const icon = icons[token.admonitionType] || '';
const inner = this.parser.parse(token.tokens || []);
return `<div class="admonition admonition-${token.admonitionType}">
<div class="admonition-title">${icon} ${token.admonitionType.charAt(0).toUpperCase() + token.admonitionType.slice(1)}</div> <div class="admonition-title">${icon} ${token.admonitionType.charAt(0).toUpperCase() + token.admonitionType.slice(1)}</div>
<div class="admonition-content">${inner}</div> <div class="admonition-content">${inner}</div>
</div>`; </div>`;
} },
}; };
test('tokenizer correctly extracts tokens and calls blockTokens', () => { test('tokenizer correctly extracts tokens and calls blockTokens', () => {
const src = ':::note\nThis is a note.\n:::'; const src = ':::note\nThis is a note.\n:::';
const mockLexer = { const mockLexer = {
blockTokens: jest.fn((text, tokens) => { blockTokens: jest.fn((text, tokens) => {
tokens.push({ type: 'text', text }); tokens.push({ type: 'text', text });
}) }),
}; };
const context = { lexer: mockLexer }; const context = { lexer: mockLexer };
const result = extension.tokenizer.call(context, src); const result = extension.tokenizer.call(context, src);
expect(result).toBeDefined(); expect(result).toBeDefined();
expect(result.type).toBe('admonition'); expect(result.type).toBe('admonition');
expect(result.admonitionType).toBe('note'); expect(result.admonitionType).toBe('note');
expect(result.text).toBe('This is a note.'); expect(result.text).toBe('This is a note.');
expect(mockLexer.blockTokens).toHaveBeenCalledWith('This is a note.', expect.any(Array)); expect(mockLexer.blockTokens).toHaveBeenCalledWith('This is a note.', expect.any(Array));
expect(result.tokens).toEqual([{ type: 'text', text: 'This is a note.' }]); expect(result.tokens).toEqual([{ type: 'text', text: 'This is a note.' }]);
});
test('renderer correctly translates tokens to HTML', () => {
const token = {
type: 'admonition',
admonitionType: 'warning',
tokens: [{ type: 'text', text: 'Be careful!' }]
};
const mockParser = {
parse: jest.fn((tokens) => '<p>Be careful!</p>')
};
const context = { parser: mockParser };
const html = extension.renderer.call(context, token);
expect(html).toContain('admonition admonition-warning');
expect(html).toContain('⚠ Warning');
expect(html).toContain('<p>Be careful!</p>');
expect(mockParser.parse).toHaveBeenCalledWith(token.tokens);
});
}); });
describe('PlantUML hex encoding', () => { test('renderer correctly translates tokens to HTML', () => {
const plantumlEncode = (text) => { const token = {
const hex = Array.from(Buffer.from(text, 'utf-8')) type: 'admonition',
.map(b => b.toString(16).padStart(2, '0')) admonitionType: 'warning',
.join(''); tokens: [{ type: 'text', text: 'Be careful!' }],
return '~h' + hex; };
}; const mockParser = {
parse: jest.fn(() => '<p>Be careful!</p>'),
};
const context = { parser: mockParser };
const html = extension.renderer.call(context, token);
test('encodes simple text', () => { expect(html).toContain('admonition admonition-warning');
const encoded = plantumlEncode('A -> B'); expect(html).toContain('⚠ Warning');
expect(encoded).toBe('~h41202d3e2042'); expect(html).toContain('<p>Be careful!</p>');
}); expect(mockParser.parse).toHaveBeenCalledWith(token.tokens);
});
});
test('encodes empty string', () => { describe('PlantUML hex encoding', () => {
expect(plantumlEncode('')).toBe('~h'); const plantumlEncode = (text) => {
}); const hex = Array.from(Buffer.from(text, 'utf-8'))
.map((b) => b.toString(16).padStart(2, '0'))
.join('');
return '~h' + hex;
};
test('encodes special characters', () => { test('encodes simple text', () => {
const encoded = plantumlEncode('@startuml'); const encoded = plantumlEncode('A -> B');
expect(encoded).toMatch(/^~h[0-9a-f]+$/); expect(encoded).toBe('~h41202d3e2042');
// '@' is 0x40, 's' is 0x73
expect(encoded.startsWith('~h40')).toBe(true);
});
}); });
describe('Slug generation for TOC anchors', () => { test('encodes empty string', () => {
const slugify = (text) => { expect(plantumlEncode('')).toBe('~h');
return text
.toLowerCase()
.replace(/[^\w\s-]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
.trim();
};
test('converts heading to slug', () => {
expect(slugify('Hello World')).toBe('hello-world');
});
test('removes special characters', () => {
expect(slugify('What is C++?')).toBe('what-is-c');
});
test('collapses multiple dashes', () => {
expect(slugify('Hello World')).toBe('hello-world');
});
test('handles already lowercase text', () => {
expect(slugify('simple')).toBe('simple');
});
}); });
describe('scopeCSS utility', () => { test('encodes special characters', () => {
const scopeCSS = (cssText, scopeSelector) => { const encoded = plantumlEncode('@startuml');
if (!cssText) return ''; expect(encoded).toMatch(/^~h[0-9a-f]+$/);
return cssText.replace(/([^\r\n,{}]+)(,(?=[^}]*{)|(?=[^{]*{))/g, (match, selector, separator) => { // '@' is 0x40, 's' is 0x73
const trimmed = selector.trim(); expect(encoded.startsWith('~h40')).toBe(true);
if (!trimmed || trimmed.startsWith('@') || trimmed.startsWith(':root') || trimmed.startsWith('from') || trimmed.startsWith('to') || /^\d+%$/.test(trimmed)) {
return match;
}
return scopeSelector + ' ' + trimmed + (separator || '');
});
};
test('scopes standard tag selector', () => {
const css = 'h1 { color: red; }';
const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toBe('.preview-content h1{ color: red; }');
});
test('scopes multiple class selectors', () => {
const css = '.title, .content { font-family: sans-serif; }';
const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toBe('.preview-content .title,.preview-content .content{ font-family: sans-serif; }');
});
test('ignores @rules like @media', () => {
const css = '@media (max-width: 600px) { h1 { color: blue; } }';
const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toContain('@media (max-width: 600px)');
});
test('ignores :root selector', () => {
const css = ':root { --color: red; }';
const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toBe(':root { --color: red; }');
});
test('ignores keyframe percentages', () => {
const css = '0% { opacity: 0; } 100% { opacity: 1; }';
const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toContain('0%');
expect(scoped).toContain('100%');
});
test('handles empty input', () => {
expect(scopeCSS('', '.preview-content')).toBe('');
expect(scopeCSS(null, '.preview-content')).toBe('');
});
}); });
});
describe('Slug generation for TOC anchors', () => {
const slugify = (text) => {
return text
.toLowerCase()
.replace(/[^\w\s-]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
.trim();
};
test('converts heading to slug', () => {
expect(slugify('Hello World')).toBe('hello-world');
});
test('removes special characters', () => {
expect(slugify('What is C++?')).toBe('what-is-c');
});
test('collapses multiple dashes', () => {
expect(slugify('Hello World')).toBe('hello-world');
});
test('handles already lowercase text', () => {
expect(slugify('simple')).toBe('simple');
});
});
describe('scopeCSS utility', () => {
const scopeCSS = (cssText, scopeSelector) => {
if (!cssText) return '';
return cssText.replace(
/([^\r\n,{}]+)(,(?=[^}]*{)|(?=[^{]*{))/g,
(match, selector, separator) => {
const trimmed = selector.trim();
if (
!trimmed ||
trimmed.startsWith('@') ||
trimmed.startsWith(':root') ||
trimmed.startsWith('from') ||
trimmed.startsWith('to') ||
/^\d+%$/.test(trimmed)
) {
return match;
}
return scopeSelector + ' ' + trimmed + (separator || '');
}
);
};
test('scopes standard tag selector', () => {
const css = 'h1 { color: red; }';
const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toBe('.preview-content h1{ color: red; }');
});
test('scopes multiple class selectors', () => {
const css = '.title, .content { font-family: sans-serif; }';
const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toBe(
'.preview-content .title,.preview-content .content{ font-family: sans-serif; }'
);
});
test('ignores @rules like @media', () => {
const css = '@media (max-width: 600px) { h1 { color: blue; } }';
const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toContain('@media (max-width: 600px)');
});
test('ignores :root selector', () => {
const css = ':root { --color: red; }';
const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toBe(':root { --color: red; }');
});
test('ignores keyframe percentages', () => {
const css = '0% { opacity: 0; } 100% { opacity: 1; }';
const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toContain('0%');
expect(scoped).toContain('100%');
});
test('handles empty input', () => {
expect(scopeCSS('', '.preview-content')).toBe('');
expect(scopeCSS(null, '.preview-content')).toBe('');
});
});
}); });
+234 -234
View File
@@ -9,272 +9,272 @@
const { ModalManager } = require('../src/utils/ModalManager'); const { ModalManager } = require('../src/utils/ModalManager');
function createModalElement(id = 'test-modal') { function createModalElement(id = 'test-modal') {
const modal = document.createElement('div'); const modal = document.createElement('div');
modal.id = id; modal.id = id;
modal.className = 'modal hidden'; modal.className = 'modal hidden';
modal.setAttribute('role', 'dialog'); modal.setAttribute('role', 'dialog');
modal.setAttribute('aria-modal', 'true'); modal.setAttribute('aria-modal', 'true');
const backdrop = document.createElement('div'); const backdrop = document.createElement('div');
backdrop.className = 'modal-backdrop'; backdrop.className = 'modal-backdrop';
backdrop.setAttribute('data-close', ''); backdrop.setAttribute('data-close', '');
const content = document.createElement('div'); const content = document.createElement('div');
content.className = 'modal-content'; content.className = 'modal-content';
const header = document.createElement('div'); const header = document.createElement('div');
header.className = 'modal-header'; header.className = 'modal-header';
const closeBtn = document.createElement('button'); const closeBtn = document.createElement('button');
closeBtn.className = 'modal-close'; closeBtn.className = 'modal-close';
closeBtn.setAttribute('aria-label', 'Close'); closeBtn.setAttribute('aria-label', 'Close');
const body = document.createElement('div'); const body = document.createElement('div');
body.className = 'modal-body'; body.className = 'modal-body';
const input = document.createElement('input'); const input = document.createElement('input');
input.type = 'text'; input.type = 'text';
body.appendChild(input); body.appendChild(input);
header.appendChild(closeBtn); header.appendChild(closeBtn);
content.appendChild(header); content.appendChild(header);
content.appendChild(body); content.appendChild(body);
modal.appendChild(backdrop); modal.appendChild(backdrop);
modal.appendChild(content); modal.appendChild(content);
document.body.appendChild(modal); document.body.appendChild(modal);
return modal; return modal;
} }
describe('ModalManager', () => { describe('ModalManager', () => {
let modal; let modal;
let manager; let manager;
beforeEach(() => {
modal = createModalElement();
manager = new ModalManager(modal);
});
afterEach(() => {
manager.destroy();
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
document.body.style.overflow = '';
});
// =========================================================
// open()
// =========================================================
describe('open()', () => {
test('removes hidden class and adds open class', () => {
expect(modal.classList.contains('hidden')).toBe(true);
expect(modal.classList.contains('open')).toBe(false);
manager.open();
expect(modal.classList.contains('hidden')).toBe(false);
expect(modal.classList.contains('open')).toBe(true);
});
test('sets isOpen to true', () => {
expect(manager.isOpen()).toBe(false);
manager.open();
expect(manager.isOpen()).toBe(true);
});
test('prevents body scroll', () => {
manager.open();
expect(document.body.style.overflow).toBe('hidden');
});
test('does not open again if already open', () => {
manager.open();
manager.open(); // second call should be no-op
expect(manager.isOpen()).toBe(true);
});
test('calls onOpen callback', () => {
const onOpen = jest.fn();
manager.destroy();
manager = new ModalManager(modal, { onOpen });
manager.open();
expect(onOpen).toHaveBeenCalledTimes(1);
});
test('dispatches modal:open custom event', () => {
const handler = jest.fn();
modal.addEventListener('modal:open', handler);
manager.open();
expect(handler).toHaveBeenCalledTimes(1);
});
});
// =========================================================
// close()
// =========================================================
describe('close()', () => {
beforeEach(() => { beforeEach(() => {
modal = createModalElement(); manager.open();
manager = new ModalManager(modal);
}); });
afterEach(() => { test('removes open class', () => {
manager.destroy(); expect(modal.classList.contains('open')).toBe(true);
while (document.body.firstChild) { manager.close();
document.body.removeChild(document.body.firstChild); expect(modal.classList.contains('open')).toBe(false);
}
document.body.style.overflow = '';
}); });
// ========================================================= test('sets isOpen to false immediately', () => {
// open() manager.close();
// ========================================================= expect(manager.isOpen()).toBe(false);
describe('open()', () => {
test('removes hidden class and adds open class', () => {
expect(modal.classList.contains('hidden')).toBe(true);
expect(modal.classList.contains('open')).toBe(false);
manager.open();
expect(modal.classList.contains('hidden')).toBe(false);
expect(modal.classList.contains('open')).toBe(true);
});
test('sets isOpen to true', () => {
expect(manager.isOpen()).toBe(false);
manager.open();
expect(manager.isOpen()).toBe(true);
});
test('prevents body scroll', () => {
manager.open();
expect(document.body.style.overflow).toBe('hidden');
});
test('does not open again if already open', () => {
manager.open();
manager.open(); // second call should be no-op
expect(manager.isOpen()).toBe(true);
});
test('calls onOpen callback', () => {
const onOpen = jest.fn();
manager.destroy();
manager = new ModalManager(modal, { onOpen });
manager.open();
expect(onOpen).toHaveBeenCalledTimes(1);
});
test('dispatches modal:open custom event', () => {
const handler = jest.fn();
modal.addEventListener('modal:open', handler);
manager.open();
expect(handler).toHaveBeenCalledTimes(1);
});
}); });
// ========================================================= test('restores body scroll when no modals remain open', () => {
// close() manager.close();
// ========================================================= expect(document.body.style.overflow).toBe('');
describe('close()', () => {
beforeEach(() => {
manager.open();
});
test('removes open class', () => {
expect(modal.classList.contains('open')).toBe(true);
manager.close();
expect(modal.classList.contains('open')).toBe(false);
});
test('sets isOpen to false immediately', () => {
manager.close();
expect(manager.isOpen()).toBe(false);
});
test('restores body scroll when no modals remain open', () => {
manager.close();
expect(document.body.style.overflow).toBe('');
});
test('adds hidden class after transitionend event fires', () => {
manager.close();
// Immediately after close(): hidden should NOT yet be added —
// the close animation is still in progress.
// (This is the bug that existed before the fix.)
expect(modal.classList.contains('hidden')).toBe(false);
// Simulate the CSS transition completing
const event = new Event('transitionend');
Object.defineProperty(event, 'target', { value: modal, writable: false });
modal.dispatchEvent(event);
expect(modal.classList.contains('hidden')).toBe(true);
});
test('adds hidden class via 250ms timeout fallback when transitionend never fires', () => {
jest.useFakeTimers();
manager.close();
expect(modal.classList.contains('hidden')).toBe(false);
// Advance past the fallback timeout (250ms)
jest.advanceTimersByTime(300);
expect(modal.classList.contains('hidden')).toBe(true);
jest.useRealTimers();
});
test('does not add hidden class if modal is reopened before timeout fires', () => {
jest.useFakeTimers();
manager.close();
jest.advanceTimersByTime(100); // halfway through timeout
// Re-open the modal before the timeout fires
manager.open();
jest.advanceTimersByTime(200); // past original timeout expiry
// Modal was reopened, so hidden must NOT have been added
expect(modal.classList.contains('hidden')).toBe(false);
expect(modal.classList.contains('open')).toBe(true);
jest.useRealTimers();
});
test('calls onClose callback', () => {
const onClose = jest.fn();
manager.destroy();
manager = new ModalManager(modal, { onClose });
manager.open();
manager.close();
expect(onClose).toHaveBeenCalledTimes(1);
});
test('dispatches modal:close custom event', () => {
const handler = jest.fn();
modal.addEventListener('modal:close', handler);
manager.close();
expect(handler).toHaveBeenCalledTimes(1);
});
test('is a no-op when modal is already closed', () => {
manager.close(); // close from open
const onClose = jest.fn();
manager.destroy();
manager = new ModalManager(modal, { onClose });
manager.close(); // call close on an already-closed modal
expect(onClose).not.toHaveBeenCalled();
});
}); });
// ========================================================= test('adds hidden class after transitionend event fires', () => {
// Keyboard interaction manager.close();
// =========================================================
describe('keyboard shortcuts', () => { // Immediately after close(): hidden should NOT yet be added —
test('Escape key closes an open modal', () => { // the close animation is still in progress.
manager.open(); // (This is the bug that existed before the fix.)
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })); expect(modal.classList.contains('hidden')).toBe(false);
expect(manager.isOpen()).toBe(false);
});
test('Escape key does nothing when modal is already closed', () => { // Simulate the CSS transition completing
expect(() => { const event = new Event('transitionend');
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })); Object.defineProperty(event, 'target', { value: modal, writable: false });
}).not.toThrow(); modal.dispatchEvent(event);
});
test('closeOnEscape: false prevents Escape from closing', () => { expect(modal.classList.contains('hidden')).toBe(true);
manager.destroy();
manager = new ModalManager(modal, { closeOnEscape: false });
manager.open();
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
expect(manager.isOpen()).toBe(true);
});
}); });
// ========================================================= test('adds hidden class via 250ms timeout fallback when transitionend never fires', () => {
// Close triggers jest.useFakeTimers();
// =========================================================
describe('close triggers', () => { manager.close();
test('clicking the × close button closes the modal', () => { expect(modal.classList.contains('hidden')).toBe(false);
manager.open();
modal.querySelector('.modal-close').click();
expect(manager.isOpen()).toBe(false);
});
test('clicking backdrop (data-close) closes the modal', () => { // Advance past the fallback timeout (250ms)
manager.open(); jest.advanceTimersByTime(300);
modal.querySelector('.modal-backdrop').click();
expect(manager.isOpen()).toBe(false);
});
test('closeOnBackdrop: false prevents backdrop from closing', () => { expect(modal.classList.contains('hidden')).toBe(true);
manager.destroy();
manager = new ModalManager(modal, { closeOnBackdrop: false }); jest.useRealTimers();
manager.open();
modal.querySelector('.modal-backdrop').click();
expect(manager.isOpen()).toBe(true);
});
}); });
// ========================================================= test('does not add hidden class if modal is reopened before timeout fires', () => {
// destroy() jest.useFakeTimers();
// =========================================================
describe('destroy()', () => { manager.close();
test('closes modal if open', () => { jest.advanceTimersByTime(100); // halfway through timeout
manager.open();
manager.destroy();
expect(manager.isOpen()).toBe(false);
});
test('does not throw when destroying a closed modal', () => { // Re-open the modal before the timeout fires
expect(() => manager.destroy()).not.toThrow(); manager.open();
});
jest.advanceTimersByTime(200); // past original timeout expiry
// Modal was reopened, so hidden must NOT have been added
expect(modal.classList.contains('hidden')).toBe(false);
expect(modal.classList.contains('open')).toBe(true);
jest.useRealTimers();
}); });
test('calls onClose callback', () => {
const onClose = jest.fn();
manager.destroy();
manager = new ModalManager(modal, { onClose });
manager.open();
manager.close();
expect(onClose).toHaveBeenCalledTimes(1);
});
test('dispatches modal:close custom event', () => {
const handler = jest.fn();
modal.addEventListener('modal:close', handler);
manager.close();
expect(handler).toHaveBeenCalledTimes(1);
});
test('is a no-op when modal is already closed', () => {
manager.close(); // close from open
const onClose = jest.fn();
manager.destroy();
manager = new ModalManager(modal, { onClose });
manager.close(); // call close on an already-closed modal
expect(onClose).not.toHaveBeenCalled();
});
});
// =========================================================
// Keyboard interaction
// =========================================================
describe('keyboard shortcuts', () => {
test('Escape key closes an open modal', () => {
manager.open();
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
expect(manager.isOpen()).toBe(false);
});
test('Escape key does nothing when modal is already closed', () => {
expect(() => {
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
}).not.toThrow();
});
test('closeOnEscape: false prevents Escape from closing', () => {
manager.destroy();
manager = new ModalManager(modal, { closeOnEscape: false });
manager.open();
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
expect(manager.isOpen()).toBe(true);
});
});
// =========================================================
// Close triggers
// =========================================================
describe('close triggers', () => {
test('clicking the × close button closes the modal', () => {
manager.open();
modal.querySelector('.modal-close').click();
expect(manager.isOpen()).toBe(false);
});
test('clicking backdrop (data-close) closes the modal', () => {
manager.open();
modal.querySelector('.modal-backdrop').click();
expect(manager.isOpen()).toBe(false);
});
test('closeOnBackdrop: false prevents backdrop from closing', () => {
manager.destroy();
manager = new ModalManager(modal, { closeOnBackdrop: false });
manager.open();
modal.querySelector('.modal-backdrop').click();
expect(manager.isOpen()).toBe(true);
});
});
// =========================================================
// destroy()
// =========================================================
describe('destroy()', () => {
test('closes modal if open', () => {
manager.open();
manager.destroy();
expect(manager.isOpen()).toBe(false);
});
test('does not throw when destroying a closed modal', () => {
expect(() => manager.destroy()).not.toThrow();
});
});
}); });
+19
View File
@@ -0,0 +1,19 @@
/**
* Tests ensuring production code does not contain leftover diagnostic console.log statements.
*/
const fs = require('fs');
const path = require('path');
describe('No leftover diagnostic console.log statements', () => {
const rootDir = path.resolve(__dirname, '..');
const filesToCheck = ['src/main.js', 'src/renderer.js'];
filesToCheck.forEach((relativePath) => {
test(`${relativePath} has no console.log statements`, () => {
const content = fs.readFileSync(path.join(rootDir, relativePath), 'utf8');
const matches = content.match(/console\.log\(/g) || [];
expect(matches).toHaveLength(0);
});
});
});
+2 -5
View File
@@ -8,7 +8,6 @@ describe('PDFOperations Utilities', () => {
describe('page range parsing', () => { describe('page range parsing', () => {
it('should parse single page numbers', () => { it('should parse single page numbers', () => {
// Test logic: parsing "1" should extract page index 0 // Test logic: parsing "1" should extract page index 0
const input = '1';
const pages = [0]; // Parsed result const pages = [0]; // Parsed result
expect(pages.length).toBe(1); expect(pages.length).toBe(1);
@@ -17,7 +16,6 @@ describe('PDFOperations Utilities', () => {
it('should parse page ranges', () => { it('should parse page ranges', () => {
// Test logic: parsing "1-3" should extract pages 0, 1, 2 // Test logic: parsing "1-3" should extract pages 0, 1, 2
const input = '1-3';
const pages = [0, 1, 2]; // Expected result const pages = [0, 1, 2]; // Expected result
expect(pages.length).toBe(3); expect(pages.length).toBe(3);
@@ -26,7 +24,6 @@ describe('PDFOperations Utilities', () => {
it('should handle multiple ranges', () => { it('should handle multiple ranges', () => {
// Test logic: parsing "1-2,4-5" should extract pages 0,1,3,4 // Test logic: parsing "1-2,4-5" should extract pages 0,1,3,4
const input = '1-2,4-5';
const pages = [0, 1, 3, 4]; // Expected result const pages = [0, 1, 3, 4]; // Expected result
expect(pages.length).toBe(4); expect(pages.length).toBe(4);
@@ -52,7 +49,7 @@ describe('PDFOperations Utilities', () => {
it('should detect invalid hex colors', () => { it('should detect invalid hex colors', () => {
const invalidColors = ['#GG5733', '#12345', 'notahex']; const invalidColors = ['#GG5733', '#12345', 'notahex'];
invalidColors.forEach(color => { invalidColors.forEach((color) => {
const isValid = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.test(color); const isValid = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.test(color);
expect(isValid).toBe(false); expect(isValid).toBe(false);
}); });
@@ -73,7 +70,7 @@ describe('PDFOperations Utilities', () => {
{ input: '-1', isValid: false }, { input: '-1', isValid: false },
{ input: 'abc', isValid: false }, { input: 'abc', isValid: false },
{ input: '1', isValid: true }, { input: '1', isValid: true },
{ input: '5', isValid: true } { input: '5', isValid: true },
]; ];
testPages.forEach(({ input, isValid }) => { testPages.forEach(({ input, isValid }) => {
+15 -4
View File
@@ -13,9 +13,14 @@ describe('PluginContext', () => {
statusBar: { registerIndicator: jest.fn() }, statusBar: { registerIndicator: jest.fn() },
eventBus: new EventBus(), eventBus: new EventBus(),
settings: { get: jest.fn(), set: jest.fn(), onChanged: jest.fn() }, settings: { get: jest.fn(), set: jest.fn(), onChanged: jest.fn() },
editor: { getContent: jest.fn(), getSelection: jest.fn(), insertAtCursor: jest.fn(), onContentChanged: jest.fn() }, editor: {
getContent: jest.fn(),
getSelection: jest.fn(),
insertAtCursor: jest.fn(),
onContentChanged: jest.fn(),
},
ipc: { invoke: jest.fn(), on: jest.fn() }, ipc: { invoke: jest.fn(), on: jest.fn() },
exportHooks: { preHooks: [], postHooks: [] } exportHooks: { preHooks: [], postHooks: [] },
}; };
context = new PluginContext(mockDeps); context = new PluginContext(mockDeps);
}); });
@@ -23,11 +28,17 @@ describe('PluginContext', () => {
test('exposes sidebar.registerPanel with namespaced id', () => { test('exposes sidebar.registerPanel with namespaced id', () => {
const handler = jest.fn(); const handler = jest.fn();
context.sidebar.registerPanel('my-panel', { icon: 'test', title: 'Test', render: handler }); context.sidebar.registerPanel('my-panel', { icon: 'test', title: 'Test', render: handler });
expect(mockDeps.sidebar.registerPanel).toHaveBeenCalledWith('test-plugin:my-panel', { icon: 'test', title: 'Test', render: handler }); expect(mockDeps.sidebar.registerPanel).toHaveBeenCalledWith('test-plugin:my-panel', {
icon: 'test',
title: 'Test',
render: handler,
});
}); });
test('exposes commands.register with crash-safe wrapper', () => { test('exposes commands.register with crash-safe wrapper', () => {
const badHandler = () => { throw new Error('boom'); }; const badHandler = () => {
throw new Error('boom');
};
context.commands.register('bad-cmd', 'Bad', badHandler, 'Ctrl+Alt+T'); context.commands.register('bad-cmd', 'Bad', badHandler, 'Ctrl+Alt+T');
const registeredHandler = mockDeps.commands.register.mock.calls[0][2]; const registeredHandler = mockDeps.commands.register.mock.calls[0][2];
expect(() => registeredHandler()).not.toThrow(); expect(() => registeredHandler()).not.toThrow();
+21 -7
View File
@@ -25,7 +25,7 @@ describe('PluginLoader', () => {
id: 'my-plugin', id: 'my-plugin',
name: 'My Plugin', name: 'My Plugin',
version: '1.0.0', version: '1.0.0',
description: 'Test' description: 'Test',
}); });
const loader = new PluginLoader([tempDir]); const loader = new PluginLoader([tempDir]);
const plugins = loader.discoverPlugins(); const plugins = loader.discoverPlugins();
@@ -46,7 +46,7 @@ describe('PluginLoader', () => {
id: 'test-plugin', id: 'test-plugin',
name: 'Test Plugin', name: 'Test Plugin',
version: '1.0.0', version: '1.0.0',
description: 'A test plugin' description: 'A test plugin',
}; };
const loader = new PluginLoader([]); const loader = new PluginLoader([]);
expect(loader.validateManifest(manifest)).toBe(true); expect(loader.validateManifest(manifest)).toBe(true);
@@ -67,18 +67,32 @@ describe('PluginLoader', () => {
test('validateManifest — rejects manifest with duplicate id', () => { test('validateManifest — rejects manifest with duplicate id', () => {
const loader = new PluginLoader([]); const loader = new PluginLoader([]);
loader.loadedIds = new Set(['existing-plugin']); loader.loadedIds = new Set(['existing-plugin']);
expect(() => loader.validateManifest({ id: 'existing-plugin', name: 'Dup', version: '1.0.0', description: 'x' })) expect(() =>
.toThrow(/duplicate/i); loader.validateManifest({
id: 'existing-plugin',
name: 'Dup',
version: '1.0.0',
description: 'x',
})
).toThrow(/duplicate/i);
}); });
test('discoverPlugins — loads index.js Plugin export if present', () => { test('discoverPlugins — loads index.js Plugin export if present', () => {
const pluginDir = path.join(tempDir, 'with-index'); const pluginDir = path.join(tempDir, 'with-index');
writeManifest(pluginDir, { id: 'with-index', name: 'With Index', version: '1.0.0', description: 'Test' }); writeManifest(pluginDir, {
id: 'with-index',
name: 'With Index',
version: '1.0.0',
description: 'Test',
});
// Write a simple index.js with a Plugin export // Write a simple index.js with a Plugin export
fs.writeFileSync(path.join(pluginDir, 'index.js'), ` fs.writeFileSync(
path.join(pluginDir, 'index.js'),
`
class SimplePlugin { init() {} } class SimplePlugin { init() {} }
module.exports = { Plugin: SimplePlugin }; module.exports = { Plugin: SimplePlugin };
`); `
);
const loader = new PluginLoader([tempDir]); const loader = new PluginLoader([tempDir]);
const plugins = loader.discoverPlugins(); const plugins = loader.discoverPlugins();
expect(plugins).toHaveLength(1); expect(plugins).toHaveLength(1);
+86 -17
View File
@@ -3,9 +3,16 @@ const { PluginAPI } = require('../src/plugins/plugin-api');
const { EventBus } = require('../src/plugins/event-bus'); const { EventBus } = require('../src/plugins/event-bus');
class TestPlugin extends PluginAPI { class TestPlugin extends PluginAPI {
init(context) { this.initialized = true; this.ctx = context; } init(context) {
activate() { this.activated = true; } this.initialized = true;
deactivate() { this.deactivated = true; } this.ctx = context;
}
activate() {
this.activated = true;
}
deactivate() {
this.deactivated = true;
}
} }
describe('PluginRegistry', () => { describe('PluginRegistry', () => {
@@ -19,16 +26,26 @@ describe('PluginRegistry', () => {
statusBar: { registerIndicator: jest.fn() }, statusBar: { registerIndicator: jest.fn() },
eventBus: new EventBus(), eventBus: new EventBus(),
settings: { get: jest.fn(), set: jest.fn(), onChanged: jest.fn() }, settings: { get: jest.fn(), set: jest.fn(), onChanged: jest.fn() },
editor: { getContent: jest.fn(() => ''), getSelection: jest.fn(() => ''), insertAtCursor: jest.fn(), onContentChanged: jest.fn() }, editor: {
ipc: { invoke: jest.fn(), on: jest.fn() } getContent: jest.fn(() => ''),
getSelection: jest.fn(() => ''),
insertAtCursor: jest.fn(),
onContentChanged: jest.fn(),
},
ipc: { invoke: jest.fn(), on: jest.fn() },
}; };
registry = new PluginRegistry(mockDeps); registry = new PluginRegistry(mockDeps);
}); });
test('register — stores plugin and calls init', () => { test('register — stores plugin and calls init', () => {
registry.register({ registry.register({
id: 'test', name: 'Test', version: '1.0.0', description: 'desc', id: 'test',
manifest: {}, PluginClass: TestPlugin, dir: '/tmp/test' name: 'Test',
version: '1.0.0',
description: 'desc',
manifest: {},
PluginClass: TestPlugin,
dir: '/tmp/test',
}); });
const entry = registry.getPlugin('test'); const entry = registry.getPlugin('test');
expect(entry).toBeDefined(); expect(entry).toBeDefined();
@@ -37,20 +54,32 @@ describe('PluginRegistry', () => {
test('register — works without PluginClass', () => { test('register — works without PluginClass', () => {
registry.register({ registry.register({
id: 'manifest-only', name: 'Manifest Only', version: '1.0.0', description: 'desc', id: 'manifest-only',
manifest: {}, PluginClass: null, dir: '/tmp/test' name: 'Manifest Only',
version: '1.0.0',
description: 'desc',
manifest: {},
PluginClass: null,
dir: '/tmp/test',
}); });
expect(registry.getPlugin('manifest-only')).toBeDefined(); expect(registry.getPlugin('manifest-only')).toBeDefined();
}); });
test('register — init error does not crash, plugin not registered', () => { test('register — init error does not crash, plugin not registered', () => {
class BadPlugin extends PluginAPI { class BadPlugin extends PluginAPI {
init() { throw new Error('init fail'); } init() {
throw new Error('init fail');
}
} }
expect(() => { expect(() => {
registry.register({ registry.register({
id: 'bad', name: 'Bad', version: '1.0.0', description: 'desc', id: 'bad',
manifest: {}, PluginClass: BadPlugin, dir: '/tmp/test' name: 'Bad',
version: '1.0.0',
description: 'desc',
manifest: {},
PluginClass: BadPlugin,
dir: '/tmp/test',
}); });
}).not.toThrow(); }).not.toThrow();
expect(registry.getPlugin('bad')).toBeUndefined(); expect(registry.getPlugin('bad')).toBeUndefined();
@@ -61,25 +90,65 @@ describe('PluginRegistry', () => {
}); });
test('getAll — returns all registered plugins', () => { test('getAll — returns all registered plugins', () => {
registry.register({ id: 'a', name: 'A', version: '1', description: '', manifest: {}, PluginClass: null, dir: '' }); registry.register({
registry.register({ id: 'b', name: 'B', version: '1', description: '', manifest: {}, PluginClass: null, dir: '' }); id: 'a',
name: 'A',
version: '1',
description: '',
manifest: {},
PluginClass: null,
dir: '',
});
registry.register({
id: 'b',
name: 'B',
version: '1',
description: '',
manifest: {},
PluginClass: null,
dir: '',
});
expect(registry.getAll()).toHaveLength(2); expect(registry.getAll()).toHaveLength(2);
}); });
test('activate — calls activate on plugin instance', () => { test('activate — calls activate on plugin instance', () => {
registry.register({ id: 'test', name: 'Test', version: '1', description: '', manifest: {}, PluginClass: TestPlugin, dir: '' }); registry.register({
id: 'test',
name: 'Test',
version: '1',
description: '',
manifest: {},
PluginClass: TestPlugin,
dir: '',
});
registry.activate('test'); registry.activate('test');
expect(registry.getPlugin('test').instance.activated).toBe(true); expect(registry.getPlugin('test').instance.activated).toBe(true);
}); });
test('deactivate — calls deactivate on plugin instance', () => { test('deactivate — calls deactivate on plugin instance', () => {
registry.register({ id: 'test', name: 'Test', version: '1', description: '', manifest: {}, PluginClass: TestPlugin, dir: '' }); registry.register({
id: 'test',
name: 'Test',
version: '1',
description: '',
manifest: {},
PluginClass: TestPlugin,
dir: '',
});
registry.deactivate('test'); registry.deactivate('test');
expect(registry.getPlugin('test').instance.deactivated).toBe(true); expect(registry.getPlugin('test').instance.deactivated).toBe(true);
}); });
test('exportHooks are available and populated', () => { test('exportHooks are available and populated', () => {
registry.register({ id: 'test', name: 'Test', version: '1', description: '', manifest: {}, PluginClass: TestPlugin, dir: '' }); registry.register({
id: 'test',
name: 'Test',
version: '1',
description: '',
manifest: {},
PluginClass: TestPlugin,
dir: '',
});
const handler = jest.fn(); const handler = jest.fn();
registry.getPlugin('test').instance.ctx.exports.registerPreHook(handler); registry.getPlugin('test').instance.ctx.exports.registerPreHook(handler);
expect(registry.exportHooks.preHooks).toContain(handler); expect(registry.exportHooks.preHooks).toContain(handler);
+2 -2
View File
@@ -74,7 +74,7 @@ describe('Preload Security', () => {
'execute-code', 'execute-code',
'show-pdf-editor-from-toolbar', 'show-pdf-editor-from-toolbar',
'menu-open', 'menu-open',
'export' 'export',
]; ];
const EXPECTED_RECEIVE_CHANNELS = [ const EXPECTED_RECEIVE_CHANNELS = [
@@ -127,7 +127,7 @@ describe('Preload Security', () => {
'load-template-menu', 'load-template-menu',
'toggle-command-palette', 'toggle-command-palette',
'toggle-sidebar-panel', 'toggle-sidebar-panel',
'toggle-bottom-panel' 'toggle-bottom-panel',
]; ];
test('should define all expected send channels', () => { test('should define all expected send channels', () => {
+82 -70
View File
@@ -8,13 +8,17 @@
*/ */
describe('PrintPreview', () => { describe('PrintPreview', () => {
beforeEach(() => { beforeEach(() => {
// Mock electron require for executePrint // Mock electron require for executePrint
jest.mock('electron', () => ({ jest.mock(
ipcRenderer: { send: jest.fn(), invoke: jest.fn() } 'electron',
}), { virtual: true }); () => ({
ipcRenderer: { send: jest.fn(), invoke: jest.fn() },
}),
{ virtual: true }
);
document.body.innerHTML = ` document.body.innerHTML = `
<div class="dialog-overlay hidden" id="print-preview-overlay"> <div class="dialog-overlay hidden" id="print-preview-overlay">
<button id="print-preview-close"></button> <button id="print-preview-close"></button>
<button id="print-cancel"></button> <button id="print-cancel"></button>
@@ -31,79 +35,87 @@ describe('PrintPreview', () => {
<iframe id="print-preview-frame"></iframe> <iframe id="print-preview-frame"></iframe>
</div> </div>
`; `;
}); });
test('getOptions returns default values', () => { test('getOptions returns default values', () => {
const { PrintPreview } = require('../src/print-preview'); const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview(); const preview = new PrintPreview();
const options = preview.getOptions(); const options = preview.getOptions();
expect(options.paperSize).toBe('A4'); expect(options.paperSize).toBe('A4');
expect(options.orientation).toBe('portrait'); expect(options.orientation).toBe('portrait');
expect(options.scale).toBe(100); expect(options.scale).toBe(100);
expect(options.headers).toBe(true); expect(options.headers).toBe(true);
expect(options.background).toBe(true); expect(options.background).toBe(true);
expect(options.pages).toBe('all'); expect(options.pages).toBe('all');
expect(options.margins).toBe('default'); expect(options.margins).toBe('default');
expect(options.pageRange).toBe(''); expect(options.pageRange).toBe('');
}); });
test('opens and closes', () => { test('opens and closes', () => {
const { PrintPreview } = require('../src/print-preview'); const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview(); const preview = new PrintPreview();
preview.open('<p>Test</p>'); preview.open('<p>Test</p>');
expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(false); expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(
preview.close(); false
expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(true); );
}); preview.close();
expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(
true
);
});
test('updateScaleLabel reflects slider value', () => { test('updateScaleLabel reflects slider value', () => {
const { PrintPreview } = require('../src/print-preview'); const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview(); const preview = new PrintPreview();
document.getElementById('print-scale').value = '75'; document.getElementById('print-scale').value = '75';
preview.updateScaleLabel(); preview.updateScaleLabel();
expect(document.getElementById('print-scale-value').textContent).toBe('75%'); expect(document.getElementById('print-scale-value').textContent).toBe('75%');
}); });
test('close button closes preview', () => { test('close button closes preview', () => {
const { PrintPreview } = require('../src/print-preview'); const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview(); const preview = new PrintPreview();
preview.open('<p>Test</p>'); preview.open('<p>Test</p>');
document.getElementById('print-preview-close').click(); document.getElementById('print-preview-close').click();
expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(true); expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(
}); true
);
});
test('cancel button closes preview', () => { test('cancel button closes preview', () => {
const { PrintPreview } = require('../src/print-preview'); const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview(); const preview = new PrintPreview();
preview.open('<p>Test</p>'); preview.open('<p>Test</p>');
document.getElementById('print-cancel').click(); document.getElementById('print-cancel').click();
expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(true); expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(
}); true
);
});
test('getOptions reflects changed values', () => { test('getOptions reflects changed values', () => {
const { PrintPreview } = require('../src/print-preview'); const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview(); const preview = new PrintPreview();
// Change paper size to Letter // Change paper size to Letter
const paperSelect = document.getElementById('print-paper-size'); const paperSelect = document.getElementById('print-paper-size');
paperSelect.value = 'Letter'; paperSelect.value = 'Letter';
// Change scale // Change scale
document.getElementById('print-scale').value = '50'; document.getElementById('print-scale').value = '50';
// Uncheck headers // Uncheck headers
document.getElementById('print-headers').checked = false; document.getElementById('print-headers').checked = false;
const options = preview.getOptions(); const options = preview.getOptions();
expect(options.paperSize).toBe('Letter'); expect(options.paperSize).toBe('Letter');
expect(options.scale).toBe(50); expect(options.scale).toBe(50);
expect(options.headers).toBe(false); expect(options.headers).toBe(false);
}); });
test('stores last content for refresh', () => { test('stores last content for refresh', () => {
const { PrintPreview } = require('../src/print-preview'); const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview(); const preview = new PrintPreview();
preview.open('<p>Hello World</p>'); preview.open('<p>Hello World</p>');
expect(preview._lastContent).toBe('<p>Hello World</p>'); expect(preview._lastContent).toBe('<p>Hello World</p>');
}); });
}); });
+47 -19
View File
@@ -8,15 +8,22 @@ describe('ProjectManager', () => {
files = {}; files = {};
pm = new ProjectManager({ pm = new ProjectManager({
readFile: (p) => files[p] || null, readFile: (p) => files[p] || null,
writeFile: (p, c) => { files[p] = c; }, writeFile: (p, c) => {
files[p] = c;
},
fileExists: (p) => p in files, fileExists: (p) => p in files,
listDir: (p) => Object.keys(files).filter(f => f.startsWith(p)).map(f => f.slice(p.length + 1)) listDir: (p) =>
Object.keys(files)
.filter((f) => f.startsWith(p))
.map((f) => f.slice(p.length + 1)),
}); });
}); });
test('createProject writes .project.json', () => { test('createProject writes .project.json', () => {
const project = pm.createProject('/manuscripts/novel', { const project = pm.createProject('/manuscripts/novel', {
title: 'My Novel', type: 'manuscript', targetWords: 80000 title: 'My Novel',
type: 'manuscript',
targetWords: 80000,
}); });
expect(project.title).toBe('My Novel'); expect(project.title).toBe('My Novel');
expect(files['/manuscripts/novel/.project.json']).toBeDefined(); expect(files['/manuscripts/novel/.project.json']).toBeDefined();
@@ -26,8 +33,11 @@ describe('ProjectManager', () => {
test('loadProject reads and returns project data', () => { test('loadProject reads and returns project data', () => {
files['/manuscripts/novel/.project.json'] = JSON.stringify({ files['/manuscripts/novel/.project.json'] = JSON.stringify({
title: 'Test', type: 'manuscript', target: { words: 50000 }, title: 'Test',
chapters: [], metadata: {} type: 'manuscript',
target: { words: 50000 },
chapters: [],
metadata: {},
}); });
const project = pm.loadProject('/manuscripts/novel'); const project = pm.loadProject('/manuscripts/novel');
expect(project.title).toBe('Test'); expect(project.title).toBe('Test');
@@ -39,10 +49,17 @@ describe('ProjectManager', () => {
test('addChapter appends chapter and saves', () => { test('addChapter appends chapter and saves', () => {
files['/manuscripts/novel/.project.json'] = JSON.stringify({ files['/manuscripts/novel/.project.json'] = JSON.stringify({
title: 'Test', type: 'manuscript', target: { words: 50000 }, title: 'Test',
chapters: [], metadata: {} type: 'manuscript',
target: { words: 50000 },
chapters: [],
metadata: {},
});
pm.addChapter('/manuscripts/novel', {
file: '01-chapter.md',
title: 'Chapter One',
status: 'draft',
}); });
pm.addChapter('/manuscripts/novel', { file: '01-chapter.md', title: 'Chapter One', status: 'draft' });
const parsed = JSON.parse(files['/manuscripts/novel/.project.json']); const parsed = JSON.parse(files['/manuscripts/novel/.project.json']);
expect(parsed.chapters.length).toBe(1); expect(parsed.chapters.length).toBe(1);
expect(parsed.chapters[0].title).toBe('Chapter One'); expect(parsed.chapters[0].title).toBe('Chapter One');
@@ -50,11 +67,14 @@ describe('ProjectManager', () => {
test('compileManuscript concatenates chapter files', () => { test('compileManuscript concatenates chapter files', () => {
files['/manuscripts/novel/.project.json'] = JSON.stringify({ files['/manuscripts/novel/.project.json'] = JSON.stringify({
title: 'Test', type: 'manuscript', target: { words: 50000 }, title: 'Test',
type: 'manuscript',
target: { words: 50000 },
chapters: [ chapters: [
{ file: '01.md', title: 'One', status: 'draft' }, { file: '01.md', title: 'One', status: 'draft' },
{ file: '02.md', title: 'Two', status: 'draft' } { file: '02.md', title: 'Two', status: 'draft' },
], metadata: {} ],
metadata: {},
}); });
files['/manuscripts/novel/01.md'] = 'First chapter content.'; files['/manuscripts/novel/01.md'] = 'First chapter content.';
files['/manuscripts/novel/02.md'] = 'Second chapter content.'; files['/manuscripts/novel/02.md'] = 'Second chapter content.';
@@ -64,11 +84,14 @@ describe('ProjectManager', () => {
test('compileManuscript skips missing files', () => { test('compileManuscript skips missing files', () => {
files['/manuscripts/novel/.project.json'] = JSON.stringify({ files['/manuscripts/novel/.project.json'] = JSON.stringify({
title: 'Test', type: 'manuscript', target: { words: 50000 }, title: 'Test',
type: 'manuscript',
target: { words: 50000 },
chapters: [ chapters: [
{ file: '01.md', title: 'One', status: 'draft' }, { file: '01.md', title: 'One', status: 'draft' },
{ file: '02.md', title: 'Two', status: 'draft' } { file: '02.md', title: 'Two', status: 'draft' },
], metadata: {} ],
metadata: {},
}); });
files['/manuscripts/novel/01.md'] = 'Only chapter one.'; files['/manuscripts/novel/01.md'] = 'Only chapter one.';
const result = pm.compileManuscript('/manuscripts/novel'); const result = pm.compileManuscript('/manuscripts/novel');
@@ -77,11 +100,14 @@ describe('ProjectManager', () => {
test('getStats returns total word count across chapters', () => { test('getStats returns total word count across chapters', () => {
files['/manuscripts/novel/.project.json'] = JSON.stringify({ files['/manuscripts/novel/.project.json'] = JSON.stringify({
title: 'Test', type: 'manuscript', target: { words: 50000 }, title: 'Test',
type: 'manuscript',
target: { words: 50000 },
chapters: [ chapters: [
{ file: '01.md', title: 'One', status: 'draft' }, { file: '01.md', title: 'One', status: 'draft' },
{ file: '02.md', title: 'Two', status: 'draft' } { file: '02.md', title: 'Two', status: 'draft' },
], metadata: {} ],
metadata: {},
}); });
files['/manuscripts/novel/01.md'] = 'word '.repeat(100).trim(); files['/manuscripts/novel/01.md'] = 'word '.repeat(100).trim();
files['/manuscripts/novel/02.md'] = 'more '.repeat(50).trim(); files['/manuscripts/novel/02.md'] = 'more '.repeat(50).trim();
@@ -94,9 +120,11 @@ describe('ProjectManager', () => {
test('updateChapter modifies a chapter by index', () => { test('updateChapter modifies a chapter by index', () => {
files['/manuscripts/novel/.project.json'] = JSON.stringify({ files['/manuscripts/novel/.project.json'] = JSON.stringify({
title: 'Test', type: 'manuscript', target: { words: 50000 }, title: 'Test',
type: 'manuscript',
target: { words: 50000 },
chapters: [{ file: '01.md', title: 'Old Title', status: 'draft' }], chapters: [{ file: '01.md', title: 'Old Title', status: 'draft' }],
metadata: {} metadata: {},
}); });
pm.updateChapter('/manuscripts/novel', 0, { title: 'New Title', status: 'revised' }); pm.updateChapter('/manuscripts/novel', 0, { title: 'New Title', status: 'revised' });
const parsed = JSON.parse(files['/manuscripts/novel/.project.json']); const parsed = JSON.parse(files['/manuscripts/novel/.project.json']);
+21
View File
@@ -0,0 +1,21 @@
/**
* Tests for project metadata consistency
*/
const fs = require('fs');
const path = require('path');
describe('Project version consistency', () => {
const rootDir = path.resolve(__dirname, '..');
const packageJson = JSON.parse(fs.readFileSync(path.join(rootDir, 'package.json'), 'utf8'));
const readme = fs.readFileSync(path.join(rootDir, 'README.md'), 'utf8');
test('README version matches package.json version', () => {
const version = packageJson.version;
expect(readme).toContain(`v${version}`);
});
test('README contains current version string', () => {
expect(readme).toContain(`v${packageJson.version}`);
});
});
+9 -26
View File
@@ -8,25 +8,18 @@ const path = require('path');
describe('Security: Path Handling', () => { describe('Security: Path Handling', () => {
describe('path traversal prevention', () => { describe('path traversal prevention', () => {
it('should detect path traversal patterns', () => { it('should detect path traversal patterns', () => {
const maliciousPaths = [ const maliciousPaths = ['../etc/passwd', '../../sensitive', './../outside'];
'../etc/passwd',
'../../sensitive',
'./../outside'
];
maliciousPaths.forEach(pathStr => { maliciousPaths.forEach((pathStr) => {
// Path traversal attempts contain .. patterns // Path traversal attempts contain .. patterns
expect(pathStr).toMatch(/\.\./); expect(pathStr).toMatch(/\.\./);
}); });
}); });
it('should normalize relative paths safely', () => { it('should normalize relative paths safely', () => {
const safePaths = [ const safePaths = ['./documents/file.md', 'relative/path/file.txt'];
'./documents/file.md',
'relative/path/file.txt'
];
safePaths.forEach(pathStr => { safePaths.forEach((pathStr) => {
const normalized = path.normalize(pathStr); const normalized = path.normalize(pathStr);
// Safe relative paths should normalize cleanly // Safe relative paths should normalize cleanly
expect(normalized).toBeDefined(); expect(normalized).toBeDefined();
@@ -58,14 +51,9 @@ describe('Security: Path Handling', () => {
describe('filename safety', () => { describe('filename safety', () => {
it('should identify safe filenames', () => { it('should identify safe filenames', () => {
const safeNames = [ const safeNames = ['document.md', 'my-file.txt', 'file_name.pdf', 'report_2026_04_24.xlsx'];
'document.md',
'my-file.txt',
'file_name.pdf',
'report_2026_04_24.xlsx'
];
safeNames.forEach(name => { safeNames.forEach((name) => {
// Safe names should not contain path separators or null bytes // Safe names should not contain path separators or null bytes
const isSafe = !/[\\/\0]/.test(name) && name.length > 0; const isSafe = !/[\\/\0]/.test(name) && name.length > 0;
expect(isSafe).toBe(true); expect(isSafe).toBe(true);
@@ -73,12 +61,9 @@ describe('Security: Path Handling', () => {
}); });
it('should flag filenames with path separators', () => { it('should flag filenames with path separators', () => {
const problematicNames = [ const problematicNames = ['file/with/slashes.txt', 'file\\with\\backslashes.txt'];
'file/with/slashes.txt',
'file\\with\\backslashes.txt'
];
problematicNames.forEach(name => { problematicNames.forEach((name) => {
// These contain path separators and should be flagged // These contain path separators and should be flagged
const hasPathSeparators = /[\\/]/.test(name); const hasPathSeparators = /[\\/]/.test(name);
expect(hasPathSeparators).toBe(true); expect(hasPathSeparators).toBe(true);
@@ -95,10 +80,8 @@ describe('Security: Path Handling', () => {
describe('validation patterns', () => { describe('validation patterns', () => {
it('should validate path existence check pattern', () => { it('should validate path existence check pattern', () => {
const validationPattern = /^[a-zA-Z0-9._\-/]+$/;
const validPaths = ['documents/file.md', 'folder_2026/data.csv']; const validPaths = ['documents/file.md', 'folder_2026/data.csv'];
validPaths.forEach(pathStr => { validPaths.forEach((pathStr) => {
// These should match a reasonable filename pattern // These should match a reasonable filename pattern
expect(typeof pathStr).toBe('string'); expect(typeof pathStr).toBe('string');
}); });
+3 -1
View File
@@ -8,7 +8,9 @@ describe('SettingsStore', () => {
data = {}; data = {};
store = new SettingsStore({ store = new SettingsStore({
get: (key) => data[key], get: (key) => data[key],
set: (key, value) => { data[key] = value; } set: (key, value) => {
data[key] = value;
},
}); });
}); });
+15 -15
View File
@@ -25,61 +25,61 @@ global.window.electronAPI = {
exists: jest.fn(() => Promise.resolve(false)), exists: jest.fn(() => Promise.resolve(false)),
isDirectory: jest.fn(() => Promise.resolve(false)), isDirectory: jest.fn(() => Promise.resolve(false)),
copy: jest.fn(() => Promise.resolve()), copy: jest.fn(() => Promise.resolve()),
move: jest.fn(() => Promise.resolve()) move: jest.fn(() => Promise.resolve()),
}, },
theme: { theme: {
get: jest.fn() get: jest.fn(),
}, },
print: { print: {
doPrint: jest.fn() doPrint: jest.fn(),
}, },
export: { export: {
withOptions: jest.fn(), withOptions: jest.fn(),
spreadsheet: jest.fn() spreadsheet: jest.fn(),
}, },
batch: { batch: {
convert: jest.fn(), convert: jest.fn(),
selectFolder: jest.fn() selectFolder: jest.fn(),
}, },
converter: { converter: {
convert: jest.fn(), convert: jest.fn(),
convertBatch: jest.fn() convertBatch: jest.fn(),
}, },
headerFooter: { headerFooter: {
getSettings: jest.fn(), getSettings: jest.fn(),
saveSettings: jest.fn(), saveSettings: jest.fn(),
browseLogo: jest.fn(), browseLogo: jest.fn(),
saveLogo: jest.fn(), saveLogo: jest.fn(),
clearLogo: jest.fn() clearLogo: jest.fn(),
}, },
page: { page: {
getSettings: jest.fn(), getSettings: jest.fn(),
updateSettings: jest.fn(), updateSettings: jest.fn(),
setCustomStartPage: jest.fn() setCustomStartPage: jest.fn(),
}, },
pdf: { pdf: {
processOperation: jest.fn(), processOperation: jest.fn(),
getPageCount: jest.fn(), getPageCount: jest.fn(),
selectFolder: jest.fn() selectFolder: jest.fn(),
} },
}; };
// Mock marked library // Mock marked library
global.window.marked = { global.window.marked = {
parse: jest.fn((text) => `<p>${text}</p>`), parse: jest.fn((text) => `<p>${text}</p>`),
use: jest.fn() use: jest.fn(),
}; };
// Mock DOMPurify // Mock DOMPurify
global.window.DOMPurify = { global.window.DOMPurify = {
sanitize: jest.fn((html) => html) sanitize: jest.fn((html) => html),
}; };
// Mock highlight.js // Mock highlight.js
global.window.hljs = { global.window.hljs = {
highlight: jest.fn((code, options) => ({ value: code })), highlight: jest.fn((code, _options) => ({ value: code })),
highlightAuto: jest.fn((code) => ({ value: code })), highlightAuto: jest.fn((code) => ({ value: code })),
getLanguage: jest.fn(() => true) getLanguage: jest.fn(() => true),
}; };
// Mock localStorage // Mock localStorage
@@ -87,7 +87,7 @@ const localStorageMock = {
getItem: jest.fn(), getItem: jest.fn(),
setItem: jest.fn(), setItem: jest.fn(),
removeItem: jest.fn(), removeItem: jest.fn(),
clear: jest.fn() clear: jest.fn(),
}; };
global.localStorage = localStorageMock; global.localStorage = localStorageMock;
+97 -82
View File
@@ -8,10 +8,10 @@
*/ */
describe('SidebarManager', () => { describe('SidebarManager', () => {
let SidebarManager; let SidebarManager;
beforeEach(() => { beforeEach(() => {
document.body.innerHTML = ` document.body.innerHTML = `
<div class="sidebar collapsed" id="sidebar"> <div class="sidebar collapsed" id="sidebar">
<div class="sidebar-icons"> <div class="sidebar-icons">
<button class="sidebar-icon" data-panel="test1"></button> <button class="sidebar-icon" data-panel="test1"></button>
@@ -26,96 +26,111 @@ describe('SidebarManager', () => {
</div> </div>
</div> </div>
`; `;
SidebarManager = require('../src/sidebar/sidebar-manager').SidebarManager; SidebarManager = require('../src/sidebar/sidebar-manager').SidebarManager;
}); });
test('starts collapsed', () => { test('starts collapsed', () => {
const mgr = new SidebarManager(); new SidebarManager();
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true); expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
}); });
test('expands on panel toggle', () => { test('expands on panel toggle', () => {
const mgr = new SidebarManager(); const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: (c) => { c.innerHTML = 'hello'; } }); mgr.registerPanel('test1', {
mgr.togglePanel('test1'); title: 'Test 1',
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(false); render: (c) => {
expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Test 1'); c.innerHTML = 'hello';
},
}); });
mgr.togglePanel('test1');
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(false);
expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Test 1');
});
test('collapses on second toggle', () => { test('collapses on second toggle', () => {
const mgr = new SidebarManager(); const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: () => {} }); mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
mgr.togglePanel('test1'); mgr.togglePanel('test1');
mgr.togglePanel('test1'); mgr.togglePanel('test1');
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true); expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
}); });
test('switches panels', () => { test('switches panels', () => {
const mgr = new SidebarManager(); const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Panel 1', render: (c) => { c.innerHTML = 'one'; } }); mgr.registerPanel('test1', {
mgr.registerPanel('test2', { title: 'Panel 2', render: (c) => { c.innerHTML = 'two'; } }); title: 'Panel 1',
mgr.togglePanel('test1'); render: (c) => {
mgr.togglePanel('test2'); c.innerHTML = 'one';
expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Panel 2'); },
expect(document.getElementById('sidebar-panel-content').innerHTML).toBe('two');
}); });
mgr.registerPanel('test2', {
title: 'Panel 2',
render: (c) => {
c.innerHTML = 'two';
},
});
mgr.togglePanel('test1');
mgr.togglePanel('test2');
expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Panel 2');
expect(document.getElementById('sidebar-panel-content').innerHTML).toBe('two');
});
test('collapse resets active panel', () => { test('collapse resets active panel', () => {
const mgr = new SidebarManager(); const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test', render: () => {} }); mgr.registerPanel('test1', { title: 'Test', render: () => {} });
mgr.expand('test1'); mgr.expand('test1');
mgr.collapse(); mgr.collapse();
expect(mgr.activePanel).toBe(null); expect(mgr.activePanel).toBe(null);
}); });
test('expand sets active icon', () => { test('expand sets active icon', () => {
const mgr = new SidebarManager(); const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: () => {} }); mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
mgr.expand('test1'); mgr.expand('test1');
const btn = document.querySelector('[data-panel="test1"]'); const btn = document.querySelector('[data-panel="test1"]');
expect(btn.classList.contains('active')).toBe(true); expect(btn.classList.contains('active')).toBe(true);
}); });
test('collapse removes active icon', () => { test('collapse removes active icon', () => {
const mgr = new SidebarManager(); const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: () => {} }); mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
mgr.expand('test1'); mgr.expand('test1');
mgr.collapse(); mgr.collapse();
const btn = document.querySelector('[data-panel="test1"]'); const btn = document.querySelector('[data-panel="test1"]');
expect(btn.classList.contains('active')).toBe(false); expect(btn.classList.contains('active')).toBe(false);
}); });
test('expand with unregistered panel does nothing', () => { test('expand with unregistered panel does nothing', () => {
const mgr = new SidebarManager(); const mgr = new SidebarManager();
mgr.expand('nonexistent'); mgr.expand('nonexistent');
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true); expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
expect(mgr.activePanel).toBe(null); expect(mgr.activePanel).toBe(null);
}); });
test('render function receives panel content element', () => { test('render function receives panel content element', () => {
const mgr = new SidebarManager(); const mgr = new SidebarManager();
const renderFn = jest.fn(); const renderFn = jest.fn();
mgr.registerPanel('test1', { title: 'Test 1', render: renderFn }); mgr.registerPanel('test1', { title: 'Test 1', render: renderFn });
mgr.expand('test1'); mgr.expand('test1');
expect(renderFn).toHaveBeenCalledWith(document.getElementById('sidebar-panel-content')); expect(renderFn).toHaveBeenCalledWith(document.getElementById('sidebar-panel-content'));
}); });
test('clicking sidebar icon toggles panel', () => { test('clicking sidebar icon toggles panel', () => {
const mgr = new SidebarManager(); const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: () => {} }); mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
const btn = document.querySelector('[data-panel="test1"]'); const btn = document.querySelector('[data-panel="test1"]');
btn.click(); btn.click();
expect(mgr.activePanel).toBe('test1'); expect(mgr.activePanel).toBe('test1');
btn.click(); btn.click();
expect(mgr.activePanel).toBe(null); expect(mgr.activePanel).toBe(null);
}); });
test('clicking close button collapses sidebar', () => { test('clicking close button collapses sidebar', () => {
const mgr = new SidebarManager(); const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: () => {} }); mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
mgr.expand('test1'); mgr.expand('test1');
document.querySelector('.sidebar-panel-close').click(); document.querySelector('.sidebar-panel-close').click();
expect(mgr.activePanel).toBe(null); expect(mgr.activePanel).toBe(null);
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true); expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
}); });
}); });
+3 -1
View File
@@ -8,7 +8,9 @@ describe('SnapshotManager', () => {
store = {}; store = {};
manager = new SnapshotManager({ manager = new SnapshotManager({
get: (key) => store[key], get: (key) => store[key],
set: (key, value) => { store[key] = value; } set: (key, value) => {
store[key] = value;
},
}); });
}); });
+2 -2
View File
@@ -7,7 +7,7 @@ describe('SprintEngine', () => {
beforeEach(() => { beforeEach(() => {
events = []; events = [];
engine = new SprintEngine({ engine = new SprintEngine({
onEvent: (name, data) => events.push({ name, data }) onEvent: (name, data) => events.push({ name, data }),
}); });
}); });
@@ -45,7 +45,7 @@ describe('SprintEngine', () => {
test('tick auto-stops when time expires and emits sprint:complete', () => { test('tick auto-stops when time expires and emits sprint:complete', () => {
engine.start(1, 100); // 1 minute engine.start(1, 100); // 1 minute
engine.tick(60 * 1000 + 1); // just past engine.tick(60 * 1000 + 1); // just past
expect(events.some(e => e.name === 'sprint:complete')).toBe(true); expect(events.some((e) => e.name === 'sprint:complete')).toBe(true);
expect(engine.isActive()).toBe(false); expect(engine.isActive()).toBe(false);
}); });
+11 -7
View File
@@ -35,7 +35,7 @@ describe('Utility Functions', () => {
return { return {
command: parts[0], command: parts[0],
args: parts.slice(1) args: parts.slice(1),
}; };
} }
@@ -58,7 +58,9 @@ describe('Utility Functions', () => {
}); });
test('should handle multiple options', () => { test('should handle multiple options', () => {
const result = parseCommand('pandoc input.md --pdf-engine=xelatex -V geometry:margin=1in -o output.pdf'); const result = parseCommand(
'pandoc input.md --pdf-engine=xelatex -V geometry:margin=1in -o output.pdf'
);
expect(result.command).toBe('pandoc'); expect(result.command).toBe('pandoc');
expect(result.args).toContain('--pdf-engine=xelatex'); expect(result.args).toContain('--pdf-engine=xelatex');
expect(result.args).toContain('-V'); expect(result.args).toContain('-V');
@@ -75,11 +77,13 @@ describe('Utility Functions', () => {
// This function converts hex colors to RGB // This function converts hex colors to RGB
function hexToRgb(hex) { function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? { return result
r: parseInt(result[1], 16) / 255, ? {
g: parseInt(result[2], 16) / 255, r: parseInt(result[1], 16) / 255,
b: parseInt(result[3], 16) / 255 g: parseInt(result[2], 16) / 255,
} : null; b: parseInt(result[3], 16) / 255,
}
: null;
} }
test('should convert black hex to RGB', () => { test('should convert black hex to RGB', () => {
+117
View File
@@ -0,0 +1,117 @@
/**
* Tests for WordTemplateExporter
*/
const WordTemplateExporter = require('../src/wordTemplateExporter');
describe('WordTemplateExporter.preprocessMarkdownForWordExport', () => {
test('removes HTML style blocks', () => {
const input = `<style>
<!-- sneh-a4-print v1 -->
@media print { body { font-size: 8pt; } }
</style>
# Heading
`;
const output = WordTemplateExporter.preprocessMarkdownForWordExport(input);
expect(output).not.toContain('<style');
expect(output).not.toContain('</style>');
expect(output).not.toContain('sneh-a4-print');
expect(output).not.toContain('@media print');
expect(output).toContain('# Heading');
});
test('removes HTML comments outside style blocks', () => {
const input = `<!-- comment -->
Hello world
`;
const output = WordTemplateExporter.preprocessMarkdownForWordExport(input);
expect(output).not.toContain('<!--');
expect(output).not.toContain('-->');
expect(output).toContain('Hello world');
});
test('removes alignment div tags', () => {
const input = `<div align="center">
Centered content
</div>
`;
const output = WordTemplateExporter.preprocessMarkdownForWordExport(input);
expect(output).not.toContain('<div align="center">');
expect(output).not.toContain('</div>');
expect(output).toContain('Centered content');
});
test('preserves regular markdown content', () => {
const input = `# Title
| A | B |
|---|---|
| 1 | 2 |
`;
const output = WordTemplateExporter.preprocessMarkdownForWordExport(input);
expect(output).toBe(input);
});
test('handles content with no HTML artifacts', () => {
const input = 'Plain text paragraph.';
const output = WordTemplateExporter.preprocessMarkdownForWordExport(input);
expect(output).toBe(input);
});
test('preserves HTML artifacts inside fenced code blocks', () => {
const input = `# Title
\`\`\`
<style>body{}</style>
<!-- comment -->
<div align="center">text</div>
\`\`\`
After code.
`;
const output = WordTemplateExporter.preprocessMarkdownForWordExport(input);
expect(output).toContain('<style>body{}</style>');
expect(output).toContain('<!-- comment -->');
expect(output).toContain('<div align="center">text</div>');
expect(output).toContain('After code.');
});
test('preserves HTML artifacts inside inline code', () => {
const input = 'Use `<div align="center">` for alignment.';
const output = WordTemplateExporter.preprocessMarkdownForWordExport(input);
expect(output).toContain('`<div align="center">`');
});
test('handles uppercase tags and unquoted attributes', () => {
const input = `<DIV align=center>
Centered
</DIV>
`;
const output = WordTemplateExporter.preprocessMarkdownForWordExport(input);
expect(output).not.toContain('<DIV');
expect(output).not.toContain('</DIV>');
expect(output).toContain('Centered');
});
test('handles single-quoted attributes', () => {
const input = `<div align='right'>Right</div>`;
const output = WordTemplateExporter.preprocessMarkdownForWordExport(input);
expect(output).not.toContain('<div');
expect(output).not.toContain('</div>');
expect(output).toContain('Right');
});
test('removes non-alignment div tags without leaving malformed HTML', () => {
const input = `<div class="note">Note text</div>`;
const output = WordTemplateExporter.preprocessMarkdownForWordExport(input);
expect(output).not.toContain('<div');
expect(output).not.toContain('</div>');
expect(output).toContain('Note text');
});
test('returns non-string input unchanged', () => {
expect(WordTemplateExporter.preprocessMarkdownForWordExport(null)).toBeNull();
expect(WordTemplateExporter.preprocessMarkdownForWordExport(123)).toBe(123);
});
});
-23
View File
@@ -1,23 +0,0 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
root: path.join(__dirname, 'src/renderer'),
base: './',
build: {
outDir: path.join(__dirname, 'dist/renderer'),
emptyOutDir: true,
sourcemap: true,
},
resolve: {
alias: {
'@': path.join(__dirname, 'src/renderer'),
},
},
server: {
port: 5173,
strictPort: true,
},
});