Compare commits

..
Author SHA1 Message Date
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
98 changed files with 17039 additions and 19265 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.3
- **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.4
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.4",
"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: {},
},
}
+2 -2
View File
@@ -65,7 +65,7 @@ const electronFsAdapter = {
isDir: entry.isDirectory, isDir: entry.isDirectory,
size: entry.size ?? 0, size: entry.size ?? 0,
modified: entry.modified ?? 0, modified: entry.modified ?? 0,
path: entry.path path: entry.path,
})); }));
}, },
@@ -105,7 +105,7 @@ const electronFsAdapter = {
*/ */
async move(source, dest) { async move(source, dest) {
return await window.electronAPI.file.move(source, dest); return await window.electronAPI.file.move(source, dest);
} },
}; };
module.exports = { electronFsAdapter }; module.exports = { electronFsAdapter };
+16 -6
View File
@@ -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,13 +78,19 @@ 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>
+89 -16
View File
@@ -4,14 +4,74 @@
*/ */
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) {
@@ -48,17 +108,23 @@ function analyze(text) {
avgSentenceLength: 0, avgSentenceLength: 0,
longestSentence: '', longestSentence: '',
longestSentenceLength: 0, longestSentenceLength: 0,
topWords: [] topWords: [],
}; };
} }
const words = extractWords(text); const words = extractWords(text);
const wordCount = words.length; const wordCount = words.length;
const sentences = text.split(/[.!?]+/).map(s => s.trim()).filter(Boolean); const sentences = text
.split(/[.!?]+/)
.map((s) => s.trim())
.filter(Boolean);
const sentenceCount = Math.max(sentences.length, 1); const sentenceCount = Math.max(sentences.length, 1);
const paragraphs = text.split(/\n\s*\n/).map(p => p.trim()).filter(Boolean); const paragraphs = text
.split(/\n\s*\n/)
.map((p) => p.trim())
.filter(Boolean);
const paragraphCount = Math.max(paragraphs.length, 1); const paragraphCount = Math.max(paragraphs.length, 1);
let totalSyllables = 0; let totalSyllables = 0;
@@ -66,16 +132,23 @@ function analyze(text) {
totalSyllables += countSyllables(w); totalSyllables += countSyllables(w);
} }
const fleschEase = Math.round((206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount)) * 10) / 10; const fleschEase =
const fleschGrade = Math.round((0.39 * (wordCount / sentenceCount) + 11.8 * (totalSyllables / wordCount) - 15.59) * 10) / 10; 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 readabilityLabel = getReadabilityLabel(fleschEase);
const readingTime = Math.ceil(wordCount / 200); const readingTime = Math.ceil(wordCount / 200);
const speakingTime = Math.ceil(wordCount / 130); const speakingTime = Math.ceil(wordCount / 130);
const uniqueWords = new Set(words.map(w => w.toLowerCase())); const uniqueWords = new Set(words.map((w) => w.toLowerCase()));
const uniqueWordCount = uniqueWords.size; const uniqueWordCount = uniqueWords.size;
const lexicalDiversity = wordCount > 0 ? Math.round((uniqueWordCount / wordCount) * 1000) / 10 : 0; const lexicalDiversity =
wordCount > 0 ? Math.round((uniqueWordCount / wordCount) * 1000) / 10 : 0;
const avgSentenceLength = Math.round((wordCount / sentenceCount) * 10) / 10; const avgSentenceLength = Math.round((wordCount / sentenceCount) * 10) / 10;
@@ -120,7 +193,7 @@ function analyze(text) {
avgSentenceLength, avgSentenceLength,
longestSentence, longestSentence,
longestSentenceLength, longestSentenceLength,
topWords topWords,
}; };
} }
+284 -135
View File
@@ -1,10 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ASCII Art Generator - MarkdownConverter</title> <title>ASCII Art Generator - MarkdownConverter</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<style> <style>
:root { :root {
--ci-dark-gray: #464646; --ci-dark-gray: #464646;
@@ -103,7 +106,9 @@
color: var(--ci-dark-gray); color: var(--ci-dark-gray);
} }
.form-input, .form-select, .form-textarea { .form-input,
.form-select,
.form-textarea {
width: 100%; width: 100%;
padding: 10px 14px; padding: 10px 14px;
border: 2px solid var(--ci-light-gray); border: 2px solid var(--ci-light-gray);
@@ -113,7 +118,9 @@
transition: border-color 0.2s; transition: border-color 0.2s;
} }
.form-input:focus, .form-select:focus, .form-textarea:focus { .form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none; outline: none;
border-color: var(--ci-accent); border-color: var(--ci-accent);
} }
@@ -245,7 +252,13 @@
<div id="text-mode" class="mode-section active"> <div id="text-mode" class="mode-section active">
<div class="form-group"> <div class="form-group">
<label class="form-label">Text to Convert</label> <label class="form-label">Text to Convert</label>
<input type="text" id="text-input" class="form-input" placeholder="Enter your text..." maxlength="30"> <input
type="text"
id="text-input"
class="form-input"
placeholder="Enter your text..."
maxlength="30"
/>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label">Style</label> <label class="form-label">Style</label>
@@ -263,7 +276,11 @@
<div id="box-mode" class="mode-section"> <div id="box-mode" class="mode-section">
<div class="form-group"> <div class="form-group">
<label class="form-label">Text Content</label> <label class="form-label">Text Content</label>
<textarea id="box-text" class="form-textarea" placeholder="Enter text for the box..."></textarea> <textarea
id="box-text"
class="form-textarea"
placeholder="Enter text for the box..."
></textarea>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label">Box Style</label> <label class="form-label">Box Style</label>
@@ -277,7 +294,15 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-label">Padding</label> <label class="form-label">Padding</label>
<input type="number" id="box-padding" class="form-input" min="0" max="10" value="2" style="width: 100px;"> <input
type="number"
id="box-padding"
class="form-input"
min="0"
max="10"
value="2"
style="width: 100px"
/>
</div> </div>
</div> </div>
@@ -341,138 +366,262 @@
standard: { standard: {
height: 5, height: 5,
chars: { chars: {
'A': [' /\\ ', ' / \\ ', '/----\\', '| |', '| |'], A: [' /\\ ', ' / \\ ', '/----\\', '| |', '| |'],
'B': ['|----\\', '| |', '|----/', '| \\', '|----/'], B: ['|----\\', '| |', '|----/', '| \\', '|----/'],
'C': ['/----\\', '| ', '| ', '| ', '\\----/'], C: ['/----\\', '| ', '| ', '| ', '\\----/'],
'D': ['|----\\', '| |', '| |', '| |', '|----/'], D: ['|----\\', '| |', '| |', '| |', '|----/'],
'E': ['|----', '| ', '|--- ', '| ', '|----'], E: ['|----', '| ', '|--- ', '| ', '|----'],
'F': ['|----', '| ', '|--- ', '| ', '| '], F: ['|----', '| ', '|--- ', '| ', '| '],
'G': ['/----\\', '| ', '| |--\\', '| |', '\\----/'], G: ['/----\\', '| ', '| |--\\', '| |', '\\----/'],
'H': ['| |', '| |', '|----/', '| |', '| |'], H: ['| |', '| |', '|----/', '| |', '| |'],
'I': ['|---|', ' | ', ' | ', ' | ', '|---|'], I: ['|---|', ' | ', ' | ', ' | ', '|---|'],
'J': [' |', ' |', ' |', '| |', '\\---/'], J: [' |', ' |', ' |', '| |', '\\---/'],
'K': ['| /', '| / ', '|-- ', '| \\ ', '| \\'], K: ['| /', '| / ', '|-- ', '| \\ ', '| \\'],
'L': ['| ', '| ', '| ', '| ', '|----'], L: ['| ', '| ', '| ', '| ', '|----'],
'M': ['|\\ /|', '| \\/ |', '| |', '| |', '| |'], M: ['|\\ /|', '| \\/ |', '| |', '| |', '| |'],
'N': ['|\\ |', '| \\ |', '| \\ |', '| \\|', '| |'], N: ['|\\ |', '| \\ |', '| \\ |', '| \\|', '| |'],
'O': ['/----\\', '| |', '| |', '| |', '\\----/'], O: ['/----\\', '| |', '| |', '| |', '\\----/'],
'P': ['|----\\', '| |', '|----/', '| ', '| '], P: ['|----\\', '| |', '|----/', '| ', '| '],
'Q': ['/----\\', '| |', '| \\ |', '| \\|', '\\----\\'], Q: ['/----\\', '| |', '| \\ |', '| \\|', '\\----\\'],
'R': ['|----\\', '| |', '|----/', '| \\ ', '| \\ '], R: ['|----\\', '| |', '|----/', '| \\ ', '| \\ '],
'S': ['/----\\', '| ', '\\----\\', ' |', '\\----/'], S: ['/----\\', '| ', '\\----\\', ' |', '\\----/'],
'T': ['-----', ' | ', ' | ', ' | ', ' | '], T: ['-----', ' | ', ' | ', ' | ', ' | '],
'U': ['| |', '| |', '| |', '| |', '\\----/'], U: ['| |', '| |', '| |', '| |', '\\----/'],
'V': ['| |', '| |', ' \\ / ', ' \\/ ', ' '], V: ['| |', '| |', ' \\ / ', ' \\/ ', ' '],
'W': ['| |', '| |', '| |', '| /\\ |', '|/ \\|'], W: ['| |', '| |', '| |', '| /\\ |', '|/ \\|'],
'X': ['\\ /', ' \\ / ', ' \\/ ', ' /\\ ', ' / \\ '], X: ['\\ /', ' \\ / ', ' \\/ ', ' /\\ ', ' / \\ '],
'Y': ['\\ /', ' \\ / ', ' | ', ' | ', ' | '], Y: ['\\ /', ' \\ / ', ' | ', ' | ', ' | '],
'Z': ['-----', ' / ', ' / ', ' / ', '-----'], Z: ['-----', ' / ', ' / ', ' / ', '-----'],
' ': [' ', ' ', ' ', ' ', ' '], ' ': [' ', ' ', ' ', ' ', ' '],
'0': ['/---\\', '| |', '| / |', '|/ |', '\\---/'], 0: ['/---\\', '| |', '| / |', '|/ |', '\\---/'],
'1': [' /| ', ' / | ', ' | ', ' | ', ' ----'], 1: [' /| ', ' / | ', ' | ', ' | ', ' ----'],
'2': ['/---\\', ' |', ' ---/', '/ ', '-----'], 2: ['/---\\', ' |', ' ---/', '/ ', '-----'],
'3': ['----\\', ' |', ' ---/', ' |', '----/'], 3: ['----\\', ' |', ' ---/', ' |', '----/'],
'4': ['| |', '| |', '-----', ' |', ' |'], 4: ['| |', '| |', '-----', ' |', ' |'],
'5': ['-----', '| ', '----\\', ' |', '----/'], 5: ['-----', '| ', '----\\', ' |', '----/'],
'6': ['/----', '| ', '|---\\', '| |', '\\---/'], 6: ['/----', '| ', '|---\\', '| |', '\\---/'],
'7': ['-----', ' / ', ' / ', ' / ', '/ '], 7: ['-----', ' / ', ' / ', ' / ', '/ '],
'8': ['/---\\', '| |', ' --- ', '| |', '\\---/'], 8: ['/---\\', '| |', ' --- ', '| |', '\\---/'],
'9': ['/---\\', '| |', '\\----', ' |', '----/'] 9: ['/---\\', '| |', '\\----', ' |', '----/'],
} },
}, },
banner: { banner: {
height: 7, height: 7,
chars: { chars: {
'A': [' ##### ', ' ## ##', '## ##', '#########', '## ##', '## ##', '## ##'], A: [
'B': ['######## ', '## ##', '## ##', '######## ', '## ##', '## ##', '######## '], ' ##### ',
'C': [' ###### ', '## ##', '## ', '## ', '## ', '## ##', ' ###### '], ' ## ##',
'D': ['######## ', '## ##', '## ##', '## ##', '## ##', '## ##', '######## '], '## ##',
'E': ['########', '## ', '## ', '###### ', '## ', '## ', '########'], '#########',
'F': ['########', '## ', '## ', '###### ', '## ', '## ', '## '], '## ##',
'G': [' ###### ', '## ##', '## ', '## ####', '## ##', '## ##', ' ###### '], '## ##',
'H': ['## ##', '## ##', '## ##', '#########', '## ##', '## ##', '## ##'], '## ##',
'I': ['####', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', '####'], ],
'J': [' ##', ' ##', ' ##', ' ##', '## ##', '## ##', ' ###### '], B: [
'K': ['## ##', '## ## ', '## ## ', '##### ', '## ## ', '## ## ', '## ##'], '######## ',
'L': ['## ', '## ', '## ', '## ', '## ', '## ', '########'], '## ##',
'M': ['## ##', '### ###', '#### ####', '## ### ##', '## ##', '## ##', '## ##'], '## ##',
'N': ['## ##', '### ##', '#### ##', '## ## ##', '## ####', '## ###', '## ##'], '######## ',
'O': [' ####### ', '## ##', '## ##', '## ##', '## ##', '## ##', ' ####### '], '## ##',
'P': ['######## ', '## ##', '## ##', '######## ', '## ', '## ', '## '], '## ##',
'Q': [' ####### ', '## ##', '## ##', '## ##', '## ## ##', '## ## ', ' ##### ##'], '######## ',
'R': ['######## ', '## ##', '## ##', '######## ', '## ## ', '## ## ', '## ##'], ],
'S': [' ###### ', '## ##', '## ', ' ###### ', ' ##', '## ##', ' ###### '], C: [' ###### ', '## ##', '## ', '## ', '## ', '## ##', ' ###### '],
'T': ['########', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## '], D: [
'U': ['## ##', '## ##', '## ##', '## ##', '## ##', '## ##', ' ####### '], '######## ',
'V': ['## ##', '## ##', '## ##', '## ##', ' ## ## ', ' ## ## ', ' ### '], '## ##',
'W': ['## ##', '## ## ##', '## ## ##', '## ## ##', '## ## ##', '## ## ##', ' ### ### '], '## ##',
'X': ['## ##', ' ## ## ', ' ## ## ', ' ### ', ' ## ## ', ' ## ## ', '## ##'], '## ##',
'Y': ['## ##', ' ## ## ', ' #### ', ' ## ', ' ## ', ' ## ', ' ## '], '## ##',
'Z': ['########', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', '########'], '## ##',
'######## ',
],
E: ['########', '## ', '## ', '###### ', '## ', '## ', '########'],
F: ['########', '## ', '## ', '###### ', '## ', '## ', '## '],
G: [' ###### ', '## ##', '## ', '## ####', '## ##', '## ##', ' ###### '],
H: [
'## ##',
'## ##',
'## ##',
'#########',
'## ##',
'## ##',
'## ##',
],
I: ['####', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', '####'],
J: [' ##', ' ##', ' ##', ' ##', '## ##', '## ##', ' ###### '],
K: ['## ##', '## ## ', '## ## ', '##### ', '## ## ', '## ## ', '## ##'],
L: ['## ', '## ', '## ', '## ', '## ', '## ', '########'],
M: [
'## ##',
'### ###',
'#### ####',
'## ### ##',
'## ##',
'## ##',
'## ##',
],
N: ['## ##', '### ##', '#### ##', '## ## ##', '## ####', '## ###', '## ##'],
O: [
' ####### ',
'## ##',
'## ##',
'## ##',
'## ##',
'## ##',
' ####### ',
],
P: [
'######## ',
'## ##',
'## ##',
'######## ',
'## ',
'## ',
'## ',
],
Q: [
' ####### ',
'## ##',
'## ##',
'## ##',
'## ## ##',
'## ## ',
' ##### ##',
],
R: [
'######## ',
'## ##',
'## ##',
'######## ',
'## ## ',
'## ## ',
'## ##',
],
S: [' ###### ', '## ##', '## ', ' ###### ', ' ##', '## ##', ' ###### '],
T: ['########', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## '],
U: [
'## ##',
'## ##',
'## ##',
'## ##',
'## ##',
'## ##',
' ####### ',
],
V: [
'## ##',
'## ##',
'## ##',
'## ##',
' ## ## ',
' ## ## ',
' ### ',
],
W: [
'## ##',
'## ## ##',
'## ## ##',
'## ## ##',
'## ## ##',
'## ## ##',
' ### ### ',
],
X: [
'## ##',
' ## ## ',
' ## ## ',
' ### ',
' ## ## ',
' ## ## ',
'## ##',
],
Y: ['## ##', ' ## ## ', ' #### ', ' ## ', ' ## ', ' ## ', ' ## '],
Z: ['########', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', '########'],
' ': [' ', ' ', ' ', ' ', ' ', ' ', ' '], ' ': [' ', ' ', ' ', ' ', ' ', ' ', ' '],
'0': [' ###### ', '## ##', '## ##', '## ##', '## ##', '## ##', ' ###### '], 0: [' ###### ', '## ##', '## ##', '## ##', '## ##', '## ##', ' ###### '],
'1': [' ## ', ' #### ', ' ## ', ' ## ', ' ## ', ' ## ', ' ###### '], 1: [' ## ', ' #### ', ' ## ', ' ## ', ' ## ', ' ## ', ' ###### '],
'2': [' ###### ', '## ##', ' ## ', ' ## ', ' ## ', ' ## ', '########'], 2: [' ###### ', '## ##', ' ## ', ' ## ', ' ## ', ' ## ', '########'],
'3': [' ###### ', '## ##', ' ## ', ' #### ', ' ## ', '## ##', ' ###### '], 3: [' ###### ', '## ##', ' ## ', ' #### ', ' ## ', '## ##', ' ###### '],
'4': [' ## ', ' ### ', ' # ## ', ' # ## ', '########', ' ## ', ' ## '], 4: [' ## ', ' ### ', ' # ## ', ' # ## ', '########', ' ## ', ' ## '],
'5': ['########', '## ', '####### ', ' ##', ' ##', '## ##', ' ###### '], 5: ['########', '## ', '####### ', ' ##', ' ##', '## ##', ' ###### '],
'6': [' ###### ', '## ', '####### ', '## ##', '## ##', '## ##', ' ###### '], 6: [' ###### ', '## ', '####### ', '## ##', '## ##', '## ##', ' ###### '],
'7': ['########', '## ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## '], 7: ['########', '## ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## '],
'8': [' ###### ', '## ##', '## ##', ' ###### ', '## ##', '## ##', ' ###### '], 8: [' ###### ', '## ##', '## ##', ' ###### ', '## ##', '## ##', ' ###### '],
'9': [' ###### ', '## ##', '## ##', ' #######', ' ##', '## ##', ' ###### '] 9: [' ###### ', '## ##', '## ##', ' #######', ' ##', '## ##', ' ###### '],
} },
}, },
block: { block: {
height: 6, height: 6,
chars: { chars: {
'A': ['█████╗ ', '██╔══██╗', '███████║', '██╔══██║', '██║ ██║', '╚═╝ ╚═╝'], A: ['█████╗ ', '██╔══██╗', '███████║', '██╔══██║', '██║ ██║', '╚═╝ ╚═╝'],
'B': ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██████╔╝', '╚═════╝ '], B: ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██████╔╝', '╚═════╝ '],
'C': ['█████╗ ', '██╔══██╗', '██║ ', '██║ ', '╚█████╔╝', ' ╚════╝ '], C: ['█████╗ ', '██╔══██╗', '██║ ', '██║ ', '╚█████╔╝', ' ╚════╝ '],
'D': ['██████╗ ', '██╔══██╗', '██║ ██║', '██║ ██║', '██████╔╝', '╚═════╝ '], D: ['██████╗ ', '██╔══██╗', '██║ ██║', '██║ ██║', '██████╔╝', '╚═════╝ '],
'E': ['███████╗', '██╔════╝', '█████╗ ', '██╔══╝ ', '███████╗', '╚══════╝'], E: ['███████╗', '██╔════╝', '█████╗ ', '██╔══╝ ', '███████╗', '╚══════╝'],
'F': ['███████╗', '██╔════╝', '█████╗ ', '██╔══╝ ', '██║ ', '╚═╝ '], F: ['███████╗', '██╔════╝', '█████╗ ', '██╔══╝ ', '██║ ', '╚═╝ '],
'G': ['█████╗ ', '██╔══██╗', '██║ ███', '██║ ██', '╚█████╔╝', ' ╚════╝ '], G: ['█████╗ ', '██╔══██╗', '██║ ███', '██║ ██', '╚█████╔╝', ' ╚════╝ '],
'H': ['██╗ ██╗', '██║ ██║', '███████║', '██╔══██║', '██║ ██║', '╚═╝ ╚═╝'], H: ['██╗ ██╗', '██║ ██║', '███████║', '██╔══██║', '██║ ██║', '╚═╝ ╚═╝'],
'I': ['██╗', '██║', '██║', '██║', '██║', '╚═╝'], I: ['██╗', '██║', '██║', '██║', '██║', '╚═╝'],
'J': [' ██╗', ' ██║', ' ██║', '██ ██║', '╚████╔╝', ' ╚═══╝ '], J: [' ██╗', ' ██║', ' ██║', '██ ██║', '╚████╔╝', ' ╚═══╝ '],
'K': ['██╗ ██╗', '██║ ██╔╝', '█████╔╝ ', '██╔═██╗ ', '██║ ██╗', '╚═╝ ╚═╝'], K: ['██╗ ██╗', '██║ ██╔╝', '█████╔╝ ', '██╔═██╗ ', '██║ ██╗', '╚═╝ ╚═╝'],
'L': ['██╗ ', '██║ ', '██║ ', '██║ ', '███████╗', '╚══════╝'], L: ['██╗ ', '██║ ', '██║ ', '██║ ', '███████╗', '╚══════╝'],
'M': ['███╗ ███╗', '████╗ ████║', '██╔████╔██║', '██║╚██╔╝██║', '██║ ╚═╝ ██║', '╚═╝ ╚═╝'], M: [
'N': ['███╗ ██╗', '████╗ ██║', '██╔██╗ ██║', '██║╚██╗██║', '██║ ╚████║', '╚═╝ ╚═══╝'], '███╗ ███╗',
'O': ['█████╗ ', '██╔══██╗', '██║ ██║', '██║ ██║', '╚█████╔╝', ' ╚════╝ '], '████╗ ████║',
'P': ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔═══╝ ', '██║ ', '╚═╝ '], '██╔████╔██║',
'Q': ['█████╗ ', '██╔══██╗', '██║ ██║', '██║ ██║', '╚██████╗', ' ╚═══██╝'], '██║╚██╔╝██║',
'R': ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██║ ██║', '╚═╝ ╚═╝'], '██║ ╚═╝ ██║',
'S': ['█████╗ ', '██╔══╝ ', '█████╗ ', '╚══██║ ', '█████║ ', '╚════╝ '], '╚═╝ ╚═╝',
'T': ['████████╗', '╚══██╔══╝', ' ██║ ', ' ██║ ', ' ██║ ', ' ╚═╝ '], ],
'U': ['██╗ ██╗', '██ ██║', '██ ██║', '██║ ██║', '╚█████╔╝', ' ╚════╝ '], N: ['██ ██╗', '████╗ ██║', '██╔██╗ ██║', '██║╚██╗██║', '██║ ╚████', '╚═╝ ╚═══'],
'V': ['████╗', '████', '██║ ██║', '██ ██╔╝', ' ╚████╔╝ ', ' ╚═══╝ '], O: ['████╗ ', '██╔══██', '██║ ██║', '██ ██', '╚████╔╝', ' ╚═══╝ '],
'W': ['████╗', '████', '██║ █╗ ██║', '██║███╗██║', '███╔███╔╝', ' ╚══╝╚══╝ '], P: ['██████╗ ', '██╔══██', '██████╔╝', '██╔═══╝ ', '██', '╚═╝ '],
'X': ['████╗', '██╗██╔╝', ' ╚███╔╝ ', ' ██╔██╗ ', '██╔╝ ██╗', '╚═╝ ╚═╝'], Q: ['████╗ ', '██╔══██╗', '██║ ██║', '██║ ██║', '██████╗', ' ╚═══██╝'],
'Y': ['██╗ ██╗', '██╗ ██╔╝', '████╔╝ ', ' ╚██╔╝ ', ' ██║ ', ' ╚═╝ '], R: ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██║ ██║', '╚═╝ ╚═╝'],
'Z': ['███████╗', '╚════██║', ' ███╔═╝', ' ██╔══╝ ', '███████╗', '╚══════╝'], S: ['█████╗ ', '██╔══╝ ', '█████╗ ', '╚══██║ ', '█████', '╚════╝ '],
' ': [' ', ' ', ' ', ' ', ' ', ' '] T: ['████████╗', '╚══██╔══╝', ' ██║ ', ' ██║ ', ' ██║ ', ' ╚═╝ '],
} U: ['██╗ ██╗', '██║ ██║', '██║ ██║', '██║ ██║', '╚█████╔╝', ' ╚════╝ '],
} V: ['██╗ ██╗', '██║ ██║', '██║ ██║', '╚██╗ ██╔╝', ' ╚████╔╝ ', ' ╚═══╝ '],
W: ['██╗ ██╗', '██║ ██║', '██║ █╗ ██║', '██║███╗██║', '╚███╔███╔╝', ' ╚══╝╚══╝ '],
X: ['██╗ ██╗', '╚██╗██╔╝', ' ╚███╔╝ ', ' ██╔██╗ ', '██╔╝ ██╗', '╚═╝ ╚═╝'],
Y: ['██╗ ██╗', '╚██╗ ██╔╝', ' ╚████╔╝ ', ' ╚██╔╝ ', ' ██║ ', ' ╚═╝ '],
Z: ['███████╗', '╚════██║', ' ███╔═╝', ' ██╔══╝ ', '███████╗', '╚══════╝'],
' ': [' ', ' ', ' ', ' ', ' ', ' '],
},
},
}; };
const TEMPLATES = { const TEMPLATES = {
'arrow-right': ' ┌─────────────────────┐\n──▶│ Process or Action │──▶\n └─────────────────────┘', 'arrow-right':
'arrow-down': ' │\n ▼\n┌───────────────┐\n│ Process │\n└───────────────┘\n │\n ▼', ' ┌─────────────────────┐\n──▶│ Process or Action │──▶\n └─────────────────────┘',
'decision': ' ╱╲\n ╲\n ╱ ? ╲\n ╱ ╲\n ╱────────╲\n ╱ ╲\n YES NO\n │ │\n ▼ ▼', 'arrow-down':
'process': '┌─────┐ ┌─────┐ ┌─────┐\n│ 1 │──▶│ 2 │──▶│ 3 │\n└─────┘ └─────┘ └─────┘', ' │\n ▼\n┌───────────────┐\n│ Process │\n└───────────────┘\n │\n ▼',
'flowchart': '┌─────────────┐\n│ START │\n└──────┬──────┘\n │\n ▼\n┌─────────────┐\n│ Process A │\n└──────┬──────┘\n │\n ▼\n ╱────────╲\n ╱ Decision ╲\n ╲ ? ╱\n ╲────────╱\n │ │\n YES NO\n │ │\n ▼ ▼\n┌──────┐ ┌──────┐\n│ B │ │ C │\n└──────┘ └──────┘', decision:
'sequence': ' User System Database\n │ │ │\n │ Request │ │\n ├──────────►│ │\n │ │ Query \n │ ├──────────►│\n │ │\n │ │ Result │\n ◄──────────┤\n │ Response │ │\n │◄──────────┤ │\n │ │ │', ' ╱╲\n ╲\n ? ╲\n \n ────────\n ╲\n YES NO\n \n ▼ ▼',
'network': ' ┌─────────┐\n │ Server │\n └────┬────┘\n │\n ┌─────────┼─────────┐\n │ │ │\n┌────┴────┐ ┌──┴──┐ ┌────┴────┐\n│ Client1 │ │ DB │ │ Client2 │\n└─────────┘ └─────┘ └─────────┘', process:
'hierarchy': ' ┌─────────┐\n │ CEO │\n └────┬────┘\n ┌─────────┼─────────┐\n │ │ │\n ┌───┴───┐ ┌───┴───┐ ┌───┴───┐\n VP1 │ VP2 │ VP3 │\n └───┬───┘ └───┬───┘ └───┬───┘\n │ │ │\n ┌───┴───┐ ┌───┴───┐ ┌───┴───┐\n │ Team1 │ │ Team2 │ │ Team3 │\n └───────┘ └───────┘ └───────┘', '┌─────┐ ┌─────┐ ┌─────┐\n│ 1 │──▶│ 2 │──▶│ 3 │\n└─────┘ └─────┘─────┘',
'header': '╔════════════════════════════════════╗\n║ SECTION TITLE ║\n╚════════════════════════════════════╝', flowchart:
'note': '┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓\n NOTE: ┃\n┃ This is an important note \n┃ that requires attention! \n┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛', '┌─────────────┐\n│ START │\n└──────┬──────┘\n │\n ▼\n┌─────────────┐\n│ Process A │\n└──────┬──────┘\n │\n ▼\n ╱────────╲\n ╱ Decision ╲\n ╲ ? ╱\n ╲────────╱\n │ │\n YES NO\n │ \n ▼ ▼\n┌──────┐ ┌──────┐\n│ B │ │ C \n└──────┘ └──────┘',
'warning': '╔════════════════════════════════════╗\n║ ⚠️ WARNING ║\n║ ║\n║ Critical information here! ║\n╚════════════════════════════════════╝', sequence:
'info': '╭────────────────────────────────────╮\n│ ℹ️ INFO │\n│ │\n│ Helpful information here.\n╰────────────────────────────────────╯', ' User System Database\n │ │ │\n │ Request │ │\n ├──────────►│ │\n Query │\n ├──────────►│\n │\n │ │ Result │\n │ ──────────┤\n │ Response │ │\n │◄──────────┤ │\n │ │ │',
'divider': '════════════════════════════════════════', network:
'separator': '╭──────────────────────────────────────\n │\n──────────────────────────────────────', ' ┌─────────┐\n │ Server │\n └────────┘\n │\n ┌──────────────────\n │\n────────┐ ┌────┐ ┌────────┐\n│ Client1 │ │ DB │ │ Client2 │\n└─────────┘ └─────┘ └─────────┘',
'banner': '★══════════════════════════════════════★\n║ YOUR TITLE HERE ║\n★══════════════════════════════════════★', hierarchy:
'checklist': '☐ Task 1 - Not completed\n☑ Task 2 - Completed \n☐ Task 3 - Not completed\n☐ Task 4 - Not completed' ' ┌─────────┐\n │ CEO \n └────┬────┘\n ┌─────────┼─────────┐\n │ │ │\n ┌───┴───┐ ┌───┴───┐ ┌───┴───┐\n │ VP1 │ │ VP2 │ │ VP3 │\n └───┬───┘ └───┬───┘ └───┬───┘\n │ │ │\n ┌───┴───┐ ┌───┴───┐ ┌───┴───┐\n │ Team1 │ │ Team2 │ │ Team3 │\n └───────┘ └───────┘ └───────┘',
header:
'╔════════════════════════════════════╗\n║ SECTION TITLE ║\n╚════════════════════════════════════╝',
note: '┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓\n┃ NOTE: ┃\n┃ This is an important note ┃\n┃ that requires attention! ┃\n┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛',
warning:
'╔════════════════════════════════════╗\n║ ⚠️ WARNING ║\n║ ║\n║ Critical information here! ║\n╚════════════════════════════════════╝',
info: '╭────────────────────────────────────╮\n│ ℹ️ INFO │\n│ │\n│ Helpful information here. │\n╰────────────────────────────────────╯',
divider: '════════════════════════════════════════',
separator:
'╭──────────────────────────────────────╮\n│ │\n╰──────────────────────────────────────╯',
banner:
'★══════════════════════════════════════★\n║ YOUR TITLE HERE ║\n★══════════════════════════════════════★',
checklist:
'☐ Task 1 - Not completed\n☑ Task 2 - Completed \n☐ Task 3 - Not completed\n☐ Task 4 - Not completed',
}; };
const BOX_STYLES = { const BOX_STYLES = {
@@ -480,20 +629,20 @@
double: { tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' }, double: { tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' },
rounded: { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' }, rounded: { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' },
bold: { tl: '┏', tr: '┓', bl: '┗', br: '┛', h: '━', v: '┃' }, bold: { tl: '┏', tr: '┓', bl: '┗', br: '┛', h: '━', v: '┃' },
ascii: { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' } ascii: { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' },
}; };
let currentMode = 'text'; let currentMode = 'text';
let currentTemplate = null; let currentTemplate = null;
// Mode switching // Mode switching
document.querySelectorAll('.mode-tab').forEach(tab => { document.querySelectorAll('.mode-tab').forEach((tab) => {
tab.addEventListener('click', () => { tab.addEventListener('click', () => {
document.querySelectorAll('.mode-tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.mode-tab').forEach((t) => t.classList.remove('active'));
tab.classList.add('active'); tab.classList.add('active');
currentMode = tab.dataset.mode; currentMode = tab.dataset.mode;
document.querySelectorAll('.mode-section').forEach(s => s.classList.remove('active')); document.querySelectorAll('.mode-section').forEach((s) => s.classList.remove('active'));
document.getElementById(currentMode + '-mode').classList.add('active'); document.getElementById(currentMode + '-mode').classList.add('active');
generatePreview(); generatePreview();
@@ -501,9 +650,9 @@
}); });
// Template selection // Template selection
document.querySelectorAll('.template-btn').forEach(btn => { document.querySelectorAll('.template-btn').forEach((btn) => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
document.querySelectorAll('.template-btn').forEach(b => b.classList.remove('active')); document.querySelectorAll('.template-btn').forEach((b) => b.classList.remove('active'));
btn.classList.add('active'); btn.classList.add('active');
currentTemplate = btn.dataset.template; currentTemplate = btn.dataset.template;
generatePreview(); generatePreview();
@@ -531,7 +680,7 @@
function generateBox(text, style, padding) { function generateBox(text, style, padding) {
const box = BOX_STYLES[style] || BOX_STYLES.single; const box = BOX_STYLES[style] || BOX_STYLES.single;
const lines = text.split('\n'); const lines = text.split('\n');
const maxLen = Math.max(...lines.map(l => l.length)) + padding * 2; const maxLen = Math.max(...lines.map((l) => l.length)) + padding * 2;
let result = box.tl + box.h.repeat(maxLen + 2) + box.tr + '\n'; let result = box.tl + box.h.repeat(maxLen + 2) + box.tr + '\n';
+7 -3
View File
@@ -60,15 +60,19 @@ class CommandPalette {
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', () => {
+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;
+1029 -242
View File
File diff suppressed because it is too large Load Diff
+1333 -884
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' };
} }
} }
+58 -39
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, r: parseInt(result[1], 16) / 255,
g: parseInt(result[2], 16) / 255, g: parseInt(result[2], 16) / 255,
b: parseInt(result[3], 16) / 255 b: parseInt(result[3], 16) / 255,
} : { r: 0, g: 0, b: 0 }; }
: { 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,7 +187,9 @@ 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
.sort((a, b) => b - a)
.forEach((pageIndex) => {
pdf.removePage(pageIndex); pdf.removePage(pageIndex);
}); });
@@ -194,7 +198,7 @@ async function pdfDeletePages(data) {
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": []
} }
+47 -17
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(
'start-sprint',
'Studio: Start Sprint',
() => {
const duration = context.settings.get('sprintDuration') || 25; const duration = context.settings.get('sprintDuration') || 25;
const content = context.editor.getContent() || ''; const content = context.editor.getContent() || '';
const words = content.split(/\s+/).filter(Boolean).length; const words = content.split(/\s+/).filter(Boolean).length;
sprintEngine.start(duration, words); sprintEngine.start(duration, words);
}, 'Ctrl+Alt+S'); },
'Ctrl+Alt+S'
);
context.commands.register('stop-sprint', 'Studio: Stop Sprint', () => { context.commands.register(
'stop-sprint',
'Studio: Stop Sprint',
() => {
if (!sprintEngine.isActive()) return; if (!sprintEngine.isActive()) return;
const content = context.editor.getContent() || ''; const content = context.editor.getContent() || '';
const words = content.split(/\s+/).filter(Boolean).length; const words = content.split(/\s+/).filter(Boolean).length;
const result = sprintEngine.stop(words); const result = sprintEngine.stop(words);
goalTracker.addWords(result.wordDelta); goalTracker.addWords(result.wordDelta);
context.events.emit('sprint:stopped', result); context.events.emit('sprint:stopped', result);
}, 'Ctrl+Alt+Shift+S'); },
'Ctrl+Alt+Shift+S'
);
context.commands.register('take-snapshot', 'Studio: Take Snapshot', () => { context.commands.register(
'take-snapshot',
'Studio: Take Snapshot',
() => {
const content = context.editor.getContent() || ''; const content = context.editor.getContent() || '';
snapshotManager.create(content, 'manual'); snapshotManager.create(content, 'manual');
context.events.emit('snapshot:created', {}); context.events.emit('snapshot:created', {});
}, 'Ctrl+Alt+N'); },
'Ctrl+Alt+N'
);
context.commands.register('restore-last-snapshot', 'Studio: Restore Last Snapshot', () => { context.commands.register(
'restore-last-snapshot',
'Studio: Restore Last Snapshot',
() => {
const snaps = snapshotManager.list(); const snaps = snapshotManager.list();
if (snaps.length === 0) return; if (snaps.length === 0) return;
const content = snapshotManager.restore(snaps[0].id); const content = snapshotManager.restore(snaps[0].id);
context.editor.insertAtCursor(content); context.editor.insertAtCursor(content);
}, 'Ctrl+Alt+Z'); },
'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(
'compile-manuscript',
'Studio: Compile Manuscript',
() => {
context.events.emit('studio:compile', {}); context.events.emit('studio:compile', {});
}, 'Ctrl+Alt+E'); },
'Ctrl+Alt+E'
);
context.commands.register('proofread-document', 'Studio: Proofread Document', () => { context.commands.register(
'proofread-document',
'Studio: Proofread Document',
() => {
if (context.events.hasHandler('ai:analyze')) { if (context.events.hasHandler('ai:analyze')) {
const content = context.editor.getContent() || ''; const content = context.editor.getContent() || '';
context.events.emit('ai:analyze', { text: content, type: 'grammar' }); context.events.emit('ai:analyze', { text: content, type: 'grammar' });
} }
}, 'Ctrl+Alt+G'); },
'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
+7 -7
View File
@@ -31,7 +31,7 @@ class PrintPreview {
document.getElementById('print-execute')?.addEventListener('click', () => this.executePrint()); document.getElementById('print-execute')?.addEventListener('click', () => this.executePrint());
// Update preview on option changes // Update preview on option changes
['print-paper-size', 'print-orientation', 'print-margins'].forEach(id => { ['print-paper-size', 'print-orientation', 'print-margins'].forEach((id) => {
document.getElementById(id)?.addEventListener('change', () => this.refreshPreview()); document.getElementById(id)?.addEventListener('change', () => this.refreshPreview());
}); });
@@ -67,12 +67,12 @@ class PrintPreview {
// Get dimensions for paper size // Get dimensions for paper size
const sizes = { const sizes = {
'A3': { width: '297mm', height: '420mm' }, A3: { width: '297mm', height: '420mm' },
'A4': { width: '210mm', height: '297mm' }, A4: { width: '210mm', height: '297mm' },
'A5': { width: '148mm', height: '210mm' }, A5: { width: '148mm', height: '210mm' },
'Letter': { width: '8.5in', height: '11in' }, Letter: { width: '8.5in', height: '11in' },
'Legal': { width: '8.5in', height: '14in' }, Legal: { width: '8.5in', height: '14in' },
'Tabloid': { width: '11in', height: '17in' }, Tabloid: { width: '11in', height: '17in' },
}; };
const size = sizes[paperSize] || sizes['A4']; const size = sizes[paperSize] || sizes['A4'];
+1742 -952
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;
}
}
+36 -12
View File
@@ -1,5 +1,3 @@
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">
@@ -15,19 +13,33 @@ function renderExplorerPanel(container, { listDirectory, onFileOpen, currentDir
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,
onFileOpen,
dir.path
);
} }
}); });
if (currentDir) { if (currentDir) {
listDirectory(currentDir).then(dir => { listDirectory(currentDir).then((dir) => {
if (dir) renderTree(document.getElementById('explorer-tree'), dir.entries, listDirectory, onFileOpen, currentDir); 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
.map((entry) => {
if (entry.isDirectory) { if (entry.isDirectory) {
return `<div class="tree-item tree-folder collapsed" data-path="${entry.path}"> return `<div class="tree-item tree-folder collapsed" data-path="${entry.path}">
<span class="tree-icon">&#x25B6;</span> <span class="tree-icon">&#x25B6;</span>
@@ -39,9 +51,10 @@ function renderTree(container, entries, listDirectory, onFileOpen, basePath) {
<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) {
@@ -52,18 +65,29 @@ function renderTree(container, entries, listDirectory, onFileOpen, basePath) {
} }
} }
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 = {
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}'; return icons[ext] || '\u{1F4C4}';
} }
+21 -11
View File
@@ -1,4 +1,4 @@
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">
@@ -32,25 +32,29 @@ function renderGitPanel(container, { gitStatus, gitDiff, gitStage, gitCommit, gi
} }
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]);
@@ -63,12 +67,18 @@ function renderGitPanel(container, { gitStatus, gitDiff, gitStage, gitCommit, gi
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>';
} }
} }
+11 -5
View File
@@ -26,7 +26,7 @@ function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHead
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,
}); });
} }
} }
@@ -64,15 +64,21 @@ function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHead
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);
@@ -95,7 +101,7 @@ function renderOutlinePanel(container, { getEditorContent, getActiveLine, onHead
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');
+6 -4
View File
@@ -9,10 +9,12 @@ class SidebarManager {
} }
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 }) {
@@ -35,7 +37,7 @@ class SidebarManager {
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);
}); });
} }
@@ -43,7 +45,7 @@ class SidebarManager {
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'));
} }
} }
+20 -8
View File
@@ -12,7 +12,7 @@ function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippe
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 || '');
} }
@@ -21,10 +21,17 @@ function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippe
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(
(s) =>
s.name.toLowerCase().includes(query.toLowerCase()) ||
(s.language || '').toLowerCase().includes(query.toLowerCase())
)
: snippets; : 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,16 +43,19 @@ 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 => { list.querySelectorAll('.snippet-delete').forEach((btn) => {
btn.addEventListener('click', async () => { btn.addEventListener('click', async () => {
await deleteSnippet(btn.dataset.id); await deleteSnippet(btn.dataset.id);
loadSnippets(); loadSnippets();
@@ -53,7 +63,9 @@ function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippe
}); });
} }
document.getElementById('snippets-search')?.addEventListener('input', (e) => renderList(e.target.value)); document
.getElementById('snippets-search')
?.addEventListener('input', (e) => renderList(e.target.value));
document.getElementById('snippets-add')?.addEventListener('click', () => { document.getElementById('snippets-add')?.addEventListener('click', () => {
const name = prompt('Snippet name:'); const name = prompt('Snippet name:');
+12 -7
View File
@@ -1,10 +1,11 @@
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: 'Technical Spec',
file: 'technical-spec.md',
description: 'Requirements and architecture',
},
{ name: 'Changelog', file: 'changelog.md', description: 'Keep a Changelog format' }, { name: 'Changelog', file: 'changelog.md', description: 'Keep a Changelog format' },
{ name: 'README', file: 'readme.md', description: 'Project documentation' }, { name: 'README', file: 'readme.md', description: 'Project documentation' },
{ name: 'Project Plan', file: 'project-plan.md', description: 'Goals, milestones, timeline' }, { name: 'Project Plan', file: 'project-plan.md', description: 'Goals, milestones, timeline' },
@@ -17,16 +18,20 @@ const templates = [
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));
}); });
} }
+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 {
+200 -66
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,
@@ -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;
} }
@@ -2207,20 +2221,20 @@ body.theme-rosepine-dawn .batch-dialog-footer {
} }
/* 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;
} }
@@ -2240,7 +2254,7 @@ body[class*="dark"] .command-shortcut {
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;
@@ -2292,7 +2306,7 @@ body[class*="dark"] .breadcrumb-bar {
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;
@@ -2304,7 +2318,7 @@ body[class*="dark"] .breadcrumb-bar {
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 {
@@ -2348,30 +2362,150 @@ body[class*="dark"] .breadcrumb-bar {
} }
/* 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);
+288 -69
View File
@@ -115,28 +115,28 @@
} }
/* 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;
} }
@@ -162,13 +162,13 @@ body[class*="dark"] .sidebar-panel-header {
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;
} }
@@ -220,85 +220,304 @@ body[class*="dark"] .panel-list-item-desc {
} }
/* 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;
}
+1 -1
View File
@@ -97,6 +97,6 @@ body.zen-mode .editor-wrapper {
} }
/* 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);
} }
+390 -205
View File
File diff suppressed because it is too large Load Diff
+10 -6
View File
@@ -31,7 +31,8 @@
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:
opacity var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
visibility var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1)); visibility var(--transition-normal, 200ms cubic-bezier(0.4, 0, 0.2, 1));
padding: var(--spacing-4, 1rem); padding: var(--spacing-4, 1rem);
} }
@@ -103,7 +104,8 @@
font-size: 24px; font-size: 24px;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
transition: background-color var(--transition-fast, 150ms), transition:
background-color var(--transition-fast, 150ms),
color var(--transition-fast, 150ms); color var(--transition-fast, 150ms);
} }
@@ -233,15 +235,17 @@
* ============================================ */ * ============================================ */
.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));
} }
+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
+37 -16
View File
@@ -1,10 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Table Generator - MarkdownConverter</title> <title>Table Generator - MarkdownConverter</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<style> <style>
:root { :root {
--ci-dark-gray: #464646; --ci-dark-gray: #464646;
@@ -86,7 +89,8 @@
color: var(--ci-medium-gray); color: var(--ci-medium-gray);
} }
.form-input, .form-select { .form-input,
.form-select {
padding: 8px 12px; padding: 8px 12px;
border: 2px solid var(--ci-light-gray); border: 2px solid var(--ci-light-gray);
border-radius: 6px; border-radius: 6px;
@@ -96,7 +100,8 @@
min-width: 100px; min-width: 100px;
} }
.form-input:focus, .form-select:focus { .form-input:focus,
.form-select:focus {
outline: none; outline: none;
border-color: var(--ci-accent); border-color: var(--ci-accent);
} }
@@ -274,11 +279,27 @@
<div class="controls-row"> <div class="controls-row">
<div class="control-group"> <div class="control-group">
<span class="control-label">Rows</span> <span class="control-label">Rows</span>
<input type="number" id="rows" class="form-input" min="1" max="50" value="4" style="width: 80px;"> <input
type="number"
id="rows"
class="form-input"
min="1"
max="50"
value="4"
style="width: 80px"
/>
</div> </div>
<div class="control-group"> <div class="control-group">
<span class="control-label">Columns</span> <span class="control-label">Columns</span>
<input type="number" id="cols" class="form-input" min="1" max="20" value="4" style="width: 80px;"> <input
type="number"
id="cols"
class="form-input"
min="1"
max="20"
value="4"
style="width: 80px"
/>
</div> </div>
<div class="control-group"> <div class="control-group">
<span class="control-label">Alignment</span> <span class="control-label">Alignment</span>
@@ -288,9 +309,9 @@
<option value="right">Right</option> <option value="right">Right</option>
</select> </select>
</div> </div>
<div class="control-group" style="justify-content: flex-end;"> <div class="control-group" style="justify-content: flex-end">
<label class="checkbox-label"> <label class="checkbox-label">
<input type="checkbox" id="has-header" checked> <input type="checkbox" id="has-header" checked />
Include Header Row Include Header Row
</label> </label>
</div> </div>
@@ -360,7 +381,7 @@
table.innerHTML = html; table.innerHTML = html;
// Add event listeners for live preview // Add event listeners for live preview
table.querySelectorAll('input').forEach(input => { table.querySelectorAll('input').forEach((input) => {
input.addEventListener('input', updatePreview); input.addEventListener('input', updatePreview);
}); });
@@ -425,7 +446,7 @@
for (let i = startRow; i < data.length; i++) { for (let i = startRow; i < data.length; i++) {
if (i === -1) { if (i === -1) {
// Generate empty header for tables without header // Generate empty header for tables without header
markdown += '| ' + colWidths.map(w => ' '.repeat(w)).join(' | ') + ' |\n'; markdown += '| ' + colWidths.map((w) => ' '.repeat(w)).join(' | ') + ' |\n';
} else { } else {
const row = data[i]; const row = data[i];
const cells = row.map((cell, j) => alignCell(cell, colWidths[j])); const cells = row.map((cell, j) => alignCell(cell, colWidths[j]));
@@ -434,7 +455,7 @@
// Add separator after first row // Add separator after first row
if ((hasHeader && i === 0) || (!hasHeader && i === -1)) { if ((hasHeader && i === 0) || (!hasHeader && i === -1)) {
const separators = colWidths.map(w => getSeparator(w)); const separators = colWidths.map((w) => getSeparator(w));
markdown += '| ' + separators.join(' | ') + ' |\n'; markdown += '| ' + separators.join(' | ') + ' |\n';
} }
} }
@@ -469,7 +490,7 @@
}); });
// Quick templates // Quick templates
document.querySelectorAll('.template-chip').forEach(chip => { document.querySelectorAll('.template-chip').forEach((chip) => {
chip.addEventListener('click', () => { chip.addEventListener('click', () => {
currentRows = parseInt(chip.dataset.rows); currentRows = parseInt(chip.dataset.rows);
currentCols = parseInt(chip.dataset.cols); currentCols = parseInt(chip.dataset.cols);
@@ -481,7 +502,7 @@
// Clear all // Clear all
document.getElementById('btn-clear').addEventListener('click', () => { document.getElementById('btn-clear').addEventListener('click', () => {
document.querySelectorAll('#editable-table input').forEach(input => { document.querySelectorAll('#editable-table input').forEach((input) => {
input.value = ''; input.value = '';
}); });
updatePreview(); updatePreview();
@@ -494,7 +515,7 @@
['Task 1', 'First task description', 'In Progress', 'High', '2024-01-15'], ['Task 1', 'First task description', 'In Progress', 'High', '2024-01-15'],
['Task 2', 'Second task description', 'Completed', 'Medium', '2024-01-10'], ['Task 2', 'Second task description', 'Completed', 'Medium', '2024-01-10'],
['Task 3', 'Third task description', 'Pending', 'Low', '2024-01-20'], ['Task 3', 'Third task description', 'Pending', 'Low', '2024-01-20'],
['Task 4', 'Fourth task description', 'In Review', 'High', '2024-01-18'] ['Task 4', 'Fourth task description', 'In Review', 'High', '2024-01-18'],
]; ];
for (let i = 0; i < currentRows; i++) { for (let i = 0; i < currentRows; i++) {
+2 -2
View File
@@ -23,7 +23,7 @@ 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) |
@@ -83,7 +83,7 @@ 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 |
+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
+7 -3
View File
@@ -10,7 +10,7 @@ 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 |
@@ -19,7 +19,7 @@ Brief description of what is being compared and why.
## 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 |
@@ -29,27 +29,31 @@ Brief description of what is being compared and why.
### 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 |
+1
View File
@@ -2,6 +2,7 @@
**Date:** {{DATE}} **Date:** {{DATE}}
**Attendees:** **Attendees:**
- Name 1 - Name 1
- Name 2 - Name 2
+8 -3
View File
@@ -12,16 +12,18 @@
## 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 |
@@ -29,26 +31,29 @@
## 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
+1 -1
View File
@@ -22,7 +22,7 @@ const project = require('project-name');
## Configuration ## Configuration
| Option | Default | Description | | Option | Default | Description |
|--------|---------|-------------| | ------- | ------- | ----------- |
| option1 | true | Description | | option1 | true | Description |
## Contributing ## Contributing
+4 -2
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
@@ -28,7 +30,7 @@ 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
@@ -38,5 +40,5 @@ 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 |
+2
View File
@@ -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.
+9 -8
View File
@@ -1,6 +1,6 @@
/** /**
* ModalManager - Unified modal system with accessibility support * ModalManager - Unified modal system with accessibility support
* @version 4.4.2 * @version 4.4.4
*/ */
class ModalManager { class ModalManager {
#modal; #modal;
@@ -21,7 +21,7 @@ class ModalManager {
focusFirst: true, focusFirst: true,
onOpen: null, onOpen: null,
onClose: null, onClose: null,
...options ...options,
}; };
this.#isOpen = false; this.#isOpen = false;
this.#eventListeners = []; this.#eventListeners = [];
@@ -58,7 +58,7 @@ class ModalManager {
// Elements with data-close attribute // Elements with data-close attribute
const closeTriggers = this.#modal.querySelectorAll('[data-close]'); const closeTriggers = this.#modal.querySelectorAll('[data-close]');
closeTriggers.forEach(el => { closeTriggers.forEach((el) => {
if (el.classList.contains('modal-backdrop') && !this.#options.closeOnBackdrop) { if (el.classList.contains('modal-backdrop') && !this.#options.closeOnBackdrop) {
return; return;
} }
@@ -78,11 +78,12 @@ class ModalManager {
'select:not([disabled])', 'select:not([disabled])',
'textarea:not([disabled])', 'textarea:not([disabled])',
'a[href]', 'a[href]',
'[tabindex]:not([tabindex="-1"])' '[tabindex]:not([tabindex="-1"])',
].join(', '); ].join(', ');
return Array.from(this.#modal.querySelectorAll(selector)) return Array.from(this.#modal.querySelectorAll(selector)).filter(
.filter(el => el.offsetParent !== null && !el.classList.contains('modal-backdrop')); (el) => el.offsetParent !== null && !el.classList.contains('modal-backdrop')
);
} }
#trapFocus(e) { #trapFocus(e) {
@@ -198,11 +199,11 @@ class ModalManager {
// Remove keyboard listener // Remove keyboard listener
const keydownListener = this.#eventListeners.find( const keydownListener = this.#eventListeners.find(
l => l.el === document && l.type === 'keydown' (l) => l.el === document && l.type === 'keydown'
); );
if (keydownListener) { if (keydownListener) {
document.removeEventListener('keydown', keydownListener.handler); document.removeEventListener('keydown', keydownListener.handler);
this.#eventListeners = this.#eventListeners.filter(l => l !== keydownListener); this.#eventListeners = this.#eventListeners.filter((l) => l !== keydownListener);
} }
// Restore focus // Restore focus
+4 -2
View File
@@ -1,9 +1,11 @@
function createWelcomeContent(recentFiles = [], appVersion = '') { function createWelcomeContent(recentFiles = [], appVersion = '') {
const recentHtml = recentFiles.length const recentHtml = recentFiles.length
? recentFiles.map(f => { ? recentFiles
.map((f) => {
const name = f.split(/[/\\]/).pop(); const name = f.split(/[/\\]/).pop();
return `<div class="welcome-recent-item" data-path="${f}"><span class="welcome-recent-name">${name}</span><span class="welcome-recent-path">${f}</span></div>`; return `<div class="welcome-recent-item" data-path="${f}"><span class="welcome-recent-name">${name}</span><span class="welcome-recent-path">${f}</span></div>`;
}).join('') })
.join('')
: '<p class="welcome-muted">No recent files</p>'; : '<p class="welcome-muted">No recent files</p>';
return ` return `
+84 -21
View File
@@ -7,7 +7,6 @@
const fs = require('fs'); const fs = require('fs');
const path = require('path'); const path = require('path');
const PizZip = require('pizzip'); const PizZip = require('pizzip');
const Docx = require('docx4js').default;
class WordTemplateExporter { class WordTemplateExporter {
constructor(templatePath, startPage = 3, pageSettings = null) { constructor(templatePath, startPage = 3, pageSettings = null) {
@@ -66,7 +65,7 @@ class WordTemplateExporter {
b5: { width: 9979, height: 14170 }, b5: { width: 9979, height: 14170 },
letter: { width: 12240, height: 15840 }, letter: { width: 12240, height: 15840 },
legal: { width: 12240, height: 20160 }, legal: { width: 12240, height: 20160 },
tabloid: { width: 15840, height: 24480 } tabloid: { width: 15840, height: 24480 },
}; };
let width, height; let width, height;
@@ -373,7 +372,10 @@ class WordTemplateExporter {
continue; continue;
} }
// Split by | and trim // Split by | and trim
const cells = line.split('|').filter(cell => cell.trim()).map(cell => cell.trim()); const cells = line
.split('|')
.filter((cell) => cell.trim())
.map((cell) => cell.trim());
if (cells.length > 0) { if (cells.length > 0) {
rows.push(cells); rows.push(cells);
} }
@@ -382,7 +384,7 @@ class WordTemplateExporter {
if (rows.length === 0) return ''; if (rows.length === 0) return '';
// Calculate number of columns // Calculate number of columns
const numCols = Math.max(...rows.map(row => row.length)); const numCols = Math.max(...rows.map((row) => row.length));
// Calculate column width in twips (1440 twips = 1 inch) // Calculate column width in twips (1440 twips = 1 inch)
// Assume standard page width of 9360 twips (6.5 inches usable) // Assume standard page width of 9360 twips (6.5 inches usable)
@@ -429,7 +431,7 @@ class WordTemplateExporter {
rowCells.push(''); rowCells.push('');
} }
rowCells.forEach((cellText, colIndex) => { rowCells.forEach((cellText, _colIndex) => {
tableXml += '<w:tc>'; tableXml += '<w:tc>';
tableXml += '<w:tcPr>'; tableXml += '<w:tcPr>';
@@ -444,7 +446,8 @@ class WordTemplateExporter {
} }
// Cell borders // Cell borders
tableXml += '<w:tcBorders>' + tableXml +=
'<w:tcBorders>' +
'<w:top w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' + '<w:top w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
'<w:left w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' + '<w:left w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
'<w:bottom w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' + '<w:bottom w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
@@ -452,7 +455,8 @@ class WordTemplateExporter {
'</w:tcBorders>'; '</w:tcBorders>';
// Cell margins for proper padding // Cell margins for proper padding
tableXml += '<w:tcMar>' + tableXml +=
'<w:tcMar>' +
'<w:top w:w="80" w:type="dxa"/>' + '<w:top w:w="80" w:type="dxa"/>' +
'<w:left w:w="120" w:type="dxa"/>' + '<w:left w:w="120" w:type="dxa"/>' +
'<w:bottom w:w="80" w:type="dxa"/>' + '<w:bottom w:w="80" w:type="dxa"/>' +
@@ -499,7 +503,7 @@ class WordTemplateExporter {
// Don't treat markdown tables as ASCII art // Don't treat markdown tables as ASCII art
if (line.trim().startsWith('|') && line.trim().endsWith('|')) { if (line.trim().startsWith('|') && line.trim().endsWith('|')) {
// Check if it's a proper markdown table (has multiple cells) // Check if it's a proper markdown table (has multiple cells)
const cells = line.split('|').filter(c => c.trim()); const cells = line.split('|').filter((c) => c.trim());
if (cells.length >= 2) { if (cells.length >= 2) {
return false; return false;
} }
@@ -507,17 +511,72 @@ class WordTemplateExporter {
// Common ASCII art characters (Unicode box drawing and symbols) // Common ASCII art characters (Unicode box drawing and symbols)
const asciiArtChars = [ const asciiArtChars = [
'─', '│', '┌', '┐', '└', '┘', '├', '┤', '┬', '┴', '┼', // Box drawing '─',
'═', '║', '╔', '╗', '╚', '╝', '╠', '╣', '╦', '╩', '╬', // Double box '│',
'╭', '╮', '╯', '╰', // Rounded corners '┌',
'▲', '▼', '◄', '►', '♦', '●', '○', '■', '□', '◆', '◇', // Shapes '┐',
'↓', '→', '←', '↑', '↔', '↕', '⇒', '⇐', '⇓', '⇑', // Arrows '└',
'┃', '━', '┏', '┓', '┗', '┛', '┣', '┫', '┳', '┻', '╋', // Heavy box '┘',
'░', '▒', '▓', '█', // Shading '├',
'┤',
'┬',
'┴',
'┼', // Box drawing
'═',
'║',
'╔',
'╗',
'╚',
'╝',
'╠',
'╣',
'╦',
'╩',
'╬', // Double box
'╭',
'╮',
'╯',
'╰', // Rounded corners
'▲',
'▼',
'◄',
'►',
'♦',
'●',
'○',
'■',
'□',
'◆',
'◇', // Shapes
'↓',
'→',
'←',
'↑',
'↔',
'↕',
'⇒',
'⇐',
'⇓',
'⇑', // Arrows
'┃',
'━',
'┏',
'┓',
'┗',
'┛',
'┣',
'┫',
'┳',
'┻',
'╋', // Heavy box
'░',
'▒',
'▓',
'█', // Shading
]; ];
// Check for box drawing characters // Check for box drawing characters
if (asciiArtChars.some(char => line.includes(char))) { if (asciiArtChars.some((char) => line.includes(char))) {
return true; return true;
} }
@@ -537,7 +596,7 @@ class WordTemplateExporter {
/^\s*\*[-=\*]+\*/, // *----* /^\s*\*[-=\*]+\*/, // *----*
]; ];
return asciiPatterns.some(pattern => pattern.test(line)); return asciiPatterns.some((pattern) => pattern.test(line));
} }
/** /**
@@ -564,7 +623,7 @@ class WordTemplateExporter {
// Check if line contains arrow characters and color them red // Check if line contains arrow characters and color them red
const arrowChars = ['↓', '→', '←', '↑', '▼', '►', '◄', '▲']; const arrowChars = ['↓', '→', '←', '↑', '▼', '►', '◄', '▲'];
const hasArrow = arrowChars.some(arrow => line.includes(arrow)); const hasArrow = arrowChars.some((arrow) => line.includes(arrow));
if (hasArrow) { if (hasArrow) {
// Split line into parts and color arrows red // Split line into parts and color arrows red
@@ -655,14 +714,13 @@ class WordTemplateExporter {
*/ */
parseInlineFormatting(text) { parseInlineFormatting(text) {
let xml = ''; let xml = '';
const pos = 0;
// Patterns for inline formatting // Patterns for inline formatting
const patterns = [ const patterns = [
{ regex: /\*\*\*(.+?)\*\*\*/g, bold: true, italic: true }, { regex: /\*\*\*(.+?)\*\*\*/g, bold: true, italic: true },
{ regex: /\*\*(.+?)\*\*/g, bold: true }, { regex: /\*\*(.+?)\*\*/g, bold: true },
{ regex: /\*(.+?)\*/g, italic: true }, { regex: /\*(.+?)\*/g, italic: true },
{ regex: /`(.+?)`/g, code: true } { regex: /`(.+?)`/g, code: true },
]; ];
// Simple approach: process text sequentially // Simple approach: process text sequentially
@@ -693,7 +751,12 @@ class WordTemplateExporter {
} }
// Add formatted text // Add formatted text
xml += this.createRunXml(match[1], matchedPattern.bold, matchedPattern.italic, matchedPattern.code); xml += this.createRunXml(
match[1],
matchedPattern.bold,
matchedPattern.italic,
matchedPattern.code
);
remaining = remaining.substring(earliestPos + match[0].length); remaining = remaining.substring(earliestPos + match[0].length);
} else { } else {
+20 -28
View File
@@ -4,12 +4,7 @@
* 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 {
@@ -45,10 +40,7 @@ class ZenMode {
// Add CM6 extensions to the active editor // Add CM6 extensions to the active editor
if (tab.editorView) { if (tab.editorView) {
this._extensions = [ this._extensions = [typewriterScrollExtension, lineDimmingExtension];
typewriterScrollExtension,
lineDimmingExtension,
];
// Reconfigure is not straightforward with CM6's immutable state. // Reconfigure is not straightforward with CM6's immutable state.
// Instead we dispatch effects or simply rebuild with new extensions. // Instead we dispatch effects or simply rebuild with new extensions.
// Since we cannot hot-swap extensions on an existing EditorView, // Since we cannot hot-swap extensions on an existing EditorView,
@@ -116,9 +108,6 @@ class ZenMode {
_applyTypewriterBehavior(view) { _applyTypewriterBehavior(view) {
// We use a custom update listener that scrolls the cursor to center. // We use a custom update listener that scrolls the cursor to center.
// This is stored on the instance so we can clean it up.
const scrollTimeout = null;
const scrollFn = () => { const scrollFn = () => {
if (!this.active) return; if (!this.active) return;
const pos = view.state.selection.main.head; const pos = view.state.selection.main.head;
@@ -129,13 +118,6 @@ class ZenMode {
}); });
}; };
// 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) {
@@ -157,7 +139,7 @@ class ZenMode {
scroller.scrollTop += diff; scroller.scrollTop += diff;
} }
} }
} catch (e) { } catch {
// Ignore errors from destroyed views // Ignore errors from destroyed views
} }
}, 200); }, 200);
@@ -188,7 +170,12 @@ class ZenMode {
if (!this.active || !this._hud) return; if (!this.active || !this._hud) return;
const content = this.tabManager.getEditorContent(); const content = this.tabManager.getEditorContent();
const words = content.trim() ? content.trim().split(/\s+/).filter(w => w.length > 0).length : 0; 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 readingTime = Math.max(1, Math.ceil(words / 200));
const wordsEl = document.getElementById('zen-words'); const wordsEl = document.getElementById('zen-words');
@@ -228,7 +215,8 @@ class ZenMode {
} }
// 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;
} }
@@ -245,7 +233,8 @@ const typewriterScrollExtension = ViewPlugin.fromClass(class {
}); });
} }
} }
}); }
);
// Line dimming ViewPlugin // Line dimming ViewPlugin
function getOpacity(distance) { function getOpacity(distance) {
@@ -256,7 +245,8 @@ function getOpacity(distance) {
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);
} }
@@ -285,8 +275,10 @@ const lineDimmingExtension = ViewPlugin.fromClass(class {
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);
}
});
});
+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/);
});
});
+9 -10
View File
@@ -12,13 +12,11 @@ describe('sanitizeErrorMessage', () => {
}; };
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', () => {
@@ -27,18 +25,19 @@ describe('sanitizeErrorMessage', () => {
}); });
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', () => {
+26 -12
View File
@@ -53,7 +53,7 @@ describe('Markdown Extensions', () => {
test('matches all admonition types', () => { test('matches all admonition types', () => {
const types = ['note', 'warning', 'tip', 'danger', 'info']; const types = ['note', 'warning', 'tip', 'danger', 'info'];
types.forEach(type => { types.forEach((type) => {
const src = `:::${type}\nContent\n:::\n`; const src = `:::${type}\nContent\n:::\n`;
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m); const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).not.toBeNull(); expect(match).not.toBeNull();
@@ -80,7 +80,9 @@ describe('Markdown Extensions', () => {
const extension = { const extension = {
name: 'admonition', name: 'admonition',
level: 'block', level: 'block',
start(src) { return src.match(/^:::(note|warning|tip|danger|info)/m)?.index; }, start(src) {
return src.match(/^:::(note|warning|tip|danger|info)/m)?.index;
},
tokenizer(src) { tokenizer(src) {
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m); const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
if (match && match.index === 0) { if (match && match.index === 0) {
@@ -93,7 +95,7 @@ describe('Markdown Extensions', () => {
raw: match[0], raw: match[0],
admonitionType, admonitionType,
text, text,
tokens tokens,
}; };
} }
}, },
@@ -105,7 +107,7 @@ describe('Markdown Extensions', () => {
<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', () => {
@@ -113,7 +115,7 @@ describe('Markdown Extensions', () => {
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);
@@ -130,10 +132,10 @@ describe('Markdown Extensions', () => {
const token = { const token = {
type: 'admonition', type: 'admonition',
admonitionType: 'warning', admonitionType: 'warning',
tokens: [{ type: 'text', text: 'Be careful!' }] tokens: [{ type: 'text', text: 'Be careful!' }],
}; };
const mockParser = { const mockParser = {
parse: jest.fn((tokens) => '<p>Be careful!</p>') parse: jest.fn(() => '<p>Be careful!</p>'),
}; };
const context = { parser: mockParser }; const context = { parser: mockParser };
const html = extension.renderer.call(context, token); const html = extension.renderer.call(context, token);
@@ -148,7 +150,7 @@ describe('Markdown Extensions', () => {
describe('PlantUML hex encoding', () => { describe('PlantUML hex encoding', () => {
const plantumlEncode = (text) => { const plantumlEncode = (text) => {
const hex = Array.from(Buffer.from(text, 'utf-8')) const hex = Array.from(Buffer.from(text, 'utf-8'))
.map(b => b.toString(16).padStart(2, '0')) .map((b) => b.toString(16).padStart(2, '0'))
.join(''); .join('');
return '~h' + hex; return '~h' + hex;
}; };
@@ -200,13 +202,23 @@ describe('Markdown Extensions', () => {
describe('scopeCSS utility', () => { describe('scopeCSS utility', () => {
const scopeCSS = (cssText, scopeSelector) => { const scopeCSS = (cssText, scopeSelector) => {
if (!cssText) return ''; if (!cssText) return '';
return cssText.replace(/([^\r\n,{}]+)(,(?=[^}]*{)|(?=[^{]*{))/g, (match, selector, separator) => { return cssText.replace(
/([^\r\n,{}]+)(,(?=[^}]*{)|(?=[^{]*{))/g,
(match, selector, separator) => {
const trimmed = selector.trim(); const trimmed = selector.trim();
if (!trimmed || trimmed.startsWith('@') || trimmed.startsWith(':root') || trimmed.startsWith('from') || trimmed.startsWith('to') || /^\d+%$/.test(trimmed)) { if (
!trimmed ||
trimmed.startsWith('@') ||
trimmed.startsWith(':root') ||
trimmed.startsWith('from') ||
trimmed.startsWith('to') ||
/^\d+%$/.test(trimmed)
) {
return match; return match;
} }
return scopeSelector + ' ' + trimmed + (separator || ''); return scopeSelector + ' ' + trimmed + (separator || '');
}); }
);
}; };
test('scopes standard tag selector', () => { test('scopes standard tag selector', () => {
@@ -218,7 +230,9 @@ describe('Markdown Extensions', () => {
test('scopes multiple class selectors', () => { test('scopes multiple class selectors', () => {
const css = '.title, .content { font-family: sans-serif; }'; const css = '.title, .content { font-family: sans-serif; }';
const scoped = scopeCSS(css, '.preview-content'); const scoped = scopeCSS(css, '.preview-content');
expect(scoped).toBe('.preview-content .title,.preview-content .content{ font-family: sans-serif; }'); expect(scoped).toBe(
'.preview-content .title,.preview-content .content{ font-family: sans-serif; }'
);
}); });
test('ignores @rules like @media', () => { test('ignores @rules like @media', () => {
+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', () => {
+19 -7
View File
@@ -10,9 +10,13 @@
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">
@@ -51,9 +55,13 @@ describe('PrintPreview', () => {
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(
false
);
preview.close(); preview.close();
expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(true); expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(
true
);
}); });
test('updateScaleLabel reflects slider value', () => { test('updateScaleLabel reflects slider value', () => {
@@ -69,7 +77,9 @@ describe('PrintPreview', () => {
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', () => {
@@ -77,7 +87,9 @@ describe('PrintPreview', () => {
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', () => {
+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('v4.4.4');
});
});
+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;
+19 -4
View File
@@ -30,13 +30,18 @@ describe('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', {
title: 'Test 1',
render: (c) => {
c.innerHTML = 'hello';
},
});
mgr.togglePanel('test1'); mgr.togglePanel('test1');
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(false); expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(false);
expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Test 1'); expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Test 1');
@@ -52,8 +57,18 @@ describe('SidebarManager', () => {
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',
render: (c) => {
c.innerHTML = 'one';
},
});
mgr.registerPanel('test2', {
title: 'Panel 2',
render: (c) => {
c.innerHTML = 'two';
},
});
mgr.togglePanel('test1'); mgr.togglePanel('test1');
mgr.togglePanel('test2'); mgr.togglePanel('test2');
expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Panel 2'); expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Panel 2');
+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);
}); });
+9 -5
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, r: parseInt(result[1], 16) / 255,
g: parseInt(result[2], 16) / 255, g: parseInt(result[2], 16) / 255,
b: parseInt(result[3], 16) / 255 b: parseInt(result[3], 16) / 255,
} : null; }
: null;
} }
test('should convert black hex to RGB', () => { test('should convert black hex to RGB', () => {
-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,
},
});