Compare commits

..
Author SHA1 Message Date
amitwh bb4e874809 docs(claude-md): add tailored CLAUDE.md for react-electron branch
Documents the React 19 + TypeScript + Tailwind/shadcn rewrite: dual
Vite+Electron dev workflow, modular main process, Zustand stores,
typed IPC via preload whitelist, two-stage build pipeline, and
dual test runners (Jest main, Vitest renderer).

Amit Haridas
2026-06-19 23:18:22 +05:30
amitwh 36422a9ab3 feat: complete master feature parity with interactive PDF editing, Reveal.js export dialog, Large File Mode, and scoped CSS 2026-06-15 01:22:17 +05:30
amitwh 7eb90d467a feat: wire batch media converter and document compare, remove coming-soon stubs
- batch.showConverter: open BatchMediaConverterDialog for image/audio/video
  types (uses existing universal-convert-batch handler with ImageMagick/FFmpeg)
- tools.documentCompare: line-by-line diff of two open tabs with confirmation
  dialog, shows diff count in toast and full diff in console
- No more 'coming soon' toasts for any menu item
2026-06-14 01:51:43 +05:30
amitwh 809c266e54 fix: serialize git status/stage/commit/log results for IPC transfer
simple-git returns objects with Map/Set fields that cannot be cloned
over Electron IPC. Flatten all git operation results into plain
JSON-serializable objects to fix 'An object could not be cloned' error.
2026-06-14 01:43:29 +05:30
amitwh 2e3f4dda0f fix: add missing rendererReady call and fix temporal dead zone crash
- App.tsx: call electronAPI.file.rendererReady() on mount so main process
  opens pendingFile (files passed via CLI or file associations)
- FindReplaceBar: move updateMatchCount declaration before executeCommand
  to fix 'Cannot access d before initialization' crash in minified build
  (executeCommand referenced updateMatchCount via closure before its
  const declaration in the same scope)
2026-06-14 01:25:05 +05:30
amitwh 21a00a53a4 fix: resolve 12 critical runtime failures, security issue, and dead code
CRITICAL fixes:
- GitStatusPanel: use ipc.file.gitStage/gitCommit instead of non-existent top-level methods
- HeaderFooterDialog: use send/on channels instead of non-existent headerFooter namespace
- CodeMirrorEditor: use invoke('save-pasted-image') instead of non-existent savePastedImage
- ipc.ts: map to correct preload namespaces (git.status, git.stage, git.commit)
- Add pick-folder/pick-file to ALLOWED_SEND_CHANNELS whitelist
- Add git convenience namespace to preload (git.status/stage/commit/log/diff)

HIGH fixes:
- FindReplaceBar: replace broken match count stub with regex-based counter
- PDF export window: disable nodeIntegration, enable contextIsolation + sandbox
- Git handler: accept rootPath argument from renderer
- Add git-diff IPC handler + GitOperations.diff()

MEDIUM fixes:
- Remove 4 dead functions: checkPandocAvailable, safeExecFile, runPandoc, openPDFFile, exportWithPandocPDF
- Remove stale ODT header/footer console.log stub
- Rewrite electron.d.ts to match actual preload API shape
2026-06-13 19:52:51 +05:30
amitwh f2398e6e1a feat: enhance WelcomeDialog, export dialogs, GitStatusPanel, add CommandPalette, FindReplaceBar, and new converter dialogs
- WelcomeDialog: add quick start, feature showcase, keyboard shortcuts, recent files, version display
- ExportDocxDialog/ExportHtmlDialog/ExportPdfDialog: add header/footer, paper size, margin controls
- GitStatusPanel: full staging/unstaging, discard, commit workflow
- CommandPalette: fuzzy command search with keyboard navigation
- FindReplaceBar: find/replace with regex, case, whole-word options
- New dialogs: BatchMediaConverterDialog, HeaderFooterDialog, PdfEditorDialog, UniversalConverterDialog
- Tests: comprehensive coverage for all new/updated components
2026-06-13 19:34:42 +05:30
amitwh 6b564a4569 style: run prettier formatter over src and tests 2026-06-11 20:46:00 +05:30
amitwh 2389d4f297 feat: add writing analytics dashboard and daily word goal tracking 2026-06-11 20:44:16 +05:30
amitwh 50f4f62575 fix: handle list-directory return shape {entries} in openFolder/loadChildren
The main process list-directory handler returns {path, entries} but
the file store was calling .map() directly on result.data. Since
arrays have a .entries iterator method, the nullish coalescing
fallback didn't work. Now properly extracts the entries array with
Array.isArray check.
2026-06-11 07:49:42 +05:30
amitwh 9ef5317d71 fix: add show-document-compare to preload receive channel whitelist
The IPC channel was missing from ALLOWED_RECEIVE_CHANNELS in preload.js,
causing the useBridgeNativeMenu listener to be silently blocked.
2026-06-11 07:37:48 +05:30
amitwh cf6b6817b9 fix: wire orphaned IPC channels, fix data-loss bug, print preview events, sidebar navigation
- Fix file.clearRecent sending IPC to main process instead of clearing openTabs
- Wire show-batch-converter, show-document-compare, open-header-footer-dialog IPC channels
- Add print preview event listeners (mc:print-preview, mc:print-preview-styled) in App.tsx
- Fix sidebar hidden bridge buttons toggling sidebar closed after scroll
- Update sidebar menu labels to match actual sections (Files, Outline, Git)
- Fix ipc.print to be an object with show/doPrint methods (was bare function)
- Update callers: ExportPdfDialog, pdf-export, PrintPreview
- Add 7 regression tests for all fixes
- Clean 2 obsolete snapshots
- Build Linux packages (deb, AppImage, snap) — 549 tests passing
2026-06-11 07:15:33 +05:30
amitwh e25a5e1d75 fix(migration): normalize legacy theme values under v5 marker
Two related bugs surfaced during end-to-end verification:

1. The 'isAlreadyV5' short-circuit in both the main-side and renderer-side
   v4-to-v5 transforms returned the persisted object as-is when a
   migration.version=5 marker was present. A previously-shipped v4 build
   had written theme: 'ayu-light' (and similar) under the v5 marker;
   the transform trusted the marker and passed the invalid theme through,
   which then failed the renderer's zod schema on every launch and
   reset user settings to defaults.

   Fix: in both transforms, when isAlreadyV5 matches, normalize theme
   against the v5 enum (light/dark/system) and validate the full result
   with the v5 schema before returning. Out-of-range values are replaced
   with the v5 default ('system').

2. The renderer's settings-store onRehydrateStorage callback called
   useSettingsStore.setState() to reset the store on validation failure.
   At that moment the store is still being constructed, and setState
   could hit a TDZ ReferenceError (the one we already wrapped in a
   try/catch in v5.0.0, which only hid the symptom).

   Fix: return the normalized state object from onRehydrateStorage
   instead. Zustand's persist middleware applies the returned value
   *after* construction completes, so there is no TDZ.

Tests: 334 vitest + 208 jest = 542 passing.
E2E: 12/12 verify-features.mjs steps green; no console errors.

Amit Haridas
2026-06-08 07:45:06 +05:30
amitwh c5d4b113bd fix(polish): address 3 review blockers + 1 security issue
1. ThemeSettings: change 'auto' radio value to 'system' to match
   the v5 settingsSchema enum. Storing 'auto' silently wipes all
   settings on next launch.
2. UpdateBanner: render an 'available' branch so users see a CTA
   when a new version is detected (the store already had this state,
   but the banner was silent). Added a test.
3. feed-config: remove the unused resolveFeedUrl / FEEDS exports.
   feedConfigFor is the actual implementation used by the IPC
   handler. Updated tests to match.
4. main/index.js: tighten app:open-external regex to https:// only.
2026-06-08 07:35:54 +05:30
Amit Haridas 1715e26e5f chore: E2E additions to verify-features.mjs (note: .claude/ is gitignored, see script content in working tree) 2026-06-08 07:23:11 +05:30
Amit Haridas 81484a8d33 test(e2e): verify first-run wizard and update banner in live app
- verify-features.mjs: dismiss FirstRunWizard if visible before clicking
  toolbar (wizard overlay blocked previous toolbar clicks); write a
  firstRun=true settings.json to test wizard visibility; emit
  'updater:status' from main via Playwright IPC.
- package.json: dev:electron now passes --no-sandbox to match the
  .claude/skills/run-desktop driver scripts.
2026-06-08 07:23:01 +05:30
amitwh 6df1389cc8 fix(updater): dispatch setFeedURL by provider instead of raw url 2026-06-08 07:11:28 +05:30
amitwh aeadde5f40 fix(migration): handle already-v5 settings and ensure 'failed' branch writes v5 marker 2026-06-08 07:02:45 +05:30
amitwh 74dde8d6d1 docs: v5.1.0 changelog + Distribution & Updates section 2026-06-08 06:49:12 +05:30
amitwh cd57f34c36 ci(release): publish latest.yml on all platforms, mirror to ConcreteInfo 2026-06-08 06:48:00 +05:30
amitwh 4da701deb5 ci: run on react-electron branch and ensure both jest and vitest run 2026-06-08 06:46:11 +05:30
amitwh 41c68fcf82 feat(renderer): auto-check for updates 5s after launch when enabled 2026-06-08 06:45:16 +05:30
amitwh 9b899b5205 feat(renderer): mount UpdateBanner, FirstRunWizard, and CrashReportModal 2026-06-08 06:43:40 +05:30
amitwh 691b00a2b8 feat(settings): add Updates section with channel radio and Check now 2026-06-08 06:40:51 +05:30
amitwh ade6c115b8 feat(renderer): add CrashReportModal listing local dumps 2026-06-08 06:38:08 +05:30
amitwh cc33e6c7a8 feat(renderer): add FirstRunWizard with theme/channel/template steps 2026-06-08 06:34:40 +05:30
amitwh 59fd9b8646 feat(renderer): add UpdateBanner for non-blocking update notifications 2026-06-08 06:31:07 +05:30
amitwh d87f175212 feat(renderer): add updater store mirroring main process state 2026-06-08 06:27:13 +05:30
amitwh ef88b6343b feat(settings): add updateChannel, autoCheckUpdates, firstRun fields 2026-06-08 06:25:58 +05:30
amitwh e8c9f95d25 feat(main): initialize updater, crash writer, and migration on app start 2026-06-08 06:24:34 +05:30
amitwh f85c1a8107 feat(preload): allowlist updater:* and crash:* channels, expose API 2026-06-08 06:20:59 +05:30
amitwh b1b9aa3727 feat(ipc): add updater and crash IPC handlers 2026-06-08 06:19:15 +05:30
amitwh 77ad2fdb9d test(settings): update default theme expectation from 'auto' to 'system' 2026-06-08 06:18:11 +05:30
amitwh c62070304f feat(migration): add v4-to-v5 settings migration runner with backup 2026-06-08 06:16:17 +05:30
amitwh 9f4bfbdfee feat(crash): add CrashWriter for local crash dumps (cap 20, prune oldest) 2026-06-08 06:14:02 +05:30
amitwh 2e41b59da5 feat(updater): add UpdaterService wrapping electron-updater lifecycle 2026-06-08 06:12:04 +05:30
amitwh 57c8f92f42 feat(updater): add feed-config to map channel setting to feed URL 2026-06-08 06:10:06 +05:30
amitwh 9da4b96f76 chore(deps): add electron-updater for auto-update flow 2026-06-08 06:08:35 +05:30
Amit Haridas 5b81988f30 docs(plan): production polish implementation plan
21 tasks, 90 actionable steps. TDD throughout. Each step shows the
exact code and the exact command with expected output.

Tasks:
1. Install electron-updater
2-5. Updater service, crash writer, migration runner, feed config (TDD)
6-7. IPC handlers + preload allowlist
8. Wire services in main entry
9-10. Settings + updater store
11-13. UpdateBanner, FirstRunWizard, CrashReportModal
14-16. Settings sheet updates + App.tsx mounts
17-18. CI + release workflows (publish latest.yml, mirror to CI)
19. Docs
20-21. E2E verification + tag v5.1.0

After this plan executes, the remaining v5+ sub-projects are:
- Cloud/licensing (next spec)
- Plugin system
- Performance + accessibility
2026-06-07 23:47:15 +05:30
Amit Haridas a5da5d19bc docs(spec): production polish design for v5 shippable build
Brainstormed with the user (ULTRATHINK context). Sub-project 1 of 4 in the
v5+ roadmap (production polish → cloud/licensing → plugins → perf+a11y).

Spec covers:
- Two-channel distribution: GitHub Releases (default) + ConcreteInfo self-hosted
- Light, skippable first-run wizard (theme + update channel + starter template)
- Auto-migrate v4.4.1 settings with v4 backup and toast on success/failure
- Local crash dump capture (no third-party) with a CrashReportModal
- Non-blocking update banner with user-confirmed restart-to-install
- IPC allowlist additions for updater:* and crash:*
- GitHub Actions CI extension (latest.yml generation, PR test suite)

Defers to v5.1: code signing, Sentry, delta updates, beta tracks.

After user review and approval, write the implementation plan via the
writing-plans skill.
2026-06-07 23:42:03 +05:30
amitwh 74ff6afb19 feat(renderer): wire remaining stubbed commands and rebuild
The v5.0.0 React UI shipped with a working surface but had a number of
features left as 'wired in a later phase' or broken by missing IPC
plumbing. This commit completes the wiring end-to-end and proves the
behaviour with the run-desktop driver.

Toolbar format buttons (Toolbar.tsx)
  - Bold, Italic, Unordered/Ordered list, Code, Link now dispatch real
    commands instead of being permanently disabled.

New module: src/renderer/lib/editor-commands.ts
  - Module-level singleton holding the active CodeMirror EditorView.
  - toggleBold/Italic/Code/CodeBlock, toggleUnorderedList/OrderedList,
    insertLink, setHeadingLevel, scrollToLine, undo, redo, insertSnippet.
  - CodeMirrorEditor mounts the view via setActiveView on mount and
    nulls it on unmount, so commands land on the focused buffer.

register-menu-commands.ts
  - file.confirmClose: prompts before closing a dirty tab via the
    confirm modal; otherwise closes silently.
  - app.quit: prompts before quitting if any buffer is dirty; uses
    the new ipc.app.quit channel.
  - short-cuts.show: shows the keyboard shortcut list in a confirm dialog.
  - editor.bold/italic/code/list.*/link/undo/redo/heading.*: drive the
    active editor.
  - find.toggle: dispatches mc:find-toggle for any listening component.
  - view.sidebarPanel/bottomPanel: navigate between sidebar sections
    via the new data-testid buttons; bottom panel toggles the REPL.
  - font.size: increase/decrease/reset on editorFontSize (10..28).
  - theme.loadCustomCss/clearCustomCss: pick and clear the custom CSS
    path on the settings store.
  - template.load: inserts a bundled markdown skeleton at the cursor.
  - print.preview/previewStyled: emit mc:print and mc:print-preview.
  - file.clearRecent: clears open tabs.
  - file.new: creates an untitled buffer and tab.
  - editor.gotoHeading: scrolls to a given line (used by Outline and
    Breadcrumb).
  - view.toggleSidebar: already wired.
  - file.opened: already wired (prior fix).

Sidebar Outline + Breadcrumb
  - Both now click through to 'editor.gotoHeading' with the line
    number extracted from the active buffer.
  - Sidebar exposes data-testid for the 'view.sidebarPanel' menu action.

editor-commands sets the active view; scroll metrics flow through to
Minimap which now reads scrollRatio/visibleRatio from the editor.

Export dialogs (PDF/DOCX/HTML)
  - Replaced the broken ipc.export.{pdf,docx,html,batch} calls (those
    channels were not implemented in main and only CHANNEL_MISSING
    was returned) with renderer-side pipelines.
  - PDF: generateHtml() with @page CSS for size + margins, then
    ipc.print to the main process for native print-to-PDF.
  - DOCX: generateDocx() from the existing lib, then ipc.file.writeBuffer.
  - HTML: generateHtml() then ipc.file.writeBuffer.
  - All three dialogs use ipc.app.showSaveDialog for output path
    (new IPC handler) and ipc.file.writeBuffer for the binary write
    (new preload channel).
  - PrintPreview now uses MarkdownRenderer instead of a raw <pre>.

New settings fields
  - editorFontSize: 10..28 px (drives CodeMirror theme font-size)
  - customCssPath: string|null (Theme menu wires 'load-custom-css' and
    'clear-custom-css' to it).

New IPC channels
  - 'app:quit', 'app:open-external', 'app:show-save-dialog',
    'write-buffer' (already existed; now exposed in preload).

Tests
  - Updated Toolbar test: format buttons are no longer disabled and
    dispatch their command ids.
  - Updated Export*D*Dialog tests to mock the new ipc surface
    (ipc.print, ipc.app.showSaveDialog, ipc.file.writeBuffer) and
    assert the new flow.
  - Updated PrintPreview test to use ipc.print.doPrint.
  - Updated phase8-toasts integration: PDF flow now goes through
    ipc.print and asserts 'Sent <title> to printer'.
  - register-menu-commands test: re-register 'template.load' AFTER
    Harness renders so the captured-args handler is the live one.

Verification
  - npm run build:renderer: success (1.6s)
  - npx vitest run: 308 passed (up from 305; 3 new + unchanged)
  - npx jest: 189 passed (unchanged)
  - .claude/skills/run-desktop/verify-features.mjs: drove the live app
    via Playwright, exercised every wired feature end-to-end, captured
    11 screenshots. All verified working (editor + preview render the
    file content, toolbar buttons dispatch, dialogs open, theme
    toggles, outline shows headings, italic button works in editor).
2026-06-07 23:13:47 +05:30
amitwh 5ef1610873 fix(ipc): wire preload bridge so menu Open file actually loads in editor + preview
Two related defects were breaking the 'open file' flow:

1. The BrowserWindow webPreferences had no preload path AND
   contextIsolation: false, so contextBridge.exposeInMainWorld
   threw on load and window.electronAPI was never set. Result:
   every renderer-side ipc.* call returned CHANNEL_MISSING and
   silently no-op'd. Toolbar Open/Save, the file menu, every
   dialog — all broken.

2. The 'file.opened' IPC bridge in register-menu-commands.ts
   dispatched to a 'file.opened' command that was never registered
   as a handler. Even if the preload had worked, the main menu's
   File -> Open would have been a no-op once it reached the
   command store.

Fixes:
- window/index.js: add preload path; set contextIsolation: true
  (required for contextBridge) and nodeIntegration: false
  (renderer no longer needs direct Node access; everything goes
  through the whitelisted preload bridge).
- file-store.ts: add openFileFromMain(path, content) that opens
  a tab + editor buffer from content the main process already read
  (skips the renderer's ipc.file.read since main has the bytes).
  Preserves existing buffer content if the file is already open.
- register-menu-commands.ts: register 'file.opened' to call
  openFileFromMain. Drop the dead 'command.palette' bridge
  (no consumer, no UI, no handler).
- tests: two new cases for openFileFromMain — verifies it does
  not call ipc.file.read and does not clobber user edits on
  re-open.

Verified end-to-end via the run-desktop driver: triggering
file-opened from the main process with a test .md now shows the
content in BOTH the CodeMirror editor and the rendered preview
pane (plus the Outline panel picks up the H1). 497 tests pass.
2026-06-07 22:35:30 +05:30
amitwh 69afd5fc54 chore(release): bump version to 5.0.1 2026-06-06 23:08:20 +05:30
amitwh 9e315af1b9 fix(release): walk-and-find pandoc binary in extracted archive
Pandoc 3.9 macOS zip uses an arch-suffixed inner directory
(pandoc-3.9.0.2-x86_64/) where Linux/Windows use the bare
pandoc-3.9.0.2/ dir. Hard-coding the intermediate path broke
the macOS build in v5.0.1-rc1.

Replace the hard-coded path.join(tmpDir, PANDOC_VERSION, ...)
with a recursive walk that locates the binary by name. This
is robust to future pandoc layout shifts (e.g., universal
binaries renaming the inner dir).

Verified:
  - Linux: download + extract produces a working pandoc 3.9.0.2
  - macOS: walker finds pandoc in pandoc-3.9.0.2-x86_64/bin/
  - Windows: walker finds pandoc.exe in pandoc-3.9.0.2/
  - 306/306 tests pass
2026-06-06 23:07:30 +05:30
amitwh 78914a4d65 chore(renderer): default to light theme
User prefers light mode. next-themes previously defaulted to dark
which made first-load users (no localStorage) see a dark UI. With
'enableSystem' on, 'system' is still available as a choice — only
the initial value changed.

Existing users with 'dark' in localStorage keep dark until they toggle.
New users get light.
2026-06-06 22:43:16 +05:30
amitwh 3c4cc985fb feat(packaging): add macOS icon.icns + build:icon-icns script
electron-builder's mac block declared 'icon: assets/icon.icns' but the
file was never generated, so macOS builds shipped with the default
Electron icon. The build would succeed but the .app looked generic.

Add scripts/build-icon-icns.js — a 50-line node script that packs the
existing PNGs from assets/icons/ (16/32/64/128/256/512/1024 + 48 small
+ 16/32/128/256 @2x retina) into a valid ICNS file. No native deps;
works on Linux, mac, and Windows runners alike (avoids the mac-only
'sips' that png2icns requires).

Wired into npm via 'npm run build:icon-icns'. Local build:linux now
parses the ICNS correctly and produces AppImage/deb/snap.
2026-06-06 22:43:06 +05:30
amitwh 09d9f6bdd1 fix(window): renderer path off-by-one; use 'close' for state save
Two related bugs in src/main/window/index.js:

1. Renderer path was ../../dist/renderer/index.html which resolves to
   src/dist/renderer/index.html (one level too deep). Production builds
   load from <project>/dist/renderer/index.html. Fix: ../../..

   This was never caught because dev mode uses VITE_DEV_SERVER_URL and
   never touches the file path; only 'electron .' (no Vite) hits it.

2. win.on('closed', state.save) calls win.getBounds() on a destroyed
   BrowserWindow. The 'closed' event fires AFTER destruction, so
   getBounds() throws 'Object has been destroyed'. Use 'close' (fires
   before destruction) and guard with isDestroyed() as a belt-and-suspenders.

Both bugs surfaced when the user clicked File → Open. The renderer
loaded a missing HTML (blank body); the openFile handler then triggered
the closed-event state save which threw.
2026-06-06 22:42:54 +05:30
amitwh f36d918871 fix(menu): require('../main') → require('../index') after main.js→index.js rename
The menu items file was using require('../main') which resolved to a
non-existent src/main/main.js. After the 054ce23 refactor that renamed
main.js → index.js, every menu click tried to require a missing module.

All 65 occurrences fixed; fileItems() now loads cleanly at app startup
and the menu doesn't throw on construction.

Caught by user clicking File → Open: showOpenDialogSync emitted through
to the lazy require at items.js:52, which failed with module-not-found
before main process handlers ran.
2026-06-06 22:42:42 +05:30
amitwh ab16998922 feat(packaging): all-platform builds with GitHub Releases
Closes the gap from the previous handoff: `npm run dist:all` now
produces Linux .deb/AppImage/snap, Windows NSIS/portable/zip, and
macOS dmg/zip artifacts. `.github/workflows/release.yml` builds all
three on tag push (v*) and attaches the union to a GitHub Release.

Bug fix in the same commit (would have broken any packaged build):

* `build.files` was `["src/**/*", ...]` — shipped `src/renderer/`
  .tsx dev source into the asar. Replaced with a whitelist
  (`src/main/**/*`, `src/preload.js`, `src/plugins/**/*`,
  `package.json`) and moved the built renderer to
  `build.extraResources` (`dist/renderer` -> `renderer/`).

* `src/main/window/index.js` now uses `process.resourcesPath` when
  `app.isPackaged` is true, plus a friendly error if the renderer is
  missing. Verified by extracting the .AppImage and launching the
  binary — main process logs
  `Production mode — loading .../resources/renderer/index.html`.

New in `package.json` build config:

* `mac.target`: dmg + zip for x64 and arm64; `darkModeSupport: true`,
  `hardenedRuntime: false`, `gatekeeperAssess: false`,
  `entitlements: null`. `mac.identity: null` retained (unsigned).
* `publish`: GitHub Releases provider. CI overrides with
  `--publish=never`.

Known limitations (intentional follow-ups, not blockers):

* No `assets/icon.icns` — macOS app uses the default Electron icon.
  This box lacks `iconutil`/`png2icns`; generating a proper .icns is
  a one-line follow-up.
* No code signing — Windows SmartScreen will warn, macOS Gatekeeper
  will quarantine. `CSC_LINK_BASE64`/`CSC_KEY_PASSWORD` secrets are
  already wired in the Windows job for when the cert is added.
* No auto-update — user decision. The `publish` block writes the
  metadata that a future `electron-updater` integration will consume.

Verified on this Linux box:

* `npm run build:renderer` then `npm run build:linux` — produced
  AppImage (291M), deb (220M), snap (245M).
* `resources/app.asar` has 0 `src/renderer/*` entries (was the
  pre-fix bug). 44 .tsx files remain in asar — all from
  `node_modules/@hookform/resolvers` and `node_modules/immer` test
  fixtures, not our code.
* Extracted `squashfs-root/resources/renderer/index.html` exists and
  is what `window/index.js` loads.
* Binary runs for >12s without crashing — `loadFile` resolves
  `process.resourcesPath/renderer/index.html` correctly.

Tests: 306/306 pass. No regressions.

Plan doc: docs/plans/2026-06-06-packaging-all-platforms.md (the
task-by-task execution guide I followed; included for traceability).
2026-06-06 21:06:20 +05:30
amitwh 58ca3014d8 fix(modals): drop shadcn-style aria-describedby to silence Radix warning
Every DialogContent had aria-describedby="X-desc" and every
DialogDescription had a matching id="X-desc". That pattern is the
default shadcn/ui recipe, but it breaks Radix 1.1.x.

Root cause: Radix auto-generates a descriptionId via useId() (e.g. :r0:)
and stores it in the Dialog context. The DescriptionWarning effect does
`document.getElementById(descriptionId)` and warns if the element is
missing. When the description element's id is overridden to
"welcome-desc", the DOM has id="welcome-desc" but the context still has
:r0:, so the lookup misses and the warning fires on every dialog open.

Fix: drop both overrides. Let Radix manage the id and aria-describedby
itself. Screen-reader semantics are unchanged (Radix still wires
Content -> Description via the auto-generated id).

Touched: 12 modal files (11 DialogContent/DialogDescription pairs +
SettingsSheet which uses Sheet). +1 regression test in
WelcomeDialog.test.tsx that spies on console.warn and asserts the
"Missing Description" message is never emitted.

Tests: 306/306 pass (was 305).

Long-term memory: radix-aria-describedby-anti-pattern.md captures the
do-not-reintroduce rule for future agents.
2026-06-06 20:45:13 +05:30
amitwh 7c1a79c724 fix(app): add Vite dev workflow, fix onLayout prop, fix icon path, allow Google Fonts CSP
The v5.0.0 React UI redesign shipped without a working dev workflow —
`npm start` only ran `electron .` which loaded the source index.html
that references raw .tsx files. The browser couldn't execute them, so
the app rendered an empty #root and the user saw 'lot of errors'.

This commit restores a real dev workflow:

1. **Vite dev server wired into npm scripts** — added `concurrently`
   + `wait-on` as devDeps. `npm run dev` now runs Vite (port 5173)
   and Electron together with `wait-on tcp:5173` so Electron only
   starts after the dev server is ready.

2. **Main process loads Vite URL in dev, dist/ in prod** — window
   module now checks `process.env.VITE_DEV_SERVER_URL` and
   `app.isPackaged` to decide what to load. Production still
   loads the built `dist/renderer/index.html`.

3. **Fixed ReferenceError: app is not defined** — window module
   referenced `app.isPackaged` but only imported `BrowserWindow`.
   Added `app` to the destructured import.

4. **Fixed wrong icon path** — window creation used
   `../../assets/icon.png` from src/main/window/ which resolved
   to `src/assets/icon.png` (doesn't exist). Icon lives at
   project root, so path is now `../../../assets/icon.png`.

5. **Allowed Google Fonts in CSP** — the strict CSP
   (`font-src 'self' data:`, `connect-src 'self'`) blocked
   the preconnect/css link to fonts.googleapis.com / .gstatic.com.
   Added both domains so Plus Jakarta Sans loads.

6. **Renamed onLayout → onLayoutChange** in AppShell — react-resizable-panels
   v4 renamed the prop. The v1 name was being spread to a DOM
   div and React logged 'Unknown event handler property' warnings.
   Test mock updated for parity.

7. **show: false → show: true** — ready-to-show was hanging on
   this Wayland/container combo. Now the window is shown
   immediately on create.

Verified end-to-end:
- 305/305 vitest tests pass
- Vite dev server starts on :5173
- Electron loads localhost:5173 and React mounts
- Header 'MarkdownConverter' + sidebar with 'No files open' visible
- No onLayout warnings after HMR
- All blocked errors resolved
2026-06-06 16:17:16 +05:30
amitwh 8027d0b9b5 chore(release): bump version to 5.0.0 2026-06-06 14:13:52 +05:30
amitwh c0988a0108 docs: add CHANGELOG.md (v5.0.0 entry, Keep a Changelog 1.1.0 format) 2026-06-06 14:12:27 +05:30
amitwh 18fc2317ae refactor: delete 17 legacy files (renderer.js, 8 stylesheets, 5 scripts, 2 htmls, src/index.html orphan, deprecated src/main.js) 2026-06-06 14:11:56 +05:30
amitwh 94dd62946a refactor(preload): remove 9 dead IPC channels (print-preview*, command-palette, open-*/show-* ascii/table) 2026-06-06 14:09:25 +05:30
amitwh 054ce2351a refactor(main): create src/main/{store,index}.js glue layer; new entrypoint at src/main/index.js 2026-06-06 14:08:13 +05:30
amitwh 6651dccfdf refactor(main): move WordTemplateExporter from src/wordTemplateExporter.js to src/main/word-template/ (preserved as single module) 2026-06-06 14:04:16 +05:30
amitwh 848102905e refactor(main): extract window creation to src/main/window/ (main only, ascii/table windows removed) 2026-06-06 14:03:12 +05:30
amitwh 6c7a86c99b refactor(main): extract menu to src/main/menu/ (remove dead print-preview/command-palette/ascii/table sends) 2026-06-06 14:00:29 +05:30
amitwh b46fa9abaa fix(main): remove duplicate list-directory handler from src/main/files/ (kept original in main.js) 2026-06-06 09:52:00 +05:30
amitwh 2a32e702f3 refactor(main): extract file ops to src/main/files/ (search, git, binary) 2026-06-06 09:43:31 +05:30
amitwh 356cfc5cc8 refactor(main): extract path helpers to src/main/utils/paths.js 2026-06-06 09:25:22 +05:30
amitwh a03144df5b docs(plan): Phase 10 polish + delete legacy — 10 tasks, main.js decomposition + 17 legacy file deletions + v5.0.0 2026-06-06 09:22:15 +05:30
amitwh 7fc11aed3b docs(spec): Phase 10 — fix index.html ambiguity (DELETE legacy root src/index.html, not rewrite; src/renderer/index.html is already live) 2026-06-06 09:16:02 +05:30
amitwh 095f77f5f1 docs(spec): Phase 10 polish + delete legacy design — main.js decomposition, file map, v5.0.0 2026-06-06 09:14:39 +05:30
amitwh 80afbb136b test(renderer): Phase 9 tools integration smoke test (6 commands) 2026-06-06 08:38:01 +05:30
amitwh 95bbe171b5 feat(renderer): GitStatusPanel sidebar tab + git.refresh event 2026-06-06 08:28:37 +05:30
amitwh 2d77fa5456 feat(renderer): Breadcrumb shows heading symbols (settings toggleable) 2026-06-06 08:28:24 +05:30
amitwh fbaff37505 feat(renderer): Minimap (custom overview, wired to settings.minimap) 2026-06-06 08:20:48 +05:30
amitwh 1ccde4baa3 feat(renderer): Zen mode (Esc exits, hides chrome) 2026-06-06 08:13:38 +05:30
amitwh 8822c9a2f9 feat(renderer): PrintPreview overlay + App.tsx mount 2026-06-06 08:11:15 +05:30
amitwh 324e5676b8 feat(renderer): ReplPanel (markdown snippet preview) 2026-06-06 08:11:10 +05:30
amitwh a62511e7ed feat(renderer): FindInFilesDialog (cross-file search with regex) 2026-06-06 08:04:49 +05:30
amitwh a6c6e3696e feat(renderer): WordExportDialog (docx export with template picker) 2026-06-06 08:02:19 +05:30
amitwh 1b2ab437d1 feat(renderer): TableGeneratorDialog (markdown table generator) 2026-06-06 07:45:18 +05:30
amitwh efc7709f66 feat(renderer): AsciiGeneratorDialog (figlet text-to-ASCII-art) 2026-06-06 07:40:20 +05:30
amitwh a8f7547c7e feat(renderer): Phase 9 foundation — settings, modal union, ipc, commands, docx-export 2026-06-06 07:33:00 +05:30
amitwh 094b52a2b3 docs(spec): Phase 9 advanced tools design — 10 features across 3 mount strategies 2026-06-06 07:20:17 +05:30
amitwh 24c6675c82 fix(test): use mockRejectedValue for IPC error in ExportPdfDialog test 2026-06-05 23:17:57 +05:30
amitwh 929d72cf1d test(renderer): Phase 8 toasts integration smoke test 2026-06-05 23:12:26 +05:30
amitwh b40bff641c feat(renderer): export dialogs toast on success/failure 2026-06-05 23:05:32 +05:30
amitwh 338669f2db feat(renderer): file-store toasts on save/open/folder 2026-06-05 22:59:54 +05:30
amitwh 54615649f4 feat(renderer): mount Toaster in App.tsx 2026-06-05 22:52:04 +05:30
amitwh 3ff76c8c33 feat(renderer): add shadcn Toaster primitive 2026-06-05 22:50:07 +05:30
amitwh 8160ac05e0 feat(renderer): lib/toast.ts typed wrappers over sonner 2026-06-05 22:46:45 +05:30
amitwh 6762b5f9af docs(spec): Phase 8 toasts design — typed helpers, Toaster mount, 4 wire points 2026-06-05 22:41:28 +05:30
amitwh 00485d1bef feat(renderer): implement numeric right-alignment in ascii-table
Adds the actual right-alignment heuristic to toAsciiTable (was missing
from initial implementation). When any column header starts with a digit,
all columns are right-padded instead of left-padded. Matches the test
added in 53870d5 which exercises the right-alignment path with header
['Item', '7'].

All 6 ascii-table tests pass.
2026-06-05 22:18:15 +05:30
amitwh 24bb9aa9f5 test(renderer): Phase 7 modals integration smoke test 2026-06-05 19:54:35 +05:30
amitwh b39bdcf475 feat(renderer): mount ModalLayer + first-launch welcome trigger 2026-06-05 19:48:37 +05:30
amitwh 9d154a8521 feat(renderer): AppHeader gets Settings + About icon buttons 2026-06-05 19:46:56 +05:30
amitwh fe62c8814c feat(renderer): register 9 modal-opening commands in command store 2026-06-05 19:44:13 +05:30
amitwh 9306a9c23b feat(renderer): SettingsSheet (5 tabs: editor, theme, export, plugins, about) 2026-06-05 19:41:18 +05:30
amitwh 88e26c130e feat(renderer): AboutSettings tab (version + links) 2026-06-05 19:39:01 +05:30
amitwh b02707ac7f feat(renderer): PluginsSettings tab placeholder (Coming soon) 2026-06-05 19:37:54 +05:30
amitwh ebc149ff0b feat(renderer): ExportSettings tab (PDF/DOCX/HTML defaults + ascii toggle) 2026-06-05 19:35:28 +05:30
amitwh be3af42fc5 feat(renderer): ThemeSettings tab (mode, accent, font) 2026-06-05 19:32:43 +05:30
amitwh ed611c77ed feat(renderer): EditorSettings tab (font, tab, line/wrap, minimap) 2026-06-05 19:31:18 +05:30
amitwh f25d856a2a feat(renderer): ExportBatchDialog (format, concurrency, file list) 2026-06-05 19:30:15 +05:30
amitwh 76fed872ce test(renderer): assert toggled standalone value in ExportHtmlDialog test 2026-06-05 19:28:44 +05:30
amitwh 9de14df016 feat(renderer): ExportHtmlDialog (standalone, highlight style, ascii tables) 2026-06-05 19:27:16 +05:30
amitwh 5f0b4c9c4e feat(renderer): ExportDocxDialog (template picker + ascii tables) 2026-06-05 19:23:40 +05:30
amitwh 7d083a024d feat(renderer): ExportPdfDialog (format, margins, ascii tables) 2026-06-05 19:19:18 +05:30
amitwh 68fcaf9bfc feat(renderer): ExportDialogFooter (shared cancel/export row) 2026-06-05 19:11:27 +05:30
amitwh a2a44fbf2c feat(renderer): useExportSource hook (shared by export dialogs) 2026-06-05 19:09:55 +05:30
amitwh 026a4d9fac feat(renderer): WelcomeDialog (first-launch quick-start) 2026-06-05 19:07:14 +05:30
amitwh a461b62dd3 feat(renderer): ConfirmDialog (generic title/body/onConfirm) 2026-06-05 19:01:06 +05:30
amitwh 1cd316caf1 feat(renderer): AboutDialog (version + GitHub link) 2026-06-05 18:47:14 +05:30
amitwh 2bdb380130 feat(renderer): ModalLayer shell (dispatches to 7 modal types) 2026-06-05 18:36:28 +05:30
amitwh 41942a1316 feat(renderer): useSettingsStore (persisted, validated, reset-able) 2026-06-05 18:31:27 +05:30
amitwh 9ad484744a feat(renderer): useAppStore extended with modal discriminated union 2026-06-05 18:28:02 +05:30
amitwh d0a26126cc feat(renderer): zod validators for settings + export schemas 2026-06-05 18:25:13 +05:30
amitwh 53870d58bb test(renderer): clarify ascii-table alignment tests (left vs right) 2026-06-05 18:23:48 +05:30
amitwh 00d6802422 feat(renderer): ascii-table helper for export-time table formatting 2026-06-05 18:20:23 +05:30
amitwh 02418b943e feat(renderer): add shadcn form primitive (react-hook-form glue) 2026-06-05 18:03:26 +05:30
amitwh 8b2809ebaf fix(renderer): export SheetPortal and SheetOverlay from sheet primitive 2026-06-05 17:55:21 +05:30
amitwh 8f5eb301b6 feat(renderer): add shadcn sheet primitive 2026-06-05 17:53:08 +05:30
amitwh 8f9dab1405 feat(renderer): add shadcn dialog primitive 2026-06-05 17:49:31 +05:30
amitwh a6fa14124d feat(renderer): add shadcn tabs primitive 2026-06-05 17:42:21 +05:30
amitwh 0538aec02c feat(renderer): add shadcn select primitive 2026-06-05 17:35:45 +05:30
amitwh 1d782a00e6 feat(renderer): add shadcn radio-group primitive 2026-06-05 17:26:29 +05:30
amitwh 9eb1fe0f00 test(renderer): add ResizeObserver polyfill to test setup (required for slider/shadcn components) 2026-06-05 17:23:59 +05:30
amitwh 3344b2aea9 feat(renderer): add shadcn slider primitive 2026-06-05 17:23:13 +05:30
amitwh 6b23e5ef60 feat(renderer): add shadcn switch primitive 2026-06-05 17:18:19 +05:30
amitwh 221598c91b feat(renderer): add shadcn checkbox primitive 2026-06-05 17:13:49 +05:30
amitwh d8ee743fb1 feat(renderer): add shadcn textarea primitive 2026-06-05 17:09:59 +05:30
amitwh 66e2b56221 feat(renderer): add shadcn input primitive 2026-06-05 17:06:36 +05:30
amitwh d22d616727 feat(renderer): add shadcn label primitive 2026-06-05 17:03:10 +05:30
amitwh 89590a349a docs(plan): Phase 7 modals implementation plan (37 tasks, TDD, ~+50 tests) 2026-06-05 16:54:07 +05:30
amitwh f447896a63 docs(spec): Phase 7 modals design — settings store, ModalLayer, 7 modal types, ASCII tables 2026-06-05 16:27:25 +05:30
Amit Haridas ccb998be66 test(renderer): Phase 6 integration smoke test (menu -> command -> store)
- 7 end-to-end tests covering toolbar, header, native menu IPC,
  userBindings persistence, and command registry
- 169/169 tests pass (was 105 at end of Phase 5)
- build succeeds
2026-06-05 16:03:46 +05:30
Amit Haridas 813582aa8d feat(renderer): command store persists userBindings (Phase 6)
- add userBindings map (commandId -> combo string)
- setUserBinding / clearUserBinding / getUserBinding actions
- persist middleware with partialize: handlers are runtime-only,
  userBindings are serialized
- TDD: 7 persistence tests + existing 10 command-store tests still pass
- 162/162 total tests pass
2026-06-05 16:02:26 +05:30
Amit Haridas b1e16af62d feat(renderer): AppHeader wired to command store
- toggle sidebar/preview buttons dispatch through command store
- new 'shortcuts.show' command (Keyboard icon, opens shortcuts panel later)
- AppHeader.test.tsx updated: registers matching commands in beforeEach
- integration test fixed: 'Open folder' button now matches 2 (toolbar + sidebar)
- 155/155 tests pass
2026-06-05 16:00:58 +05:30
Amit Haridas 487ce2ad45 feat(renderer): Toolbar wired to command store
- 5 functional buttons: Open file, Open folder, Save, Toggle sidebar, Toggle preview
- each dispatches via useCommandStore
- aria-pressed on toggle buttons reflects app store state
- formatting buttons (bold, italic, etc.) stay disabled (Phase 9)
- toolbar now has role='toolbar' and aria-label
- TDD: 9 component tests
2026-06-05 15:58:21 +05:30
Amit Haridas 1717b2e8c0 feat(renderer): register menu commands in AppShell (Phase 6 wiring)
- useRegisterMenuCommands: registers file.open, file.save, file.closeTab,
  tab.next, tab.prev, view.toggleSidebar, view.togglePreview in command store
- useBridgeNativeMenu: useMenuAction for 13 native-menu channels
  (file-save, toggle-preview, load-template-menu, etc.)
- AppShell calls both on mount
- integration test mock extended to include ipc.menu.on
- 145/145 tests pass (was 105)
2026-06-05 15:56:32 +05:30
Amit Haridas cdd370c62d feat(renderer): useMenuAction hook (native menu IPC -> command store)
- bridge between main-process menu events and the command dispatcher
- optional transform: convert raw IPC payload to command args
- extends ipc.ts with ipc.menu.on() helper
- TDD: 5 unit tests covering subscription, payload transform, no-op, unmount
2026-06-05 15:53:37 +05:30
Amit Haridas 6df21ace35 feat(renderer): useShortcut hook (generic key combo binding)
- 'mod+s' / 'mod+shift+s' / 'Tab' / etc.
- mod = meta (Mac) or ctrl (others)
- suppresses when <input>/<textarea>/contentEditable focused
- preventDefault on match
- TDD: 15 unit tests covering parser, match, suppression, unmount
2026-06-05 15:51:35 +05:30
Amit Haridas c93747c476 feat(renderer): command store (action registry for menu/shortcut/toolbar)
- useCommandStore: register/unregister/registerMany/dispatch/get
- keyed by id (e.g. 'file.open', 'view.toggleSidebar')
- TDD: 10 unit tests covering register, dispatch, unregister, batch
- foundation for Phase 6 native menu + toolbar wiring
2026-06-05 15:49:45 +05:30
amitwh d865b181e9 test(renderer): phase 5 integration smoke test 2026-06-05 15:39:36 +05:30
amitwh 5e5bab3da9 feat(renderer): persist last-opened folder (mc-file-store) + restore on mount 2026-06-05 15:36:59 +05:30
amitwh ce2bf62d42 feat(renderer): drag-to-reorder tabs (dnd-kit) 2026-06-05 15:34:25 +05:30
amitwh 6da98c3a54 feat(renderer): keyboard shortcuts for file ops (open, save, close, next/prev tab) 2026-06-05 15:32:55 +05:30
amitwh 3598d06240 feat(preload): add file.list, file.pickFolder, file.pickFile convenience methods 2026-06-05 15:13:16 +05:30
amitwh 650c266945 feat(renderer): TabBar wired to file store (dirty dot, close, active highlight)
- Renders tabs from useFileStore.openTabs with title + dirty dot + close button
- Uses Zustand selectors for granular re-renders
- Active tab highlighted with aria-current and accent background
- Close button stops propagation; does not trigger tab activation
- Horizontal scroll on overflow, h-9 fixed bar with border
- Empty state preserved when no tabs open

Tests: 6 cases (empty, render, highlight, click-switch, click-close, dirty indicator)
- 75 total tests (was 70, gained 5 new)
- All pass
- Build: succeeds

Amit Haridas
2026-06-05 15:03:01 +05:30
amitwh 05bbb9f86b feat(renderer): Sidebar, FileTree, Outline components wired into AppShell 2026-06-05 14:59:15 +05:30
amitwh 77c8e05fa5 feat(renderer): shadcn collapsible, scroll-area, context-menu primitives 2026-06-05 14:54:31 +05:30
amitwh 17f318dd75 fix(renderer): drop redundant ternary, add loadChildren idempotence test 2026-06-05 14:50:56 +05:30
amitwh fa5a46d5ac feat(renderer): file store with FileNode tree, openTabs, lazy loadChildren 2026-06-05 14:42:08 +05:30
amitwh a4201acad9 feat(renderer): wire PreviewPane into AppShell 2026-06-05 13:15:47 +05:30
amitwh 0b5af04a6a feat(renderer): PreviewPane tracks scroll ratio 2026-06-05 13:14:50 +05:30
amitwh 2d6f909b0e feat(renderer): useScrollSync hook (60fps throttling, ratio calc) 2026-06-05 13:13:37 +05:30
amitwh 8624257c1f feat(renderer): editor buffer content feeds preview store (300ms debounce) 2026-06-05 13:09:34 +05:30
amitwh b75f436aaa feat(renderer): PreviewPane with empty state and MarkdownRenderer 2026-06-05 13:07:55 +05:30
amitwh d81d8c28d2 test(renderer): remove non-existent html property from preview-store reset 2026-06-05 13:07:06 +05:30
amitwh 559d09cad9 feat(renderer): preview store with 300ms debounced source 2026-06-05 13:04:39 +05:30
amitwh 5ad582ec3e feat(renderer): MarkdownRenderer with mermaid code re-extraction from source 2026-06-05 13:03:32 +05:30
amitwh d02f896167 feat(renderer): MermaidLazy (loads mermaid on first use, error UI) 2026-06-05 13:01:24 +05:30
amitwh f34775ce53 feat(renderer): markdown lib (marked + DOMPurify + mermaid placeholders) 2026-06-05 12:56:31 +05:30
amitwh 5d6a55dd09 feat(renderer): StatusBar reads from editor store (word count, cursor pos) 2026-06-05 12:49:16 +05:30
amitwh 0e80e37d9d feat(renderer): wire EditorPane into AppShell 2026-06-05 12:46:13 +05:30
amitwh 9a7e994224 feat(renderer): EditorPane with empty state and CodeMirror rendering 2026-06-05 12:42:25 +05:30
amitwh 3effacf816 feat(renderer): CodeMirror 6 editor wrapper with markdown, themes, keymaps 2026-06-05 12:38:09 +05:30
amitwh 1be10f9ae5 feat(renderer): CodeMirror light theme with brand-aware syntax colors 2026-06-05 12:25:31 +05:30
amitwh 4c0b7d6e84 feat(renderer): editor store with buffers, dirty state, cursor (immer) 2026-06-05 12:21:48 +05:30
amitwh db04ea5854 feat(renderer): App.tsx renders AppShell 2026-06-05 12:11:01 +05:30
amitwh 567726022c feat(renderer): AppShell with resizable panes, sidebar/preview toggle, persisted sizes 2026-06-05 12:02:35 +05:30
amitwh 1999a7716e feat(renderer): StatusBar placeholder (word count wired in Phase 3) 2026-06-05 11:53:34 +05:30
amitwh 16e071ae5e feat(renderer): Breadcrumb placeholder (wired in Phase 5) 2026-06-05 11:50:45 +05:30
amitwh 7ecf54ceb0 feat(renderer): Toolbar skeleton with formatting buttons 2026-06-05 11:48:26 +05:30
amitwh 95e2f45f1f feat(renderer): TabBar skeleton (no tabs yet — wired in Phase 5) 2026-06-05 11:45:33 +05:30
amitwh 7fbbd60525 feat(renderer): AppHeader with sidebar/preview toggles + theme toggle 2026-06-05 11:40:54 +05:30
amitwh c715bb354c feat(renderer): install shadcn resizable primitive 2026-06-05 11:35:02 +05:30
amitwh 6525de7667 feat(renderer): add useAppStore with sidebar/preview/zen/pane-sizes 2026-06-05 11:30:25 +05:30
amitwh a2c1d0c11a feat(renderer): wire App.tsx shell with theme provider and top-bar 2026-06-05 10:19:36 +05:30
amitwh e0d6315204 feat(renderer): add next-themes provider + theme toggle (sun/moon) 2026-06-05 10:17:38 +05:30
amitwh 68ff7d076a feat(renderer): install shadcn button primitive with tests 2026-06-05 10:13:31 +05:30
amitwh 67b57eae78 feat(renderer): add motion preset transitions for modals/sidebar/toasts 2026-06-05 09:37:49 +05:30
amitwh 301c51ac84 test(renderer): add failing test for motion presets 2026-06-05 09:36:18 +05:30
amitwh 904ffbdd5b feat(renderer): implement typed IPC wrapper with IpcResult discriminated union 2026-06-05 09:34:19 +05:30
amitwh ea383783ec test(renderer): add failing test for ipc wrapper + IpcResult types 2026-06-05 09:25:02 +05:30
amitwh e758a81c4c feat(renderer): implement cn() helper for tailwind-merge + clsx 2026-06-05 09:23:30 +05:30
amitwh ea0f3f93bf test(renderer): add failing test for cn() helper + vitest config 2026-06-05 09:20:04 +05:30
amitwh 188e73d7c1 feat(renderer): configure shadcn/ui, extend design tokens for glassy aesthetic 2026-06-05 09:13:52 +05:30
amitwh 8265e4ff88 chore(deps): add shadcn/ui ecosystem, motion, zustand+immer, test stack 2026-06-05 09:01:45 +05:30
amitwh 8a8671b128 docs(plan): add React UI redesign implementation plan (10 vertical slices)
- Phase 1: Foundation (shadcn, deps, lib utils, motion presets, theme)
- Phase 2: App shell + resizable panes
- Phase 3: Editor (CodeMirror 6 + immer store)
- Phase 4: Preview (marked + KaTeX + mermaid + scroll sync)
- Phase 5: File tree + tabs
- Phase 6: Native menus + toolbar
- Phase 7: Modals (export, settings, about, confirm)
- Phase 8: Toasts (sonner)
- Phase 9: Advanced tools (zen, repl, ascii, table, print, word)
- Phase 10: Polish + delete legacy renderer

Phases 1-4 are fully fleshed out (60+ TDD tasks with working code).
Phases 5-9 are sketched with the same TDD pattern; detailed
steps will be expanded at execution time following the conventions
established in Phases 1-4.
2026-06-05 08:52:03 +05:30
amitwh 3646dc29c6 docs(spec): fix spec self-review issues (typo, drag-vs-resize, lazy-load ambiguity) 2026-06-05 08:27:33 +05:30
amitwh a999f598cc docs(spec): add React + shadcn/ui UI redesign design spec
Brainstormed via superpowers:brainstorming. Locks in:
- Full feature parity with legacy renderer
- Polished + Glassy (Raycast/Arc) visual style
- IDE-style layout with draggable divider
- shadcn/ui + Motion (Framer Motion) + Zustand stack
- A/B/D modal patterns (no command palette)
- 10-phase vertical-slice implementation plan
2026-06-05 08:26:02 +05:30
amitwh 7a396f64a6 feat(renderer): setup React, Vite, Tailwind CSS and Zustand state management 2026-06-03 23:23:59 +05:30
amitwh 88e9a5290d fix(renderer): add ensureEditor fallback and fix pandoc export path
1. Source editor blank: Added ensureEditor() method with try-catch that
   lazily creates the CodeMirror editor when setEditorContent is called
   if the initial DOMContentLoaded creation failed or was skipped.
   Replaced inline createEditor calls in createTabElements and
   DOMContentLoaded with ensureEditor().

2. Export via pandoc failing: runPandocCmd parsed the full path
   /bin/linux/pandoc as the command, then prepended it to args because
   parsed.command !== 'pandoc'. This caused pandoc to receive its own
   binary path as the first input file. Fix: use path.basename() to
   check if the command ends with 'pandoc' (or 'pandoc.exe').

Amit Haridas
2026-06-03 20:44:00 +05:30
amitwh fff15d8d3e fix(renderer): add window.electronAPI shim and update CSP for KaTeX
The main window uses nodeIntegration without preload, so window.electronAPI
was undefined. This caused the DOMContentLoaded handler to crash at:
  await window.electronAPI.getAppVersion()
which prevented the CodeMirror editor from being created (blank source
window) and stopped renderer-ready from being sent (broken menu/options).

Fixes:
1. Add window.electronAPI shim at top of renderer.js wrapping ipcRenderer.
2. Update CSP meta tag to allow KaTeX CDN (style-src, script-src, font-src).

Amit Haridas
2026-06-03 15:37:20 +05:30
amitwh c574d77c20 fix(renderer): remove let ModalManager to prevent SyntaxError on load
ModalManager.js is loaded via <script> tag in index.html, which
declares class ModalManager in the global script scope. renderer.js
was then doing 'let ModalManager;' which caused:
  SyntaxError: Identifier 'ModalManager' has already been declared

This prevented renderer.js from executing at all, breaking tabs,
editor, file open, and preview rendering.

Fix: conditionally require ModalManager only if undefined, without
re-declaring. In sloppy mode this safely assigns to the existing global.

Amit Haridas
2026-06-03 15:25:22 +05:30
amitwh 272215f9af fix(renderer): prevent welcome screen from overwriting opened markdown files
The welcome tab setup awaited getAppVersion() inside DOMContentLoaded.
While yielding, the renderer-ready timeout fired, file-opened was processed,
and openFile rendered the markdown. When the welcome setup resumed, it
overwrote tab.content and preview.innerHTML with the welcome screen,
leaving the preview blank.

Fix: only show the welcome screen if the tab is still empty (no filePath
and no content) when the async setup resumes.

Amit Haridas
2026-06-03 15:14:41 +05:30
amitwh 0192590567 fix(renderer): add missing closing brace for redo IPC handler
The ipcRenderer.on('redo') callback was missing its closing });
introduced in a9e05d2, causing SyntaxError: Unexpected end of input.

Amit Haridas
2026-06-03 14:36:59 +05:30
347 changed files with 38777 additions and 38369 deletions
+5 -2
View File
@@ -2,9 +2,9 @@ name: CI
on:
push:
branches: [master]
branches: [master, react-electron]
pull_request:
branches: [master]
branches: [master, react-electron]
jobs:
test:
@@ -24,5 +24,8 @@ jobs:
- name: Run tests
run: npm test
- name: Run renderer tests
run: npm run test:renderer
- name: Run linter
run: npm run lint
+58 -4
View File
@@ -29,7 +29,7 @@ jobs:
run: npm test
- name: Build Linux packages
run: npm run build:linux-ci -- --publish=never
run: npm run build:linux-ci -- --publish=always
- name: Upload Linux artifacts
uses: actions/upload-artifact@v4
@@ -77,13 +77,13 @@ jobs:
env:
CSC_LINK: code-signing-cert.pfx
CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
run: npm run build:win-signed -- --publish=never
run: npm run build:win-signed -- --publish=always
- name: Build Windows packages (unsigned)
if: ${{ env.CERT_AVAILABLE != 'true' }}
env:
CSC_IDENTITY_AUTO_DISCOVERY: 'false'
run: npm run build:win-unsigned -- --publish=never
run: npm run build:win-unsigned -- --publish=always
- name: Upload Windows artifacts
uses: actions/upload-artifact@v4
@@ -94,8 +94,42 @@ jobs:
dist/*.zip
retention-days: 5
build-macos:
runs-on: macos-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- name: Install dependencies
run: npm ci
- name: Download external tools (pandoc)
run: node scripts/download-tools.js
- name: Run tests
run: npm test
- name: Build macOS packages (unsigned)
env:
CSC_IDENTITY_AUTO_DISCOVERY: 'false'
run: npm run build:mac -- --publish=always
- name: Upload macOS artifacts
uses: actions/upload-artifact@v4
with:
name: macos-artifacts
path: |
dist/*.dmg
dist/*.zip
retention-days: 5
release:
needs: [build-linux, build-windows]
needs: [build-linux, build-windows, build-macos]
if: always()
runs-on: ubuntu-latest
steps:
@@ -115,8 +149,28 @@ jobs:
name: windows-artifacts
path: dist
- name: Download macOS artifacts
uses: actions/download-artifact@v4
continue-on-error: true
with:
name: macos-artifacts
path: dist
- name: Create GitHub Release
uses: softprops/action-gh-release@v2
with:
generate_release_notes: true
files: dist/*
- name: Mirror artifacts to ConcreteInfo update feed
if: env.CONCRETEINFO_DEPLOY_HOOK != ''
env:
CONCRETEINFO_DEPLOY_HOOK: ${{ secrets.CONCRETEINFO_DEPLOY_HOOK }}
run: |
curl -fsSL -X POST \
-H "Authorization: Bearer ${{ secrets.CONCRETEINFO_DEPLOY_HOOK }}" \
-F "version=${GITHUB_REF_NAME#v}" \
-F "artifacts=@dist/latest-mac.yml" \
-F "artifacts=@dist/latest-linux.yml" \
-F "artifacts=@dist/latest-windows.yml" \
https://updates.concreteinfo.co.in/api/v1/ingest
+52
View File
@@ -0,0 +1,52 @@
# Changelog
All notable changes to markdown-converter will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [5.1.0] - 2026-06-08
### Added
- Auto-update via electron-updater against GitHub Releases (default) or ConcreteInfo self-hosted feed.
- Light, skippable first-run wizard: theme, update channel, starter template.
- One-shot v4.4.1 → v5 settings migration with backup at `settings.v4.bak.json`.
- Local crash dump capture (cap 20, auto-prune) and a CrashReportModal.
- "Updates" section in Settings: channel picker, Check now, auto-check toggle.
## [5.0.0] - 2026-06-06
### Added
- **Complete React 19 + Vite + TypeScript renderer** replacing the legacy vanilla-JS UI (Phases 1-9 of the React UI redesign)
- Native macOS/Windows/Linux menus with command palette and keyboard shortcuts
- Settings sheet with 5 tabs (editor, theme, keybindings, advanced, about) and 17+ persisted fields
- Modal layer with 13 modal kinds (export PDF/DOCX/HTML/Word, batch, settings, about, welcome, confirm, ASCII gen, table gen, find in files)
- 10 advanced tools: ASCII generator (figlet), table generator, Word export (.docx via `docx` lib), find-in-files (recursive regex), REPL (markdown snippet preview), print preview, zen mode (Esc exits), minimap, breadcrumbs-with-symbols, git status (porcelain parser)
- Sonner toast notifications at 4 wire points (file save, open file/folder, 4 export dialogs)
- 3 mount strategies: ModalLayer dialogs, App.tsx global overlays, editor/sidebar integrations
- `ipc.file.writeBuffer` for renderer-side binary file output (used by Word .docx export)
- `ipc.file.search` (recursive regex), `ipc.file.gitStatus`, `ipc.print.show`, `ipc.app.showSaveDialog`
- 305 unit + integration tests (vitest + React Testing Library)
- Per-package @radix-ui primitives (checkbox, dialog, select, switch, tabs, radio-group, scroll-area, slider, collapsible, label, context-menu)
- shadcn/ui (new-york style) primitives, manually pasted (CLI broken on Node 24)
- Feature-first main process decomposition: `src/main/{files,menu,window,word-template,utils}/` + glue files
### Changed
- **BREAKING**: Renderer is now React-only. The legacy `src/renderer.js` (5319 lines) and all vanilla-JS UI scripts/styles are removed.
- Main process decomposed from a 4311-line `src/main.js` into feature-first modules under `src/main/`
- New entrypoint: `src/main/index.js` (was `src/main.js`)
- `src/index.html` (1667-line legacy orphan) removed; renderer served by `src/renderer/index.html` (Vite root)
- IPC contract: handlers throw on error, `safeCall` catches → returns `{ ok: false, error }`. `result.ok` is at top level, NOT nested in `result.data.ok`
- Settings store: `useSettingsStore` (zustand persist with zod validation), 17+ persisted fields
- Modal state: `useAppStore.modal: ModalState` discriminated union with 13 kinds; `openModal` uses TS conditional types to enforce prop requirements
### Removed
- `src/renderer.js` (legacy vanilla-JS renderer, 5319 lines)
- 8 legacy stylesheets: `src/styles.css`, `src/styles-modern.css`, `src/styles-concreteinfo.css`, `src/styles-sidebar.css`, `src/styles-zen.css`, `src/styles-welcome.css`, `src/fonts.css`
- 5 legacy scripts: `src/command-palette.js`, `src/print-preview.js`, `src/welcome.js`, `src/zen-mode.js`, `src/wordTemplateExporter.js`
- 2 legacy HTMLs: `src/ascii-generator.html`, `src/table-generator.html`
- `src/main.js` (4311-line god file, replaced by `src/main/index.js`)
- `src/index.html` (1667-line legacy orphan at project root, replaced by `src/renderer/index.html`)
- 9 dead IPC channels from `src/preload.js`: `toggle-command-palette`, `print-preview`, `print-preview-styled`, `open-ascii-generator`, `open-table-generator`, `show-ascii-generator`, `show-ascii-generator-window`, `show-table-generator`, `show-table-generator-window`
[5.0.0]: https://github.com/amitwh/markdown-converter/releases/tag/v5.0.0
+97 -55
View File
@@ -1,103 +1,145 @@
# CLAUDE.md — MarkdownConverter (master)
# CLAUDE.md — MarkdownConverter (react-electron)
> General code-quality, JavaScript, git, security, and testing standards are in the **global CLAUDE.md**. This file holds project- and branch-specific notes.
> General code-quality, TypeScript, 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.
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, plugin system, and auto-updater.
- **Version:** 4.4.5
- **Version:** 5.0.1
- **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.
This is the **React rewrite branch**the renderer has been rebuilt with React 19 + TypeScript + Tailwind CSS + shadcn/ui, replacing the vanilla JS renderer from master. The main process remains vanilla CommonJS JavaScript. A dual dev workflow runs Vite (renderer) and Electron (main) concurrently.
Key differences from master:
- Renderer: React 19 + TypeScript (TSX) instead of vanilla JS DOM manipulation
- Bundler: Vite for the renderer (`vite.renderer.config.ts`)
- UI: shadcn/ui (Radix primitives + Tailwind) instead of hand-rolled CSS
- State: Zustand 5 stores instead of global mutable state
- Security: `contextIsolation: true` + `nodeIntegration: false` (preload with channel whitelisting) instead of master's open renderer
- Build: two-stage (Vite build renderer, then electron-builder packages) instead of single electron-builder pass
- Testing: dual test runners — Vitest (renderer/React/TS) + Jest (main process/JS)
- Main process is now in `src/main/` (modular) instead of flat `src/main.js`
- Adds auto-updater via `electron-updater` with GitHub Releases + self-hosted feed support
- Adds React Hook Form + Zod for form validation, Lucide React icons, Motion for animations
- Legacy sidebar modules (`src/sidebar/*.js`) still exist alongside new React sidebar (`src/renderer/components/sidebar/`)
## 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`
### Main Process (`src/main/`)
Modular structure (improvement over master's monolith):
- `src/main/index.js` — IPC handlers, Pandoc invocation, export logic (~3,500 lines)
- `src/main/PDFOperations.js`PDF manipulation via `pdf-lib`
- `src/main/GitOperations.js` — Git operations via `simple-git`
- `src/main/store.js` — Custom JSON settings store (NOT electron-store)
- `src/main/window/index.js` — BrowserWindow creation with three-mode loading (dev/prod/packaged)
- `src/main/menu/` — Application menu definitions
- `src/main/ipc/` — Crash handlers, updater handlers
- `src/main/updater/` — Auto-update service, feed config, migration runner
- `src/main/files/` — File operation modules
- `src/main/word-template/` — Word template export
### 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`)
Properly isolated. Uses `contextBridge` with **channel whitelisting** (`ALLOWED_SEND_CHANNELS`, `ALLOWED_RECEIVE_CHANNELS` arrays). The renderer has no direct Node access.
### 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.
### Renderer (`src/renderer/`)
React 19 + TypeScript application bundled by Vite:
- `src/renderer/App.tsx` — Root component: assembles AppShell, modals, command palette, toaster
- `src/renderer/components/layout/AppShell.tsx` — Three-panel resizable layout (sidebar | editor | preview)
- `src/renderer/stores/` — Zustand stores: `app-store`, `editor-store`, `file-store`, `preview-store`, `settings-store`, `command-store`
- `src/renderer/hooks/` — Custom hooks: `use-shortcut`, `use-file-shortcuts`, `use-menu-action`, `use-scroll-sync`, `use-zen-mode`, `use-export-source`
- `src/renderer/components/modals/` — 30+ modal dialogs as React components
- `src/renderer/components/editor/` — CodeMirror 6 editor React wrapper
- `src/renderer/components/preview/` — Markdown renderer with Mermaid lazy loading
- `src/renderer/components/sidebar/` — React sidebar panels (FileTree, GitStatus, Outline, Snippets, Templates)
- `src/renderer/components/ui/` — shadcn/ui primitives (button, dialog, sheet, select, tabs, etc.)
- `src/renderer/lib/` — Utilities: typed IPC wrapper (`ipc.ts`), export modules, validators
- `src/renderer/types/` — TypeScript declarations: `electron.d.ts` (window.electronAPI), `ipc.ts` (IPC types)
### 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
- **`contextIsolation: true` + `nodeIntegration: false`** (properly secured, unlike master)
- Preload with explicit channel whitelisting
- TypeScript declarations ensure type-safe IPC
- Pandoc invoked via `execFile` (not `exec`)
- Permission handler: only `clipboard-read`/`clipboard-write` allowed
- ESLint enforces `no-eval`, `no-implied-eval`, `no-new-func`
- CSP in `index.html` restricts script/style/img/font/connect sources
### 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`.
Unchanged from master. Manifest-based discovery, built-in `writing-studio` plugin.
## 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 |
| **Node.js** | >= 20 | Electron 41 bundles Node 20.x; Vite 8 requires Node 18+ |
| **Pandoc** | Yes (for exports) | Downloaded to `bin/<platform>/pandoc` via `scripts/download-tools.js` (v3.9.0.2). Falls back to system PATH. |
| **FFmpeg** | Bundled | `ffmpeg-static` npm package; `asarUnpacked` |
| **MiKTeX / TeX Live** | Optional | LaTeX PDF export; MiKTeX PATH injected on Windows |
| **ImageMagick** | Optional | Linux image conversion; deb dependency |
| **LibreOffice** | Optional | Enhanced document conversion; 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 dev # Start dev mode: Vite dev server (port 5173) + Electron (concurrently)
npm run dev:renderer # Vite dev server only (port 5173)
npm run dev:electron # Electron only (waits for Vite on tcp:5173)
npm start # Launch Electron app (prod mode, requires built renderer)
npm run preview # Build renderer then launch Electron
npm test # Jest — main process tests (vanilla JS)
npm run test:renderer # Vitest — renderer tests (React/TS)
npm run lint # ESLint check
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
npm run format:check # Prettier check
npm run download-tools # Download Pandoc binaries
npm run generate-icons # Generate app icons
```
**Dev workflow:** `npm run dev` starts Vite (renderer HMR on `:5173`) and Electron concurrently. The main process loads from `http://localhost:5173` in dev mode.
## Build & Package
**Tool:** `electron-builder` (v26.0.12), config inline in `package.json` (no separate config file).
**Two-stage build process:**
1. `npm run build:renderer` — Vite builds renderer to `dist/renderer/`
2. `npm run build` — electron-builder packages main process + preload + built renderer
**Tool:** `electron-builder` (v26.0.12), config inline in `package.json`.
| 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:win` | Windows: NSIS + portable + zip (x64) |
| `npm run build:mac` | macOS: dmg + zip (x64 + arm64) |
| `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`.
**Packaged files:** `src/main/**`, `src/preload.js`, `src/plugins/**`, `package.json`. Renderer built output copied to resources as `renderer/`.
**Bundled with builds:** Pandoc binary per platform, FFmpeg (asarUnpacked).
**Output:** `dist/` directory.
**Auto-updater:** `electron-updater` with GitHub Releases (default) and optional ConcreteInfo self-hosted feed.
**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.
- **Dual-process architecture.** Main process is vanilla CommonJS JavaScript (`src/main/`). Renderer is React 19 + TypeScript + Tailwind (`src/renderer/`). They are separate build targets.
- **Vite for renderer only.** Main process is NOT bundled — Electron loads `src/main/index.js` directly. Do not add TypeScript to main process files.
- **Tailwind + shadcn/ui.** Use shadcn/ui components (`src/renderer/components/ui/`) for all UI primitives. Custom theme in `tailwind.config.js`. Path alias `@` maps to `src/renderer/`. Brand color: `#e5461f`.
- **Zustand for state.** All renderer state lives in `src/renderer/stores/`. Each store is a separate file. Use immer for immutable updates.
- **Typed IPC.** `src/renderer/types/electron.d.ts` declares `window.electronAPI`. `src/renderer/lib/ipc.ts` provides type-safe wrappers. When adding new IPC channels, update both the preload whitelist AND the TypeScript declarations.
- **Legacy + new sidebar.** `src/sidebar/*.js` (vanilla JS) and `src/renderer/components/sidebar/` (React TSX) both exist. New sidebar features go in the React version.
- **Pandoc is external.** Must be present for non-HTML/PDF exports. Download via `npm run download-tools` or install system-wide.
- **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/`.
- **PDF rendering:** `pdfjs-dist` (viewer). **PDF manipulation:** `pdf-lib` in main process.
- **Editor:** CodeMirror 6, configured in `src/editor/codemirror-setup.js`, wrapped as React component in `src/renderer/components/editor/CodeMirrorEditor.tsx`.
- **Tests:** Jest (main process, `tests/**/*.test.js`, 15% threshold) + Vitest (renderer, `tests/**/*.{test,spec}.{ts,tsx}`, v8 coverage on `src/renderer/`).
- **ESLint flat config** with ECMAScript 2022. Prettier: 2-space, single quotes, semicolons, 100-char width.
- **No tsconfig.json at root** — TypeScript is renderer-only, handled by Vite. Do not add `tsconfig.json` for the main process.
- **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.
- **Single instance lock** via `app.requestSingleInstanceLock()`.
+16 -1
View File
@@ -140,6 +140,21 @@ Open PDF files directly in MarkdownConverter:
- Rotate pages left or right
- Close PDF to return to editor
## Distribution & Updates
v5.x uses `electron-updater` against two feeds:
- **GitHub Releases** (default, public): the public release at `https://github.com/amitwh/markdown-converter/releases`. The CI workflow publishes `latest-{mac,linux,windows}.yml` on every tag.
- **ConcreteInfo self-hosted** (opt-in for enterprise deployments): `https://updates.concreteinfo.co.in/v5/`. CI mirrors artifacts on every release when `CONCRETEINFO_DEPLOY_HOOK` is set as a repository secret.
Users switch the feed in **Settings → Updates → Update channel**. Auto-check is enabled by default; disable it in the same panel.
### Manual mirror
```bash
CONCRETEINFO_DEPLOY_HOOK=... npm run publish:concreteinfo -- 5.1.0
```
## Open Source
MarkdownConverter is 100% open-source. All dependencies are permissively licensed:
@@ -162,4 +177,4 @@ Amit Haridas (amit.wh@gmail.com)
## Version
v4.5.0
v4.1.0
File diff suppressed because one or more lines are too long
-93
View File
@@ -1,93 +0,0 @@
Copyright (c) 2014, The Fira Code Project Authors (https://github.com/tonsky/FiraCode)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
File diff suppressed because one or more lines are too long
Binary file not shown.
-93
View File
@@ -1,93 +0,0 @@
Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 361 KiB

+20
View File
@@ -0,0 +1,20 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/renderer/styles/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
@@ -0,0 +1,270 @@
# Packaging — All-Platform Build + GitHub Releases
**Goal:** Make `npm run dist:all` produce Linux + Windows + macOS artifacts, and have the existing `.github/workflows/release.yml` create a GitHub Release on tag push with those artifacts. No code signing in this iteration.
**Scope (user decisions 2026-06-06):**
- Target platforms: **all three** (Linux .deb/AppImage/snap, Windows NSIS/portable/zip, macOS dmg/zip)
- Distribution: **GitHub Releases** (no auto-update; static artifacts only)
- Code signing: **skip for now** (unsigned binaries; Windows SmartScreen will warn, macOS Gatekeeper will quarantine)
**Architecture:** This is mostly about completing the existing scaffold. `electron-builder` 26.0.12, `scripts/download-tools.js`, `scripts/generate-icons.js`, the `package.json` scripts, and `release.yml` are all already in place. We need to (1) close a real bug in the `files` config, (2) add the macOS job to the workflow, and (3) declare macOS targets in the package config.
**Tech stack:** electron-builder 26.0.12, GitHub Actions `ubuntu-latest`/`windows-latest`/`macos-latest` runners, softprops/action-gh-release@v2 for the release creation.
---
## Task 1 — Fix the `files` config in `package.json`
The current `files: ["src/**/*", ...]` matches `src/renderer/**/*.tsx` and ships dev source into the asar. The shipped renderer should be the built `dist/renderer/**/*` output, not TS source. asarUnpack for ffmpeg-static is correct and stays.
**Files:** `package.json` (build.files, build.extraResources)
### Step 1.1 — Replace `files` block
```json
"files": [
"src/main/**/*",
"src/preload.js",
"src/plugins/**/*",
"package.json"
],
"extraResources": [
{
"from": "dist/renderer",
"to": "renderer"
}
]
```
- `src/main/**/*` — main process source (entry point + all main-process modules)
- `src/preload.js` — single preload file at the root of `src/`
- `src/plugins/**/*` — built-in plugins (referenced from main process; the `extraFiles: []` line in the current config is empty, so this is the right pattern)
- `package.json` — required for the asar `app.asar/package.json` lookup electron does at runtime
- `dist/renderer` moves to `extraResources` because it should live alongside the asar (not inside it) — the asar is sealed and we want the renderer to be a separately-updatable resource path. Production main loads it via `loadFile(path.join(__dirname, '../../dist/renderer/index.html'))` which, in the packaged app, resolves to `process.resourcesPath/renderer/index.html`. **This requires changing the loadFile path in `src/main/window/index.js` too** — see Task 4.
### Step 1.2 — Verify
- `npm run build:linux` should produce a working .AppImage
- Inside the .AppImage (extract with `--appimage-extract`), check `resources/` has `app.asar` and a `renderer/` directory containing `index.html` and `assets/`
- Inside `app.asar`, check `src/main/index.js` is present and `src/renderer/` is absent
---
## Task 2 — Add macOS targets + icon to `package.json` build config
**Files:** `package.json`
### Step 2.1 — Replace the existing `mac` block
```json
"mac": {
"category": "public.app-category.productivity",
"identity": null,
"target": [
{ "target": "dmg", "arch": ["x64", "arm64"] },
{ "target": "zip", "arch": ["x64", "arm64"] }
],
"icon": "assets/icon.icns",
"darkModeSupport": true,
"hardenedRuntime": false,
"gatekeeperAssess": false,
"entitlements": null
}
```
- `identity: null` is intentional for unsigned builds
- `darkModeSupport: true` — the app already supports dark mode; this is just metadata
- `hardenedRuntime: false` and `gatekeeperAssess: false` — without signing, these are the only way the build succeeds
- `entitlements: null` — no entitlements file; some features (jit) won't work but Electron's main process doesn't need them in this app
- **`.icns` is missing.** For this iteration we'll use the default Electron icon and add a follow-up to generate one. The build will succeed without it but the produced .app will have the default icon.
### Step 2.2 — Generate a placeholder `.icns` (optional, can be deferred)
If we want a proper icon, the path is:
1. `npm run generate-icons` to produce `assets/icons/*.png` (already done)
2. Use `png2icns` (Linux) or `iconutil` (mac) to bundle them into `assets/icon.icns`
3. We don't have either on this Linux container; defer to a follow-up plan
For this iteration: ship without `.icns` and accept the default icon.
### Step 2.3 — Add `publish` config
```json
"publish": {
"provider": "github",
"owner": "amitwh",
"repo": "markdown-converter",
"releaseType": "release"
}
```
Even without auto-update, this tells `electron-builder` to write `latest-mac.yml` / `latest-linux.yml` next to the artifacts. Useful for future auto-update wiring. CI passes `--publish=never` to override.
---
## Task 3 — Add macOS job to `.github/workflows/release.yml`
**Files:** `.github/workflows/release.yml`
### Step 3.1 — Add a third job between `build-windows` and `release`
Insert after the `build-windows` job (around line 96):
```yaml
build-macos:
runs-on: macos-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- name: Install dependencies
run: npm ci
- name: Download external tools (pandoc)
run: node scripts/download-tools.js
- name: Run tests
run: npm test
- name: Build macOS packages (unsigned)
env:
CSC_IDENTITY_AUTO_DISCOVERY: 'false'
run: npm run build:mac -- --publish=never
- name: Upload macOS artifacts
uses: actions/upload-artifact@v4
with:
name: macos-artifacts
path: |
dist/*.dmg
dist/*.zip
retention-days: 5
```
### Step 3.2 — Wire macOS into the `release` job's `needs` and downloads
Change the `release` job:
```yaml
release:
needs: [build-linux, build-windows, build-macos]
...
```
And add a third download step (after the Windows download):
```yaml
- name: Download macOS artifacts
uses: actions/download-artifact@v4
continue-on-error: true
with:
name: macos-artifacts
path: dist
```
`continue-on-error: true` is intentional — a failed macOS build shouldn't block a release of working Linux+Windows artifacts.
---
## Task 4 — Update `src/main/window/index.js` for the resource path
**Files:** `src/main/window/index.js`
### Step 4.1 — Update the loadFile path
The current code (line 35):
```js
const prodPath = path.join(__dirname, '../../dist/renderer/index.html');
```
Inside the packaged app, `__dirname` points into the asar. `process.resourcesPath` points to the directory holding `app.asar` + the `renderer/` extraResources dir. Change to:
```js
const rendererIndex = app.isPackaged
? path.join(process.resourcesPath, 'renderer', 'index.html')
: path.join(__dirname, '../../dist/renderer/index.html');
win.loadFile(rendererIndex);
```
This needs to happen after the dev/prod branch is decided. The existing `if (!app.isPackaged && devServerUrl)` block already handles dev mode; the else branch needs this update.
### Step 4.2 — Add a guard for missing renderer in prod
```js
if (app.isPackaged) {
try {
fs.accessSync(path.join(process.resourcesPath, 'renderer', 'index.html'));
} catch {
console.error('[WINDOW] Renderer not found at', process.resourcesPath, '— did you run `npm run build:renderer` before packaging?');
}
}
```
Failure mode: someone runs `npm run build` without first building the renderer. Without this guard, the window opens blank and the user has no idea why.
---
## Task 5 — Test on this Linux box
### Step 5.1 — Local verification
```bash
npm ci
npm run download-tools # idempotent; bin/linux/pandoc already exists
npm run build:renderer
npm run build:linux # produces .deb, .AppImage in dist/
```
Inspect the .AppImage:
```bash
chmod +x dist/*.AppImage
./dist/MarkdownConverter-*.AppImage --appimage-extract
ls squashfs-root/resources/
# Expect: app.asar renderer/
ls squashfs-root/resources/renderer/
# Expect: index.html assets/
```
### Step 5.2 — Run the produced app
```bash
./dist/MarkdownConverter-*.AppImage
```
The app should:
- Launch with the AppShell, header, sidebar
- Allow opening a folder / file
- Export to PDF/DOCX/HTML work (pandoc bundled)
### Step 5.3 — Tag + push to test the release workflow (optional)
Only do this if the user wants to verify the full pipeline. A dry-run on the CI side via `act` would be cleaner but `act` doesn't run macos-latest jobs locally. If the user wants to verify the workflow, push a `v5.0.1-rc1` tag and watch the Actions tab.
---
## Success criteria
1. `npm run dist:all` produces all three platform families on this Linux box (or at least Linux + mac, since Windows is built on Windows)
2. The .AppImage launches and the app works end-to-end
3. `release.yml` runs all three jobs on a tag push and creates a GitHub release with the union of artifacts
4. No regressions: 306/306 tests still pass, dev workflow still works
5. The `files` bug is fixed: no `.tsx` in the packaged asar
## Known limitations (intentional, can be follow-ups)
- **No `.icns`** — the macOS app will have the default Electron icon. Generating a proper `.icns` requires `iconutil` (mac) or `png2icns` (cross-platform); neither is on this Linux box.
- **No code signing** — Windows SmartScreen will warn; macOS Gatekeeper will quarantine unsigned `.dmg`. Setting up signing later is a config-only change (no structural rework): add `CSC_LINK`/`CSC_KEY_PASSWORD` for Windows, `CSC_LINK` (Apple Developer ID) for mac.
- **No auto-update** — user decisions for this iteration. Wiring `electron-updater` is a follow-up; the `publish` config from Task 2 puts metadata in the right place.
- **Cross-build quirks** — building macOS from Linux produces a `.dmg` that is generally usable but may show a "this app is from an unidentified developer" prompt the first time. Right-click → Open to bypass once. Documented in the release notes.
## Out of scope
- CHANGELOG.md updates (not part of packaging)
- electron-updater wiring
- Code signing cert procurement
- Snap store / Microsoft Store / Mac App Store submission
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
@@ -1,759 +0,0 @@
# Feature Audit, Bug Fixes, New Features & Security Hardening Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Fix every verified non-working feature in MarkdownConverter, build out the orphaned image/audio/video converter subsystem, add 9 new features extending existing architecture, remediate a critical Pandoc argument-injection vulnerability plus other security findings, then produce a clean local release build.
**Architecture:** Vanilla JS Electron app (`contextIsolation: false`, `nodeIntegration: true`). Main process (`src/main.js`, ~5000 lines) owns all IPC handlers, dialogs, and external-tool invocation (Pandoc, ffmpeg, ImageMagick, LibreOffice) via `execFile`. Renderer (`src/renderer.js`, ~6150 lines) is vanilla DOM manipulation; it uses `ipcRenderer` both directly (legacy) and via the whitelisted `window.electronAPI` bridge (`src/preload.js`). Feature modules live under `src/main/*.js` (PDF, Git, font embedding) and `src/plugins/*.js` (plugin system). Follow this existing pattern for all new code — do not introduce a bundler, framework, or TypeScript.
**Tech Stack:** Electron 41, Node 20, Pandoc (external binary via `getPandocPath()`), ffmpeg-static (bundled, via `getFFmpegPath()`), `sharp` (image ops, currently a devDependency — must move to `dependencies`), `pdf-lib` (`src/main/PDFOperations.js`), `simple-git` (`src/main/GitOperations.js`), Jest for tests, ESLint flat config + Prettier.
**Spec:** This plan is self-originated from a live codebase audit (two parallel research passes + manual verification of every finding against `src/main.js`, `src/preload.js`, `src/renderer.js`, `src/main/GitOperations.js`, `src/main/PDFOperations.js`, `src/plugins/plugin-context.js`). No separate spec doc exists; each task below states the verified current behavior and the required end behavior.
## Global Constraints
- `contextIsolation: false` / `nodeIntegration: true` is the existing (weak) security model for this branch — do not attempt to flip it as part of this plan; that is a separate, much larger migration tracked elsewhere. Do not make the security posture worse than it already is.
- All new external-process invocation MUST use `execFile` with an explicit argument array — **never** build a shell-style command string and re-tokenize it. This is the root cause of Finding SEC-1 below; do not repeat the pattern anywhere new.
- All new/changed IPC channels must be added to the correct whitelist array in `src/preload.js` (`ALLOWED_SEND_CHANNELS` for renderer→main, `ALLOWED_RECEIVE_CHANNELS` for main→renderer) — an unlisted channel is silently blocked (see `preload.js:261-282`).
- 2-space indent, single quotes, semicolons, 100-char width (Prettier). Run `npm run lint` and `npm run format:check` before every commit; both must pass.
- `npm test` (Jest, jsdom) must stay green (247 tests / 32 suites passing at plan start) after every task.
- File size limit for user-opened files is `MAX_FILE_SIZE_MB = 50` (`main.js:57-58`) — reuse this constant for any new file-accepting handler, don't invent a new limit.
- Error messages shown to the user must go through `sanitizeErrorMessage()` (`main.js:61-70`) if they might contain absolute paths.
- No forbidden markers (`TODO`, `FIXME`, `stub`, `placeholder`, `coming soon`, etc.) in any changed file.
---
## Phase A — Fix Verified Non-Working Features
### Task 1: Fix "Open PDF File..." menu item (wrong IPC channel)
**Files:**
- Modify: `src/main.js:1666-1684` (`openPDFFile()`)
**Verified current behavior:** `openPDFFile()` sends `mainWindow.webContents.send('open-pdf-viewer', files[0])` (line 1682). No listener for `'open-pdf-viewer'` exists anywhere in the repo. The working PDF-editor open path is `show-pdf-editor-dialog`, whose renderer listener is `ipcRenderer.on('show-pdf-editor-dialog', (event, operation, openedFilePath) => {...})` (`renderer.js:3685`).
- [ ] **Step 1:** In `openPDFFile()`, replace the send call:
```javascript
mainWindow.webContents.send('show-pdf-editor-dialog', null, files[0]);
```
- [ ] **Step 2:** Manually verify: `npm start`, open a PDF via File → Open PDF File (or the equivalent menu entry), confirm the PDF editor dialog opens with the file loaded (same result as opening it via the PDF toolbar button).
- [ ] **Step 3:** `npm run lint && npm test`
- [ ] **Step 4:** Commit: `git add src/main.js && git commit -m "fix(pdf): route Open PDF File menu item to the working editor dialog channel"`
### Task 2: Fix "Clear Recent Files" silent no-op
**Files:**
- Modify: `src/main.js:731-736` (menu click handler), `src/main.js:4480-4491` (`ipcMain.on('clear-recent-files', ...)`)
**Verified current behavior:** The menu click handler does `mainWindow.webContents.send('clear-recent-files')` (main→renderer), but nothing in the renderer listens for that channel. The actual deletion logic lives in `ipcMain.on('clear-recent-files', (event) => {...})`, which only fires on a renderer→main `.send`/`.invoke` that never happens from this menu path. `preload.js:342` exposes a separate `clearRecent: () => ipcRenderer.send('clear-recent-files')` helper that IS the correct renderer→main direction, but the menu item bypasses it entirely by sending the same channel name in the wrong direction.
- [ ] **Step 1:** Extract the deletion logic into a standalone function above the `ipcMain.on` registration:
```javascript
function clearRecentFilesOnDisk() {
const userDataPath = app.getPath('userData');
const recentFilesPath = path.join(userDataPath, 'recent-files.json');
fs.writeFileSync(recentFilesPath, JSON.stringify([], null, 2));
createMenu();
}
```
- [ ] **Step 2:** Update the `ipcMain.on` handler to use it:
```javascript
ipcMain.on('clear-recent-files', (event) => {
try {
clearRecentFilesOnDisk();
event.reply('recent-files-cleared');
} catch (error) {
console.error('Error clearing recent files:', error);
}
});
```
- [ ] **Step 3:** Update the menu click handler (`main.js:731-736`) to call the main-process function directly and notify the renderer the same way the working path does:
```javascript
{
label: 'Clear Recent Files',
click: () => {
try {
clearRecentFilesOnDisk();
mainWindow.webContents.send('recent-files-cleared');
} catch (error) {
console.error('Error clearing recent files:', error);
}
},
},
```
- [ ] **Step 4:** Manually verify: open a few recent files, use File menu → Clear Recent Files, confirm the Recent Files submenu is empty afterward.
- [ ] **Step 5:** `npm run lint && npm test`
- [ ] **Step 6:** Commit: `git add src/main.js && git commit -m "fix(menu): make Clear Recent Files actually clear the list"`
### Task 3: Wire "Insert Template" submenu (content already exists, just needs a listener)
**Files:**
- Modify: `src/renderer.js` (near the existing `templates` sidebar-panel registration, ~line 1744-1758)
**Verified current behavior:** `main.js:811-847` sends `mainWindow.webContents.send('load-template-menu', '<file>.md')` for 10 menu items. `'load-template-menu'` IS already in `ALLOWED_RECEIVE_CHANNELS` (`preload.js:241`) but nothing in the renderer listens for it — **however** the underlying feature is fully implemented already: `src/templates/*.md` contains real content for all 10 templates, `ipcMain.handle('load-template', ...)` (`main.js:4641-4649`) reads them, and the sidebar Templates panel (`renderer.js:1744-1758`) already does exactly the load-into-new-tab flow needed. Do not author new template content — reuse the existing flow.
- [ ] **Step 1:** Extract the existing inline callback at `renderer.js:1746-1757` into a shared named function so both the sidebar panel and the new menu listener use it:
```javascript
async function loadTemplateIntoNewTab(file) {
const templateContent = await ipcRenderer.invoke('load-template', file);
if (templateContent) {
const content = templateContent.replace(/\{\{DATE\}\}/g, new Date().toISOString().split('T')[0]);
tabManager.createNewTab();
const tab = tabManager.tabs.get(tabManager.activeTabId);
tabManager.setEditorContent(tab.id, content);
}
}
```
Place this near the top of the sidebar-initialization block (wherever `tabManager` is already in scope at that point), then replace the sidebar panel's inline callback with `render: (container) => getRenderTemplatesPanel()(container, loadTemplateIntoNewTab)`.
- [ ] **Step 2:** Add a listener for the menu channel, near the other `ipcRenderer.on(...)` registrations in the same initialization area:
```javascript
ipcRenderer.on('load-template-menu', (event, file) => {
loadTemplateIntoNewTab(file);
});
```
- [ ] **Step 3:** Manually verify: File → New from Template → Blog Post (and 2-3 others), confirm a new tab opens with the real template content, `{{DATE}}` replaced with today's date.
- [ ] **Step 4:** `npm run lint && npm test`
- [ ] **Step 5:** Commit: `git add src/renderer.js && git commit -m "fix(templates): wire New from Template menu to existing template-loading flow"`
### Task 4: Wire Command Palette / Sidebar / Bottom Panel menu toggles
**Files:**
- Modify: `src/renderer.js` (near command palette init ~line 2045, sidebar manager init ~line 1703, bottom/REPL panel init ~line 1007)
**Verified current behavior:** `main.js:1047,1057-1069,1075` send `toggle-command-palette`, `toggle-sidebar-panel` (with a panel-id arg: `explorer`/`git`/`snippets`/`templates`), and `toggle-bottom-panel`. All three channels are already whitelisted in `ALLOWED_RECEIVE_CHANNELS` (`preload.js:242-244`). None have a renderer listener — the Command Palette currently only opens via its own `Ctrl+Shift+P` keydown handler (`renderer.js:2045-2049`), sidebar panels only toggle via their own buttons, and the bottom/REPL panel only auto-shows when a code block runs (`renderer.js:1007`).
- [ ] **Step 1:** Find the existing function/method that the `Ctrl+Shift+P` keydown handler calls to open the command palette (read `renderer.js:2040-2060` to get its exact name), then add:
```javascript
ipcRenderer.on('toggle-command-palette', () => {
/* call the same open/toggle function the Ctrl+Shift+P handler uses */
});
```
- [ ] **Step 2:** Find the existing method on `sidebarManager` used to show/activate a panel by id (read the `SidebarManager` class, likely in `src/sidebar/` — grep `class SidebarManager`), then add:
```javascript
ipcRenderer.on('toggle-sidebar-panel', (event, panelId) => {
/* call sidebarManager's existing toggle/show method with panelId */
});
```
- [ ] **Step 3:** Find the existing function that shows/hides the bottom REPL panel (read `renderer.js` around line 997-1012), then add:
```javascript
ipcRenderer.on('toggle-bottom-panel', () => {
/* call the same show/hide function used when a code block runs, but toggle rather than force-show */
});
```
- [ ] **Step 4:** Manually verify each of the three View-menu items now actually opens/toggles its target.
- [ ] **Step 5:** `npm run lint && npm test`
- [ ] **Step 6:** Commit: `git add src/renderer.js && git commit -m "fix(menu): wire Command Palette / Sidebar / Bottom Panel View-menu toggles"`
### Task 5: Fix broken `git-diff` IPC call (renderer invokes a channel main never handles)
**Files:**
- Modify: `src/main/GitOperations.js`, `src/main.js` (near the other `git-*` handlers, ~line 4889-4904)
- Modify: `src/sidebar/git-panel.js`, `src/renderer.js:1714-1731`
**Verified current behavior:** `renderer.js:1718-1721` passes `gitDiff: (file) => ipcRenderer.invoke('git-diff', { file })` into the Git sidebar panel, but `src/main.js` has **no** `ipcMain.handle('git-diff', ...)` registered anywhere (only `git-status`, `git-stage`, `git-commit`, `git-log` exist at lines 4889-4904), and `GitOperations.js` exports no `diff` function. Additionally, `src/sidebar/git-panel.js:1` receives this callback as a parameter literally named `_gitDiff` (underscore-prefixed = intentionally unused) — the panel never even calls it. This is dead on both ends. Fold the real fix into Task 14 (Phase C, new git features) rather than doing a throwaway partial fix here.
- [ ] **Step 1:** No action in this task — cross-reference only. Mark this task done once Task 14 lands, since it fully supersedes it.
### Task 6: Whitelist and wire "Document Compare" menu item
**Files:**
- Modify: `src/preload.js` (`ALLOWED_RECEIVE_CHANNELS`)
**Verified current behavior:** `main.js:1411-1413` sends `mainWindow.webContents.send('show-document-compare')`, but `'show-document-compare'` is **not** in `ALLOWED_RECEIVE_CHANNELS` at all (unlike the other dead channels, which were at least whitelisted) — per `preload.js:288-...` the `on()` wrapper drops unlisted channels. Building the actual compare UI is Task 20 (Phase C) — this task only covers the whitelist fix; C8 covers the working listener + UI.
- [ ] **Step 1:** Add `'show-document-compare'` to `ALLOWED_RECEIVE_CHANNELS` in `src/preload.js` (alongside the other `show-*-dialog`/`show-*-converter` entries for consistency).
- [ ] **Step 2:** `npm run lint && npm test`
- [ ] **Step 3:** Commit: `git add src/preload.js && git commit -m "fix(preload): whitelist show-document-compare channel"`
- Do not close this task's manual-verification step until Task 20 lands (there is nothing to see until the listener exists).
### Task 7: Reachable UI control for monospace font settings
**Files:**
- Modify: `src/renderer.js` (Settings panel/dialog — locate existing settings UI, e.g. grep `showSettingsDialog` or similar)
**Verified current behavior:** `ipcMain.handle('set-monospace-settings', ...)` exists and works (`main.js:375` area) and the getter is used at `renderer.js:1857`, but no UI control anywhere calls the setter — a user cannot actually change the monospace font/ligature preference.
- [ ] **Step 1:** Read `main.js` around the `get-monospace-settings`/`set-monospace-settings` handlers to learn the exact settings shape (property names, e.g. `{ enabled, fontFamily, ligatures }` — use whatever the real shape is, do not invent fields).
- [ ] **Step 2:** Locate the app's existing Settings panel/dialog in `renderer.js` (grep for where `get-monospace-settings` is already invoked at line ~1857 to find the surrounding UI section) and add a toggle + font-family control there, following the existing settings-control markup/CSS pattern already used for other settings in that same dialog.
- [ ] **Step 3:** Wire the control's change handler to `ipcRenderer.invoke('set-monospace-settings', {...})` and apply the returned/echoed setting immediately (toggle the body class the same way the existing `renderer.js:1857`-area code does on load).
- [ ] **Step 4:** Manually verify: toggle monospace font in Settings, confirm the editor/preview font changes live, and confirm the preference persists across an app restart.
- [ ] **Step 5:** `npm run lint && npm test`
- [ ] **Step 6:** Commit: `git add src/renderer.js && git commit -m "feat(settings): expose monospace font toggle in Settings UI"`
### Task 8: Dependency hygiene — `jszip` and `sharp`
**Files:**
- Modify: `package.json`
**Verified current behavior:** `src/main/DocxFontEmbedder.js` and `src/main/EpubFontEmbedder.js` `require('jszip')` directly, but `jszip` is declared only under `overrides`, not `dependencies` — it currently resolves only via hoisting from a transitive dependency. `sharp` is declared under `devDependencies` (used today only by `scripts/generate-icons.js` at build time) but Phase B (media converter) will require it at **runtime** in the packaged app, where devDependencies are not installed/bundled.
- [ ] **Step 1:** In `package.json`, add `"jszip": "^3.10.1"` to `dependencies` (matching the version already pinned in `overrides`; keep the `overrides` entry too — it still forces the version for transitive consumers).
- [ ] **Step 2:** Move `"sharp": "^0.34.3"` from `devDependencies` to `dependencies`.
- [ ] **Step 3:** Add `"node_modules/sharp/**"` to the `build.asarUnpack` array in `package.json` (alongside the existing `ffmpeg-static` and `assets/fonts` entries) — `sharp` ships native `.node` bindings that must not be packed into `app.asar`.
- [ ] **Step 4:** Run `npm install` to regenerate the lockfile, then `npm test` to confirm nothing broke.
- [ ] **Step 5:** Commit: `git add package.json package-lock.json && git commit -m "fix(deps): move jszip and sharp to runtime dependencies, unpack sharp from asar"`
---
## Phase B — Build Out Image/Audio/Video Converter (currently orphaned dead API)
**Context:** `preload.js` whitelists 16 channels (`image-convert`, `image-batch-convert`, `image-resize`, `image-compress`, `image-rotate`, `audio-convert`, `audio-batch-convert`, `audio-extract`, `audio-trim`, `audio-merge`, `video-convert`, `video-batch-convert`, `video-compress`, `video-trim`, `video-frames`, `video-gif`) and 3 receive channels (`show-image-converter`, `show-audio-converter`, `show-video-converter`), but **zero** `ipcMain` handlers exist for any of them and no menu/UI ever triggers them. This is distinct from the already-working generic "Universal Converter" (`universal-convert`/`universal-convert-batch`, `main.js:2377-2622`) which does plain format-to-format conversion via bare `convertWithImageMagick`/`convertWithFFmpeg` calls with no operation-specific options. Phase B builds the **operation-specific** toolkit (resize/compress/rotate for images; trim/merge/extract for audio; compress/trim/frames/gif for video) as a new `src/main/MediaOperations.js` module, modeled directly on the existing `src/main/PDFOperations.js` pattern (single `executeOperation(operation, data)` dispatcher).
### Task 9: Image operations backend (`sharp`-based)
**Files:**
- Create: `src/main/ImageOperations.js`
- Create: `tests/main/ImageOperations.test.js`
- Modify: `src/main.js` (register handlers near the PDF operation handlers, ~line 4535)
**Interfaces:**
- Produces: `module.exports = { executeOperation, imageConvert, imageResize, imageCompress, imageRotate }``executeOperation(operation, data)` where `operation` is one of `'convert' | 'resize' | 'compress' | 'rotate'` and `data` always includes `{ inputPath, outputPath }` plus operation-specific fields below.
- `imageConvert(data)`: `data = { inputPath, outputPath, format }` (`format` is one of sharp's supported output formats: `jpeg|png|webp|avif|tiff|gif`) → uses `sharp(inputPath).toFormat(format).toFile(outputPath)`.
- `imageResize(data)`: `data = { inputPath, outputPath, width, height, fit }` (`fit` one of `'cover'|'contain'|'fill'|'inside'|'outside'`, default `'inside'`) → `sharp(inputPath).resize({ width, height, fit }).toFile(outputPath)`. `width`/`height` may be `null` (sharp allows omitting one dimension to preserve aspect ratio) but not both.
- `imageCompress(data)`: `data = { inputPath, outputPath, quality }` (`quality` integer 1-100, default 80) → route by output extension: jpeg/webp/avif use `{ quality }`, png uses `{ quality, compressionLevel: 9 }`.
- `imageRotate(data)`: `data = { inputPath, outputPath, angle }` (`angle` integer degrees, any value — sharp's `.rotate(angle)` handles non-90 multiples by expanding canvas) → `sharp(inputPath).rotate(angle).toFile(outputPath)`.
- All four validate `inputPath` exists and is ≤ `MAX_FILE_SIZE` (import the same 50MB constant convention used in `main.js` — pass it in as a parameter from `main.js`, do not redefine a second limit).
- All four return `{ success: true, outputPath }` on success or throw an `Error` with a sanitized (no absolute-path leakage beyond what's already the app's convention) message on failure — `main.js` wraps calls in try/catch per the PDFOperations pattern.
- [ ] **Step 1:** Write `tests/main/ImageOperations.test.js` covering all four operations against small fixture images (generate fixtures at test time with `sharp` itself — e.g. a 100x100 red PNG buffer — do not commit binary fixtures):
```javascript
const sharp = require('sharp');
const fs = require('fs');
const os = require('os');
const path = require('path');
const ImageOperations = require('../../src/main/ImageOperations');
describe('ImageOperations', () => {
let tmpDir, inputPath;
beforeEach(async () => {
tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'imgops_'));
inputPath = path.join(tmpDir, 'in.png');
await sharp({ create: { width: 100, height: 100, channels: 3, background: { r: 255, g: 0, b: 0 } } })
.png()
.toFile(inputPath);
});
afterEach(() => fs.rmSync(tmpDir, { recursive: true, force: true }));
test('imageConvert converts PNG to JPEG', async () => {
const outputPath = path.join(tmpDir, 'out.jpg');
const result = await ImageOperations.imageConvert({ inputPath, outputPath, format: 'jpeg' });
expect(result.success).toBe(true);
expect(fs.existsSync(outputPath)).toBe(true);
const meta = await sharp(outputPath).metadata();
expect(meta.format).toBe('jpeg');
});
test('imageResize resizes to given width preserving aspect', async () => {
const outputPath = path.join(tmpDir, 'out.png');
await ImageOperations.imageResize({ inputPath, outputPath, width: 50, height: null, fit: 'inside' });
const meta = await sharp(outputPath).metadata();
expect(meta.width).toBe(50);
});
test('imageRotate rotates by given angle', async () => {
const outputPath = path.join(tmpDir, 'out.png');
await ImageOperations.imageRotate({ inputPath, outputPath, angle: 90 });
const meta = await sharp(outputPath).metadata();
expect(meta.width).toBe(100); // 90deg on square stays square
});
test('imageCompress produces a smaller or equal-size JPEG at low quality', async () => {
const jpegPath = path.join(tmpDir, 'in.jpg');
await sharp(inputPath).jpeg({ quality: 100 }).toFile(jpegPath);
const outputPath = path.join(tmpDir, 'compressed.jpg');
await ImageOperations.imageCompress({ inputPath: jpegPath, outputPath, quality: 10 });
expect(fs.statSync(outputPath).size).toBeLessThanOrEqual(fs.statSync(jpegPath).size);
});
test('executeOperation dispatches to the correct function', async () => {
const outputPath = path.join(tmpDir, 'out.png');
const result = await ImageOperations.executeOperation('rotate', { inputPath, outputPath, angle: 180 });
expect(result.success).toBe(true);
});
test('unknown operation throws', async () => {
await expect(ImageOperations.executeOperation('bogus', {})).rejects.toThrow();
});
});
```
- [ ] **Step 2:** Run `npx jest tests/main/ImageOperations.test.js` — expect FAIL (module doesn't exist).
- [ ] **Step 3:** Implement `src/main/ImageOperations.js` per the interfaces above, using `sharp`. Model the file's shape (JSDoc header, `executeOperation` switch, `module.exports`) on `src/main/PDFOperations.js:404-436`.
- [ ] **Step 4:** Run `npx jest tests/main/ImageOperations.test.js` — expect PASS.
- [ ] **Step 5:** In `src/main.js`, add a single dispatcher handler near the PDF operation handler (`process-pdf-operation`, ~line 4535):
```javascript
const ImageOperations = require('./main/ImageOperations');
// ...
ipcMain.handle('process-image-operation', async (event, { operation, data }) => {
try {
return await ImageOperations.executeOperation(operation, data);
} catch (error) {
return { success: false, error: sanitizeErrorMessage(error.message) };
}
});
```
Note: this collapses the originally-whitelisted 5 separate channel names (`image-convert`, `image-batch-convert`, `image-resize`, `image-compress`, `image-rotate`) into one operation-dispatch channel, matching the existing `process-pdf-operation` pattern — remove the 5 stale names from `ALLOWED_SEND_CHANNELS` in `src/preload.js` and add `'process-image-operation'` in their place (also add `'select-image-folder'` if batch needs folder selection — mirror `select-pdf-folder`). Batch (`image-batch-convert`) is handled in Task 12.
- [ ] **Step 6:** `npm run lint && npm test`
- [ ] **Step 7:** Commit: `git add src/main/ImageOperations.js tests/main/ImageOperations.test.js src/main.js src/preload.js && git commit -m "feat(image): implement sharp-based image operations backend"`
### Task 10: Audio operations backend (`ffmpeg`-based)
**Files:**
- Create: `src/main/AudioOperations.js`
- Create: `tests/main/AudioOperations.test.js`
- Modify: `src/main.js`
**Interfaces:**
- `module.exports = { executeOperation, buildConvertArgs, buildTrimArgs, buildExtractArgs, buildMergeArgs }`. Because ffmpeg is an external binary, this module exposes **pure argument-builder functions** (easily unit-testable without invoking a real binary) plus `executeOperation`, which is the only piece that actually spawns ffmpeg via `execFile` — inject the ffmpeg path and an `execFileFn` (defaulting to Node's real `execFile`) as parameters so tests can stub it.
- `buildConvertArgs({ inputPath, outputPath, format })` → returns `string[]` args, e.g. `['-i', inputPath, '-y', outputPath]` (format is implied by `outputPath`'s extension — ffmpeg infers it; do not pass a separate `-f` unless `format` is explicitly given and differs from the extension, in which case append `['-f', format]` before `outputPath`).
- `buildTrimArgs({ inputPath, outputPath, startTime, duration })``['-i', inputPath, '-ss', String(startTime), '-t', String(duration), '-y', outputPath]`. `startTime`/`duration` are seconds (numbers), validate they are finite non-negative numbers before building args (throw `Error('Invalid trim range')` otherwise — this is the injection guard, since these become argv elements passed straight to execFile with no shell involved, but malformed values should still fail fast rather than reach ffmpeg).
- `buildExtractArgs({ inputPath, outputPath })` → extracts the audio track from a video/audio file: `['-i', inputPath, '-vn', '-acodec', 'copy', '-y', outputPath]` (fallback if codec copy fails: caller retries without `-acodec copy`, letting ffmpeg transcode — implement this retry inside `executeOperation`'s `'extract'` case, not in the pure builder).
- `buildMergeArgs({ inputPaths, outputPath })``inputPaths` is `string[]` (2+ files) → build a temp concat-list file is the safe approach; but since this module must stay pure/testable, `buildMergeArgs` returns `{ args, concatListContent }` where `concatListContent` is the `file '<path>'` lines the caller writes to a temp file, and `args = ['-f', 'concat', '-safe', '0', '-i', tempListPath, '-c', 'copy', '-y', outputPath]` (caller supplies `tempListPath` after writing the file — see `executeOperation`'s `'merge'` case).
- `executeOperation(operation, data, { ffmpegPath, execFileFn } = {})` where `operation` is `'convert'|'trim'|'extract'|'merge'`, defaults `ffmpegPath` to the real `getFFmpegPath()`-resolved path (passed in from `main.js`, not re-implemented here) and `execFileFn` to `require('child_process').execFile`. Returns a Promise resolving `{ success: true, outputPath }`.
- [ ] **Step 1:** Write `tests/main/AudioOperations.test.js` testing the pure builders directly (no real ffmpeg spawn needed for these) plus one `executeOperation` test with a stubbed `execFileFn`:
```javascript
const AudioOperations = require('../../src/main/AudioOperations');
describe('AudioOperations argument builders', () => {
test('buildConvertArgs builds correct ffmpeg args', () => {
const args = AudioOperations.buildConvertArgs({ inputPath: '/a.wav', outputPath: '/b.mp3' });
expect(args).toEqual(['-i', '/a.wav', '-y', '/b.mp3']);
});
test('buildTrimArgs builds correct trim args', () => {
const args = AudioOperations.buildTrimArgs({ inputPath: '/a.mp3', outputPath: '/b.mp3', startTime: 5, duration: 10 });
expect(args).toEqual(['-i', '/a.mp3', '-ss', '5', '-t', '10', '-y', '/b.mp3']);
});
test('buildTrimArgs rejects non-finite startTime', () => {
expect(() =>
AudioOperations.buildTrimArgs({ inputPath: '/a.mp3', outputPath: '/b.mp3', startTime: NaN, duration: 10 })
).toThrow('Invalid trim range');
});
test('buildMergeArgs builds concat-demuxer args and list content', () => {
const { args, concatListContent } = AudioOperations.buildMergeArgs({
inputPaths: ['/a.mp3', '/b.mp3'],
outputPath: '/out.mp3',
});
expect(concatListContent).toContain("file '/a.mp3'");
expect(concatListContent).toContain("file '/b.mp3'");
expect(args).toContain('-f');
expect(args).toContain('concat');
});
});
describe('AudioOperations.executeOperation', () => {
test('convert calls execFileFn with ffmpeg path and args, resolves success', async () => {
const execFileFn = (cmd, args, opts, cb) => cb(null, '', '');
const result = await AudioOperations.executeOperation(
'convert',
{ inputPath: '/a.wav', outputPath: '/b.mp3' },
{ ffmpegPath: '/usr/bin/ffmpeg', execFileFn }
);
expect(result.success).toBe(true);
expect(result.outputPath).toBe('/b.mp3');
});
test('unknown operation rejects', async () => {
await expect(
AudioOperations.executeOperation('bogus', {}, { ffmpegPath: '/usr/bin/ffmpeg', execFileFn: () => {} })
).rejects.toThrow();
});
});
```
- [ ] **Step 2:** Run `npx jest tests/main/AudioOperations.test.js` — expect FAIL.
- [ ] **Step 3:** Implement `src/main/AudioOperations.js` per the interfaces above. Use `fs.writeFileSync`/`fs.mkdtempSync` (Node `os.tmpdir()`) inside `executeOperation`'s `'merge'` case to materialize the concat list file before invoking `execFileFn`.
- [ ] **Step 4:** Run `npx jest tests/main/AudioOperations.test.js` — expect PASS.
- [ ] **Step 5:** In `src/main.js`, add the dispatcher handler (mirrors Task 9 Step 5):
```javascript
const AudioOperations = require('./main/AudioOperations');
// ...
ipcMain.handle('process-audio-operation', async (event, { operation, data }) => {
try {
return await AudioOperations.executeOperation(operation, data, { ffmpegPath: getFFmpegPath() });
} catch (error) {
return { success: false, error: sanitizeErrorMessage(error.message) };
}
});
```
Replace the 5 stale audio channel names in `ALLOWED_SEND_CHANNELS` (`preload.js`) with `'process-audio-operation'` (batch handled in Task 12).
- [ ] **Step 6:** `npm run lint && npm test`
- [ ] **Step 7:** Commit: `git add src/main/AudioOperations.js tests/main/AudioOperations.test.js src/main.js src/preload.js && git commit -m "feat(audio): implement ffmpeg-based audio operations backend"`
### Task 11: Video operations backend (`ffmpeg`-based)
**Files:**
- Create: `src/main/VideoOperations.js`
- Create: `tests/main/VideoOperations.test.js`
- Modify: `src/main.js`
**Interfaces:** Same shape as Task 10 (`executeOperation(operation, data, { ffmpegPath, execFileFn })`, pure arg builders for testability).
- `buildConvertArgs({ inputPath, outputPath })``['-i', inputPath, '-y', outputPath]`.
- `buildCompressArgs({ inputPath, outputPath, crf })` (`crf` 0-51, default 28 — lower is higher quality/larger file, matching libx264 convention) → `['-i', inputPath, '-vcodec', 'libx264', '-crf', String(crf), '-y', outputPath]`. Validate `crf` is an integer 0-51 (throw otherwise).
- `buildTrimArgs({ inputPath, outputPath, startTime, duration })` → identical shape/validation to `AudioOperations.buildTrimArgs`.
- `buildFramesArgs({ inputPath, outputDir, fps })` (`fps` frames-per-second to extract, default 1) → `['-i', inputPath, '-vf', `fps=${fps}`, path.join(outputDir, 'frame-%04d.png')]`. Validate `fps` is a positive finite number.
- `buildGifArgs({ inputPath, outputPath, fps, width })` (`fps` default 10, `width` default 480, height auto via `-1`) → `['-i', inputPath, '-vf', `fps=${fps},scale=${width}:-1:flags=lanczos`, '-y', outputPath]`.
- `operation` is `'convert'|'compress'|'trim'|'frames'|'gif'`.
- [ ] **Step 1:** Write `tests/main/VideoOperations.test.js` mirroring Task 10's test structure — one test per builder function checking exact `args` array output plus validation-rejection tests for `compress` (bad `crf`) and `frames` (bad `fps`), plus one `executeOperation` test with a stubbed `execFileFn` for `'convert'` and one for `'frames'` that also verifies the output directory is created (`fs.mkdirSync(outputDir, { recursive: true })` inside `executeOperation`'s `'frames'` case before spawning ffmpeg).
- [ ] **Step 2:** Run `npx jest tests/main/VideoOperations.test.js` — expect FAIL.
- [ ] **Step 3:** Implement `src/main/VideoOperations.js` per the interfaces above.
- [ ] **Step 4:** Run `npx jest tests/main/VideoOperations.test.js` — expect PASS.
- [ ] **Step 5:** In `src/main.js`, add the dispatcher handler (mirrors B1/B2):
```javascript
const VideoOperations = require('./main/VideoOperations');
// ...
ipcMain.handle('process-video-operation', async (event, { operation, data }) => {
try {
return await VideoOperations.executeOperation(operation, data, { ffmpegPath: getFFmpegPath() });
} catch (error) {
return { success: false, error: sanitizeErrorMessage(error.message) };
}
});
```
Replace the 6 stale video channel names in `ALLOWED_SEND_CHANNELS` with `'process-video-operation'`.
- [ ] **Step 6:** `npm run lint && npm test`
- [ ] **Step 7:** Commit: `git add src/main/VideoOperations.js tests/main/VideoOperations.test.js src/main.js src/preload.js && git commit -m "feat(video): implement ffmpeg-based video operations backend"`
### Task 12: Media Operations UI (menu entries + dialog + batch)
**Files:**
- Create: `src/renderer/media-operations-dialog.js` (follow whatever module pattern `src/renderer.js` already uses for the PDF editor dialog — read `renderer.js:3685` onward to find that dialog's implementation file/pattern before creating this one)
- Modify: `src/main.js` (menu — add "Image/Audio/Video Tools..." entries under the existing `Tools` submenu, next to Table Generator/ASCII Art Generator at `main.js:1395-1414`; also extend `universal-convert-batch`'s existing batch-folder flow OR add three new `process-*-operation` batch loops mirroring the pattern at `main.js:2454-2563`, whichever requires less duplication once B1-B3 exist — prefer reusing `executeOperation` in a loop over `fs.readdirSync` results, matching the existing batch style)
- Modify: `src/preload.js` (add `'show-image-converter'`... already present; add `'process-image-operation'`/`'process-audio-operation'`/`'process-video-operation'` to `ALLOWED_SEND_CHANNELS` if not already added by B1-B3)
**Verified current behavior:** `show-image-converter`/`show-audio-converter`/`show-video-converter` are whitelisted receive channels with no sender and no listener — Batch Image/Audio/Video Conversion menu items already exist and work via the generic Universal Converter (`main.js:1283-1291`, `2454-2563`) for plain format conversion; this task adds the **operation-specific** single-file dialogs (resize/compress/rotate/trim/merge/extract/frames/gif) that B1-B3 implemented.
- [ ] **Step 1:** Add three menu items under `Tools` (`main.js`, after the "Document Compare" item added conceptually in Task 6/C8):
```javascript
{ label: 'Image Tools...', click: () => mainWindow.webContents.send('show-image-converter') },
{ label: 'Audio Tools...', click: () => mainWindow.webContents.send('show-audio-converter') },
{ label: 'Video Tools...', click: () => mainWindow.webContents.send('show-video-converter') },
```
- [ ] **Step 2:** Build the renderer-side dialog module. Read how the existing PDF Editor dialog (triggered by `show-pdf-editor-dialog`) is structured/rendered in `renderer.js` (search for its listener at line 3685 and follow into whatever function/file builds its DOM) and replicate that construction pattern for a single dialog that: (a) lets the user pick an operation from a dropdown scoped to the current media kind (image/audio/video), (b) shows the relevant operation-specific fields (e.g. width/height for resize, quality for compress, angle for rotate, startTime/duration for trim, fps/width for gif), (c) has an input-file picker (reuse the existing `dialog.showOpenDialogSync` pattern via a new small `ipcMain.handle('select-media-file', ...)` if no generic file-picker IPC already exists — check first; `select-pdf-folder` is folder-only, so a new single-file-picker handler is likely needed), (d) calls `ipcRenderer.invoke('process-image-operation', { operation, data })` (or audio/video) and shows success/error the same way `pdf-operation-complete`/`pdf-operation-error` are surfaced elsewhere.
- [ ] **Step 3:** Wire the three `ipcRenderer.on('show-image-converter'|'show-audio-converter'|'show-video-converter', ...)` listeners in `renderer.js` to open the new dialog scoped to the right media kind.
- [ ] **Step 4:** Manually verify with `npm start`: Tools → Image Tools → Resize a test PNG, confirm the output file is created at the chosen size; repeat once each for one audio op (trim) and one video op (compress) using any small local test media file.
- [ ] **Step 5:** `npm run lint && npm test`
- [ ] **Step 6:** Commit: `git add -A && git commit -m "feat(media): add Image/Audio/Video Tools dialogs wired to new operation backends"`
---
## Phase C — New Features (extending existing systems)
### Task 13: Expose more Pandoc export/import formats already supported by the bundled Pandoc
**Files:**
- Modify: `src/main.js` (export submenu ~`main.js:864-959`; `exportFile()` at `main.js:1766`; the format switch inside `performExportWithOptions`/`buildPandocExportArgs` — see Task 23, which replaces string-building with an args-array builder; add cases there, not to the old string-concat code)
**New formats to add** (all already importable per the existing import switch at `main.js:3507` — Pandoc supports both directions for each):
- Export: AsciiDoc (`asciidoc`), reStructuredText (`rst`), MediaWiki (`mediawiki`), Org-mode (`org`), Textile (`textile`), man page (`man`), Jupyter Notebook (`ipynb`).
- [ ] **Step 1:** Add 7 new menu entries to the Export submenu (`main.js:864-959`), grouped in a new labeled section, each calling `exportFile('<format>')` with the format id above.
- [ ] **Step 2:** Add each format to the extension-mapping table used by the export path (the `formatExtMap` object at `main.js:2624-2629` — add `asciidoc: 'adoc', mediawiki: 'wiki'`; the rest already match their format id as extension).
- [ ] **Step 3:** RULING (pre-flight scan, execution order is Phase A→B→C→D, so Task 23 has NOT run yet when this task executes): add each format as an additional `-t <format>` case to the **current** string-concatenation `pandocCmd` logic in `performExportWithOptions` (the same pattern already used for `'json'`, `'beamer'`, `'jira'` etc. around `main.js:2825-2965` — a simple `pandocCmd = \`${getPandocPath()} "${currentFile}" -t <format> -o "${outputFile}"\`; exportWithPandoc(pandocCmd, outputFile, format);` branch per new format is sufficient; do not introduce any new string-interpolated user-controlled fields — these 7 formats take no extra options beyond the standard ones already handled generically above the format switch). When Task 23 runs later (Phase D) it will read the current state of this function, per its own Step 3 instruction to "read every one of the sites... in full," and MUST carry these 7 new cases into its args-array rewrite — that responsibility already belongs to SEC-1's own scope and needs no separate action here.
- [ ] **Step 4:** Manually verify: export the currently-open sample markdown file to each of the 7 new formats, confirm each produces a non-empty output file Pandoc itself can round-trip (`pandoc out.rst -o roundtrip.md` succeeds).
- [ ] **Step 5:** `npm run lint && npm test`
- [ ] **Step 6:** Commit: `git add src/main.js && git commit -m "feat(export): expose AsciiDoc, RST, MediaWiki, Org, Textile, man, ipynb export formats"`
### Task 14: Git branch / diff / push / pull
**Files:**
- Modify: `src/main/GitOperations.js`
- Modify: `tests/` (find and extend the existing GitOperations test file — grep `tests/**/GitOperations*`; if none exists, create `tests/main/GitOperations.test.js`)
- Modify: `src/main.js` (register 4 new `ipcMain.handle` calls near the existing git handlers, `main.js:4889-4904`)
- Modify: `src/preload.js` (add `'git-branch'`, `'git-diff'` is already listed but unhandled — see below, `'git-push'`, `'git-pull'` to `ALLOWED_SEND_CHANNELS`)
- Modify: `src/sidebar/git-panel.js`, `src/renderer.js:1714-1731`
**Interfaces (add to `GitOperations.js`, matching the existing `try { ... } catch (err) { return { error: err.message } }` pattern used by every existing function there):**
```javascript
async function diff(dir, file) { /* git.diff([file]) if file given, else git.diff() for full working-tree diff */ }
async function branches(dir) { /* git.branchLocal() — returns { all, current, branches } */ }
async function checkoutBranch(dir, name, isNew) { /* isNew=true: git.checkoutLocalBranch(name); else git.checkout(name) */ }
async function push(dir) { /* git.push() */ }
async function pull(dir) { /* git.pull() */ }
module.exports = { getStatus, stage, commit, log, diff, branches, checkoutBranch, push, pull };
```
- [ ] **Step 1:** Write/extend the Jest test file covering `diff`, `branches`, `checkoutBranch`, `push`, `pull` against a real temp git repo (follow whatever fixture pattern the existing Git-related tests use — if this is the first GitOperations test file, initialize a repo with `simple-git` itself inside `beforeEach` using `fs.mkdtempSync` + `simpleGit(tmpDir).init()`, matching how `simple-git` is already used in the module under test).
- [ ] **Step 2:** Run the new tests — expect FAIL (functions don't exist).
- [ ] **Step 3:** Implement the 5 new functions in `GitOperations.js` per the interfaces above.
- [ ] **Step 4:** Run the tests — expect PASS.
- [ ] **Step 5:** In `main.js`, register handlers next to the existing 4:
```javascript
ipcMain.handle('git-diff', async (event, { file }) => {
const dir = path.dirname(currentFile || app.getPath('documents'));
return GitOperations.diff(dir, file);
});
ipcMain.handle('git-branches', async () => GitOperations.branches(path.dirname(currentFile || app.getPath('documents'))));
ipcMain.handle('git-checkout', async (event, { name, isNew }) => GitOperations.checkoutBranch(path.dirname(currentFile || app.getPath('documents')), name, isNew));
ipcMain.handle('git-push', async () => GitOperations.push(path.dirname(currentFile || app.getPath('documents'))));
ipcMain.handle('git-pull', async () => GitOperations.pull(path.dirname(currentFile || app.getPath('documents'))));
```
(Match whatever `dir` resolution the existing `git-status` handler at `main.js:4889-4891` actually uses — read those 3 lines first and reuse the identical expression rather than inventing a new one.)
- [ ] **Step 6:** Add `'git-branches'`, `'git-checkout'`, `'git-push'`, `'git-pull'` to `ALLOWED_SEND_CHANNELS` in `preload.js` (`'git-diff'` is already present).
- [ ] **Step 7:** In `src/sidebar/git-panel.js`, rename the unused `_gitDiff` parameter to `gitDiff` and add UI to actually call it (a "diff" button/icon per changed file in the status list, rendering the returned diff text in a `<pre>` block or similar — follow the panel's existing rendering style for the status list). Add branch/push/pull UI following the same panel's existing button/section style.
- [ ] **Step 8:** In `renderer.js:1714-1731`, pass the 4 new callbacks (`gitBranches`, `gitCheckout`, `gitPush`, `gitPull`) into `getRenderGitPanel()` alongside the existing ones.
- [ ] **Step 9:** Manually verify in a real git-tracked test folder: view a file diff, list branches, create+checkout a new branch, (push/pull only if a real remote is available — otherwise verify the IPC round-trip returns a sane `{error: ...}` for a repo with no remote, not a crash).
- [ ] **Step 10:** `npm run lint && npm test`
- [ ] **Step 11:** Commit: `git add -A && git commit -m "feat(git): add diff, branch, checkout, push, pull to Git sidebar panel"`
### Task 15: More PDF operations — extract text, page numbers, crop, extract images
**Files:**
- Modify: `src/main/PDFOperations.js`, its test file (grep `tests/**/PDFOperations*`)
- Modify: `src/main.js` (`process-pdf-operation` already dispatches via `executeOperation` — no new handler needed, just new `case`s in `PDFOperations.js`'s existing switch at line 404)
- Modify: renderer PDF editor dialog UI (wherever the existing operation list/buttons are — find via the `show-pdf-editor-dialog` listener at `renderer.js:3685`)
**Interfaces (add to the existing `executeOperation` switch, `PDFOperations.js:404-430`):**
```javascript
async function pdfExtractText(data) { /* data: {inputPath}. Use pdf-lib's page.getTextContent() is NOT available in pdf-lib — pdf-lib has no text extraction. Use pdfjs-dist (already a dependency) instead: load with pdfjs-dist, iterate pages, getTextContent(), join strings. Return { success: true, text } */ }
async function pdfAddPageNumbers(data) { /* data: {inputPath, outputPath, position, startNumber}. For each page, drawText via pdf-lib at the given corner (reuse the position-mapping switch already present in pdfWatermark, PDFOperations.js:258-287, for corner math). */ }
async function pdfCrop(data) { /* data: {inputPath, outputPath, margins: {top,bottom,left,right}} in points. Use page.setCropBox(x, y, width, height) computed from the page's existing MediaBox minus margins. */ }
async function pdfExtractImages(data) { /* data: {inputPath, outputDir}. pdf-lib doesn't expose embedded image extraction either — use pdfjs-dist's page.getOperatorList() + page.objs to pull OPS.paintImageXObject image data, write each as PNG via sharp (already a dependency after Task 8). Return { success: true, count, files: string[] } */ }
```
Add 4 new `case` branches to `executeOperation` (`'extractText'`, `'pageNumbers'`, `'crop'`, `'extractImages'`) and add all 4 to `module.exports`.
- [ ] **Step 1:** Read `PDFOperations.js:233-317` (`pdfWatermark`) in full to reuse its exact position-to-coordinate mapping logic for `pdfAddPageNumbers` rather than re-deriving it.
- [ ] **Step 2:** Write tests for all 4 new functions in the existing PDFOperations test file, generating a minimal test PDF at test time via `pdf-lib`'s `PDFDocument.create()` (mirror however the existing test file already builds its fixture PDFs — check its `beforeEach`).
- [ ] **Step 3:** Run new tests — expect FAIL.
- [ ] **Step 4:** Implement the 4 functions.
- [ ] **Step 5:** Run new tests — expect PASS.
- [ ] **Step 6:** Add 4 corresponding buttons/menu entries to the PDF editor dialog UI, following its existing per-operation button pattern exactly (find where 'Watermark' or 'Rotate' is wired in the renderer PDF dialog and copy that structure).
- [ ] **Step 7:** Manually verify each of the 4 operations against a real PDF via the app UI.
- [ ] **Step 8:** `npm run lint && npm test`
- [ ] **Step 9:** Commit: `git add -A && git commit -m "feat(pdf): add extract text, page numbers, crop, extract images operations"`
### Task 16: PDF form field fill/flatten
**Files:**
- Modify: `src/main/PDFOperations.js` (+ test file), PDF editor dialog UI
**Interfaces:**
```javascript
async function pdfGetFormFields(data) { /* data: {inputPath}. PDFDocument.load(bytes) -> pdfDoc.getForm().getFields() -> map each to {name, type, value}. Return { success: true, fields } */ }
async function pdfFillForm(data) { /* data: {inputPath, outputPath, values: Record<string,string>, flatten}. Load, getForm(), for each key in values call form.getTextField(key).setText(value) (wrap per-field in try/catch to skip fields that don't exist or aren't text fields — this app's convention per pdfWatermark is to fail loudly on real errors but this is a batch-of-independent-fields case, so log+skip per-field failures and continue). If flatten, call form.flatten() before saving. */ }
```
Add `'formFields'` (get) and `'fillForm'` cases to `executeOperation`, add both to exports.
- [ ] **Step 1:** Write tests building a test PDF with an AcroForm text field via `pdf-lib`'s `form.createTextField()` API (check pdf-lib's docs/existing usage in the codebase for the exact field-creation calls — `PDFOperations.js` already imports `pdf-lib`, follow its existing import style).
- [ ] **Step 2:** Run tests — expect FAIL.
- [ ] **Step 3:** Implement both functions.
- [ ] **Step 4:** Run tests — expect PASS.
- [ ] **Step 5:** Add a "Fill Form" UI entry to the PDF editor dialog: on open, call `formFields` to list detected fields, render a text input per field, a "Flatten after fill" checkbox, then call `fillForm` on submit.
- [ ] **Step 6:** Manually verify against a real fillable PDF (search for one under `tests/fixtures/` or create one with `pdf-lib` in a scratch script — do not commit the scratch script).
- [ ] **Step 7:** `npm run lint && npm test`
- [ ] **Step 8:** Commit: `git add -A && git commit -m "feat(pdf): add form field detection, fill, and flatten"`
### Task 17: Plugin API — export-format and file-reader registration hooks
**Files:**
- Modify: `src/plugins/plugin-context.js`, `src/plugins/plugin-loader.js` (or wherever plugin manifests are validated/loaded — grep `plugin-loader.js`), `src/main.js` (export format switch — needs to consult plugin-registered formats)
**Interfaces (extend `PluginContext`, `plugin-context.js:64-71`, alongside the existing `this.exports` block):**
```javascript
this.formats = {
registerExportFormat: (id, opts) => {
// opts: { label, extension, handler: async (markdownContent, outputPath, options) => void }
if (formatRegistry) formatRegistry.register(`${pluginId}:${id}`, opts);
},
};
```
This requires a new small `FormatRegistry` (mirror the existing `plugin-registry.js` pattern — read it first to match its exact API shape, e.g. `register(id, opts)` / `getAll()` / `get(id)`) injected into `PluginContext`'s constructor `deps` alongside `sidebar`/`commands`/`statusBar`.
- [ ] **Step 1:** Read `src/plugins/plugin-registry.js` in full to learn its exact class/function shape before adding a sibling `FormatRegistry` (or extending the existing registry with a new namespace if it's already generic enough — prefer extending over duplicating if the existing registry is namespace-agnostic).
- [ ] **Step 2:** Add `registerExportFormat` to `PluginContext` per the interface above, wired to whatever registry mechanism Step 1 determined is the right fit.
- [ ] **Step 3:** In `src/main.js`'s export dispatch path (wherever the Export submenu's dynamic entries would need to merge in plugin formats — likely requires the Export submenu to be rebuilt after plugin load, similar to how `createMenu()` is already called after recent-files change in Task 2; check if `createMenu()` is idempotent/safe to call after plugin loading completes), add plugin-registered formats as additional Export submenu entries whose `click` handler calls the plugin's registered `handler` function instead of Pandoc.
- [ ] **Step 4:** Update the built-in `writing-studio` plugin's manifest/index (`src/plugins/built-in/`) with a trivial example usage of `registerExportFormat` (e.g. exporting sprint data as a `.txt` summary) — this both documents the new API and gives Step 5's manual test something concrete to click.
- [ ] **Step 5:** Write a unit test in `tests/plugins/` (find the existing plugin test directory/pattern) verifying a plugin calling `context.formats.registerExportFormat(...)` results in the registry containing the namespaced entry.
- [ ] **Step 6:** Manually verify: `npm start`, confirm the writing-studio example format appears in the Export menu and produces the expected output file when clicked.
- [ ] **Step 7:** `npm run lint && npm test`
- [ ] **Step 8:** Commit: `git add -A && git commit -m "feat(plugins): add export-format registration hook to plugin API"`
### Task 18: DOCX/EPUB template gallery UI
**Files:**
- Modify: `src/renderer.js` (export dialog for DOCX/EPUB — find via `exportWordWithTemplate()` at `main.js:881` and follow into whatever renderer dialog it opens)
- Modify: `src/main.js` (wherever the existing Word-template list is sourced from — grep `WordTemplateExporter` and `listTemplates`/`getTemplates`-style function)
**Verified context:** `main.js` already has `exportWordWithTemplate()` and `WordTemplateExporter` (`src/wordTemplateExporter.js`) — a template mechanism for DOCX exists but per the feature-inventory research pass has "no discoverable UI" for browsing available templates; the user has to already know a template exists. Read `src/wordTemplateExporter.js` in full first to learn how templates are currently listed/selected (is there a folder of `.dotx`/`.docx` template files? A hardcoded list?) before designing the gallery.
- [ ] **Step 1:** Read `src/wordTemplateExporter.js` and the renderer dialog `exportWordWithTemplate()` opens, to learn the exact current template-selection mechanism (function names, data shape).
- [ ] **Step 2:** Add a visual gallery (grid of template name + thumbnail-if-available, or name + short description if no thumbnails exist) to that same dialog, replacing or augmenting whatever minimal selector currently exists, following the dialog's existing CSS/markup conventions (check `src/styles.css` for the dialog's existing classes before inventing new ones).
- [ ] **Step 3:** Do the same for EPUB export if `main.js` has an equivalent EPUB-template mechanism (grep for `epub` + `template`); if none exists, skip EPUB (do not invent a template system that doesn't exist — note this explicitly as out of scope in the commit message rather than silently dropping it).
- [ ] **Step 4:** Manually verify: open the DOCX export dialog, see the template gallery, pick one, confirm the exported DOCX uses it.
- [ ] **Step 5:** `npm run lint && npm test`
- [ ] **Step 6:** Commit: `git add -A && git commit -m "feat(export): add visual template gallery to DOCX export dialog"`
### Task 19: CSV-to-markdown-table toolbar converter
**Files:**
- Modify: `src/renderer.js` (editor toolbar — find the existing toolbar button registration pattern, e.g. near table generator/ASCII generator toolbar buttons)
**Verified context:** Pandoc already imports CSV (`main.js:3507` import switch includes `csv`). This task adds a quick in-editor action: paste/select CSV-like text, convert to a markdown table without leaving the editor (distinct from the full file-import path).
- [ ] **Step 1:** Add a toolbar button "CSV → Table" (or a Command Palette entry, matching whichever pattern is more consistent with similar single-action editor tools already in the toolbar — check what's already there before choosing).
- [ ] **Step 2:** Implement a pure client-side CSV→Markdown-table converter function in `renderer.js` (no need to round-trip through Pandoc for this simple case — parse the current selection's lines by comma, respecting basic double-quote-wrapped fields containing commas; build a `| a | b |` / `|---|---|` markdown table). Keep this function small and testable — extract it to `src/lib/csv-to-markdown-table.js` if `src/renderer.js` doesn't already have a `src/lib/`-style extraction pattern for similar pure functions (check first).
- [ ] **Step 3:** Write a Jest unit test for the converter function covering: simple CSV, quoted fields containing commas, ragged rows (fewer columns in some rows — pad with empty cells), empty input.
- [ ] **Step 4:** Wire the toolbar button to: read the editor selection, run the converter, replace the selection with the resulting markdown table.
- [ ] **Step 5:** Manually verify: select a few lines of comma-separated text in the editor, click the button, confirm it becomes a proper markdown table.
- [ ] **Step 6:** `npm run lint && npm test`
- [ ] **Step 7:** Commit: `git add -A && git commit -m "feat(editor): add CSV-to-markdown-table toolbar converter"`
### Task 20: Document Compare / diff view (completes Task 6)
**Files:**
- Modify: `src/renderer.js` (new listener for `show-document-compare`, whitelisted in Task 6)
- Create: `src/renderer/document-compare-dialog.js` (or inline in `renderer.js` if that's the dominant pattern for similar dialogs — match Task 12's finding on dialog-module conventions)
**Verified context:** `main.js:1411-1413` sends `show-document-compare`; Task 6 whitelisted the channel; nothing renders it yet. This task adds an actual two-pane diff: either two arbitrary local files, or (leveraging Task 14's new `GitOperations.diff`) the current file against its last-committed git revision.
- [ ] **Step 1:** Build a simple two-file diff dialog: two "choose file" buttons (or one defaulting to the currently-open tab + one file picker for the comparison target), a line-by-line diff render. Do not add a new diff-algorithm dependency — write a minimal LCS-based line diff in a small pure function (`src/lib/line-diff.js`) since the app has no existing diff library; keep it under ~60 lines (standard textbook LCS-diff, not a full Myers-diff library port).
- [ ] **Step 2:** Write a Jest unit test for the line-diff function: identical files (no diffs), pure additions, pure deletions, mixed changes.
- [ ] **Step 3:** Add a "Compare with Git HEAD" option in the same dialog when the current file is inside a git repo, using `GitOperations.diff` from Task 14 (raw git diff text render, separate code path from the line-diff function — git's own diff output is already a diff, don't re-diff it).
- [ ] **Step 4:** Wire `ipcRenderer.on('show-document-compare', () => { /* open the dialog */ })` in `renderer.js`.
- [ ] **Step 5:** Manually verify: Tools → Document Compare, compare two local markdown files, confirm additions/deletions are visually distinguished (e.g. green/red line backgrounds, matching the app's existing theme CSS variables rather than hardcoded colors).
- [ ] **Step 6:** `npm run lint && npm test`
- [ ] **Step 7:** Commit: `git add -A && git commit -m "feat(compare): implement Document Compare dialog with local-diff and git-HEAD-diff modes"`
### Task 21: Export presets/profiles
**Files:**
- Modify: `src/main.js` (near `get-header-footer-settings`/`save-header-footer-settings` handlers, `main.js:1857-1886`)
- Modify: renderer export-options dialog (wherever `export-with-options` is invoked from — grep `export-with-options` in `renderer.js`)
**Interfaces:**
```javascript
// main.js — new handlers, settings persisted the same way header/footer settings already are
// (read main.js:1857-1886 first to copy its exact settings-file read/write pattern, e.g. settings.json path + key)
ipcMain.handle('get-export-presets', async () => { /* returns array of {id, name, format, options} */ });
ipcMain.handle('save-export-preset', async (event, preset) => { /* upsert by id, persist, return updated list */ });
ipcMain.handle('delete-export-preset', async (event, presetId) => { /* remove by id, persist, return updated list */ });
```
- [ ] **Step 1:** Read `main.js:1857-1886` in full to learn the exact settings-persistence pattern already used (this app uses a custom JSON file store per `CLAUDE.md`, not `electron-store` — confirm the exact file/key convention and reuse it verbatim for presets, e.g. a new top-level `exportPresets` array in the same `settings.json`).
- [ ] **Step 2:** Implement the 3 handlers per the interfaces above, add all 3 channel names to `ALLOWED_SEND_CHANNELS` in `preload.js`.
- [ ] **Step 3:** In the renderer's export-options dialog, add a "Save as preset" button (captures the current dialog's option values, prompts for a name, calls `save-export-preset`) and a preset dropdown at the top of the dialog (populated via `get-export-presets` on open; selecting one pre-fills the dialog's fields) plus a delete icon per preset row.
- [ ] **Step 4:** Manually verify: configure export options, save as a preset, close and reopen the dialog, confirm the preset is selectable and correctly restores all fields; delete it, confirm it's gone.
- [ ] **Step 5:** `npm run lint && npm test`
- [ ] **Step 6:** Commit: `git add -A && git commit -m "feat(export): add save/select/delete export presets"`
### Task 22: Batch PDF operations UI (beyond format conversion)
**Files:**
- Modify: `src/renderer.js` (Batch menu handling — find the `show-batch-converter` listener with `'pdf'` type)
- Modify: `src/main.js` (extend the batch loop to support PDFOperations, not just format conversion)
**Verified context:** `main.js:1293-1296` already has a "Batch PDF Conversion..." menu item sending `show-batch-converter` with type `'pdf'`, but (per the existing batch conversion handlers at `main.js:2454-2563`) batch only does format conversion via `convertWithLibreOffice`/pandoc — it never calls into `PDFOperations.executeOperation` for bulk watermark/compress/rotate across many files.
- [ ] **Step 1:** In the renderer's batch dialog (wherever the `'pdf'`-typed batch dialog renders), add an operation-type selector when the batch type is `'pdf'`: "Convert format" (existing behavior, keep as default) vs. "Bulk PDF Operation" (new: pick one of merge/split/compress/rotate/watermark/etc. plus that operation's fields, same fields as the single-file PDF editor dialog).
- [ ] **Step 2:** Add a new `ipcMain.on('batch-pdf-operation', async (event, { operation, data, inputFolder, includeSubfolders }) => {...})` handler in `main.js` that collects matching `.pdf` files (reuse the exact `collectFiles` recursive helper already defined inside `universal-convert-batch`, `main.js:2472-2484` — extract it to a shared top-level function if it isn't already, since Task 22 needs the identical logic) and calls `PDFOperations.executeOperation(operation, {...data, inputPath: filePath, outputPath: ...})` per file in a loop, reporting progress via `mainWindow.webContents.send('batch-progress', ...)` matching the existing batch progress-reporting convention.
- [ ] **Step 3:** Add `'batch-pdf-operation'` to `ALLOWED_SEND_CHANNELS`.
- [ ] **Step 4:** Manually verify: batch-watermark a folder of 2-3 test PDFs, confirm each output file has the watermark applied.
- [ ] **Step 5:** `npm run lint && npm test`
- [ ] **Step 6:** Commit: `git add -A && git commit -m "feat(pdf): add bulk PDF operations (watermark/compress/rotate/etc.) to batch converter"`
---
## Phase D — Security Remediation
### Task 23: Fix Pandoc argument-injection vulnerability (CRITICAL)
**Files:**
- Modify: `src/main.js` (every `pandocCmd` string-concatenation site: `performExportWithOptions` ~`2623-2965`, `exportPDFViaWordTemplate`-adjacent function ~`2980-3050`, `runPandocCmd`/`parseCommand` at `231-282`, the import-side builder at `~3501`, and the enhanced-export builder at `~3997-4097`)
- Modify: `tests/` (new regression test)
**Verified root cause:** `performExportWithOptions` and its siblings build a shell-style command **string** by concatenating user-influenced values (export dialog fields: `options.template`, `options.metadata` key/values, `options.variables` key/values, `options.bibliography` path, `options.csl` path, `options.geometry`, footer text, CSS file path) wrapped in double quotes, e.g. `` pandocCmd += ` --bibliography="${options.bibliography}"` ``. This string is later tokenized by `parseCommand()` (`main.js:253-282`) — a hand-rolled parser that toggles an `inQuotes` flag on any `"` or `'` character and has **no backslash-escape handling at all**. The `.replace(/"/g, '\\"')` escaping applied to `metadata`/`variables` values therefore does nothing protective: `parseCommand` sees the literal backslash as an ordinary character and the following `"` still toggles quote state exactly as an unescaped quote would. Any field that reaches `parseCommand` un-sanitized (which is most of them — `template`, `bibliography`, `csl`, `geometry`, footer text are never escaped at all) lets an attacker-controlled value containing a `"` character break out of its intended single argument and inject additional argv elements into the `execFile(pandocPath, args, ...)` call at the end of `runPandocCmd`. Because `execFile` (not `exec`) is used, this is **not** a shell-injection (no `;`, `|`, backticks interpreted) — it is **argument injection into pandoc itself**, which is still exploitable: Pandoc supports `--lua-filter=<path>` and `--filter=<path>` (arbitrary Lua/executable code execution), `-o <path>` (arbitrary file overwrite by injecting a second `-o`), and `--resource-path`/`--extract-media` (arbitrary-path writes). A malicious value in any of the un-escaped fields above is enough to reach that severity — no shell metacharacters are even needed, just a `"` followed by a new flag.
**Fix approach:** Stop building command strings entirely for every one of these call sites. Replace with direct `execFile(pandocPath, argsArray, ...)` calls where `argsArray` is built as a real JS array (`push`, never string interpolation) — this is exactly what `PDFOperations.js`/`GitOperations.js` already do correctly, and what `AudioOperations.js`/`VideoOperations.js`/`ImageOperations.js` do from Phase B. `parseCommand`/`runPandocCmd`'s string-based indirection should be deleted once all call sites are converted — do not leave it in place as unused dead code (would violate the "no forbidden markers/half-finished" standard); if any call site turns out to be legitimately hard to convert in this task, that is a signal that call site needs its own careful sub-step, not a reason to keep the vulnerable helper around "just in case."
- [ ] **Step 1:** Write a regression test proving the vulnerability exists in the *current* code, in a new file `tests/main/pandoc-arg-safety.test.js`, calling `parseCommand` directly (it will need to be exported from `main.js` for testing, or extracted first — see Step 2) with a crafted value and asserting it does NOT produce an injected extra argument:
```javascript
// This test is written to FAIL against the current parseCommand implementation,
// proving the vulnerability, then PASS once Step 3+ removes the vulnerable path.
const { buildPandocArgs } = require('../../src/main/PandocArgs'); // new module created in Step 3
test('a bibliography path containing a double quote cannot inject extra pandoc flags', () => {
const malicious = '/tmp/x.bib" --lua-filter=/tmp/evil.lua -o "/tmp/x.bib';
const args = buildPandocArgs({
inputFile: '/in.md',
outputFile: '/out.pdf',
format: 'pdf',
options: { bibliography: malicious },
});
// The malicious string must appear as exactly ONE argv element (whatever
// value it ends up as), never split into multiple args, and
// '--lua-filter=/tmp/evil.lua' must not appear as its own array element.
expect(args).not.toContain('--lua-filter=/tmp/evil.lua');
expect(args.filter((a) => a.includes(malicious) || a === malicious).length).toBeLessThanOrEqual(1);
});
```
- [ ] **Step 2:** Run the test — confirm it fails to even import (module doesn't exist yet) — this is expected; proceed to build the real module.
- [ ] **Step 3:** Create `src/main/PandocArgs.js` — a pure module exporting `buildPandocArgs({ inputFile, outputFile, format, options })` that returns a plain `string[]` args array (no string concatenation of the whole command — only individual argv elements are ever created via `.push(...)`), reimplementing every option currently handled across the string-building sites (`toc`, `tocDepth`, `numberSections`, `citeproc`, `bibliography`, `csl`, `template`, `metadata` (loop → `push('-M', `${key}=${value}`)` — no manual quote-escaping needed at all, since array elements are passed to `execFile` as literal argv, never re-parsed), `variables` (same pattern with `-V`), `pdfEngine`, `geometry`, monospace font header include, footer text). Read every one of the sites listed in "Files" above in full before writing this, to ensure no option is silently dropped.
- [ ] **Step 4:** Run the Step 1 test — expect PASS now.
- [ ] **Step 5:** Replace every call site that currently builds a `pandocCmd` string and calls `runPandocCmd(pandocCmd, ...)` with: build args via `PandocArgs.buildPandocArgs(...)`, then `execFile(getPandocPath(), args, { maxBuffer: 10 * 1024 * 1024 }, callback)` directly — inline this or add a tiny `runPandocArgs(args, callback)` helper next to the deleted `runPandocCmd` to avoid repeating the `execFile` options object at every site.
- [ ] **Step 6:** Delete `parseCommand` and the old `runPandocCmd` (`main.js:231-282`) once no call site references them (grep to confirm zero remaining references before deleting).
- [ ] **Step 7:** Manually re-run every export format the app supports (or at minimum: PDF, DOCX, HTML, EPUB, LaTeX — the ones with the most option surface) via the UI, confirming exports still succeed with the new args-array path, including with TOC/metadata/bibliography options actually filled in (not just defaults) to catch any option silently dropped in Step 3.
- [ ] **Step 8:** `npm run lint && npm test`
- [ ] **Step 9:** Commit: `git add -A && git commit -m "fix(security): eliminate pandoc argument-injection vector by building execFile args arrays directly"`
### Task 24: Formal security-review pass
**Files:** N/A — process task.
- [ ] **Step 1:** Invoke the `security-review` skill against the full working tree (post Phase A/B/C/SEC-1 changes) to catch anything beyond what this plan's manual audit already found — particularly re-check the new `AudioOperations`/`VideoOperations`/`ImageOperations` modules and the new file-picker/batch handlers added in Phase B/C for the same class of injection risk (all must use `execFile` with array args — verify none of them slipped into string-building), and check the new plugin `registerExportFormat` hook (Task 17) for arbitrary-code-execution risk if a malicious/compromised plugin could abuse it beyond what a plugin can already do.
- [ ] **Step 2:** For every finding the skill reports, triage severity and either fix inline (Critical/High) or explicitly log as an accepted/deferred risk with reasoning (Medium/Low) — do not silently drop findings.
- [ ] **Step 3:** Produce a short written security summary (what was found across both the manual audit and the formal pass, what was fixed, what if anything was deferred and why) and save it to `docs/superpowers/plans/2026-08-23-security-assessment-summary.md`.
- [ ] **Step 4:** Commit any additional fixes with individual, scoped commit messages (do not batch unrelated security fixes into one commit).
---
## Phase E — Rebuild Local Release
### Task 25: Full verification + local build
**Files:** N/A — build/verification task.
- [ ] **Step 1:** `npm run lint` — must pass clean.
- [ ] **Step 2:** `npm run format:check` — must pass clean (run `npm run format` first if not).
- [ ] **Step 3:** `npm test` — all suites must pass; confirm the total test count has grown from the 247-test baseline (new tests from Phase B/C tasks should be present).
- [ ] **Step 4:** `npm run download-tools` (ensures bundled Pandoc/tool binaries are current for the build).
- [ ] **Step 5:** `npm run build:local` (per `package.json` script — builds Linux + Windows targets; this matches "local release" for this dev machine's platform(s)). If this machine is Linux-only and Windows cross-build tooling (wine, etc.) isn't available, fall back to `npm run build:linux-ci` and note the Windows build was skipped and why.
- [ ] **Step 6:** Verify the `dist/` output contains the expected artifacts (`.deb`, `.AppImage` at minimum) and that the packaged app launches (`./dist/*.AppImage` or the unpacked `dist/linux-unpacked/markdown-converter` binary) without immediate crash — smoke-test opening a markdown file and exporting to PDF from the packaged build specifically (not `npm start`), since `asarUnpack` behavior for `sharp`/`ffmpeg-static`/fonts only manifests in a packaged build.
- [ ] **Step 7:** Report the final `dist/` artifact list and versions to the user; do not bump `package.json`'s version number as part of this task unless the user asks — that is a separate release-management decision.
---
### Task 26: Migrate `File.path` → `webUtils.getPathForFile` (Electron 41 fix) — appended by controller ruling 2026-08-23
**Origin:** Task 20 review. `File.path` was removed in Electron 32; this app pins `electron ^41.1.1` and has no `webUtils` usage — every renderer file-picker reading `file.path` gets `undefined` at runtime (~15 sites: universal converter, PDF editor pickers, bibliography/CSL pickers, custom template, media merge lists, document-compare File B).
**Files:**
- Modify: `src/preload.js` (expose a `getFilePath(file)` helper via `webUtils.getPathForFile`)
- Modify: `src/renderer.js`, `src/renderer/media-operations-dialog.js`, `src/renderer/document-compare-dialog.js` (migrate all `file.path` reads to the helper)
**Steps:**
1. In `src/preload.js`, expose `getFilePath: (file) => webUtils.getPathForFile(file)` on the existing `electronAPI` surface (webUtils is available in the preload/renderer context; it exists precisely to replace File.path). No new IPC channel needed — this is a synchronous in-process call.
2. Grep-migrate every `file.path` / `files[i].path` read in the three renderer files to `window.electronAPI.getFilePath(file)` (falling back to `file.path` if the helper is absent, to keep jsdom tests runnable — verify which tests mock this surface and update them to mock the helper).
3. Add a preload test asserting `getFilePath` is exposed (follow tests/preload.test.js conventions).
4. `npm run lint && npm test`.
5. Commit: `fix(renderer): migrate File.path reads to webUtils.getPathForFile for Electron 41`
---
### Task 27: PDF encrypt/decrypt/permissions — replace silent no-op with honest failure — appended by controller ruling 2026-08-23
**Origin:** Task 22 review (empirically verified). pdf-lib 1.17.1 cannot encrypt: `save({userPassword, ownerPassword, permissions})` silently ignores these options, `PDFDocument.load({password})` is not a LoadOptions field. Current behavior: `pdfEncrypt`/`pdfSetPermissions` write unprotected files and report success; `pdfDecrypt` reports success on non-encrypted inputs (copy no-op) and always fails on genuinely encrypted ones.
**Files:**
- Modify: `src/main/PDFOperations.js` (pdfEncrypt, pdfDecrypt, pdfSetPermissions), their renderer call sites if messages surface there, and `src/main/PDFBatchOperations.js` exclusion register comment (already excludes these ops — keep excluded, update the comment to reference this task).
**Steps:**
1. Capability-detect once at module load (probe whether the installed pdf-lib honors encryption — e.g. build a tiny in-memory PDFDocument, save with a userPassword, check raw bytes for `/Encrypt`; or simply pin the known limitation with a constant + comment referencing pdf-lib 1.17.1) — prefer the empirical probe so a future library swap re-enables the ops automatically.
2. When encryption is unsupported: pdfEncrypt/pdfSetPermissions return `{success: false, message: 'Password protection is not available in this build (pdf-lib lacks encryption support).'}`; pdfDecrypt returns an equivalent honest failure. Never write a file. Never report success.
3. Update the PDF editor dialog so these three controls are disabled with explanatory hint text when unavailable (grep renderer call sites for the encrypt/permissions handlers).
4. Update tests: existing encrypt/decrypt/permissions tests (they currently pin the broken behavior — rewrite to assert honest failure); keep any genuinely-passing load-with-password tests only if the probe says the library supports them.
5. `npm run lint && npm test`.
6. Commit: `fix(pdf): make encrypt/decrypt/permissions fail honestly instead of silent no-op`
**Out of scope (user decision pending):** swapping pdf-lib for an encryption-capable fork (e.g. @cantoo/pdf-lib) to restore the feature for real — new dependency, needs sign-off.
@@ -1,44 +0,0 @@
# Security Assessment Summary — MarkdownConverter (master branch)
**Date:** 2026-08-23 · **Scope:** full branch `6db54a5..HEAD` (feature-audit-and-hardening plan, 27 tasks) · **Method:** manual feature/security audit at plan time + formal review pass (Task 24: three-stage vulnerability scan — identify → false-positive filter at confidence ≥ 8 → inline fix of confirmed High findings)
## 1. What the manual audit found (plan Phases AD)
| # | Finding | Severity | Resolution |
|---|---------|----------|------------|
| SEC-1 | Pandoc invocation built as shell-style string and re-tokenized — argument injection via crafted filenames/options/bibliography paths | **Critical** | Fixed — Task 23 (`d41b7df`): every invocation now `execFile(path, args[])` via pure builder `src/main/PandocArgs.js`; string tokenizer deleted; 21 injection-vector tests + differential exploit-split proof + 23 real-pandoc e2e checks |
| UX-1..7 | Seven non-working features: PDF menu IPC misrouting, media converter with 16 IPC channels and 0 handlers, dead New-from-Template menu, dead View-menu toggles, Clear-Recent-Files no-op, unreachable font settings, jszip/sharp misplaced in devDependencies | High (functional) | Fixed — Tasks 114; media backends (sharp/ffmpeg) implemented execFile-array-first |
| LAT-1 | `File.path` reads dead on Electron 41 (removed in v32; app pins ^41.1.1) — every renderer file-picker returned `undefined` | High (functional) | Found during Task 20 review; fixed — Task 26 (`32a5755`): `webUtils.getPathForFile` exposed in preload + main-window shim; all ~15 picker sites migrated |
| LAT-2 | pdf-lib 1.17.1 silently ignores `userPassword`/`ownerPassword`/`permissions` — PDF encrypt/permissions wrote **unprotected** files while reporting success; decrypt was a copy no-op | High (integrity) | Found during Task 22 review; fixed — Task 27 (`78afccc`): empirical capability probe (fail-closed), honest unavailability errors, UI controls disabled with hint. Real encryption requires a library swap (see deferred #D1) |
## 2. What the formal pass (Task 24) found
**Confirmed (confidence 8/10, HIGH) — fixed inline:**
- **Git sidebar XSS → code execution** (`src/sidebar/git-panel.js`): repo-derived branch names, git-status file names, commit messages/author names, and git stderr rendered into `innerHTML` unescaped in the `nodeIntegration:true` main window, whose CSP permits `'unsafe-inline'` handlers. A malicious repo (attacker-authored commit message or crafted branch name) cloned by the victim executes script with full Node access when the Git panel loads. Fixed — `eafaf6e`: `escapeHtml` (& < > " ') across all 13 sink sites; jsdom tests assert structural inertness (no `img`/`script` elements, no attribute breakout) and that `dataset` reads still return raw names for git operations.
**Candidate assessed and dropped (with evidence):**
- PowerShell BurntToast interpolation (`main.js` ~4344): pre-existing at origin/master in identical `execFile`-array form. The dialog path interpolates a `format` chosen from a hardcoded 12-entry list; the `--convert-to <format>` CLI path feeds raw argv into the same string — but argv is trusted local-user input (precedent: CLI flags are trusted), and no shell is involved. Not exploitable. (Evidence note: the "hardcoded list" rationale covers the dialog path only; the drop stands on the argv-trust precedent for the CLI path.)
**Verified clean (14 areas):** media operation backends and all batch handlers (execFile arrays throughout, no string re-tokenization); plugin system (no escalation beyond the renderer's existing privileges; format metadata reaches main only as native menu labels and save-dialog filters); all new dialog renderers (`textContent`-only for dynamic content); PDFOperations new ops (pdfjs/sharp in-process, no shell); wordTemplateExporter (all `<w:t>` insertions escaped, no zip extraction → no zip-slip); GitOperations (simple-git array args); settings/presets stores (no deep merge → no prototype pollution); PandocArgs completeness (tree-wide grep: zero surviving string-built pandoc invocations); font embedders (fixed family→filename maps); generator windows (no untrusted prefill); print-preview (DOMPurify flow); no `eval`/`new Function`; no variable-URL `shell.openExternal`; no secrets in the diff.
## 3. Deferred / accepted risks
| ID | Risk | Disposition |
|----|------|-------------|
| D1 | **Real PDF encryption unavailable** (pdf-lib limitation) — feature now fails honestly rather than lying | Accepted for this release. Restoring it means swapping pdf-lib for an encryption-capable fork (e.g. `@cantoo/pdf-lib`, API-compatible) — **needs explicit sign-off on a new dependency** |
| D2 | `nodeIntegration:true` + `contextIsolation:false` on mainWindow, pdfWindow, hiddenWindow; main window does not load `preload.js` (inline shim instead) — the IPC whitelist is a live control only on the two generator windows | Accepted legacy risk for this branch; owned by the react-electron migration (contextIsolation + preload-everywhere), tracked separately |
| D3 | Generator-window preload whitelist is broad (`execute-code`, `read-file`, `write-file`, `delete-file` reachable from isolated windows) | No current content vector into those windows; flag for the migration to narrow per-window APIs |
| D4 | CSP allows `'unsafe-inline'` / `'unsafe-eval'` (required by marked + Mermaid rendering model) | Accepted; revisit under the migration with a nonce-based CSP |
| D5 | `outline-panel.js` / `repl-panel.js` / `analytics-panel.js` have local `escapeHtml` helpers that do not escape quotes | Deferred hardening: unsafe only if reused in attribute contexts; no such current use found |
| D6 | `scripts/download-tools.js` downloads Pandoc/fonts without checksum pinning | Build-time supply-chain hardening; recommended follow-up (pin + verify SHA-256) |
| D7 | Misc functional edge cases (batch same-folder overwrite, `pdfSplit` non-positive interval loop, rate-limiter dialog stall) | Deferred minors, logged in the plan ledger; none security-relevant |
## 4. Verification state
- Test suite: **49 suites / 512 tests passing**; ESLint and Prettier clean at every task boundary (enforced per-task during execution).
- All new external-process code paths verified `execFile`-array by independent tree-wide grep (Task 23 review) and re-verified in the formal pass.
- **Release blocker (human step):** this environment cannot launch the Electron GUI. A human pass in the running app — light + dark themes, file picking in the main dialogs (File B in Document Compare, bibliography/CSL, universal converter, PDF editor), Git sidebar on a real repo — is required before shipping.
**Bottom line:** the one Critical (argument injection) and one confirmed High (Git panel XSS) are closed with tests; two latent silent-failure bugs (File.path, fake encryption) are fixed; the remaining exposure is the documented legacy trust model (D2D4) owned by the planned Electron security migration plus one dependency decision (D1).
@@ -0,0 +1,399 @@
# Phase 7 — Modals Design
> Companion to the parent plan: `docs/superpowers/plans/2026-06-05-react-ui-redesign.md` (Phases 7+8+9+10 are sketched there at high level; this spec locks Phase 7's architecture, file map, and contracts so it can be planned task-by-task.)
**Date:** 2026-06-05
**Phase:** 7 of 10 (React + shadcn/ui UI redesign)
**Tag (on completion):** `phase-7-modals`
---
## 1. Goal & Non-Goals
**Goal:** Add a layered modal system to the React renderer. Wire 7 modal types (SettingsSheet + 4 Export dialogs + About + Welcome + Confirm) to a single `<ModalLayer />`. Add a persisted `useSettingsStore` for user preferences. The modals are opened via the command store (Phase 6 pattern), and the modals themselves read/write settings via the new store.
**Non-goals (Phase 7):**
- Implement the actual export pipelines (PDF/DOCX/HTML/PNG generation) — those are main-process concerns, already implemented. Phase 7 only adds the renderer-side dialog UI.
- Real plugin system — the Plugins tab is a placeholder ("Coming soon").
- Toast notifications — Phase 8.
- Advanced tools (Zen mode, REPL, ASCII/Table generators, Print preview) — Phase 9.
---
## 2. Architecture
### 2.1 Modal state lives in `useAppStore` (extended, not new store)
`useAppStore` is already the "global UI" store (sidebar, preview, zen, paneSizes). It's the right home for modal state because:
- It's already mounted.
- It's already persisted (via `zustand persist` with `partialize` for pane sizes).
- A separate `useUIStore` would be YAGNI.
**Add to `AppState`:**
- `modal: ModalState` (discriminated union — see §2.2)
- `openModal: <K extends ModalKind>(kind: K, props?: ModalPropsFor<K>) => void`
- `closeModal: () => void`
**Persistence:** `modal` is **runtime-only**, like `userBindings` in `useCommandStore`. We add it to the `partialize` function so only the persisted fields (`sidebarVisible`, `previewVisible`, `zenMode`, `paneSizes`) are saved. The modal kind never needs to survive a reload.
### 2.2 Discriminated-union modal shape
```ts
export type ModalState =
| { kind: null }
| { kind: 'export-pdf'; props: { sourcePath: string } }
| { kind: 'export-docx'; props: { sourcePath: string } }
| { kind: 'export-html'; props: { sourcePath: string } }
| { kind: 'export-batch'; props: { sourcePaths: string[] } }
| { kind: 'settings' }
| { kind: 'about' }
| { kind: 'welcome' }
| { kind: 'confirm'; props: ConfirmProps };
export interface ConfirmProps {
title: string;
body: string;
confirmLabel?: string; // default "Confirm"
cancelLabel?: string; // default "Cancel"
destructive?: boolean; // switches confirm button to red variant
onConfirm: () => void | Promise<void>;
onCancel?: () => void;
}
```
**Why a discriminated union:** every component that opens a modal must pass the right `props` shape for the `kind` — TypeScript catches mismatches at compile time. A generic `{ open: boolean, type: string }` shape would defer the error to runtime.
### 2.3 Single `<ModalLayer />`
Mounted at the bottom of `App.tsx`. Reads `modal.kind` from `useAppStore`, renders the matching component (or `null`). Each child modal calls `closeModal()` on dismiss.
```tsx
// src/renderer/components/modals/ModalLayer.tsx (sketch)
export function ModalLayer() {
const modal = useAppStore((s) => s.modal);
switch (modal.kind) {
case null: return null;
case 'export-pdf': return <ExportPdfDialog {...modal.props} />;
// ... etc
}
}
```
`<ModalLayer />` ensures only one modal is visible at a time (the store only holds one). This is correct for v1 — no need for stacking/replacement transitions in Phase 7.
### 2.4 Settings store (new, separate)
A new `useSettingsStore` for user preferences. **Why separate from `useAppStore`:** settings is a different lifecycle. `useAppStore` is "current view configuration"; `useSettingsStore` is "user preferences that survive across sessions and are read by many features". Same precedent as `useFileStore` (file tree state) being separate from `useAppStore` (UI chrome state).
**Persistence:** `zustand persist` with `partialize` to serialize only the leaf settings (matching the pattern in `useFileStore` and `useCommandStore`).
```ts
interface SettingsState {
// Editor
fontSize: number; // 12-20, default 14
tabSize: number; // 2 | 4 | 8, default 4
lineNumbers: boolean; // default true
wordWrap: boolean; // default true
minimap: boolean; // default true
// Theme
theme: 'light' | 'dark' | 'auto'; // default 'auto'
accentColor: 'brand' | 'blue' | 'green' | 'purple' | 'orange'; // default 'brand'
fontFamily: 'system' | 'jetbrains' | 'fira'; // default 'system'
// Export
pdfFormat: 'letter' | 'a4' | 'legal'; // default 'a4'
pdfMargins: 'normal' | 'narrow' | 'wide'; // default 'normal'
pdfEmbedFonts: boolean; // default true
docxTemplate: 'standard' | 'minimal' | 'modern'; // default 'standard'
htmlHighlightStyle: 'github' | 'monokai' | 'nord' | 'none'; // default 'github'
// ASCII table formatting — applies to all 3 single-file export formats
renderTablesAsAscii: boolean; // default false
// First-launch / Welcome
welcomeDismissed: boolean; // default false
// Actions
setSetting: <K extends keyof Omit<SettingsState, ...>>(...);
resetToDefaults: () => void;
}
```
**Template-based exports** (per user request): `docxTemplate` is one of `'standard' | 'minimal' | 'modern'`. The export dialog shows a Select with the available templates. The IPC layer (`ipc.export.docx`) already accepts a `template` field; Phase 7 just exposes it. The main process maps these template names to actual `.docx` template files bundled with the app.
**ASCII table formatting** (per user request): `renderTablesAsAscii` is a toggle in the Settings sheet (Export tab) and in each of the 3 single-file export dialogs as an inline checkbox override. When true, the markdown AST's table nodes are converted to fixed-width monospace text (using a small `lib/ascii-table.ts` helper) *before* the export pipeline sees them. The preview pane is unaffected — this is export-time only.
### 2.5 WelcomeDialog trigger logic
A small `useEffect` in `App.tsx`:
```ts
useEffect(() => {
if (!useSettingsStore.getState().welcomeDismissed) {
useAppStore.getState().openModal('welcome');
}
}, []); // run once on mount
```
The Help menu registers a `help.welcome` command that simply calls `openModal('welcome')` — does NOT reset the `welcomeDismissed` flag. (Decision in §2.4 of the brainstorming.)
### 2.6 Commands trigger modals
The command store (Phase 6) gets new commands. Registered in `src/renderer/lib/commands/register-menu-commands.ts`:
| Command ID | Handler |
|------------------|------------------------------------------------------|
| `file.exportPdf` | `openModal('export-pdf', { sourcePath: activePath })` |
| `file.exportDocx` | `openModal('export-docx', { sourcePath: activePath })` |
| `file.exportHtml` | `openModal('export-html', { sourcePath: activePath })` |
| `file.exportBatch` | `openModal('export-batch', { sourcePaths: openFiles })` |
| `settings.open` | `openModal('settings')` |
| `help.welcome` | `openModal('welcome')` |
| `help.about` | `openModal('about')` |
| `file.confirmClose` | opens confirm dialog before closing a dirty tab |
| `app.quit` | opens confirm if dirty tabs exist, else quits |
`settings.open` and `help.about` also get buttons in `AppHeader` (already partly done in Phase 6 — we just add new icons and wire to the new commands).
---
## 3. File Map
### 3.1 shadcn primitives (manually created, per the shadcn-CLI-blocked memory)
Created in `src/renderer/components/ui/`:
- `dialog.tsx` — Radix Dialog wrapper with motion preset
- `sheet.tsx` — Radix Dialog (side variant) for SettingsSheet
- `tabs.tsx` — Radix Tabs for the 5-tab SettingsSheet
- `input.tsx` — text input
- `textarea.tsx` — multi-line input (for confirm body, welcome copy)
- `select.tsx` — Radix Select for theme/font/template pickers
- `switch.tsx` — Radix Switch for boolean settings
- `checkbox.tsx` — Radix Checkbox for "don't show again" toggles
- `slider.tsx` — Radix Slider for fontSize
- `label.tsx` — Radix Label (always pair with form fields)
- `form.tsx` — react-hook-form glue components (FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage)
- `radio-group.tsx` — Radix RadioGroup for accent color / template
### 3.2 Modals (`src/renderer/components/modals/`)
- `ModalLayer.tsx` — root, mounted by `App.tsx`
- `ExportPdfDialog.tsx` — PDF options (format, margins, embed fonts, ascii tables)
- `ExportDocxDialog.tsx` — DOCX options (template picker: standard/minimal/modern, ascii tables)
- `ExportHtmlDialog.tsx` — HTML options (standalone, highlight style, ascii tables)
- `ExportBatchDialog.tsx` — batch queue (format, concurrency, file list)
- `SettingsSheet.tsx` — 5-tab sheet (side="right", 480px wide)
- `EditorSettings.tsx` — font size, tab size, line numbers, word wrap, minimap
- `ThemeSettings.tsx` — light/dark/auto, accent color, font family
- `ExportSettings.tsx` — pdf format, margins, embed fonts, docx template, html highlight, ascii tables
- `PluginsSettings.tsx` — "Coming soon" placeholder
- `AboutSettings.tsx` — app version, links, acknowledgements
- `AboutDialog.tsx` — simple read-only dialog with version + GitHub link
- `WelcomeDialog.tsx` — first-launch dialog with quick-start cards
- `ConfirmDialog.tsx` — generic confirmation (title, body, destructive, onConfirm)
- `ExportDialogFooter.tsx` — shared Cancel / Export button row used by the 4 export dialogs
- `useExportSource.ts` — shared hook: reads active buffer, validates, returns source string + path
### 3.3 Stores
- **Modify** `src/renderer/stores/app-store.ts` — add `modal` + `openModal` + `closeModal`; update `partialize` to exclude `modal`
- **Create** `src/renderer/stores/settings-store.ts` — new
### 3.4 Lib
- **Create** `src/renderer/lib/validators.ts` — zod schemas:
- `settingsSchema` (whole settings object)
- `exportPdfSchema` (format, margins, embedFonts, renderTablesAsAscii)
- `exportDocxSchema` (template, renderTablesAsAscii)
- `exportHtmlSchema` (standalone, highlightStyle, renderTablesAsAscii)
- `exportBatchSchema` (format, concurrency, file list)
- `confirmPropsSchema` (for the confirm dialog)
- **Create** `src/renderer/lib/ascii-table.ts``toAsciiTable(rows: string[][]): string` (the small helper that converts a 2D string array to a fixed-width ASCII table)
- **Create** `src/renderer/lib/modal-triggers.ts` — small helpers: `useWelcomeTrigger()`, `useQuitGuard()`
### 3.5 Modified files
- **Modify** `src/renderer/App.tsx` — mount `<ModalLayer />` at the bottom; add the `useWelcomeTrigger` `useEffect` for first-launch
- **Modify** `src/renderer/lib/commands/register-menu-commands.ts` — add the 9 new commands (4 export + settings + welcome + about + confirmClose + quit)
- **Modify** `src/renderer/components/layout/AppHeader.tsx` — add Settings (gear) and About (info) icon buttons that dispatch the new commands
- **Modify** `src/main.js` (verify) — no changes expected; menu items already wire to `menu:action` channels that flow through `useBridgeNativeMenu`. If any new menu items need IPC channels, add them in the main process mirror.
### 3.6 Tests
**Unit (`tests/unit/`):**
- `stores/settings-store.test.ts` (5-6 tests: defaults, setSetting, resetToDefaults, persistence/partialize)
- `stores/app-store.test.ts` extended (3 tests: openModal sets state, closeModal clears, only one modal at a time)
- `lib/validators.test.ts` (3 tests: each schema rejects bad input)
- `lib/ascii-table.test.ts` (3 tests: simple table, alignment, empty input)
**Component (`tests/component/modals/`):**
- `ExportPdfDialog.test.tsx` (4 tests: renders with default settings, submit calls ipc.export.pdf with merged opts, error renders inline, ascii-table toggle flows through)
- `ExportDocxDialog.test.tsx` (3 tests: renders, submit includes template, ascii-table toggle)
- `ExportHtmlDialog.test.tsx` (3 tests: renders, highlight style select, ascii-table toggle)
- `ExportBatchDialog.test.tsx` (3 tests: renders file list, format selector, concurrency)
- `SettingsSheet.test.tsx` (6 tests: renders 5 tabs, each tab shows correct fields, settings change persists)
- `AboutDialog.test.tsx` (2 tests: renders version, links open external)
- `WelcomeDialog.test.tsx` (3 tests: renders, dismiss sets welcomeDismissed, "don't show again" checked)
- `ConfirmDialog.test.tsx` (3 tests: confirm calls onConfirm and closes, cancel calls closeModal, destructive variant)
- `ModalLayer.test.tsx` (3 integration tests: null kind renders nothing, switching kinds replaces modal, modal unmounts on close)
**Integration (`tests/integration/`):**
- `phase7-modals-smoke.test.tsx` (4 tests: dispatch command opens modal, command store + settings store + IPC all wired, app.tsx mount triggers welcome on first launch, modal layer end-to-end)
---
## 4. Data Flow
### 4.1 Open a modal
```ts
// From any command handler in register-menu-commands.ts:
useAppStore.getState().openModal('export-pdf', { sourcePath: activePath });
```
### 4.2 The dialog reads source
```ts
// ExportPdfDialog.tsx
const { source, path } = useExportSource();
if (!source) return <EmptySourceFallback />;
```
`useExportSource` is a small hook that:
1. Reads `useFileStore.activeTabId` + `useEditorStore.buffers`
2. If no active buffer, prompts the user to open a file (uses confirm dialog)
3. Returns `{ source: string, path: string } | null`
### 4.3 Settings change
```ts
// EditorSettings.tsx — switches/inputs call setSetting
const [fontSize, setFontSize] = useSettingsStore(s => [s.fontSize, s.setSetting]);
// or
setSetting('fontSize', 16);
```
Editor and preview subscribe to specific slices. The `useTheme` hook from `next-themes` is augmented to read `theme: 'light' | 'dark' | 'auto'` from `useSettingsStore` (replacing the standalone next-themes default).
### 4.4 Export flow
```ts
// ExportPdfDialog on submit:
const settings = useSettingsStore.getState();
const result = await ipc.export.pdf({
inputPath: path,
outputPath: chosenOutputPath,
format: dialogFormat ?? settings.pdfFormat,
margins: MARGIN_PRESETS[dialogMargins ?? settings.pdfMargins],
embedFonts: dialogEmbed ?? settings.pdfEmbedFonts,
renderTablesAsAscii: dialogAscii ?? settings.renderTablesAsAscii,
});
if (!result.ok) setError(result.error.message);
else { closeModal(); /* toast in Phase 8 */ }
```
The dialog-level overrides fall through to settings defaults when not explicitly chosen.
### 4.5 ASCII table transformation
The transformation happens in the **renderer** (pre-IPC), so the main process doesn't need to know about ASCII mode:
```ts
// In ExportPdfDialog before submitting:
const finalSource = renderTablesAsAscii
? applyAsciiTransform(source) // walks AST, replaces <table> blocks
: source;
```
`applyAsciiTransform` is a small function (10-20 lines) that:
1. Parses markdown source for `|...|` table syntax via a small regex
2. Replaces each table block with a fenced code block containing the ASCII table
3. Returns the modified source
(No AST walker needed — markdown tables are line-based and a regex per line + simple width calc is sufficient.)
### 4.6 DOCX template selection
The dialog shows a Select with 3 options (standard, minimal, modern). The main process maps these names to bundled `.docx` template files. The IPC contract is unchanged — `DocxOptions.template: string` was already defined in `types/ipc.ts` during Phase 1.
### 4.7 Confirm flow
```ts
// In a command handler:
const activeTab = ...;
if (activeTab?.dirty) {
useAppStore.getState().openModal('confirm', {
title: 'Discard unsaved changes?',
body: `"${activeTab.title}" has unsaved changes. Close without saving?`,
confirmLabel: 'Discard',
destructive: true,
onConfirm: () => doCloseTab(),
});
} else {
doCloseTab();
}
```
### 4.8 Welcome first-launch
`useEffect` in `App.tsx` (run once on mount) checks `welcomeDismissed` from `useSettingsStore`. If false, calls `openModal('welcome')`. The Welcome dialog has a "Don't show again" checkbox that sets `welcomeDismissed: true` and closes.
---
## 5. Error Handling
- **IPC errors in export dialogs:** inline error banner below the submit button. `IpcResult<T>` discriminated union makes this easy. Banner shows `result.error.message` and a "Try again" button that re-submits.
- **Settings validation:** zod schemas in `validators.ts`. Each form field shows `aria-invalid` + red border on error. Form-level errors via react-hook-form's `formState.errors`.
- **Confirm dialog cancel:** just calls `closeModal()`. No state mutation. Optional `onCancel` callback for "remember my choice" patterns (not used in Phase 7).
- **Welcome "don't show again":** persists `welcomeDismissed: true`. Help menu can re-open Welcome (without resetting the flag).
- **Settings corruption on load (bad localStorage data):** `useSettingsStore` is built with a `partialize` that also acts as a whitelist — only known fields are deserialized. Unknown fields are dropped. If a persisted value fails zod validation, fall back to defaults (logged as a warning).
---
## 6. Testing Strategy
TDD per the established pattern (Phases 1-6). Every component test:
- Renders with empty/default state
- One happy-path interaction (form submit, button click)
- One error/edge case (validation fail, IPC error, cancel)
Store tests focus on pure logic (state transitions, persistence, partialize). Settings store test specifically verifies:
- Defaults match schema
- `setSetting` works for leaf keys
- `resetToDefaults` clears to initial state
- Persisted payload (from `partialize`) contains exactly the leaf fields
- Hydration from a partial/corrupt payload doesn't throw
Component tests use `render` + `userEvent`, mock `window.electronAPI` for IPC.
ModalLayer integration test verifies:
1. Mounting with `kind: null` renders nothing (query container, expect empty)
2. Mounting with `kind: 'about'` renders `<AboutDialog>` (aria-label match)
3. Switching from `kind: 'about'` to `kind: 'settings'` unmounts About, mounts Settings (verified by role/aria-label transitions)
4. Confirm dialog calls `onConfirm` and `closeModal` on success
---
## 7. Risks & Open Questions
**Risks:**
- **Form library complexity.** react-hook-form + zod is powerful but adds learning curve. Mitigation: a single shared `<SettingsForm>` wrapper reduces cognitive load; export dialogs use simple `useState` (no need for the full form infra).
- **shadcn Dialog animation jank with our motion presets.** Radix Dialog has its own `data-state` attributes for open/closed. We compose with our `modalPop` preset via `forceMount` + Motion. Need to verify no double-animation.
- **Settings store hydration race.** If a component reads a setting on first render before hydration completes, it gets the default. For Phase 7 this is fine — defaults are sensible.
**Open questions (deferrable):**
- Should the "ascii table" output include alignment row separators (`+---+---+`) or just be a `| a | b |`-style table? → Decision: use the `|---|` separator form (more compact, common in plain-text email).
- Should ExportBatchDialog be a Sheet (queue progress) or a Dialog (form)? → Decision: Dialog with a form; progress is shown inline (not a streaming queue). Phase 9 could revisit.
- Should `welcomeDismissed` be per-user-account or per-install? → Per-install (localStorage). No multi-user concept in v1.
---
## 8. Out of Scope (deferred to later phases)
- Phase 8: Toast notifications on export success/failure (the dialog's inline error is v1; toasts are a follow-up).
- Phase 9: ASCII art generator (figlet) is separate from ASCII table rendering. This spec is about table formatting.
- Phase 9: Word export uses a `.docx` template *generation* step (WordExportDialog), not the IPC `ipc.export.docx` path. Distinct.
- Phase 10: Delete legacy `src/print-preview.js`, `src/wordTemplateExporter.js`, etc.
---
## 9. Success Criteria
Phase 7 is complete when:
- All listed shadcn primitives exist in `src/renderer/components/ui/` with tests
- `useSettingsStore` is implemented, tested, and persisted
- `useAppStore` extended with `modal` discriminated union and tested
- All 7 modal components implemented, tested, and accessible (aria-labels, keyboard nav)
- 4 export dialogs (PDF/DOCX/HTML/Batch) all submit through the command store and call IPC correctly
- `ModalLayer` mounted in `App.tsx` and integrated with command triggers
- Welcome dialog shows on first launch, dismissible, re-openable from Help menu
- Confirm dialog used by quit-with-dirty and close-with-dirty flows
- ASCII table rendering works (toggle in settings, override in export dialogs)
- DOCX template picker in ExportDocxDialog submits the correct `template` field
- `npx vite build` succeeds, `npx vitest run` shows **all tests green** (target: +50 new tests, total ~220)
- Branch tagged `phase-7-modals` and pushed to origin
@@ -0,0 +1,250 @@
# Phase 8 — Toasts Design
> Companion to the parent plan: `docs/superpowers/plans/2026-06-05-react-ui-redesign.md` (Phases 8+9+10 are sketched at high level; this spec locks Phase 8's architecture, file map, and contracts so it can be planned task-by-task.)
**Date:** 2026-06-05
**Phase:** 8 of 10 (React + shadcn/ui UI redesign)
**Tag (on completion):** `phase-8-toasts`
---
## 1. Goal & Non-Goals
**Goal:** Add a toast notification layer to the React renderer using sonner (already installed). Surface user-initiated async action results (file save, file/folder open, exports) as transient toasts in the bottom-right of the window. The error banner pattern in export dialogs stays — toasts are a complementary global channel.
**Non-goals (Phase 8):**
- Undo/redo support (Phase 9)
- Custom toast actions/buttons (Phase 9, if needed)
- Persistent notification history
- Toast queueing/throttling for rapid-fire events
- Replacing inline error banners (they stay as per-dialog context)
**Scope decision:** Toast on user-initiated actions only. Skip silent background operations (loadChildren, etc.) to avoid noise. 4 wire points total: save (success+error), open file/folder (error only), 4 export dialogs (success+error).
---
## 2. Architecture
### 2.1 Toast helpers in `lib/toast.ts`
A thin typed layer over sonner. The helpers exist to:
- Give us a single import surface (instead of scattering `import { toast } from 'sonner'` across the codebase)
- Provide a place to add brand colors, formatting, or analytics later without touching call sites
- Make mocking easier in tests (one module to mock)
```ts
// src/renderer/lib/toast.ts (sketch)
import { toast as sonnerToast } from 'sonner';
export const toast = {
success: (message: string) => sonnerToast.success(message),
error: (message: string) => sonnerToast.error(message),
info: (message: string) => sonnerToast.info(message),
warning: (message: string) => sonnerToast.warning(message),
promise: <T>(
promise: Promise<T>,
msgs: { loading: string; success: string | ((data: T) => string); error: string | ((err: unknown) => string) }
) => sonnerToast.promise(promise, msgs),
dismiss: (id?: string | number) => sonnerToast.dismiss(id),
};
```
### 2.2 `<Toaster />` mounted in App.tsx
A canonical shadcn Toaster wrapper (manual paste per memory `shadcn-cli-blocked-manual-primitives`). Mounts alongside `<ModalLayer />`:
```tsx
// src/renderer/App.tsx (sketch)
import { Toaster } from '@/components/ui/sonner';
function App() {
useWelcomeTrigger();
return (
<>
<AppShell />
<ModalLayer />
<Toaster />
</>
);
}
```
The Toaster uses sonner's `<Toaster />` component with:
- `theme={resolvedTheme}` from `useTheme()` (so toasts match the user's light/dark preference)
- `richColors` for semantic success/error/info/warning colors
- `position="bottom-right"` (sonner default; explicit for clarity)
- `closeButton` (so users can dismiss)
### 2.3 Inline wiring at 4 wire points
**Pattern choice — inline in stores/dialogs, NOT middleware.** Matches the Phase 7 precedent of inline error banners in export dialogs. Middleware would be DRY but harder to debug and harder to control granularity (we want errors on save, but NOT on silent loadChildren).
**Wire points:**
1. **`useFileStore.saveActiveBuffer`** — wrap the existing logic:
```ts
saveActiveBuffer: async () => {
// ... existing logic to get buffer ...
const writeResult = await ipc.file.write(activeTabId, buffer.content);
if (!writeResult.ok) {
toast.error(`Failed to save: ${writeResult.error.message}`);
return false;
}
// ... existing markSaved/markTabClean ...
toast.success(`Saved ${title}`);
return true;
}
```
2. **`useFileStore.openFile`** — error only:
```ts
openFile: async (filePath) => {
// ... existing logic to check existing tab ...
const result = await ipc.file.read(filePath);
if (!result.ok) {
toast.error(`Failed to open file: ${result.error.message}`);
return;
}
// ... existing logic ...
}
```
3. **`useFileStore.openFolder`** — error only:
```ts
openFolder: async (path) => {
const result = await ipc.file.list(path);
if (!result.ok) {
toast.error(`Failed to open folder: ${result.error.message}`);
return;
}
// ... existing logic ...
}
```
4. **4 export dialogs** — both success and error (error complements the inline banner):
```ts
if (!result.ok) {
toast.error(`Export failed: ${result.error.message}`);
setError(result.error.message);
setSubmitting(false);
} else {
toast.success(`Exported ${source.title} to ${result.data?.outputPath ?? 'file'}`);
closeModal();
}
```
---
## 3. File Map
### 3.1 Created files
- `src/renderer/lib/toast.ts` — typed wrappers (re-export of sonner with our naming)
- `src/renderer/components/ui/sonner.tsx` — canonical shadcn Toaster wrapper (manual paste)
- `tests/unit/lib/toast.test.ts` — ~5 unit tests
- `tests/component/ui/sonner.test.tsx` — 1 smoke test
- `tests/integration/phase8-toasts-smoke.test.tsx` — ~4 integration tests
### 3.2 Modified files
- `src/renderer/App.tsx` — mount `<Toaster />` alongside `<ModalLayer />`
- `src/renderer/stores/file-store.ts` — add 3 toast calls (save, openFile, openFolder)
- `src/renderer/components/modals/ExportPdfDialog.tsx` — toast on submit result
- `src/renderer/components/modals/ExportDocxDialog.tsx` — toast on submit result
- `src/renderer/components/modals/ExportHtmlDialog.tsx` — toast on submit result
- `src/renderer/components/modals/ExportBatchDialog.tsx` — toast on submit result
---
## 4. Data Flow
User action → store action OR export dialog submit → IPC call → result →
- if error: `toast.error(message)` → sonner renders in bottom-right portal
- if success: `toast.success(message)` → sonner renders
- inline error banner in dialog stays as per-dialog context (NOT removed)
Theme comes from `useTheme()` in the Toaster component, not from individual toasts. The Toaster is mounted once at the app level.
For the 4 export dialogs: the existing inline error banner stays (it's contextual to the dialog), AND a toast is fired. This gives the user both immediate context (in the dialog) and persistent notification (toast in corner).
For file save: ONLY a toast (no inline error UI in the editor pane — keeps the editor clean). Errors still show the toast.
---
## 5. Error Handling
- **Toast helpers never throw.** They are thin re-exports of sonner, which handles its own error cases (e.g., render failures, missing portal target).
- **In tests**, the `toast` module is mocked so calls don't render real toasts. Mock signature: `vi.mock('@/lib/toast', () => ({ toast: { success: vi.fn(), error: vi.fn(), ... } }))`.
- **Theme fallback:** If `useTheme()` is loading or `resolvedTheme` is undefined, Toaster uses `'system'` as a fallback (sonner's default behavior).
- **Sonner missing:** If for some reason sonner fails to load, the toast calls become no-ops. The user still sees inline error banners in the export dialogs.
- **Inline error banners stay.** They are not replaced by toasts — they complement them.
---
## 6. Testing Strategy
### 6.1 Unit tests (`tests/unit/lib/toast.test.ts`)
5 tests:
- `toast.success` calls sonner `toast.success` with the message
- `toast.error` calls sonner `toast.error` with the message
- `toast.info` calls sonner `toast.info`
- `toast.warning` calls sonner `toast.warning`
- `toast.promise` forwards the promise and messages to sonner
All tests mock the sonner module and verify the forwarded call.
### 6.2 Component test (`tests/component/ui/sonner.test.tsx`)
1 smoke test: `<Toaster />` renders without crashing inside a ThemeProvider.
### 6.3 Integration test (`tests/integration/phase8-toasts-smoke.test.tsx`)
~4 tests:
- Saving a file → `toast.success` called with `"Saved test.md"`
- Opening a non-existent file (ipc returns error) → `toast.error` called with file path in message
- Export success (ipc returns ok) → `toast.success` called + dialog closes
- Export failure (ipc returns error) → `toast.error` called + inline banner shown + dialog stays open
TDD throughout. Mocks for `ipc.*` and `lib/toast`.
### 6.4 Existing tests must still pass
- All 243 tests from Phase 7 must remain green
- Export dialog tests will need updates to verify the new toast calls (the dialog tests currently check for inline banner; they should ALSO verify the toast call)
---
## 7. Risks & Open Questions
**Risks:**
- **Sonner theme switching:** If `useTheme()` returns `'system'` and the OS preference changes mid-session, sonner will re-render. This is the correct behavior; just confirm in test.
- **Toast spam:** If user holds Cmd+S, the save could fire many times. Sonner deduplicates by default for similar messages? → Decision: rely on sonner's default behavior. If spam becomes an issue, add a `toast.dismiss()` debounce in v2.
**Open questions (deferrable):**
- Should we add a custom toast for "undo last close" (Phase 9's undo feature)? → Decision: out of scope for Phase 8. Phase 9 will handle undo toasts.
- Should the export dialog inline banner be removed once toasts are wired? → Decision: NO — keep both. The inline banner is contextual to the dialog; the toast is global. They serve different purposes.
---
## 8. Out of Scope (deferred to later phases)
- Phase 9: Undo toasts ("Tab closed — Undo" with action button)
- Phase 9: Long-running operation progress toasts (e.g., batch export queue)
- Phase 9: Custom toast variants for advanced tools (ASCII generator, table generator)
- Phase 10: Cleanup of inline error banners (will evaluate in Phase 10 if redundant)
---
## 9. Success Criteria
Phase 8 is complete when:
- `lib/toast.ts` exists with typed wrappers
- `<Toaster />` is mounted in `App.tsx` and renders toasts
- `useFileStore.saveActiveBuffer` calls `toast.success`/`toast.error` on result
- `useFileStore.openFile` calls `toast.error` on failure
- `useFileStore.openFolder` calls `toast.error` on failure
- 4 export dialogs call `toast.success`/`toast.error` on result
- All tests pass: ~+10 new tests, total ~253
- `npx vite build` succeeds
- Branch tagged `phase-8-toasts` and pushed to origin
@@ -0,0 +1,303 @@
# Phase 9 — Advanced Tools Design
> Companion to the parent plan: `docs/superpowers/plans/2026-06-05-react-ui-redesign.md` (Phase 9 is sketched at high level; this spec locks architecture, file map, and contracts so it can be planned task-by-task.)
**Date:** 2026-06-05
**Phase:** 9 of 10 (React + shadcn/ui UI redesign)
**Tag (on completion):** `phase-9-advanced-tools`
---
## 1. Goal & Non-Goals
**Goal:** Add 10 advanced tools to the React renderer. Group 1: Standalone dialogs (ASCII generator, Table generator, Word export, Find-in-files). Group 2: Global overlays (Zen mode, REPL, Print preview). Group 3: Editor/sidebar integrations (Minimap, Breadcrumbs-with-symbols, Git status). All triggered via the Phase 6 command store.
**Non-goals (Phase 9):**
- True undo/redo stack (still not in scope)
- Snippet/template library
- Custom REPL with full JS eval (we chose markdown snippet preview for safety)
- Custom diff/merge UI (just shows git status, no in-app diffing)
- Plug-in extensions
- Multi-cursor editing
- LSP / language server integration
**Decision summary (from brainstorming):**
- REPL = **markdown snippet preview** (no JS eval — safe in renderer)
- Word export = **`.docx` via `docx` lib in renderer**, with both Standard and Custom .dotx template modes
- Find-in-files = **recursive search with result navigation** (new IPC, regex support)
---
## 2. Architecture
### 2.1 Three mount strategies
| Category | Mount | Examples |
|---|---|---|
| **Dialogs** | `<ModalLayer />` (Phase 7 pattern) | ASCII gen, Table gen, Word export, Find-in-files |
| **Global overlays** | Top-level in `App.tsx` (like `<Toaster />`) | Zen mode, REPL panel, Print preview |
| **Editor/sidebar integrations** | Extend existing components | Minimap, Breadcrumbs, Git status |
The ModalLayer is the dispatcher for dialogs. The global overlays are mounted directly in `App.tsx` because they need to participate in the top-level layout (full-window, or pinned to the bottom).
### 2.2 ModalState union extension
The Phase 7 `ModalState` discriminated union (9 kinds) gets 4 new kinds for the new dialogs:
```ts
export type ModalState =
| { kind: null }
| { kind: 'export-pdf'; props: { sourcePath: string } }
| { kind: 'export-docx'; props: { sourcePath: string } }
| { kind: 'export-html'; props: { sourcePath: string } }
| { kind: 'export-batch'; props: { sourcePaths: string[] } }
| { kind: 'export-word'; props: { sourcePath: string } } // NEW
| { kind: 'ascii-generator' } // NEW
| { kind: 'table-generator' } // NEW
| { kind: 'find-in-files' } // NEW
| { kind: 'settings' }
| { kind: 'about' }
| { kind: 'welcome' }
| { kind: 'confirm'; props: ConfirmProps };
```
Three of the four new kinds (ascii, table, find-in-files) take no props — they read from the active buffer via `useExportSource` (for ascii/table) or from `useFileStore.rootPath` (for find-in-files). `export-word` takes `sourcePath` like the other export dialogs.
### 2.3 New commands in command store
| Command ID | Trigger | Opens |
|---|---|---|
| `tools.ascii` | new | `AsciiGeneratorDialog` |
| `tools.table` | new | `TableGeneratorDialog` |
| `tools.exportWord` | new | `WordExportDialog` |
| `tools.findInFiles` | new | `FindInFilesDialog` |
| `tools.repl` | new | toggles REPL panel |
| `view.zenMode` | existing (Phase 6) | toggles Zen mode overlay |
| `file.print` | new | opens `PrintPreview` overlay |
| `git.refresh` | new | re-fetches git status |
All registered in `src/renderer/lib/commands/register-menu-commands.ts`.
### 2.4 New IPC surface
```ts
// src/renderer/lib/ipc.ts (additions)
ipc.file.search({ rootPath, query, isRegex, caseSensitive }: {
rootPath: string;
query: string;
isRegex: boolean;
caseSensitive: boolean;
}): Promise<IpcResult<Array<{ filePath: string; line: number; content: string }>>>;
ipc.file.gitStatus({ rootPath }: { rootPath: string }): Promise<IpcResult<Array<{ filePath: string; status: 'modified' | 'added' | 'deleted' | 'untracked' }>>>;
ipc.file.print({ html }: { html: string }): Promise<IpcResult<void>>;
ipc.file.writeBuffer({ path, buffer }: { path: string; buffer: Uint8Array }): Promise<IpcResult<void>>;
```
The main process counterparts are added to `src/main.js` (or a new `src/main/files-search.js`, etc.). For Phase 9, the spec covers the renderer-side design; main-process IPC handlers are assumed to follow the same `ipcMain.handle` pattern as the existing handlers.
### 2.5 Settings additions (`useSettingsStore`)
```ts
// zod schema additions:
docxCustomTemplatePath: z.string().nullable().default(null), // path to user .dotx file
replOpen: z.boolean().default(false), // REPL panel visibility
breadcrumbSymbols: z.boolean().default(true), // breadcrumbs show code symbols
// minimap already exists from Phase 7 (useSettingsStore.minimap: z.boolean().default(true))
```
The `minimap` setting from Phase 7 is now wired (not just stored).
---
## 3. File Map
### 3.1 Created files
**Dialogs (in `src/renderer/components/modals/`):**
- `AsciiGeneratorDialog.tsx` — input textarea, font select, output preview with copy button
- `TableGeneratorDialog.tsx` — rows × cols inputs, header checkbox, output preview
- `WordExportDialog.tsx` — template select (Standard / Custom .dotx), options, preview, export
- `FindInFilesDialog.tsx` — query input, regex/case toggles, results list with click-to-navigate
**Global overlays (in `src/renderer/components/tools/`):**
- `ReplPanel.tsx` — bottom-pinned, textarea + rendered preview
- `PrintPreview.tsx` — full-window print preview
**Editor/sidebar integrations:**
- `src/renderer/components/layout/ZenMode.tsx` — wraps/controls the editor in zen mode (or modify `AppShell.tsx` to hide chrome)
- `src/renderer/components/sidebar/GitStatusPanel.tsx` — file list with status badges
**Lib:**
- `src/renderer/lib/docx-export.ts` — renderer-side `docx` lib integration (markdown → Blob)
- `src/renderer/hooks/use-zen-mode.ts` — small hook that reads `useSettingsStore.zenMode`
**Modifications:**
- `src/renderer/App.tsx` — mount `<ReplPanel />` and `<PrintPreview />` alongside `<ModalLayer />` and `<Toaster />`
- `src/renderer/components/layout/AppShell.tsx` — when `zenMode === true`, hide all chrome except the editor
- `src/renderer/components/editor/CodeMirrorEditor.tsx` — add `@codemirror/minimap` (or `@replit/codemirror-minimap`) when `useSettingsStore.minimap` is true
- `src/renderer/components/layout/Breadcrumb.tsx` — extend to show symbols (headings, code blocks) using `@codemirror/langs-data` or a simple markdown AST walk
- `src/renderer/components/sidebar/Sidebar.tsx` — add a "Git" tab to the existing tab list
- `src/renderer/stores/settings-store.ts` — add 3 new fields
- `src/renderer/lib/validators.ts` — add 3 new fields to `settingsSchema`
- `src/renderer/lib/ipc.ts` — add 4 new IPC methods
- `src/renderer/lib/commands/register-menu-commands.ts` — add 8 new commands
- `src/main.js` (or split files) — add 4 main-process IPC handlers
**Tests:**
- `tests/component/tools/ReplPanel.test.tsx` — smoke test
- `tests/component/tools/PrintPreview.test.tsx` — smoke test
- `tests/component/modals/AsciiGeneratorDialog.test.tsx` — 3 tests
- `tests/component/modals/TableGeneratorDialog.test.tsx` — 3 tests
- `tests/component/modals/WordExportDialog.test.tsx` — 4 tests
- `tests/component/modals/FindInFilesDialog.test.tsx` — 4 tests
- `tests/component/sidebar/GitStatusPanel.test.tsx` — 3 tests
- `tests/component/layout/Breadcrumb.test.tsx` — extend with symbols test
- `tests/integration/phase9-tools-smoke.test.tsx` — 6 tests (one per command-triggered tool)
---
## 4. Data Flow
### 4.1 Word export (most complex)
1. User triggers `tools.exportWord``registerMenuCommands` opens the export-word modal via `useAppStore.openModal('export-word', { sourcePath: activeTabId })`
2. **Wait** — we need a new modal kind `export-word` in the `ModalState` union. Add it.
3. `WordExportDialog` (mounted by ModalLayer) shows:
- Template select: "Standard (bundled)" or "Custom .dotx (your file)" — pre-populated with `useSettingsStore.docxCustomTemplatePath`
- "Choose custom template..." button (file picker, saves to settings)
- Options: embed images (checkbox), include front matter (checkbox)
- Preview area: shows the generated docx structure (sizes, table of contents)
4. On submit:
- Renderer calls `lib/docx-export.ts#generateDocx(source, templatePath, options)` which uses the `docx` lib
- The lib takes a `Document` AST and produces a Blob
- ASCII tables are converted to monospace `<w:r>` runs (using `applyAsciiTransform` from Phase 7)
- Images are extracted from markdown and embedded as base64
- If a custom .dotx path is set, the renderer reads it via `ipc.file.read` and applies its styles (via `docx` lib's style support)
- User picks output path via `ipc.app.showSaveDialog`
- Writes Blob via `ipc.file.writeBuffer` (new)
- Toast success/failure
### 4.2 Find-in-files
1. User triggers `tools.findInFiles` → ModalLayer opens `FindInFilesDialog`
2. User types query, picks regex/literal, case-sensitive toggle
3. On submit: `ipc.file.search({ rootPath: useFileStore.rootPath, query, isRegex, caseSensitive })`
4. Backend walks the disk recursively, applies regex/literal match, returns `Array<{ filePath, line, content }>`
5. Dialog shows result list (file:line:content, clickable)
6. Click a result:
- `useFileStore.openFile(filePath)` if not already open
- Set the cursor in the editor to the matched line
7. Close the dialog
### 4.3 REPL (markdown snippet preview)
1. User triggers `tools.repl` → toggles `useSettingsStore.replOpen` (or a new dedicated `useReplStore`)
2. `ReplPanel` (mounted in App.tsx) is visible when `replOpen === true`
3. The panel has:
- Top half: textarea (user types/pastes markdown)
- Bottom half: rendered preview (uses `lib/markdown.ts` from Phase 1 + DOMPurify)
4. Updates are debounced (300ms) for the preview
5. Pure renderer-side, no IPC
### 4.4 Zen mode
1. User triggers `view.zenMode` → toggles `useSettingsStore.zenMode`
2. `AppShell` reads `zenMode` from store; when true, hides all chrome (header, tabs, toolbar, breadcrumb, status bar, sidebar)
3. Editor goes fullscreen
4. Pressing Esc exits zen mode (keydown listener in `use-zen-mode` hook)
### 4.5 Print preview
1. User triggers `file.print` → opens `PrintPreview` (full-window overlay)
2. The preview renders the current buffer's content as it would appear in print
3. Two buttons: "Print" (calls `ipc.file.print({ html })` which opens native print dialog) and "Close"
### 4.6 Minimap
1. `useSettingsStore.minimap` (existing setting) is read by `CodeMirrorEditor`
2. When true, the editor's extension includes `@replit/codemirror-minimap` (or a simpler custom implementation)
3. The minimap shows a shrunk version of the document on the right side of the editor
4. Toggling the setting adds/removes the extension dynamically
### 4.7 Breadcrumbs-with-symbols
1. The current `Breadcrumb` shows the file path. Extend it to also show markdown symbols (headings, code blocks)
2. Use a simple AST walk of the current buffer to extract heading levels
3. Show as a path-like navigation: `file.md > H1: Title > H2: Section > #line`
4. The `useSettingsStore.breadcrumbSymbols` toggle (default true) controls whether symbols are shown
### 4.8 Git status
1. On sidebar Git tab open, fetch `ipc.file.gitStatus({ rootPath: useFileStore.rootPath })`
2. The main process runs `git status --porcelain` (or equivalent) and returns the list
3. Show file list with status badges (M, A, D, ?)
4. Click a file opens it via `useFileStore.openFile`
5. `git.refresh` re-fetches
---
## 5. Error Handling
- **Word export failures:** `lib/docx-export.ts` catches `docx` lib errors → toast.error
- **Word export missing .dotx:** if custom template path is set but file doesn't exist, show inline banner in the dialog
- **Find-in-files failures:** if `ipc.file.search` throws (regex syntax error, IO error), show inline banner in the dialog
- **REPL:** no IPC, no error handling needed
- **Git status:** if folder isn't a git repo, return empty array. Panel shows "Not a git repository" message
- **Print:** if `ipc.file.print` fails (no printer, user cancels), toast.error or silent close
- **Minimap, Breadcrumbs:** renderer-side, no errors
---
## 6. Testing Strategy
- **Unit tests:** `lib/docx-export.ts` (markdown → docx conversion, ASCII handling), `lib/ascii-table.ts` (already tested)
- **Component tests:** 1-2 smoke tests per new component
- **Integration test:** `phase9-tools-smoke.test.tsx` covering the 6 command-triggered tools (dispatch opens correct modal/overlay)
- **Editor integrations:** minimap toggle, breadcrumbs render with symbols, git status panel render
- **Target: +30-40 new tests**, total ~290
---
## 7. Risks & Open Questions
**Risks:**
- **`docx` lib bundle size (~500KB).** Acceptable for a desktop app but worth noting. Lazy-load if it becomes a concern.
- **Word export custom template parsing** — the `.dotx` format is a zip with XML inside. The `docx` lib may not fully support reading existing templates. v1 may need a simpler "styles only" extraction.
- **Find-in-files regex compilation** — invalid regex would throw. Validate on the renderer before calling IPC.
- **Minimap performance** — for large files, the minimap can slow down scrolling. CodeMirror's built-in minimap has performance options to configure.
**Open questions (deferrable):**
- **REPL persistence** — should the textarea content survive across modal close/reopen? → Decision: NO for v1. Keep simple.
- **Git status auto-refresh** — should it auto-refresh every N seconds? → Decision: NO for v1. Manual via `git.refresh` command.
- **Find-in-files result count limit** — what if there are 10,000 matches? → Decision: limit to 500 results for v1, show "X more matches" message.
---
## 8. Out of Scope (deferred to Phase 10 or later)
- Custom undo/redo (still not in scope)
- Snippet/template library
- Multi-cursor editing
- LSP / language server
- Phase 10 will delete legacy files including the old `src/print-preview.js`, `src/wordTemplateExporter.js`, `src/welcome.js`, `src/zen-mode.js`, etc.
---
## 9. Success Criteria
Phase 9 is complete when:
- All 10 features implemented and accessible via the command store
- `lib/docx-export.ts` generates valid `.docx` files
- Find-in-files returns results from a recursive disk walk
- REPL renders markdown snippet previews
- Zen mode hides all chrome and Esc exits
- Print preview opens native print dialog
- Minimap appears when `useSettingsStore.minimap` is true
- Breadcrumbs show symbols by default
- Git status panel shows modified/added/deleted/untracked files
- ~+30-40 new tests, total ~290
- `npx vite build` succeeds
- Branch tagged `phase-9-advanced-tools` and pushed to origin
@@ -0,0 +1,361 @@
# 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
@@ -0,0 +1,333 @@
# Phase 10 — Polish + Delete Legacy Design
> Companion to the parent plan: `docs/superpowers/plans/2026-06-05-react-ui-redesign.md` (Phase 10 is sketched at high level; this spec locks architecture, file map, deletion targets, and version strategy.)
**Date:** 2026-06-06
**Phase:** 10 of 10 (React + shadcn/ui UI redesign) — **FINAL**
**Tag (on completion):** `v5.0.0` (the first release tag, all prior phases were `phase-N-*` working tags)
---
## 1. Goal & Non-Goals
**Goal:** Finalize the React UI redesign. Decompose the legacy 146KB `src/main.js` into a feature-first modular structure under `src/main/`, remove the legacy vanilla-JS renderer and all dead IPC bridges, then ship **v5.0.0** with a CHANGELOG.
**Non-goals (Phase 10):**
- Adding new features (Phases 1-9 shipped all of them)
- A full main-process test suite (the existing main process is largely untested; adding tests is Phase 11+)
- Backwards compat shims for the legacy renderer
- Renderer-side refactor (already done)
- Migrating the renderer build pipeline further (vite configs are in place)
**Success criteria:**
- `src/main.js` is gone; `src/main/index.js` is the new entrypoint
- `package.json#main` points to `src/main/index.js`
- All 12 legacy renderer files are deleted
- All 9 dead IPC channels are removed from `preload.js` and `main.js`
- `src/index.html` is reduced to ~50 lines (just the Vite bootstrap)
- `package.json#version` is `5.0.0`
- `CHANGELOG.md` exists in Keep a Changelog 1.1.0 format
- `git grep -E "renderer\.js|command-palette|print-preview|welcome\.js|zen-mode|wordTemplate|ascii-generator|table-generator|styles\.css"` returns zero results
- All 305 tests still pass
- `npx vite build --config vite.renderer.config.ts` succeeds
- `npx electron .` launches and main window renders
- Tag `v5.0.0` pushed to origin
---
## 2. Target Architecture
### 2.1 `src/main/` (feature-first decomposition)
```
src/main/
├── index.js # entrypoint: bootstraps store, app, window, ipc
├── store.js # electron-store wrapper (preferences + wordTemplatePath)
├── ipc.js # ipcMain.handle registration (composes from modules)
├── files/
│ ├── index.js # file ops facade (read/write/list/pickFolder/pickFile)
│ ├── search.js # recursive regex search (used by find-in-files)
│ ├── git.js # git status porcelain parser
│ └── binary.js # writeBuffer helper (Uint8Array → file)
├── menu/
│ ├── index.js # buildMenu() — composes the app menu
│ └── items.js # individual menu items (File, Edit, View, etc.)
├── window/
│ ├── index.js # createMainWindow ONLY (createAsciiWindow/createTableWindow are DEAD)
│ └── state.js # window state persistence
├── word-template/
│ ├── index.js # WordTemplateExporter facade
│ ├── parser.js # .dotx parsing
│ ├── converter.js # markdown → docx
│ └── apply.js # apply template styles to converted docx
└── utils/
├── paths.js # path helpers
├── logger.js # structured logging
└── download.js # tool downloader
```
**Module rules:**
- Each file has one clear responsibility (no god files; CLAUDE.md says >300 lines is the cap)
- `index.js` is the public face of a folder; deeper files are private
- `src/main/index.js` (top-level) wires everything together
- Cross-folder imports go through `index.js`, not directly to internals
### 2.2 Entry point change
**Before:**
```json
// package.json
"main": "src/main.js"
```
**After:**
```json
// package.json
"main": "src/main/index.js"
```
The new `src/main/index.js` runs the same `app.whenReady().then(...)` flow that the current `src/main.js` does, but composes the decomposed modules.
### 2.3 What becomes dead code (removed during decomposition)
When the legacy renderer files are deleted, these main-process functions become orphaned and are removed too:
| Function | File | Why dead |
|---|---|---|
| `createAsciiWindow()` | `src/main/window/index.js` | Loads deleted `src/ascii-generator.html` |
| `createTableWindow()` | `src/main/window/index.js` | Loads deleted `src/table-generator.html` |
| `ipcMain.on('open-ascii-generator', ...)` | `src/main/index.js` (after decomposition) | Replaced by React `<AsciiGeneratorDialog>` |
| `ipcMain.on('open-table-generator', ...)` | `src/main/index.js` (after decomposition) | Replaced by React `<TableGeneratorDialog>` |
| `webContents.send('print-preview')` | `src/main/menu/items.js` | Replaced by React `<PrintPreview>` |
| `webContents.send('print-preview-styled')` | `src/main/menu/items.js` | Replaced by React `<PrintPreview>` |
| `webContents.send('toggle-command-palette')` | `src/main/menu/items.js` | Replaced by `useCommandStore` |
| `require('./wordTemplateExporter')` | `src/main/index.js` (after decomposition) | Replaced by `src/main/word-template/` + renderer-side `lib/docx-export.ts` |
---
## 3. Legacy Deletion Map
### 3.1 Files to delete from `src/` (12 files, ~14,426 lines)
| File | Size | Lines | Replaced by |
|---|---|---|---|
| `src/renderer.js` | 213KB | 5319 | `src/renderer/` (Phases 1-9) |
| `src/styles.css` | 74KB | 3723 | `src/renderer/index.css` + Tailwind |
| `src/styles-modern.css` | 71KB | 2625 | Tailwind + shadcn/ui |
| `src/styles-concreteinfo.css` | 21KB | 969 | Tailwind theme tokens |
| `src/styles-sidebar.css` | 9.7KB | 304 | `<Sidebar>` component |
| `src/styles-zen.css` | 2.1KB | 102 | Zen mode in AppShell |
| `src/styles-welcome.css` | 2.2KB | 24 | Welcome dialog |
| `src/fonts.css` | 1.8KB | (imported elsewhere) | Tailwind font config |
| `src/command-palette.js` | (small) | 109 | `useCommandStore` |
| `src/print-preview.js` | (small) | 138 | `<PrintPreview>` |
| `src/welcome.js` | (small) | 78 | `<Welcome>` modal |
| `src/zen-mode.js` | (small) | 292 | `use-zen-mode` hook + AppShell |
| `src/wordTemplateExporter.js` | (small) | 743 | `src/main/word-template/` + renderer `lib/docx-export.ts` |
| `src/ascii-generator.html` | 34KB | (HTML) | `<AsciiGeneratorDialog>` |
| `src/table-generator.html` | 18KB | (HTML) | `<TableGeneratorDialog>` |
| `src/index.html` | 103KB | 1667 | `src/renderer/index.html` (already exists, Vite root) |
**Total: 13 files = ~16,093 lines / ~548KB**
`src/renderer/index.html` (the live Vite template) is NOT deleted.
### 3.2 Dead IPC channels to remove from `src/preload.js`
- `toggle-command-palette` (line 238)
- `open-ascii-generator` (line 89)
- `open-table-generator` (line 92)
- `print-preview` (line 173)
- `print-preview-styled` (line 174)
- `show-table-generator` (line 180)
- `show-ascii-generator-window` (line 217)
- `show-ascii-generator` (line 218)
- `show-table-generator-window` (line 221)
And from the exposed API surface:
- `openAscii: () => ipcRenderer.send('open-ascii-generator')` (line 445)
- `openTable: () => ipcRenderer.send('open-table-generator')` (line 446)
**9 channel names + 2 API entries to remove.**
### 3.3 Legacy references in `src/index.html` (16 places) — **the LEGACY file at project root, 1667 lines**
- `<link rel="stylesheet" href="styles.css">` (line ~6)
- `<link rel="stylesheet" href="styles-welcome.css">` (line ~7)
- `<div id="print-preview-overlay" class="modal hidden" ...>` block (~10 lines)
- `<div class="command-palette-overlay hidden" id="command-palette-overlay">` block (~5 lines)
- `<script src="renderer.js"></script>` (final script tag)
**All of these are removed by deleting the file `src/index.html` entirely.**
The CURRENT live renderer template is **`src/renderer/index.html`** (already correct: minimal, CSP, Plus Jakarta Sans font, `<script type="module" src="./main.tsx">`). This file is **NOT touched** in Phase 10. Vite's `root` is set to `src/renderer/` in `vite.renderer.config.ts`, so `src/renderer/index.html` is the HTML template Vite uses. The `src/index.html` at the project root is an orphan from the pre-Vite era.
**Verification:** after deleting `src/index.html`, the renderer build still works because Vite doesn't look at the project root — it uses `src/renderer/index.html`.
### 3.4 Main process rewiring
- Remove `require('./wordTemplateExporter')` from main entrypoint
- Remove `webContents.send('print-preview*')` and `webContents.send('toggle-command-palette')` from menu items
- Remove `ipcMain.on('open-ascii-generator', ...)` and `ipcMain.on('open-table-generator', ...)` handlers
- Remove `asciiGeneratorWindow` and `tableGeneratorWindow` global state (and any references to `loadFile(...ascii-generator.html)` / `loadFile(...table-generator.html)`)
---
## 4. `src/index.html` — DELETE (not rewrite)
The current `src/index.html` is 1667 lines of legacy markup and is **DELETED** (not rewritten). The renderer is already correctly served by `src/renderer/index.html` (the Vite root). Deleting the legacy root-level `src/index.html` is the action — no replacement file is needed.
`src/renderer/index.html` (already correct) is NOT modified:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-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:..." rel="stylesheet">
</head>
<body class="font-sans antialiased">
<div id="root"></div>
<script type="module" src="./main.tsx"></script>
</body>
</html>
```
---
## 5. Version Bump + CHANGELOG
### 5.1 `package.json`
```diff
- "version": "4.4.2",
+ "version": "5.0.0",
```
Major version bump because the legacy renderer removal is a breaking change for anyone who had plugins/integrations pointing at `src/renderer.js`.
### 5.2 `CHANGELOG.md` (new file, Keep a Changelog 1.1.0 format)
```markdown
# Changelog
All notable changes to markdown-converter will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [5.0.0] - 2026-06-06
### Added
- **Complete React 19 + Vite + TypeScript renderer** replacing the legacy vanilla-JS UI
- Native macOS/Windows/Linux menus with command palette and keyboard shortcuts
- Settings sheet (5 tabs: editor, theme, keybindings, advanced, about)
- Modal layer with 13 modal kinds (export PDF/DOCX/HTML/Word, batch, settings, about, welcome, confirm, ASCII gen, table gen, find in files)
- 10 advanced tools: ASCII generator, table generator, Word export, find-in-files, REPL, print preview, zen mode, minimap, breadcrumbs-with-symbols, git status
- Sonner toast notifications at 4 wire points
- 3 mount strategies: ModalLayer dialogs, App.tsx overlays, editor/sidebar integrations
- `ipc.file.writeBuffer` for renderer-side binary output
- `ipc.file.search` (recursive regex), `ipc.file.gitStatus`, `ipc.print.show`, `ipc.app.showSaveDialog`
- 305 unit + integration tests (vitest + React Testing Library)
- Per-package @radix-ui primitives
- shadcn/ui (new-york style) primitives
### Changed
- **BREAKING**: Renderer is now React-only.
- Main process decomposed from 146KB `src/main.js` into feature-first modules under `src/main/`
- `src/index.html` reduced from 1667 to ~50 lines
- IPC contract: handlers throw, `safeCall` catches → `{ ok, error }`
- Settings store: `useSettingsStore` (zustand persist with zod)
- Modal state: `useAppStore.modal: ModalState` discriminated union
### Removed
- `src/renderer.js` (legacy vanilla-JS renderer, 5319 lines) — and `src/index.html` (1667 lines of legacy markup, replaced by `src/renderer/index.html` which is already the live Vite template)
- 7 legacy stylesheets (styles.css, styles-modern.css, styles-concreteinfo.css, styles-sidebar.css, styles-zen.css, styles-welcome.css, fonts.css)
- 5 legacy scripts (command-palette.js, print-preview.js, welcome.js, zen-mode.js, wordTemplateExporter.js)
- 2 legacy HTMLs (ascii-generator.html, table-generator.html)
- 9 dead IPC channels (toggle-command-palette, open-*/show-* ascii/table, print-preview*)
```
---
## 6. Task Decomposition
**10 tasks** (each independently verifiable, one feature per commit, no bundling):
1. **Decompose main.js — `src/main/files/`** (file ops facade, search, git, binary)
2. **Decompose main.js — `src/main/menu/`** (buildMenu + items, with dead sends removed)
3. **Decompose main.js — `src/main/window/`** (createMainWindow ONLY — ascii/table windows removed)
4. **Decompose main.js — `src/main/word-template/`** (WordTemplateExporter split into parser/converter/apply)
5. **Decompose main.js — `src/main/utils/` + `store.js` + `ipc.js` + `index.js`** (glue + new entrypoint)
6. **Trim preload.js** — remove 9 dead IPC channels + 2 exposed API entries
7. **Delete legacy renderer files** (13 files: renderer.js, 7 styles, fonts.css, 4 scripts, 3 htmls)
8. **Verify src/renderer/index.html is the live template** (no action needed if it's already correct)
9. **Bump package.json version to 5.0.0 + write CHANGELOG.md**
10. **Final verification + tag v5.0.0** (build, tests, grep, electron smoke)
Tasks 1-5 are subagent-driven (decomposition is mechanical given a clear target structure). Tasks 6-9 are direct edits. Task 10 is a verification gate.
---
## 7. Verification Strategy
**Per task:**
- After each decomposition step: `npx vitest run` (305 still green)
- After main.js decomposition: `npx electron .` smoke — app starts, opens a file
- After deletions: `git grep -E "renderer\.js|command-palette|print-preview|welcome\.js|zen-mode|wordTemplate|ascii-generator|table-generator|styles\.css"` returns ZERO results
**Final (Task 10):**
- `npx vitest run` — 305 passing
- `npx vite build --config vite.renderer.config.ts` — succeeds
- `npx vite build --config vite.preload.config.ts` — succeeds
- `npx electron .` — app launches, main window renders
- Manual smoke: open a `.md` file, edit it, export to PDF/DOCX, use the command palette
- `git tag -a v5.0.0 -m "..."` and `git push origin v5.0.0`
---
## 8. Risks & Open Questions
**Risks:**
- **Decomposition regressions.** Splitting a 146KB main.js into 7+ files has surface area for missed imports / circular deps. Mitigation: tests stay green; electron smoke after each step.
- **Hidden legacy references.** `git grep` won't catch references inside minified bundles or in node_modules. Mitigation: vite build will fail if there's a dangling import.
- **`src/main/index.js` entrypoint change.** Anything in the build pipeline (electron-builder, scripts) that hardcodes `src/main.js` needs to be updated. Mitigation: grep all of `package.json`, `scripts/`, `vite.*.config.ts` for `main.js`.
**Open questions (resolved during brainstorming):**
- ~~Main process scope~~ → Full rewrite
- ~~Folder shape~~ → Feature-first
- ~~IPC migration~~ → Delete dead channels
- ~~Version strategy~~ → v5.0.0 with Keep a Changelog format
- ~~Order of work~~ → Decompose first, delete last
---
## 9. Out of Scope (deferred to Phase 11+)
- Main process test suite
- Renderer-side further refactor
- New features
- Migration to tauri (separate plan in `docs/plans/2026-03-15-react-tauri-pwa.md`)
---
## 10. Success Criteria
Phase 10 is complete when:
- All 10 tasks are committed, one per commit, no bundling
- `src/main/index.js` is the new entrypoint
- All 12 legacy files are deleted
- All 9 dead IPC channels are removed
- `package.json#version` is `5.0.0`, `package.json#main` is `src/main/index.js`
- `CHANGELOG.md` exists with a complete v5.0.0 entry
- 305 tests still pass
- `npx vite build` succeeds for both renderer and preload configs
- `npx electron .` launches and the app works end-to-end
- `git grep` for legacy references returns zero results
- Tag `v5.0.0` is created and pushed to origin
- Phase 10 is the LAST phase of the React UI redesign
@@ -0,0 +1,295 @@
# Production polish — v5 shippable build
**Date:** 2026-06-07
**Branch:** `react-electron`
**Status:** Draft, pending implementation plan
**Author:** Claude (brainstormed with Amit Haridas)
## 1. Goals & non-goals
### Goals
v5 is reliably shippable to two distribution channels:
- **GitHub Releases** (public, free, existing workflow).
- **ConcreteInfo update server** at `https://updates.concreteinfo.co.in/v5/` (self-hosted, for ConcreteInfo's own users).
Concretely:
- A non-blocking update banner surfaces "v5.0.2 is available" with a user-confirmed restart-to-install flow. No silent background installs.
- A light first-run wizard (theme + update channel + starter template), all skippable.
- One-shot auto-migration from v4.4.1 settings, with a v4 backup file and a toast on success/failure.
- Local crash dump capture (no third-party). CrashReportModal lets the user open the dump folder and copy/delete dumps.
- GitHub Actions CI that builds + uploads artifacts on tag and runs the test suite on every PR.
### Non-goals (deferred to v5.1+)
- **Code signing.** macOS Gatekeeper and Windows SmartScreen will warn. Re-evaluated for v5.1.
- **Sentry or any third-party crash reporting.** Local dumps only.
- **Auto-install on quit.** Always user-confirmed.
- **Delta updates** (full downloads only in v5).
- **Plugin system, cloud/licensing, perf/a11y** — each is its own subsequent spec.
## 2. Architecture
```
GitHub Releases (public) ConcreteInfo (CI feed)
└── *.zip, *.dmg, *.exe, └── *.zip, *.dmg, *.exe,
*.deb, *.rpm, *.deb, *.rpm,
latest.yml, latest- latest.yml, latest-
mac.yml, latest- mac.yml, latest-
linux.yml, latest- linux.yml, latest-
windows.yml windows.yml
▲ ▲
│ │
└──────┬───────────────────────┘
│ electron-updater reads
│ the channel chosen in
│ Settings (default: GitHub)
┌─────────────────────────────────────────────────────┐
│ Main process (src/main/updater/) │
│ - Updater service: wraps electron-updater │
│ - Channel resolver: returns feed URL from setting │
│ - State machine: idle → checking → available → │
│ downloading → ready → installing │
│ - Crash writer: catches process.on('uncaught…) │
│ - Migration runner: idempotent, runs on app start│
└─────────────────────────────────────────────────────┘
▲ ▲
│ IPC (renderer→main, │ IPC (renderer→main,
│ allowlisted SEND) │ allowlisted SEND)
│ updater:check, │ crash:read,
│ updater:install, │ crash:open-dir,
│ updater:get-state │ crash:delete
│ │
│ IPC (main→renderer, │
│ allowlisted RECEIVE) │
│ updater:status │
▼ ▼
┌─────────────────────────────────────────────────────┐
│ Renderer (preload bridge + React) │
│ - Update banner: "v5.0.2 available" │
│ - Settings: Update channel radio │
│ - First-run wizard: skip-links, all optional │
│ - Crash dialog: open dump dir, copy file │
│ - Migration: first-launch indicator in settings │
└─────────────────────────────────────────────────────┘
```
### Key boundaries
- **`src/main/updater/`** is a single new directory. `updater-service.js` owns the `electron-updater` lifecycle, never the renderer.
- **Renderer talks to updater over IPC only.** No direct `autoUpdater` import in preload. Channels must be in `ALLOWED_SEND_CHANNELS` / `ALLOWED_RECEIVE_CHANNELS`.
- **Channel switching is a settings change.** No restart required; the next `checkForUpdates()` reads the new feed URL.
- **Migration is idempotent.** Stores a `migration.version` key; skips if already at v5.
- **Crash writer never blocks startup.** Initialized in main entry, but a write failure is non-fatal.
## 3. Component breakdown
| Unit | What it does | How it's used | Depends on |
|---|---|---|---|
| `main/updater/updater-service.js` | Owns `electron-updater`; exposes check/download/install; emits status events | Main process singleton; started after `app.whenReady()` | `electron-updater`, `electron` |
| `main/updater/feed-config.js` | Maps channel setting → feed URL; reads from `app.getPath('userData')/settings.json` | Called by updater-service on each check | settings store |
| `main/updater/crash-writer.js` | Hooks `process.on('uncaughtException', …)`; writes minidump + stack to `app.getPath('userData')/crashDumps/{timestamp}.json` | Initialized in main entry, before anything else | `electron`, `app.getPath` |
| `main/updater/migration-runner.js` | Reads v4 settings; transforms to v5 schema; writes backup; updates `migration.version` | Run from main entry on `app.whenReady()` | `fs`, settings store |
| `main/ipc/updater-handlers.js` | IPC handlers: `updater:check`, `updater:install`, `updater:get-state` | Registered in main entry | updater-service |
| `main/ipc/crash-handlers.js` | IPC handlers: `crash:read`, `crash:open-dir` | Registered in main entry | crash-writer |
| `preload.js` (extension) | Add `updater.check()`, `updater.install()`, `crash.read()`, `crash.openDir()` to `electronAPI`; add channels to allowlist | Preload runs at boot | existing preload |
| `renderer/lib/updater-store.ts` | Zustand store mirroring updater state; subscribes to `updater:status` events | Renderer; consumed by banner, settings, modals | `zustand`, IPC bridge |
| `renderer/components/UpdateBanner.tsx` | Non-blocking banner shown when `updater-store.status` is `available | downloading | ready` | Mounted in `App.tsx` next to header | updater-store, sonner |
| `renderer/components/FirstRunWizard.tsx` | 3-step modal with skip links; opens on first launch when `app-store.firstRun === true` | Mounted in `App.tsx` | app-store, settings-store, command-store |
| `renderer/components/modals/SettingsModal.tsx` (extend) | Add "Updates" section: channel radio, "Check now" button, auto-check toggle | Mounted via `useAppStore.modal` | updater-store, settings-store |
| `renderer/components/modals/CrashReportModal.tsx` | List local crash dumps; "Open dump folder", "Copy to clipboard", "Delete" actions | Mounted via `useAppStore.modal` | crash ipc, sonner |
| `renderer/lib/migrations/v4-to-v5.ts` | Pure function: `(v4Settings) => v5Settings` | Called from `migration-runner` | zod schemas |
### Data flow — "user clicks Check for updates"
1. Settings panel: `useSettingsStore.getState().setSetting('updateChannel', 'github' | 'concreteinfo')`.
2. `SettingsModal` calls `await ipc.updater.check()`.
3. Preload `safeCall``window.electronAPI.updater.check()``ipcRenderer.invoke('updater:check')`.
4. Main handler asks `updater-service` to `autoUpdater.checkForUpdates()` with the channel's feed URL.
5. `updater-service` emits `'updater:status', { state: 'available', version: '5.0.2' }`.
6. Preload forwards to `updater-store` via `window.electronAPI.on('updater:status', cb)`.
7. `updater-store` state flips to `available`; `UpdateBanner` renders.
8. User clicks "View release notes" → opens `https://github.com/.../releases/tag/v5.0.2` via `ipc.app.openExternal`.
9. User clicks "Restart to update" → calls `ipc.updater.install()`. `updater-service` calls `autoUpdater.quitAndInstall()`. App quits, relaunches into v5.0.2.
## 4. Error handling
### Updater
- **No network:** `autoUpdater.checkForUpdates()` rejects with `ENOTFOUND` / `ETIMEDOUT`. We catch, log to main log, emit `updater:status { state: 'error', code: 'NETWORK' }`. Banner shows "Couldn't check for updates. Try again." Toast fires inline at the wire point in `UpdateBanner` / `SettingsModal` on retry, matching the existing pattern (`toasts-inline-at-wire-points`).
- **Feed 404 / signature missing (N/A in v5 since unsigned):** Treat as configuration error. Log to main log with full URL. Banner shows "Update feed is misconfigured. Report this on GitHub." Crash-log-style entry is written.
- **Update available but download fails:** Banner flips to "Download failed. Try again." Clicking "Try again" re-invokes `autoUpdater.downloadUpdate()`. Three consecutive failures show a "Report issue" link in the banner.
- **Update installs but launch fails:** Worst case. We catch the post-`quitAndInstall` crash via `crash-writer` and write a marker file `app.getPath('userData')/update-failed.json` with the previous version. On next boot, the user is offered to revert manually by re-downloading from the GitHub release page (a "rolled back" banner instead of the wizard).
- **Concurrent checks:** Debounce 60s. A second `checkForUpdates()` within 60s is a no-op; returns the current state. The Check-Now button is disabled during a check.
### Migration
- **v4 settings file missing/corrupt:** Treat as "nothing to migrate." App starts with v5 defaults. Toast: "Welcome to v5 — using default settings."
- **Migration throws mid-transform:** Original v4 file is preserved as `settings.v4.bak.json` (already on disk). App starts with v5 defaults. Toast: "Couldn't migrate v4 settings — your old settings are preserved at {path}."
- **`migration.version === 5`:** Skip entirely. No-op.
### Crash writer
- **Dump write fails (disk full, permissions):** Print to stderr; do not crash the app. Recovery is "user's problem" — we never block app startup on the crash writer.
- **No dumps in dir:** CrashReportModal shows empty state: "No crashes recorded — nice work!"
### First-run wizard
- **Skip clicked at any step:** Sets `app-store.firstRun = false` and proceeds. All defaults already match the unselected choice, so this is non-destructive.
- **Wizard cannot reach settings (corrupt store):** Falls back to defaults silently. Wizard still closes.
## 5. Testing
### Unit (Vitest, renderer-side)
- `useUpdaterStore`: state transitions on each `updater:status` event; debounce on `check()`; reject on missing channel.
- `FirstRunWizard`: each step's CTA writes the right slice; "Skip" leaves defaults; "Skip at step 1" still closes the wizard and sets `firstRun = false`.
- `migrations/v4-to-v5`: golden-file tests — every v4 shape we ship transforms to expected v5 output. Idempotency: running twice yields identical v5 settings.
- `feed-config`: each channel setting resolves to the right feed URL; missing/unknown channel falls back to GitHub.
### Component (Vitest + RTL)
- `UpdateBanner`: hidden when state is `idle` or `error-network`; visible with the right copy in `available`/`downloading`/`ready`; Restart button calls `ipc.updater.install()`; "View release notes" opens the right URL via `ipc.app.openExternal`.
- `FirstRunWizard`: skip links work; theme picker updates the store; channel picker persists; template picker inserts into the new buffer.
- `CrashReportModal`: lists dumps from the IPC response; "Open folder" invokes `crash.openDir`; delete removes the file.
- `SettingsModal > Updates`: channel radio flips `settings-store.updateChannel`; "Check now" fires `ipc.updater.check`; auto-check toggle persists.
### Integration (Vitest, full app)
- **Migration end-to-end:** pre-seed a v4 settings file in `app.getPath('userData')/settings.json`, launch the app, verify v5 file is written, v4 backup exists, `migration.version === 5`, and the wizard opens on first run.
- **Update flow mock:** stub `electron-updater` to emit `available``downloading``ready`; verify the banner appears, Restart click triggers `quitAndInstall`, and the IPC sequence matches the allowlist.
### E2E (Playwright + Electron, runs the live app)
- Open the app, verify the FirstRun wizard renders. Skip. Verify the editor is visible.
- Open Settings, switch update channel from GitHub to ConcreteInfo, click Check now. Stub the feed response. Verify the banner appears with the right version.
- Click Restart. Verify the app calls `quitAndInstall` (assert on a mocked `autoUpdater.quitAndInstall`).
- Trigger an unhandled rejection in the renderer. Verify a dump is written to `crashDumps/`. Open the CrashReportModal, verify it appears in the list.
### Coverage targets
- Updater service: ≥ 90% (small surface, hot path).
- Migration runner: 100% of branches (idempotency, corrupt file, missing file, transform failure).
- FirstRunWizard: ≥ 80%.
- Component tests above any preset.
## 6. Distribution feed contracts
### GitHub Releases (default)
Feed URL pattern:
```
https://github.com/{owner}/{repo}/releases/download/v{version}/
```
For v5.0.2:
```
https://github.com/{owner}/{repo}/releases/download/v5.0.2/latest-mac.yml
https://github.com/{owner}/{repo}/releases/download/v5.0.2/latest-linux.yml
https://github.com/{owner}/{repo}/releases/download/v5.0.2/latest-windows.yml
```
`electron-updater` reads these automatically given the GitHub owner/repo config. The release workflow already exists at `.github/workflows/release.yml` and builds `.dmg`, `.zip`, `.exe`, `.deb`, `.rpm`. We add `latest.yml` generation via `electron-builder --publish always` in the CI.
### ConcreteInfo feed
Feed URL:
```
https://updates.concreteinfo.co.in/v5/latest.yml
https://updates.concreteinfo.co.in/v5/latest-mac.yml
https://updates.concreteinfo.co.in/v5/latest-linux.yml
https://updates.concreteinfo.co.in/v5/latest-windows.yml
```
CI mirrors the GitHub Release artifacts to this path on every release. ConcreteInfo infra is documented in `~/.claude-mmax/CLAUDE.md`; the coolify server is `localhost:8000`. The mirror is a static-file route — no auth, just version-prefixed.
## 7. First-run wizard contract
Three steps. Each step has "Skip" and "Back" links. Final step is "Done."
1. **Theme:** Light / Dark / System. Default: System. Persists to `settings-store.theme`.
2. **Update channel:** GitHub Releases / ConcreteInfo. Default: GitHub Releases. Persists to `settings-store.updateChannel`.
3. **Starter template:** Blank / README / Meeting notes / Blog post. Default: Blank. On "Done," creates an untitled buffer with the chosen template content.
`firstRun` lives in `app-store` (not persisted across app data resets) and is checked on every launch. Setting it to `false` either explicitly (skip/done) or implicitly (v4 migration succeeded) prevents re-showing.
## 8. Settings migration contract (v4.4.1 → v5.0.0)
`migration-runner` runs once on first v5 launch. It:
1. Reads `app.getPath('userData')/settings.json` if it exists.
2. Validates the v4 shape with a zod schema (`v4SettingsSchema`).
3. If valid: transforms via `migrations/v4-to-v5.ts` and writes the v5 settings to `settings.json`. Backs up v4 to `settings.v4.bak.json`. Sets `migration.version = 5` in the v5 file.
4. If missing or invalid: writes a fresh v5 settings file with defaults. `migration.version = 5`.
5. If transform throws: leaves v4 file in place as the "backup." App starts with defaults. Toast warns the user.
The transform handles:
- v4 `theme` ('light' | 'dark' | 'auto') → v5 `theme` ('light' | 'dark' | 'system').
- v4 `customCss` string → v5 `customCssPath` file path or `null`.
- v4 `recentFiles: string[]` → v5 `recentFiles` (unchanged shape).
- v4 `editorFontSize: number` → v5 `editorFontSize` (unchanged shape).
- v4 `keyBindings: object` → v5 `userBindings` (keymap).
- v4 `snippets: array` → v5 `snippets` (unchanged shape).
- v4 `pdfExportOptions` etc. → v5 schema for the new export pipeline.
Anything not in the v4 schema is dropped. Defaults are taken from the v5 zod schema.
## 9. IPC allowlist additions
`src/preload.js` adds these to `ALLOWED_SEND_CHANNELS`:
```js
'updater:check',
'updater:install',
'updater:get-state',
'crash:read',
'crash:open-dir',
'crash:delete',
```
`ALLOWED_RECEIVE_CHANNELS`:
```js
'updater:status',
```
The `electronAPI` object gets:
```js
updater: {
check: () => ipcRenderer.invoke('updater:check'),
install: () => ipcRenderer.invoke('updater:install'),
getState: () => ipcRenderer.invoke('updater:get-state'),
onStatus: (cb) => ipcRenderer.on('updater:status', (_, payload) => cb(payload)),
},
crash: {
read: () => ipcRenderer.invoke('crash:read'),
openDir: () => ipcRenderer.send('crash:open-dir'),
delete: (filename) => ipcRenderer.invoke('crash:delete', filename),
},
```
## 10. Risks & mitigations
| Risk | Mitigation |
|---|---|
| First-run wizard is annoying to long-time users | Skippable; only shows on first launch. `firstRun = false` is set permanently on first skip/done. |
| Auto-migration corrupts settings | Original v4 file is preserved as `settings.v4.bak.json`. Transform errors fall back to defaults and toast the user. |
| Crash writer fills disk | Cap at 20 dumps; oldest auto-pruned. |
| Update feed mirror drift between GitHub and CI | Mirror runs in CI on every release; manual `npm run publish:concreteinfo` available as fallback. |
| `electron-updater` is unsigned, so anyone can publish a "v5.0.2" to a mirror | We do not enable auto-install in v5 — every install is user-confirmed via the release-notes page. v5.1 adds signing. |
| First-run wizard blocks app start on a slow renderer | Wizard is non-blocking. App shell mounts and is interactive behind the modal. |
| Debounced `checkForUpdates()` may mask real errors | "Check now" button bypasses the debounce; debounce only applies to automatic checks. |
| CI release workflow is on a tag — broken tags must be re-tagged manually | Documented in CONTRIBUTING.md; pre-release tag re-runs the workflow. |
## 11. Out of scope (deferred)
- Code signing.
- Delta updates.
- Per-channel pre-release / beta tracks (only stable feeds in v5).
- Crash analytics / Sentry.
- Squirrel.Windows-specific quirks (we publish NSIS only).
@@ -1,216 +0,0 @@
# MarkdownConverter — Monospace Font Embedding Design
**Date:** 2026-06-30
**Status:** Approved
**Author:** Amit Haridas
## Overview
Guarantee proper ASCII character alignment in MarkdownConverter's preview and every supported export format (PDF, DOCX, HTML, plus ODT/RTF/EPUB/LaTeX), with no OS-level font dependency. The user can pick between **JetBrains Mono** (default) and **Fira Code**, and toggle ligatures (default off). Both font families are bundled inside the app, so alignment holds on every supported platform (Windows/macOS/Linux) without an internet connection, without system-wide font installation, and without the user touching anything system-level.
## Goals
1. ASCII art and code-block tables (e.g. `+----+----+` column delimiters) render at identical advance widths in the live preview **and** in every exported file.
2. No OS font dependency — TTFs ship inside the app.
3. Per-user choice of monospace family + ligature behaviour.
4. Self-contained exports: the exported PDF/DOCX/HTML file is portable to another machine and stays aligned.
## Non-Goals (v1)
- No font subsetting of TTFs (we ship the full file; xelatex subsets it into the PDF automatically; DOCX carriers get the full TTF in `word/fonts/`).
- No support for the user adding a third bundled font family.
- No PPTX or revealjs/Beamer ligature-toggle (PPTX is a slide format that rarely carries ASCII tables; revealjs/Beamer inherit HTML/LaTeX defaults).
- No licensed/commercial fonts (Fira Code and JetBrains Mono are both SIL OFL — confirmed in `assets/fonts/JetBrainsMono-LICENSE.txt`).
## Decisions Locked
| Decision | Choice | Reason |
|---|---|---|
| Scope | All export formats | All-surfaces alignment |
| DOCX strategy | Embed TTF into the DOCX zip | Truly portable; alignment holds even when the recipient lacks the font |
| PDF strategy | Pass TTF path to xelatex via `fontspec` (`\setmonofont[Path=...]`) | xelatex subsets the font into the PDF; reproducible across machines |
| Font choice | Both bundled; user-pickable in settings | Cover both preferences; default JetBrains Mono |
| Ligatures | Off by default; user toggle | Ligatures change advance widths and break ASCII grid alignment |
| License | SIL OFL (both families) | Embedding/bundling explicitly permitted when license travels with the binary (already present at `assets/fonts/JetBrainsMono-LICENSE.txt`) |
## Architecture
```
settings.json
│ (renderer + main read on init)
CSS body classes: .mono-jetbrains / .mono-fira
.mono-ligatures-on / .mono-ligatures-off
--font-mono-active token
▲ ▲
│ IPC │ IPC
│ │
Preview pane ┌───────────┴──────────┐
ASCII Generator window │ Export pipeline │
Print-preview iframe │ (main process) │
│ uses MonospaceFontConfig
└──────────────────────┘
Bundle: assets/fonts/
├─ JetBrainsMono-Regular.ttf
├─ JetBrainsMono-Bold.ttf
├─ FiraCode-Regular.ttf
├─ FiraCode-Bold.ttf
└─ (existing woff2 for renderer)
```
## New Modules
| File | Role |
|---|---|
| `src/main/MonospaceFontConfig.js` | Single source of truth. Resolves the active monospace family + weight → absolute TTF path, with awareness of dev vs packaged (asar.unpacked) layout. Returns `null` + warns when a file is missing. |
| `src/main/PdfFontHeader.js` | Builds the xelatex `header.tex` snippet with `\usepackage{fontspec}\setmonofont{...ttf}[Path=...,UprightFont=*-Regular,BoldFont=*-Bold,Ligatures=NoCommon/TeX]`. Also returns the lualatex equivalent. |
| `src/main/DocxFontEmbedder.js` | Unzips a pandoc-produced DOCX with `jszip`, writes TTFs into `word/fonts/`, patches `[Content_Types].xml`, `_rels/document.xml.rels`, creates `word/fontTable.xml` with `<w:embedRegular/>` referencing the TTF, patches `word/styles.xml` so the `SourceCode`/`VerbatimChar` styles bind to the embedded font name, then rezips. Idempotent. |
| `src/main/EpubFontEmbedder.js` | Wrapper around pandoc `--epub-embed-font` — verifies the chosen TTF is referenced in `OEBPS/content.opf`; patches the manifest if missing. |
| `src/main/ExportCss.js` | Returns a self-contained CSS string with `@font-face { src: url(data:font/woff2;base64,...) }` for the chosen family. Used by HTML export `--css` and by print-preview iframe. |
| `src/main/settings/SettingsUI.Monospace.js` | Two new controls in the in-app settings dialog: monospace font select + ligatures checkbox. Persists to `<userData>/settings.json`. |
## Modified Modules
| File | Change |
|---|---|
| `src/fonts.css` | Add `@font-face` entries for Fira Code Regular (400) and Bold (700), pointing to `assets/fonts/FiraCode-*.woff2` (downloaded via the extended `download-tools.js`). |
| `src/styles/tokens.css` + `src/styles-concreteinfo.css` | Define new tokens `--font-mono-active` (resolves to `"JetBrains Mono"` or `"Fira Code"`) and `--font-mono-feature` (`"liga" 0, "calt" 0, "dlig" 0` for ligatures-off, else `normal`). Body classes flip these. |
| `src/styles-modern.css` | `.editor-textarea`, `.preview-content code`, `.preview-content pre`, `.codemirror-container .cm-editor` reference `var(--font-mono-active)` and apply `font-feature-settings: var(--font-mono-feature)`. |
| `src/ascii-generator.html` | Replace `<link href="https://fonts.googleapis.com/...">` with `<link rel="stylesheet" href="../styles/fonts.css">` plus inline `body` class defaulting. The window is plain HTML; the renderer script that opens it sets `body.classList` from settings. |
| `src/print-preview.js` | Inject `<style>` with embedded woff2 base64 from `ExportCss.js` into the srcdoc iframe HTML; set `pre`/`code` font-family to `var(--font-mono-active)`. |
| `src/main.js` | Five `--css/-V monofont=Consolas` lines and the export pipelines need surgery (table below). On successful DOCX export, pipeline the output through `DocxFontEmbedder`. On HTML export, pass `--css` referencing a temp file emitted by `ExportCss.js`. On EPUB, pass `--epub-embed-font` for both Regular and Bold. On LaTeX/PDF, pass `--include-in-header` referencing a temp `header.tex` emitted by `PdfFontHeader.js`. The Electron `printToPDF` fallback also consumes `ExportCss.js`. |
| `src/renderer.js` | On `settings-changed`, toggle `document.body.classList` between `mono-jetbrains` / `mono-fira` and `mono-ligatures-on` / `mono-ligatures-off`. The active class is also written by the bit that initializes Monaco/CodeMirror when the editor is mounted. |
| `scripts/download-tools.js` | Add `fira-code` task: downloads `FiraCode-Regular.ttf`, `FiraCode-Bold.ttf`, `FiraCode-LICENSE.txt` from the official `tonsky/FiraCode` GitHub release (version-pinned, mirrors how Pandoc is downloaded). |
| `package.json` | `build.asarUnpack` extended to `"assets/fonts/**"` so xelatex/Pandoc can read TTFs at runtime in packaged builds. No new NPM dependencies — `jszip ^3.10.1` is already present. |
## Per-Export Behaviour
| Format | What changes | Post-processing | Resulting file shape |
|---|---|---|---|
| **PDF** (xelatex) | Replace `-V monofont="Consolas"` with `--include-in-header=<tmp>.tex` from `PdfFontHeader` (`\setmonofont{JetBrainsMono-Regular.ttf}[Path=…,Extension=.ttf,UprightFont=*-Regular,BoldFont=*-Bold,Ligatures=NoCommon]`). | none — xelatex subsets the font into the PDF. | Self-contained PDF; code-block columns align across pages. |
| **PDF** (lualatex fallback) | Same header uses lualatex-compatible fontspec syntax (identical to xelatex in modern LuaTeX). | none | Same as above. |
| **PDF** (pdflatex final fallback) | Revert to `-V monofont="Consolas"` + warn (Consolas not on all systems; document limitation). | none | Best-effort — relies on pdftex default monospace. |
| **DOCX** | Existing pandoc invocation. After pandoc writes, hand to `DocxFontEmbedder`. | Embed Regular + Bold TTF into `word/fonts/`; patch `[Content_Types].xml` Default+Override; add `word/_rels` entry for `fontTable.xml.rels`; create `word/fontTable.xml` with `<w:embedRegular/>` for each font weight; patch `word/styles.xml` so `SourceCode` (or whatever style Pandoc wrote under) sets `w:rFonts ascii="JetBrains Mono" hAnsi="JetBrains Mono"`. | ~550 KB larger DOCX; fully portable. |
| **HTML** (standalone) | Add `--css=<tmp>.css` (built by `ExportCss` with base64 woff2). | none | One self-contained `.html`; aligned anywhere, offline. |
| **EPUB** | Add `--epub-embed-font=<bundleAbs>/<Family>-Regular.ttf` and same for Bold (Pandoc 2.11+ supports this natively). | `EpubFontEmbedder` patches `OEBPS/content.opf` if the font reference is missing. | Embedded font travels in the EPUB. |
| **ODT** | `--variable=mainfont="JetBrains Mono"` (or Fira). | Before final write, show a non-blocking confirmation: "ODT embeds the font *name* — recipients must also have it installed to keep alignment. Continue?". | Light; portability caveat explicit to user. |
| **RTF** | `\fonttbl` directive already injected by pandoc when `mainfont=` is set. | Same ODT confirmation. | Same caveat as ODT. |
| **LaTeX (`.tex`)** | `--include-in-header=<tmp>.tex` identical to the PDF header. | none | Self-contained `.tex` for downstream compile. |
| **PPTX** | unchanged | n/a | v1: don't try to enforce. |
| **RevealJS** | behaves like HTML (uses `ExportCss`). | n/a | self-contained. |
| **Beamer** | behaves like LaTeX (uses `PdfFontHeader` snippet). | n/a | downstream PDF compile respects font. |
| **Print preview** | n/a | `ExportCss` injected into srcdoc iframe HTML. | Inside-app preview aligned. |
| **ASCII Generator window** | Replace Google Fonts CDN link with local `fonts.css`. | n/a | Offline, aligned. |
## Path Resolution
`MonospaceFontConfig` exposes:
```js
exports.getActiveMonoFontPath = function getActiveMonoFontPath(weight = 400)
exports.getActiveMonoFamily = function getActiveMonoFamily()
exports.ligaturesEnabled = function ligaturesEnabled()
```
- Dev: `<repoRoot>/assets/fonts/<Family>-<Weight>.ttf`
- Packaged: `<process.resourcesPath>/app.asar.unpacked/assets/fonts/<Family>-<Weight>.ttf`
- If the file is missing, returns `null` and emits a `console.warn` + a single non-blocking toast: "Using system monospace — bundled font missing".
## Settings Schema
Extended `<userData>/settings.json`:
```jsonc
{
// ... existing keys ...
"monospaceFont": "jetbrains-mono", // "jetbrains-mono" | "fira-code"
"monospaceLigatures": false // bool
}
```
Defaults: `monospaceFont: "jetbrains-mono"`, `monospaceLigatures: false`. Migration: if a settings file exists without these keys, fill with defaults silently on read.
## Testing
**New test files:**
| File | Asserts |
|---|---|
| `tests/monospace-font-config.test.js` | Dev vs packaged path semantics; null-and-warn on missing TTF; settings-driven family selection. |
| `tests/docx-font-embedder.test.js` | Produces a valid DOCX; `unzip -l` lists `word/fonts/JetBrainsMono-{Regular,Bold}.ttf`; `word/fontTable.xml` contains `<w:embedRegular r:id="…"/>` entries with correct names; `styles.xml` binds the monospace style to `"JetBrains Mono"`; idempotent (running twice doesn't double-embed). |
| `tests/pdf-font-header.test.js` | Output contains `\setmonofont{JetBrainsMono-Regular.ttf}` with `Path=` matching the resolved absolute path; `Ligatures=NoCommon` when settings say off. |
| `tests/export-css.test.js` | Output contains a `@font-face` block with `src: url('data:font/woff2;base64,<…>')`; the base64 string decodes to > 50 000 bytes; `pre`/`code`/`kbd` use `var(--font-mono-active)`. |
| `tests/epub-font-embedder.test.js` | After embedding, `OEBPS/content.opf` references both Regular and Bold TTFs in `<manifest>`. |
**Integration test (manual, repeatable):**
1. Create a fixture markdown file with three ASCII grids (boxes, columns, arrows).
2. Open the file in MarkdownConverter.
3. Set monospace font = JetBrains Mono, ligatures off.
4. Export to PDF / DOCX / HTML.
5. Open each result; confirm the `+---+` column delimiters sit at identical X-positions across all three formats and across pages.
6. Switch to Fira Code with ligatures on; export again; confirm round-trip works (no crashes) and ligature toggle affects preview.
## Error Handling
| Failure | Behaviour |
|---|---|
| Bundled TTF missing | `MonospaceFontConfig` returns `null`; renderer/main falls back to system monospace; non-blocking toast; never a silent drop. |
| `DocxFontEmbedder` fails (zip corruption, insufficient permissions, missing required OOXML element) | Keep the un-embedded DOCX; show a dialog with the exact failure message and a "Report issue" link. Do **not** claim success. |
| `PdfFontHeader` can't write temp tex (filesystem permission) | Show an error dialog naming the permission issue; abort the export. |
| Pandoc `--epub-embed-font` not supported (Pandoc < 2.11) | Detect via `pandoc --version` at startup (cache `pandocAvailable` already exists). Skip embedding; warn user that the EPUB will degrade if their reader lacks the font. |
| Pandoc `--css` flag missing (Pandoc < 2.0) | Detect via the same version check. Skip the `--css` injection; warn user that the exported HTML is not self-contained for the chosen font. |
| xelatex fails after fontspec injection | Existing `tryPdfFallback` chain reorders to `lualatex → pdflatex` (Consolas). Already implemented; the reorder is a one-liner. |
## Acceptance Criteria
- [ ] All five rows of `Per-Export Behaviour` produce files where ASCII alignment is identical to the editor.
- [ ] No new NPM dependencies added (use existing `jszip`, `fontkit`).
- [ ] `asarUnpack` covers `assets/fonts/**`.
- [ ] Bundle size increase ≤ 1.5 MB (TTFs + Fira TTF + extra metadata).
- [ ] No `TODO`/`FIXME`/`HACK` markers in newly touched code.
- [ ] Preview, ASCII Generator window, print-preview iframe, PDF, DOCX, HTML, EPUB, ODT all use the same active font + ligature setting (single source of truth).
- [ ] On a clean machine with no JetBrains Mono / Fira Code installed system-wide, every export still produces correct alignment.
- [ ] Switching between fonts in settings updates preview immediately and is honoured by all subsequent exports in the same session.
- [ ] Both font files travel with the binary (`LICENSE.txt` present for both families).
## File Inventory
**New (10 files):**
```
src/main/MonospaceFontConfig.js
src/main/PdfFontHeader.js
src/main/DocxFontEmbedder.js
src/main/EpubFontEmbedder.js
src/main/ExportCss.js
src/main/settings/SettingsUI.Monospace.js
tests/monospace-font-config.test.js
tests/docx-font-embedder.test.js
tests/pdf-font-header.test.js
tests/export-css.test.js
tests/epub-font-embedder.test.js
assets/fonts/FiraCode-Regular.ttf
assets/fonts/FiraCode-Bold.ttf
assets/fonts/FiraCode-LICENSE.txt
```
**Modified:**
```
src/fonts.css
src/styles/tokens.css
src/styles-concreteinfo.css
src/styles-modern.css
src/ascii-generator.html
src/print-preview.js
src/main.js
src/renderer.js
scripts/download-tools.js
package.json
```
(3 added TTF files counted under "New"; OFL `LICENSE.txt` only required when bundling Fira Code.)
+1 -1
View File
@@ -85,7 +85,7 @@ module.exports = [
},
rules: {
// Error prevention
'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
'no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' }],
'no-undef': 'error',
'no-console': 'off', // Allow console for Electron apps
+13 -12
View File
@@ -11,15 +11,17 @@ module.exports = {
rootDir: '.',
// Test file patterns
testMatch: ['**/tests/**/*.test.js', '**/tests/**/*.spec.js'],
testMatch: [
'**/tests/**/*.test.js',
'**/tests/**/*.spec.js'
],
// Coverage configuration
collectCoverageFrom: [
'src/**/*.js',
'!src/main.js', // Main process needs electron-mock
'!src/renderer.js', // Large renderer file with duplicate declarations
'!src/main/**', // Main process needs electron-mock
'!src/preload.js', // Electron preload requires contextBridge
'!**/node_modules/**',
'!**/node_modules/**'
],
// Coverage thresholds (raised with expanded test suite)
@@ -28,8 +30,8 @@ module.exports = {
branches: 10,
functions: 15,
lines: 15,
statements: 15,
},
statements: 15
}
},
// Transform settings (no transpilation needed for vanilla JS)
@@ -42,11 +44,10 @@ module.exports = {
setupFilesAfterEnv: ['<rootDir>/tests/setup.js'],
// Ignore patterns
testPathIgnorePatterns: ['/node_modules/', '/dist/'],
// Keep the haste map / snapshot scanner out of build output — electron-builder's
// .snap (Squashfs) artifacts otherwise register as obsolete Jest snapshots.
modulePathIgnorePatterns: ['/dist/'],
testPathIgnorePatterns: [
'/node_modules/',
'/dist/'
],
// Verbose output
verbose: true,
@@ -55,5 +56,5 @@ module.exports = {
clearMocks: true,
// Reset modules between tests
resetModules: true,
resetModules: true
};
+4949 -154
View File
File diff suppressed because it is too large Load Diff
+111 -21
View File
@@ -1,13 +1,21 @@
{
"name": "markdown-converter",
"version": "4.5.0",
"version": "5.0.1",
"description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
"main": "src/main.js",
"main": "src/main/index.js",
"scripts": {
"start": "electron .",
"test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
"test:watch": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --watch",
"test:coverage": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage",
"dev:renderer": "vite --config vite.renderer.config.ts",
"dev:electron": "wait-on tcp:5173 && cross-env VITE_DEV_SERVER_URL=http://localhost:5173 ELECTRON_DISABLE_SANDBOX=1 electron . -- --no-sandbox --disable-gpu --disable-software-rasterizer --disable-dev-shm-usage",
"dev": "concurrently -k -n vite,electron -c blue,green \"npm:dev:renderer\" \"npm:dev:electron\"",
"build:renderer": "vite build --config vite.renderer.config.ts",
"preview": "npm run build:renderer && electron .",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"test:renderer": "vitest run",
"test:renderer:watch": "vitest",
"test:renderer:coverage": "vitest run --coverage",
"lint": "eslint src tests",
"lint:fix": "eslint src tests --fix",
"format": "prettier --write src tests",
@@ -24,7 +32,9 @@
"dist": "electron-builder --publish=never",
"dist:all": "electron-builder -mwl",
"download-tools": "node scripts/download-tools.js",
"generate-icons": "node scripts/generate-icons.js"
"generate-icons": "node scripts/generate-icons.js",
"build:icon-icns": "node scripts/build-icon-icns.js",
"publish:concreteinfo": "node scripts/publish-concreteinfo.js"
},
"keywords": [
"markdown",
@@ -43,7 +53,21 @@
"url": "https://github.com/amitwh/markdown-converter"
},
"devDependencies": {
"@playwright/test": "^1.60.0",
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@types/figlet": "^1.7.0",
"@types/node": "^25.9.1",
"@types/react": "^19.2.16",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.2",
"@vitest/ui": "^4.1.8",
"autoprefixer": "^10.5.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"concurrently": "^10.0.3",
"cross-env": "^10.0.0",
"electron": "^41.1.1",
"electron-builder": "^26.0.12",
@@ -52,7 +76,18 @@
"eslint-plugin-prettier": "^5.5.4",
"jest": "^30.2.0",
"jest-environment-jsdom": "^30.2.0",
"prettier": "^3.7.4"
"jsdom": "^29.1.1",
"lucide-react": "^1.17.0",
"postcss": "^8.5.15",
"prettier": "^3.7.4",
"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",
"vitest": "^4.1.8",
"wait-on": "^9.0.10"
},
"dependencies": {
"@codemirror/autocomplete": "^6.20.1",
@@ -69,27 +104,54 @@
"@codemirror/state": "^6.5.4",
"@codemirror/theme-one-dark": "^6.1.3",
"@codemirror/view": "^6.39.16",
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@hookform/resolvers": "^5.4.0",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-context-menu": "^2.2.16",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-radio-group": "^1.3.8",
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-slider": "^1.3.6",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-switch": "^1.2.6",
"@radix-ui/react-tabs": "^1.1.13",
"@tanstack/react-table": "^8.21.3",
"codemirror": "^6.0.2",
"core-util-is": "^1.0.3",
"docx": "^9.6.0",
"docx": "^9.7.1",
"docx4js": "^2.0.1",
"dompurify": "^3.3.1",
"electron-store": "^10.1.0",
"electron-updater": "^6.8.9",
"ffmpeg-static": "^5.3.0",
"figlet": "^1.11.0",
"highlight.js": "^11.11.1",
"html2pdf.js": "^0.14.0",
"jszip": "^3.10.1",
"immer": "^11.1.8",
"marked": "^17.0.3",
"marked-footnote": "^1.4.0",
"marked-highlight": "^2.2.3",
"mermaid": "^11.12.3",
"motion": "^12.40.0",
"next-themes": "^0.4.6",
"pdf-lib": "^1.17.1",
"pdfjs-dist": "^5.5.207",
"pdfkit": "^0.17.2",
"pizzip": "^3.2.0",
"sharp": "^0.34.3",
"react": "^19.2.7",
"react-dom": "^19.2.7",
"react-hook-form": "^7.77.0",
"react-resizable-panels": "^4.11.2",
"simple-git": "^3.32.3",
"tslib": "^2.8.1"
"sonner": "^2.0.7",
"tslib": "^2.8.1",
"zod": "^4.4.3",
"zustand": "^5.0.14"
},
"overrides": {
"jszip": "^3.10.1",
@@ -107,18 +169,19 @@
},
"icon": "assets/icon",
"files": [
"src/**/*",
"assets/**/*",
"scripts/**/*",
"node_modules/**/*",
"src/main/**/*",
"src/preload.js",
"src/plugins/**/*",
"package.json"
],
"asarUnpack": [
"node_modules/ffmpeg-static/**",
"node_modules/sharp/**",
"node_modules/@img/**",
"node_modules/@napi-rs/**",
"assets/fonts/**"
"node_modules/ffmpeg-static/**"
],
"extraResources": [
{
"from": "dist/renderer",
"to": "renderer"
}
],
"extraFiles": [],
"fileAssociations": [
@@ -146,7 +209,28 @@
],
"mac": {
"category": "public.app-category.productivity",
"identity": null
"identity": null,
"target": [
{
"target": "dmg",
"arch": [
"x64",
"arm64"
]
},
{
"target": "zip",
"arch": [
"x64",
"arm64"
]
}
],
"icon": "assets/icon.icns",
"darkModeSupport": true,
"hardenedRuntime": false,
"gatekeeperAssess": false,
"entitlements": null
},
"win": {
"target": [
@@ -219,6 +303,12 @@
],
"description": "Professional Markdown editor and universal file converter",
"maintainer": "ConcreteInfo <amit.wh@gmail.com>"
},
"publish": {
"provider": "github",
"owner": "amitwh",
"repo": "markdown-converter",
"releaseType": "release"
}
}
}
+6
View File
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
-604
View File
@@ -1,604 +0,0 @@
# Repository Structure Map
Auto-generated by `~/.claude-shared/scripts/repo-map.sh` (universal-ctags).
Signatures only — classes, functions, methods, interfaces, enums, types, namespaces, traits.
Regenerate after structural changes. Languages: `JavaScript,Sh`.
```
scripts/download-tools.js:
L22 method extract (PANDOC_CONFIG.linux)
L36 method extract (PANDOC_CONFIG.win32)
L51 method extract (PANDOC_CONFIG.darwin)
L63 function download
L70 function get (download)
L109 function downloadPandoc
scripts/generate-icons.js:
L17 function generateIcons
src/adapters/electron/fs.js:
L20 method readFile (electronFsAdapter)
L30 method writeFile (electronFsAdapter)
L39 method deleteFile (electronFsAdapter)
L48 method ensureDir (electronFsAdapter)
L57 method listDirectory (electronFsAdapter)
L77 method exists (electronFsAdapter)
L86 method isDirectory (electronFsAdapter)
L96 method copy (electronFsAdapter)
L106 method move (electronFsAdapter)
src/analytics/analytics-panel.js:
L7 function showAnalyticsModal
L105 function escHandler (showAnalyticsModal)
L116 function escapeHtml
src/analytics/writing-analytics.js:
L77 function countSyllables
L83 function extractWords
L87 function getReadabilityLabel
L95 function analyze
src/command-palette.js:
L1 class CommandPalette
L2 method constructor (CommandPalette)
L12 method register (CommandPalette)
L16 method open (CommandPalette)
L24 method close (CommandPalette)
L28 method isOpen (CommandPalette)
L32 method setupEventListeners (CommandPalette)
L61 method renderResults (CommandPalette)
L90 method highlightMatch (CommandPalette)
L96 method updateSelection (CommandPalette)
L105 method executeSelected (CommandPalette)
src/editor/codemirror-setup.js:
L46 function createEditor
L61 function onChange (createEditor)
L118 function getLanguageExtension
L120 method javascript (getLanguageExtension.loaders)
L124 method html (getLanguageExtension.loaders)
L128 method css (getLanguageExtension.loaders)
L132 method json (getLanguageExtension.loaders)
L136 method python (getLanguageExtension.loaders)
src/main.js:
L18 function getPandocPath
L36 function getFFmpegPath
L55 function sanitizeErrorMessage
L64 function createRateLimiter
L66 function canProceed (createRateLimiter)
L83 function validatePath
L136 function resolveWritablePath
L181 function isPathAccessible
L203 function convertDataToMarkdown
L225 function runPandocCmd
L247 function parseCommand
L282 method get (store)
L291 method set (store)
L488 function checkPandocAvailability
L500 function createWindow
L586 function buildRecentFilesMenu
L599 method click (buildRecentFilesMenu.anonymousObjectc5643c890c05)
L637 function getRecentFiles
L647 function createMenu
L872 method click (createMenu.anonymousObjectc5643c890e05.anonymousObjectc5643c894505)
L1118 method click (createMenu.anonymousObjectc5643c895205.anonymousObjectc5643c897e05)
L1279 method click (createMenu.anonymousObjectc5643c899305.anonymousObjectc5643c89a505)
L1351 function showAboutDialog
L1452 function showDependenciesDialog
L1564 function openPDFFile
L1583 function openFile
L1622 function openPdfFile
L1645 function saveAsFile
L1664 function exportFile
L1673 function showExportOptionsDialog
L1676 function showBatchConversionDialog
L1681 function selectWordTemplate
L1705 function showTemplateSettings
L1902 function processDynamicFields
L1921 function setDocxPageSize
L1980 function addHeaderFooterToDocx
L2111 function exportWordWithTemplate
L2153 function exportPDFViaWordTemplate
L2231 function showUniversalConverterDialog
L2236 function showPDFEditorDialog
L2246 function checkConverterAvailable
L2370 function collectFiles
L2464 function convertWithLibreOffice
L2498 function convertWithImageMagick
L2507 function convertWithFFmpeg
L2515 function convertWithPandoc
L2521 function performExportWithOptions
L2805 function tryPdfFallback
L2882 function showExportSuccess
L2892 function exportWithPandoc
L2964 function exportToHTML
L3080 function exportToPDFElectron
L3224 function exportSpreadsheet
L3233 function importDocument
L3355 function setTheme
L3536 function extractTablesFromMarkdown
L3574 function performBatchConversion
L3597 function findMarkdownFiles (performBatchConversion)
L3636 function processNextFile (performBatchConversion)
L3970 function handleCLIConversion
L3997 function showConversionDialog
L4064 function performCLIConversion
L4098 function buildPandocCommand
L4319 function openFileFromPath
L4394 function openAsciiGenerator
L4426 function openTableGenerator
L4724 function loadSnippets
L4734 function saveSnippetsFile
src/main/GitOperations.js:
L3 function getGitInstance
L7 function getStatus
L16 function stage
L26 function commit
L35 function log
src/main/PDFOperations.js:
L5 function parsePageRanges
L28 function hexToRgb
L39 function pdfMerge
L59 function pdfSplit
L126 function pdfCompress
L152 function pdfRotate
L182 function pdfDeletePages
L208 function pdfReorder
L233 function pdfWatermark
L319 function pdfEncrypt
L353 function pdfDecrypt
L370 function pdfSetPermissions
L404 function executeOperation
L431 function getPageCount
src/plugins/built-in/_sample/index.js:
L3 class SamplePlugin
L4 method init (SamplePlugin)
src/plugins/built-in/writing-studio/goal-tracker.js:
L3 class GoalTracker
L7 method constructor (GoalTracker)
L11 method _getHistory (GoalTracker)
L16 method _setHistory (GoalTracker)
L20 method _setHistoryDay (GoalTracker)
L26 method addWords (GoalTracker)
L37 method getDailyProgress (GoalTracker)
L44 method getStreak (GoalTracker)
L61 method getLast30Days (GoalTracker)
L74 method getWeeklyTotal (GoalTracker)
src/plugins/built-in/writing-studio/index.js:
L7 class WritingStudioPlugin
L8 method init (WritingStudioPlugin)
L34 method _registerCommands (WritingStudioPlugin)
L112 method _registerStatusBar (WritingStudioPlugin)
L123 method deactivate (WritingStudioPlugin)
L127 method getEngines (WritingStudioPlugin)
src/plugins/built-in/writing-studio/panels/goals-panel.js:
L1 function renderGoalsPanel
src/plugins/built-in/writing-studio/panels/manuscript-panel.js:
L1 function renderManuscriptPanel
src/plugins/built-in/writing-studio/panels/proofread-panel.js:
L1 function renderProofreadPanel
L41 method callback (anonymousObject39a0f0110105)
L50 function renderIssues
src/plugins/built-in/writing-studio/panels/snapshots-panel.js:
L1 function renderSnapshotsPanel
src/plugins/built-in/writing-studio/project-manager.js:
L1 class ProjectManager
L5 method constructor (ProjectManager)
L9 method createProject (ProjectManager)
L21 method loadProject (ProjectManager)
L27 method _saveProject (ProjectManager)
L31 method addChapter (ProjectManager)
L38 method updateChapter (ProjectManager)
L45 method compileManuscript (ProjectManager)
L56 method getStats (ProjectManager)
src/plugins/built-in/writing-studio/snapshot-manager.js:
L1 class SnapshotManager
L6 method constructor (SnapshotManager)
L11 method _getAll (SnapshotManager)
L16 method _saveAll (SnapshotManager)
L20 method create (SnapshotManager)
L34 method list (SnapshotManager)
L38 method getById (SnapshotManager)
L42 method restore (SnapshotManager)
L48 method delete (SnapshotManager)
L53 method diff (SnapshotManager)
L71 method prune (SnapshotManager)
src/plugins/built-in/writing-studio/sprint-engine.js:
L1 class SprintEngine
L6 method constructor (SprintEngine)
L14 method start (SprintEngine)
L22 method stop (SprintEngine)
L33 method tick (SprintEngine)
L43 method isActive (SprintEngine)
L47 method getRemaining (SprintEngine)
src/plugins/event-bus.js:
L1 class EventBus
L2 method constructor (EventBus)
L6 method on (EventBus)
L13 method off (EventBus)
L25 method emit (EventBus)
L37 method hasHandler (EventBus)
src/plugins/plugin-api.js:
L1 class PluginAPI
L7 method init (PluginAPI)
L12 method activate (PluginAPI)
L15 method deactivate (PluginAPI)
L18 method getManifest (PluginAPI)
src/plugins/plugin-context.js:
L1 class PluginContext
L14 method constructor (PluginContext)
L23 method register (PluginContext.constructor.commands)
L24 function safeHandler (PluginContext.constructor.commands.register)
L65 method registerPreHook (PluginContext.constructor.exports)
L68 method registerPostHook (PluginContext.constructor.exports)
src/plugins/plugin-loader.js:
L4 class PluginLoader
L8 method constructor (PluginLoader)
L17 method discoverPlugins (PluginLoader)
L66 method validateManifest (PluginLoader)
src/plugins/plugin-registry.js:
L4 class PluginRegistry
L5 method constructor (PluginRegistry)
L15 method register (PluginRegistry)
L49 method getPlugin (PluginRegistry)
L53 method getAll (PluginRegistry)
L57 method activate (PluginRegistry)
L68 method deactivate (PluginRegistry)
src/plugins/settings-store.js:
L1 class SettingsStore
L5 method constructor (SettingsStore)
L9 method get (SettingsStore)
L13 method set (SettingsStore)
L17 method onChanged (SettingsStore)
src/preload.js:
L257 method send (anonymousObjectb0724fcb0105)
L271 method invoke (anonymousObjectb0724fcb0105)
L290 method on (anonymousObjectb0724fcb0105)
L292 function subscription (anonymousObjectb0724fcb0105.on)
L310 method once (anonymousObjectb0724fcb0105)
L322 method removeAllListeners (anonymousObjectb0724fcb0105)
src/print-preview.js:
L1 class PrintPreview
L2 method constructor (PrintPreview)
L9 method open (PrintPreview)
L20 method close (PrintPreview)
L28 method setupEventListeners (PrintPreview)
L53 method updateScaleLabel (PrintPreview)
L59 method updatePreview (PrintPreview)
L111 method refreshPreview (PrintPreview)
L117 method getOptions (PrintPreview)
L130 method executePrint (PrintPreview)
src/renderer.js:
L19 method send (window.electronAPI)
L22 method invoke (window.electronAPI)
L25 method on (window.electronAPI)
L26 function subscription (window.electronAPI.on)
L32 method once (window.electronAPI)
L35 method removeAllListeners (window.electronAPI)
L81 function getSidebarManager
L85 function getRenderTemplatesPanel
L90 function getRenderExplorerPanel
L95 function getRenderGitPanel
L99 function getRenderSnippetsPanel
L105 function getRenderOutlinePanel
L110 function getReplPanel
L114 function getCommandPalette
L118 function getPrintPreview
L122 function getCreateWelcomeContent
L127 function getZenMode
L132 function getShowAnalyticsModal
L137 function ensureToastContainer
L147 function notifyUser
L159 function dismiss (notifyUser)
L173 method highlight (anonymousObject71555c7b0405)
L202 method start (anonymousObject71555c7b0705.anonymousObject71555c7b0805)
L205 method tokenizer (anonymousObject71555c7b0705.anonymousObject71555c7b0805)
L221 method renderer (anonymousObject71555c7b0705.anonymousObject71555c7b0805)
L241 function plantumlEncode (notifyUser)
L249 function scopeCSS (notifyUser)
L271 class TabManager (notifyUser)
L272 method constructor (notifyUser.TabManager)
L306 method setupEventListeners (notifyUser.TabManager)
L354 method createNewTab (notifyUser.TabManager)
L379 method createPdfTab (notifyUser.TabManager)
L405 method createPdfTabElements (notifyUser.TabManager)
L436 method setupPdfTabEvents (notifyUser.TabManager)
L503 method loadPdfInTab (notifyUser.TabManager)
L528 method renderPdfPageInTab (notifyUser.TabManager)
L555 method createTabElements (notifyUser.TabManager)
L580 method onChange (anonymousObject71555c7b0d05)
L602 method onUpdate (anonymousObject71555c7b0d05)
L614 method switchToTab (notifyUser.TabManager)
L641 method switchToNextTab (notifyUser.TabManager)
L647 method closeTab (notifyUser.TabManager)
L692 method updateTabBar (notifyUser.TabManager)
L718 method updateUI (notifyUser.TabManager)
L748 method saveCurrentTabState (notifyUser.TabManager)
L756 method restoreTabState (notifyUser.TabManager)
L765 method focusActiveEditor (notifyUser.TabManager)
L771 method updatePreview (notifyUser.TabManager)
L800 method _hash (notifyUser.TabManager)
L809 method _renderPreview (notifyUser.TabManager)
L963 function onerror (img)
L997 method updatePreviewVisibility (notifyUser.TabManager)
L1010 method updateLineNumbers (notifyUser.TabManager)
L1015 method updateWordCount (notifyUser.TabManager)
L1031 method updateCursorPosition (notifyUser.TabManager)
L1038 method updateFilePath (notifyUser.TabManager)
L1046 method updateBreadcrumb (notifyUser.TabManager)
L1054 method setupEditorEvents (notifyUser.TabManager)
L1058 method handleEditorInput (notifyUser.TabManager)
L1073 method startAutoSave (notifyUser.TabManager)
L1081 method stopAutoSave (notifyUser.TabManager)
L1087 method performAutoSave (notifyUser.TabManager)
L1103 method showAutoSaveIndicator (notifyUser.TabManager)
L1119 method addToRecentFiles (notifyUser.TabManager)
L1135 method getRecentFiles (notifyUser.TabManager)
L1145 method setupToolbarEvents (notifyUser.TabManager)
L1215 method wrapSelection (notifyUser.TabManager)
L1233 method insertAtLineStart (notifyUser.TabManager)
L1249 method insertTable (notifyUser.TabManager)
L1259 method insertCodeBlock (notifyUser.TabManager)
L1277 method insertHorizontalRule (notifyUser.TabManager)
L1280 method setupFindEvents (notifyUser.TabManager)
L1350 method performFind (notifyUser.TabManager)
L1384 method findNext (notifyUser.TabManager)
L1390 method findPrevious (notifyUser.TabManager)
L1399 method highlightMatch (notifyUser.TabManager)
L1430 method replaceOne (notifyUser.TabManager)
L1454 method replaceAll (notifyUser.TabManager)
L1485 method clearFindHighlights (notifyUser.TabManager)
L1492 method checkForLargeFile (notifyUser.TabManager)
L1508 method openFile (notifyUser.TabManager)
L1555 method getEditorContent (notifyUser.TabManager)
L1564 method setEditorContent (notifyUser.TabManager)
L1579 method insertAtCursor (notifyUser.TabManager)
L1594 method getSelection (notifyUser.TabManager)
L1602 method replaceSelection (notifyUser.TabManager)
L1616 method getCurrentContent (notifyUser.TabManager)
L1620 method getCurrentFilePath (notifyUser.TabManager)
L1735 method render (anonymousObject71555c7b2d05)
L1788 method registerIndicator (anonymousObject71555c7b3105.statusBar)
L1881 function onload (reader)
L2032 method onChange (anonymousObject71555c7b3405)
L2040 method onUpdate (anonymousObject71555c7b3405)
L2164 function applyCustomPreviewCSS (notifyUser)
L2174 function triggerLoadCustomCSS (notifyUser)
L2188 function triggerClearCustomCSS (notifyUser)
L2202 function updateFontSizes (notifyUser)
L2234 function openPrintPreviewDialog (notifyUser)
L2255 function showExportDialog (notifyUser)
L2269 function hideExportDialog (notifyUser)
L2273 function initializeExportForm (notifyUser)
L2343 function collectExportOptions (notifyUser)
L2444 function loadExportProfiles (notifyUser)
L2456 function saveExportProfiles (notifyUser)
L2459 function populateProfileDropdown (notifyUser)
L2476 function saveCurrentProfile (notifyUser)
L2511 function loadProfile (notifyUser)
L2545 function deleteSelectedProfile (notifyUser)
L2679 function onchange (input)
L2776 function showBatchDialog (notifyUser)
L2796 function hideBatchDialog (notifyUser)
L2799 function updateBatchProgress (notifyUser)
L2816 function validateBatchForm (notifyUser)
L3375 function showUniversalConverterDialog (notifyUser)
L3383 function updateConverterFormats (notifyUser)
L3423 function updateConverterAdvancedOptions (notifyUser)
L3434 function collectConverterAdvancedOptions (notifyUser)
L3645 function showPDFEditorDialog (notifyUser)
L3769 function hidePDFEditorDialog (notifyUser)
L3780 function updateMergeFilesList (notifyUser)
L4107 function getPDFStatusElement (notifyUser)
L4110 function showPDFStatus (notifyUser)
L4117 function clearPDFStatus (notifyUser)
L4124 function showPDFValidationMessage (notifyUser)
L4135 function processPDFOperation (notifyUser)
L4379 function initMathSupport (notifyUser)
L4391 function onload (katexJS)
L4396 function onload (autoRenderJS)
L4417 function openHeaderFooterDialog (notifyUser)
L4425 function closeHeaderFooterDialog (notifyUser)
L4430 function openFieldPickerDialog (notifyUser)
L4436 function closeFieldPickerDialog (notifyUser)
L4477 function toggleConfigContent (notifyUser)
L4488 function saveHeaderFooterSettings (notifyUser)
L4509 function browseForLogo (notifyUser)
L4519 function clearLogo (notifyUser)
L4528 function insertDynamicField (notifyUser)
L4594 function showTableGenerator (notifyUser)
L4605 function hideTableGenerator (notifyUser)
L4608 function generateTablePreview (notifyUser)
L4616 function generateMarkdownTable (notifyUser)
L4685 function insertGeneratedTable (notifyUser)
L4742 function showASCIIGenerator (notifyUser)
L4753 function hideASCIIGenerator (notifyUser)
L4756 function switchASCIIMode (notifyUser)
L4784 function generateASCIIPreview (notifyUser)
L4802 function textToASCII (notifyUser)
L5238 function createASCIIBox (notifyUser)
L5312 function getASCIITemplate (notifyUser)
L5469 function loadASCIITemplate (notifyUser)
L5473 function insertASCIIArt (notifyUser)
L5523 function anonymousFunction71555c7bd300
L5603 function getPdfjsLib (notifyUser)
L5612 function openPdfFile (notifyUser)
L5627 function renderPdfPage (notifyUser)
L5733 function closePdfViewer (notifyUser)
L5783 function openPdfEditorDialog (notifyUser)
L5831 function initPaneResizer (notifyUser)
L5920 function onPDFFileSelected (notifyUser)
L5935 function loadPDFThumbnails (notifyUser)
L5966 function renderThumbnailGrid (notifyUser)
L6060 function renderThumbnail (notifyUser)
L6085 function syncRotateInput (notifyUser)
L6094 function syncDeleteInput (notifyUser)
L6103 function syncReorderInput (notifyUser)
src/repl/repl-panel.js:
L1 class ReplPanel
L2 method constructor (ReplPanel)
L8 method setupEventListeners (ReplPanel)
L13 method toggle (ReplPanel)
L19 method show (ReplPanel)
L25 method clear (ReplPanel)
L29 method appendOutput (ReplPanel)
L42 method escapeHtml (ReplPanel)
src/sidebar/explorer-panel.js:
L1 function renderExplorerPanel
L40 function renderTree
L79 function getFileIcon
src/sidebar/git-panel.js:
L1 function renderGitPanel
L24 function loadGitStatus (renderGitPanel)
src/sidebar/outline-panel.js:
L6 function renderOutlinePanel
L18 function parseHeadings (renderOutlinePanel)
L36 function findActiveHeading (renderOutlinePanel)
L48 function renderHeadings (renderOutlinePanel)
L89 function escapeHtml (renderOutlinePanel)
L95 function refresh (renderOutlinePanel)
L100 function setActiveHeading (renderOutlinePanel)
src/sidebar/sidebar-manager.js:
L1 class SidebarManager
L2 method constructor (SidebarManager)
L11 method setupEventListeners (SidebarManager)
L20 method registerPanel (SidebarManager)
L24 method togglePanel (SidebarManager)
L32 method expand (SidebarManager)
L45 method collapse (SidebarManager)
src/sidebar/snippets-panel.js:
L1 function renderSnippetsPanel
L14 function loadSnippets (renderSnippetsPanel)
L19 function renderList (renderSnippetsPanel)
src/sidebar/templates-panel.js:
L18 function renderTemplatesPanel
src/utils/ModalManager.js:
L5 class ModalManager
L16 method constructor (ModalManager)
L31 method init (ModalManager)
L47 method setupCloseTriggers (ModalManager)
L51 function handler (ModalManager.setupCloseTriggers)
L65 function handler
L74 method getFocusableElements (ModalManager)
L89 method trapFocus (ModalManager)
L111 method handleKeydown (ModalManager)
L119 method open (ModalManager)
L141 function keydownHandler (ModalManager.open)
L164 method close (ModalManager)
L182 function addHidden (ModalManager.close)
L188 function onTransitionEnd (ModalManager.close)
L223 method isOpen (ModalManager)
L227 method destroy (ModalManager)
src/welcome.js:
L1 function createWelcomeContent
src/wordTemplateExporter.js:
L11 class WordTemplateExporter
L12 method constructor (WordTemplateExporter)
L24 method preprocessMarkdownForWordExport (WordTemplateExporter)
L33 function flush (WordTemplateExporter.preprocessMarkdownForWordExport)
L59 function stripArtifacts (WordTemplateExporter.preprocessMarkdownForWordExport)
src/zen-mode.js:
L10 class ZenMode
L14 method constructor (ZenMode)
L23 method activate (ZenMode)
L65 method deactivate (ZenMode)
L101 method toggle (ZenMode)
L109 method _applyTypewriterBehavior (ZenMode)
L111 function scrollFn (ZenMode._applyTypewriterBehavior)
L151 method _createHUD (ZenMode)
L169 method _updateHUD (ZenMode)
L220 method constructor (anonymousObject3acf7ce30205)
L240 function getOpacity
L250 method constructor (anonymousObject3acf7ce30405)
tests/git-operations.test.js:
L26 function asyncFn
L35 function asyncFnWithError
tests/main-utils.test.js:
L7 function sanitizeErrorMessage
L49 function createRateLimiter
L51 function canProceed (createRateLimiter)
tests/markdown-extensions.test.js:
L83 method start (extension)
L86 method tokenizer (extension)
L102 method renderer (extension)
L151 function plantumlEncode
L176 function slugify
L203 function scopeCSS
tests/modal-manager.test.js:
L11 function createModalElement
tests/plugin-api.test.js:
L18 class MyPlugin
L19 method init (MyPlugin)
tests/plugin-context.test.js:
L39 function badHandler
tests/plugin-loader.test.js:
L17 function writeManifest
tests/plugin-registry.test.js:
L5 class TestPlugin
L6 method init (TestPlugin)
L10 method activate (TestPlugin)
L13 method deactivate (TestPlugin)
L69 class BadPlugin
L70 method init (BadPlugin)
tests/setup.js:
L96 function error (console)
tests/sidebar.test.js:
L41 method render (anonymousObjectfe2d35d70105)
L52 method render (anonymousObjectfe2d35d70205)
L62 method render (anonymousObjectfe2d35d70305)
L68 method render (anonymousObjectfe2d35d70405)
L80 method render (anonymousObjectfe2d35d70505)
L88 method render (anonymousObjectfe2d35d70605)
L96 method render (anonymousObjectfe2d35d70705)
L120 method render (anonymousObjectfe2d35d70905)
L130 method render (anonymousObjectfe2d35d70a05)
tests/utils.test.js:
L9 function parseCommand
L78 function hexToRgb
L121 function getExtension
L133 function replaceExtension
```
+75
View File
@@ -0,0 +1,75 @@
/**
* Build assets/icon.icns from the PNGs in assets/icons/.
*
* ICNS file format (Apple Icon Image):
* Header: 'icns' (4 bytes) + total file length (uint32 BE, includes header)
* For each size:
* Type tag (4 bytes) + length (uint32 BE, includes the 8-byte entry header) + PNG data
*
* Standard PNG type tags we'll include:
* icp4 = 16x16, icp5 = 32x32, icp6 = 64x64
* ic07 = 128x128, ic08 = 256x256, ic09 = 512x512, ic10 = 1024x1024
* icsb = 48x48 (small)
* ic11 = 16x16@2x (32x32 retina), ic12 = 32x32@2x (64x64 retina)
* ic13 = 128x128@2x (256x256 retina), ic14 = 256x256@2x (512x512 retina)
*/
const fs = require('fs');
const path = require('path');
const iconsDir = path.join(__dirname, '..', 'assets', 'icons');
const outFile = path.join(__dirname, '..', 'assets', 'icon.icns');
// (size-in-pixels, icns type tag) — we skip sizes we don't have on disk
const sizes = [
{ size: 16, type: 'icp4' },
{ size: 32, type: 'icp5' },
{ size: 64, type: 'icp6' },
{ size: 128, type: 'ic07' },
{ size: 256, type: 'ic08' },
{ size: 512, type: 'ic09' },
{ size: 1024, type: 'ic10' },
{ size: 48, type: 'icsb' },
{ size: 32, type: 'ic11' }, // 16@2x
{ size: 64, type: 'ic12' }, // 32@2x
{ size: 256, type: 'ic13' }, // 128@2x
{ size: 512, type: 'ic14' }, // 256@2x
];
const entries = [];
for (const { size, type } of sizes) {
const pngPath = path.join(iconsDir, `${size}x${size}.png`);
if (!fs.existsSync(pngPath)) continue;
const png = fs.readFileSync(pngPath);
// ICNS requires 8-byte alignment per entry. paddedLen is the TOTAL entry size
// (8-byte type+length header + PNG + padding), rounded up to a multiple of 8.
const paddedLen = 8 + Math.ceil(png.length / 8) * 8;
entries.push({ type, png, paddedLen });
console.log(` ${type} (${size}x${size}) — ${png.length} bytes`);
}
if (entries.length === 0) {
console.error('No source PNGs found in', iconsDir);
process.exit(1);
}
const totalLen = 8 + entries.reduce((s, e) => s + e.paddedLen, 0);
const buf = Buffer.alloc(totalLen);
let off = 0;
// Header
buf.write('icns', off, 4, 'ascii'); off += 4;
buf.writeUInt32BE(totalLen, off); off += 4;
// Entries
for (const { type, png, paddedLen } of entries) {
buf.write(type, off, 4, 'ascii'); off += 4;
buf.writeUInt32BE(paddedLen, off); off += 4;
png.copy(buf, off);
off += png.length;
// Pad to 8-byte boundary within the entry. paddedLen already includes the 8-byte header.
const pad = paddedLen - 8 - png.length;
if (pad > 0) off += pad;
}
fs.writeFileSync(outFile, buf);
console.log(`\nWrote ${outFile} (${buf.length} bytes, ${entries.length} sizes)`);
+32 -26
View File
@@ -14,6 +14,30 @@ const { execSync } = require('child_process');
const PANDOC_VERSION = '3.9.0.2';
/**
* Pandoc's archive inner layout has shifted across releases and platforms:
* linux tarball: pandoc-3.9.0.2/bin/pandoc
* win32 zip: pandoc-3.9.0.2/pandoc.exe
* darwin zip: pandoc-3.9.0.2-x86_64/bin/pandoc (arch-suffixed inner dir)
* pandoc-3.9.0.2-arm64/bin/pandoc (on Apple Silicon builds)
* Rather than hard-coding the intermediate path — which has already broken
* once when pandoc 3.9 added the arch suffix to the macOS archive — we walk
* the extracted tree and find the binary by name. This is robust to future
* layout shifts (e.g., universal binaries renaming the inner dir).
*/
function findFile(rootDir, targetName) {
const entries = fs.readdirSync(rootDir, { withFileTypes: true });
for (const entry of entries) {
const full = path.join(rootDir, entry.name);
if (entry.isFile() && entry.name === targetName) return full;
if (entry.isDirectory()) {
const found = findFile(full, targetName);
if (found) return found;
}
}
return null;
}
const PANDOC_CONFIG = {
linux: {
url: `https://github.com/jgm/pandoc/releases/download/${PANDOC_VERSION}/pandoc-${PANDOC_VERSION}-linux-amd64.tar.gz`,
@@ -22,8 +46,9 @@ const PANDOC_CONFIG = {
extract(archivePath, destDir) {
const tmpDir = path.join(os.tmpdir(), `pandoc-${Date.now()}`);
fs.mkdirSync(tmpDir, { recursive: true });
execSync(`tar -xzf "${archivePath}" -C "${tmpDir}" pandoc-${PANDOC_VERSION}/bin/pandoc`);
const src = path.join(tmpDir, `pandoc-${PANDOC_VERSION}`, 'bin', 'pandoc');
execSync(`tar -xzf "${archivePath}" -C "${tmpDir}"`);
const src = findFile(tmpDir, 'pandoc');
if (!src) throw new Error(`pandoc binary not found under ${tmpDir}`);
fs.copyFileSync(src, path.join(destDir, 'pandoc'));
fs.chmodSync(path.join(destDir, 'pandoc'), 0o755);
fs.rmSync(tmpDir, { recursive: true, force: true });
@@ -39,7 +64,8 @@ const PANDOC_CONFIG = {
execSync(
`powershell -Command "Expand-Archive -Force '${archivePath}' '${tmpDir}'"`,
);
const src = path.join(tmpDir, `pandoc-${PANDOC_VERSION}`, 'pandoc.exe');
const src = findFile(tmpDir, 'pandoc.exe');
if (!src) throw new Error(`pandoc.exe not found under ${tmpDir}`);
fs.copyFileSync(src, path.join(destDir, 'pandoc.exe'));
fs.rmSync(tmpDir, { recursive: true, force: true });
},
@@ -52,7 +78,8 @@ const PANDOC_CONFIG = {
const tmpDir = path.join(os.tmpdir(), `pandoc-${Date.now()}`);
fs.mkdirSync(tmpDir, { recursive: true });
execSync(`unzip -o "${archivePath}" -d "${tmpDir}"`);
const src = path.join(tmpDir, `pandoc-${PANDOC_VERSION}`, 'bin', 'pandoc');
const src = findFile(tmpDir, 'pandoc');
if (!src) throw new Error(`pandoc binary not found under ${tmpDir}`);
fs.copyFileSync(src, path.join(destDir, 'pandoc'));
fs.chmodSync(path.join(destDir, 'pandoc'), 0o755);
fs.rmSync(tmpDir, { recursive: true, force: true });
@@ -106,27 +133,6 @@ function download(url, destPath) {
});
}
async function downloadFiraCode() {
const destDir = path.join(__dirname, '..', 'assets', 'fonts');
fs.mkdirSync(destDir, { recursive: true });
const targets = [
{ url: 'https://github.com/tonsky/FiraCode/raw/master/distr/ttf/FiraCode-Regular.ttf', out: 'FiraCode-Regular.ttf' },
{ url: 'https://github.com/tonsky/FiraCode/raw/master/distr/ttf/FiraCode-Bold.ttf', out: 'FiraCode-Bold.ttf' },
{ url: 'https://raw.githubusercontent.com/tonsky/FiraCode/master/LICENSE', out: 'FiraCode-LICENSE.txt' },
];
for (const t of targets) {
const destFile = path.join(destDir, t.out);
if (fs.existsSync(destFile)) {
console.log(`[download-tools] ${t.out} already present — skipping.`);
continue;
}
console.log(`[download-tools] Downloading ${t.out}...`);
await download(t.url, destFile);
}
}
async function downloadPandoc() {
const platform = process.platform;
const config = PANDOC_CONFIG[platform];
@@ -163,7 +169,7 @@ async function downloadPandoc() {
console.log(`[download-tools] pandoc ready: ${destFile}`);
}
Promise.all([downloadPandoc(), downloadFiraCode()]).catch((err) => {
downloadPandoc().catch((err) => {
console.error('[download-tools] FAILED:', err.message);
process.exit(1);
});
+49
View File
@@ -0,0 +1,49 @@
#!/usr/bin/env node
const fs = require('fs');
const path = require('path');
const version = process.argv[2] || require('../package.json').version;
const hook = process.env.CONCRETEINFO_DEPLOY_HOOK;
if (!hook) {
console.error('CONCRETEINFO_DEPLOY_HOOK not set');
process.exit(1);
}
const candidates = [
'latest-mac.yml',
'latest-linux.yml',
'latest-windows.yml',
`MarkdownConverter-${version}.dmg`,
`markdown-converter_${version}_amd64.deb`,
`MarkdownConverter-Setup-${version}.exe`,
];
const dist = path.resolve(__dirname, '..', 'dist');
for (const f of candidates) {
if (!fs.existsSync(path.join(dist, f))) {
console.error(`missing ${f} — run electron-builder first`);
process.exit(1);
}
}
const form = new FormData();
form.append('version', version);
for (const f of candidates) {
if (fs.existsSync(path.join(dist, f))) {
form.append('artifacts', fs.createReadStream(path.join(dist, f)), f);
}
}
fetch('https://updates.concreteinfo.co.in/api/v1/ingest', {
method: 'POST',
headers: { Authorization: `Bearer ${hook}` },
body: form,
})
.then((r) => {
console.log('ingest status', r.status);
process.exit(r.ok ? 0 : 1);
})
.catch((e) => {
console.error('ingest failed:', e);
process.exit(1);
});
+148
View File
@@ -0,0 +1,148 @@
import { _electron as electron } from 'playwright-core';
import * as fs from 'node:fs';
import * as path from 'node:path';
const APP_DIR = '/home/amith/apps/markdown-converter';
const electronBin = path.join(APP_DIR, 'node_modules/electron/dist/electron');
const testMd = '/tmp/verify-test.md';
const outputDocx = '/tmp/verify-output.docx';
const outputHtml = '/tmp/verify-output.html';
// Cleanup previous outputs
if (fs.existsSync(testMd)) fs.unlinkSync(testMd);
if (fs.existsSync(outputDocx)) fs.unlinkSync(outputDocx);
if (fs.existsSync(outputHtml)) fs.unlinkSync(outputHtml);
// Write test Markdown file
fs.writeFileSync(
testMd,
'# Test Document\n\nThis is a verification test for opening and exporting.\n\n- Point A\n- Point B\n'
);
console.log('Launching Electron...');
const app = await electron.launch({
executablePath: electronBin,
args: [
'--no-sandbox',
'--disable-gpu',
'--disable-software-rasterizer',
'--disable-dev-shm-usage',
'.',
],
env: {
...process.env,
DISPLAY: ':0',
ELECTRON_DISABLE_SANDBOX: '1',
VITE_DEV_SERVER_URL: 'http://localhost:5173',
},
cwd: APP_DIR,
});
app.process().stdout.on('data', (data) => console.log('[MAIN-OUT]', data.toString().trim()));
app.process().stderr.on('data', (data) => console.log('[MAIN-ERR]', data.toString().trim()));
const win = await app.firstWindow();
await win.waitForLoadState('domcontentloaded');
await win.waitForSelector('.cm-editor, [role="toolbar"]', { timeout: 10000 });
console.log('App loaded.');
// Dismiss welcome wizard if present
const wizardCount = await win.locator('[data-testid="first-run-wizard"]').count();
if (wizardCount > 0) {
console.log('Dismissing first run wizard...');
await win.click('[data-testid="first-run-wizard"] >> text=Skip');
await new Promise((r) => setTimeout(r, 300));
}
// Stub dialog.showSaveDialogSync in main process to automatically return output paths
await app.evaluate(({ dialog }, { outputDocx, outputHtml }) => {
dialog.showSaveDialogSync = (window, options) => {
const filters = options?.filters || [];
if (filters.some(f => f.extensions.includes('docx'))) {
return outputDocx;
}
return outputHtml;
};
}, { outputDocx, outputHtml });
// Simulate opening the test Md file by sending IPC from main
console.log('Opening test markdown file...');
const fileContent = fs.readFileSync(testMd, 'utf-8');
await app.evaluate(({ BrowserWindow }, { filePath, content }) => {
const wins = BrowserWindow.getAllWindows();
const main = wins.find((w) => !w.isDestroyed());
if (!main) throw new Error('No main window');
main.webContents.send('file-opened', { path: filePath, content });
}, { filePath: testMd, content: fileContent });
// Wait for editor to display the content
await win.waitForFunction(
(content) => {
const editor = document.querySelector('.cm-content');
return editor && editor.textContent.includes('Test Document');
},
fileContent,
{ timeout: 5000 }
);
console.log('File successfully opened in editor.');
// Let's wait a moment for currentFile synchronization to trigger in the main process
await new Promise((r) => setTimeout(r, 500));
// Trigger DOCX Export (calls performExportWithOptions under the hood)
console.log('Exporting to DOCX...');
await win.evaluate(() => {
window.electronAPI.export.withOptions('docx', {});
});
// Wait for file to be written to disk
let docxExported = false;
for (let i = 0; i < 20; i++) {
if (fs.existsSync(outputDocx) && fs.statSync(outputDocx).size > 0) {
docxExported = true;
break;
}
await new Promise((r) => setTimeout(r, 250));
}
if (docxExported) {
console.log('✅ DOCX exported successfully.');
} else {
console.error('❌ DOCX export failed (file not created or empty).');
}
// Wait 2.5 seconds to bypass the conversion rate limiter (2000ms debounce)
console.log('Waiting for rate limiter...');
await new Promise((r) => setTimeout(r, 2500));
// Trigger HTML Export
console.log('Exporting to HTML...');
await win.evaluate(() => {
window.electronAPI.export.withOptions('html', {});
});
let htmlExported = false;
for (let i = 0; i < 20; i++) {
if (fs.existsSync(outputHtml) && fs.statSync(outputHtml).size > 0) {
htmlExported = true;
break;
}
await new Promise((r) => setTimeout(r, 250));
}
if (htmlExported) {
console.log('✅ HTML exported successfully.');
} else {
console.error('❌ HTML export failed (file not created or empty).');
}
await app.close();
console.log('Verification completed.');
if (docxExported && htmlExported) {
process.exit(0);
} else {
process.exit(1);
}
-751
View File
@@ -1,751 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ASCII Art Generator - MarkdownConverter</title>
<link rel="stylesheet" href="../fonts.css" />
<style>
:root {
--ci-dark-gray: #464646;
--ci-medium-gray: #9a9696;
--ci-accent: #e5461f;
--ci-light-gray: #e3e3e3;
--ci-black: #0d0b09;
--ci-white: #ffffff;
--ci-bg: #f5f5f5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--ci-bg);
color: var(--ci-dark-gray);
min-height: 100vh;
}
.header {
background: linear-gradient(135deg, var(--ci-dark-gray) 0%, var(--ci-black) 100%);
padding: 16px 24px;
border-bottom: 3px solid var(--ci-accent);
display: flex;
align-items: center;
justify-content: space-between;
}
.header h1 {
color: var(--ci-white);
font-size: 1.25rem;
font-weight: 600;
}
.container {
padding: 24px;
max-width: 100%;
}
.section {
background: var(--ci-white);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.section-title {
font-weight: 600;
margin-bottom: 16px;
color: var(--ci-dark-gray);
font-size: 0.95rem;
}
.mode-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
}
.mode-tab {
padding: 10px 20px;
border: 2px solid var(--ci-light-gray);
background: var(--ci-white);
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.mode-tab:hover {
border-color: var(--ci-accent);
}
.mode-tab.active {
background: var(--ci-accent);
border-color: var(--ci-accent);
color: var(--ci-white);
}
.form-group {
margin-bottom: 16px;
}
.form-label {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 8px;
color: var(--ci-dark-gray);
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 10px 14px;
border: 2px solid var(--ci-light-gray);
border-radius: 8px;
font-size: 0.875rem;
font-family: inherit;
transition: border-color 0.2s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--ci-accent);
}
.form-textarea {
min-height: 80px;
resize: vertical;
}
.preview-container {
background: var(--ci-black);
border-radius: 8px;
padding: 16px;
min-height: 200px;
max-height: 350px;
overflow: auto;
}
.preview-content {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-size: 12px;
line-height: 1.3;
color: #00ff00;
white-space: pre;
font-feature-settings:
'liga' 0,
'calt' 0,
'dlig' 0;
}
.template-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.template-btn {
padding: 8px 12px;
border: 2px solid var(--ci-light-gray);
background: var(--ci-white);
border-radius: 6px;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s;
}
.template-btn:hover {
border-color: var(--ci-accent);
background: rgba(229, 70, 31, 0.05);
}
.template-btn.active {
border-color: var(--ci-accent);
background: rgba(229, 70, 31, 0.1);
}
.footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 16px 24px;
background: var(--ci-white);
border-top: 1px solid var(--ci-light-gray);
position: sticky;
bottom: 0;
}
.btn {
padding: 10px 24px;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.btn-primary {
background: var(--ci-accent);
color: var(--ci-white);
}
.btn-primary:hover {
background: #c93a18;
transform: translateY(-1px);
}
.btn-secondary {
background: var(--ci-light-gray);
color: var(--ci-dark-gray);
}
.btn-secondary:hover {
background: #d0d0d0;
}
.mode-section {
display: none;
}
.mode-section.active {
display: block;
}
.template-category {
margin-bottom: 16px;
}
.template-category-title {
font-size: 0.8rem;
color: var(--ci-medium-gray);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
</style>
</head>
<body>
<div class="header">
<h1>ASCII Art Generator</h1>
</div>
<div class="container">
<div class="section">
<div class="mode-tabs">
<button class="mode-tab active" data-mode="text">Text Banner</button>
<button class="mode-tab" data-mode="box">Box/Frame</button>
<button class="mode-tab" data-mode="templates">Templates</button>
</div>
<!-- Text Banner Mode -->
<div id="text-mode" class="mode-section active">
<div class="form-group">
<label class="form-label">Text to Convert</label>
<input
type="text"
id="text-input"
class="form-input"
placeholder="Enter your text..."
maxlength="30"
/>
</div>
<div class="form-group">
<label class="form-label">Style</label>
<select id="font-style" class="form-select">
<option value="standard">Standard</option>
<option value="banner">Banner</option>
<option value="block">Block</option>
<option value="bubble">Bubble</option>
<option value="digital">Digital</option>
</select>
</div>
</div>
<!-- Box/Frame Mode -->
<div id="box-mode" class="mode-section">
<div class="form-group">
<label class="form-label">Text Content</label>
<textarea
id="box-text"
class="form-textarea"
placeholder="Enter text for the box..."
></textarea>
</div>
<div class="form-group">
<label class="form-label">Box Style</label>
<select id="box-style" class="form-select">
<option value="single">Single Line</option>
<option value="double">Double Line</option>
<option value="rounded">Rounded</option>
<option value="bold">Bold</option>
<option value="ascii">ASCII (+|-)</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Padding</label>
<input
type="number"
id="box-padding"
class="form-input"
min="0"
max="10"
value="2"
style="width: 100px"
/>
</div>
</div>
<!-- Templates Mode -->
<div id="templates-mode" class="mode-section">
<div class="template-category">
<div class="template-category-title">Arrows & Flow</div>
<div class="template-grid">
<button class="template-btn" data-template="arrow-right">Arrow Right</button>
<button class="template-btn" data-template="arrow-down">Arrow Down</button>
<button class="template-btn" data-template="decision">Decision</button>
<button class="template-btn" data-template="process">Process Flow</button>
</div>
</div>
<div class="template-category">
<div class="template-category-title">Diagrams</div>
<div class="template-grid">
<button class="template-btn" data-template="flowchart">Flowchart</button>
<button class="template-btn" data-template="sequence">Sequence</button>
<button class="template-btn" data-template="network">Network</button>
<button class="template-btn" data-template="hierarchy">Hierarchy</button>
</div>
</div>
<div class="template-category">
<div class="template-category-title">Boxes & Containers</div>
<div class="template-grid">
<button class="template-btn" data-template="header">Header</button>
<button class="template-btn" data-template="note">Note Box</button>
<button class="template-btn" data-template="warning">Warning</button>
<button class="template-btn" data-template="info">Info Box</button>
</div>
</div>
<div class="template-category">
<div class="template-category-title">Decorative</div>
<div class="template-grid">
<button class="template-btn" data-template="divider">Divider</button>
<button class="template-btn" data-template="separator">Separator</button>
<button class="template-btn" data-template="banner">Banner</button>
<button class="template-btn" data-template="checklist">Checklist</button>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-title">Preview</div>
<div class="preview-container">
<div id="preview" class="preview-content"></div>
</div>
</div>
</div>
<div class="footer">
<button class="btn btn-secondary" id="btn-generate">Generate Preview</button>
<button class="btn btn-primary" id="btn-insert">Insert to Editor</button>
</div>
<script>
// ASCII Art Generator Logic
const FONTS = {
standard: {
height: 5,
chars: {
A: [' /\\ ', ' / \\ ', '/----\\', '| |', '| |'],
B: ['|----\\', '| |', '|----/', '| \\', '|----/'],
C: ['/----\\', '| ', '| ', '| ', '\\----/'],
D: ['|----\\', '| |', '| |', '| |', '|----/'],
E: ['|----', '| ', '|--- ', '| ', '|----'],
F: ['|----', '| ', '|--- ', '| ', '| '],
G: ['/----\\', '| ', '| |--\\', '| |', '\\----/'],
H: ['| |', '| |', '|----/', '| |', '| |'],
I: ['|---|', ' | ', ' | ', ' | ', '|---|'],
J: [' |', ' |', ' |', '| |', '\\---/'],
K: ['| /', '| / ', '|-- ', '| \\ ', '| \\'],
L: ['| ', '| ', '| ', '| ', '|----'],
M: ['|\\ /|', '| \\/ |', '| |', '| |', '| |'],
N: ['|\\ |', '| \\ |', '| \\ |', '| \\|', '| |'],
O: ['/----\\', '| |', '| |', '| |', '\\----/'],
P: ['|----\\', '| |', '|----/', '| ', '| '],
Q: ['/----\\', '| |', '| \\ |', '| \\|', '\\----\\'],
R: ['|----\\', '| |', '|----/', '| \\ ', '| \\ '],
S: ['/----\\', '| ', '\\----\\', ' |', '\\----/'],
T: ['-----', ' | ', ' | ', ' | ', ' | '],
U: ['| |', '| |', '| |', '| |', '\\----/'],
V: ['| |', '| |', ' \\ / ', ' \\/ ', ' '],
W: ['| |', '| |', '| |', '| /\\ |', '|/ \\|'],
X: ['\\ /', ' \\ / ', ' \\/ ', ' /\\ ', ' / \\ '],
Y: ['\\ /', ' \\ / ', ' | ', ' | ', ' | '],
Z: ['-----', ' / ', ' / ', ' / ', '-----'],
' ': [' ', ' ', ' ', ' ', ' '],
0: ['/---\\', '| |', '| / |', '|/ |', '\\---/'],
1: [' /| ', ' / | ', ' | ', ' | ', ' ----'],
2: ['/---\\', ' |', ' ---/', '/ ', '-----'],
3: ['----\\', ' |', ' ---/', ' |', '----/'],
4: ['| |', '| |', '-----', ' |', ' |'],
5: ['-----', '| ', '----\\', ' |', '----/'],
6: ['/----', '| ', '|---\\', '| |', '\\---/'],
7: ['-----', ' / ', ' / ', ' / ', '/ '],
8: ['/---\\', '| |', ' --- ', '| |', '\\---/'],
9: ['/---\\', '| |', '\\----', ' |', '----/'],
},
},
banner: {
height: 7,
chars: {
A: [
' ##### ',
' ## ##',
'## ##',
'#########',
'## ##',
'## ##',
'## ##',
],
B: [
'######## ',
'## ##',
'## ##',
'######## ',
'## ##',
'## ##',
'######## ',
],
C: [' ###### ', '## ##', '## ', '## ', '## ', '## ##', ' ###### '],
D: [
'######## ',
'## ##',
'## ##',
'## ##',
'## ##',
'## ##',
'######## ',
],
E: ['########', '## ', '## ', '###### ', '## ', '## ', '########'],
F: ['########', '## ', '## ', '###### ', '## ', '## ', '## '],
G: [' ###### ', '## ##', '## ', '## ####', '## ##', '## ##', ' ###### '],
H: [
'## ##',
'## ##',
'## ##',
'#########',
'## ##',
'## ##',
'## ##',
],
I: ['####', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', '####'],
J: [' ##', ' ##', ' ##', ' ##', '## ##', '## ##', ' ###### '],
K: ['## ##', '## ## ', '## ## ', '##### ', '## ## ', '## ## ', '## ##'],
L: ['## ', '## ', '## ', '## ', '## ', '## ', '########'],
M: [
'## ##',
'### ###',
'#### ####',
'## ### ##',
'## ##',
'## ##',
'## ##',
],
N: ['## ##', '### ##', '#### ##', '## ## ##', '## ####', '## ###', '## ##'],
O: [
' ####### ',
'## ##',
'## ##',
'## ##',
'## ##',
'## ##',
' ####### ',
],
P: [
'######## ',
'## ##',
'## ##',
'######## ',
'## ',
'## ',
'## ',
],
Q: [
' ####### ',
'## ##',
'## ##',
'## ##',
'## ## ##',
'## ## ',
' ##### ##',
],
R: [
'######## ',
'## ##',
'## ##',
'######## ',
'## ## ',
'## ## ',
'## ##',
],
S: [' ###### ', '## ##', '## ', ' ###### ', ' ##', '## ##', ' ###### '],
T: ['########', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## '],
U: [
'## ##',
'## ##',
'## ##',
'## ##',
'## ##',
'## ##',
' ####### ',
],
V: [
'## ##',
'## ##',
'## ##',
'## ##',
' ## ## ',
' ## ## ',
' ### ',
],
W: [
'## ##',
'## ## ##',
'## ## ##',
'## ## ##',
'## ## ##',
'## ## ##',
' ### ### ',
],
X: [
'## ##',
' ## ## ',
' ## ## ',
' ### ',
' ## ## ',
' ## ## ',
'## ##',
],
Y: ['## ##', ' ## ## ', ' #### ', ' ## ', ' ## ', ' ## ', ' ## '],
Z: ['########', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', '########'],
' ': [' ', ' ', ' ', ' ', ' ', ' ', ' '],
0: [' ###### ', '## ##', '## ##', '## ##', '## ##', '## ##', ' ###### '],
1: [' ## ', ' #### ', ' ## ', ' ## ', ' ## ', ' ## ', ' ###### '],
2: [' ###### ', '## ##', ' ## ', ' ## ', ' ## ', ' ## ', '########'],
3: [' ###### ', '## ##', ' ## ', ' #### ', ' ## ', '## ##', ' ###### '],
4: [' ## ', ' ### ', ' # ## ', ' # ## ', '########', ' ## ', ' ## '],
5: ['########', '## ', '####### ', ' ##', ' ##', '## ##', ' ###### '],
6: [' ###### ', '## ', '####### ', '## ##', '## ##', '## ##', ' ###### '],
7: ['########', '## ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## '],
8: [' ###### ', '## ##', '## ##', ' ###### ', '## ##', '## ##', ' ###### '],
9: [' ###### ', '## ##', '## ##', ' #######', ' ##', '## ##', ' ###### '],
},
},
block: {
height: 6,
chars: {
A: ['█████╗ ', '██╔══██╗', '███████║', '██╔══██║', '██║ ██║', '╚═╝ ╚═╝'],
B: ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██████╔╝', '╚═════╝ '],
C: ['█████╗ ', '██╔══██╗', '██║ ', '██║ ', '╚█████╔╝', ' ╚════╝ '],
D: ['██████╗ ', '██╔══██╗', '██║ ██║', '██║ ██║', '██████╔╝', '╚═════╝ '],
E: ['███████╗', '██╔════╝', '█████╗ ', '██╔══╝ ', '███████╗', '╚══════╝'],
F: ['███████╗', '██╔════╝', '█████╗ ', '██╔══╝ ', '██║ ', '╚═╝ '],
G: ['█████╗ ', '██╔══██╗', '██║ ███', '██║ ██', '╚█████╔╝', ' ╚════╝ '],
H: ['██╗ ██╗', '██║ ██║', '███████║', '██╔══██║', '██║ ██║', '╚═╝ ╚═╝'],
I: ['██╗', '██║', '██║', '██║', '██║', '╚═╝'],
J: [' ██╗', ' ██║', ' ██║', '██ ██║', '╚████╔╝', ' ╚═══╝ '],
K: ['██╗ ██╗', '██║ ██╔╝', '█████╔╝ ', '██╔═██╗ ', '██║ ██╗', '╚═╝ ╚═╝'],
L: ['██╗ ', '██║ ', '██║ ', '██║ ', '███████╗', '╚══════╝'],
M: [
'███╗ ███╗',
'████╗ ████║',
'██╔████╔██║',
'██║╚██╔╝██║',
'██║ ╚═╝ ██║',
'╚═╝ ╚═╝',
],
N: ['███╗ ██╗', '████╗ ██║', '██╔██╗ ██║', '██║╚██╗██║', '██║ ╚████║', '╚═╝ ╚═══╝'],
O: ['█████╗ ', '██╔══██╗', '██║ ██║', '██║ ██║', '╚█████╔╝', ' ╚════╝ '],
P: ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔═══╝ ', '██║ ', '╚═╝ '],
Q: ['█████╗ ', '██╔══██╗', '██║ ██║', '██║ ██║', '╚██████╗', ' ╚═══██╝'],
R: ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██║ ██║', '╚═╝ ╚═╝'],
S: ['█████╗ ', '██╔══╝ ', '█████╗ ', '╚══██║ ', '█████║ ', '╚════╝ '],
T: ['████████╗', '╚══██╔══╝', ' ██║ ', ' ██║ ', ' ██║ ', ' ╚═╝ '],
U: ['██╗ ██╗', '██║ ██║', '██║ ██║', '██║ ██║', '╚█████╔╝', ' ╚════╝ '],
V: ['██╗ ██╗', '██║ ██║', '██║ ██║', '╚██╗ ██╔╝', ' ╚████╔╝ ', ' ╚═══╝ '],
W: ['██╗ ██╗', '██║ ██║', '██║ █╗ ██║', '██║███╗██║', '╚███╔███╔╝', ' ╚══╝╚══╝ '],
X: ['██╗ ██╗', '╚██╗██╔╝', ' ╚███╔╝ ', ' ██╔██╗ ', '██╔╝ ██╗', '╚═╝ ╚═╝'],
Y: ['██╗ ██╗', '╚██╗ ██╔╝', ' ╚████╔╝ ', ' ╚██╔╝ ', ' ██║ ', ' ╚═╝ '],
Z: ['███████╗', '╚════██║', ' ███╔═╝', ' ██╔══╝ ', '███████╗', '╚══════╝'],
' ': [' ', ' ', ' ', ' ', ' ', ' '],
},
},
};
const TEMPLATES = {
'arrow-right':
' ┌─────────────────────┐\n──▶│ Process or Action │──▶\n └─────────────────────┘',
'arrow-down':
' │\n ▼\n┌───────────────┐\n│ Process │\n└───────────────┘\n │\n ▼',
decision:
' ╱╲\n ╲\n ╱ ? ╲\n ╱ ╲\n ╱────────╲\n ╱ ╲\n YES NO\n │ │\n ▼ ▼',
process:
'┌─────┐ ┌─────┐ ┌─────┐\n│ 1 │──▶│ 2 │──▶│ 3 │\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└──────┘ └──────┘',
sequence:
' User System Database\n │ │ │\n │ Request │ │\n ├──────────►│ │\n │ │ Query │\n │ ├──────────►│\n │ │ │\n │ │ Result │\n │ │◄──────────┤\n │ Response │ │\n │◄──────────┤ │\n │ │ │',
network:
' ┌─────────┐\n │ Server │\n └────┬────┘\n │\n ┌─────────┼─────────┐\n │ │ │\n┌────┴────┐ ┌──┴──┐ ┌────┴────┐\n│ Client1 │ │ DB │ │ Client2 │\n└─────────┘ └─────┘ └─────────┘',
hierarchy:
' ┌─────────┐\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 = {
single: { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' },
double: { tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' },
rounded: { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' },
bold: { tl: '┏', tr: '┓', bl: '┗', br: '┛', h: '━', v: '┃' },
ascii: { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' },
};
let currentMode = 'text';
let currentTemplate = null;
// Mode switching
document.querySelectorAll('.mode-tab').forEach((tab) => {
tab.addEventListener('click', () => {
document.querySelectorAll('.mode-tab').forEach((t) => t.classList.remove('active'));
tab.classList.add('active');
currentMode = tab.dataset.mode;
document.querySelectorAll('.mode-section').forEach((s) => s.classList.remove('active'));
document.getElementById(currentMode + '-mode').classList.add('active');
generatePreview();
});
});
// Template selection
document.querySelectorAll('.template-btn').forEach((btn) => {
btn.addEventListener('click', () => {
document.querySelectorAll('.template-btn').forEach((b) => b.classList.remove('active'));
btn.classList.add('active');
currentTemplate = btn.dataset.template;
generatePreview();
});
});
// Generate text banner
function generateTextBanner(text, style) {
const font = FONTS[style] || FONTS.standard;
const lines = Array(font.height).fill('');
for (const char of text.toUpperCase()) {
const charArt = font.chars[char] || font.chars[' '];
if (charArt) {
for (let i = 0; i < font.height; i++) {
lines[i] += charArt[i] + ' ';
}
}
}
return lines.join('\n');
}
// Generate box
function generateBox(text, style, padding) {
const box = BOX_STYLES[style] || BOX_STYLES.single;
const lines = text.split('\n');
const maxLen = Math.max(...lines.map((l) => l.length)) + padding * 2;
let result = box.tl + box.h.repeat(maxLen + 2) + box.tr + '\n';
// Add padding lines at top
for (let i = 0; i < Math.floor(padding / 2); i++) {
result += box.v + ' '.repeat(maxLen + 2) + box.v + '\n';
}
// Add text lines
for (const line of lines) {
const paddedLine = ' '.repeat(padding) + line.padEnd(maxLen - padding) + ' ';
result += box.v + ' ' + paddedLine + box.v + '\n';
}
// Add padding lines at bottom
for (let i = 0; i < Math.floor(padding / 2); i++) {
result += box.v + ' '.repeat(maxLen + 2) + box.v + '\n';
}
result += box.bl + box.h.repeat(maxLen + 2) + box.br;
return result;
}
// Generate preview
function generatePreview() {
let result = '';
if (currentMode === 'text') {
const text = document.getElementById('text-input').value || 'HELLO';
const style = document.getElementById('font-style').value;
result = generateTextBanner(text, style);
} else if (currentMode === 'box') {
const text = document.getElementById('box-text').value || 'Your text here';
const style = document.getElementById('box-style').value;
const padding = parseInt(document.getElementById('box-padding').value) || 2;
result = generateBox(text, style, padding);
} else if (currentMode === 'templates') {
result = currentTemplate ? TEMPLATES[currentTemplate] : 'Select a template...';
}
document.getElementById('preview').textContent = result;
}
// Event listeners for live preview
document.getElementById('text-input').addEventListener('input', generatePreview);
document.getElementById('font-style').addEventListener('change', generatePreview);
document.getElementById('box-text').addEventListener('input', generatePreview);
document.getElementById('box-style').addEventListener('change', generatePreview);
document.getElementById('box-padding').addEventListener('input', generatePreview);
document.getElementById('btn-generate').addEventListener('click', generatePreview);
document.getElementById('btn-insert').addEventListener('click', () => {
const content = document.getElementById('preview').textContent;
if (content && window.electronAPI) {
// Wrap in code block for markdown
const wrapped = '```\n' + content + '\n```';
window.electronAPI.send('insert-generated-content', wrapped);
window.close();
}
});
// Initial preview
generatePreview();
</script>
</body>
</html>
-113
View File
@@ -1,113 +0,0 @@
class CommandPalette {
constructor() {
this.overlay = document.getElementById('command-palette-overlay');
this.input = document.getElementById('command-palette-input');
this.results = document.getElementById('command-palette-results');
this.commands = [];
this.selectedIndex = 0;
this.filteredCommands = [];
this.setupEventListeners();
}
register(label, shortcut, action) {
this.commands.push({ label, shortcut, action });
}
open() {
this.overlay.classList.remove('hidden');
this.input.value = '';
this.input.focus();
this.selectedIndex = 0;
this.renderResults('');
}
close() {
this.overlay.classList.add('hidden');
}
isOpen() {
return !this.overlay.classList.contains('hidden');
}
setupEventListeners() {
this.input.addEventListener('input', () => {
this.selectedIndex = 0;
this.renderResults(this.input.value);
});
this.overlay.addEventListener('click', (e) => {
if (e.target === this.overlay) this.close();
});
this.input.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
e.preventDefault();
this.close();
} else if (e.key === 'Enter') {
e.preventDefault();
this.executeSelected();
} else if (e.key === 'ArrowDown') {
e.preventDefault();
this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredCommands.length - 1);
this.updateSelection();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
this.updateSelection();
}
});
}
renderResults(query) {
this.filteredCommands = query
? this.commands.filter((cmd) => cmd.label.toLowerCase().includes(query.toLowerCase()))
: [...this.commands];
this.results.innerHTML = this.filteredCommands
.map(
(cmd, i) => `
<div class="command-item ${i === this.selectedIndex ? 'selected' : ''}" data-index="${i}">
<span class="command-label">${this.highlightMatch(cmd.label, query)}</span>
${cmd.shortcut ? `<span class="command-shortcut">${cmd.shortcut}</span>` : ''}
</div>
`
)
.join('');
this.results.querySelectorAll('.command-item').forEach((el) => {
el.addEventListener('click', () => {
const idx = parseInt(el.dataset.index);
this.filteredCommands[idx].action();
this.close();
});
el.addEventListener('mouseenter', () => {
this.selectedIndex = parseInt(el.dataset.index);
this.updateSelection();
});
});
}
highlightMatch(text, query) {
if (!query) return text;
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
return text.replace(regex, '<strong>$1</strong>');
}
updateSelection() {
this.results.querySelectorAll('.command-item').forEach((el, i) => {
el.classList.toggle('selected', i === this.selectedIndex);
});
// Scroll selected into view
const selected = this.results.querySelector('.command-item.selected');
if (selected) selected.scrollIntoView({ block: 'nearest' });
}
executeSelected() {
if (this.filteredCommands[this.selectedIndex]) {
this.filteredCommands[this.selectedIndex].action();
this.close();
}
}
}
module.exports = { CommandPalette };
-92
View File
@@ -1,92 +0,0 @@
/* Local Font Definitions for MarkdownConverter */
/* Inter Font Family */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../assets/fonts/Inter-Light.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../assets/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/Inter-Bold.woff2') format('woff2');
}
/* JetBrains Mono Font Family - For code, markdown editor, and ASCII art */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
}
/* Fira Code Font Family - bundled with the app */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/FiraCode-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/FiraCode-Bold.ttf') format('truetype');
}
-2794
View File
File diff suppressed because it is too large Load Diff
-171
View File
@@ -1,171 +0,0 @@
/**
* Audio Operations Module
*
* Handles audio manipulation via `ffmpeg`: format conversion, trim, extract (audio
* track from video/audio), and merge (concat demuxer). Because ffmpeg is an external
* binary, this module is split into pure/testable argument-builder functions and a
* single `executeOperation` that is the only piece which actually spawns ffmpeg —
* the ffmpeg binary path and the `execFile` implementation are both injected so tests
* can replace them with fakes, without invoking a real binary.
*
* @module AudioOperations
*/
const fs = require('fs');
const os = require('os');
const path = require('path');
const { execFile } = require('child_process');
/**
* Build args for a straight format conversion. ffmpeg infers the output format from
* outputPath's extension; only pass -f explicitly when format is given and differs
* from that extension.
*/
function buildConvertArgs({ inputPath, outputPath, format }) {
const args = ['-i', inputPath, '-y'];
if (format) {
const ext = path.extname(outputPath).replace(/^\./, '').toLowerCase();
if (format.toLowerCase() !== ext) {
args.push('-f', format);
}
}
args.push(outputPath);
return args;
}
/**
* Build args to trim inputPath to [startTime, startTime + duration) seconds.
* startTime/duration must be finite, non-negative numbers — they become argv
* elements passed straight to execFile with no shell involved, so there's no
* injection risk, but malformed values should still fail fast rather than reach
* ffmpeg with garbage.
*/
function buildTrimArgs({ inputPath, outputPath, startTime, duration }) {
const isValid = (n) => typeof n === 'number' && Number.isFinite(n) && n >= 0;
if (!isValid(startTime) || !isValid(duration)) {
throw new Error('Invalid trim range');
}
return ['-i', inputPath, '-ss', String(startTime), '-t', String(duration), '-y', outputPath];
}
/**
* Build args to extract the audio track (stream copy, no video, no re-encode).
* If codec copy fails, executeOperation's 'extract' case retries without -acodec copy.
*/
function buildExtractArgs({ inputPath, outputPath }) {
return ['-i', inputPath, '-vn', '-acodec', 'copy', '-y', outputPath];
}
/**
* Fallback extract args that let ffmpeg transcode instead of stream-copying.
*/
function buildExtractFallbackArgs({ inputPath, outputPath }) {
return ['-i', inputPath, '-vn', '-y', outputPath];
}
/**
* Build args to merge 2+ files via the concat demuxer. Returns both concatListContent
* (the `file '<path>'` lines the caller writes to a temp list file) and args — the
* caller doesn't know the temp list file's path until it creates it, so tempListPath
* is an optional param: executeOperation's 'merge' case calls this once to obtain
* concatListContent, writes it to disk, then calls it again with the real
* tempListPath to obtain the final args referencing that file.
*/
function buildMergeArgs({ inputPaths, outputPath, tempListPath = null }) {
if (!Array.isArray(inputPaths) || inputPaths.length < 2) {
throw new Error('inputPaths must contain at least 2 files');
}
const concatListContent = inputPaths.map((p) => `file '${p}'`).join('\n') + '\n';
const args = ['-f', 'concat', '-safe', '0', '-i', tempListPath, '-c', 'copy', '-y', outputPath];
return { args, concatListContent };
}
/**
* Run ffmpeg with the given args via the injected execFileFn, wrapped in a Promise.
*/
function runFfmpeg(ffmpegPath, args, execFileFn) {
return new Promise((resolve, reject) => {
execFileFn(ffmpegPath, args, { maxBuffer: 10 * 1024 * 1024 }, (error, stdout, stderr) => {
if (error) {
reject(new Error(stderr || error.message));
return;
}
resolve();
});
});
}
async function executeOperation(operation, data, { ffmpegPath, execFileFn } = {}) {
const resolvedFfmpegPath = ffmpegPath || 'ffmpeg';
const resolvedExecFileFn = execFileFn || execFile;
switch (operation) {
case 'convert': {
const { inputPath, outputPath, format } = data || {};
const args = buildConvertArgs({ inputPath, outputPath, format });
await runFfmpeg(resolvedFfmpegPath, args, resolvedExecFileFn);
return { success: true, outputPath };
}
case 'trim': {
const { inputPath, outputPath, startTime, duration } = data || {};
const args = buildTrimArgs({ inputPath, outputPath, startTime, duration });
await runFfmpeg(resolvedFfmpegPath, args, resolvedExecFileFn);
return { success: true, outputPath };
}
case 'extract': {
const { inputPath, outputPath } = data || {};
try {
const args = buildExtractArgs({ inputPath, outputPath });
await runFfmpeg(resolvedFfmpegPath, args, resolvedExecFileFn);
} catch {
// Codec copy can fail when the source audio codec isn't valid in the target
// container — fall back to letting ffmpeg transcode instead.
const fallbackArgs = buildExtractFallbackArgs({ inputPath, outputPath });
await runFfmpeg(resolvedFfmpegPath, fallbackArgs, resolvedExecFileFn);
}
return { success: true, outputPath };
}
case 'merge': {
const { inputPaths, outputPath } = data || {};
const { concatListContent } = buildMergeArgs({ inputPaths, outputPath });
const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'audio-merge-'));
const tempListPath = path.join(tempDir, 'concat-list.txt');
try {
fs.writeFileSync(tempListPath, concatListContent, 'utf8');
const { args } = buildMergeArgs({ inputPaths, outputPath, tempListPath });
await runFfmpeg(resolvedFfmpegPath, args, resolvedExecFileFn);
} finally {
try {
fs.rmSync(tempDir, { recursive: true, force: true });
} catch {
/* best-effort cleanup */
}
}
return { success: true, outputPath };
}
default:
throw new Error(`Unknown operation: ${operation}`);
}
}
module.exports = {
executeOperation,
buildConvertArgs,
buildTrimArgs,
buildExtractArgs,
buildMergeArgs,
};
-126
View File
@@ -1,126 +0,0 @@
'use strict';
const fs = require('fs');
const path = require('path');
const JSZip = require('jszip');
const REL_NS = 'http://schemas.openxmlformats.org/package/2006/relationships';
function generatedRId(idx) {
return `rIdFont${idx}`;
}
async function patchZipWithFonts(inputPath, fonts) {
const buf = fs.readFileSync(inputPath);
const zip = await JSZip.loadAsync(buf);
const existingFontNames = new Set();
// Detect prior embeds (idempotency: skip TTF files already present).
for (const f of Object.keys(zip.files)) {
if (zip.files[f].name && /^word\/fonts\//.test(zip.files[f].name)) {
existingFontNames.add(path.basename(f));
}
}
for (let i = 0; i < fonts.length; i++) {
const { path: fontPath } = fonts[i];
const fname = path.basename(fontPath);
const wordPath = `word/fonts/${fname}`;
if (!existingFontNames.has(fname)) {
zip.file(wordPath, fs.readFileSync(fontPath));
existingFontNames.add(fname);
}
}
// Build/replace word/fontTable.xml so Word knows the family and where to
// fetch the embedded TTF data.
const fontTableXml =
`<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n` +
`<w:fonts xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/main">\n` +
fonts
.map(
(f, i) =>
` <w:font w:name="${f.family}"><w:embedRegular r:id="${generatedRId(i)}" xmlns:r="${REL_NS}"/></w:font>`
)
.join('\n') +
`\n</w:fonts>\n`;
zip.file('word/fontTable.xml', fontTableXml);
// Patch [Content_Types].xml — add Override for /word/fontTable.xml and each TTF.
const ctPath = '[Content_Types].xml';
let ct = await zip.file(ctPath).async('string');
if (!ct.includes('PartName="/word/fontTable.xml"')) {
ct = ct.replace(
'</Types>',
'<Override PartName="/word/fontTable.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.fontTable+xml"/></Types>'
);
}
for (const f of fonts) {
const ttfCt = 'application/x-font-ttf';
const filePart = `/word/fonts/${path.basename(f.path)}`;
if (!ct.includes(`PartName="${filePart}"`)) {
ct = ct.replace(
'</Types>',
`<Override PartName="${filePart}" ContentType="${ttfCt}"/></Types>`
);
}
}
if (!ct.includes('Default Extension="ttf"')) {
ct = ct.replace(
'</Types>',
'<Default Extension="ttf" ContentType="application/x-font-ttf"/></Types>'
);
}
zip.file(ctPath, ct);
// Patch word/_rels/document.xml.rels — relationships for fontTable + each font.
const relsPath = 'word/_rels/document.xml.rels';
if (!zip.files[relsPath]) {
zip.file(
relsPath,
`<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n<Relationships xmlns="${REL_NS}"/>`
);
}
let rels = await zip.file(relsPath).async('string');
if (!rels.includes('fontTable.xml')) {
rels = rels.replace(
'</Relationships>',
`<Relationship Id="${generatedRId(fonts.length)}" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/fontTable" Target="fontTable.xml"/></Relationships>`
);
}
for (let i = 0; i < fonts.length; i++) {
const fname = path.basename(fonts[i].path);
if (!rels.includes(fname)) {
rels = rels.replace(
'</Relationships>',
`<Relationship Id="${generatedRId(i)}" Type="http://schemas.microsoft.com/office/2011/relationships/font" Target="fonts/${fname}"/></Relationships>`
);
}
}
zip.file(relsPath, rels);
// Patch word/styles.xml — bind SourceCode/VerbatimChar styles to the family.
const stylesPath = 'word/styles.xml';
if (zip.files[stylesPath]) {
let styles = await zip.file(stylesPath).async('string');
const family = fonts[0].family;
if (!styles.includes(`w:ascii="${family}"`)) {
styles = styles.replace(
/(<w:style[^>]*w:styleId="(?:SourceCode|VerbatimChar)"[^>]*>)/,
`$1<w:rPr><w:rFonts w:ascii="${family}" w:hAnsi="${family}" w:cs="${family}"/></w:rPr>`
);
}
zip.file(stylesPath, styles);
}
const outBuf = await zip.generateAsync({ type: 'nodebuffer' });
fs.writeFileSync(inputPath, outBuf);
return inputPath;
}
async function embed(docxPath, fonts) {
return patchZipWithFonts(docxPath, fonts);
}
module.exports = { embed };
-44
View File
@@ -1,44 +0,0 @@
'use strict';
const fs = require('fs');
const path = require('path');
const JSZip = require('jszip');
// Patches an EPUB produced by pandoc so it embeds the supplied TTF font files
// inside the OEBPS and registers them in the OPF manifest. Used after
// `pandoc --epub-embed-font=...` runs (which embeds the font data) but does
// not always add the manifest item we need for readers to discover the font.
//
// Writes a new file at `${epubPath}.patched.epub` and returns the patched path.
// Caller should overwrite the original after a successful export.
async function patchManifest(epubPath, fonts) {
const zip = await JSZip.loadAsync(fs.readFileSync(epubPath));
const opfPath = Object.keys(zip.files).find((f) => f.endsWith('content.opf'));
if (!opfPath) throw new Error('EPUB has no content.opf');
let opf = await zip.file(opfPath).async('string');
for (const { path: fontPath, family, weight } of fonts) {
const filename = path.basename(fontPath);
const inFontDir = `OEBPS/fonts/${filename}`;
zip.file(inFontDir, fs.readFileSync(fontPath));
if (!opf.includes(filename)) {
const safeFamily = String(family || 'Font').replace(/\s+/g, '-');
const item = `<item id="font-${safeFamily}-${weight}" href="${inFontDir}" media-type="application/x-font-ttf"/>`;
if (opf.includes('</manifest>')) {
opf = opf.replace('</manifest>', `${item}</manifest>`);
} else {
// OPF without a manifest element (unusual but tolerated): inject one
// just before </package> so the font item is still discoverable.
opf = opf.replace('</package>', `<manifest>${item}</manifest></package>`);
}
}
}
zip.file(opfPath, opf);
const buf = await zip.generateAsync({ type: 'nodebuffer' });
const tmp = `${epubPath}.patched.epub`;
fs.writeFileSync(tmp, buf);
return tmp;
}
module.exports = { patchManifest };
-34
View File
@@ -1,34 +0,0 @@
'use strict';
const fs = require('fs');
function toDataUri(filePath) {
const buf = fs.readFileSync(filePath);
return `data:font/woff2;base64,${buf.toString('base64')}`;
}
function build({ activeFontPath, family, weight = 400, ligatures = false }) {
const features = ligatures ? 'normal' : "'liga' 0, 'calt' 0, 'dlig' 0";
const faceBlock = activeFontPath
? `@font-face {
font-family: '${family}';
font-weight: ${weight};
font-style: normal;
font-display: swap;
src: url('${toDataUri(activeFontPath)}') format('woff2');
}
`
: '';
return `${faceBlock}code, pre, kbd, samp {
font-family: '${family}', monospace;
font-feature-settings: ${features};
}
pre, code {
white-space: pre;
tab-size: 4;
}
`;
}
module.exports = { build };
-92
View File
@@ -1,92 +0,0 @@
'use strict';
/**
* Export preset persistence (Task 21 — export presets/profiles).
*
* Pure list operations over the `exportPresets` array kept in the app's
* settings.json store (the `store.get`/`store.set` helpers defined in
* src/main.js — the same store that holds headerFooterSettings and
* pageSettings). The store is injected so the logic is unit-testable with a
* fake store (see tests/main/ExportPresets.test.js); src/main.js wires these
* functions to the get-export-presets / save-export-preset /
* delete-export-preset invoke channels.
*
* Preset shape: { id: string, name: string, format: string|null, options: object }
* — `options` is the export-options snapshot captured from the renderer's
* export dialog, so selecting a preset can pre-fill that dialog exactly.
*/
const PRESET_KEY = 'exportPresets';
const MAX_PRESETS = 50;
const MAX_NAME_LENGTH = 100;
/**
* Read the stored presets, defensively skipping corrupt data.
* @param {{get: Function, set: Function}} store settings store
* @returns {Array<{id: string, name: string, format: string|null, options: Object}>}
*/
function loadPresets(store) {
const stored = store.get(PRESET_KEY, []);
if (!Array.isArray(stored)) return [];
return stored.filter(
(preset) =>
preset &&
typeof preset === 'object' &&
typeof preset.id === 'string' &&
typeof preset.name === 'string'
);
}
/**
* Validate, normalize, and upsert a preset by id. A missing id gets a newly
* generated one (insert); an id that already exists is replaced (update).
* @param {{get: Function, set: Function}} store settings store
* @param {{id?: string, name?: string, format?: string, options?: Object}} preset
* @returns {Array} the updated preset list (also persisted)
* @throws when the preset is not an object, the name is empty, or the cap is hit
*/
function savePreset(store, preset) {
if (!preset || typeof preset !== 'object') {
throw new Error('Preset must be an object');
}
const name = typeof preset.name === 'string' ? preset.name.trim().slice(0, MAX_NAME_LENGTH) : '';
if (!name) {
throw new Error('Preset name is required');
}
const options = preset.options && typeof preset.options === 'object' ? preset.options : {};
const format = typeof preset.format === 'string' ? preset.format : null;
const presets = loadPresets(store);
const id = typeof preset.id === 'string' && preset.id ? preset.id : createPresetId();
const entry = { id, name, format, options };
const index = presets.findIndex((existing) => existing.id === id);
if (index >= 0) {
presets[index] = entry;
} else {
if (presets.length >= MAX_PRESETS) {
throw new Error(`Cannot store more than ${MAX_PRESETS} export presets`);
}
presets.push(entry);
}
store.set(PRESET_KEY, presets);
return presets;
}
/**
* Remove the preset with the given id (idempotent).
* @param {{get: Function, set: Function}} store settings store
* @param {string} presetId
* @returns {Array} the updated preset list (also persisted)
*/
function deletePreset(store, presetId) {
const presets = loadPresets(store).filter((preset) => preset.id !== presetId);
store.set(PRESET_KEY, presets);
return presets;
}
function createPresetId() {
return `preset-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
}
module.exports = { loadPresets, savePreset, deletePreset, PRESET_KEY, MAX_PRESETS };
+52 -53
View File
@@ -7,9 +7,24 @@ function getGitInstance(dir) {
async function getStatus(dir) {
try {
const git = getGitInstance(dir);
return await git.status();
} catch {
return { error: 'Not a git repository' };
const result = await git.status();
const files = [];
for (const [filePath, status] of Object.entries(result.files || {})) {
files.push({
filePath,
status:
status.working_dir === 'M'
? 'modified'
: status.working_dir === 'A' || status.index === 'A'
? 'added'
: status.working_dir === 'D' || status.index === 'D'
? 'deleted'
: 'untracked',
});
}
return { files };
} catch (_err) {
return { files: [], error: 'Not a git repository' };
}
}
@@ -17,16 +32,32 @@ async function stage(dir, files) {
try {
const git = getGitInstance(dir);
await git.add(files);
return await git.status();
const result = await git.status();
const staged = [];
for (const [filePath, status] of Object.entries(result.files || {})) {
staged.push({
filePath,
status:
status.index === 'A'
? 'added'
: status.index === 'M'
? 'modified'
: status.index === 'D'
? 'deleted'
: 'untracked',
});
}
return { files: staged };
} catch (err) {
return { error: err.message };
return { files: [], error: err.message };
}
}
async function commit(dir, message) {
try {
const git = getGitInstance(dir);
return await git.commit(message);
const result = await git.commit(message);
return { summary: result?.summary || 'Committed' };
} catch (err) {
return { error: err.message };
}
@@ -35,61 +66,29 @@ async function commit(dir, message) {
async function log(dir, maxCount = 20) {
try {
const git = getGitInstance(dir);
return await git.log({ maxCount });
const result = await git.log({ maxCount });
return {
latest: result?.latest || null,
all: (result?.all || []).map((entry) => ({
hash: entry.hash,
message: entry.message,
author: entry.author_name,
date: entry.date,
})),
};
} catch (err) {
return { error: err.message };
return { all: [], error: err.message };
}
}
// againstHead=true compares the working tree (staged + unstaged) against the last
// commit instead of against the index — used by the Document Compare dialog's
// "Git HEAD" mode. Default behavior (worktree vs index) is unchanged.
async function diff(dir, file, againstHead = false) {
async function diff(dir, filePath) {
try {
const git = getGitInstance(dir);
if (againstHead) {
return file ? await git.diff(['HEAD', '--', file]) : await git.diff('HEAD');
}
return file ? await git.diff([file]) : await git.diff();
const args = filePath ? ['--', filePath] : [];
return await git.diff(args);
} catch (err) {
return { error: err.message };
}
}
async function branches(dir) {
try {
const git = getGitInstance(dir);
return await git.branchLocal();
} catch (err) {
return { error: err.message };
}
}
async function checkoutBranch(dir, name, isNew) {
try {
const git = getGitInstance(dir);
return isNew ? await git.checkoutLocalBranch(name) : await git.checkout(name);
} catch (err) {
return { error: err.message };
}
}
async function push(dir) {
try {
const git = getGitInstance(dir);
return await git.push();
} catch (err) {
return { error: err.message };
}
}
async function pull(dir) {
try {
const git = getGitInstance(dir);
return await git.pull();
} catch (err) {
return { error: err.message };
}
}
module.exports = { getStatus, stage, commit, log, diff, branches, checkoutBranch, push, pull };
module.exports = { getStatus, stage, commit, log, diff };
-198
View File
@@ -1,198 +0,0 @@
/**
* Image Operations Module
*
* Handles image manipulation via `sharp`: format conversion, resize, compress, rotate.
* Mirrors the executeOperation(operation, data) dispatcher pattern used by PDFOperations.js.
*
* sharp loads LAZILY: its native bindings (@img/sharp-*) are optionalDependencies
* that a packaged build can prune or fail to unpack, and a top-level require would
* then crash the whole app at boot (src/main.js requires this module unconditionally).
* When sharp cannot load, operations degrade honestly instead of killing the app —
* the same honest-failure precedent PDFOperations set for missing pdf-lib features.
*
* @module ImageOperations
*/
const fs = require('fs');
const path = require('path');
let sharpModule = null;
let sharpLoadError = null;
function loadSharp() {
if (sharpModule) return sharpModule;
if (sharpLoadError) throw sharpLoadError;
try {
sharpModule = require('sharp');
return sharpModule;
} catch (error) {
sharpLoadError = error;
throw error;
}
}
// Strip absolute paths from error text before it reaches callers, mirroring
// sanitizeErrorMessage() in main.js (that helper is not importable from here).
function sanitizeMessage(message) {
if (typeof message !== 'string') return String(message);
return message
.replace(/[A-Z]:\\[^\s"']+\\([^\s"'\\]+)/gi, '$1')
.replace(/\/[^\s"']+\/([^\s"'/]+)/g, '$1');
}
// Must match the MAX_FILE_SIZE convention defined in main.js (50MB). main.js is the
// single source of truth for this limit; this module does not redefine it independently
// — callers (main.js) pass it in via data.maxFileSize when they want it enforced, and we
// fall back to the same 50MB default so direct/unit-test callers are still protected.
const DEFAULT_MAX_FILE_SIZE = 50 * 1024 * 1024;
const RASTER_FORMATS = ['jpeg', 'png', 'webp', 'avif', 'tiff', 'gif'];
const RESIZE_FIT_MODES = ['cover', 'contain', 'fill', 'inside', 'outside'];
function validateInput(data) {
const { inputPath, outputPath, maxFileSize } = data || {};
if (!inputPath || !outputPath) {
throw new Error('inputPath and outputPath are required');
}
if (!fs.existsSync(inputPath)) {
throw new Error(`Input file not found: ${path.basename(inputPath)}`);
}
const limit = typeof maxFileSize === 'number' ? maxFileSize : DEFAULT_MAX_FILE_SIZE;
const stats = fs.statSync(inputPath);
if (stats.size > limit) {
throw new Error(`File exceeds the ${Math.floor(limit / (1024 * 1024))}MB size limit.`);
}
}
async function imageConvert(data) {
try {
const sharp = loadSharp();
validateInput(data);
const { inputPath, outputPath, format } = data;
if (!RASTER_FORMATS.includes(format)) {
throw new Error(`Unsupported output format: ${format}`);
}
await sharp(inputPath).toFormat(format).toFile(outputPath);
return { success: true, outputPath };
} catch (error) {
throw new Error(`Image conversion failed: ${error.message}`);
}
}
async function imageResize(data) {
try {
const sharp = loadSharp();
validateInput(data);
const { inputPath, outputPath, width = null, height = null, fit = 'inside' } = data;
if (width === null && height === null) {
throw new Error('At least one of width or height must be provided');
}
if (!RESIZE_FIT_MODES.includes(fit)) {
throw new Error(`Unsupported fit mode: ${fit}`);
}
await sharp(inputPath).resize({ width, height, fit }).toFile(outputPath);
return { success: true, outputPath };
} catch (error) {
throw new Error(`Image resize failed: ${error.message}`);
}
}
async function imageCompress(data) {
try {
const sharp = loadSharp();
validateInput(data);
const { inputPath, outputPath, quality = 80 } = data;
if (!Number.isInteger(quality) || quality < 1 || quality > 100) {
throw new Error('quality must be an integer between 1 and 100');
}
const ext = path.extname(outputPath).toLowerCase().replace('.', '');
let pipeline = sharp(inputPath);
switch (ext) {
case 'jpg':
case 'jpeg':
pipeline = pipeline.jpeg({ quality });
break;
case 'webp':
pipeline = pipeline.webp({ quality });
break;
case 'avif':
pipeline = pipeline.avif({ quality });
break;
case 'png':
pipeline = pipeline.png({ quality, compressionLevel: 9 });
break;
default:
throw new Error(`Unsupported compression output format: ${ext}`);
}
await pipeline.toFile(outputPath);
return { success: true, outputPath };
} catch (error) {
throw new Error(`Image compression failed: ${error.message}`);
}
}
async function imageRotate(data) {
try {
const sharp = loadSharp();
validateInput(data);
const { inputPath, outputPath, angle } = data;
if (typeof angle !== 'number' || !Number.isFinite(angle)) {
throw new Error('angle must be a number');
}
await sharp(inputPath).rotate(angle).toFile(outputPath);
return { success: true, outputPath };
} catch (error) {
throw new Error(`Image rotation failed: ${error.message}`);
}
}
function executeOperation(operation, data) {
try {
loadSharp();
} catch (error) {
// Honest degradation: the app keeps booting and every image op reports the
// unavailable state as a resolved result instead of throwing at import time.
return Promise.resolve({
success: false,
error: `Image operations unavailable: ${sanitizeMessage(error.message)}`,
});
}
switch (operation) {
case 'convert':
return imageConvert(data);
case 'resize':
return imageResize(data);
case 'compress':
return imageCompress(data);
case 'rotate':
return imageRotate(data);
default:
return Promise.reject(new Error(`Unknown operation: ${operation}`));
}
}
module.exports = {
executeOperation,
imageConvert,
imageResize,
imageCompress,
imageRotate,
};
-56
View File
@@ -1,56 +0,0 @@
'use strict';
const fs = require('fs');
const path = require('path');
const {
getActiveMonoFont,
isLigaturesEnabled,
FAMILY_BY_KEY,
} = require('./settings/monospaceSettings');
const WEIGHT_BY_KEY = { 300: 'Light', 400: 'Regular', 500: 'Medium', 600: 'SemiBold', 700: 'Bold' };
function getAppRoot() {
if (
process.resourcesPath &&
fs.existsSync(path.join(process.resourcesPath, 'app.asar.unpacked'))
) {
return process.resourcesPath;
}
return path.resolve(__dirname, '..', '..');
}
function getCandidatePaths(family, weight) {
const familyDir = family === 'Fira Code' ? 'FiraCode' : 'JetBrainsMono';
const weightName = WEIGHT_BY_KEY[weight] || 'Regular';
const filename = `${familyDir}-${weightName}.ttf`;
const candidates = [];
candidates.push(path.resolve(getAppRoot(), 'assets', 'fonts', filename));
const packagedRoot = process.resourcesPath || getAppRoot();
candidates.push(path.join(packagedRoot, 'app.asar.unpacked', 'assets', 'fonts', filename));
return candidates;
}
function getMonoFontTtfPath(familyKey, weight = 400) {
const family = FAMILY_BY_KEY[familyKey] || 'JetBrains Mono';
const candidates = getCandidatePaths(family, weight);
for (const p of candidates) {
if (fs.existsSync(p)) return p;
}
const filename = path.basename(candidates[candidates.length - 1]);
console.warn(
`[MonospaceFontConfig] bundled font missing: ${filename}; falling back to system monospace`
);
return null;
}
function ligaturesEnabled(settings) {
return isLigaturesEnabled(settings);
}
function getActiveFamily(settings) {
return getActiveMonoFont(settings);
}
module.exports = { getMonoFontTtfPath, ligaturesEnabled, getActiveFamily };
-177
View File
@@ -1,177 +0,0 @@
/**
* PDFBatchOperations
*
* Applies one PDFOperations.executeOperation() operation (watermark, compress,
* rotate, split, ...) to every .pdf file in an input folder — the PDF sibling of
* runMediaBatchOperation() in main.js (Task 12's image/audio/video batch mode):
* collect matching files via collectFilesByExtension (which generalizes the
* inline collectFiles() of the 'universal-convert-batch' handler), loop the
* operation over them, and report per-file progress plus a final
* completed/failed summary.
*
* Pulled out as its own Electron-free module (same precedent as
* collectFilesByExtension) so the batch loop is unit-testable against real
* pdf-lib fixtures; main.js injects the IPC-facing callbacks:
* onProgress -> mainWindow.webContents.send('batch-progress', ...)
* onComplete -> mainWindow.webContents.send('pdf-batch-complete', ...) + dialog
*
* Not every executeOperation op fits the "apply the same operation to every
* file" batch model. Excluded (enforced by absence from PDF_BATCH_OUTPUT_SPEC,
* which doubles as the defensive backstop for renderer-supplied op names):
* - merge / reorder / fillForm — consume per-file knowledge the batch flow
* cannot supply (merge takes many inputs in one op; reorder needs each
* file's full page order; fillForm's field values differ per file).
* - formFields — a read-only query returning data, not a transform.
* - encrypt / decrypt / permissions — pdf-lib 1.17.1 (bundled) lacks
* encryption support, so since Task 27 these ops fail honestly with an
* "unavailable" result instead of silently writing unprotected files;
* a batch run would deterministically fail every file.
*
* @module PDFBatchOperations
*/
const fs = require('fs');
const path = require('path');
const PDFOperations = require('./PDFOperations');
const { collectFilesByExtension } = require('./collectFilesByExtension');
// How to derive each output file's path (or directory) from the source file,
// mirroring BATCH_OUTPUT_SPEC in main.js:
// { ext: 'original' } -> <outputFolder>/<relativeDir>/<baseName>.pdf via outputPath
// { ext: 'txt' } -> <outputFolder>/<relativeDir>/<baseName>.txt via outputPath
// { folder: true } -> split writes its `<baseName>_part_N.pdf` files into
// the mirrored output folder via outputFolder
// { dir: true } -> extractImages writes images into a per-PDF
// <outputFolder>/<relativeDir>/<baseName>/ via outputDir
const PDF_BATCH_OUTPUT_SPEC = {
split: { folder: true },
compress: { ext: 'original' },
rotate: { ext: 'original' },
delete: { ext: 'original' },
watermark: { ext: 'original' },
extractText: { ext: 'txt' },
pageNumbers: { ext: 'original' },
crop: { ext: 'original' },
extractImages: { dir: true },
};
/**
* Runs a single PDFOperations operation over every .pdf under `inputFolder`.
*
* @param {object} args
* @param {string} args.operation - executeOperation op name (must be batchable).
* @param {string} args.inputFolder - Folder to scan for .pdf files.
* @param {string} args.outputFolder - Destination folder (created if missing);
* the input folder's relative structure is mirrored beneath it.
* @param {boolean} [args.includeSubfolders=true] - Recurse into subdirectories.
* @param {object} [args.data={}] - Shared operation options forwarded to
* executeOperation for every file (same option shapes as the single-file PDF
* editor dialog; inputPath/outputPath are added per file here).
* @param {number} [args.maxFileSize] - Skip (count as failed) files larger than
* this many bytes, mirroring the batch-convert handler's file-size guard.
* @param {Function} [args.onProgress] - Called with { completed, failed, total,
* currentFile } before each file and once (currentFile: null) at the end —
* the existing 'batch-progress' payload shape.
* @param {Function} args.onComplete - Called exactly once with the outcome:
* { success: false, error } for early failures, otherwise
* { success: true, completed, failed, total, outputFolder }.
* @param {Function} [args.sanitizeError] - Sanitizer for error messages that
* could leak absolute paths (main.js passes sanitizeErrorMessage).
* @returns {Promise<void>}
*/
async function runPDFBatchOperation({
operation,
inputFolder,
outputFolder,
includeSubfolders,
data = {},
maxFileSize,
onProgress = () => {},
onComplete,
sanitizeError = (message) => message,
}) {
const spec = PDF_BATCH_OUTPUT_SPEC[operation];
if (!spec) {
onComplete({
success: false,
error: `Batch mode is not supported for the "${operation}" operation.`,
});
return;
}
if (!inputFolder || !fs.existsSync(inputFolder)) {
onComplete({ success: false, error: 'Input folder does not exist.' });
return;
}
try {
fs.mkdirSync(outputFolder, { recursive: true });
} catch (error) {
onComplete({
success: false,
error: sanitizeError(`Failed to create output folder: ${error.message}`),
});
return;
}
const files = collectFilesByExtension(inputFolder, ['.pdf'], includeSubfolders !== false);
if (files.length === 0) {
onComplete({ success: false, error: 'No matching files found in the selected folder.' });
return;
}
const total = files.length;
let completed = 0;
let failed = 0;
for (const filePath of files) {
onProgress({
completed,
failed,
total,
currentFile: path.basename(filePath),
});
try {
if (maxFileSize && fs.statSync(filePath).size > maxFileSize) {
failed++;
continue;
}
const baseName = path.basename(filePath, path.extname(filePath));
const relativeDir = path.dirname(path.relative(inputFolder, filePath));
const targetDir = relativeDir === '.' ? outputFolder : path.join(outputFolder, relativeDir);
fs.mkdirSync(targetDir, { recursive: true });
const fileData = { ...data, inputPath: filePath };
if (spec.dir) {
fileData.outputDir = path.join(targetDir, baseName);
} else if (spec.folder) {
fileData.outputFolder = targetDir;
} else {
const ext = spec.ext === 'original' ? 'pdf' : spec.ext;
fileData.outputPath = path.join(targetDir, `${baseName}.${ext}`);
}
// PDFOperations ops report failures via { success: false } rather than by
// throwing (each op catches internally), so the result flag — not just
// the promise — decides the per-file outcome.
const result = await PDFOperations.executeOperation(operation, fileData);
if (result && result.success) {
completed++;
} else {
failed++;
}
} catch {
// stat/mkdir can throw (file vanished mid-scan, output path became a
// file, ...): count the file as failed and keep the batch going, matching
// how executeOperation's own failures are handled.
failed++;
}
}
onProgress({ completed, failed, total, currentFile: null });
onComplete({ success: true, completed, failed, total, outputFolder });
}
module.exports = { runPDFBatchOperation, PDF_BATCH_OUTPUT_SPEC };
+42 -350
View File
@@ -2,30 +2,6 @@ const fs = require('fs');
const path = require('path');
const { PDFDocument, rgb, degrees, StandardFonts } = require('pdf-lib');
// pdf-lib 1.17.1 cannot encrypt: SaveOptions has no userPassword/ownerPassword/
// permissions fields, so save() silently ignores them and writes an unprotected
// file, and PDFDocument.load() cannot open password-protected input (verified
// empirically in Task 22's review). Rather than trusting a pinned version
// string, probe the installed library once at module load: save a tiny
// in-memory document with a userPassword and check the raw bytes for an
// /Encrypt dictionary (which an unencrypted document never contains). A library
// that supports encryption passes the probe and the password ops re-enable
// automatically. Probe errors fail closed (treated as unsupported).
const pdfEncryptionSupported = (async () => {
try {
const probeDoc = await PDFDocument.create();
const probeBytes = await probeDoc.save({ userPassword: 'encryption-capability-probe' });
return Buffer.from(probeBytes).includes('/Encrypt');
} catch {
return false;
}
})();
// Returned by the password ops when the probe reports no encryption support
// (Task 27): fail honestly instead of silently writing an unprotected file.
const PDF_ENCRYPTION_UNAVAILABLE_MESSAGE =
'Password protection is not available in this build (pdf-lib lacks encryption support).';
function parsePageRanges(rangeString, totalPages) {
const pages = [];
const ranges = rangeString.split(',').map((r) => r.trim());
@@ -112,9 +88,6 @@ async function pdfSplit(data) {
}
} else if (data.splitMode === 'interval') {
const interval = data.interval;
if (!Number.isInteger(interval) || interval <= 0) {
return { success: false, message: 'Split interval must be a positive integer.' };
}
for (let i = 0; i < totalPages; i += interval) {
const pages = [];
for (let j = i; j < i + interval && j < totalPages; j++) {
@@ -257,30 +230,6 @@ async function pdfReorder(data) {
}
}
// Shared corner/center coordinate mapping used by pdfWatermark and pdfAddPageNumbers.
function resolvePosition(position, width, height, margin = 50) {
switch (position) {
case 'center':
return { x: width / 2, y: height / 2 };
case 'diagonal':
return { x: width / 2, y: height / 2 };
case 'top-left':
return { x: margin, y: height - margin };
case 'top-center':
return { x: width / 2, y: height - margin };
case 'top-right':
return { x: width - margin, y: height - margin };
case 'bottom-left':
return { x: margin, y: margin };
case 'bottom-center':
return { x: width / 2, y: margin };
case 'bottom-right':
return { x: width - margin, y: margin };
default:
return { x: width / 2, y: height / 2 };
}
}
async function pdfWatermark(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
@@ -301,8 +250,48 @@ async function pdfWatermark(data) {
const page = pdf.getPage(pageIndex);
const { width, height } = page.getSize();
const { x, y } = resolvePosition(data.position, width, height, 50);
const rotation = data.position === 'diagonal' ? 45 : 0;
let x,
y,
rotation = 0;
switch (data.position) {
case 'center':
x = width / 2;
y = height / 2;
break;
case 'diagonal':
x = width / 2;
y = height / 2;
rotation = 45;
break;
case 'top-left':
x = 50;
y = height - 50;
break;
case 'top-center':
x = width / 2;
y = height - 50;
break;
case 'top-right':
x = width - 50;
y = height - 50;
break;
case 'bottom-left':
x = 50;
y = 50;
break;
case 'bottom-center':
x = width / 2;
y = 50;
break;
case 'bottom-right':
x = width - 50;
y = 50;
break;
default:
x = width / 2;
y = height / 2;
}
page.drawText(data.text, {
x,
@@ -328,9 +317,6 @@ async function pdfWatermark(data) {
}
async function pdfEncrypt(data) {
if (!(await pdfEncryptionSupported)) {
return { success: false, message: PDF_ENCRYPTION_UNAVAILABLE_MESSAGE };
}
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
@@ -365,9 +351,6 @@ async function pdfEncrypt(data) {
}
async function pdfDecrypt(data) {
if (!(await pdfEncryptionSupported)) {
return { success: false, message: PDF_ENCRYPTION_UNAVAILABLE_MESSAGE };
}
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes, { password: data.password });
@@ -385,9 +368,6 @@ async function pdfDecrypt(data) {
}
async function pdfSetPermissions(data) {
if (!(await pdfEncryptionSupported)) {
return { success: false, message: PDF_ENCRYPTION_UNAVAILABLE_MESSAGE };
}
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const loadOptions = data.currentPassword ? { password: data.currentPassword } : {};
@@ -421,274 +401,6 @@ async function pdfSetPermissions(data) {
}
}
// pdf-lib has no text-extraction API, so this loads pdfjs-dist's Node-friendly
// "legacy" build (the standard build assumes DOM globals like DOMMatrix).
// pdfjs-dist v5.x ships ESM-only, so it must be loaded via dynamic import()
// even from this CommonJS module.
async function loadPdfjs() {
return import('pdfjs-dist/legacy/build/pdf.mjs');
}
// Points pdfjs-dist at its bundled standard font metrics so it doesn't warn
// (and degrade text-extraction fidelity) when a PDF uses a standard font.
function getStandardFontDataUrl() {
return (
path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts') + path.sep
);
}
async function pdfExtractText(data) {
try {
const pdfjsLib = await loadPdfjs();
const fileData = new Uint8Array(fs.readFileSync(data.inputPath));
const pdf = await pdfjsLib.getDocument({
data: fileData,
standardFontDataUrl: getStandardFontDataUrl(),
}).promise;
let text = '';
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
const page = await pdf.getPage(pageNum);
const content = await page.getTextContent();
const pageText = content.items.map((item) => item.str).join(' ');
text += pageText + '\n';
}
const trimmedText = text.trim();
const result = { success: true, text: trimmedText };
// outputPath is optional: when provided (e.g. from the PDF editor UI),
// also save the extracted text to disk and report where it went.
if (data.outputPath) {
fs.writeFileSync(data.outputPath, trimmedText, 'utf8');
result.message = `Successfully extracted text to ${data.outputPath}`;
}
return result;
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfAddPageNumbers(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const totalPages = pdf.getPageCount();
const font = await pdf.embedFont(StandardFonts.Helvetica);
const position = data.position || 'bottom-center';
const fontSize = data.fontSize || 12;
const startNumber = data.startNumber && data.startNumber > 0 ? data.startNumber : 1;
for (let i = 0; i < totalPages; i++) {
const page = pdf.getPage(i);
const { width, height } = page.getSize();
const { x, y } = resolvePosition(position, width, height, 30);
const label = String(startNumber + i);
const textWidth = font.widthOfTextAtSize(label, fontSize);
let drawX = x;
if (position.includes('center')) {
drawX = x - textWidth / 2;
} else if (position.includes('right')) {
drawX = x - textWidth;
}
page.drawText(label, {
x: drawX,
y,
size: fontSize,
font,
color: rgb(0, 0, 0),
});
}
const newPdfBytes = await pdf.save();
fs.writeFileSync(data.outputPath, newPdfBytes);
return { success: true, message: `Successfully added page numbers to ${totalPages} page(s)` };
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfCrop(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const totalPages = pdf.getPageCount();
const margins = data.margins || {};
const top = margins.top || 0;
const bottom = margins.bottom || 0;
const left = margins.left || 0;
const right = margins.right || 0;
for (let i = 0; i < totalPages; i++) {
const page = pdf.getPage(i);
const mediaBox = page.getMediaBox();
const newWidth = mediaBox.width - left - right;
const newHeight = mediaBox.height - top - bottom;
if (newWidth <= 0 || newHeight <= 0) {
return { success: false, error: `Crop margins are too large for page ${i + 1}` };
}
page.setCropBox(mediaBox.x + left, mediaBox.y + bottom, newWidth, newHeight);
}
const croppedPdfBytes = await pdf.save();
fs.writeFileSync(data.outputPath, croppedPdfBytes);
return { success: true, message: `Successfully cropped ${totalPages} page(s)` };
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfExtractImages(data) {
try {
const pdfjsLib = await loadPdfjs();
// sharp is only needed here; require lazily to match the module's existing
// pattern of not pulling heavy optional deps in until an operation runs.
const sharp = require('sharp');
const fileData = new Uint8Array(fs.readFileSync(data.inputPath));
const pdf = await pdfjsLib.getDocument({
data: fileData,
standardFontDataUrl: getStandardFontDataUrl(),
}).promise;
if (!fs.existsSync(data.outputDir)) {
fs.mkdirSync(data.outputDir, { recursive: true });
}
const baseName = path.basename(data.inputPath, path.extname(data.inputPath));
const files = [];
let imageIndex = 0;
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
const page = await pdf.getPage(pageNum);
const opList = await page.getOperatorList();
for (let i = 0; i < opList.fnArray.length; i++) {
if (opList.fnArray[i] !== pdfjsLib.OPS.paintImageXObject) {
continue;
}
const objId = opList.argsArray[i][0];
try {
const imgObj = await new Promise((resolve) => page.objs.get(objId, resolve));
if (!imgObj || !imgObj.data || !imgObj.width || !imgObj.height) {
continue;
}
const channels =
imgObj.kind === pdfjsLib.ImageKind.RGBA_32BPP
? 4
: imgObj.kind === pdfjsLib.ImageKind.GRAYSCALE_1BPP
? 1
: 3;
imageIndex++;
const outputFile = path.join(
data.outputDir,
`${baseName}_page${pageNum}_img${imageIndex}.png`
);
await sharp(Buffer.from(imgObj.data), {
raw: { width: imgObj.width, height: imgObj.height, channels },
})
.png()
.toFile(outputFile);
files.push(outputFile);
} catch {
// Skip images pdfjs/sharp can't decode (e.g. unsupported color spaces).
continue;
}
}
}
return {
success: true,
count: files.length,
files,
message: `Successfully extracted ${files.length} image(s)`,
};
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfGetFormFields(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const form = pdf.getForm();
const fields = form.getFields().map((field) => {
let value;
try {
if (typeof field.getText === 'function') {
value = field.getText();
} else if (typeof field.isChecked === 'function') {
value = field.isChecked();
} else if (typeof field.getSelected === 'function') {
value = field.getSelected();
}
} catch {
// Some field types throw when read in an unexpected state; leave value undefined.
value = undefined;
}
return { name: field.getName(), type: field.constructor.name, value };
});
return { success: true, fields };
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfFillForm(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const form = pdf.getForm();
const values = data.values || {};
let filledCount = 0;
for (const [name, value] of Object.entries(values)) {
try {
const field = form.getTextField(name);
field.setText(value !== null && value !== undefined ? String(value) : '');
filledCount++;
} catch (fieldError) {
// Batch-of-independent-fields: a field that doesn't exist or isn't a text
// field shouldn't fail the whole fill — skip it and keep going (same
// partial-success precedent as pdfExtractImages).
console.warn(`pdfFillForm: skipping field "${name}": ${fieldError.message}`);
}
}
if (data.flatten) {
form.flatten();
}
const filledPdfBytes = await pdf.save();
fs.writeFileSync(data.outputPath, filledPdfBytes);
return { success: true, message: `Successfully filled ${filledCount} form field(s)` };
} catch (error) {
return { success: false, error: error.message };
}
}
function executeOperation(operation, data) {
switch (operation) {
case 'merge':
@@ -711,18 +423,6 @@ function executeOperation(operation, data) {
return pdfDecrypt(data);
case 'permissions':
return pdfSetPermissions(data);
case 'extractText':
return pdfExtractText(data);
case 'pageNumbers':
return pdfAddPageNumbers(data);
case 'crop':
return pdfCrop(data);
case 'extractImages':
return pdfExtractImages(data);
case 'formFields':
return pdfGetFormFields(data);
case 'fillForm':
return pdfFillForm(data);
default:
return Promise.resolve({ success: false, error: `Unknown operation: ${operation}` });
}
@@ -737,8 +437,6 @@ async function getPageCount(filePath) {
module.exports = {
parsePageRanges,
hexToRgb,
pdfEncryptionSupported,
PDF_ENCRYPTION_UNAVAILABLE_MESSAGE,
pdfMerge,
pdfSplit,
pdfCompress,
@@ -749,12 +447,6 @@ module.exports = {
pdfEncrypt,
pdfDecrypt,
pdfSetPermissions,
pdfExtractText,
pdfAddPageNumbers,
pdfCrop,
pdfExtractImages,
pdfGetFormFields,
pdfFillForm,
executeOperation,
getPageCount,
};
-135
View File
@@ -1,135 +0,0 @@
/**
* Pure builders for Pandoc execFile argument arrays.
*
* Every Pandoc invocation in the main process must call
* execFile(pandocPath, args) with an argument array built here or with plain
* Array.push calls — never a command string that is later re-tokenized.
* Values that come from the user (file paths, template names, metadata values)
* are pushed verbatim as single argv elements, so a crafted value such as
* `/tmp/x.bib" --lua-filter=/tmp/evil.lua` can never break out of its argument
* and inject additional Pandoc flags (security finding SEC-1).
*/
/**
* Formats exported through a plain `-t <target>` conversion. The export dialog
* replaces the whole command for these formats (dialog options like template or
* metadata are not applied) — this map preserves that pre-existing behavior.
*/
const SIMPLE_TARGET_FORMATS = {
json: 'json',
beamer: 'beamer',
confluence: 'jira',
jira: 'jira',
asciidoc: 'asciidoc',
rst: 'rst',
mediawiki: 'mediawiki',
org: 'org',
textile: 'textile',
man: 'man',
ipynb: 'ipynb',
};
/**
* Append the export-dialog options shared by the export, batch-conversion and
* fallback paths. Each value lands in argv exactly once, unquoted and
* unescaped — execFile passes array elements as literal arguments.
* @param {string[]} args - Argument array to append to (mutated)
* @param {Object} options - Export options ({ template, metadata, variables,
* toc, tocDepth, numberSections, citeproc, bibliography, csl })
*/
function appendCommonOptions(args, options) {
if (!options) return;
if (options.template && options.template !== 'default') {
args.push(`--template=${options.template}`);
}
if (options.metadata) {
for (const [key, value] of Object.entries(options.metadata)) {
if (value.trim()) {
args.push('-M', `${key}=${value}`);
}
}
}
if (options.variables) {
for (const [key, value] of Object.entries(options.variables)) {
if (value.trim()) {
args.push('-V', `${key}=${value}`);
}
}
}
if (options.toc) args.push('--toc');
if (options.tocDepth) args.push(`--toc-depth=${options.tocDepth}`);
if (options.numberSections) args.push('--number-sections');
if (options.citeproc) args.push('--citeproc');
if (options.bibliography) args.push(`--bibliography=${options.bibliography}`);
if (options.csl) args.push(`--csl=${options.csl}`);
}
/**
* Append the shared prefix of every PDF invocation: the pdf engine flag and,
* when set, the page geometry variable.
* @param {string[]} args - Argument array to append to (mutated)
* @param {Object} params
* @param {string} [params.pdfEngine] - Falls back to xelatex when omitted
* @param {string} [params.geometry] - LaTeX geometry string (e.g. margin=1in)
*/
function appendPdfEngineOptions(args, { pdfEngine, geometry } = {}) {
args.push(`--pdf-engine=${pdfEngine || 'xelatex'}`);
if (geometry) args.push('-V', `geometry:${geometry}`);
}
/**
* Append the PowerPoint footer variable (used when header/footer is enabled).
* @param {string[]} args - Argument array to append to (mutated)
* @param {string} footerText - Processed footer text
*/
function appendFooterVariable(args, footerText) {
if (footerText) args.push('--variable', `footer=${footerText}`);
}
/**
* Build the base argument array for the export dialog and batch conversion:
* input, -o output, the shared export options, and the `-t docx` tail for
* Word exports. Format-specific extras (PDF engine flags, EPUB fonts, HTML
* css, reveal.js themes) are appended by the call site.
* @param {Object} params
* @param {string} params.inputFile - Path passed to pandoc verbatim
* @param {string} params.outputFile - Path passed to pandoc verbatim
* @param {string} [params.format] - Export format name
* @param {Object} [params.options] - Export dialog options
* @returns {string[]}
*/
function buildPandocArgs({ inputFile, outputFile, format, options = {} }) {
const args = [inputFile, '-o', outputFile];
appendCommonOptions(args, options);
if (format === 'docx') {
args.push('-t', 'docx');
}
return args;
}
/**
* Build args for the simple `-t <target>` formats (see SIMPLE_TARGET_FORMATS).
* @param {string} inputFile - Input path
* @param {string} outputFile - Output path
* @param {string} format - Export format name
* @returns {string[]|null} Argument array, or null when format is not one of
* the simple target formats
*/
function buildSimpleTargetArgs(inputFile, outputFile, format) {
const target = SIMPLE_TARGET_FORMATS[format];
if (!target) return null;
return [inputFile, '-t', target, '-o', outputFile];
}
module.exports = {
SIMPLE_TARGET_FORMATS,
appendCommonOptions,
appendPdfEngineOptions,
appendFooterVariable,
buildPandocArgs,
buildSimpleTargetArgs,
};
-47
View File
@@ -1,47 +0,0 @@
'use strict';
// fontspec accepts forward-slash paths on all platforms (TeX normalizes).
// Normalize Windows backslashes so we can reliably build Path/filename.
function toPosix(p) {
return String(p).replace(/\\/g, '/');
}
function escape(s) {
// fontspec values: braces are the only TeX-significant chars we might emit
// from a basename. Backslashes are converted to '/' upstream by toPosix().
return String(s).replace(/[{}]/g, '\\$&');
}
function dirOf(p) {
return toPosix(p).replace(/\/[^/]+$/, '') + '/';
}
function baseName(p) {
return toPosix(p).split('/').pop();
}
// Strip a weight-style suffix from a TTF filename to get the family prefix
// (e.g. JetBrainsMono-Regular.ttf -> JetBrainsMono). Used as the `\setmonofont`
// argument so `*-Regular` / `*-Bold` globs resolve to the right files.
function weightPrefix(p) {
return baseName(p).replace(/-(Regular|Bold|Light|Medium|SemiBold|Italic)\.ttf$/i, '');
}
function build({ fontTtfPath, boldTtfPath, ligatures }) {
if (!fontTtfPath) {
return '% Monospace font path unavailable; TeX will use its default monospace.\n';
}
// `boldTtfPath` is accepted for API symmetry with future formats; the glob
// below resolves the bold file from the regular file's family prefix.
void boldTtfPath;
const ligValue = ligatures ? 'Ligatures=TeX' : 'Ligatures=NoCommon';
const prefix = escape(weightPrefix(fontTtfPath));
return `\\usepackage{fontspec}
\\setmonofont[Path=${escape(dirOf(fontTtfPath))},Extension=.ttf,UprightFont=*-Regular,BoldFont=*-Bold,${ligValue}]{${prefix}}
`;
}
module.exports = { build };
-145
View File
@@ -1,145 +0,0 @@
/**
* Video Operations Module
*
* Handles video manipulation via `ffmpeg`: format conversion, compression, trim,
* frame extraction, and GIF conversion. Because ffmpeg is an external binary, this
* module is split into pure/testable argument-builder functions and a single
* `executeOperation` that is the only piece which actually spawns ffmpeg — the
* ffmpeg binary path and the `execFile` implementation are both injected so tests
* can replace them with fakes, without invoking a real binary.
*
* @module VideoOperations
*/
const fs = require('fs');
const path = require('path');
const { execFile } = require('child_process');
/**
* Build args for a straight format conversion. ffmpeg infers the output format
* from outputPath's extension.
*/
function buildConvertArgs({ inputPath, outputPath }) {
return ['-i', inputPath, '-y', outputPath];
}
/**
* Build args to re-encode inputPath with libx264 at the given CRF (Constant Rate
* Factor). Lower CRF = higher quality/larger file, per libx264 convention. crf
* must be an integer in [0, 51].
*/
function buildCompressArgs({ inputPath, outputPath, crf = 28 }) {
if (!Number.isInteger(crf) || crf < 0 || crf > 51) {
throw new Error('Invalid crf: must be an integer between 0 and 51');
}
return ['-i', inputPath, '-vcodec', 'libx264', '-crf', String(crf), '-y', outputPath];
}
/**
* Build args to trim inputPath to [startTime, startTime + duration) seconds.
* startTime/duration must be finite, non-negative numbers — they become argv
* elements passed straight to execFile with no shell involved, so there's no
* injection risk, but malformed values should still fail fast rather than reach
* ffmpeg with garbage.
*/
function buildTrimArgs({ inputPath, outputPath, startTime, duration }) {
const isValid = (n) => typeof n === 'number' && Number.isFinite(n) && n >= 0;
if (!isValid(startTime) || !isValid(duration)) {
throw new Error('Invalid trim range');
}
return ['-i', inputPath, '-ss', String(startTime), '-t', String(duration), '-y', outputPath];
}
/**
* Build args to extract frames from inputPath at fps frames-per-second, written
* as sequentially numbered PNGs into outputDir. fps must be a positive finite
* number.
*/
function buildFramesArgs({ inputPath, outputDir, fps = 1 }) {
if (typeof fps !== 'number' || !Number.isFinite(fps) || fps <= 0) {
throw new Error('Invalid fps: must be a positive finite number');
}
return ['-i', inputPath, '-vf', `fps=${fps}`, path.join(outputDir, 'frame-%04d.png')];
}
/**
* Build args to convert inputPath to an animated GIF at the given fps and width
* (height scales automatically via -1), using the lanczos scaling filter.
*/
function buildGifArgs({ inputPath, outputPath, fps = 10, width = 480 }) {
return ['-i', inputPath, '-vf', `fps=${fps},scale=${width}:-1:flags=lanczos`, '-y', outputPath];
}
/**
* Run ffmpeg with the given args via the injected execFileFn, wrapped in a Promise.
*/
function runFfmpeg(ffmpegPath, args, execFileFn) {
return new Promise((resolve, reject) => {
execFileFn(ffmpegPath, args, { maxBuffer: 10 * 1024 * 1024 }, (error, stdout, stderr) => {
if (error) {
reject(new Error(stderr || error.message));
return;
}
resolve();
});
});
}
async function executeOperation(operation, data, { ffmpegPath, execFileFn } = {}) {
const resolvedFfmpegPath = ffmpegPath || 'ffmpeg';
const resolvedExecFileFn = execFileFn || execFile;
switch (operation) {
case 'convert': {
const { inputPath, outputPath } = data || {};
const args = buildConvertArgs({ inputPath, outputPath });
await runFfmpeg(resolvedFfmpegPath, args, resolvedExecFileFn);
return { success: true, outputPath };
}
case 'compress': {
const { inputPath, outputPath, crf } = data || {};
const args = buildCompressArgs({ inputPath, outputPath, crf });
await runFfmpeg(resolvedFfmpegPath, args, resolvedExecFileFn);
return { success: true, outputPath };
}
case 'trim': {
const { inputPath, outputPath, startTime, duration } = data || {};
const args = buildTrimArgs({ inputPath, outputPath, startTime, duration });
await runFfmpeg(resolvedFfmpegPath, args, resolvedExecFileFn);
return { success: true, outputPath };
}
case 'frames': {
const { inputPath, outputDir, fps } = data || {};
const args = buildFramesArgs({ inputPath, outputDir, fps });
fs.mkdirSync(outputDir, { recursive: true });
await runFfmpeg(resolvedFfmpegPath, args, resolvedExecFileFn);
return { success: true, outputDir };
}
case 'gif': {
const { inputPath, outputPath, fps, width } = data || {};
const args = buildGifArgs({ inputPath, outputPath, fps, width });
await runFfmpeg(resolvedFfmpegPath, args, resolvedExecFileFn);
return { success: true, outputPath };
}
default:
throw new Error(`Unknown operation: ${operation}`);
}
}
module.exports = {
executeOperation,
buildConvertArgs,
buildCompressArgs,
buildTrimArgs,
buildFramesArgs,
buildGifArgs,
};
-52
View File
@@ -1,52 +0,0 @@
/**
* collectFilesByExtension
*
* Recursively (optionally) collects files under a directory whose extension matches
* one of a given set of extensions. Generalizes the `collectFiles()` closure defined
* inside `ipcMain.on('universal-convert-batch', ...)` in main.js (which matches a
* single `.${fromFormat}` extension) to match against an arbitrary extension list —
* used by the batch-image/audio/video-operation handlers, which need to match several
* possible input extensions per media kind (e.g. .jpg/.jpeg/.png/... for images).
*
* Pulled out as its own module (rather than an inline closure like the original) so it
* can be unit tested without Electron.
*
* @module collectFilesByExtension
*/
const fs = require('fs');
const path = require('path');
/**
* @param {string} dir - Directory to scan.
* @param {string[]} extensions - Extensions to match, each including the leading dot
* (e.g. ['.jpg', '.png']). Matching is case-insensitive.
* @param {boolean} [includeSubfolders=true] - Recurse into subdirectories.
* @returns {string[]} Absolute paths of matching files, in directory-walk order.
*/
function collectFilesByExtension(dir, extensions, includeSubfolders = true) {
const normalizedExts = (extensions || []).map((ext) => ext.toLowerCase());
const results = [];
function walk(currentDir) {
const entries = fs.readdirSync(currentDir, { withFileTypes: true });
for (const entry of entries) {
const fullPath = path.join(currentDir, entry.name);
if (entry.isDirectory()) {
if (includeSubfolders) {
walk(fullPath);
}
} else if (entry.isFile()) {
const ext = path.extname(entry.name).toLowerCase();
if (normalizedExts.includes(ext)) {
results.push(fullPath);
}
}
}
}
walk(dir);
return results;
}
module.exports = { collectFilesByExtension };
+18
View File
@@ -0,0 +1,18 @@
// src/main/files/binary.js
// Binary file write handler (used by Word .docx export)
const { ipcMain } = require('electron');
const fs = require('fs').promises;
function register() {
ipcMain.handle('write-buffer', async (_event, { path: filePath, buffer }) => {
await fs.writeFile(filePath, Buffer.from(buffer));
return { ok: true };
});
ipcMain.handle('read-buffer', async (_event, { path: filePath }) => {
const data = await fs.readFile(filePath);
return { ok: true, data };
});
}
module.exports = { register };
+45
View File
@@ -0,0 +1,45 @@
// src/main/files/git.js
// Git IPC handlers — thin wrapper over GitOperations
const { ipcMain } = require('electron');
const GitOperations = require('../GitOperations');
function register(currentFileRef) {
ipcMain.handle('git-status', async (_event, rootPath) => {
const dir =
rootPath ||
(currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd());
return GitOperations.getStatus(dir);
});
ipcMain.handle('git-stage', async (_event, { rootPath, files }) => {
const dir =
rootPath ||
(currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd());
return GitOperations.stage(dir, files);
});
ipcMain.handle('git-commit', async (_event, { rootPath, message }) => {
const dir =
rootPath ||
(currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd());
return GitOperations.commit(dir, message);
});
ipcMain.handle('git-log', async (_event, rootPath) => {
const dir =
rootPath ||
(currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd());
return GitOperations.log(dir);
});
ipcMain.handle('git-diff', async (_event, filePath) => {
const dir = filePath
? require('path').dirname(filePath)
: currentFileRef.current
? require('path').dirname(currentFileRef.current)
: process.cwd();
return GitOperations.diff(dir, filePath);
});
}
module.exports = { register };
+163
View File
@@ -0,0 +1,163 @@
// src/main/files/index.js
// File ops facade — registers all file-related IPC handlers
const { ipcMain, dialog } = require('electron');
const fs = require('fs');
const path = require('path');
const { register: registerGit } = require('./git');
const { register: registerBinary } = require('./binary');
function register({
validatePath,
resolveWritablePath,
isPathAccessible,
currentFileRef,
mainWindow,
}) {
// pick-folder
ipcMain.handle('pick-folder', async () => {
const result = await dialog.showOpenDialog(mainWindow, {
properties: ['openDirectory'],
});
if (result.canceled || result.filePaths.length === 0) return null;
return result.filePaths[0];
});
// pick-file
ipcMain.handle('pick-file', async () => {
const result = await dialog.showOpenDialog(mainWindow, {
properties: ['openFile'],
filters: [{ name: 'Markdown', extensions: ['md', 'markdown', 'mdown', 'mkd'] }],
});
if (result.canceled || result.filePaths.length === 0) return null;
return result.filePaths[0];
});
// read-file
ipcMain.handle('read-file', async (event, filePath) => {
const validation = validatePath(filePath);
if (!validation.valid || !isPathAccessible(validation.resolved)) {
throw new Error(validation.error || 'Invalid file path');
}
return fs.readFileSync(validation.resolved, 'utf-8');
});
// write-file
ipcMain.handle('write-file', async (event, payload) => {
const validation = resolveWritablePath(payload?.path);
if (!validation.valid) {
throw new Error(validation.error || 'Invalid file path');
}
fs.mkdirSync(path.dirname(validation.resolved), { recursive: true });
fs.writeFileSync(validation.resolved, payload?.content ?? '', 'utf-8');
return { path: validation.resolved };
});
// delete-file
ipcMain.handle('delete-file', async (event, filePath) => {
const validation = validatePath(filePath);
if (!validation.valid || !isPathAccessible(validation.resolved)) {
throw new Error(validation.error || 'Invalid file path');
}
fs.rmSync(validation.resolved, { recursive: true, force: false });
return true;
});
// ensure-directory
ipcMain.handle('ensure-directory', async (event, dirPath) => {
const validation = resolveWritablePath(dirPath);
if (!validation.valid) {
throw new Error(validation.error || 'Invalid directory path');
}
fs.mkdirSync(validation.resolved, { recursive: true });
return validation.resolved;
});
// path-exists
ipcMain.handle('path-exists', async (event, filePath) => {
const validation = resolveWritablePath(filePath);
return validation.valid ? fs.existsSync(validation.resolved) : false;
});
// is-directory
ipcMain.handle('is-directory', async (event, filePath) => {
const validation = validatePath(filePath);
if (!validation.valid || !isPathAccessible(validation.resolved)) {
return false;
}
return fs.statSync(validation.resolved).isDirectory();
});
// copy-path
ipcMain.handle('copy-path', async (event, payload) => {
const sourceValidation = validatePath(payload?.source);
const destinationValidation = resolveWritablePath(payload?.destination);
if (!sourceValidation.valid || !isPathAccessible(sourceValidation.resolved)) {
throw new Error(sourceValidation.error || 'Invalid source path');
}
if (!destinationValidation.valid) {
throw new Error(destinationValidation.error || 'Invalid destination path');
}
fs.mkdirSync(path.dirname(destinationValidation.resolved), { recursive: true });
fs.cpSync(sourceValidation.resolved, destinationValidation.resolved, { recursive: true });
return { source: sourceValidation.resolved, destination: destinationValidation.resolved };
});
// move-path
ipcMain.handle('move-path', async (event, payload) => {
const sourceValidation = validatePath(payload?.source);
const destinationValidation = resolveWritablePath(payload?.destination);
if (!sourceValidation.valid || !isPathAccessible(sourceValidation.resolved)) {
throw new Error(sourceValidation.error || 'Invalid source path');
}
if (!destinationValidation.valid) {
throw new Error(destinationValidation.error || 'Invalid destination path');
}
fs.mkdirSync(path.dirname(destinationValidation.resolved), { recursive: true });
try {
fs.renameSync(sourceValidation.resolved, destinationValidation.resolved);
} catch (error) {
if (error.code !== 'EXDEV') {
throw error;
}
fs.cpSync(sourceValidation.resolved, destinationValidation.resolved, { recursive: true });
fs.rmSync(sourceValidation.resolved, { recursive: true, force: false });
}
return { source: sourceValidation.resolved, destination: destinationValidation.resolved };
});
// open-file-path
ipcMain.on('open-file-path', (event, filePath) => {
try {
const validation = validatePath(filePath);
if (!validation.valid) {
console.error('[SECURITY] Invalid file path:', validation.error);
return;
}
if (!isPathAccessible(validation.resolved)) {
return;
}
const stat = fs.statSync(validation.resolved);
if (stat.size > 50 * 1024 * 1024) return;
const content = fs.readFileSync(validation.resolved, 'utf-8');
// Emit set-current-file back to main process so it updates its currentFile variable
mainWindow.webContents.send('set-current-file', validation.resolved);
mainWindow.webContents.send('file-opened', { path: validation.resolved, content });
} catch (err) {
console.error('open-file-path error:', err);
}
});
// Register sub-modules
registerGit(currentFileRef);
registerBinary();
}
module.exports = { register };
File diff suppressed because it is too large Load Diff
+24
View File
@@ -0,0 +1,24 @@
const { ipcMain, shell } = require('electron');
function register({ crash, getMainWindow: _getMainWindow }) {
ipcMain.handle('crash:read', () => {
return crash.list();
});
ipcMain.on('crash:open-dir', () => {
shell.openPath(crash.path());
});
ipcMain.handle('crash:delete', (_event, filename) => {
if (
typeof filename === 'string' &&
/^\d+(-\d+)?-(uncaughtException|unhandledRejection)\.json$/.test(filename)
) {
crash.delete(filename);
return true;
}
return false;
});
}
module.exports = { register };
+29
View File
@@ -0,0 +1,29 @@
const { ipcMain } = require('electron');
const { feedConfigFor } = require('../updater/feed-config');
function register({ updater, getMainWindow, getChannel }) {
ipcMain.handle('updater:check', async () => {
const channel = getChannel();
updater.autoUpdater.setFeedURL(feedConfigFor(channel));
await updater.check();
return { state: updater.state };
});
ipcMain.handle('updater:install', () => {
updater.install();
});
ipcMain.handle('updater:get-state', () => {
return { state: updater.state };
});
// Forward status events to renderer
updater.on('status', (payload) => {
const win = getMainWindow();
if (win && !win.isDestroyed()) {
win.webContents.send('updater:status', payload);
}
});
}
module.exports = { register };
+34
View File
@@ -0,0 +1,34 @@
// src/main/menu/index.js
// buildMenu() composes the app menu from items; register() sets it on the app
const { Menu } = require('electron');
const {
fileItems,
editItems,
viewItems,
batchItems,
convertItems,
pdfEditorItems,
toolsItems,
helpItems,
} = require('./items');
function buildMenu(mainWindow) {
const template = [
{ label: '&File', submenu: fileItems(mainWindow) },
{ label: '&Edit', submenu: editItems(mainWindow) },
{ label: '&View', submenu: viewItems(mainWindow) },
{ label: '&Batch', submenu: batchItems(mainWindow) },
{ label: '&Convert', submenu: convertItems(mainWindow) },
{ label: 'PDF Editor', submenu: pdfEditorItems(mainWindow) },
{ label: '&Tools', submenu: toolsItems(mainWindow) },
{ label: '&Help', submenu: helpItems(mainWindow) },
];
return Menu.buildFromTemplate(template);
}
function register(mainWindow) {
Menu.setApplicationMenu(buildMenu(mainWindow));
}
module.exports = { register, buildMenu };
+799
View File
@@ -0,0 +1,799 @@
// src/main/menu/items.js
// Individual menu items — pure functions that take (mainWindow) and return menu item arrays
const { app, shell } = require('electron');
const path = require('path');
const fs = require('fs');
// Helper: build recent files submenu
function buildRecentFilesMenu(mainWindow) {
try {
const recentFilesPath = path.join(app.getPath('userData'), 'recent-files.json');
if (!fs.existsSync(recentFilesPath)) return [{ label: 'No Recent Files', enabled: false }];
const recentFiles = JSON.parse(fs.readFileSync(recentFilesPath, 'utf-8'));
const existing = recentFiles.filter((file) => fs.existsSync(file));
if (existing.length === 0) return [{ label: 'No Recent Files', enabled: false }];
const items = existing.map((file) => ({
label: path.basename(file),
click: () => {
const { openFileFromPath } = require('../index');
openFileFromPath(file);
},
}));
items.push(
{ type: 'separator' },
{
label: 'Clear Recent Files',
click: () => {
if (mainWindow) {
mainWindow.webContents.send('clear-recent-files');
}
},
}
);
return items;
} catch (_e) {
return [{ label: 'No Recent Files', enabled: false }];
}
}
function fileItems(mainWindow) {
return [
{
label: 'New',
accelerator: 'CmdOrCtrl+N',
click: () => mainWindow.webContents.send('file-new'),
},
{
label: 'Open',
accelerator: 'CmdOrCtrl+O',
click: () => {
const { openFile } = require('../index');
openFile();
},
},
{
label: 'Open PDF',
accelerator: 'CmdOrCtrl+Shift+O',
click: () => {
const { openPdfFile } = require('../index');
openPdfFile();
},
},
{
label: 'Save',
accelerator: 'CmdOrCtrl+S',
click: () => mainWindow.webContents.send('file-save'),
},
{
label: 'Save As',
accelerator: 'CmdOrCtrl+Shift+S',
click: () => {
const { saveAsFile } = require('../index');
saveAsFile();
},
},
{ type: 'separator' },
// NOTE: Print Preview submenu removed — handled by React <PrintPreview> overlay
{ type: 'separator' },
{
label: 'Recent Files',
submenu: buildRecentFilesMenu(mainWindow),
},
{ type: 'separator' },
{
label: 'New from Template',
submenu: [
{
label: 'Blog Post',
click: () => mainWindow.webContents.send('load-template-menu', 'blog-post.md'),
},
{
label: 'Meeting Notes',
click: () => mainWindow.webContents.send('load-template-menu', 'meeting-notes.md'),
},
{
label: 'Technical Spec',
click: () => mainWindow.webContents.send('load-template-menu', 'technical-spec.md'),
},
{
label: 'Changelog',
click: () => mainWindow.webContents.send('load-template-menu', 'changelog.md'),
},
{
label: 'README',
click: () => mainWindow.webContents.send('load-template-menu', 'readme.md'),
},
{
label: 'Project Plan',
click: () => mainWindow.webContents.send('load-template-menu', 'project-plan.md'),
},
{
label: 'API Documentation',
click: () => mainWindow.webContents.send('load-template-menu', 'api-docs.md'),
},
{
label: 'Tutorial',
click: () => mainWindow.webContents.send('load-template-menu', 'tutorial.md'),
},
{
label: 'Release Notes',
click: () => mainWindow.webContents.send('load-template-menu', 'release-notes.md'),
},
{
label: 'Comparison',
click: () => mainWindow.webContents.send('load-template-menu', 'comparison.md'),
},
],
},
{ type: 'separator' },
{
label: 'Import Document...',
accelerator: 'CmdOrCtrl+I',
click: () => {
const { importDocument } = require('../index');
importDocument();
},
},
{
label: 'Export',
submenu: [
{
label: 'HTML',
click: () => {
const { exportFile } = require('../index');
exportFile('html');
},
},
{
label: 'PDF',
click: () => {
const { exportFile } = require('../index');
exportFile('pdf');
},
},
{
label: 'PDF (Enhanced)',
click: () => {
const { exportPDFViaWordTemplate } = require('../index');
exportPDFViaWordTemplate();
},
accelerator: 'Ctrl+Shift+P',
},
{
label: 'DOCX',
click: () => {
const { exportFile } = require('../index');
exportFile('docx');
},
},
{
label: 'DOCX (Enhanced)',
click: () => {
const { exportWordWithTemplate } = require('../index');
exportWordWithTemplate();
},
accelerator: 'Ctrl+Shift+W',
},
{
label: 'LaTeX',
click: () => {
const { exportFile } = require('../index');
exportFile('latex');
},
},
{
label: 'RTF',
click: () => {
const { exportFile } = require('../index');
exportFile('rtf');
},
},
{
label: 'ODT',
click: () => {
const { exportFile } = require('../index');
exportFile('odt');
},
},
{
label: 'EPUB',
click: () => {
const { exportFile } = require('../index');
exportFile('epub');
},
},
{ type: 'separator' },
{
label: 'PowerPoint (PPTX)',
click: () => {
const { exportFile } = require('../index');
exportFile('pptx');
},
},
{
label: 'OpenDocument Presentation (ODP)',
click: () => {
const { exportFile } = require('../index');
exportFile('odp');
},
},
{ type: 'separator' },
{
label: 'CSV (Tables)',
click: () => {
const { exportSpreadsheet } = require('../index');
exportSpreadsheet('csv');
},
},
{ type: 'separator' },
{
label: 'JSON (.json)',
click: () => {
const { exportFile } = require('../index');
exportFile('json');
},
},
{
label: 'YAML (.yaml)',
click: () => {
const { exportFile } = require('../index');
exportFile('yaml');
},
},
{
label: 'XML (.xml)',
click: () => {
const { exportFile } = require('../index');
exportFile('xml');
},
},
{ type: 'separator' },
{
label: 'Confluence Wiki (.txt)',
click: () => {
const { exportFile } = require('../index');
exportFile('confluence');
},
},
{
label: 'MOBI E-book (.mobi)',
click: () => {
const { exportFile } = require('../index');
exportFile('mobi');
},
},
],
},
{ type: 'separator' },
{
label: 'Select Word Template...',
click: () => {
const { selectWordTemplate } = require('../index');
selectWordTemplate();
},
},
{
label: 'Template Settings...',
click: () => {
const { showTemplateSettings } = require('../index');
showTemplateSettings();
},
},
{
label: 'Header & Footer Settings...',
click: () => {
if (mainWindow) {
mainWindow.webContents.send('open-header-footer-dialog');
}
},
},
{ type: 'separator' },
{
label: 'Quit',
accelerator: process.platform === 'darwin' ? 'Cmd+Q' : 'Ctrl+Q',
click: () => app.quit(),
},
];
}
function editItems(mainWindow) {
return [
{
label: 'Undo',
accelerator: 'CmdOrCtrl+Z',
click: () => mainWindow.webContents.send('undo'),
},
{
label: 'Redo',
accelerator: 'CmdOrCtrl+Shift+Z',
click: () => mainWindow.webContents.send('redo'),
},
{ type: 'separator' },
{ label: 'Cut', accelerator: 'CmdOrCtrl+X', role: 'cut' },
{ label: 'Copy', accelerator: 'CmdOrCtrl+C', role: 'copy' },
{ label: 'Paste', accelerator: 'CmdOrCtrl+V', role: 'paste' },
{ label: 'Select All', accelerator: 'CmdOrCtrl+A', role: 'selectAll' },
{ type: 'separator' },
{
label: 'Find & Replace',
accelerator: 'CmdOrCtrl+F',
click: () => mainWindow.webContents.send('toggle-find'),
},
];
}
function viewItems(mainWindow) {
return [
{
label: 'Toggle Preview',
accelerator: 'CmdOrCtrl+Shift+V',
click: () => mainWindow.webContents.send('toggle-preview'),
},
{
label: 'Writing Analytics',
accelerator: 'CmdOrCtrl+Shift+A',
click: () => mainWindow.webContents.send('show-analytics-dialog'),
},
// NOTE: Command Palette removed — handled by useCommandStore
{ type: 'separator' },
{
label: 'Sidebar',
submenu: [
{
label: 'Files',
click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'explorer'),
},
{
label: 'Outline',
click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'outline'),
},
{
label: 'Snippets',
click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'snippets'),
},
{
label: 'Templates',
click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'templates'),
},
{ label: 'Git', click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'git') },
],
},
{
label: 'Bottom Panel (REPL)',
click: () => mainWindow.webContents.send('toggle-bottom-panel'),
},
{ type: 'separator' },
{
label: 'Theme',
submenu: [
{
label: 'Atom One Light (Default)',
click: () => {
const { setTheme } = require('../index');
setTheme('atomonelight');
},
},
{
label: 'GitHub Light',
click: () => {
const { setTheme } = require('../index');
setTheme('github');
},
},
{
label: 'Light',
click: () => {
const { setTheme } = require('../index');
setTheme('light');
},
},
{
label: 'Solarized Light',
click: () => {
const { setTheme } = require('../index');
setTheme('solarized');
},
},
{
label: 'Gruvbox Light',
click: () => {
const { setTheme } = require('../index');
setTheme('gruvbox-light');
},
},
{
label: 'Ayu Light',
click: () => {
const { setTheme } = require('../index');
setTheme('ayu-light');
},
},
{
label: 'Sepia',
click: () => {
const { setTheme } = require('../index');
setTheme('sepia');
},
},
{
label: 'Paper',
click: () => {
const { setTheme } = require('../index');
setTheme('paper');
},
},
{
label: 'Rose Pine Dawn',
click: () => {
const { setTheme } = require('../index');
setTheme('rosepine-dawn');
},
},
{
label: 'Concrete Light',
click: () => {
const { setTheme } = require('../index');
setTheme('concrete-light');
},
},
{ type: 'separator' },
{
label: 'Dark',
click: () => {
const { setTheme } = require('../index');
setTheme('dark');
},
},
{
label: 'One Dark',
click: () => {
const { setTheme } = require('../index');
setTheme('onedark');
},
},
{
label: 'Dracula',
click: () => {
const { setTheme } = require('../index');
setTheme('dracula');
},
},
{
label: 'Nord',
click: () => {
const { setTheme } = require('../index');
setTheme('nord');
},
},
{
label: 'Monokai',
click: () => {
const { setTheme } = require('../index');
setTheme('monokai');
},
},
{
label: 'Material',
click: () => {
const { setTheme } = require('../index');
setTheme('material');
},
},
{
label: 'Gruvbox Dark',
click: () => {
const { setTheme } = require('../index');
setTheme('gruvbox-dark');
},
},
{
label: 'Tokyo Night',
click: () => {
const { setTheme } = require('../index');
setTheme('tokyonight');
},
},
{
label: 'Palenight',
click: () => {
const { setTheme } = require('../index');
setTheme('palenight');
},
},
{
label: 'Ayu Dark',
click: () => {
const { setTheme } = require('../index');
setTheme('ayu-dark');
},
},
{
label: 'Ayu Mirage',
click: () => {
const { setTheme } = require('../index');
setTheme('ayu-mirage');
},
},
{
label: 'Oceanic Next',
click: () => {
const { setTheme } = require('../index');
setTheme('oceanic-next');
},
},
{
label: 'Cobalt2',
click: () => {
const { setTheme } = require('../index');
setTheme('cobalt2');
},
},
{
label: 'Concrete Dark',
click: () => {
const { setTheme } = require('../index');
setTheme('concrete-dark');
},
},
{
label: 'Concrete Warm',
click: () => {
const { setTheme } = require('../index');
setTheme('concrete-warm');
},
},
],
},
{ type: 'separator' },
{
label: 'Font Size',
submenu: [
{
label: 'Increase Font Size',
accelerator: 'CmdOrCtrl+Shift+Plus',
click: () => mainWindow.webContents.send('adjust-font-size', 'increase'),
},
{
label: 'Decrease Font Size',
accelerator: 'CmdOrCtrl+Shift+-',
click: () => mainWindow.webContents.send('adjust-font-size', 'decrease'),
},
{
label: 'Reset Font Size',
accelerator: 'CmdOrCtrl+Shift+0',
click: () => mainWindow.webContents.send('adjust-font-size', 'reset'),
},
],
},
{ type: 'separator' },
{
label: 'Spell Check',
type: 'checkbox',
checked: true,
click: (menuItem) => {
mainWindow.webContents.session.setSpellCheckerEnabled(menuItem.checked);
},
},
{ type: 'separator' },
{
label: 'Custom Preview CSS',
submenu: [
{
label: 'Load Custom Preview CSS...',
click: () => mainWindow.webContents.send('load-custom-css'),
},
{
label: 'Clear Custom Preview CSS',
click: () => mainWindow.webContents.send('clear-custom-css'),
},
],
},
{ type: 'separator' },
{ label: 'Reload', accelerator: 'CmdOrCtrl+R', role: 'reload' },
{ label: 'Toggle DevTools', accelerator: 'F12', role: 'toggleDevTools' },
{ type: 'separator' },
{ label: 'Zoom In', accelerator: 'CmdOrCtrl+Plus', role: 'zoomIn' },
{ label: 'Zoom Out', accelerator: 'CmdOrCtrl+-', role: 'zoomOut' },
{ label: 'Reset Zoom', accelerator: 'CmdOrCtrl+0', role: 'resetZoom' },
];
}
function batchItems(mainWindow) {
return [
{
label: 'Convert Markdown Folder...',
click: () => {
const { showBatchConversionDialog } = require('../index');
showBatchConversionDialog();
},
},
{ type: 'separator' },
{
label: 'Batch Image Conversion...',
click: () => mainWindow.webContents.send('show-batch-converter', 'image'),
},
{
label: 'Batch Audio Conversion...',
click: () => mainWindow.webContents.send('show-batch-converter', 'audio'),
},
{
label: 'Batch Video Conversion...',
click: () => mainWindow.webContents.send('show-batch-converter', 'video'),
},
{
label: 'Batch PDF Conversion...',
click: () => mainWindow.webContents.send('show-batch-converter', 'pdf'),
},
];
}
function convertItems(_mainWindow) {
return [
{
label: 'Universal File Converter...',
accelerator: 'CmdOrCtrl+Shift+C',
click: () => {
const { showUniversalConverterDialog } = require('../index');
showUniversalConverterDialog();
},
},
];
}
function pdfEditorItems(_mainWindow) {
return [
{
label: 'Open PDF File...',
accelerator: 'CmdOrCtrl+Shift+O',
click: () => {
const { openPdfFile } = require('../index');
openPdfFile();
},
},
{ type: 'separator' },
{
label: 'Merge PDFs...',
click: () => {
const { showPDFEditorDialog } = require('../index');
showPDFEditorDialog('merge');
},
},
{
label: 'Split PDF...',
click: () => {
const { showPDFEditorDialog } = require('../index');
showPDFEditorDialog('split');
},
},
{
label: 'Compress PDF...',
click: () => {
const { showPDFEditorDialog } = require('../index');
showPDFEditorDialog('compress');
},
},
{ type: 'separator' },
{
label: 'Rotate Pages...',
click: () => {
const { showPDFEditorDialog } = require('../index');
showPDFEditorDialog('rotate');
},
},
{
label: 'Delete Pages...',
click: () => {
const { showPDFEditorDialog } = require('../index');
showPDFEditorDialog('delete');
},
},
{
label: 'Reorder Pages...',
click: () => {
const { showPDFEditorDialog } = require('../index');
showPDFEditorDialog('reorder');
},
},
{ type: 'separator' },
{
label: 'Add Watermark...',
click: () => {
const { showPDFEditorDialog } = require('../index');
showPDFEditorDialog('watermark');
},
},
{ type: 'separator' },
{
label: 'Security',
submenu: [
{
label: 'Add Password Protection...',
click: () => {
const { showPDFEditorDialog } = require('../index');
showPDFEditorDialog('encrypt');
},
},
{
label: 'Remove Password...',
click: () => {
const { showPDFEditorDialog } = require('../index');
showPDFEditorDialog('decrypt');
},
},
{
label: 'Set Permissions...',
click: () => {
const { showPDFEditorDialog } = require('../index');
showPDFEditorDialog('permissions');
},
},
],
},
{ type: 'separator' },
{
label: 'About PDF Editor',
click: () => {
const { showAboutDialog } = require('../index');
showAboutDialog();
},
},
];
}
function toolsItems(mainWindow) {
// NOTE: Table Generator and ASCII Art Generator removed — handled by React dialogs
return [
// Removed: Table Generator (Cmd+Ctrl+Shift+T) — now React <TableGeneratorDialog>
// Removed: ASCII Art Generator (Cmd+Ctrl+Shift+A) — now React <AsciiGeneratorDialog>
{ type: 'separator' },
{
label: 'Document Compare',
click: () => mainWindow.webContents.send('show-document-compare'),
},
];
}
function helpItems(_mainWindow) {
return [
{
label: 'About MarkdownConverter',
click: () => {
const { showAboutDialog } = require('../index');
showAboutDialog();
},
},
{ type: 'separator' },
{
label: 'Dependencies & Requirements',
click: () => {
const { showDependenciesDialog } = require('../index');
showDependenciesDialog();
},
},
{ type: 'separator' },
{
label: 'Documentation',
click: () => shell.openExternal('https://github.com/amitwh/markdown-converter'),
},
{
label: 'Report Issue',
click: () => shell.openExternal('https://github.com/amitwh/markdown-converter/issues'),
},
{
label: 'Check for Updates',
click: () => shell.openExternal('https://github.com/amitwh/markdown-converter/releases'),
},
];
}
module.exports = {
fileItems,
editItems,
viewItems,
batchItems,
convertItems,
pdfEditorItems,
toolsItems,
helpItems,
};
-21
View File
@@ -1,21 +0,0 @@
'use strict';
const FAMILY_BY_KEY = {
'jetbrains-mono': 'JetBrains Mono',
'fira-code': 'Fira Code',
};
function getDefaults() {
return Object.freeze({ monospaceFont: 'jetbrains-mono', monospaceLigatures: false });
}
function getActiveMonoFont(settings) {
const key = settings && settings.monospaceFont;
return FAMILY_BY_KEY[key] || 'JetBrains Mono';
}
function isLigaturesEnabled(settings) {
return Boolean(settings && settings.monospaceLigatures === true);
}
module.exports = { getDefaults, getActiveMonoFont, isLigaturesEnabled, FAMILY_BY_KEY };
+31
View File
@@ -0,0 +1,31 @@
// src/main/store.js
// Simple JSON-file preferences store (replaces electron-store)
const { app } = require('electron');
const path = require('path');
const fs = require('fs');
const settingsPath = path.join(app.getPath('userData'), 'settings.json');
const store = {
get(key, defaultValue) {
try {
const data = fs.readFileSync(settingsPath, 'utf-8');
const settings = JSON.parse(data);
return settings[key] !== undefined ? settings[key] : defaultValue;
} catch {
return defaultValue;
}
},
set(key, value) {
let settings = {};
try {
const data = fs.readFileSync(settingsPath, 'utf-8');
settings = JSON.parse(data);
} catch {}
settings[key] = value;
fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
},
};
module.exports = store;
+64
View File
@@ -0,0 +1,64 @@
const fs = require('fs');
const path = require('path');
const MAX_DUMPS = 20;
class CrashWriter {
constructor(dir) {
this.dir = dir;
this._counter = 0;
fs.mkdirSync(dir, { recursive: true });
}
handleUncaught(err, kind) {
try {
const filename = `${Date.now()}-${++this._counter}-${kind}.json`;
const payload = {
kind,
message: err && err.message,
stack: err && err.stack,
timestamp: new Date().toISOString(),
};
fs.writeFileSync(path.join(this.dir, filename), JSON.stringify(payload, null, 2));
this._prune();
} catch (writeErr) {
console.error('[crash-writer] dump write failed:', writeErr.message);
}
}
_prune() {
const files = fs.readdirSync(this.dir).sort();
while (files.length > MAX_DUMPS) {
const oldest = files.shift();
try {
fs.unlinkSync(path.join(this.dir, oldest));
} catch (_unlinkErr) {
/* ignore */
}
}
}
list() {
if (!fs.existsSync(this.dir)) return [];
return fs
.readdirSync(this.dir)
.filter((f) => f.endsWith('.json'))
.sort()
.reverse()
.map((filename) => {
const full = path.join(this.dir, filename);
const data = JSON.parse(fs.readFileSync(full, 'utf-8'));
return { filename, ...data };
});
}
delete(filename) {
const full = path.join(this.dir, filename);
if (fs.existsSync(full)) fs.unlinkSync(full);
}
path() {
return this.dir;
}
}
module.exports = { CrashWriter };
+8
View File
@@ -0,0 +1,8 @@
function feedConfigFor(channel) {
if (channel === 'github') {
return { provider: 'github', owner: 'amitwh', repo: 'markdown-converter' };
}
return { provider: 'generic', url: 'https://updates.concreteinfo.co.in/v5' };
}
module.exports = { feedConfigFor };
+42
View File
@@ -0,0 +1,42 @@
const fs = require('fs');
const path = require('path');
class MigrationRunner {
constructor({ dir, transform }) {
this.dir = dir;
this.transform = transform;
this.file = path.join(dir, 'settings.json');
this.backup = path.join(dir, 'settings.v4.bak.json');
}
run() {
if (!fs.existsSync(this.file)) {
this._writeDefaults();
return 'fresh';
}
const raw = JSON.parse(fs.readFileSync(this.file, 'utf-8'));
if (raw && raw['migration.version'] === 5) {
return 'skipped';
}
try {
const v5 = this.transform(raw);
fs.copyFileSync(this.file, this.backup);
fs.writeFileSync(this.file, JSON.stringify({ ...v5, 'migration.version': 5 }, null, 2));
return 'migrated';
} catch (err) {
console.error('[migration-runner] transform failed:', err.message);
// Back up the original and write v5 marker so future launches skip migration.
// Without this, every launch would fail again and the user stays on defaults.
fs.copyFileSync(this.file, this.backup);
fs.writeFileSync(this.file, JSON.stringify({ ...raw, 'migration.version': 5 }, null, 2));
return 'failed';
}
}
_writeDefaults() {
const v5 = this.transform({});
fs.writeFileSync(this.file, JSON.stringify({ ...v5, 'migration.version': 5 }, null, 2));
}
}
module.exports = { MigrationRunner };
+117
View File
@@ -0,0 +1,117 @@
// Mirror of src/renderer/lib/migrations/v4-to-v5.ts, plain JS, for main-process use.
// Kept in sync manually; if the renderer transform changes, update this too.
const { z } = require('zod');
const v4SettingsSchema = z
.object({
theme: z.enum(['light', 'dark', 'auto']).default('auto'),
customCss: z.string().optional().nullable(),
recentFiles: z.array(z.string()).default([]),
editorFontSize: z.number().min(10).max(28).default(14),
keyBindings: z.record(z.string(), z.string()).optional(),
snippets: z.array(z.unknown()).default([]),
})
.passthrough();
const v5SettingsSchema = z
.object({
fontSize: z.number().default(14),
tabSize: z.number().default(4),
lineNumbers: z.boolean().default(true),
wordWrap: z.boolean().default(true),
minimap: z.boolean().default(true),
theme: z.enum(['light', 'dark', 'system']).default('system'),
accentColor: z.string().default('brand'),
fontFamily: z.string().default('system'),
pdfFormat: z.string().default('a4'),
pdfMargins: z.string().default('normal'),
pdfEmbedFonts: z.boolean().default(true),
docxTemplate: z.string().default('standard'),
docxCustomTemplatePath: z.string().nullable().default(null),
replOpen: z.boolean().default(false),
breadcrumbSymbols: z.boolean().default(true),
htmlHighlightStyle: z.string().default('github'),
renderTablesAsAscii: z.boolean().default(false),
welcomeDismissed: z.boolean().default(false),
editorFontSize: z.number().default(14),
customCssPath: z.string().nullable().default(null),
userBindings: z.record(z.string(), z.string()).default({}),
updateChannel: z.enum(['github', 'concreteinfo']).default('github'),
autoCheckUpdates: z.boolean().default(true),
firstRun: z.boolean().default(true),
'migration.version': z.literal(5).optional(),
})
.passthrough();
const v5OnlyFields = ['updateChannel', 'autoCheckUpdates', 'firstRun'];
const v5ThemeValues = ['light', 'dark', 'system'];
function isAlreadyV5(data) {
if (!data || typeof data !== 'object') return false;
if (data['migration.version'] === 5) return true;
// Check for v5-only fields — a v4 file would never have these
return v5OnlyFields.some((f) => f in data);
}
function normalizeAlreadyV5(data) {
// Some earlier v5 builds wrote a legacy theme value (e.g. "ayu-light")
// under the v5 marker. Trusting the marker blindly broke the renderer's
// zod schema on every launch. Always normalize theme against the v5 enum
// before returning, so persisted files are always valid v5.
const out = { ...data };
if (typeof out.theme !== 'string' || !v5ThemeValues.includes(out.theme)) {
out.theme = 'system';
}
return out;
}
const v5SettingsShape = {
fontSize: 14,
tabSize: 4,
lineNumbers: true,
wordWrap: true,
minimap: true,
theme: 'system',
accentColor: 'brand',
fontFamily: 'system',
pdfFormat: 'a4',
pdfMargins: 'normal',
pdfEmbedFonts: true,
docxTemplate: 'standard',
docxCustomTemplatePath: null,
replOpen: false,
breadcrumbSymbols: true,
htmlHighlightStyle: 'github',
renderTablesAsAscii: false,
welcomeDismissed: false,
editorFontSize: 14,
customCssPath: null,
userBindings: {},
updateChannel: 'github',
autoCheckUpdates: true,
firstRun: true,
};
function migrateV4ToV5(v4) {
// If data already looks like v5 (has migration.version=5 or v5-only fields),
// normalize and validate against the v5 schema. This handles the case where
// a buggy v5 run wrote v5 fields without the marker, AND the case where a
// v5 file has a legacy theme value (e.g. "ayu-light") that would otherwise
// be rejected by the renderer.
if (isAlreadyV5(v4)) {
return v5SettingsSchema.parse(normalizeAlreadyV5(v4));
}
const parsed = v4SettingsSchema.parse(v4 || {});
return {
...v5SettingsShape,
...parsed,
theme: parsed.theme === 'auto' ? 'system' : parsed.theme,
customCssPath: parsed.customCss ?? null,
recentFiles: parsed.recentFiles,
editorFontSize: parsed.editorFontSize,
userBindings: parsed.keyBindings ?? v5SettingsShape.userBindings,
snippets: parsed.snippets,
};
}
module.exports = { migrateV4ToV5, v5SettingsShape };
+43
View File
@@ -0,0 +1,43 @@
const { EventEmitter } = require('events');
const DEBOUNCE_MS = 60_000;
class UpdaterService extends EventEmitter {
constructor(autoUpdater) {
super();
this.autoUpdater = autoUpdater;
this.state = 'idle';
this.lastCheckAt = 0;
this._wire();
}
_wire() {
const au = this.autoUpdater;
au.on('checking-for-update', () => this._emit({ state: 'checking' }));
au.on('update-available', (info) => this._emit({ state: 'available', version: info.version }));
au.on('download-progress', (p) => this._emit({ state: 'downloading', percent: p.percent }));
au.on('update-downloaded', (info) => this._emit({ state: 'ready', version: info.version }));
au.on('update-not-available', () => this._emit({ state: 'idle' }));
au.on('error', (err) => {
const code =
err && /ENOTFOUND|ETIMEDOUT|ECONNREFUSED/.test(err.message) ? 'NETWORK' : 'UNKNOWN';
this._emit({ state: 'error', code });
});
}
_emit(payload) {
this.state = payload.state;
this.emit('status', payload);
}
async check() {
if (Date.now() - this.lastCheckAt < DEBOUNCE_MS) return;
this.lastCheckAt = Date.now();
await this.autoUpdater.checkForUpdates();
}
install() {
this.autoUpdater.quitAndInstall();
}
}
module.exports = { UpdaterService };
+111
View File
@@ -0,0 +1,111 @@
// src/main/utils/paths.js
// Path helpers — extracted from src/main.js lines 109-207
const { app } = require('electron');
const path = require('path');
const fs = require('fs');
function getAllowedDirectories() {
const dirs = [
app.getPath('documents'),
app.getPath('desktop'),
app.getPath('downloads'),
app.getPath('home'),
process.cwd(), // Current working directory
].filter(Boolean); // Remove any undefined paths
return dirs;
}
/**
* Validates that a file path is safe and doesn't attempt path traversal
* @param {string} filePath - The path to validate
* @returns {{ valid: boolean, resolved: string, error?: string }}
*/
function validatePath(filePath) {
if (!filePath || typeof filePath !== 'string') {
return { valid: false, resolved: '', error: 'Invalid path' };
}
// Resolve to absolute path (handles .., ., symlinks)
let resolved;
try {
resolved = path.resolve(filePath);
} catch (_err) {
return { valid: false, resolved: '', error: 'Invalid path format' };
}
// Normalize path separators
resolved = path.normalize(resolved);
// Check for null bytes (path injection)
if (resolved.includes('\0')) {
return { valid: false, resolved: '', error: 'Null byte in path' };
}
// Check if path exists
if (!fs.existsSync(resolved)) {
return { valid: false, resolved, error: 'Path does not exist' };
}
return { valid: true, resolved };
}
/**
* Resolves a path for operations where the target may not exist yet.
* Validates string shape and blocks obviously sensitive locations.
* @param {string} filePath
* @returns {{ valid: boolean, resolved: string, error?: string }}
*/
function resolveWritablePath(filePath) {
if (!filePath || typeof filePath !== 'string') {
return { valid: false, resolved: '', error: 'Invalid path' };
}
let resolved;
try {
resolved = path.normalize(path.resolve(filePath));
} catch (_err2) {
return { valid: false, resolved: '', error: 'Invalid path format' };
}
if (resolved.includes('\0')) {
return { valid: false, resolved: '', error: 'Null byte in path' };
}
if (!isPathAccessible(resolved)) {
return { valid: false, resolved, error: 'Path is not accessible' };
}
return { valid: true, resolved };
}
/**
* Checks if a resolved path is within allowed directories
* For an editor app, we allow access to all user-accessible paths
* but log any suspicious access attempts
* @param {string} resolvedPath - The resolved absolute path
* @returns {boolean}
*/
function isPathAccessible(resolvedPath) {
// Block access to sensitive system directories
const blockedPaths = [
'/etc/passwd',
'/etc/shadow',
'/root',
'C:\\Windows\\System32',
'C:\\Windows\\System',
'/System',
'/private/etc',
];
const normalizedPath = resolvedPath.toLowerCase();
for (const blocked of blockedPaths) {
if (normalizedPath.startsWith(blocked.toLowerCase())) {
console.warn('[SECURITY] Blocked access to sensitive path:', resolvedPath);
return false;
}
}
return true;
}
module.exports = { getAllowedDirectories, validatePath, resolveWritablePath, isPathAccessible };
+126
View File
@@ -0,0 +1,126 @@
// src/main/window/index.js
// Main window creation
const { app, BrowserWindow } = require('electron');
const path = require('path');
const fs = require('fs');
const state = require('./state');
const menu = require('../menu');
function createMainWindow() {
const bounds = state.load();
const win = new BrowserWindow({
width: bounds.width,
height: bounds.height,
x: bounds.x,
y: bounds.y,
show: true,
webPreferences: {
// The preload script exposes `window.electronAPI` — the only IPC
// bridge the renderer uses. Without this, every renderer call returns
// CHANNEL_MISSING and file/folder/save all silently no-op.
preload: path.join(__dirname, '../../preload.js'),
// contextIsolation MUST be true for the preload's contextBridge
// exposeInMainWorld call to succeed. Without it, the preload throws
// on load and the renderer never gets the IPC bridge.
contextIsolation: true,
nodeIntegration: false,
spellcheck: true,
},
icon: path.join(__dirname, '../../../assets/icon.png'),
});
// Dev (Vite): load the running dev server so .tsx is transformed on the fly.
// Production (running from dist/ directly): load the built renderer at the
// relative path from this file.
// Production (packaged installer build): the renderer ships under
// process.resourcesPath/renderer (configured via build.extraResources in
// package.json) — not inside the asar.
// VITE_DEV_SERVER_URL is set by `npm run dev` via cross-env.
// app.isPackaged is set by electron-builder for installer builds.
const devServerUrl = process.env.VITE_DEV_SERVER_URL;
if (!app.isPackaged && devServerUrl) {
console.log('[WINDOW] Dev mode — loading', devServerUrl);
win.loadURL(devServerUrl);
} else {
const rendererIndex = app.isPackaged
? path.join(process.resourcesPath, 'renderer', 'index.html')
: path.join(__dirname, '../../../dist/renderer/index.html');
if (app.isPackaged) {
try {
fs.accessSync(rendererIndex);
} catch {
console.error(
'[WINDOW] Renderer not found at',
rendererIndex,
'— did you run `npm run build:renderer` before packaging?'
);
}
}
console.log('[WINDOW] Production mode — loading', rendererIndex);
win.loadFile(rendererIndex);
}
// Show window only after content is ready — avoids blank flash
win.once('ready-to-show', () => {
win.show();
});
menu.register(win);
// Use 'close' (fires before destruction) — 'closed' fires after the
// BrowserWindow object is destroyed, so getBounds() would throw.
win.on('close', () => {
if (!win.isDestroyed()) state.save(win);
});
// Spell check context menu
win.webContents.on('context-menu', (event, params) => {
const { Menu, MenuItem } = require('electron');
const ctxMenu = new Menu();
// Add spell check suggestions
if (params.misspelledWord) {
for (const suggestion of params.dictionarySuggestions) {
ctxMenu.append(
new MenuItem({
label: suggestion,
click: () => win.webContents.replaceMisspelling(suggestion),
})
);
}
if (params.dictionarySuggestions.length > 0) {
ctxMenu.append(new MenuItem({ type: 'separator' }));
}
ctxMenu.append(
new MenuItem({
label: 'Add to Dictionary',
click: () =>
win.webContents.session.addWordToSpellCheckerDictionary(params.misspelledWord),
})
);
ctxMenu.append(new MenuItem({ type: 'separator' }));
}
// Standard context menu items
ctxMenu.append(new MenuItem({ role: 'cut' }));
ctxMenu.append(new MenuItem({ role: 'copy' }));
ctxMenu.append(new MenuItem({ role: 'paste' }));
ctxMenu.append(new MenuItem({ role: 'selectAll' }));
ctxMenu.popup();
});
// Wait for the page to fully load before sending file data
win.webContents.on('did-finish-load', () => {
console.log('Window finished loading');
// Don't open file here - wait for renderer-ready signal
// The renderer will send renderer-ready when TabManager is initialized
});
return win;
}
module.exports = { createMainWindow };
+27
View File
@@ -0,0 +1,27 @@
// src/main/window/state.js
// Window state persistence (size, position)
const { app } = require('electron');
const path = require('path');
const fs = require('fs');
const stateFile = path.join(app.getPath('userData'), 'window-state.json');
function load() {
try {
return JSON.parse(fs.readFileSync(stateFile, 'utf8'));
} catch {
return { width: 1200, height: 800 };
}
}
function save(win) {
const bounds = win.getBounds();
try {
fs.writeFileSync(stateFile, JSON.stringify(bounds));
} catch {
/* ignore */
}
}
module.exports = { load, save };
@@ -29,7 +29,6 @@ class WritingStudioPlugin extends PluginAPI {
this._registerCommands(context);
this._registerStatusBar(context);
this._registerExportFormats(context);
}
_registerCommands(context) {
@@ -121,42 +120,6 @@ class WritingStudioPlugin extends PluginAPI {
});
}
// Example usage of context.formats.registerExportFormat (Task 17): adds
// a "Writing Studio Summary" entry to the Export menu that writes a
// plain-text snapshot of today's sprint/goal progress instead of going
// through Pandoc. Doubles as documentation for how a plugin can offer
// its own export target.
_registerExportFormats(context) {
const { sprintEngine, goalTracker } = this;
context.formats.registerExportFormat('sprint-summary', {
label: 'Writing Studio Summary (.txt)',
extension: 'txt',
handler: async (markdownContent, outputPath) => {
const fs = require('fs');
const goal = context.settings.get('dailyGoal') || 1000;
const progress = goalTracker.getDailyProgress(goal);
const streak = goalTracker.getStreak(goal);
const wordCount = (markdownContent || '').split(/\s+/).filter(Boolean).length;
const lines = [
'Writing Studio Summary',
'=======================',
`Generated: ${new Date().toISOString()}`,
'',
`Document word count: ${wordCount}`,
`Daily goal: ${goal}`,
`Words written today: ${progress.written} (${progress.pct}%)`,
`Current streak: ${streak} day(s)`,
`Sprint active: ${sprintEngine.isActive() ? 'yes' : 'no'}`,
'',
];
fs.writeFileSync(outputPath, lines.join('\n'), 'utf-8');
},
});
}
deactivate() {
if (this._sprintInterval) clearInterval(this._sprintInterval);
}
@@ -32,14 +32,7 @@
"shortcut": "Ctrl+Alt+G"
}
],
"statusBar": { "indicators": ["sprint-timer", "word-goal"] },
"exportFormats": [
{
"id": "sprint-summary",
"label": "Writing Studio Summary (.txt)",
"extension": "txt"
}
]
"statusBar": { "indicators": ["sprint-timer", "word-goal"] }
},
"settings": [
{ "key": "dailyGoal", "type": "number", "default": 1000, "label": "Daily word goal" },
@@ -80,7 +80,7 @@ function renderIssues(container, issues) {
const actions = document.createElement('div');
actions.className = 'ws-issue-actions';
for (const [, label] of [
for (const [_action, label] of [
['accept', 'Accept'],
['dismiss', 'Dismiss'],
]) {
-40
View File
@@ -1,40 +0,0 @@
/**
* FormatRegistry — tracks export formats registered by plugins via
* `context.formats.registerExportFormat(id, opts)`.
*
* Mirrors the simple Map-backed storage pattern used by PluginRegistry
* (see plugin-registry.js), scoped to a single concern: export format
* metadata + handler functions rather than whole plugin instances.
*/
class FormatRegistry {
constructor() {
this.formats = new Map();
}
/**
* Register (or overwrite) an export format entry.
* @param {string} id - Fully-namespaced format id, e.g. "writing-studio:sprint-summary"
* @param {object} opts - { label, extension, handler: async (markdownContent, outputPath, options) => void }
*/
register(id, opts) {
this.formats.set(id, opts);
}
/**
* Look up a single registered format entry by its namespaced id.
* @param {string} id
* @returns {object|undefined}
*/
get(id) {
return this.formats.get(id);
}
/**
* Return all registered formats as an array of { id, ...opts }.
*/
getAll() {
return Array.from(this.formats.entries()).map(([id, opts]) => ({ id, ...opts }));
}
}
module.exports = { FormatRegistry };
+2 -26
View File
@@ -10,21 +10,10 @@ class PluginContext {
* @param {object} deps.editor - { getContent, getSelection, insertAtCursor, onContentChanged }
* @param {object} deps.ipc - { invoke, on }
* @param {object} deps.exportHooks - { preHooks: [], postHooks: [] }
* @param {object} deps.formatRegistry - FormatRegistry instance ({ register, get, getAll })
*/
constructor(deps) {
const {
pluginId,
sidebar,
commands,
statusBar,
eventBus,
settings,
editor,
ipc,
exportHooks,
formatRegistry,
} = deps;
const { pluginId, sidebar, commands, statusBar, eventBus, settings, editor, ipc, exportHooks } =
deps;
this.sidebar = {
registerPanel: (id, opts) => sidebar.registerPanel(`${pluginId}:${id}`, opts),
@@ -80,19 +69,6 @@ class PluginContext {
if (exportHooks) exportHooks.postHooks.push(handler);
},
};
this.formats = {
/**
* Register a plugin-provided export format. It is namespaced as
* `${pluginId}:${id}` so plugins can't collide with each other or
* with the built-in Pandoc-backed formats.
* @param {string} id - Format id, unique within this plugin.
* @param {object} opts - { label, extension, handler: async (markdownContent, outputPath, options) => void }
*/
registerExportFormat: (id, opts) => {
if (formatRegistry) formatRegistry.register(`${pluginId}:${id}`, opts);
},
};
}
}
-1
View File
@@ -33,7 +33,6 @@ class PluginRegistry {
editor: this.deps.editor,
ipc: this.deps.ipc,
exportHooks: this.exportHooks,
formatRegistry: this.deps.formatRegistry,
});
try {
+119 -86
View File
@@ -12,7 +12,7 @@
* @version 4.4.1
*/
const { contextBridge, ipcRenderer, webUtils } = require('electron');
const { contextBridge, ipcRenderer } = require('electron');
// Define allowed IPC channels for security
const ALLOWED_SEND_CHANNELS = [
@@ -36,10 +36,6 @@ const ALLOWED_SEND_CHANNELS = [
'export-with-options',
'export-spreadsheet',
// Plugin export formats
'plugin-export-formats-registered',
'plugin-export-format-result',
// Batch conversion
'batch-convert',
'select-folder',
@@ -49,17 +45,26 @@ const ALLOWED_SEND_CHANNELS = [
'universal-convert-batch',
// Image converter
'process-image-operation',
'select-image-folder',
'batch-image-operation',
'image-convert',
'image-batch-convert',
'image-resize',
'image-compress',
'image-rotate',
// Audio converter
'process-audio-operation',
'batch-audio-operation',
'audio-convert',
'audio-batch-convert',
'audio-extract',
'audio-trim',
'audio-merge',
// Video converter
'process-video-operation',
'batch-video-operation',
'video-convert',
'video-batch-convert',
'video-compress',
'video-trim',
'video-frames',
'video-gif',
// Header/Footer
'get-header-footer-settings',
@@ -68,34 +73,17 @@ const ALLOWED_SEND_CHANNELS = [
'save-header-footer-logo',
'clear-header-footer-logo',
// Word template settings
'get-word-template-settings',
'save-word-template-settings',
'browse-word-template',
'clear-word-template',
// Export presets (invoke channels — gated by this same array)
'get-export-presets',
'save-export-preset',
'delete-export-preset',
// Page settings
'get-page-settings',
'update-page-settings',
// Template settings
'set-custom-start-page',
// PDF operations
'process-pdf-operation',
'get-pdf-page-count',
'get-pdf-form-fields',
'get-pdf-capabilities',
'select-pdf-folder',
'batch-pdf-operation',
// ASCII generator (separate window)
'open-ascii-generator',
// Table generator (separate window)
'open-table-generator',
// Insert generated content
'insert-generated-content',
@@ -110,22 +98,22 @@ const ALLOWED_SEND_CHANNELS = [
'list-directory',
'read-file',
'write-file',
'write-buffer',
'read-buffer',
'delete-file',
'ensure-directory',
'path-exists',
'is-directory',
'copy-path',
'move-path',
'pick-folder',
'pick-file',
// Git
'git-status',
'git-stage',
'git-commit',
'git-log',
'git-branches',
'git-checkout',
'git-push',
'git-pull',
// Snippets
'get-snippets',
@@ -145,16 +133,28 @@ const ALLOWED_SEND_CHANNELS = [
'menu-open',
'export',
// App lifecycle
'app:quit',
'app:open-external',
'app:show-save-dialog',
'get-app-version',
// Updater
'updater:check',
'updater:install',
'updater:get-state',
// Crash reporter
'crash:read',
'crash:open-dir',
'crash:delete',
// Git diff
'git-diff',
// Plugin settings
'plugin-settings:get',
'plugin-settings:set',
// Monospace font settings
'get-monospace-settings',
'set-monospace-settings',
];
const ALLOWED_RECEIVE_CHANNELS = [
@@ -182,19 +182,12 @@ const ALLOWED_RECEIVE_CHANNELS = [
// Font
'adjust-font-size',
'monospace-setting-change',
// Print
'print-preview',
'print-preview-styled',
// Export dialogs
'show-export-dialog',
'show-batch-dialog',
'show-universal-converter-dialog',
'show-table-generator',
'show-pdf-editor-dialog',
'show-document-compare',
// Converter dialogs
'show-image-converter',
@@ -212,41 +205,24 @@ const ALLOWED_RECEIVE_CHANNELS = [
'audio-conversion-complete',
'video-conversion-complete',
// Batch media operations (Image/Audio/Video Tools dialog batch mode)
'media-batch-progress',
'media-batch-complete',
// Folder selection
'folder-selected',
'pdf-folder-selected',
'image-folder-selected',
// Header/Footer
'header-footer-settings-data',
'header-footer-logo-selected',
'header-footer-logo-saved',
// Word template settings
'word-template-settings-data',
'word-template-browsed',
'open-word-template-dialog',
// Page settings
'page-settings-data',
// PDF operations
'pdf-page-count',
'pdf-form-fields',
'pdf-operation-complete',
'pdf-operation-error',
'pdf-batch-complete',
// ASCII Art Generator
'show-ascii-generator-window',
'show-ascii-generator',
// Table Generator
'show-table-generator-window',
// Header/Footer dialog
'open-header-footer-dialog',
@@ -261,14 +237,25 @@ const ALLOWED_RECEIVE_CHANNELS = [
// Batch converter
'show-batch-converter',
// Document compare
'show-document-compare',
// v4 menu-triggered events
'load-template-menu',
'toggle-command-palette',
'toggle-sidebar-panel',
'toggle-bottom-panel',
'print-preview',
'print-preview-styled',
'clear-recent-files',
// Plugin export formats
'run-plugin-export-format',
// Updater
'updater:status',
'show-analytics-dialog',
// File dialog / directory listing
'list-directory',
'pick-folder',
'pick-file',
];
/**
@@ -370,12 +357,17 @@ contextBridge.exposeInMainWorld('electronAPI', {
rendererReady: () => ipcRenderer.send('renderer-ready'),
read: (filePath) => ipcRenderer.invoke('read-file', filePath),
write: (filePath, content) => ipcRenderer.invoke('write-file', { path: filePath, content }),
readBuffer: (filePath) => ipcRenderer.invoke('read-buffer', { path: filePath }),
writeBuffer: (filePath, buffer) => ipcRenderer.invoke('write-buffer', { path: filePath, buffer }),
delete: (filePath) => ipcRenderer.invoke('delete-file', filePath),
ensureDir: (dirPath) => ipcRenderer.invoke('ensure-directory', dirPath),
exists: (filePath) => ipcRenderer.invoke('path-exists', filePath),
isDirectory: (filePath) => ipcRenderer.invoke('is-directory', filePath),
copy: (source, destination) => ipcRenderer.invoke('copy-path', { source, destination }),
move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination }),
list: (dirPath) => ipcRenderer.invoke('list-directory', dirPath),
pickFolder: () => ipcRenderer.invoke('pick-folder'),
pickFile: () => ipcRenderer.invoke('pick-file'),
},
// Theme Operations
@@ -386,6 +378,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
// Print Operations
print: {
doPrint: (options) => ipcRenderer.send('do-print', options),
show: (payload) => ipcRenderer.send('do-print', payload),
},
// Export Operations
@@ -432,21 +425,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
page: {
getSettings: () => ipcRenderer.send('get-page-settings'),
updateSettings: (settings) => ipcRenderer.send('update-page-settings', settings),
},
/**
* Resolve a File object chosen via `<input type="file">` to its absolute
* path. `File.path` was removed in Electron 32; `webUtils.getPathForFile`
* is its replacement. Falls back to `file.path` on older Electron where
* webUtils is unavailable.
* @param {File} file - File object from a file input's files list
* @returns {string | undefined} Absolute filesystem path when resolvable
*/
getFilePath: (file) => {
if (webUtils && typeof webUtils.getPathForFile === 'function') {
return webUtils.getPathForFile(file);
}
return file && file.path;
setCustomStartPage: (pageNumber) => ipcRenderer.send('set-custom-start-page', pageNumber),
},
// PDF Operations
@@ -456,13 +435,67 @@ contextBridge.exposeInMainWorld('electronAPI', {
selectFolder: (inputId) => ipcRenderer.send('select-pdf-folder', inputId),
},
// Generator Windows
generators: {
openAscii: () => ipcRenderer.send('open-ascii-generator'),
openTable: () => ipcRenderer.send('open-table-generator'),
// Image Converter Operations
image: {
convert: (data) => ipcRenderer.send('image-convert', data),
batchConvert: (data) => ipcRenderer.send('image-batch-convert', data),
resize: (data) => ipcRenderer.send('image-resize', data),
compress: (data) => ipcRenderer.send('image-compress', data),
rotate: (data) => ipcRenderer.send('image-rotate', data),
},
// Audio Converter Operations
audio: {
convert: (data) => ipcRenderer.send('audio-convert', data),
batchConvert: (data) => ipcRenderer.send('audio-batch-convert', data),
extract: (data) => ipcRenderer.send('audio-extract', data),
trim: (data) => ipcRenderer.send('audio-trim', data),
merge: (data) => ipcRenderer.send('audio-merge', data),
},
// Video Converter Operations
video: {
convert: (data) => ipcRenderer.send('video-convert', data),
batchConvert: (data) => ipcRenderer.send('video-batch-convert', data),
compress: (data) => ipcRenderer.send('video-compress', data),
trim: (data) => ipcRenderer.send('video-trim', data),
extractFrames: (data) => ipcRenderer.send('video-frames', data),
toGif: (data) => ipcRenderer.send('video-gif', data),
},
getAppVersion: () => ipcRenderer.invoke('get-app-version'),
// Git Operations
git: {
status: (rootPath) => ipcRenderer.invoke('git-status', rootPath),
stage: (args) => ipcRenderer.invoke('git-stage', args),
commit: (args) => ipcRenderer.invoke('git-commit', args),
log: (rootPath) => ipcRenderer.invoke('git-log', rootPath),
diff: (filePath) => ipcRenderer.invoke('git-diff', filePath),
},
app: {
quit: () => ipcRenderer.send('app:quit'),
openExternal: (url) => ipcRenderer.send('app:open-external', url),
showSaveDialog: (args) => ipcRenderer.invoke('app:show-save-dialog', args),
},
updater: {
check: () => ipcRenderer.invoke('updater:check'),
install: () => ipcRenderer.invoke('updater:install'),
getState: () => ipcRenderer.invoke('updater:get-state'),
onStatus: (cb) => {
const subscription = (_event, payload) => cb(payload);
ipcRenderer.on('updater:status', subscription);
return () => ipcRenderer.removeListener('updater:status', subscription);
},
},
crash: {
read: () => ipcRenderer.invoke('crash:read'),
openDir: () => ipcRenderer.send('crash:open-dir'),
delete: (filename) => ipcRenderer.invoke('crash:delete', filename),
},
});
// Log successful preload initialization
-203
View File
@@ -1,203 +0,0 @@
const fs = require('fs');
const path = require('path');
function getBundledFontWoff2Path(familyKey, weight) {
// Renderer can read directly from disk because nodeIntegration is on.
// Try repo-relative first, then packaged app.asar mirror.
const familyDir = familyKey === 'fira-code' ? 'FiraCode' : 'JetBrainsMono';
const weightName = weight >= 700 ? 'Bold' : 'Regular';
const filename = `${familyDir}-${weightName}.woff2`;
const repoPath = path.resolve(__dirname, '..', 'assets', 'fonts', filename);
if (fs.existsSync(repoPath)) return repoPath;
// Packaged: under <resourcesPath>/assets/fonts/
if (process.resourcesPath) {
const packaged = path.join(process.resourcesPath, 'assets', 'fonts', filename);
if (fs.existsSync(packaged)) return packaged;
}
return null;
}
function buildFontFaceBlock(familyKey) {
const family = familyKey === 'fira-code' ? 'Fira Code' : 'JetBrains Mono';
const fontPath = getBundledFontWoff2Path(familyKey, 400);
if (!fontPath) return '';
try {
const data = fs.readFileSync(fontPath);
const dataUri = `data:font/woff2;base64,${data.toString('base64')}`;
return `@font-face { font-family: '${family}'; font-weight: 400; font-style: normal; src: url('${dataUri}') format('woff2'); }`;
} catch (err) {
// Non-fatal: fall back to the system monospace stack declared in styles-modern.css.
if (typeof console !== 'undefined')
console.warn('[print-preview] font embed failed:', err.message);
return '';
}
}
class PrintPreview {
constructor(monospaceSettings = {}) {
this.overlay = document.getElementById('print-preview-overlay');
this.modal = window.modals?.printPreviewModal;
this._lastContent = '';
this._monospaceSettings = {
monospaceFont: monospaceSettings.monospaceFont || 'jetbrains-mono',
monospaceLigatures: monospaceSettings.monospaceLigatures === true,
};
this.setupEventListeners();
}
setMonospaceSettings(settings) {
this._monospaceSettings = {
monospaceFont: (settings && settings.monospaceFont) || 'jetbrains-mono',
monospaceLigatures: !!(settings && settings.monospaceLigatures === true),
};
this.refreshPreview();
}
open(htmlContent) {
this._lastContent = htmlContent;
if (this.modal) {
this.modal.open();
} else {
this.overlay.classList.remove('hidden');
}
this.updatePreview(htmlContent);
this.updateScaleLabel();
}
close() {
if (this.modal) {
this.modal.close();
} else {
this.overlay.classList.add('hidden');
}
}
setupEventListeners() {
document.getElementById('print-preview-close')?.addEventListener('click', () => this.close());
document.getElementById('print-cancel')?.addEventListener('click', () => this.close());
document.getElementById('print-execute')?.addEventListener('click', () => this.executePrint());
// Update preview on option changes
['print-paper-size', 'print-orientation', 'print-margins'].forEach((id) => {
document.getElementById(id)?.addEventListener('change', () => this.refreshPreview());
});
// Scale slider
const scaleSlider = document.getElementById('print-scale');
scaleSlider?.addEventListener('input', () => this.updateScaleLabel());
// Page range toggle
document.getElementById('print-pages')?.addEventListener('change', (e) => {
const rangeInput = document.getElementById('print-page-range');
if (rangeInput) {
rangeInput.classList.toggle('hidden', e.target.value !== 'custom');
}
});
// Note: Backdrop click and Escape key are now handled by ModalManager
}
updateScaleLabel() {
const scale = document.getElementById('print-scale')?.value || 100;
const label = document.getElementById('print-scale-value');
if (label) label.textContent = `${scale}%`;
}
updatePreview(htmlContent) {
const frame = document.getElementById('print-preview-frame');
if (!frame) return;
this._lastContent = htmlContent;
const orientation = document.getElementById('print-orientation')?.value || 'portrait';
const paperSize = document.getElementById('print-paper-size')?.value || 'A4';
// Get dimensions for paper size
const sizes = {
A3: { width: '297mm', height: '420mm' },
A4: { width: '210mm', height: '297mm' },
A5: { width: '148mm', height: '210mm' },
Letter: { width: '8.5in', height: '11in' },
Legal: { width: '8.5in', height: '14in' },
Tabloid: { width: '11in', height: '17in' },
};
const size = sizes[paperSize] || sizes['A4'];
const width = orientation === 'landscape' ? size.height : size.width;
const height = orientation === 'landscape' ? size.width : size.height;
const family =
this._monospaceSettings.monospaceFont === 'fira-code' ? 'Fira Code' : 'JetBrains Mono';
const ligaturesOn = this._monospaceSettings.monospaceLigatures === true;
const featureSettings = ligaturesOn ? 'normal' : "'liga' 0, 'calt' 0, 'dlig' 0";
const fontFaceBlock = buildFontFaceBlock(this._monospaceSettings.monospaceFont);
const previewHtml = `
<!DOCTYPE html>
<html>
<head>
<style>
${fontFaceBlock}
body {
margin: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
line-height: 1.6;
}
@page { size: ${width} ${height}; }
pre, code, kbd, samp {
font-family: '${family}', monospace;
font-feature-settings: ${featureSettings};
}
pre {
background: #f5f5f5;
padding: 12px;
border-radius: 6px;
overflow-x: auto;
white-space: pre;
tab-size: 4;
}
code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 13px; }
pre code { background: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px; }
blockquote { border-left: 4px solid #ddd; margin-left: 0; padding-left: 16px; color: #666; }
img { max-width: 100%; }
h1, h2, h3 { margin-top: 1.5em; }
</style>
</head>
<body>${htmlContent || ''}</body>
</html>
`;
frame.srcdoc = previewHtml;
}
refreshPreview() {
if (this._lastContent) {
this.updatePreview(this._lastContent);
}
}
getOptions() {
return {
paperSize: document.getElementById('print-paper-size')?.value || 'A4',
orientation: document.getElementById('print-orientation')?.value || 'portrait',
margins: document.getElementById('print-margins')?.value || 'default',
scale: parseInt(document.getElementById('print-scale')?.value || '100'),
headers: document.getElementById('print-headers')?.checked ?? true,
background: document.getElementById('print-background')?.checked ?? true,
pages: document.getElementById('print-pages')?.value || 'all',
pageRange: document.getElementById('print-page-range')?.value || '',
};
}
executePrint() {
const options = this.getOptions();
const { ipcRenderer } = require('electron');
ipcRenderer.send('do-print-with-options', options);
this.close();
}
}
module.exports = { PrintPreview };
-6580
View File
File diff suppressed because it is too large Load Diff
+102
View File
@@ -0,0 +1,102 @@
import { useState, useEffect } from 'react';
import { AppShell } from './components/layout/AppShell';
import { ModalLayer } from './components/modals/ModalLayer';
import { CommandPalette } from './components/modals/CommandPalette';
import { Toaster } from './components/ui/sonner';
import { ReplPanel } from './components/tools/ReplPanel';
import { PrintPreview } from './components/tools/PrintPreview';
import { UpdateBanner } from './components/UpdateBanner';
import { FirstRunWizard } from './components/FirstRunWizard';
import { useWelcomeTrigger } from './hooks/use-welcome-trigger';
import { useAutoUpdateCheck } from './hooks/useAutoUpdateCheck';
import { useSettingsStore } from './stores/settings-store';
import { ipc } from './lib/ipc';
import { toast } from './lib/toast';
function scopeCSS(cssText: string, scopeSelector: string) {
if (!cssText) return '';
return cssText.replace(/([^\r\n,{}]+)(,(?=[^}]*{)|(?=[^{]*{))/g, (match, selector, separator) => {
const trimmed = selector.trim();
if (
!trimmed ||
trimmed.startsWith('@') ||
trimmed.startsWith(':root') ||
trimmed.startsWith('from') ||
trimmed.startsWith('to') ||
/^\d+%$/.test(trimmed)
) {
return match;
}
return scopeSelector + ' ' + trimmed + (separator || '');
});
}
function App() {
useWelcomeTrigger();
useAutoUpdateCheck();
const [printOpen, setPrintOpen] = useState(false);
const customCssPath = useSettingsStore((s) => s.customCssPath);
useEffect(() => {
let active = true;
const styleId = 'custom-preview-style';
async function applyCSS() {
if (!customCssPath) {
const styleTag = document.getElementById(styleId);
if (styleTag) styleTag.remove();
return;
}
const r = await ipc.file.read(customCssPath);
if (!active) return;
if (r.ok && r.data) {
let styleTag = document.getElementById(styleId);
if (!styleTag) {
styleTag = document.createElement('style');
styleTag.id = styleId;
document.head.appendChild(styleTag);
}
styleTag.textContent = scopeCSS(r.data, '.preview-content');
} else {
toast.error('Failed to load custom CSS file');
}
}
void applyCSS();
return () => {
active = false;
};
}, [customCssPath]);
useEffect(() => {
window.electronAPI?.file?.rendererReady?.();
}, []);
useEffect(() => {
const handler = () => setPrintOpen(true);
window.addEventListener('mc:print', handler);
window.addEventListener('mc:print-preview', handler);
window.addEventListener('mc:print-preview-styled', handler);
return () => {
window.removeEventListener('mc:print', handler);
window.removeEventListener('mc:print-preview', handler);
window.removeEventListener('mc:print-preview-styled', handler);
};
}, []);
return (
<>
<AppShell />
<ModalLayer />
<CommandPalette />
<Toaster />
<UpdateBanner />
<FirstRunWizard />
<ReplPanel />
{printOpen && <PrintPreview onClose={() => setPrintOpen(false)} />}
</>
);
}
export default App;
+121
View File
@@ -0,0 +1,121 @@
import { useState } from 'react';
import { useAppStore } from '@/stores/app-store';
import { useSettingsStore } from '@/stores/settings-store';
const TEMPLATES = {
blank: '',
readme: '# Project\n\nDescription.\n\n## Usage\n\n```\nnpm install\n```\n',
meeting:
'# Meeting Notes — YYYY-MM-DD\n\n## Attendees\n\n- \n## Agenda\n\n1. \n\n## Action items\n\n- [ ] \n',
blog: '# Title\n\n*Subtitle*\n\nLorem ipsum.\n\n---\n\n## Section 1\n',
};
export function FirstRunWizard() {
const firstRun = useAppStore((s) => s.firstRun);
const setFirstRun = useAppStore((s) => s.setFirstRun);
const theme = useSettingsStore((s) => s.theme);
const setSetting = useSettingsStore((s) => s.setSetting);
const updateChannel = useSettingsStore((s) => s.updateChannel);
const [step, setStep] = useState(0);
const [template, setTemplate] = useState<keyof typeof TEMPLATES>('blank');
if (!firstRun) return null;
const close = () => setFirstRun(false);
return (
<div
data-testid="first-run-wizard"
role="dialog"
aria-modal="true"
className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center"
>
<div className="bg-white dark:bg-neutral-900 rounded-lg p-6 w-[28rem] shadow-xl">
{step === 0 && (
<div>
<h2 className="text-lg font-semibold mb-2">Pick a theme</h2>
<div className="flex gap-2 mb-4">
{(['light', 'dark', 'system'] as const).map((t) => (
<label key={t} className="flex items-center gap-1">
<input
type="radio"
name="theme"
checked={theme === t}
onChange={() => setSetting('theme', t)}
/>
{t}
</label>
))}
</div>
</div>
)}
{step === 1 && (
<div>
<h2 className="text-lg font-semibold mb-2">Update channel</h2>
<div className="flex flex-col gap-2 mb-4">
<label className="flex items-center gap-2">
<input
type="radio"
name="channel"
checked={updateChannel === 'github'}
onChange={() => setSetting('updateChannel', 'github')}
/>
GitHub Releases (public)
</label>
<label className="flex items-center gap-2">
<input
type="radio"
name="channel"
checked={updateChannel === 'concreteinfo'}
onChange={() => setSetting('updateChannel', 'concreteinfo')}
/>
ConcreteInfo self-hosted
</label>
</div>
</div>
)}
{step === 2 && (
<div>
<h2 className="text-lg font-semibold mb-2">Starter template</h2>
<select
value={template}
onChange={(e) => setTemplate(e.target.value as any)}
className="border rounded px-2 py-1 w-full mb-4"
>
<option value="blank">Blank</option>
<option value="readme">README</option>
<option value="meeting">Meeting notes</option>
<option value="blog">Blog post</option>
</select>
</div>
)}
<div className="flex justify-between items-center mt-4">
<button onClick={close} className="text-sm text-neutral-500">
Skip
</button>
<div className="flex gap-2">
{step > 0 && <button onClick={() => setStep(step - 1)}>Back</button>}
{step < 2 ? (
<button
onClick={() => setStep(step + 1)}
className="px-3 py-1 rounded bg-brand text-white"
>
Next
</button>
) : (
<button
onClick={() => {
useAppStore.getState().newBuffer(TEMPLATES[template]);
close();
}}
className="px-3 py-1 rounded bg-brand text-white"
>
Done
</button>
)}
</div>
</div>
</div>
</div>
);
}
+84
View File
@@ -0,0 +1,84 @@
import { useUpdaterStore } from '@/lib/updater-store';
import { ipc } from '@/lib/ipc';
import { toast } from 'sonner';
export function UpdateBanner() {
const { state, version, percent, install, check } = useUpdaterStore();
if (state === 'idle' || state === 'checking') return null;
if (state === 'error') {
return (
<div
data-testid="update-banner"
role="status"
className="bg-amber-50 border-b border-amber-200 px-4 py-2 text-sm"
>
Couldn't check for updates.{' '}
<button
onClick={async () => {
try {
await check();
} catch (e: any) {
toast.error(e.message);
}
}}
className="underline"
>
Try again
</button>
</div>
);
}
if (state === 'available') {
return (
<div
data-testid="update-banner"
className="bg-blue-50 border-b border-blue-200 px-4 py-2 text-sm"
>
A new version (v{version}) is available.{' '}
<button onClick={() => useUpdaterStore.getState().check()} className="underline">
Download now
</button>
</div>
);
}
if (state === 'downloading') {
return (
<div
data-testid="update-banner"
className="bg-blue-50 border-b border-blue-200 px-4 py-2 text-sm"
>
Downloading update {Math.round(percent)}%
</div>
);
}
if (state === 'ready') {
return (
<div
data-testid="update-banner"
className="bg-green-50 border-b border-green-200 px-4 py-2 text-sm flex items-center gap-3"
>
<span>v{version} is ready.</span>
<button
onClick={() =>
ipc.app.openExternal(
`https://github.com/amitwh/markdown-converter/releases/tag/v${version}`
)
}
className="underline"
>
View release notes
</button>
<button onClick={install} className="px-3 py-1 rounded bg-brand text-white">
Restart to update
</button>
</div>
);
}
return null;
}
@@ -0,0 +1,218 @@
import { useEffect, useRef, useState, useCallback } from 'react';
import { EditorState, Compartment } from '@codemirror/state';
import {
EditorView,
keymap,
lineNumbers,
highlightActiveLine,
drawSelection,
} from '@codemirror/view';
import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
import { oneDark } from '@codemirror/theme-one-dark';
import { useTheme } from 'next-themes';
import { lightTheme, lightHighlight } from './themes/light';
import { useEditorStore } from '@/stores/editor-store';
import { useSettingsStore } from '@/stores/settings-store';
import { setActiveView, insertSnippet } from '@/lib/editor-commands';
import { Minimap } from './Minimap';
import { toast } from '@/lib/toast';
import { cn } from '@/lib/utils';
interface Props {
bufferId: string;
initialContent: string;
onChange?: (content: string) => void;
onCursorChange?: (line: number, column: number) => void;
}
const IMAGE_TYPES = new Set([
'image/png',
'image/jpeg',
'image/gif',
'image/webp',
'image/svg+xml',
'image/bmp',
'image/avif',
]);
function guessExt(mimeType: string): string {
const map: Record<string, string> = {
'image/png': 'png',
'image/jpeg': 'jpg',
'image/gif': 'gif',
'image/webp': 'webp',
'image/svg+xml': 'svg',
'image/bmp': 'bmp',
'image/avif': 'avif',
};
return map[mimeType] ?? 'png';
}
async function handleImageFile(file: File): Promise<void> {
const reader = new FileReader();
reader.onload = async () => {
const base64 = (reader.result as string).split(',')[1];
if (!base64) return;
const ext = guessExt(file.type);
const result = await window.electronAPI.invoke('save-pasted-image', { base64, ext });
if (result) {
insertSnippet(`![${file.name}](${result.relativePath})`);
toast.success('Image pasted');
}
};
reader.readAsDataURL(file);
}
function createPasteHandler() {
return EditorView.domEventHandlers({
paste(event: ClipboardEvent, _view: EditorView) {
const items = event.clipboardData?.items;
if (!items) return false;
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (IMAGE_TYPES.has(item.type)) {
event.preventDefault();
const file = item.getAsFile();
if (file) handleImageFile(file);
return true;
}
}
return false;
},
});
}
export function CodeMirrorEditor({ bufferId, initialContent, onChange, onCursorChange }: Props) {
const ref = useRef<HTMLDivElement>(null);
const viewRef = useRef<EditorView | null>(null);
const themeCompartment = useRef(new Compartment());
const { resolvedTheme } = useTheme();
const updateContent = useEditorStore((s) => s.updateContent);
const setCursor = useEditorStore((s) => s.setCursor);
const minimap = useSettingsStore((s) => s.minimap);
const editorFontSize = useSettingsStore((s) => s.editorFontSize);
const buffer = useEditorStore((s) => s.buffers.get(bufferId));
const content = buffer?.content ?? initialContent;
const [scrollRatio, setScrollRatio] = useState(0);
const [visibleRatio, setVisibleRatio] = useState(1);
const [isDragOver, setIsDragOver] = useState(false);
useEffect(() => {
if (!ref.current) return;
const state = EditorState.create({
doc: initialContent,
extensions: [
lineNumbers(),
highlightActiveLine(),
highlightSelectionMatches(),
history(),
drawSelection(),
markdown({ base: markdownLanguage, codeLanguages: [] }),
autocompletion(),
keymap.of([
...defaultKeymap,
...historyKeymap,
...searchKeymap,
...completionKeymap,
indentWithTab,
]),
themeCompartment.current.of(
resolvedTheme === 'dark' ? [oneDark] : [lightTheme, lightHighlight]
),
EditorView.lineWrapping,
EditorView.updateListener.of((v) => {
if (v.docChanged) {
const content = v.state.doc.toString();
updateContent(bufferId, content);
onChange?.(content);
}
if (v.selectionSet || v.docChanged) {
const head = v.state.selection.main.head;
const line = v.state.doc.lineAt(head);
const lineNo = line.number;
const col = head - line.from + 1;
setCursor(bufferId, lineNo, col);
onCursorChange?.(lineNo, col);
}
}),
EditorView.theme({
'&': { fontSize: `${editorFontSize}px` },
}),
EditorView.domEventHandlers({
scroll(_event, view) {
const el = view.scrollDOM;
const denom = el.scrollHeight - el.clientHeight;
setScrollRatio(denom > 0 ? el.scrollTop / denom : 0);
setVisibleRatio(
el.clientHeight > 0 ? Math.min(1, el.clientHeight / el.scrollHeight) : 1
);
return false;
},
}),
createPasteHandler(),
],
});
const view = new EditorView({ state, parent: ref.current });
viewRef.current = view;
setActiveView(view);
return () => {
setActiveView(null);
view.destroy();
viewRef.current = null;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [bufferId]);
useEffect(() => {
const view = viewRef.current;
if (!view) return;
view.dispatch({
effects: themeCompartment.current.reconfigure(
resolvedTheme === 'dark' ? [oneDark] : [lightTheme, lightHighlight]
),
});
}, [resolvedTheme]);
const handleDragOver = useCallback((e: React.DragEvent) => {
if (e.dataTransfer.types.includes('Files')) {
e.preventDefault();
setIsDragOver(true);
}
}, []);
const handleDragLeave = useCallback((e: React.DragEvent) => {
e.preventDefault();
setIsDragOver(false);
}, []);
const handleDrop = useCallback(async (e: React.DragEvent) => {
e.preventDefault();
setIsDragOver(false);
const files = Array.from(e.dataTransfer.files);
const imageFiles = files.filter((f) => IMAGE_TYPES.has(f.type));
for (const file of imageFiles) {
await handleImageFile(file);
}
}, []);
return (
<div className="relative h-full overflow-hidden">
<div
ref={ref}
className={cn(
'h-full overflow-hidden transition-colors duration-150',
isDragOver && 'ring-2 ring-primary bg-primary/5'
)}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
/>
{minimap && (
<Minimap content={content} scrollRatio={scrollRatio} visibleRatio={visibleRatio} />
)}
</div>
);
}
@@ -0,0 +1,59 @@
import { useEffect, useRef } from 'react';
import { CodeMirrorEditor } from './CodeMirrorEditor';
import { FindReplaceBar } from './FindReplaceBar';
import { useEditorStore } from '@/stores/editor-store';
import { usePreviewStore } from '@/stores/preview-store';
import { useAppStore } from '@/stores/app-store';
import { toast } from '@/lib/toast';
export function EditorPane() {
const { buffers, activeId } = useEditorStore();
const buf = activeId ? buffers.get(activeId) : null;
const setPreviewSource = usePreviewStore((s) => s.setSource);
const lastActiveId = useRef<string | null>(null);
useEffect(() => {
if (!buf) return;
const isNewFile = lastActiveId.current !== buf.id;
lastActiveId.current = buf.id;
const isLarge = buf.content.length > 1024 * 1024;
if (isLarge) {
if (!usePreviewStore.getState().largeFileMode) {
usePreviewStore.setState({ largeFileMode: true });
useAppStore.setState({ previewVisible: false });
toast.warning(
'Large content detected (>1MB). Large File Mode enabled to maintain peak responsiveness. Live preview auto-render is disabled.'
);
}
// Only render on initial load / tab switch, not on edits
if (isNewFile) {
usePreviewStore.getState().forceRender(buf.content);
}
} else {
if (usePreviewStore.getState().largeFileMode) {
usePreviewStore.setState({ largeFileMode: false });
}
setPreviewSource(buf.content);
}
}, [buf?.id, buf?.content, buf, setPreviewSource]);
if (!buf) {
return (
<div className="flex h-full items-center justify-center bg-background text-muted-foreground">
<p>No file open. Use File Open to start.</p>
</div>
);
}
return (
<div className="flex h-full flex-col">
<FindReplaceBar />
<div className="flex-1 overflow-hidden">
<CodeMirrorEditor key={buf.id} bufferId={buf.id} initialContent={buf.content} />
</div>
</div>
);
}
@@ -0,0 +1,268 @@
import { useEffect, useRef, useCallback, useState } from 'react';
import {
findNext,
findPrevious,
replaceNext,
replaceAll,
closeSearchPanel,
getSearchQuery,
setSearchQuery,
} from '@codemirror/search';
import type { EditorView } from '@codemirror/view';
import { getActiveView } from '@/lib/editor-commands';
import { useAppStore } from '@/stores/app-store';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { X, ChevronDown, ChevronUp, Replace, ReplaceAll, CaseSensitive, Regex } from 'lucide-react';
export function FindReplaceBar() {
const findBarOpen = useAppStore((s) => s.findBarOpen);
const toggleFindBar = useAppStore((s) => s.toggleFindBar);
const searchRef = useRef<HTMLInputElement>(null);
const replaceRef = useRef<HTMLInputElement>(null);
const [caseSensitive, setCaseSensitive] = useState(false);
const [useRegex, setUseRegex] = useState(false);
const [matchInfo, setMatchInfo] = useState<{ current: number; total: number } | null>(null);
const updateMatchCount = useCallback(() => {
const view = getActiveView();
if (!view) {
setMatchInfo(null);
return;
}
const query = getSearchQuery(view.state);
if (!query || !query.search) {
setMatchInfo(null);
return;
}
try {
const docText = view.state.doc.toString();
const searchStr = query.regexp
? query.search
: query.search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const flags = `g${query.caseSensitive ? '' : 'i'}`;
const regex = new RegExp(searchStr, flags);
const matches = docText.match(regex);
if (!matches) {
setMatchInfo({ current: 0, total: 0 });
return;
}
const selectionHead = view.state.selection.main.head;
let currentMatch = 0;
const matchPositions: number[] = [];
let match;
while ((match = regex.exec(docText)) !== null) {
matchPositions.push(match.index);
if (match.index <= selectionHead && selectionHead <= match.index + match[0].length) {
currentMatch = matchPositions.length;
}
if (matchPositions.length > 10000) break;
}
setMatchInfo({ current: currentMatch || 1, total: matchPositions.length });
} catch {
setMatchInfo(null);
}
}, []);
const executeCommand = useCallback(
(fn: (view: EditorView) => boolean | void) => {
const view = getActiveView();
if (!view) return false;
const result = fn(view);
updateMatchCount();
view.focus();
return result;
},
[updateMatchCount]
);
const handleFindNext = useCallback(() => {
executeCommand(findNext);
}, [executeCommand]);
const handleFindPrev = useCallback(() => {
executeCommand(findPrevious);
}, [executeCommand]);
const handleReplace = useCallback(() => {
executeCommand(replaceNext);
}, [executeCommand]);
const handleReplaceAll = useCallback(() => {
executeCommand(replaceAll);
}, [executeCommand]);
const handleClose = useCallback(() => {
const view = getActiveView();
if (view) closeSearchPanel(view);
toggleFindBar();
view?.focus();
}, [toggleFindBar]);
const handleSearchChange = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
const view = getActiveView();
if (!view) return;
setSearchQuery(view, {
search: value,
caseSensitive,
regexp: useRegex,
});
},
[caseSensitive, useRegex]
);
const handleReplaceChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
const view = getActiveView();
if (!view) return;
const query = getSearchQuery(view.state);
if (query) {
setSearchQuery(view, {
search: query.search,
caseSensitive: query.caseSensitive ?? false,
regexp: query.regexp ?? false,
replace: e.target.value,
});
}
}, []);
useEffect(() => {
if (findBarOpen) {
setTimeout(() => searchRef.current?.focus(), 50);
}
}, [findBarOpen]);
useEffect(() => {
const handler = () => {
if (!useAppStore.getState().findBarOpen) {
useAppStore.getState().toggleFindBar();
}
};
window.addEventListener('mc:find-toggle', handler);
return () => window.removeEventListener('mc:find-toggle', handler);
}, []);
if (!findBarOpen) return null;
return (
<div className="flex items-center gap-1.5 border-b border-border bg-background px-2 py-1">
<Input
ref={searchRef}
placeholder="Find..."
className="h-7 w-48 text-xs"
onChange={handleSearchChange}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.shiftKey ? handleFindPrev() : handleFindNext();
}
if (e.key === 'Escape') handleClose();
if (e.key === 'Tab' && !e.shiftKey) {
e.preventDefault();
replaceRef.current?.focus();
}
}}
data-testid="find-input"
/>
<button
type="button"
className={cn(
'rounded p-0.5 hover:bg-accent',
caseSensitive && 'bg-accent text-accent-foreground'
)}
onClick={() => {
setCaseSensitive((v) => {
const next = !v;
const view = getActiveView();
if (view) {
const query = getSearchQuery(view.state);
if (query) {
setSearchQuery(view, {
search: query.search,
caseSensitive: next,
regexp: useRegex,
replace: query.replace,
});
}
}
return next;
});
}}
aria-label="Case sensitive"
data-testid="find-case-sensitive"
>
<CaseSensitive className="h-3.5 w-3.5" />
</button>
<button
type="button"
className={cn(
'rounded p-0.5 hover:bg-accent',
useRegex && 'bg-accent text-accent-foreground'
)}
onClick={() => {
setUseRegex((v) => {
const next = !v;
const view = getActiveView();
if (view) {
const query = getSearchQuery(view.state);
if (query) {
setSearchQuery(view, {
search: query.search,
caseSensitive,
regexp: next,
replace: query.replace,
});
}
}
return next;
});
}}
aria-label="Use regex"
data-testid="find-regex"
>
<Regex className="h-3.5 w-3.5" />
</button>
{matchInfo && matchInfo.total > 0 && (
<span className="min-w-[4rem] text-center text-[10px] text-muted-foreground">
{matchInfo.current}/{matchInfo.total}
</span>
)}
<Input
ref={replaceRef}
placeholder="Replace..."
className="h-7 w-48 text-xs"
onChange={handleReplaceChange}
onKeyDown={(e) => {
if (e.key === 'Enter') handleReplace();
if (e.key === 'Escape') handleClose();
if (e.key === 'Tab' && e.shiftKey) {
e.preventDefault();
searchRef.current?.focus();
}
}}
data-testid="replace-input"
/>
<Button size="sm" variant="ghost" onClick={handleFindPrev} aria-label="Find previous">
<ChevronUp className="h-3.5 w-3.5" />
</Button>
<Button size="sm" variant="ghost" onClick={handleFindNext} aria-label="Find next">
<ChevronDown className="h-3.5 w-3.5" />
</Button>
<Button size="sm" variant="ghost" onClick={handleReplace} aria-label="Replace">
<Replace className="h-3.5 w-3.5" />
</Button>
<Button size="sm" variant="ghost" onClick={handleReplaceAll} aria-label="Replace all">
<ReplaceAll className="h-3.5 w-3.5" />
</Button>
<Button size="sm" variant="ghost" onClick={handleClose} aria-label="Close">
<X className="h-3.5 w-3.5" />
</Button>
</div>
);
}
@@ -0,0 +1,33 @@
interface Props {
content: string;
scrollRatio?: number; // 0-1, where the viewport is
visibleRatio?: number; // 0-1, what fraction of content is visible
}
export function Minimap({ content, scrollRatio = 0, visibleRatio = 1 }: Props) {
const lines = content.split('\n');
// Compute viewport position in the minimap
const viewportTop = Math.round(scrollRatio * 100);
const viewportHeight = Math.round(visibleRatio * 100);
return (
<div
data-testid="minimap"
className="pointer-events-none absolute right-0 top-0 h-full w-[100px] overflow-hidden border-l border-border bg-card/30 p-1 font-mono text-[6px] leading-[8px] text-muted-foreground"
aria-hidden="true"
>
<pre className="w-full truncate whitespace-pre">
{lines.map((line, i) => (
<div key={i} data-testid="minimap-line">
{line || ' '}
</div>
))}
</pre>
<div
data-testid="minimap-viewport"
className="pointer-events-none absolute left-0 right-0 bg-brand/15"
style={{ top: `${viewportTop}%`, height: `${Math.max(viewportHeight, 5)}%` }}
/>
</div>
);
}
@@ -0,0 +1,55 @@
import { EditorView } from '@codemirror/view';
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
import { tags as t } from '@lezer/highlight';
const colors = {
background: '#ffffff',
foreground: '#0d0b09',
cursor: '#e5461f',
selection: 'rgba(229, 70, 31, 0.15)',
gutterBackground: '#fafbfc',
gutterForeground: '#7a7878',
lineHighlight: 'rgba(0, 0, 0, 0.04)',
};
export const lightTheme = EditorView.theme(
{
'&': {
backgroundColor: colors.background,
color: colors.foreground,
height: '100%',
},
'.cm-content': {
caretColor: colors.cursor,
fontFamily: 'JetBrains Mono, Fira Code, monospace',
fontSize: '13.5px',
},
'.cm-cursor, .cm-dropCursor': { borderLeftColor: colors.cursor },
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
backgroundColor: colors.selection,
},
'.cm-gutters': {
backgroundColor: colors.gutterBackground,
color: colors.gutterForeground,
border: 'none',
},
'.cm-activeLine': { backgroundColor: colors.lineHighlight },
'.cm-activeLineGutter': { backgroundColor: 'transparent', color: '#e5461f' },
},
{ dark: false }
);
const highlightStyle = HighlightStyle.define([
{ tag: t.heading1, color: '#0d0b09', fontWeight: '700' },
{ tag: t.heading2, color: '#0d0b09', fontWeight: '700' },
{ tag: t.heading3, color: '#464646', fontWeight: '600' },
{ tag: t.link, color: '#e5461f', textDecoration: 'underline' },
{ tag: t.url, color: '#e5461f' },
{ tag: t.emphasis, fontStyle: 'italic' },
{ tag: t.strong, fontWeight: '700' },
{ tag: t.monospace, color: '#c93a18' },
{ tag: t.list, color: '#0ea5e9' },
{ tag: t.quote, color: '#7a7878', fontStyle: 'italic' },
]);
export const lightHighlight = syntaxHighlighting(highlightStyle);
@@ -0,0 +1,70 @@
import { PanelLeft, PanelRight, Keyboard, Settings, Info } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { ThemeToggle } from '@/components/theme-toggle';
import { useAppStore } from '@/stores/app-store';
import { useCommandStore } from '@/stores/command-store';
export function AppHeader() {
const { sidebarVisible, previewVisible } = useAppStore();
const dispatch = useCommandStore((s) => s.dispatch);
return (
<header className="flex h-14 items-center justify-between border-b border-border bg-card/40 px-4 backdrop-blur">
<div className="flex items-center gap-3">
<div
className="h-7 w-7 rounded-md bg-gradient-to-br from-brand to-brand-dark shadow-[var(--shadow-glow-brand)]"
aria-label="MarkdownConverter logo"
/>
<h1 className="font-display text-lg font-bold tracking-tight">MarkdownConverter</h1>
</div>
<div className="flex items-center gap-1">
<Button
variant="ghost"
size="icon"
aria-label="Toggle sidebar"
aria-pressed={sidebarVisible}
data-testid="header-toggle-sidebar"
onClick={() => dispatch('view.toggleSidebar')}
>
<PanelLeft className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Toggle preview"
aria-pressed={previewVisible}
data-testid="header-toggle-preview"
onClick={() => dispatch('view.togglePreview')}
>
<PanelRight className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Keyboard shortcuts"
data-testid="header-shortcuts"
onClick={() => dispatch('shortcuts.show')}
>
<Keyboard className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Settings"
onClick={() => dispatch('settings.open')}
>
<Settings className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="About"
onClick={() => dispatch('help.about')}
>
<Info className="h-4 w-4" />
</Button>
<ThemeToggle />
</div>
</header>
);
}
@@ -0,0 +1,96 @@
import { AppHeader } from './AppHeader';
import { TabBar } from './TabBar';
import { Toolbar } from './Toolbar';
import { Breadcrumb } from './Breadcrumb';
import { StatusBar } from './StatusBar';
import { EditorPane } from '@/components/editor/EditorPane';
import { PreviewPane } from '@/components/preview/PreviewPane';
import { Sidebar } from '@/components/sidebar/Sidebar';
import { useAppStore } from '@/stores/app-store';
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
import { useFileShortcuts } from '@/hooks/use-file-shortcuts';
import { useRestoreLastFolder } from '@/hooks/use-restore-last-folder';
import {
useRegisterMenuCommands,
useBridgeNativeMenu,
} from '@/lib/commands/register-menu-commands';
import { useZenMode } from '@/hooks/use-zen-mode';
export function AppShell() {
useFileShortcuts();
useRestoreLastFolder();
useRegisterMenuCommands();
useBridgeNativeMenu();
useZenMode();
const { sidebarVisible, previewVisible, paneSizes, setPaneSizes } = useAppStore();
const zenMode = useAppStore((s) => s.zenMode);
if (zenMode) {
return (
<main className="h-screen w-screen overflow-hidden bg-background">
<ResizablePanelGroup
direction="horizontal"
onLayoutChange={(sizes) =>
setPaneSizes({ sidebar: 0, editor: sizes[0], preview: sizes[1] })
}
>
<ResizablePanel defaultSize={previewVisible ? 50 : 100} minSize={20}>
<section className="h-full bg-background">
<EditorPane />
</section>
</ResizablePanel>
{previewVisible && (
<>
<ResizableHandle />
<ResizablePanel defaultSize={50} minSize={20}>
<section className="h-full border-l border-border bg-card/10">
<PreviewPane />
</section>
</ResizablePanel>
</>
)}
</ResizablePanelGroup>
</main>
);
}
return (
<div className="flex h-screen flex-col bg-background text-foreground">
<AppHeader />
<TabBar />
<Toolbar />
<Breadcrumb />
<main className="flex-1 overflow-hidden">
<ResizablePanelGroup
direction="horizontal"
onLayoutChange={(sizes) =>
setPaneSizes({ sidebar: sizes[0], editor: sizes[1], preview: sizes[2] })
}
>
{sidebarVisible && (
<>
<ResizablePanel defaultSize={paneSizes.sidebar} minSize={15} maxSize={40}>
<aside className="h-full border-r border-border bg-card/10 p-3 text-sm text-muted-foreground">
<Sidebar />
</aside>
</ResizablePanel>
<ResizableHandle />
</>
)}
<ResizablePanel defaultSize={previewVisible ? paneSizes.editor : 100} minSize={20}>
<EditorPane />
</ResizablePanel>
{previewVisible && (
<>
<ResizableHandle />
<ResizablePanel defaultSize={paneSizes.preview} minSize={20}>
<PreviewPane />
</ResizablePanel>
</>
)}
</ResizablePanelGroup>
</main>
<StatusBar />
</div>
);
}
@@ -0,0 +1,37 @@
import { useFileStore } from '@/stores/file-store';
import { useEditorStore } from '@/stores/editor-store';
import { useSettingsStore } from '@/stores/settings-store';
import { useCommandStore } from '@/stores/command-store';
import { extractHeadings } from '@/lib/headings';
export function Breadcrumb() {
const activeTabId = useFileStore((s) => s.activeTabId);
const openTabs = useFileStore((s) => s.openTabs);
const buffer = useEditorStore((s) => (activeTabId ? s.buffers.get(activeTabId) : undefined));
const showSymbols = useSettingsStore((s) => s.breadcrumbSymbols);
const dispatch = useCommandStore((s) => s.dispatch);
const tab = activeTabId ? openTabs.find((t) => t.id === activeTabId) : null;
const headings = showSymbols && buffer ? extractHeadings(buffer.content).slice(0, 3) : [];
return (
<nav
aria-label="File path"
className="flex h-7 items-center gap-1 border-b border-border bg-card/10 px-3 text-xs text-muted-foreground"
>
<span className="truncate">{tab ? tab.title : 'No file selected'}</span>
{headings.map((h, i) => (
<button
key={i}
onClick={() => dispatch('editor.gotoHeading', h.line)}
className="flex items-center gap-1 hover:text-foreground"
>
<span aria-hidden="true"></span>
<span className="truncate">
{'#'.repeat(h.level)} {h.text}
</span>
</button>
))}
</nav>
);
}
@@ -0,0 +1,27 @@
import { useEditorStore } from '@/stores/editor-store';
function countWords(text: string): number {
return text.trim().length === 0 ? 0 : text.trim().split(/\s+/).length;
}
export function StatusBar() {
const { buffers, activeId } = useEditorStore();
const buf = activeId ? buffers.get(activeId) : null;
const wordCount = buf ? countWords(buf.content) : 0;
const cursor = buf?.cursor ?? { line: 1, column: 1 };
return (
<footer className="flex h-7 items-center justify-between border-t border-border bg-card/20 px-3 text-xs text-muted-foreground">
<div className="flex items-center gap-4">
<span>{wordCount} words</span>
<span>UTF-8</span>
</div>
<div className="flex items-center gap-4">
<span>
Ln {cursor.line}, Col {cursor.column}
</span>
<span>Markdown</span>
</div>
</footer>
);
}
+123
View File
@@ -0,0 +1,123 @@
import { X } from 'lucide-react';
import {
DndContext,
PointerSensor,
useSensor,
useSensors,
closestCenter,
type DragEndEvent,
} from '@dnd-kit/core';
import { SortableContext, horizontalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { useFileStore, type OpenTab } from '@/stores/file-store';
import { cn } from '@/lib/utils';
function SortableTab({
tab,
isActive,
onSelect,
onClose,
}: {
tab: OpenTab;
isActive: boolean;
onSelect: (id: string) => void;
onClose: (id: string) => void;
}) {
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: tab.id,
});
const style = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.5 : 1,
};
return (
<div
ref={setNodeRef}
style={style}
{...attributes}
{...listeners}
role="tab"
aria-selected={isActive}
aria-current={isActive ? 'page' : undefined}
data-testid={`tab-${tab.id}`}
className={cn(
'group flex h-full cursor-pointer select-none items-center gap-1 border-r border-border px-3 text-xs transition-colors',
isActive
? 'bg-accent text-accent-foreground'
: 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
)}
onClick={() => onSelect(tab.id)}
>
{tab.dirty && (
<span
className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary"
aria-label="Unsaved changes"
/>
)}
<span className="max-w-[120px] truncate">{tab.title}</span>
<button
aria-label={`Close ${tab.title}`}
className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center rounded opacity-0 group-hover:opacity-100 hover:bg-muted-foreground/20 transition-opacity"
onPointerDown={(e) => e.stopPropagation()}
onClick={(e) => {
e.stopPropagation();
onClose(tab.id);
}}
>
<X className="h-3 w-3" />
</button>
</div>
);
}
export function TabBar() {
const openTabs = useFileStore((s) => s.openTabs);
const activeTabId = useFileStore((s) => s.activeTabId);
const setActiveTab = useFileStore((s) => s.setActiveTab);
const closeTab = useFileStore((s) => s.closeTab);
const reorderTabs = useFileStore((s) => s.reorderTabs);
// Require a small drag distance before activating — so a click on the tab
// body still triggers `onClick` (dnd-kit's PointerSensor default is 0).
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
if (openTabs.length === 0) {
return (
<div className="flex h-9 items-center border-b border-border bg-card/20 px-3 text-xs text-muted-foreground">
<span>No files open</span>
</div>
);
}
function handleDragEnd(e: DragEndEvent) {
const { active, over } = e;
if (!over || active.id === over.id) return;
const fromIndex = openTabs.findIndex((t) => t.id === active.id);
const toIndex = openTabs.findIndex((t) => t.id === over.id);
if (fromIndex === -1 || toIndex === -1) return;
reorderTabs(fromIndex, toIndex);
}
return (
<div className="flex h-9 items-center border-b border-border bg-card/20 overflow-x-auto">
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext items={openTabs.map((t) => t.id)} strategy={horizontalListSortingStrategy}>
<div className="flex h-full items-center px-1">
{openTabs.map((tab) => (
<SortableTab
key={tab.id}
tab={tab}
isActive={tab.id === activeTabId}
onSelect={setActiveTab}
onClose={closeTab}
/>
))}
</div>
</SortableContext>
</DndContext>
</div>
);
}
+137
View File
@@ -0,0 +1,137 @@
import {
Bold,
Italic,
List,
ListOrdered,
Code,
Link as LinkIcon,
PanelLeft,
PanelRight,
Save,
FolderOpen,
FileText,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useCommandStore } from '@/stores/command-store';
import { useAppStore } from '@/stores/app-store';
export function Toolbar() {
const dispatch = useCommandStore((s) => s.dispatch);
const { sidebarVisible, previewVisible } = useAppStore();
return (
<div
role="toolbar"
aria-label="Main toolbar"
className="flex h-10 items-center gap-1 border-b border-border bg-card/10 px-3"
>
<Button
variant="ghost"
size="icon"
aria-label="Open file"
data-testid="toolbar-open-file"
onClick={() => dispatch('file.open')}
>
<FileText className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Open folder"
data-testid="toolbar-open-folder"
onClick={() => dispatch('file.openFolder')}
>
<FolderOpen className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Save"
data-testid="toolbar-save"
onClick={() => dispatch('file.save')}
>
<Save className="h-4 w-4" />
</Button>
<div className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
<Button
variant="ghost"
size="icon"
aria-label="Toggle sidebar"
aria-pressed={sidebarVisible}
data-testid="toolbar-toggle-sidebar"
onClick={() => dispatch('view.toggleSidebar')}
>
<PanelLeft className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Toggle preview"
aria-pressed={previewVisible}
data-testid="toolbar-toggle-preview"
onClick={() => dispatch('view.togglePreview')}
>
<PanelRight className="h-4 w-4" />
</Button>
<div className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
<Button
variant="ghost"
size="icon"
aria-label="Bold"
data-testid="toolbar-bold"
onClick={() => dispatch('editor.bold')}
>
<Bold className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Italic"
data-testid="toolbar-italic"
onClick={() => dispatch('editor.italic')}
>
<Italic className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Unordered list"
data-testid="toolbar-list-unordered"
onClick={() => dispatch('editor.list.unordered')}
>
<List className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Ordered list"
data-testid="toolbar-list-ordered"
onClick={() => dispatch('editor.list.ordered')}
>
<ListOrdered className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Inline code"
data-testid="toolbar-code"
onClick={() => dispatch('editor.code')}
>
<Code className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Insert link"
data-testid="toolbar-link"
onClick={() => dispatch('editor.link')}
>
<LinkIcon className="h-4 w-4" />
</Button>
</div>
);
}
@@ -0,0 +1,56 @@
import { useEffect, useState } from 'react';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { ipc } from '@/lib/ipc';
import { useAppStore } from '@/stores/app-store';
export function AboutDialog() {
const closeModal = useAppStore((s) => s.closeModal);
const isOpen = useAppStore((s) => s.modal.kind) === 'about';
const [version, setVersion] = useState<string>('…');
useEffect(() => {
ipc.app.getVersion().then((r) => {
if (r.ok && typeof r.data === 'string') setVersion(r.data);
});
}, []);
return (
<Dialog open={isOpen} onOpenChange={(o) => !o && closeModal()}>
<DialogContent>
<DialogHeader>
<DialogTitle>About MarkdownConverter</DialogTitle>
<DialogDescription>
Professional Markdown editor and universal file converter.
</DialogDescription>
</DialogHeader>
<div className="space-y-2 text-sm text-muted-foreground">
<p>Version: {version}</p>
<p>
<a
href="https://github.com/amitwh/markdown-converter"
className="text-brand hover:underline"
onClick={(e) => {
e.preventDefault();
ipc.app.openExternal('https://github.com/amitwh/markdown-converter');
}}
>
GitHub repository
</a>
</p>
<p className="text-xs">© ConcreteInfo. Licensed under MIT.</p>
</div>
<DialogFooter>
<Button onClick={closeModal}>Close</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}

Some files were not shown because too many files have changed in this diff Show More