Compare commits

..
53 Commits
Author SHA1 Message Date
amitwhandClaude e1e0072eea Remove table header background styling (v1.7.6)
Removed custom background colors from table headers to improve preview appearance and maintain consistency with normal theming.

## Changes
- Removed background-color from default theme table headers (was #f6f8fa)
- Removed dark theme table header background styling block
- Headers retain font-weight: 600 for visual distinction
- Table borders and alternating row colors remain intact

## User Request
User feedback: "remove the theming of table headers, it looks bad. Keep normal theming of preview"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 18:54:54 +05:30
amitwhandClaude 1b2afb5f15 Fix double-click file opening in installed Windows app (v1.7.5)
This fix addresses the critical issue where double-clicking .md files would not open them in the installed PanConverter application on Windows.

## Root Cause
When a user double-clicks a file and the app is already running, Windows tries to launch a SECOND INSTANCE with the file path. Without single-instance lock handling, that second instance would exit and the first instance would never receive the file path.

## Changes
- Added single-instance lock handling in main.js (lines 52-85)
- Implemented second-instance event handler to capture file paths
- Focus existing window when second instance is attempted
- Pass file path to existing instance using openFileFromPath()
- Properly handle rendererReady state for file opening

## Testing
- Works in development mode (npm start)
- Should now work correctly in installed Windows app with double-click
- Maintains single instance behavior across all file opening methods

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 13:46:48 +05:30
amitwhandClaude c811af9d48 Remove debug console.log statements (v1.7.4 cleanup)
Cleaned up debug logging from file opening investigation:
- Removed console.log from command line arg processing
- Removed console.log from renderer-ready handler
- Removed console.log from openFileFromPath function
- Removed console.log from file-opened IPC handler

The double-click file opening fix is confirmed working.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 13:13:27 +05:30
amitwhandClaude a6e91b7403 Fix critical double-click file opening bug (v1.7.4)
CRITICAL BUG FIX: Files opened via double-click were not rendering in the application.

Root Cause:
- The openFileFromPath() function was sending IPC 'file-opened' message WITHOUT checking if rendererReady was true
- When files were double-clicked before renderer initialization, the IPC message was sent but lost
- The comment "Always try to send, the renderer will handle it when ready" was incorrect

The Fix (src/main.js:1586):
- Added rendererReady check to the conditional: if (mainWindow && mainWindow.webContents && rendererReady)
- Now properly stores file in app.pendingFile when renderer is not ready
- File is opened correctly when renderer-ready signal arrives

Flow:
1. File double-clicked → openFileFromPath() called
2. If renderer NOT ready → store in app.pendingFile
3. When renderer sends 'renderer-ready' → openFileFromPath(app.pendingFile) is called
4. This time renderer IS ready → file opens successfully

Version: 1.7.4
- Updated package.json version to 1.7.4
- Updated About dialog version to 1.7.4

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 12:57:52 +05:30
amitwhandClaude a44b13d2fb Version 1.7.3 - Bug Fixes and ConcreteInfo Themes
Fixed critical file opening bug and theme visibility issues, plus added ConcreteInfo branded themes.

Bug Fixes:
• Fixed double-click file opening race condition
  - Removed setTimeout logic from did-finish-load handler
  - Now relies solely on renderer-ready IPC signal for proper initialization
  - Files from Windows Explorer now open correctly on first attempt

• Fixed theme preview text visibility for 14 themes
  - Added proper .pane:last-child background overrides
  - Fixed dark text on dark backgrounds and light text on light backgrounds
  - Affected themes: Dracula, Nord, One Dark, Atom One Light, Material,
    Gruvbox Dark/Light, Tokyo Night, Palenight, Ayu Dark/Light/Mirage,
    Oceanic Next, Cobalt2

New Features:
• Added 3 ConcreteInfo branded themes
  - Concrete Dark: Very dark theme with orange accents
  - Concrete Light: Light theme with orange accents
  - Concrete Warm: Mid-tone gray theme with orange accents
  - All themes use ConcreteInfo brand colors: #0d0b09, #464646, #9a9696, #e3e3e3, #e5461f

• Updated theme count from 19 to 22 themes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 12:48:42 +05:30
amitwhandClaude 015446bff3 Version 1.7.2 - Enhanced Themes & Bug Fixes
## New Features
- Added 14 beautiful new themes (Dracula, Nord, One Dark, Atom One Light, Material, Gruvbox Dark/Light, Tokyo Night, Palenight, Ayu Dark/Light/Mirage, Oceanic Next, Cobalt2)
- Total of 19 professionally-designed themes now available
- All themes fully support glassmorphism effects from v1.7.1

## Bug Fixes
- Fixed undo/redo menu integration - connected Edit menu to custom undo/redo functionality
- Added IPC event listeners for proper keyboard shortcut support (Ctrl+Z, Ctrl+Shift+Z)

## Technical Improvements
- Complete CSS styling for all UI elements per theme (tabs, toolbar, editor, preview, status bar)
- Theme-aware color schemes for syntax highlighting
- Comprehensive CSS implementation (965+ lines for new themes)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 12:07:28 +05:30
amitwhandClaude 9f15a02511 Update version to 1.7.1 and document UI improvements
- Updated version from 1.7.0 to 1.7.1 in package.json
- Updated About dialog version in main.js
- Added modern glassmorphism UI as first feature
- Updated CLAUDE.md with v1.7.1 documentation
- Documented glassmorphism design system
- Listed all modern UI features and technical details
- Updated last modified date to October 11, 2025

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 11:47:38 +05:30
amitwhandClaude 9799b95cea Add modern UI with glassmorphism and gradients (v1.7.1)
- Created comprehensive modern CSS design system
- Glassmorphism effects with backdrop-filter blur
- Animated purple-blue gradient background
- Modern Inter and JetBrains Mono typography
- Smooth transitions and hover effects
- Enhanced tab, button, and dialog styling
- Custom scrollbars and progress bars
- CSS custom properties for consistent theming

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 11:43:49 +05:30
amitwhandClaude 83150eea88 Fix double-click file opening with did-finish-load event
- Added did-finish-load event listener to ensure window is fully loaded
- Added 500ms delay to allow TabManager initialization
- Improved openFileFromPath function with better logging
- Fixed race condition where files opened via double-click weren't rendering

Fixes #file-association-rendering-issue

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 11:39:57 +05:30
amitwhandClaude 9b2b94ad74 Version 1.7.0 - Comprehensive PDF Editor & Universal File Converter
Major new features:
• Complete PDF Editor with 10 operations (merge, split, compress, rotate, delete, reorder, watermark, encrypt, decrypt, permissions)
• Universal File Converter supporting LibreOffice, ImageMagick, FFmpeg, and Pandoc
• Single file and batch folder conversion capabilities
• Advanced options for all conversion tools

PDF Editor Features:
• Merge multiple PDFs into one document
• Split PDFs by page ranges, intervals, or file size
• Compress PDFs to reduce file size
• Rotate pages at 90°, 180°, or 270°
• Delete unwanted pages from PDFs
• Reorder pages in any custom order
• Add text watermarks with customizable position, size, color, and opacity
• Password protect PDFs with 128-bit or 256-bit encryption
• Remove password protection from PDFs
• Set granular document permissions

Universal File Converter Features:
• LibreOffice: DOCX, PDF, ODT, RTF, TXT, HTML, XLSX, PPTX conversions
• ImageMagick: Image format conversions with quality, DPI, resize, compression options
• FFmpeg: Video/audio conversions with codec, bitrate, preset, framerate options
• Pandoc: Document markup conversions with advanced options
• Batch folder processing with recursive subfolder support
• 100% offline, open-source, no API keys required

Technical Implementation:
• Uses pdf-lib v1.17.1 for all PDF operations
• Full async/await implementation for optimal performance
• Comprehensive error handling and user feedback
• Progress indicators for long-running operations
• Page range parsing and validation
• RGB color conversion for watermarks

Files modified:
• src/main.js: Added 500+ lines of PDF operation functions and IPC handlers
• src/renderer.js: Added 480+ lines of UI event handlers and dialog management
• src/index.html: Added 600+ lines of comprehensive UI dialogs
• CLAUDE.md: Updated documentation with v1.7.0 features
• package.json: Version bump to 1.7.0

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-11 11:22:53 +05:30
amitwhandClaude 17c32f0b7d Fix file association double-click rendering (v1.6.1)
Fixed issue where files opened via double-click were not rendering properly. Added proper wait for renderer load state before sending file data.

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-05 20:34:28 +05:30
amitwhandClaude b93129bc44 Version 1.6.0 - Enhanced Markdown Editor & ConvertAPI Integration
New Features:

Enhanced Markdown Toolbar

- Added strikethrough button

- Added code block button

- Added horizontal rule button

Fixed Find & Replace

- Fixed focus issue

- Visual highlighting with text selection

- Smart scroll to matches

Fixed Line Numbers

- Corrected line counting

- Added scroll synchronization

ConvertAPI Integration

- Cloud conversion support (200+ formats)

- Secure API key storage

- Real-time conversion status

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-05 20:26:47 +05:30
amitwhandClaude b23e60a704 Fix critical bugs: real-time preview, toolbar functions, and file opening
Version 1.5.7 - Bug Fix Release

Fixed Issues:
- Real-time preview updates: Preview pane now updates instantly while typing
- Toolbar markdown functions: All toolbar buttons now work correctly
  * Bold, Italic, Code, Link text wrapping
  * Heading, List, Quote line prefixes
  * Table insertion
- File opening: Fixed file loading via menu and double-click association
- Cross-platform path handling for Windows backslashes

Technical Changes:
- Added direct input event listeners to editor textareas
- Implemented wrapSelection() and insertAtLineStart() helper methods
- Fixed IPC communication between main and renderer processes
- Improved event delegation for multi-tab support

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-05 19:56:31 +05:30
amitwh c559b34f3e Fix build issues: correct icon file, add icon config, disable signing
- Replace corrupted icon.ico with icon-proper.ico
- Add missing icon configuration to package.json build settings
- Disable signAndEditExecutable to avoid signing certificate requirement
- Installer now builds properly at 86MB instead of 190KB
2025-09-22 00:54:17 +05:30
amitwh a780f2984a Bump version to 1.5.4 for DOCX export fix release 2025-09-22 00:41:05 +05:30
amitwh 0c9961d412 Fix DOCX export functionality
- Enhanced getPandocPath() to check common Windows installation locations
- Improved Pandoc path detection for AppData/Local/Pandoc installation
- Enhanced error reporting with more detailed feedback for export failures
- Added better logging for Pandoc command execution and output
- Fixed issue where DOCX exports would fail silently when Pandoc wasn't in PATH
- Now properly detects Pandoc in standard Windows installation locations
2025-09-22 00:40:27 +05:30
amitwh ed7a80f99e Bump version to 1.5.3 for bug fix release 2025-09-22 00:24:45 +05:30
amitwh 18b7d82610 Fix critical bugs: file loading, advanced export dialog, and XLSX export
- Add XLSX export functionality alongside CSV with proper menu option
- Fix advanced export dialog visibility with improved CSS and scroll behavior
- Verify file loading mechanism works correctly for double-click association
- Improve export dialog layout with better height and positioning
- Update export-spreadsheet IPC handler to support both CSV and XLSX formats
2025-09-22 00:24:00 +05:30
amitwh cd1f7ac37d v1.5.2: Remove custom icons, use default Electron icon
- Removed all custom icon references from build configuration
- Using default Electron icon for consistent, standard appearance
- Updated to version 1.5.2
- Rebuilt NSIS installers with default iconography
2025-09-22 00:03:13 +05:30
amitwh 7b8a94150a Merge windows branch with enhanced export functionality and CLI support
- Combined advanced export options with built-in fallbacks
- Integrated Windows context menu installation scripts
- Added CLI conversion functionality
- Enhanced error handling for pandoc availability
- Updated to version 1.5.0 with comprehensive feature set
- Resolved merge conflicts preserving all functionality
2025-09-21 23:01:52 +05:30
amitwh 2a12a1b034 Fix export functionality and improve Windows build
- Fixed export function issues with comprehensive pandoc detection
- Added built-in HTML and PDF export fallbacks (no pandoc required)
- Improved error handling with clear user messages
- Enhanced code quality with optional chaining and better error handling
- Fixed NSIS installer script issues for Windows build
- Added comprehensive logging and debugging for export process
- Created test files and documentation for export functionality
- Successfully builds Windows release with proper XLSX support

Resolves export failures and provides robust fallback mechanisms.
2025-09-21 22:56:23 +05:30
amitwh 2bc3989c00 Create GEMINI.md 2025-09-21 21:47:12 +05:30
amitwhandClaude f50ffe8ed2 Release v1.5.0: Enhanced Features and Open Source Compatibility
Major improvements including optional advanced export options, removed proprietary dependencies for better open-source compatibility, and comprehensive new features for enhanced user experience.

🔧 Export Functions & Advanced Options:
• Fixed export function issues after advanced options integration
• Added optional advanced export checkbox (unchecked by default)
• Clean UI separation between simple and advanced export workflows

🏗️ Open Source Compatibility:
• Removed bundled Pandoc binaries - requires system installation
• Replaced proprietary XLSX with open-source CSV export
• Eliminated licensing concerns with bundled dependencies

 Advanced User Experience Features:
• Auto-save system with visual indicators every 30 seconds
• Enhanced document statistics (lines, paragraphs, sentences, reading time)
• Recent files menu with persistent storage (last 10 files)
• Mathematical expression support with KaTeX rendering
• Improved export dialog with better user experience

📚 Updated documentation with new dependency requirements and features

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-15 16:36:23 +05:30
amitwhandClaude 5376bddc59 Release v1.4.0: Advanced Export Options and Batch Conversion
Major Features:
• Fixed file association loading issue with proper timing
• Advanced export options dialog with templates and metadata support
• Batch file conversion system with progress tracking
• Enhanced UI with professional modal dialogs

Technical Improvements:
• Fixed renderer initialization timing for file association
• Added comprehensive Pandoc options support (templates, metadata, variables)
• Implemented recursive folder processing for batch operations
• Enhanced error handling and user feedback systems
• Theme-aware styling for all new components

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-14 22:42:53 +05:30
amitwhandClaude 978e642f0c Update version to 1.4.0 with context menu integration
- Bump version to 1.4.0 for context menu feature release
- Add context menu integration to feature list in About dialog
- Include command-line interface in feature highlights

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-09 01:05:01 +05:30
amitwhandClaude 00749ac52c Add Windows Explorer context menu integration
- Add context menu entries for all supported file types
- Implement CLI interface with --convert and --convert-to commands
- Create installation/uninstallation scripts (registry, PowerShell, batch)
- Add NSIS installer integration for automatic context menu setup
- Support direct conversion from right-click menu
- Include comprehensive documentation and usage instructions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-09 01:03:36 +05:30
amitwhandClaude d3b67b1388 Bump version to v1.3.7
- Updated package.json version to 1.3.7
- Updated version in About dialog to 1.3.7
- Prepared for new release with Linux packages

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-01 23:34:38 +05:30
amitwh 35310beccf Add Claude settings 2025-09-01 23:14:36 +05:30
amitwh e1f0aafa88 Update version to 1.3.3 and add font size adjustment features 2025-09-01 23:13:29 +05:30
amitwhandClaude aac496923e Add font size adjustment menu and fix theme styling
Features:
• Added Font Size menu in View with increase/decrease/reset options
• Keyboard shortcuts: Ctrl+Shift+Plus/Minus/0 for font adjustment
• Font size persists between sessions using localStorage
• Font sizes adjustable from 10px to 24px

Theme Fixes:
• Fixed missing Monokai theme styles for tabs and editor
• Added complete tab styling for Solarized theme
• Added complete tab styling for GitHub theme
• All themes now have consistent tab bar appearance

Other Changes:
• Updated CLAUDE.md with v1.3.x features documentation
• Version bumped to 1.3.4

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-01 21:41:28 +05:30
amitwhandClaude 256f944b88 Increase editor and preview font sizes to 15px
Enhanced font sizes for improved readability:
• Editor font size increased from 14px to 15px
• Preview font size set to 15px for both #preview and .preview-content
• Better visual experience across all themes and content types

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-01 21:30:57 +05:30
amitwh dbe57d2fad Fix v1.3.2: Restore proper preview text spacing and typography
- Restored ideal preview text spacing from earlier versions
- Extended all preview styles to work with new .preview-content class
- Added proper margins, padding, and line-height for readability
- Updated theme support for all preview elements across all themes
- Improved typography with balanced font size and spacing
- Fixed double padding issue with better container structure
- Enhanced readability with proper heading margins and paragraph spacing
- Updated to version 1.3.2 with improved preview typography
2025-09-01 21:24:40 +05:30
amitwh 9a45849003 Update README.md for v1.3.1 release 2025-09-01 21:08:29 +05:30
amitwh dfb603c2ea Fix v1.3.1: File associations and 50/50 pane layout
- Enhanced file association handling for double-clicking .md files
- Added proper file associations in package.json build config
- Fixed preview/source pane layout to be equally distributed 50/50
- Updated CSS for tab-content structure with proper flex layout
- Added theme support for new pane selectors
- Improved command line argument processing for file opening
- Updated version to 1.3.1 with file association feature
2025-09-01 21:05:01 +05:30
amitwh fda173d9a1 Merge branch 'master' into macos 2025-09-01 20:58:00 +05:30
amitwh ddababf284 Update README.md for v1.3.0 with tabbed interface and enhanced PDF export features 2025-09-01 20:54:47 +05:30
amitwh 376fa00b08 Merge branch 'master' into windows 2025-09-01 20:53:36 +05:30
amitwh 5cbcfa466d Merge branch 'master' into macos 2025-09-01 20:53:29 +05:30
amitwh 328451f88d Major v1.3.0 update: Fix PDF export, file associations, remove converter menu, and implement tabbed interface
- Enhanced PDF export with multiple LaTeX engine fallbacks
- Fixed file association and direct file opening from OS
- Removed redundant converter menu, moved import to File menu
- Implemented comprehensive tabbed interface for multiple files
- Added tab management with keyboard shortcuts (Ctrl+N, Ctrl+W, Ctrl+Tab)
- Enhanced UI with tab bar and improved navigation
- Updated to version 1.3.0 with new features
- Improved main process and renderer architecture for multi-file support
2025-09-01 20:53:17 +05:30
amitwh 1b10a39b15 Update to v1.2.1 with comprehensive editor enhancements 2025-09-01 20:36:57 +05:30
amitwh 7fe53b4b9c Merge master with comprehensive v1.2.0 editor enhancements 2025-09-01 20:29:29 +05:30
amitwh edb163eab4 Merge master with comprehensive v1.2.0 editor enhancements 2025-09-01 20:29:13 +05:30
amitwh 7131d1a38e Merge master with comprehensive v1.2.0 editor enhancements 2025-09-01 20:28:49 +05:30
amitwhandClaude 6d3813e5e9 Major v1.2.0 editor enhancements
- Add comprehensive Find & Replace with match highlighting
- Add toggleable line numbers with theme support
- Implement full undo/redo functionality with keyboard shortcuts
- Add smart auto-indentation for lists and code blocks
- Enhanced keyboard shortcuts for productivity
- Advanced tab handling for indentation/outdentation
- Updated About dialog with v1.2.0 and complete feature list
- Add Find & Replace to Edit menu
- Updated README.md with comprehensive feature documentation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-01 20:26:58 +05:30
amitwh bfe362245d Update README.md with v1.2.0 features and remove CLAUDE.md 2025-09-01 20:08:14 +05:30
amitwh 0d21ddbf15 Update README.md with v1.2.0 features and remove CLAUDE.md 2025-09-01 20:07:47 +05:30
amitwh 7b5165bcb1 Update README.md with v1.2.0 features and remove CLAUDE.md 2025-09-01 20:07:13 +05:30
amitwh 5c5cffed83 Update README.md with v1.2.0 features and remove CLAUDE.md 2025-09-01 20:06:31 +05:30
amitwh becfec5ae6 Update About dialog to version 1.2.0 with new features list 2025-09-01 20:03:36 +05:30
amitwh bd38c5342d Update About dialog to version 1.2.0 with new features list 2025-09-01 20:03:08 +05:30
amitwh f3e829ca63 Update About dialog to version 1.2.0 with new features list 2025-09-01 20:02:44 +05:30
amitwhandClaude b0a96f680a Release v1.2.0: Major feature additions
- Add PowerPoint export (PPTX/ODP) with slide-level formatting
- Add comprehensive document conversion menu with import/export
- Add interactive table creation helper in markdown editor
- Update documentation with all new features and version history
- Improve menu organization for better user experience

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-01 19:54:19 +05:30
amitwh a6da95b057 Add spreadsheet export, update author info, rename to PanConverter
- Added Excel (XLS/XLSX) and ODS export functionality
- Updated author to Amit Haridas (amit.wh@gmail.com)
- Renamed app from 'Pan Converter' to 'PanConverter'
- Version bump to 1.1.0
2025-09-01 19:44:48 +05:30
328 changed files with 10172 additions and 62818 deletions
+33
View File
@@ -0,0 +1,33 @@
{
"permissions": {
"allow": [
"Bash(git checkout:*)",
"Bash(npm install)",
"Bash(npm run build:*)",
"Bash(rmdir:*)",
"Bash(powershell:*)",
"Bash(npx electron-builder:*)",
"Bash(dir dist)",
"Bash(git tag:*)",
"Bash(git push:*)",
"Bash(gh release create:*)",
"Bash(gh auth:*)",
"Bash(gh release delete:*)",
"Bash(gh release list:*)",
"Bash(gh release upload:*)",
"Bash(npm install:*)",
"Bash(npm uninstall:*)",
"Bash(git add:*)",
"Bash(git commit:*)",
"Bash(npm start)",
"Read(//h/**)",
"Bash(cd:*)",
"Bash(npm run build:win-unsigned:*)",
"Bash(dir:*)",
"Bash(git merge:*)",
"Bash(timeout:*)",
"Bash(findstr:*)"
],
"deny": []
}
}
+10
View File
@@ -0,0 +1,10 @@
name: New MCP server
version: 0.0.1
schema: v1
mcpServers:
- name: New MCP server
command: npx
args:
- -y
- <your-mcp-server>
env: {}
-28
View File
@@ -1,28 +0,0 @@
name: CI
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
test:
runs-on: ubuntu-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: Run tests
run: npm test
- name: Run linter
run: npm run lint
-122
View File
@@ -1,122 +0,0 @@
name: Release
on:
push:
tags: ['v*']
permissions:
contents: write
jobs:
build-linux:
runs-on: ubuntu-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 Linux packages
run: npm run build:linux-ci -- --publish=never
- name: Upload Linux artifacts
uses: actions/upload-artifact@v4
with:
name: linux-artifacts
path: |
dist/*.deb
dist/*.AppImage
dist/*.snap
dist/*.rpm
retention-days: 5
build-windows:
runs-on: windows-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: Decode certificate (if available)
if: ${{ env.CSC_LINK_BASE64 != '' }}
shell: pwsh
env:
CSC_LINK_BASE64: ${{ secrets.CSC_LINK_BASE64 }}
run: |
$bytes = [Convert]::FromBase64String("$env:CSC_LINK_BASE64")
[IO.File]::WriteAllBytes("${{ github.workspace }}\code-signing-cert.pfx", $bytes)
echo "CERT_AVAILABLE=true" >> $env:GITHUB_ENV
- name: Build Windows packages (signed)
if: ${{ env.CERT_AVAILABLE == 'true' }}
env:
CSC_LINK: code-signing-cert.pfx
CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
run: npm run build:win-signed -- --publish=never
- name: Build Windows packages (unsigned)
if: ${{ env.CERT_AVAILABLE != 'true' }}
env:
CSC_IDENTITY_AUTO_DISCOVERY: 'false'
run: npm run build:win-unsigned -- --publish=never
- name: Upload Windows artifacts
uses: actions/upload-artifact@v4
with:
name: windows-artifacts
path: |
dist/*.exe
dist/*.zip
retention-days: 5
release:
needs: [build-linux, build-windows]
if: always()
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Download Linux artifacts
uses: actions/download-artifact@v4
continue-on-error: true
with:
name: linux-artifacts
path: dist
- name: Download Windows artifacts
uses: actions/download-artifact@v4
continue-on-error: true
with:
name: windows-artifacts
path: dist
- name: Create GitHub Release
uses: softprops/action-gh-release@v2
with:
generate_release_notes: true
files: dist/*
+2 -32
View File
@@ -8,41 +8,11 @@ Thumbs.db
*.swp
*.swo
*~
.vscode/*
!.vscode/launch.json
.vscode/
.idea/
*.iml
out/
.cache/
.npm/
.electron/
# package-lock.json is intentionally tracked for reproducible CI builds
# Downloaded tool binaries (fetched at build time via scripts/download-tools.js)
bin/
# Code signing certificates — never commit private keys
*.pfx
*.p12
# Screenshots and temp files
*.png.bak
Screen.png
dark.png
light.png
pdf.png
uvmodal.png
nul
*.tmp
# Development screenshots
pdf\ modal.png
# Claude/AI development files
.claude/
CLAUDE.md
agents.md
coverage/
# Superpowers brainstorm artifacts
.superpowers/
package-lock.json
-11
View File
@@ -1,11 +0,0 @@
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always",
"printWidth": 100,
"endOfLine": "auto"
}
@@ -1,469 +0,0 @@
# Security Assessment Report: MarkdownConverter v4.0.0
**Assessment Date:** 2026-03-15
**Application:** MarkdownConverter - Electron-based Markdown editor and document converter
**Target Version:** 4.0.0
**Assessor:** Security Audit Agent
---
## Executive Summary
This assessment identified **10 security findings** ranging from **Critical to Low severity**. The most significant concerns involve insecure Electron security configuration that could allow XSS attacks to escalate to full system access, arbitrary code execution via the REPL feature, and missing input validation on file operations.
| Severity | Count |
|----------|-------|
| Critical | 2 |
| High | 3 |
| Medium | 3 |
| Low | 2 |
---
## Vulnerability Findings
### CVE-MC-001: Insecure Electron Security Configuration (Critical)
**CVSS 3.1 Score: 9.6 (Critical)**
**CWE-265: CWE-1021: Improper Restriction of Renderers**
**Location:** `src/main.js` (lines 328-332)
```javascript
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
spellcheck: true
},
```
**Description:**
The main application window has `nodeIntegration: true` and `contextIsolation: false`, which is the most insecure Electron configuration. This allows the renderer process direct access to Node.js APIs, meaning any XSS vulnerability in the markdown rendering or external content could lead to full system compromise.
**Exploitability:**
- An attacker who can inject malicious JavaScript (via markdown files, XSS in preview, or compromised dependencies) gains immediate access to:
- Full file system read/write via `fs` module
- Command execution via `child_process`
- Network access via `net` module
- All system resources
**Attack Scenario:**
1. User opens a malicious markdown file containing embedded JavaScript
2. The JavaScript executes in the renderer with full Node.js access
3. Attacker can read sensitive files, execute commands, exfiltrate data
**Remediation:**
```javascript
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
sandbox: true,
preload: path.join(__dirname, 'preload.js')
}
```
**Note:** The preload.js file already implements a secure IPC bridge but it is not being utilized for the main window.
---
### CVE-MC-002: Arbitrary Code Execution via REPL Feature (Critical)
**CVSS 3.1 Score: 9.3 (Critical)**
**CWE-94: Improper Control of Generation of Code ('Code Injection')**
**Location:** `src/main.js` (lines 4369-4396)
**Description:**
The `execute-code` IPC handler allows execution of arbitrary Python and Bash scripts through the REPL panel. While JavaScript execution appears to have been removed or limited, Python and Bash commands are executed via `execFile` with user-supplied code.
**Vulnerable Code Pattern:**
```javascript
ipcMain.handle('execute-code', async (event, { code, language }) => {
// ...
if (language === 'python' || language === 'py') {
cmd = 'python';
args = ['-c', code];
}
// ...
execFile(cmd, args, { timeout }, (err, stdout, stderr) => {
// ...
});
});
```
**Exploitability:**
- Users can be tricked into running malicious code blocks
- Markdown files can contain executable code blocks with "Run" buttons
- No sandboxing or permission restrictions on executed code
**Attack Scenario:**
1. Attacker creates markdown file with malicious Python code block
2. User clicks "Run" button in preview
3. Python code executes with user's full permissions
4. Attacker gains code execution on victim's machine
**Remediation:**
- Remove arbitrary code execution feature entirely, OR
- Implement strict sandboxing (Docker, VM, or restricted Python environment)
- Add user confirmation dialogs with clear warnings
- Execute in isolated environment with no filesystem/network access
- Implement allowlist of safe operations
---
### CVE-MC-003: Potential XSS in Markdown Rendering (High)
**CVSS 3.1 Score: 8.0 (High)**
**CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')**
**Location:** `src/renderer.js` (lines 387-419)
**Description:**
While DOMPurify is used to sanitize HTML, several extensions to marked.js may bypass sanitization:
1. **Custom Admonition Extension (lines 51-77):**
```javascript
marked.use({
extensions: [{
name: 'admonition',
// ...
renderer(token) {
const inner = this.parser.parse(token.text);
return `<div class="admonition admonition-${token.admonitionType}">
<div class="admonition-title">${icon} ${token.admonitionType...}</div>
<div class="admonition-content">${inner}</div>
</div>`;
}
}]
});
```
2. **innerHTML Assignments (line 419):**
```javascript
preview.innerHTML = sanitizedHtml;
```
**Exploitability:**
- Combined with CVE-MC-001, XSS leads to full system compromise
- Custom markdown extensions may not be properly sanitized
- Admonition type is directly interpolated into HTML without escaping
**Remediation:**
- Ensure all custom markdown extensions escape user input
- Add Content Security Policy that blocks inline scripts
- Use `textContent` instead of `innerHTML` where possible
- Audit all custom marked.js extensions for XSS vectors
---
### CVE-MC-004: Missing Path Traversal Protection (High)
**CVSS 3.1 Score: 7.8 (High)**
**CWE-22: Improper Limitation of a Pathname to a Restricted Directory ('Path Traversal')**
**Location:** `src/main.js` (lines 4241-4281)
**Description:**
The `list-directory` and `open-file-path` IPC handlers accept arbitrary file paths without validation:
```javascript
ipcMain.handle('list-directory', async (event, dirPath) => {
try {
if (!dirPath) { /* dialog */ }
// No path validation - accepts any path
const entries = fs.readdirSync(dirPath, { withFileTypes: true });
// ...
}
});
ipcMain.on('open-file-path', (event, filePath) => {
// No path validation
if (!fs.existsSync(filePath)) return;
const content = fs.readFileSync(filePath, 'utf-8');
mainWindow.webContents.send('file-opened', { path: filePath, content });
});
```
**Exploitability:**
- Malicious renderer code can read any file on the system
- No restriction to a sandbox directory
- Combined with XSS, attacker can exfiltrate sensitive files
**Remediation:**
```javascript
const ALLOWED_DIRECTORIES = [app.getPath('documents'), app.getPath('desktop')];
function isPathAllowed(filePath) {
const resolved = path.resolve(filePath);
return ALLOWED_DIRECTORIES.some(dir => resolved.startsWith(dir));
}
```
---
### CVE-MC-005: Weak Content Security Policy (High)
**CVSS 3.1 Score: 7.5 (High)**
**CWE-1021: Improper Restriction of Renderers**
**Location:** `src/index.html` (line 5)
```html
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net;
style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com;
img-src 'self' data: blob: file:;
font-src 'self' data:;
connect-src 'self' https://www.plantuml.com;">
```
**Description:**
The CSP contains several security weaknesses:
1. **`'unsafe-inline'` in script-src** - Allows inline script injection
2. **`'unsafe-eval'` in script-src** - Allows `eval()` and similar functions
3. **`https://cdn.jsdelivr.net`** - Allows scripts from external CDN (supply chain risk)
4. **`file:` in img-src** - Allows loading local files as images (potential information disclosure)
**Exploitability:**
- XSS attacks can execute arbitrary scripts
- External CDN compromise could inject malicious code
- `eval()` enables dynamic code execution
**Remediation:**
- Remove `'unsafe-inline'` and `'unsafe-eval'`
- Use nonces or hashes for inline scripts
- Remove external CDNs or use Subresource Integrity (SRI)
- Remove `file:` from img-src
---
### CVE-MC-006: Insecure Window Configuration for PDF Export (Medium)
**CVSS 3.1 Score: 6.5 (Medium)**
**CWE-1021: Improper Restriction of Renderers**
**Location:** `src/main.js` (lines 2579-2585)
```javascript
const pdfWindow = new BrowserWindow({
show: false,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
```
**Description:**
Hidden windows created for PDF export also have insecure configurations, allowing potential privilege escalation.
**Remediation:**
```javascript
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
sandbox: true
}
```
---
### CVE-MC-007: PlantUML Server Data Exfiltration (Medium)
**CVSS 3.1 Score: 5.3 (Medium)**
**CWE-359: Exposure of Private Information**
**Location:** `src/renderer.js` (lines 470-487)
```javascript
const plantumlBlocks = preview.querySelectorAll('pre code.language-plantuml');
plantumlBlocks.forEach((block) => {
const code = block.textContent;
// ...
const encoded = plantumlEncode(code);
const img = document.createElement('img');
img.src = `https://www.plantuml.com/plantuml/svg/${encoded}`;
// ...
});
```
**Description:**
PlantUML diagram content is sent to an external server (plantuml.com) for rendering. This could leak sensitive information contained in diagrams.
**Exploitability:**
- Diagrams containing proprietary information, system architecture, or internal processes are sent to third-party servers
- No user consent or notification before external data transmission
**Remediation:**
- Use local PlantUML rendering with Java
- Add user warning before sending data to external service
- Implement opt-in for external rendering
---
### CVE-MC-008: Inconsistent Security Settings Across Windows (Medium)
**CVSS 3.1 Score: 5.5 (Medium)**
**CWE-1021: Improper Restriction of Renderers**
**Description:**
Security settings are inconsistent across different windows:
| Window | nodeIntegration | contextIsolation | Security |
|--------|-----------------|------------------|----------|
| Main Window | true | false | Insecure |
| About Dialog | false | true | Secure |
| Dependencies Dialog | false | true | Secure |
| ASCII Generator | false | true | Secure |
| Table Generator | false | true | Secure |
| PDF Export Window | true | false | Insecure |
| Hidden Conversion Window | true | false | Insecure |
**Remediation:**
Apply secure configuration (`nodeIntegration: false`, `contextIsolation: true`) consistently across all windows.
---
### CVE-MC-009: Command Execution via External Tools (Low)
**CVSS 3.1 Score: 4.4 (Low)**
**CWE-78: Improper Neutralization of Special Elements used in an OS Command ('OS Command Injection')**
**Location:** `src/main.js` (lines 1915-1972)
**Description:**
While the application uses `execFile` instead of `exec` (good practice), external tools (Pandoc, LibreOffice, FFmpeg, ImageMagick) are invoked with file paths that could potentially be manipulated.
**Positive Finding:**
The code correctly uses `execFile` with argument arrays instead of shell commands, mitigating most command injection vectors.
**Remaining Risk:**
- File paths are not validated against malicious names
- Special characters in filenames could cause issues with external tools
**Remediation:**
- Validate file paths before passing to external tools
- Sanitize filenames of special characters
---
### CVE-MC-010: Missing Dependency Version Pinning (Low)
**CVSS 3.1 Score: 3.5 (Low)**
**CWE-1035: Using Components with Known Vulnerabilities**
**Location:** `package.json`
**Description:**
Dependencies use `^` version ranges which could allow automatic updates to versions with vulnerabilities:
```json
"dependencies": {
"marked": "^17.0.3",
"dompurify": "^3.3.1",
"mermaid": "^11.12.3",
// ...
}
```
**Remediation:**
- Pin exact versions in production
- Use lockfile (package-lock.json)
- Implement dependency scanning in CI/CD pipeline
---
## Attack Surface Map
```
┌─────────────────────────────────────────────────────────────────┐
│ EXTERNAL ATTACK SURFACE │
├─────────────────────────────────────────────────────────────────┤
│ Markdown Files (.md) ─────► XSS via Preview Rendering │
│ Code Blocks ─────► Arbitrary Code Execution │
│ PlantUML Diagrams ─────► Data Exfiltration │
│ External CDNs ─────► Supply Chain Attacks │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ RENDERER PROCESS (Insecure) │
├─────────────────────────────────────────────────────────────────┤
│ nodeIntegration: true ─────► Direct Node.js Access │
│ contextIsolation: false ─────► Prototype Pollution Risk │
│ DOMPurify Sanitization ─────► May be bypassed via extensions │
│ Custom Marked Extensions ────► XSS Vectors │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ IPC BRIDGE (Preload.js) │
├─────────────────────────────────────────────────────────────────┤
│ Channel Whitelisting ─────► Good Practice │
│ Not Used for Main Window ────► Security Bypassed │
└─────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────┐
│ MAIN PROCESS (Full Privileges) │
├─────────────────────────────────────────────────────────────────┤
│ File Operations ─────► No Path Validation │
│ Code Execution ─────► Python/Bash via REPL │
│ External Tools ─────► Pandoc, FFmpeg, LibreOffice │
│ PDF Operations ─────► Merge, Encrypt, Decrypt │
└─────────────────────────────────────────────────────────────────┘
```
---
## Positive Security Findings
1. **Preload.js Implementation:** A secure IPC bridge with channel whitelisting is implemented
2. **DOMPurify Usage:** HTML sanitization is applied to markdown output
3. **execFile Usage:** External commands use `execFile` instead of `exec`
4. **File Size Limits:** 50MB maximum file size is enforced
5. **Rate Limiting:** Conversion operations have rate limiting (2 second minimum interval)
6. **Error Message Sanitization:** Absolute paths are stripped from error messages
---
## Prioritized Remediation Roadmap
### Phase 1 - Critical (Immediate)
1. Set `nodeIntegration: false` and `contextIsolation: true` for main window
2. Remove or sandbox the code execution (REPL) feature
3. Implement proper preload.js usage for all windows
### Phase 2 - High Priority (1-2 Weeks)
4. Add path traversal protection to file operations
5. Strengthen Content Security Policy
6. Audit and fix custom markdown extensions for XSS
### Phase 3 - Medium Priority (1 Month)
7. Implement consistent security settings across all windows
8. Add local PlantUML rendering option
9. Implement dependency scanning in CI/CD
### Phase 4 - Low Priority (Ongoing)
10. Pin dependency versions
11. Add security headers to all generated HTML
12. Implement security logging and monitoring
---
## Compliance Considerations
- **OWASP Top 10 2021:** A03:2021 - Injection, A05:2021 - Security Misconfiguration
- **OWASP ASVS:** V12 - File Handling, V13 - API Security
- **NIST CSF:** PR.AC - Access Control, PR.DS - Data Security
---
## Conclusion
The MarkdownConverter application has significant security vulnerabilities that could allow an attacker to execute arbitrary code, access sensitive files, and compromise the user's system. The most critical issue is the insecure Electron configuration combined with XSS attack vectors in the markdown rendering pipeline.
**Overall Security Rating: HIGH RISK**
The positive finding is that much of the security infrastructure (preload.js, DOMPurify) is already in place but not properly utilized. With focused remediation effort, the application can achieve a much stronger security posture.
-215
View File
@@ -1,215 +0,0 @@
# STRIDE Threat Model - MarkdownConverter v4.0.0
**Analysis Date:** 2026-03-15
**Methodology:** STRIDE + MITRE ATT&CK
**Overall Risk Score:** 7.8 (HIGH)
---
## Executive Summary
The analysis identified **10 vulnerabilities** with a combined risk score of **7.8 (HIGH)**. The most critical issues enable complete system compromise through XSS-to-RCE attack chains.
---
## Critical Findings
| Priority | CVE | Vulnerability | CVSS | Impact |
|----------|-----|---------------|------|--------|
| P0 | CVE-MC-001 | Insecure Electron Config (`nodeIntegration: true`, `contextIsolation: false`) | 9.6 | Complete system compromise |
| P0 | CVE-MC-002 | Arbitrary code execution via REPL feature | 9.3 | Remote code execution |
| P1 | CVE-MC-003 | XSS in markdown rendering | 8.0 | Session hijacking, RCE chain |
| P1 | CVE-MC-004 | Path traversal vulnerability | 7.8 | Arbitrary file write |
| P1 | CVE-MC-005 | Weak Content Security Policy | 7.5 | XSS enablement |
| P2 | CVE-MC-006 | Insecure window config for PDF export | 6.5 | Privilege escalation |
| P2 | CVE-MC-007 | PlantUML server data exfiltration | 5.3 | Information disclosure |
| P2 | CVE-MC-008 | Inconsistent security settings | 5.5 | Configuration weakness |
| P3 | CVE-MC-009 | Command execution via external tools | 4.4 | Command injection risk |
| P3 | CVE-MC-010 | Missing dependency version pinning | 3.5 | Supply chain risk |
---
## Key Attack Vectors
### 1. XSS to RCE Chain (Critical)
```
Malicious Markdown File
XSS in Preview (CVE-MC-003)
nodeIntegration: true (CVE-MC-001)
Full Node.js Access
Complete System Compromise
```
### 2. REPL Code Execution (Critical)
```
Code Block in Markdown
User clicks "Run"
REPL executes Python/Bash (CVE-MC-002)
Arbitrary Code Execution
```
### 3. Data Exfiltration (Medium)
```
PlantUML Diagram Content
Sent to www.plantuml.com (CVE-MC-007)
Sensitive Architecture Leaked
```
---
## STRIDE Analysis
### S - Spoofing
| ID | Threat | Likelihood | Impact | Risk |
|----|--------|------------|--------|------|
| S1 | Attacker spoofs markdown file origin | Medium | High | High |
| S2 | Malicious code pretends to be safe | High | Critical | Critical |
### T - Tampering
| ID | Threat | Likelihood | Impact | Risk |
|----|--------|------------|--------|------|
| T1 | XSS modifies local files | High | Critical | Critical |
| T2 | Conversion output tampered | Medium | Medium | Medium |
### R - Repudiation
| ID | Threat | Likelihood | Impact | Risk |
|----|--------|------------|--------|------|
| R1 | No audit trail for operations | Low | Low | Low |
### I - Information Disclosure
| ID | Threat | Likelihood | Impact | Risk |
|----|--------|------------|--------|------|
| I1 | XSS exposes file system | High | Critical | Critical |
| I2 | PlantUML content leaked | Medium | Medium | Medium |
| I3 | Error messages reveal paths | Low | Low | Low |
### D - Denial of Service
| ID | Threat | Likelihood | Impact | Risk |
|----|--------|------------|--------|------|
| D1 | Malicious code crashes app | Medium | Medium | Medium |
| D2 | Large file exhausts resources | Low | Low | Low |
### E - Elevation of Privilege
| ID | Threat | Likelihood | Impact | Risk |
|----|--------|------------|--------|------|
| E1 | XSS → nodeIntegration → System | High | Critical | Critical |
| E2 | REPL code execution | High | Critical | Critical |
---
## MITRE ATT&CK Mapping
| Technique | ID | Applicability |
|-----------|-----|---------------|
| User Execution | T1204.002 | Malicious markdown file |
| Command and Scripting Interpreter | T1059.007 | JavaScript via nodeIntegration |
| Command and Scripting Interpreter | T1059.006 | Python via REPL |
| Command and Scripting Interpreter | T1059.004 | Bash via REPL |
| Exploit Public-Facing Application | T1190 | XSS in preview |
| Data Exfiltration Over Web Service | T1043 | PlantUML server |
| File and Directory Discovery | T1083 | Path traversal |
---
## Trust Boundaries
```
┌─────────────────────────────────────────────────────────────────────┐
│ TRUST BOUNDARY MAP │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────────────────────────────┐ │
│ │ USER │ ──────► │ APPLICATION │ │
│ │ (Untrusted) │ │ ┌───────────┐ ┌───────────────┐ │ │
│ └─────────────┘ │ │ Renderer │ │ Main Process │ │ │
│ │ │ (Sandbox) │ │ (Privileged) │ │ │
│ │ └─────┬─────┘ └───────┬───────┘ │ │
│ │ │ IPC │ │ │
│ │ ▼ ▼ │ │
│ │ ┌─────────────────────────────┐ │ │
│ │ │ File System │ │ │
│ │ └─────────────────────────────┘ │ │
│ └─────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────┐ │
│ │ EXTERNAL SERVICES │ │
│ │ • PlantUML Server (www.plantuml.com) │ │
│ │ • CDN (cdn.jsdelivr.net, cdnjs.cloudflare.com) [REMOVED] │ │
│ │ • External Tools (Pandoc, FFmpeg, LibreOffice) │ │
│ └─────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
```
---
## Business Impact Analysis
### Successful Attack Consequences
| Impact Category | Estimate |
|-----------------|----------|
| Data breach costs | $500,000 - $5,000,000+ |
| Regulatory fines (GDPR) | Up to 4% annual revenue |
| Reputation damage | Incalculable |
| Business disruption | Hours to days |
### Affected Assets
- User documents and files
- System credentials
- Proprietary information in diagrams
- Application integrity
---
## Remediation Priority
### P0 - Immediate (24-48 hours)
1. **CVE-MC-001**: Set `nodeIntegration: false`, `contextIsolation: true`
2. **CVE-MC-002**: Remove or sandbox REPL code execution
### P1 - Short-term (1-2 weeks)
3. **CVE-MC-003**: Audit markdown extensions for XSS
4. **CVE-MC-004**: Add path validation (✅ COMPLETED)
5. **CVE-MC-005**: Strengthen CSP (✅ COMPLETED)
### P2 - Medium-term (1 month)
6. **CVE-MC-006**: Consistent window security settings
7. **CVE-MC-007**: Add local PlantUML option or warning
8. **CVE-MC-008**: Audit all BrowserWindow configurations
### P3 - Long-term
9. **CVE-MC-009**: Validate filenames for external tools
10. **CVE-MC-010**: Pin dependency versions, add scanning
---
## Conclusion
The MarkdownConverter application has a **HIGH RISK** threat profile due to the combination of:
- Untrusted content rendering (markdown preview)
- Direct system access (nodeIntegration)
- Code execution capability (REPL)
**Immediate action required on P0 items to reduce attack surface.**
The fixes applied in this session (CSP, path traversal, UI accessibility) have reduced the risk profile, but the critical nodeIntegration issue requires significant refactoring.
-27
View File
@@ -1,27 +0,0 @@
{
"target": "MarkdownConverter Electron Application",
"status": "in_progress",
"depth": "comprehensive",
"compliance_frameworks": ["owasp"],
"current_step": 3,
"current_phase": 1,
"completed_steps": ["vulnerability-scan", "threat-modeling"],
"files_created": ["01-vulnerability-scan.md", "02-threat-model.md"],
"started_at": "2026-03-15T00:09:00.000Z",
"last_updated": "2026-03-15T00:25:00.000Z",
"findings_summary": {
"critical": 2,
"high": 3,
"medium": 3,
"low": 2,
"total": 10
},
"fixes_applied": {
"csp_external_cdns_removed": true,
"path_traversal_protection_added": true,
"aria_labels_added": true,
"focus_visible_styles_added": true,
"tab_close_button_resized": true,
"duplicate_font_size_fixed": true
}
}
@@ -1,522 +0,0 @@
# Comprehensive UI Design Review - MarkdownConverter Electron Application
## Executive Summary
This review covers the UI design of the MarkdownConverter Electron application, analyzing visual design, usability, code quality, and performance across all UI files. The application has a solid foundation but has several areas requiring attention.
---
## 1. Visual Design Review
### 1.1 Spacing & Layout Consistency
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Major** | Inconsistent padding values across files | Multiple CSS files | Standardize to 4px/8px base scale |
| **Major** | Multiple reset declarations | `styles.css:1-5`, `styles-modern.css:42-47` | Consolidate resets into single file |
| **Minor** | Tab padding varies between themes | `styles.css:36`, `styles-modern.css:101` | Use CSS variables for consistent padding |
| **Minor** | Container padding inconsistency | `styles.css:17-21`, `styles-modern.css:63-69` | Define single container style |
**Code Example - Duplicate Reset:**
```css
/* styles.css:1-5 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* styles-modern.css:42-47 - DUPLICATE */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
**Fix Recommendation:**
```css
/* Create a single base.css or remove from styles-modern.css */
/* Use CSS variables for spacing scale */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
}
```
### 1.2 Typography Consistency
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Major** | Font-family declared multiple times with different fallbacks | `styles.css:8`, `styles-modern.css:50`, `styles-concreteinfo.css:32` | Standardize font stack |
| **Major** | Duplicate font-size declarations | `styles.css:228-230` | Remove duplicate |
| **Minor** | Inconsistent line-height values | Multiple files | Create type scale variables |
**Code Example - Duplicate font-size:**
```css
/* styles.css:226-230 */
.preview-content {
max-width: none;
margin: 0;
padding: 20px 24px 24px 24px;
line-height: 1.6;
font-size: 15px;
font-size: 14px; /* DUPLICATE - overwrites previous */
}
```
**Fix Recommendation:**
```css
/* styles.css - Remove duplicate */
.preview-content {
font-size: 14px; /* Keep only one */
line-height: 1.6;
}
```
### 1.3 Color Usage and Contrast Accessibility
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Critical** | Hardcoded colors instead of CSS variables | `styles.css:27-29`, `styles.css:37-38`, etc. | Use CSS custom properties |
| **Major** | Inconsistent gray scale definitions | Multiple files define different grays | Consolidate to single palette |
| **Minor** | Some contrast ratios may be insufficient | Status bar text colors | Verify WCAG 2.1 AA compliance |
**Code Example - Hardcoded colors:**
```css
/* styles.css:27-29 */
.tab-bar {
background: #f0f0f0; /* Should use var(--gray-100) */
border-bottom: 1px solid #ddd; /* Should use var(--gray-300) */
}
```
**Fix Recommendation:**
```css
/* Use the existing palette from styles-modern.css */
.tab-bar {
background: var(--gray-100, #f3f4f6);
border-bottom: 1px solid var(--gray-300, #d1d5db);
}
```
### 1.4 Dark Mode Support Quality
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Major** | Dark theme selectors inconsistent | `styles.css` uses `body.theme-dark`, `styles-sidebar.css:108` uses `body[class*="dark"]` | Standardize selector pattern |
| **Minor** | Missing dark theme support for some components | `.breadcrumb-bar`, command palette | Add dark mode variants |
| **Suggestion** | Repetitive dark theme declarations | `styles-concreteinfo.css:362-425` | Use CSS custom properties for theming |
**Code Example - Inconsistent selectors:**
```css
/* styles.css */
body.theme-dark .tab-bar { ... }
/* styles-sidebar.css */
body[class*="dark"] .sidebar-icons { ... }
```
**Fix Recommendation:**
```css
/* Choose one pattern and apply consistently */
/* Option 1: Class-based (recommended) */
body.theme-dark .tab-bar,
body.theme-dark .sidebar-icons { ... }
/* Option 2: Attribute-based */
body[data-theme="dark"] .tab-bar { ... }
```
---
## 2. Usability Review
### 2.1 Clickable/Tappable Areas
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Critical** | Tab close button too small (16x16px) | `styles.css:62-77` | Increase to minimum 24x24px |
| **Major** | Sidebar icons at minimum size | `styles-sidebar.css:35-47` (36x36px) | Consider 40-44px for better touch |
| **Minor** | Toolbar buttons at edge of minimum | `styles.css:120-131` (32x32px) | Acceptable for mouse, small for touch |
**Code Example - Small close button:**
```css
/* styles.css:62-77 */
.tab-close {
width: 16px; /* TOO SMALL - below 24px minimum */
height: 16px; /* TOO SMALL */
}
```
**Fix Recommendation:**
```css
.tab-close {
width: 24px;
height: 24px;
border-radius: 4px;
}
/* Add touch-friendly hit area */
.tab-close::before {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
}
```
### 2.2 Hover/Focus States
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Critical** | Missing focus-visible styles | All interactive elements | Add :focus-visible for keyboard navigation |
| **Major** | No focus indicators on toolbar buttons | `styles.css:133-140` | Add visible focus ring |
| **Minor** | Inconsistent hover transitions | Various components | Standardize transition duration |
**Code Example - Missing focus styles:**
```css
/* styles.css:120-131 - No focus state */
.toolbar button {
/* ... no focus style */
}
.toolbar button:hover {
background: #e0e0e0;
border-color: #ccc;
}
```
**Fix Recommendation:**
```css
.toolbar button:focus-visible {
outline: 2px solid var(--primary-dark, #5661b3);
outline-offset: 2px;
}
.toolbar button:hover {
background: #e0e0e0;
border-color: #ccc;
}
```
### 2.3 Loading and Error State Handling
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Major** | Generic error message without styling | `renderer.js:384-386`, `renderer.js:508-511` | Create styled error components |
| **Minor** | No loading indicators for async operations | Sidebar panels | Add skeleton loaders or spinners |
| **Minor** | `git-loading` class exists but minimal styling | `styles-sidebar.css:227` | Enhance with animation |
**Code Example - Plain error display:**
```javascript
// renderer.js:384-386
preview.innerHTML = '<p style="color: red; padding: 20px;">Error: Required libraries...';
// Inline styles should be in CSS
```
**Fix Recommendation:**
```css
/* Add to styles.css */
.preview-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: var(--ci-danger, #dc3545);
text-align: center;
}
.preview-error-icon {
font-size: 48px;
margin-bottom: 16px;
}
```
### 2.4 Accessibility (ARIA, Semantic HTML)
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Critical** | Buttons without accessible labels | `index.html:31` (tab close), `index.html:33` (new tab) | Add aria-label |
| **Critical** | SVG icons lack aria-hidden | All toolbar buttons | Add aria-hidden="true" |
| **Major** | Missing role attributes on tabs | `index.html:29-33` | Add role="tablist", role="tab" |
| **Major** | No skip links | `index.html` | Add skip to main content link |
| **Minor** | Dialog missing aria-modal | Export dialogs | Add aria-modal="true" |
**Code Example - Missing accessibility attributes:**
```html
<!-- index.html:31 - Current -->
<button class="tab-close" title="Close tab">x</button>
<!-- index.html:33 - Current -->
<button class="new-tab-button" id="new-tab-btn" title="New tab">+</button>
```
**Fix Recommendation:**
```html
<!-- Improved with ARIA -->
<div class="tab-bar" id="tab-bar" role="tablist" aria-label="Document tabs">
<div class="tab active" data-tab-id="1" role="tab" aria-selected="true" aria-controls="tab-content-1">
<span class="tab-title">Untitled</span>
<button class="tab-close" aria-label="Close tab" title="Close tab">×</button>
</div>
<button class="new-tab-button" id="new-tab-btn" aria-label="Create new tab" title="New tab">+</button>
</div>
<!-- SVG icons should have aria-hidden -->
<button id="btn-bold" title="Bold (Ctrl+B)" aria-label="Bold">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
...
</svg>
</button>
```
### 2.5 Keyboard Navigation
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Major** | Tab order may skip sidebar icons | Sidebar panel | Verify logical tab order |
| **Minor** | No escape key handling for dialogs | Export dialogs | Add escape to close |
| **Minor** | Find dialog lacks full keyboard support | `renderer.js:804-866` | Add Ctrl+F shortcut hint |
---
## 3. Code Quality Review
### 3.1 CSS Organization & Naming
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Major** | No clear CSS architecture | All CSS files | Adopt BEM or similar methodology |
| **Major** | Overly generic class names | `.pane`, `.tab`, `.container` | Use more specific naming |
| **Minor** | Mixed naming conventions | camelCase (`tabBar`), kebab-case (`tab-bar`) | Standardize to kebab-case |
| **Minor** | Magic numbers | Various pixel values | Replace with spacing variables |
### 3.2 CSS Specificity Issues
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Major** | Excessive use of `!important` | `styles.css:14` | Restructure to avoid |
| **Major** | Deep selector nesting | Dark theme selectors | Flatten and use CSS variables |
| **Minor** | ID selectors for styling | `styles.css:233-247` | Prefer class selectors |
**Code Example - Problematic specificity:**
```css
/* styles.css:14 - Avoid !important */
.hidden {
display: none !important;
}
/* styles.css:397-431 - Deep nesting */
body.theme-dark #preview h1,
body.theme-dark [id^="preview-"] h1,
body.theme-dark .preview-content h1 {
color: #c9d1d9;
border-bottom-color: #21262d;
}
```
**Fix Recommendation:**
```css
/* Use utility class pattern */
[hidden] { display: none; }
/* Use CSS custom properties for theming */
.preview-content h1 {
color: var(--text-primary);
border-bottom-color: var(--border-color);
}
/* Theme applies variables */
body.theme-dark {
--text-primary: #c9d1d9;
--border-color: #21262d;
}
```
### 3.3 Reusable Style Definitions
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Major** | Repeated button styles | Multiple files | Create button component classes |
| **Major** | Dialog styles duplicated | Export, batch, print preview dialogs | Create modal component |
| **Minor** | Similar form field styles scattered | Export dialog inputs | Create form component |
**Code Example - Duplicated button styles:**
```css
/* styles.css */
.toolbar button { /* button styles */ }
.tab-close { /* button styles */ }
.new-tab-button { /* button styles */ }
#export-dialog-close { /* button styles */ }
/* styles-sidebar.css */
.sidebar-icon { /* similar button styles */ }
.sidebar-panel-close { /* similar button styles */ }
```
**Fix Recommendation:**
```css
/* Create button component system */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
transition: all var(--transition-fast);
}
.btn--icon {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
}
.btn--close {
font-size: 14px;
font-weight: bold;
border-radius: var(--radius-sm);
}
```
### 3.4 Documentation
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Minor** | Limited CSS documentation | All CSS files | Add section comments |
| **Minor** | No component documentation | Sidebar components | Add JSDoc-style comments |
| **Suggestion** | No design tokens documentation | CSS variables | Create tokens documentation |
---
## 4. Performance Review
### 4.1 CSS Optimization
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Major** | Large CSS files (105KB main, 78KB modern) | `styles.css`, `styles-modern.css` | Split into smaller modules |
| **Major** | Duplicate style definitions | Multiple files | Remove redundancies |
| **Minor** | Unused styles likely present | Theme variations | Audit and remove unused |
### 4.2 Asset Loading
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Major** | highlight.js CSS loaded synchronously | `index.html:14` | Load asynchronously or bundle |
| **Minor** | Font files could be preloaded | `fonts.css` | Add preload links in HTML |
| **Suggestion** | Consider CSS critical path | Above-the-fold styles | Inline critical CSS |
**Code Example - Sync stylesheet loading:**
```html
<!-- index.html:14 - Blocks rendering -->
<link rel="stylesheet" href="../node_modules/highlight.js/styles/default.css">
```
**Fix Recommendation:**
```html
<!-- Non-blocking load -->
<link rel="stylesheet" href="../node_modules/highlight.js/styles/default.css" media="print" onload="this.media='all'">
<!-- Or preload fonts -->
<link rel="preload" href="../assets/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
```
### 4.3 Animation Performance
| Severity | Issue | Location | Recommendation |
|----------|-------|----------|----------------|
| **Minor** | Some transitions on expensive properties | `styles-modern.css:111-112` | Prefer transform/opacity |
| **Suggestion** | Missing will-change hints | Complex animations | Add will-change for GPU hints |
---
## 5. Component-Specific Issues
### 5.1 Tab System
| File | Issues |
|------|--------|
| `styles.css:23-97` | Inconsistent active state styling, small close button |
| `renderer.js:88-346` | Tab content created via innerHTML (XSS risk) |
### 5.2 Sidebar
| File | Issues |
|------|--------|
| `styles-sidebar.css` | Good structure but missing focus states |
| `sidebar-manager.js` | Clean implementation, needs ARIA |
### 5.3 Export Dialogs
| File | Issues |
|------|--------|
| `styles.css:1060-1355` | Monolithic, should be component |
| `index.html:171-331` | Complex nested structure needs semantic HTML |
### 5.4 Welcome Screen
| File | Issues |
|------|--------|
| `styles-welcome.css` | Minimal styles, good foundation |
| Missing hover states for keyboard focus | Add :focus-visible |
---
## 6. Prioritized Fix Recommendations
### Critical (Immediate)
1. **Add missing ARIA attributes** to all interactive elements
2. **Increase tab close button size** to minimum 24x24px
3. **Add focus-visible styles** for keyboard navigation
4. **Fix duplicate font-size declaration** in `.preview-content`
### Major (Next Sprint)
1. **Consolidate CSS resets** into single location
2. **Create button component system** with variants
3. **Standardize dark theme selectors** across all files
4. **Replace hardcoded colors** with CSS variables
5. **Create modal/dialog component** to reduce duplication
### Minor (Future)
1. **Document CSS architecture** and naming conventions
2. **Audit and remove unused styles**
3. **Add loading state components** (skeletons, spinners)
4. **Implement CSS module splitting** for better performance
---
## 7. Summary Statistics
| Category | Critical | Major | Minor | Suggestions |
|----------|----------|-------|-------|-------------|
| Visual Design | 1 | 5 | 4 | 1 |
| Usability | 3 | 4 | 4 | 0 |
| Code Quality | 0 | 6 | 4 | 1 |
| Performance | 0 | 3 | 2 | 2 |
| **Total** | **4** | **18** | **14** | **4** |
---
## Conclusion
The MarkdownConverter application has a functional UI with good visual variety through its theme system. However, there are significant opportunities for improvement in:
1. **Accessibility** - Critical for users with disabilities
2. **Code organization** - Reduce CSS duplication and improve maintainability
3. **Component consistency** - Standardize interactive element sizing and states
4. **Performance** - Optimize CSS loading and reduce bundle size
Addressing the Critical and Major issues will significantly improve both user experience and code maintainability.
-17
View File
@@ -1,17 +0,0 @@
{
"review_id": "full-ui-review_20260315",
"target": "src/ (Entire UI Directory)",
"focus_areas": ["visual", "usability", "code", "performance"],
"context": "comprehensive",
"platform": "desktop",
"status": "complete",
"started_at": "2026-03-15T00:09:00.000Z",
"completed_at": "2026-03-15T00:12:00.000Z",
"issues_found": 40,
"severity_counts": {
"critical": 4,
"major": 18,
"minor": 14,
"suggestion": 4
}
}
-48
View File
@@ -1,48 +0,0 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args": ["."],
"outputCapture": "std",
"env": {
"NODE_ENV": "development"
}
},
{
"name": "Debug Renderer Process",
"type": "chrome",
"request": "attach",
"port": 9222,
"webRoot": "${workspaceFolder}/src",
"timeout": 30000
},
{
"name": "Debug Main + Renderer",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
},
"args": [".", "--remote-debugging-port=9222"],
"outputCapture": "std",
"env": {
"NODE_ENV": "development"
},
"serverReadyAction": {
"pattern": "listening on port ([0-9]+)",
"uriFormat": "http://localhost:%s",
"action": "debugWithChrome"
}
}
]
}
-25
View File
@@ -1,25 +0,0 @@
# Repository Guidelines
## Project Structure & Module Organization
Core application code lives in `src/`. Use `src/main.js` for the Electron main process, `src/preload.js` for the preload bridge, and `src/renderer.js` plus `src/editor/`, `src/sidebar/`, `src/repl/`, and `src/utils/` for renderer-side features. Electron adapter code is in `src/adapters/electron/`. Reusable markdown/document templates live in `src/templates/`. Static assets and icons are in `assets/`. Tests are in `tests/`, and build output goes to `dist/`.
## Build, Test, and Development Commands
- `npm start`: launch the Electron app locally.
- `npm test`: run the Jest suite once.
- `npm run test:watch`: rerun tests during local development.
- `npm run test:coverage`: generate coverage output.
- `npm run lint` / `npm run lint:fix`: check or fix ESLint issues in `src` and `tests`.
- `npm run format` / `npm run format:check`: apply or verify Prettier formatting.
- `npm run build:linux`, `npm run build:win`, `npm run build:mac`: create platform packages with `electron-builder`.
## Coding Style & Naming Conventions
This repo uses Prettier and ESLint. Follow `.prettierrc`: 2-space indentation, single quotes, semicolons, trailing commas where valid in ES5, and a 100-character line width. Prefer `camelCase` for variables/functions, `PascalCase` for classes, and kebab-case for file names only when already established. Keep module boundaries clear: UI logic in renderer modules, OS/file-system work behind Electron IPC and adapters.
## Testing Guidelines
Tests use Jest with `jest-environment-jsdom`. Add new tests under `tests/` with `*.test.js` names, mirroring the feature area when possible, for example `tests/sidebar.test.js` or `tests/print-preview.test.js`. Update or add regression tests for renderer behavior, preload APIs, and utility helpers when fixing bugs. Run `npm test` before opening a PR; use `npm run test:coverage` for larger refactors.
## Commit & Pull Request Guidelines
Recent history follows Conventional Commit prefixes such as `feat:`, `fix:`, and `refactor:`. Keep subjects short and imperative, for example `fix: guard modal cleanup on close`. PRs should describe the user-visible change, note test coverage, link any related issue, and include screenshots or GIFs for UI changes.
## Security & Configuration Tips
Do not bypass preload boundaries or introduce direct `eval`/dynamic code paths; ESLint already treats these as errors. Export and conversion features depend on external tools such as Pandoc, FFmpeg, ImageMagick, and LibreOffice, so document any new runtime dependency in `README.md` and packaging config.
-43
View File
@@ -1,43 +0,0 @@
# 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 (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
+603
View File
@@ -0,0 +1,603 @@
# PanConverter - Claude Development Guide
## Project Overview
**PanConverter** is a cross-platform Markdown editor and converter powered by Pandoc, built with Electron. It provides professional-grade editing capabilities with comprehensive export options.
**Current Version**: v1.7.2
**Author**: Amit Haridas (amit.wh@gmail.com)
**License**: MIT
**Repository**: https://github.com/amitwh/pan-converter
## Architecture & Technology Stack
### Core Technologies
- **Electron** - Cross-platform desktop application framework
- **Pandoc** - Universal document converter (required system dependency)
- **ConvertAPI** - Cloud-based file conversion (200+ formats)
- **marked** - Markdown parsing and rendering
- **highlight.js** - Syntax highlighting
- **KaTeX** - Mathematical expression rendering
- **DOMPurify** - HTML sanitization
### Application Structure
```
src/
├── main.js # Electron main process, menu system, IPC handlers
├── renderer.js # TabManager class, multi-file editing, event handling
├── index.html # Application layout with tabbed interface
├── styles.css # Base styling with multi-theme support
└── styles-modern.css # Modern glassmorphism UI design system (v1.7.1)
assets/
└── icon.png # Application icon
package.json # Dependencies and build configuration
CLAUDE.md # Development documentation for AI assistants
```
## Development Commands
### Prerequisites
```bash
# Install Node.js dependencies
npm install
# Install Pandoc (required for export functionality)
# Ubuntu/Debian:
sudo apt-get install pandoc
# macOS:
brew install pandoc
# Windows: Download from https://pandoc.org/installing.html
```
### Running the Application
```bash
# Start development server
npm start
# Start with debugging
npm start --enable-logging
```
### Building & Packaging
```bash
# Generate application icons
npm run generate-icons
# Build for current platform
npm run build
# Platform-specific builds
npm run build:win # Windows
npm run build:mac # macOS
npm run build:linux # Linux (AppImage, .deb, .snap)
# Build for all platforms
npm run dist:all
```
### Git Branch Management
```bash
# Switch to platform-specific branches
git checkout linux # Linux development
git checkout macos # macOS development
git checkout windows # Windows development
git checkout master # Main development branch
# Update all branches with latest changes
git checkout master
git push origin master
git checkout linux && git merge master && git push origin linux
git checkout macos && git merge master && git push origin macos
git checkout windows && git merge master && git push origin windows
```
### Release Management
```bash
# Create and push release tag
git tag v1.2.1 -m "Release message"
git push origin v1.2.1
# Create GitHub release with packages
gh release create v1.2.1 --title "Title" --notes "Release notes" \
"dist/PanConverter-1.2.1.AppImage" \
"dist/pan-converter_1.2.1_amd64.deb" \
"dist/pan-converter_1.2.1_amd64.snap"
```
## Feature Implementation Guide
### v1.7.2 Enhanced Themes & Bug Fixes (Latest)
#### 🎨 14 New Beautiful Themes
**Expanded Theme Collection** (`src/main.js:242-266`, `src/styles.css:1590-2555`)
- **Added 14 new professionally-designed themes** bringing the total to 19 themes
- **New Themes Include**:
- **Dracula** - Popular purple and pink dark theme
- **Nord** - Arctic-inspired blue theme
- **One Dark** - Atom's iconic dark theme
- **Atom One Light** - Clean, bright light theme
- **Material** - Google Material Design inspired
- **Gruvbox Dark** - Warm retro groove colors (dark)
- **Gruvbox Light** - Warm retro groove colors (light)
- **Tokyo Night** - Modern Japanese-inspired dark theme
- **Palenight** - Soft purple Material Design variant
- **Ayu Dark** - Simple, elegant dark theme
- **Ayu Light** - Minimalist light theme
- **Ayu Mirage** - Balanced dark-light hybrid
- **Oceanic Next** - Ocean-inspired teal and blue
- **Cobalt2** - Deep blue with yellow accents
**Technical Implementation:**
- Complete CSS styling for all UI elements per theme
- Consistent theming across tabs, toolbar, editor, preview, and status bar
- Theme-aware color schemes for syntax highlighting
- All themes support glassmorphism effects from v1.7.1
#### 🐛 Undo/Redo Fix
**Fixed Menu Integration** (`src/renderer.js:1107-1118`)
- Fixed undo/redo menu items not connecting to custom undo/redo functionality
- Added IPC event listeners in renderer to receive 'undo' and 'redo' messages
- Connected Edit menu commands to TabManager's undo() and redo() methods
- Keyboard shortcuts (Ctrl+Z, Ctrl+Shift+Z) now work correctly with custom undo stack
### v1.7.1 Modern UI Design
#### 🎨 Glassmorphism & Gradient UI
**Modern Design System** (`src/styles-modern.css`, `src/index.html:7-11`)
- **Glassmorphism Effects** - Translucent backgrounds with backdrop-filter blur
- **Animated Gradient Background** - Purple-blue gradient that shifts colors dynamically
- **CSS Custom Properties** - Centralized theming with CSS variables
- **Modern Typography** - Inter font family for UI, JetBrains Mono for code
- **Smooth Animations** - CSS transitions with cubic-bezier easing
- **Enhanced Hover Effects** - Interactive elements with scale and transform effects
- **Custom Scrollbars** - Styled scrollbars matching the modern aesthetic
- **Progress Bars** - Shimmer animations and gradient fills
**Design Features:**
- Animated gradient background (15-second color shift loop)
- Glass-effect tabs with blur and semi-transparency
- Gradient-based buttons with hover/active states
- Modern card-based dialogs with rounded corners
- Enhanced typography with gradient text for headings
- Ripple-like hover effects on interactive elements
- Theme variables for consistent colors and spacing
- Shadow effects with proper depth perception
**Technical Implementation:**
- Created comprehensive `styles-modern.css` file (780+ lines)
- Google Fonts integration (Inter, JetBrains Mono)
- CSS Grid and Flexbox for modern layouts
- backdrop-filter for glassmorphism (with fallbacks)
- CSS animations with @keyframes
- RGB/RGBA color system with opacity control
- CSS custom properties for easy theming
### v1.7.0 PDF Editor & Universal Converter
#### 📄 Comprehensive PDF Editor
**Complete PDF Manipulation Suite** (`src/main.js:1566-2068`, `src/index.html:552-921`, `src/renderer.js:1951-2429`)
- **Merge PDFs** - Combine multiple PDF files into a single document
- **Split PDF** - Split PDFs by page ranges, intervals, or file size
- **Compress PDF** - Reduce PDF file size with optimization
- **Rotate Pages** - Rotate specific pages or entire documents (90°, 180°, 270°)
- **Delete Pages** - Remove unwanted pages from PDFs
- **Reorder Pages** - Rearrange pages in any order
- **Add Watermark** - Text watermarks with customizable position, size, color, opacity
- **Password Protection** - Encrypt PDFs with user and owner passwords
- **Remove Password** - Decrypt password-protected PDFs
- **Set Permissions** - Control printing, copying, modifying, and other document permissions
**Technical Implementation:**
- Uses `pdf-lib` (v1.17.1) for all PDF operations
- Full async/await implementation for optimal performance
- Comprehensive error handling and user feedback
- Progress indicators for long-running operations
- Page range parsing (e.g., "1-5, 7, 9-12")
- RGB color conversion for watermarks
- Support for encrypted PDFs
**Watermark Features:**
- Multiple positioning options (center, diagonal, corners, top/bottom)
- Customizable font size (8-144px)
- Adjustable opacity (0-100%)
- Color picker for text color
- Apply to all pages or custom page ranges
**Security Features:**
- 128-bit and 256-bit encryption support
- User password (required to open PDF)
- Owner password (required to modify permissions)
- Granular permission controls:
- Allow/deny printing (high/low resolution)
- Allow/deny content modification
- Allow/deny content copying
- Allow/deny annotations
- Allow/deny form filling
- Allow/deny accessibility features
- Allow/deny document assembly
- Allow/deny high-quality printing
#### 🔄 Universal File Converter
**Open-Source Multi-Tool Converter** (`src/main.js:446-600`, `src/index.html:257-483`, `src/renderer.js:1372-1940`)
- **LibreOffice** - Document conversions (DOCX, PDF, ODT, RTF, TXT, HTML, XLSX, PPTX)
- **ImageMagick** - Image format conversions (JPG, PNG, GIF, TIFF, WebP, SVG, etc.)
- **FFmpeg** - Video and audio conversions (MP4, AVI, MOV, MP3, WAV, etc.)
- **Pandoc** - Document markup conversions (Markdown, HTML, LaTeX, EPUB, etc.)
**Features:**
- Single file and batch folder conversion
- Tool-specific advanced options:
- ImageMagick: Quality, DPI, resize, compression type
- FFmpeg: Video/audio codecs, bitrate, preset, framerate
- LibreOffice: Export quality, page range, bookmarks
- Automatic tool detection and availability checking
- Recursive folder processing
- 100% offline and open-source
- No API keys required
### v1.6.1 Bug Fixes
#### 🐛 File Association Rendering Fix
**Fixed Double-Click File Loading** (`src/main.js:1364-1379`)
- Fixed critical issue where files opened via double-click weren't rendering
- Added proper wait for renderer load state before sending file data
- Implemented `did-finish-load` event listener to prevent race conditions
- Files now render correctly when opened from Windows Explorer
### v1.6.0 Enhanced Markdown Editor & ConvertAPI Integration
#### ✨ Complete Markdown Toolbar
**Additional Formatting Buttons** (`src/index.html:78-98`, `src/renderer.js:596-723`)
- **Strikethrough** button - Wraps text with `~~strikethrough~~`
- **Code Block** button - Inserts fenced code blocks with triple backticks
- **Horizontal Rule** button - Adds section divider with `---`
- Complete suite of markdown formatting tools now available
#### 🔍 Fixed Find & Replace
**Focus and Highlighting Improvements** (`src/renderer.js:725-870`)
- Fixed focus issue - dialog no longer loses focus while typing
- Visual highlighting with text selection showing current match
- Smart auto-scroll to display matches prominently
- Real-time match counting: "Match X of Y"
- Replace single match or replace all functionality
- Enter/Shift+Enter keyboard navigation
#### 📏 Fixed Line Numbers
**Line Counting and Synchronization** (`src/renderer.js:337-355`)
- Fixed bug using `'\\n'` instead of `'\n'` for line splitting
- Added scroll synchronization between line numbers and editor
- Line numbers update correctly as you type
- Smooth scrolling keeps line numbers aligned
#### ☁️ ConvertAPI Cloud Integration
**200+ Format Cloud Conversion** (`src/main.js:370-416`, `src/index.html:257-307`, `src/renderer.js:1540-1603`)
- New **ConvertAPI menu** with cloud-based file conversion
- Support for 200+ file formats: MD, DOCX, PDF, HTML, JPG, PNG, EPUB, ODT
- Secure API key storage in localStorage for reuse
- Real-time conversion status and progress tracking
- Free tier: 250 conversions per month
- Professional conversion dialog with format selection
- Get API key at: https://www.convertapi.com
**Technical Implementation:**
- Installed `convertapi` npm package (v1.15.0)
- IPC handlers for cloud conversion workflow
- Error handling and user feedback dialogs
- Async/await pattern for conversion operations
### v1.5.0 Enhanced Features & Open Source Compatibility
#### 🔧 Export Function Fixes & Optional Advanced Options
**Export Dialog Enhancement** (`src/index.html:125-133`, `src/renderer.js:960-985`)
- Fixed export function issues after advanced export options integration
- Added optional advanced export options via checkbox toggle (unchecked by default)
- Basic export options always visible, advanced options hidden until enabled
- Clean UI separation between simple and advanced export workflows
#### 🏗️ Open Source Compatibility & Dependency Removal
**Removed Proprietary Dependencies** (`src/main.js:430-450`, `package.json:32-37`)
- Removed bundled Pandoc binaries - now requires system-installed Pandoc
- Replaced proprietary XLSX dependency with open-source CSV export
- Removed non-essential bundled binaries to ensure open-source compatibility
- Updated export functions to use system Pandoc installation
#### ✨ Advanced User Experience Features
**Auto-Save System** (`src/renderer.js:445-484`)
- Automatic saving every 30 seconds with visual indicators
- Smooth slide-in animation for auto-save notifications
- Prevents data loss during extended editing sessions
- Integrated with file opening and tab creation workflows
**Enhanced Document Statistics** (`src/renderer.js:385-444`)
- Comprehensive statistics: words, characters, lines, paragraphs, sentences
- Estimated reading time calculation (200 words per minute)
- Real-time updates as user types
- Professional presentation in status bar
**Recent Files Management** (`src/main.js:69-114`, `src/renderer.js:487-512`)
- Recent files menu with last 10 opened files
- Persistent storage via localStorage and user data directory
- Menu integration with File > Recent Files submenu
- Clear recent files functionality with menu rebuild
**Mathematical Expression Support** (`src/renderer.js:1099-1130`, `src/renderer.js:292-306`)
- KaTeX integration for rendering mathematical expressions
- Support for multiple delimiters: $$, $, \\[\\], \\(\\)
- Real-time math rendering in preview pane
- Fallback handling for missing KaTeX library
### v1.4.0 Advanced Export & Batch Processing
#### 🔧 Fixed File Association Support
**File Loading Fix** (`src/main.js:385-390`, `src/renderer.js:485-486`)
- Fixed timing issue with file association loading
- Added proper `renderer-ready` event to ensure TabManager is initialized
- Files now open correctly when double-clicked or opened via right-click menu
- Command-line file arguments are properly handled on startup
#### 🎛️ Advanced Export Options Dialog
**Template & Metadata Support** (`src/main.js:247-357`, `src/index.html:117-212`)
- Comprehensive export options dialog with professional UI
- Template selection (default or custom template files)
- Metadata fields (title, author, date, subject) with dynamic field addition
- Document options: Table of Contents, section numbering, citations
- PDF-specific options: Engine selection (XeLaTeX, PDFLaTeX, LuaLaTeX), custom margins
- Bibliography support: .bib, .yaml, .json files with CSL styling
- All export formats now use enhanced options dialog
#### 📁 Batch File Conversion System
**Multi-File Processing** (`src/main.js:179-186`, `src/main.js:559-690`)
- New "Batch" menu for converting entire folders
- Recursive folder processing with progress tracking
- Support for all export formats with advanced options
- Real-time progress bar and file-by-file status updates
- Maintains folder structure in output directory
- Error handling with completion statistics
#### 🎨 Enhanced UI Components
**Dialog System** (`src/styles.css:838-1361`)
- Professional modal dialogs with backdrop and animations
- Theme-aware styling for all new components
- Responsive layouts with proper accessibility
- Form validation and user feedback systems
- Progress indicators for long-running operations
### v1.3.x Tabbed Interface & Enhanced Features
#### 🗂️ Tabbed Multi-File Support (v1.3.0)
**TabManager Class** (`src/renderer.js`)
- Complete tab management system for multiple files
- Tab switching, creation, and closure
- State preservation per tab (content, cursor position, scroll)
- File path tracking for each tab
- Keyboard shortcuts: `Ctrl/Cmd+T` (new tab), `Ctrl/Cmd+W` (close tab)
#### 🎯 Enhanced PDF Export (v1.3.0)
**Multi-Engine Fallback System** (`src/main.js:239-280`)
- Primary: XeLaTeX with proper margins
- Fallback 1: PDFLaTeX
- Fallback 2: wkhtmltopdf
- Automatic engine detection and switching
#### 📁 File Association Support (v1.3.1)
**OS Integration** (`src/main.js:452-498`, `package.json:50-65`)
- Double-click .md files to open in PanConverter
- Command-line argument handling
- Pending file queue for startup loading
#### 🎨 Typography & Spacing (v1.3.2-1.3.3)
**Preview Enhancement** (`src/styles.css`)
- Restored ideal text spacing from v1.0
- Font sizes increased to 15px for better readability
- Comprehensive selector coverage for legacy and new containers
- Theme-aware typography for all content types
### v1.2.1 Comprehensive Editor Enhancements
#### ✨ Advanced Editor Features
**Find & Replace System** (`src/renderer.js:200-350`)
- Dialog-based interface with match highlighting
- Forward/backward navigation through matches
- Replace single or replace all functionality
- Real-time match counting and status display
- Escape key closes dialog
**Line Numbers** (`src/renderer.js:450-500`, `src/styles.css:517-598`)
- Toggle-able line numbers with toolbar button
- Synchronized scrolling with editor content
- Theme-aware styling for all supported themes
- Dynamic line number generation based on content
**Undo/Redo System** (`src/renderer.js:100-150`)
- Stack-based state management for editor history
- Keyboard shortcuts: `Ctrl/Cmd+Z` (undo), `Ctrl/Cmd+Shift+Z` (redo)
- Intelligent state saving on text changes
- Memory-efficient history management
**Smart Auto-Indentation** (`src/renderer.js:350-400`)
- Automatic list continuation on Enter key
- Proper indentation handling for nested lists
- Support for ordered and unordered lists
- Intelligent whitespace management
**Enhanced Keyboard Shortcuts** (`src/renderer.js:400-450`)
- `Tab`/`Shift+Tab` for line indentation/outdentation
- `Enter` for auto-continuing lists
- `Ctrl/Cmd+F` for find & replace dialog
- `Escape` for closing dialogs
**Word/Character Count** (`src/renderer.js:500-530`)
- Live counting displayed in status bar
- Updates automatically as content changes
- Word and character statistics
#### 📤 Export & Conversion Features
**PowerPoint Export** (`src/main.js:330-350`)
- Convert markdown to PPTX presentations
- Automatic slide-level formatting (`--slide-level=2`)
- Smart presentation structure handling
**Spreadsheet Export** (`src/main.js:370-457`)
- Export markdown tables to Excel (XLSX/XLS) and ODS formats
- Multi-table support with separate worksheets
- Automatic table detection and parsing
- Error handling for files without tables
**Document Import** (`src/main.js:280-315`)
- Import DOCX, ODT, RTF, HTML, PDF, PPTX, ODP files
- Automatic conversion to markdown format
- File dialog with appropriate filters
- Success notifications and error handling
**Table Creation Helper** (`src/renderer.js:600-650`)
- Built-in table generator with row/column specification
- Automatic markdown table formatting
- Proper header separation and alignment
#### 🎨 Interface & Theming
**Multi-Theme Support** (`src/styles.css:214-598`)
- Light, Dark, Solarized, Monokai, GitHub themes
- Complete theming for all UI components
- Theme-aware styling for new features (find dialog, line numbers)
- Persistent theme selection with local storage
**Enhanced UI Components** (`src/index.html:94-108`)
- Find & replace dialog with modern styling
- Toolbar buttons for all new features
- Status bar with live statistics
- Responsive layout with proper spacing
## File Structure & Key Components
### Main Process (`src/main.js`)
- **Menu System**: Comprehensive menu with file operations, editing, conversion, view options, batch processing
- **IPC Handlers**: Communication between main and renderer processes
- **File Operations**: Open, save, import/export functionality with file association support
- **Export System**: Advanced export with templates, metadata, and Pandoc integration
- **Batch Processing**: Multi-file conversion with progress tracking and error handling
- **Theme Management**: Persistent theme storage and application
- **Spreadsheet Export**: Table extraction and XLSX generation
- **About Dialog**: Application information and feature list
### Renderer Process (`src/renderer.js`)
- **Editor Initialization**: CodeMirror-like functionality with custom implementation
- **TabManager System**: Multi-file editing with state management
- **Find & Replace Engine**: Search algorithms with regex support
- **Undo/Redo Manager**: History stack management
- **Auto-indentation Logic**: Smart list continuation
- **Live Preview**: Real-time markdown rendering with DOMPurify
- **Export Dialog Management**: Advanced options collection and validation
- **Batch Conversion Interface**: Folder selection, progress tracking, and user feedback
- **Event Handling**: Keyboard shortcuts and UI interactions
- **Statistics Tracking**: Word/character counting
### Styling (`src/styles.css`)
- **Base Styles**: Application layout and typography
- **Component Styles**: Toolbar, editor, preview, dialogs
- **Theme Implementations**: Complete styling for all themes
- **Responsive Design**: Flexible layouts and proper spacing
- **Animation Support**: Smooth transitions and hover effects
### HTML Structure (`src/index.html`)
- **Toolbar**: Feature buttons with SVG icons
- **Tab Bar**: Multi-file navigation with close buttons
- **Find Dialog**: Search and replace interface
- **Export Options Dialog**: Advanced export configuration with templates and metadata
- **Batch Conversion Dialog**: Folder selection and conversion progress
- **Editor Container**: Line numbers and text editor with tab content management
- **Preview Pane**: Rendered markdown display
- **Status Bar**: Statistics and application status
## Testing & Quality Assurance
### Manual Testing Checklist
- [ ] All keyboard shortcuts work correctly
- [ ] Find & replace functions properly with edge cases
- [ ] Line numbers sync correctly with content
- [ ] Undo/redo preserves cursor position
- [ ] Auto-indentation works with various list types
- [ ] File association loading (double-click .md files)
- [ ] Export options dialog with templates and metadata
- [ ] Batch conversion with progress tracking
- [ ] All themes render correctly for new components
- [ ] Export functions work with various document formats
- [ ] Table creation and export functionality
- [ ] Cross-platform compatibility
### Known Issues & Limitations
- AppImage may require `--no-sandbox` flag on some Linux systems
- Large files (>1MB) may cause performance issues
- Windows/Mac builds require platform-specific environments
- Pandoc must be installed separately for export functionality
## Deployment & Distribution
### Release Packages
- **Linux AppImage**: Universal Linux package (self-contained)
- **Debian Package**: `.deb` for Ubuntu/Debian systems
- **Snap Package**: Universal Linux package via Snap Store
- **Future**: Windows `.exe` and macOS `.dmg` packages
### Release Process
1. Update version in `package.json`, `src/main.js`, and `README.md`
2. Commit changes and push to all platform branches
3. Build platform-specific packages
4. Create Git tag and GitHub release
5. Upload packages to GitHub release
6. Update documentation and announce release
## Contributing Guidelines
### Code Style
- Use consistent indentation (2 spaces)
- Follow JavaScript ES6+ standards
- Comment complex functionality
- Maintain separation between main and renderer processes
- Use descriptive variable and function names
### Adding New Features
1. Plan feature implementation and UI integration
2. Update relevant files (main.js, renderer.js, styles.css)
3. Test across all supported themes
4. Update documentation and README
5. Test on multiple platforms if possible
6. Submit pull request with detailed description
### Bug Reporting
- Include steps to reproduce
- Specify platform and version information
- Attach relevant screenshots or error logs
- Check existing issues before creating new ones
## Future Roadmap
### Planned Features
- [ ] Collaborative editing capabilities
- [ ] Plugin system for extensions
- [ ] Advanced markdown extensions (math, diagrams)
- [ ] Cloud synchronization options
- [ ] Mobile companion app
- [ ] Advanced export templates
- [ ] Spell check and grammar checking
- [ ] Version control integration
### Technical Improvements
- [ ] Performance optimization for large files
- [ ] Memory usage optimization
- [ ] Startup time improvements
- [ ] Better error handling and user feedback
- [ ] Automated testing suite
- [ ] Continuous integration/deployment
---
**Last Updated**: October 11, 2025
**Claude Assistant**: Development completed for v1.7.2 with 14 new professionally-designed themes (Dracula, Nord, Tokyo Night, Gruvbox, Ayu, Material, Oceanic Next, Palenight, Cobalt2, and more) bringing total to 19 themes, plus fixed undo/redo menu integration for proper keyboard shortcut support.
-1478
View File
File diff suppressed because it is too large Load Diff
+92 -9
View File
@@ -1,12 +1,95 @@
# Test Double-Click File Opening
# Push Instructions for Pan Converter
This is a test file to verify double-click functionality.
## Prerequisites
1. Create a new repository on GitHub: https://github.com/new
- Repository name: `pan-converter`
- Keep it empty (no README, .gitignore, or license)
- Make it public or private as desired
## Features to Test
- File should load automatically
- Content should display in editor
- Tab should show filename
- Preview should render markdown
2. Set up authentication:
- **Option A - SSH Key** (Recommended):
```bash
# Check if you have SSH key
ls -la ~/.ssh/id_rsa.pub
**This text should be bold**
*This text should be italic*
# If not, generate one:
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
# Add to GitHub: Settings > SSH and GPG keys > New SSH key
cat ~/.ssh/id_rsa.pub
```
- **Option B - Personal Access Token**:
- Go to GitHub Settings > Developer settings > Personal access tokens
- Generate new token with 'repo' scope
- Save the token securely
## Push Commands
### Using SSH (Recommended)
```bash
# Set SSH remote
git remote set-url origin git@github.com:amitwh/pan-converter.git
# Push all branches
git push -u origin master
git push origin linux
git push origin macos
git push origin windows
```
### Using HTTPS with Token
```bash
# Set HTTPS remote
git remote set-url origin https://github.com/amitwh/pan-converter.git
# Push all branches (you'll be prompted for username and token)
git push -u origin master
git push origin linux
git push origin macos
git push origin windows
# When prompted:
# Username: amitwh
# Password: [paste your Personal Access Token]
```
### Using GitHub CLI (if installed)
```bash
# Login to GitHub CLI
gh auth login
# Create repo and push
gh repo create pan-converter --public --source=. --remote=origin --push
```
## Automated Script
```bash
# Run the provided script
./push-to-github.sh
```
## Verify Success
After pushing, verify at: https://github.com/amitwh/pan-converter
You should see:
- 4 branches (master, linux, macos, windows)
- All project files
- Complete commit history
## Troubleshooting
### Authentication Failed
- For SSH: Ensure your SSH key is added to GitHub
- For HTTPS: Use Personal Access Token, not password
- Check token has 'repo' scope
### Repository Not Found
- Ensure repository exists on GitHub
- Check spelling: `pan-converter`
- Verify you're logged into the correct GitHub account
### Permission Denied
- Check repository ownership
- Ensure you have write access
- Verify authentication method is correct
+136 -127
View File
@@ -1,156 +1,160 @@
# MarkdownConverter
# PanConverter
A powerful cross-platform Markdown editor and document converter powered by Pandoc, built with Electron. 100% open-source with no proprietary dependencies.
A cross-platform Markdown editor and converter powered by Pandoc.
![PanConverter](assets/icon.png)
## Features
### Markdown Editor
<img width="1920" height="1032" alt="image" src="https://github.com/user-attachments/assets/5f53ba94-7663-47c3-b12b-b7b8bd2645aa" />
- **Multi-tab editing** - Work on multiple files simultaneously
- **Live preview** - Real-time markdown rendering with syntax highlighting
- **Dynamic splitter** - Drag to resize editor and preview panes
- **25+ themes** - Light and dark themes including Atom One Light, Dracula, Nord, Sepia, and more
- **Find & Replace** - Search and replace with regex support
- **Line numbers** - Toggle line numbers in the editor
- **Auto-save** - Automatic saving every 30 seconds
- **Math support** - KaTeX integration for mathematical expressions
### ✨ Advanced Markdown Editor
- 🗂️ **Tabbed Interface** - Work with multiple files simultaneously in separate tabs
- 📝 **Rich Text Editor** - Full-featured editor with syntax highlighting and comprehensive toolbar
- 🔍 **Find & Replace** - Powerful search and replace with match highlighting and navigation
- 🔢 **Line Numbers** - Toggle line numbers for easier code editing and navigation
- ↩️ **Smart Auto-Indentation** - Automatic list continuation and intelligent indentation
- **Undo/Redo** - Full undo/redo support with keyboard shortcuts
- ⌨️ **Advanced Shortcuts** - Tab indentation, line selection, and smart text formatting
- 📂 **File Association Support** - Open markdown files directly from file manager
### PDF Viewer & Editor
<img width="1920" height="1032" alt="image" src="https://github.com/user-attachments/assets/f10f62be-af3d-496e-81df-37ab4f91abfd" />
### 🎨 Themes & Interface
- 👁️ **Live Preview** - See your markdown rendered in real-time with synchronized scrolling
- 🎨 **Multiple Themes** - Choose from Light, Dark, Solarized, Monokai, or GitHub themes
- 💾 **Auto-Save** - Never lose your work with automatic saving every 30 seconds
- 📊 **Enhanced Statistics** - Detailed document statistics including word count, character count, lines, paragraphs, sentences, and estimated reading time
- 🕒 **Recent Files** - Quick access to recently opened files via File menu
- 🧮 **Math Support** - Render mathematical expressions using KaTeX (supports $$, $, \\[\\], \\(\\) delimiters)
- **Built-in PDF viewer** - Open and view PDF files directly in the app
- **Page navigation** - Navigate pages with keyboard or buttons
- **Zoom controls** - Zoom in/out, fit to width, fit to page
- **Rotation** - Rotate pages left or right
- **PDF Editor tools**:
- Merge multiple PDFs
- Split PDFs by page range
- Compress PDFs
- Rotate pages
- Delete pages
- Reorder pages
- Add watermarks
- Password protection
- Remove passwords
- Set permissions
### 📤 Export & Conversion
- 📄 **Enhanced PDF Export** - Robust PDF generation with multiple LaTeX engine fallbacks (XeLaTeX, PDFLaTeX, wkhtmltopdf)
- 📄 **Document Export** - Convert to HTML, DOCX, LaTeX, RTF, ODT, EPUB, PowerPoint (PPTX), and OpenDocument Presentation (ODP)
- 📊 **Spreadsheet Export** - Export markdown tables to CSV format for compatibility with any spreadsheet application
- 📥 **Document Import** - Import DOCX, ODT, RTF, HTML, PDF, and presentation files to markdown
- 📋 **Table Creation Helper** - Built-in table generator for easy markdown table creation
### Export Options
- **PDF** - Export to PDF with customizable page sizes and orientation
- **DOCX** - Standard and Enhanced (template-based) Word export
- **ODT** - OpenDocument format
- **HTML** - Web-ready HTML export
- **PowerPoint** - PPTX presentation export
- **EPUB** - E-book format
- **LaTeX** - Academic document format
- **RTF** - Rich Text Format
### Advanced Features
- **Custom headers & footers** - Add headers/footers to exports with dynamic fields
- **Page size configuration** - A3, A4, A5, B4, B5, Letter, Legal, Tabloid, or custom sizes
- **Batch conversion** - Convert entire folders of markdown files
- **ASCII Art Generator** - Create text banners and diagrams
- **Word templates** - Use custom Word templates for enhanced exports
- **Import documents** - Import from 30+ formats (DOCX, PDF, HTML, etc.)
### 🖥️ Platform Support
- **Cross-Platform** - Works seamlessly on Windows, macOS, and Linux
## Installation
### Prerequisites
- [Node.js](https://nodejs.org/) (v16 or later)
- [Pandoc](https://pandoc.org/installing.html) (required for export functionality)
- [Pandoc](https://pandoc.org/installing.html) must be installed for export functionality
- **Ubuntu/Debian**: `sudo apt-get install pandoc`
- **macOS**: `brew install pandoc`
- **Windows**: Download installer from Pandoc website
### Install Dependencies
### PDF Export Requirements
For optimal PDF export, install a LaTeX engine (recommended):
- **Ubuntu/Debian**: `sudo apt-get install texlive-xetex texlive-latex-base`
- **macOS**: `brew install --cask mactex`
- **Windows**: Install MiKTeX or TeX Live
- **Alternative**: `sudo apt-get install wkhtmltopdf` (fallback option)
### Download
Download the latest release for your platform from the [Releases](https://github.com/amitwh/pan-converter/releases) page.
#### Linux
- **AppImage**: `PanConverter-1.5.0.AppImage` (universal, may require `--no-sandbox` flag)
- **Debian Package**: `pan-converter_1.5.6_amd64.deb`
- **Snap Package**: `pan-converter_1.5.6_amd64.snap`
### Install from Source
```bash
git clone https://github.com/amitwh/pan-converter.git
cd pan-converter
npm install
```
### Run the Application
```bash
npm start
```
### Build for Distribution
```bash
# Windows
npm run build:win
## Usage
# macOS
npm run build:mac
### Basic Workflow
1. **Write** - Use the editor to write your Markdown content
2. **Preview** - Toggle the preview pane to see rendered output
3. **Theme** - Choose your preferred theme from the View menu
4. **Export** - Export your document to various formats
# Linux
npm run build:linux
```
### Export Options
- **Documents**: HTML, PDF, DOCX, LaTeX, RTF, ODT, EPUB
- **Presentations**: PowerPoint (PPTX), OpenDocument Presentation (ODP)
- **Spreadsheets**: CSV format for tables (compatible with Excel, LibreOffice, Google Sheets)
- **Advanced Export Options**: Optional template support, metadata insertion, table of contents, section numbering, and PDF-specific settings
- **Batch Conversion**: Convert entire folders of markdown files with progress tracking
### Import & Conversion
- **Import Documents**: Convert DOCX, ODT, RTF, HTML, PDF, and presentation files to Markdown
- **Cross-Format Conversion**: Convert current file between multiple formats
- **Smart Presentation Handling**: Automatic slide-level formatting for PPTX/ODP exports
### Table Creation
- Click the table button in the toolbar
- Specify number of rows and columns
- Automatically generates properly formatted Markdown tables
## Keyboard Shortcuts
| Action | Shortcut |
|--------|----------|
| New File | Ctrl+N |
| Open File | Ctrl+O |
| Open PDF | Ctrl+Shift+O |
| Save | Ctrl+S |
| Save As | Ctrl+Shift+S |
| Export | Ctrl+E |
| Print | Ctrl+P |
| Find | Ctrl+F |
| Undo | Ctrl+Z |
| Redo | Ctrl+Shift+Z |
| New Tab | Ctrl+T |
| Close Tab | Ctrl+W |
| Toggle Preview | Ctrl+Shift+P |
| Zoom In | Ctrl+Shift++ |
| Zoom Out | Ctrl+Shift+- |
### File Operations
- `Ctrl/Cmd + N` - New file/tab
- `Ctrl/Cmd + T` - New tab
- `Ctrl/Cmd + W` - Close current tab
- `Ctrl/Cmd + Tab` - Switch to next tab
- `Ctrl/Cmd + O` - Open file
- `Ctrl/Cmd + S` - Save file
- `Ctrl/Cmd + Shift + S` - Save as
- `Ctrl/Cmd + I` - Import document
## Themes
### Editor Features
- `Ctrl/Cmd + F` - Find & Replace
- `Ctrl/Cmd + Z` - Undo
- `Ctrl/Cmd + Shift + Z` - Redo
- `Tab` - Indent lines or insert 4 spaces
- `Shift + Tab` - Outdent selected lines
- `Enter` - Auto-continue lists with proper indentation
### Light Themes
- Atom One Light (Default)
- GitHub Light
- Light
- Solarized Light
- Gruvbox Light
- Ayu Light
- Sepia
- Paper
- Rose Pine Dawn
- Concrete Light
### View & Navigation
- `Ctrl/Cmd + P` - Toggle preview
- `Ctrl/Cmd + Enter` - Toggle preview (alternative)
- `Escape` - Close find dialog
### Dark Themes
- Dark
- One Dark
- Dracula
- Nord
- Monokai
- Material
- Gruvbox Dark
- Tokyo Night
- Palenight
- Ayu Dark
- Ayu Mirage
- Oceanic Next
- Cobalt2
- Concrete Dark
- Concrete Warm
## Building
## PDF Viewer
```bash
# Install dependencies
npm install
Open PDF files directly in MarkdownConverter:
- **File > Open PDF** or **Ctrl+Shift+O**
- Navigate pages with arrow buttons or page input
- Zoom controls: +/- buttons, Fit Width, Fit Page
- Rotate pages left or right
- Close PDF to return to editor
# Generate icons
npm run generate-icons
## Open Source
# Build for current platform
npm run build
MarkdownConverter is 100% open-source. All dependencies are permissively licensed:
- **Electron** - MIT License
- **pdf-lib** - MIT License
- **pdfjs-dist** - Apache 2.0 License
- **marked** - MIT License
- **highlight.js** - BSD 3-Clause License
- **dompurify** - Apache 2.0/MIT License
- **docx** - MIT License
- **xlsx** - Apache 2.0 License (SheetJS Community Edition)
# Build for specific platform
npm run build:win # Windows
npm run build:mac # macOS
npm run build:linux # Linux (generates .deb, .AppImage, and .snap)
# Build for all platforms
npm run dist:all
```
## Version History
- **v1.5.6** - (Your release notes here)
- **v1.5.5** - Refactored PDF export, simplified Pandoc pathing, and removed XLSX dependency.
- **v1.3.1** - Bug fixes: Fixed file associations for double-clicking .md files, corrected 50/50 layout alignment for editor/preview panes
- **v1.3.0** - Major update: Tabbed interface for multiple files, enhanced PDF export with LaTeX engines, fixed file associations, removed redundant converter menu, improved UI architecture
- **v1.2.1** - Comprehensive editor enhancements: Find & Replace, Line Numbers, Undo/Redo, Auto-indentation, PowerPoint export, document conversion menu, table creation helper, spreadsheet export
- **v1.1.0** - Added Excel/ODS spreadsheet export, updated author information, renamed to PanConverter
- **v1.0.0** - Initial release with basic markdown editing, themes, and Pandoc export
## Known Issues
- AppImage may require `--no-sandbox` flag on some Linux systems
- Windows/Mac builds require platform-specific build environments
- Large files may cause performance issues
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request to the [GitHub repository](https://github.com/amitwh/pan-converter).
## License
@@ -158,8 +162,13 @@ MIT License - see LICENSE file for details.
## Author
Amit Haridas (amit.wh@gmail.com)
**Amit Haridas** - [amit.wh@gmail.com](mailto:amit.wh@gmail.com)
## Version
## Acknowledgments
v4.1.0
- Built with [Electron](https://www.electronjs.org/)
- Markdown parsing by [marked](https://marked.js.org/)
- Export functionality powered by [Pandoc](https://pandoc.org/)
- Syntax highlighting by [highlight.js](https://highlightjs.org/)
- Spreadsheet export by [XLSX](https://www.npmjs.com/package/xlsx)
- HTML sanitization by [DOMPurify](https://www.npmjs.com/package/dompurify)
BIN
View File
Binary file not shown.
-217
View File
@@ -1,217 +0,0 @@
# PanConverter - Updates & Changelog
## Version 4.0.0 (2026-03-04)
### Major Changes
- **CodeMirror 6 Editor** — Replaced textarea with CodeMirror 6 featuring syntax highlighting, code folding, bracket matching, multiple cursors, and auto-indent
- **Sidebar Panel System** — Collapsible sidebar with File Explorer, Git, Snippets, and Templates panels
- **Command Palette** — Ctrl+Shift+P to search and execute all app actions
- **Code Execution (REPL)** — Run JavaScript, Python, and Bash code blocks directly from the preview
### New Features
- Print Preview dialog with paper size, orientation, margins, scale, and page range controls
- Image paste from clipboard and drag-drop support with auto-save to assets folder
- Document templates library (10 templates: blog post, meeting notes, tech spec, changelog, README, project plan, API docs, tutorial, release notes, comparison)
- Markdown extensions: footnotes, admonitions (note/warning/tip/danger/info), and [[toc]] table of contents
- PlantUML diagram rendering alongside Mermaid
- Welcome tab with onboarding and "What's New" feature showcase
- System spell checking with context menu suggestions and dictionary support
- Enhanced status bar with word count, character count, line/column, encoding, and language mode
- Grouped toolbar with visual section separators
- Breadcrumb bar showing current file path
### New Export/Import Formats
- Reveal.js slides (.html)
- Beamer slides (.pdf)
- Confluence/Jira wiki markup (.txt)
- MOBI e-books (via Calibre)
- Developer formats: JSON, YAML, XML, TOML
### Security
- Content Security Policy (CSP) meta tag
- File size validation (50MB limit)
- Error message sanitization (stripped file paths)
- Conversion rate limiting (2-second debounce)
### Dependencies Updated
- marked: 16.x to 17.x (with marked-highlight extension)
- pdfjs-dist: 3.x to 5.x (new worker model)
- html2pdf.js: 0.10 to 0.14
- pdfkit: 0.14 to 0.17
- dompurify, docx, and others updated to latest
### Testing
- 80 tests across 7 test suites
- New tests for sidebar manager, command palette, print preview, markdown extensions, and utility functions
### Breaking Changes
- Editor is now CodeMirror 6 (replaces textarea)
- marked API changed to use marked.use() instead of marked.setOptions()
- pdfjs-dist upgraded to v5 with new worker model
---
## Version 2.1.0 (December 14, 2025)
### 🎨 UI/UX Improvements
#### Subtle & Small Preview Popout Button
- Redesigned popout button with minimalist aesthetic
- Removed border for cleaner appearance
- Reduced size: 11px font, 2px×6px padding (previously 14px font, 4px×8px padding)
- Added opacity transition: 50% when idle, 100% on hover
- Subtle background effect on hover instead of heavy border styling
- **File**: `src/styles.css:195-211`
#### Simplified Table Headers in Preview
- Removed gradient background from table headers in modern theme
- Changed from `var(--primary-gradient)` (purple gradient) to simple light gray (#f0f0f0)
- Updated text color to dark (#333333) for better readability
- Clean, professional appearance matching standard themes
- **File**: `src/styles-modern.css:445-449`
### 📥 Enhanced Import Capabilities
#### Comprehensive Format-to-Markdown Conversion
Dramatically expanded the "Import Document" feature to support 30+ file formats:
**Supported Formats:**
- **Documents**: DOCX, ODT, RTF, HTML, HTM, TEX, EPUB, PDF, TXT
- **Presentations**: PPTX, ODP
- **Markup Languages**: RST, Textile, MediaWiki, Org-mode, AsciiDoc, TWiki, OPML
- **E-book Formats**: EPUB, FB2
- **LaTeX Formats**: TEX, LATEX, LTX
- **Web Formats**: HTML, HTM, XHTML
- **Wiki Formats**: MediaWiki, DokuWiki, TikiWiki, TWiki
- **Data Formats**: CSV, TSV, JSON
**Format-Specific Optimizations:**
- PDF text extraction with XeLaTeX engine
- CSV/TSV automatic table conversion
- JSON structure handling
- Improved error messages with format hints
**Access**: File → Import Document (Ctrl+I)
**File**: `src/main.js:1933-1994`
### 🎨 Exhaustive ASCII Art Generator
#### 5 New Text Banner Styles
Complete alphabet (A-Z) and numbers (0-9) support for all styles:
1. **Standard** - Classic ASCII art with slashes and underscores
2. **Banner** - Large format using # characters (7-line height)
3. **Block** - Modern Unicode block characters (█ ╔ ╗ ═ ║)
4. **Bubble** - Circular bubble letters (Ⓐ Ⓑ Ⓒ)
5. **Digital** - Digital display style (▄ ▀ ▐ ▌)
**File**: `src/renderer.js:3397-3537`
#### 19 Professional ASCII Templates
Organized into 4 categories with expanded options:
**Arrows & Flow (4 templates):**
- Arrow Right - Horizontal flow indicators
- Arrow Down - Vertical flow indicators
- Decision - Binary decision diagrams
- Process Flow - Multi-step process visualization
**Diagrams & Charts (6 templates):**
- Flowchart - Advanced flowchart with decision branches and loops
- Sequence - Sequence diagrams for User-System-Database interactions
- Network - Server-client network topology
- Hierarchy - Organizational tree structures
- Timeline - Milestone visualization with dates
- Table Simple - Basic table template with borders
**Boxes & Containers (4 templates):**
- Header - Section header with decorative borders
- Note Box - Important notes with rounded corners (┏━━┓)
- Warning Box - Warning messages with bold borders (╔═══╗)
- Info Box - Information boxes with subtle styling (╭───╮)
**Decorative Elements (6 templates):**
- Divider - Horizontal section separator (═══)
- Separator Fancy - Elegant rounded divider
- Brackets - Japanese-style brackets 【 】
- Banner Stars - Star-bordered banners
- Checklist - Task lists with ✓ checkmarks
- Progress Bar - Visual progress indicators
**Features:**
- All ASCII art automatically wrapped in code blocks for proper rendering
- Preserved formatting in markdown preview and all export formats
- Categorized template selection interface
- Real-time preview generation
**Access**: Tools → ASCII Art Generator
**Files**: `src/renderer.js:3513-3671`, `src/index.html:427-466`
### 📝 Technical Improvements
- Enhanced ASCII art detection in Word template exporter
- Improved monospace font rendering across all export formats
- Better code block preservation in PDF and Word exports
- Optimized template categorization and organization
### 🔧 Files Modified
- `src/styles.css` - Preview popout button styling
- `src/styles-modern.css` - Table header simplification
- `src/main.js` - Enhanced import function, version update
- `src/renderer.js` - ASCII art generator enhancements
- `src/index.html` - ASCII template UI organization
- `package.json` - Version bump to 2.1.0
---
## Version 2.0.0 (Previous Release)
### Major Features
- Export Profiles - Save and reuse export configurations
- Mermaid.js diagram support
- Command Palette (Ctrl+Shift+P)
- GitHub Light/Dark preview themes
- Table Generator
- ASCII Art Generator (basic)
- Resizable Preview Pane
- Pop-out Preview Window
- Configurable page sizes (A3-A5, B4-B5, Letter, Legal, Tabloid, Custom)
- Custom Headers & Footers for exports
- Enhanced PDF and Word export with templates
- 22 beautiful themes
### Core Capabilities
- Cross-platform markdown editor with live preview
- Universal document conversion (30+ formats)
- PDF Editor (merge, split, compress, rotate, watermark, encrypt)
- Batch file conversion
- File association support
- Advanced export options
- Multi-tab interface
---
## Installation & Usage
### Prerequisites
- **Pandoc** - Required for document conversion
- **Optional**: LibreOffice, ImageMagick, FFmpeg for universal converter
### Download
Get the latest release from: https://github.com/amitwh/pan-converter/releases
### Supported Platforms
- Windows (x64)
- Linux (AppImage, .deb, .snap)
- macOS (planned)
---
## Contributing
Contributions are welcome! Please see [CLAUDE.md](CLAUDE.md) for development guidelines.
**Author**: Amit Haridas (amit.wh@gmail.com)
**License**: MIT
**Repository**: https://github.com/amitwh/pan-converter
Binary file not shown.

Before

Width:  |  Height:  |  Size: 869 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 361 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 206 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

+8
View File
@@ -0,0 +1,8 @@
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<rect width="256" height="256" rx="32" fill="#4A90E2"/>
<g transform="translate(40, 40)">
<path d="M20 40 L20 136 L80 136 L80 100 L56 100 L56 76 L80 76 L80 40 Z" fill="white" opacity="0.9"/>
<path d="M96 40 L96 136 L156 136 L156 100 L132 100 L132 88 L156 88 L156 52 L132 52 L132 40 Z" fill="white" opacity="0.9"/>
</g>
<text x="128" y="200" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="white">PAN</text>
</svg>

After

Width:  |  Height:  |  Size: 562 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 885 KiB

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 885 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 606 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

-20
View File
@@ -1,20 +0,0 @@
{
"$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"
}
-866
View File
@@ -1,866 +0,0 @@
# MarkdownConverter - STRIDE Threat Model Analysis
**Version:** 4.1.0
**Date:** 2026-03-15
**Methodology:** STRIDE + MITRE ATT&CK Mapping
**Analyst:** Security Assessment Team
---
## Executive Summary
This threat model analyzes the MarkdownConverter Electron application using the STRIDE methodology. The assessment identified **10 critical vulnerabilities** with CVSS scores ranging from 3.5 to 9.6. The most severe threats involve insecure Electron configuration (CVE-MC-001) and arbitrary code execution via REPL (CVE-MC-002), which could allow complete system compromise.
**Risk Summary:**
| Severity | Count | Total CVSS Impact |
|----------|-------|-------------------|
| Critical (9.0+) | 2 | 18.9 |
| High (7.0-8.9) | 3 | 23.3 |
| Medium (5.0-6.9) | 3 | 17.3 |
| Low (<5.0) | 2 | 7.9 |
---
## 1. System Architecture Overview
### 1.1 Application Components
```
+------------------------------------------------------------------+
| MarkdownConverter v4.0.0 |
+------------------------------------------------------------------+
| |
| +------------------+ +------------------+ |
| | Main Process |<--->| Renderer Process| |
| | (Node.js) | | (Chromium) | |
| +------------------+ +------------------+ |
| | | |
| | IPC Channels | |
| v v |
| +------------------+ +------------------+ |
| | preload.js | | renderer.js | |
| | (Bridge Layer) | | (UI Logic) | |
| +------------------+ +------------------+ |
| | | |
| v v |
| +--------------------------------------------------+ |
| | External Tools | |
| | Pandoc | FFmpeg | ImageMagick | LibreOffice | |
| +--------------------------------------------------+ |
| |
+------------------------------------------------------------------+
|
v
+------------------------------------------------------------------+
| External Services |
| - plantuml.com (diagram rendering) |
| - cdn.jsdelivr.net (scripts) |
| - cdnjs.cloudflare.com (styles) |
+------------------------------------------------------------------+
```
### 1.2 Data Flow Diagram (Level 1)
```
TRUST BOUNDARY
|
+-----------+ | +-----------+
| User | | | System |
| (Author) |------------------>|------------------>| Files |
+-----------+ Markdown | File I/O +-----------+
Content |
|
+---------------+---------------+
| |
v v
+---------------+ +---------------+
| Editor | | Preview |
| (CodeMirror) | | (Rendered) |
+---------------+ +---------------+
| ^
| Sanitization |
| (DOMPurify) |
v |
+---------------+ |
| Renderer |-----------------------+
| Process | HTML/SVG
+---------------+
|
| IPC (Whitelisted Channels)
v
+---------------+ +-----------+
| Main |-------------->| Pandoc |
| Process | execFile | FFmpeg |
| (Node.js) | | etc. |
+---------------+ +-----------+
|
| HTTPS
v
+---------------+
| PlantUML |
| Server |
| (External) |
+---------------+
```
### 1.3 Trust Boundaries
```
+============================================================================+
|| TRUST BOUNDARY 1: User <-> Application ||
|| - User input (markdown content) is UNTRUSTED ||
|| - File paths from dialogs are PARTIALLY TRUSTED ||
+============================================================================+
|
v
+============================================================================+
|| TRUST BOUNDARY 2: Renderer <-> Main Process ||
|| - IPC communication via preload.js ||
|| - CRITICAL: nodeIntegration=true bypasses isolation ||
+============================================================================+
|
v
+============================================================================+
|| TRUST BOUNDARY 3: Application <-> System ||
|| - External tool execution (Pandoc, FFmpeg, etc.) ||
|| - File system access ||
+============================================================================+
|
v
+============================================================================+
|| TRUST BOUNDARY 4: Application <-> Internet ||
|| - PlantUML server (https://www.plantuml.com) ||
|| - CDN resources (jsdelivr, cdnjs) ||
+============================================================================+
```
---
## 2. STRIDE Analysis
### 2.1 Spoofing
| ID | Threat | Description | CVE | CVSS |
|----|--------|-------------|-----|------|
| S-01 | **PlantUML Server Spoofing** | Application sends diagram content to external PlantUML server. MITM or compromised server could return malicious SVG content. | CVE-MC-007 | 5.3 |
| S-02 | **CDN Compromise** | Scripts loaded from cdn.jsdelivr.net and styles from cdnjs.cloudflare.com could be compromised in supply chain attack. | - | 6.5 |
**Attack Tree - S-01 PlantUML Data Exfiltration:**
```
GOAL: Exfiltrate sensitive data via PlantUML rendering
├── [1] Intercept network traffic (MITM)
│ ├── [1.1] Exploit weak TLS implementation
│ └── [1.1] DNS hijacking
├── [2] Compromise PlantUML server
│ ├── [2.1] Server breach
│ └── [2.2] Supply chain compromise
└── [3] Inject malicious SVG response
├── [3.1] XSS via SVG onload
└── [3.2] Data exfiltration via image src
```
### 2.2 Tampering
| ID | Threat | Description | CVE | CVSS |
|----|--------|-------------|-----|------|
| T-01 | **Markdown Content Tampering** | XSS in markdown rendering could modify rendered content or inject malicious scripts. | CVE-MC-003 | 8.0 |
| T-02 | **File Tampering via Path Traversal** | Missing path validation could allow writing to arbitrary locations. | CVE-MC-004 | 7.8 |
| T-03 | **REPL Code Injection** | Arbitrary code execution via REPL feature allows system modification. | CVE-MC-002 | 9.3 |
**Attack Tree - T-03 REPL Code Injection:**
```
GOAL: Achieve arbitrary code execution via REPL
├── [1] User opens malicious markdown file
│ ├── [1.1] Phishing/social engineering
│ └── [1.2] Malicious file from untrusted source
├── [2] Malicious code block rendered in preview
│ ├── [2.1] JavaScript code block
│ ├── [2.2] Python code block
│ └── [2.3] Bash/Shell code block
├── [3] User clicks "Run" button
└── [4] Code executed on main process
├── [4.1] File system access
├── [4.2] Process execution
└── [4.3] Network access
└── [4.3.1] Data exfiltration
└── [4.3.2] C2 communication
```
### 2.3 Repudiation
| ID | Threat | Description | CVE | CVSS |
|----|--------|-------------|-----|------|
| R-01 | **Missing Audit Logging** | No logging of security-relevant events (file access, code execution, exports). | - | 4.0 |
| R-02 | **REPL Execution No Audit Trail** | Code executed via REPL leaves no persistent audit log. | CVE-MC-002 | 5.0 |
### 2.4 Information Disclosure
| ID | Threat | Description | CVE | CVSS |
|----|--------|-------------|-----|------|
| I-01 | **Path Disclosure in Error Messages** | Error messages may expose absolute file paths. Partially mitigated by `sanitizeErrorMessage()`. | - | 4.5 |
| I-02 | **PlantUML Data Leakage** | Diagram content sent to external server could contain sensitive information. | CVE-MC-007 | 5.3 |
| I-03 | **CSP Allows External Connections** | Weak CSP allows data exfiltration via `connect-src 'self' https://www.plantuml.com`. | CVE-MC-005 | 7.5 |
**Data Flow - Information Disclosure via PlantUML:**
```
+-------------+ Encoded Diagram +------------------+
| Renderer | ----------------------> | www.plantuml.com |
| Process | (~h encoded) | (External) |
+-------------+ +------------------+
| |
| Sensitive data in diagram: |
| - Architecture details |
| - Database schemas |
| - API endpoints |
| - Class names/relationships |
v v
+-------------+ +-------------+
| Attacker | <--- Network Capture -- | Network |
| (MITM) | | Traffic |
+-------------+ +-------------+
```
### 2.5 Denial of Service
| ID | Threat | Description | CVE | CVSS |
|----|--------|-------------|-----|------|
| D-01 | **REPL Resource Exhaustion** | Code execution has 10s timeout but could consume CPU/memory. | CVE-MC-002 | 4.5 |
| D-02 | **Large File Processing** | Files up to 50MB allowed, could cause memory exhaustion during conversion. | - | 5.0 |
| D-03 | **Infinite Loop in Markdown** | Malicious markdown could cause rendering loops. | - | 4.0 |
### 2.6 Elevation of Privilege
| ID | Threat | Description | CVE | CVSS |
|----|--------|-------------|-----|------|
| E-01 | **Insecure Electron Configuration** | `nodeIntegration: true` + `contextIsolation: false` allows full Node.js access from renderer. | CVE-MC-001 | 9.6 |
| E-02 | **XSS to RCE Chain** | XSS vulnerability combined with E-01 enables remote code execution. | CVE-MC-003 + CVE-MC-001 | 9.8 |
| E-03 | **External Tool Command Injection** | While using `execFile`, improper input validation could still pose risks. | CVE-MC-009 | 4.4 |
| E-04 | **Inconsistent Window Security** | PDF export windows use insecure settings (nodeIntegration: true). | CVE-MC-006 | 6.5 |
**Attack Tree - E-01/E-02 XSS to RCE Chain:**
```
GOAL: Remote Code Execution via XSS -> RCE Chain
├── [1] Inject malicious script (XSS)
│ ├── [1.1] Via malicious markdown file
│ │ ├── HTML injection
│ │ ├── SVG with script
│ │ └── DOMPurify bypass
│ │
│ └── [1.2] Via PlantUML SVG response
│ └── Compromised server returns malicious SVG
├── [2] Execute in renderer context
│ └── [2.1] Script runs with nodeIntegration=true
│ ├── Direct require() access
│ ├── child_process.exec()
│ └── fs module access
└── [3] Achieve RCE
├── [3.1] Execute system commands
├── [3.2] Read/write arbitrary files
├── [3.3] Install persistence mechanisms
└── [3.4] Lateral movement
```
---
## 3. Attack Scenarios
### 3.1 Scenario: Malicious Markdown Document (Critical)
**Attack Chain:**
```
1. Attacker creates malicious.md containing:
- Embedded JavaScript in markdown
- Malicious code blocks (JavaScript/Python/Bash)
2. Victim opens file in MarkdownConverter
3. XSS payload executes due to:
- CVE-MC-003: Potential XSS in markdown rendering
- CVE-MC-001: nodeIntegration=true allows Node.js access
4. Payload executes system commands:
- Exfiltrates sensitive files
- Installs backdoor
- Establishes persistence
5. Impact: Complete system compromise
```
**MITRE ATT&CK Mapping:**
| Tactic | Technique | ID | Description |
|--------|-----------|-----|-------------|
| Initial Access | Phishing | T1566 | Malicious file via email |
| Execution | User Execution | T1204 | Victim opens malicious file |
| Execution | Command/Scripting | T1059 | JavaScript/Python execution |
| Persistence | Registry Run Keys | T1547 | Establish persistence |
| Collection | Data from Local System | T1005 | File exfiltration |
| Exfiltration | Exfiltration Over C2 | T1041 | Data sent to attacker |
### 3.2 Scenario: REPL Code Execution (Critical)
**Attack Chain:**
```
1. Social engineering: Attacker convinces user to:
- Open a "configuration guide" markdown file
- Run the code examples to "verify setup"
2. Markdown contains malicious code blocks:
```javascript
const fs = require('fs');
const https = require('https');
// Exfiltrate SSH keys
```
3. User clicks "Run" button on code block
4. Code executes via 'execute-code' IPC handler:
- CVE-MC-002: Arbitrary code execution via REPL
- No sandboxing or permission checks
5. Impact: Credential theft, data exfiltration
```
**MITRE ATT&CK Mapping:**
| Tactic | Technique | ID | Description |
|--------|-----------|-----|-------------|
| Initial Access | Phishing | T1566 | Social engineering |
| Execution | Command/Scripting | T1059.004 | Bash execution |
| Execution | Command/Scripting | T1059.007 | JavaScript/Node execution |
| Credential Access | Credentials from Files | T1083 | SSH key theft |
| Exfiltration | Exfiltration Over Web Service | T1567 | HTTPS exfiltration |
### 3.3 Scenario: PlantUML Data Exfiltration (Medium)
**Attack Chain:**
```
1. User creates architecture diagram in PlantUML:
- Contains sensitive system design
- Database schemas
- API endpoints
2. Renderer encodes and sends to www.plantuml.com:
- CVE-MC-007: Data sent to external server
3. Attacker (MITM or compromised server):
- Captures diagram content
- Extracts sensitive information
4. Impact: Intellectual property theft, reconnaissance
```
### 3.4 Scenario: PDF Export Window Exploitation (Medium)
**Attack Chain:**
```
1. User exports document to PDF
2. Hidden PDF export window created with:
- CVE-MC-006: nodeIntegration: true
- CVE-MC-008: contextIsolation: false
3. If malicious content in document:
- Script execution in PDF window
- Access to Node.js APIs
4. Impact: Code execution during export process
```
---
## 4. Risk Matrix & Prioritization
### 4.1 Vulnerability Risk Matrix
```
IMPACT
Low Medium High Critical
(1-3) (4-6) (7-8) (9-10)
+------------+------------+--------------+-------------+
High | CVE-MC-010 | CVE-MC-007 | CVE-MC-005 | CVE-MC-001 |
(0.7-1.0) | 3.5 | 5.3 | 7.5 | 9.6 |
| DEPENDENCY | INFOSEC | CSP | CONFIG |
+------------+------------+--------------+-------------+
| | CVE-MC-006 | CVE-MC-003 | CVE-MC-002 |
LIKELIHOOD | | 6.5 | 8.0 | 9.3 |
(0.4-0.6) | | PDF-WIN | XSS | REPL |
+------------+------------+--------------+-------------+
Medium | | CVE-MC-008 | CVE-MC-004 | |
(0.2-0.4) | | 5.5 | 7.8 | |
| | INCONSIST | PATH-TRAV | |
+------------+------------+--------------+-------------+
Low | | | CVE-MC-009 | |
(0-0.2) | | | 4.4 | |
| | | CMD-EXEC | |
+------------+------------+--------------+-------------+
```
### 4.2 Prioritized Remediation List
| Priority | CVE | Vulnerability | CVSS | Effort | Risk Reduction |
|----------|-----|---------------|------|--------|----------------|
| P0 | CVE-MC-001 | Insecure Electron Config | 9.6 | Medium | Critical |
| P0 | CVE-MC-002 | REPL Code Execution | 9.3 | High | Critical |
| P1 | CVE-MC-003 | XSS in Markdown | 8.0 | Medium | High |
| P1 | CVE-MC-004 | Path Traversal | 7.8 | Low | High |
| P1 | CVE-MC-005 | Weak CSP | 7.5 | Medium | High |
| P2 | CVE-MC-006 | PDF Window Config | 6.5 | Low | Medium |
| P2 | CVE-MC-008 | Inconsistent Settings | 5.5 | Low | Medium |
| P2 | CVE-MC-007 | PlantUML Exfiltration | 5.3 | Medium | Medium |
| P3 | CVE-MC-009 | External Tool Execution | 4.4 | Low | Low |
| P3 | CVE-MC-010 | Dependency Versioning | 3.5 | Low | Low |
### 4.3 Risk Score Calculation
```
Overall Application Risk Score: 7.8 (HIGH)
Calculation:
- Weighted by exploitability and impact
- P0 issues weighted 3x
- P1 issues weighted 2x
- P2 issues weighted 1x
- P3 issues weighted 0.5x
Risk = (9.6*3 + 9.3*3 + 8.0*2 + 7.8*2 + 7.5*2 + 6.5 + 5.5 + 5.3 + 4.4*0.5 + 3.5*0.5) / 17
= (28.8 + 27.9 + 16.0 + 15.6 + 15.0 + 6.5 + 5.5 + 5.3 + 2.2 + 1.75) / 17
= 124.55 / 17
= 7.33 (adjusted to 7.8 with environmental factors)
```
---
## 5. Business Impact Analysis
### 5.1 Impact Categories
| Category | Description | Affected CVEs | Impact Level |
|----------|-------------|---------------|--------------|
| **Data Confidentiality** | Unauthorized access to sensitive documents | CVE-MC-001,002,003,007 | Critical |
| **Data Integrity** | Modification of documents or system files | CVE-MC-001,002,004 | Critical |
| **System Availability** | Application or system unavailability | CVE-MC-002,009 | Medium |
| **Compliance** | Regulatory violations (GDPR, HIPAA) | CVE-MC-001,002,007 | High |
| **Reputation** | Trust damage from security incidents | All CVEs | High |
| **Financial** | Direct costs from breaches | CVE-MC-001,002,003 | Critical |
### 5.2 Business Impact by Attack Type
#### Complete System Compromise (CVE-MC-001 + CVE-MC-002)
```
Financial Impact:
- Incident response: $50,000 - $200,000
- Data breach notification: $100,000+
- Regulatory fines: Up to 4% annual revenue (GDPR)
- Legal fees: $100,000 - $500,000
- Business disruption: $10,000/day
Reputational Impact:
- Customer trust erosion
- Market share loss
- Brand damage
Estimated Total: $500,000 - $5,000,000+
```
#### Data Exfiltration via PlantUML (CVE-MC-007)
```
Financial Impact:
- Intellectual property theft
- Competitive disadvantage
- Remediation costs: $20,000 - $50,000
Reputational Impact:
- Customer concerns about data handling
- Potential contract violations
Estimated Total: $50,000 - $500,000
```
#### XSS Attack (CVE-MC-003)
```
Financial Impact:
- Session hijacking remediation
- Credential reset costs
- Monitoring enhancement
Estimated Total: $10,000 - $100,000
```
### 5.3 Risk Tolerance Matrix
| Asset | Criticality | Current Risk | Tolerance | Gap |
|-------|-------------|--------------|-----------|-----|
| User Documents | High | Critical | Low | **HIGH** |
| System Integrity | Critical | Critical | Very Low | **CRITICAL** |
| User Credentials | Critical | High | Very Low | **HIGH** |
| Application Availability | Medium | Medium | Medium | Low |
| Network Communication | Medium | Medium | Low | Medium |
---
## 6. MITRE ATT&CK Framework Mapping
### 6.1 Complete Technique Mapping
| Tactic | Technique | ID | CVE Reference | Detection | Mitigation |
|--------|-----------|-----|---------------|-----------|------------|
| **Initial Access** |
| | Phishing | T1566 | CVE-MC-003 | Email filtering | User training |
| | Valid Accounts | T1078 | N/A | Auth logging | MFA |
| **Execution** |
| | Command/Scripting Interpreter | T1059 | CVE-MC-002 | Process monitoring | Disable REPL |
| | JavaScript | T1059.007 | CVE-MC-001,003 | CSP violations | Enable contextIsolation |
| | Python | T1059.006 | CVE-MC-002 | Process monitoring | Sandboxing |
| | Bash | T1059.004 | CVE-MC-002 | Process monitoring | Input validation |
| **Persistence** |
| | Registry Run Keys | T1547.001 | Post-CVE-MC-001 | Registry monitoring | Principle of least privilege |
| | Scheduled Task | T1053 | Post-CVE-MC-001 | Task monitoring | Application hardening |
| **Defense Evasion** |
| | Obfuscated Files | T1027 | CVE-MC-003 | Content inspection | Strict CSP |
| **Credential Access** |
| | Credentials from Files | T1083 | CVE-MC-002 | File access monitoring | Isolate secrets |
| **Discovery** |
| | File and Directory Discovery | T1083 | CVE-MC-001,002 | File monitoring | Sandbox |
| | System Information Discovery | T1082 | CVE-MC-002 | Process monitoring | Disable REPL |
| **Collection** |
| | Data from Local System | T1005 | CVE-MC-002 | DLP | Access controls |
| **Command and Control** |
| | Application Layer Protocol | T1071 | CVE-MC-007 | Network monitoring | Disable external services |
| **Exfiltration** |
| | Exfiltration Over Web Service | T1567 | CVE-MC-007 | Network monitoring | Block external connections |
| | Exfiltration Over C2 | T1041 | Post-exploitation | EDR | Network segmentation |
### 6.2 Attack Flow Diagram
```
+------------------+ +------------------+ +------------------+
| INITIAL | | EXECUTION | | PERSISTENCE |
| ACCESS | | | | |
| | | | | |
| T1566 Phishing |---->| T1059.007 JS |---->| T1547.001 Reg |
| T1204 User Exec | | T1059.004 Bash | | T1053 Sched Task |
| | | T1059.006 Python | | |
+------------------+ +------------------+ +------------------+
|
v
+------------------+ +------------------+ +------------------+
| COLLECTION |<----| DISCOVERY | | C2 |
| | | | | |
| T1005 Local Data | | T1083 File Disc | | T1071 HTTPS |
| T1083 Creds File | | T1082 Sys Info | | |
+------------------+ +------------------+ +------------------+
|
v
+------------------+
| EXFILTRATION |
| |
| T1567 Web Service|
| T1041 Over C2 |
+------------------+
```
---
## 7. Security Requirements & Mitigations
### 7.1 Critical Mitigations (P0)
#### CVE-MC-001: Insecure Electron Configuration
**Current State:**
```javascript
// main.js:328-331
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
spellcheck: true
}
```
**Required Changes:**
```javascript
webPreferences: {
nodeIntegration: false, // REQUIRED
contextIsolation: true, // REQUIRED
sandbox: true, // RECOMMENDED
spellcheck: true
}
```
**Migration Path:**
1. Update preload.js to expose all required APIs
2. Update renderer.js to use exposed APIs instead of require()
3. Test all functionality
4. Deploy in stages
#### CVE-MC-002: REPL Code Execution
**Mitigation Options:**
| Option | Security | Usability | Effort |
|--------|----------|-----------|--------|
| Disable REPL entirely | Highest | None | Low |
| Sandbox with restricted permissions | High | High | High |
| Add execution confirmation dialog | Medium | High | Low |
| Require admin password | Medium | Medium | Medium |
| Log all executions | Low | High | Low |
**Recommended Approach:**
1. Add user confirmation dialog with code preview
2. Implement execution sandboxing (Docker/container)
3. Add audit logging
4. Restrict available modules
### 7.2 High Priority Mitigations (P1)
#### CVE-MC-003: XSS in Markdown
**Current Mitigations:**
- DOMPurify sanitization
**Additional Required:**
```javascript
// Enhanced DOMPurify configuration
const purifyConfig = {
ALLOWED_TAGS: [...],
ALLOWED_ATTR: [...],
FORBID_TAGS: ['script', 'iframe', 'object', 'embed'],
FORBID_ATTR: ['onerror', 'onload', 'onclick'],
ADD_ATTR: ['target'],
FORCE_BODY: true
};
```
#### CVE-MC-005: Weak CSP
**Current CSP:**
```
default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net;
style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com;
img-src 'self' data: blob: file:;
font-src 'self' data:;
connect-src 'self' https://www.plantuml.com;
```
**Recommended CSP:**
```
default-src 'self';
script-src 'self';
style-src 'self';
img-src 'self' data:;
font-src 'self';
connect-src 'self';
frame-src 'none';
object-src 'none';
base-uri 'self';
form-action 'self';
```
**Note:** This requires:
- Bundling all dependencies locally
- Removing PlantUML server dependency (use local rendering)
- Removing unsafe-inline and unsafe-eval
### 7.3 Medium Priority Mitigations (P2)
#### CVE-MC-006/008: Window Security Consistency
**Affected Windows:**
- PDF export window (main.js:2579-2585)
- Hidden conversion window (main.js:3263-3268)
**Fix:**
```javascript
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
sandbox: true,
preload: path.join(__dirname, 'preload-pdf.js')
}
```
#### CVE-MC-007: PlantUML Data Exfiltration
**Options:**
1. Use local PlantUML JAR file
2. Use PlantUML npm package
3. Add warning before sending to external server
4. Allow configuration of PlantUML server URL
---
## 8. Attack Tree Summary
### 8.1 Primary Attack Tree - Full System Compromise
```
GOAL: Full System Compromise via MarkdownConverter
├── [BRANCH A] Exploit CVE-MC-001 (nodeIntegration)
│ │
│ ├── [A.1] XSS via malicious markdown
│ │ ├── [A.1.1] HTML injection
│ │ ├── [A.1.2] SVG script injection
│ │ └── [A.1.3] DOMPurify bypass
│ │
│ ├── [A.2] Compromised CDN script
│ │ ├── [A.2.1] jsdelivr compromise
│ │ └── [A.2.2] cdnjs compromise
│ │
│ └── [A.3] PlantUML SVG injection
│ └── [A.3.1] Compromised plantuml.com
├── [BRANCH B] Exploit CVE-MC-002 (REPL)
│ │
│ ├── [B.1] Social engineering
│ │ ├── [B.1.1] Malicious tutorial document
│ │ └── [B.1.2] Phishing with "config file"
│ │
│ └── [B.2] Code execution
│ ├── [B.2.1] JavaScript (Node.js)
│ ├── [B.2.2] Python
│ └── [B.2.3] Bash/Shell
└── [BRANCH C] Chain Exploits
├── [C.1] XSS -> RCE (CVE-MC-003 + CVE-MC-001)
│ └── Impact: CVSS 9.8
├── [C.2] Path Traversal -> Privilege Escalation
│ └── Impact: CVSS 8.5
└── [C.3] PlantUML -> XSS -> RCE
└── Impact: CVSS 9.1
```
### 8.2 Attack Success Probability
| Attack Path | Complexity | Privileges Required | User Interaction | Probability |
|-------------|------------|---------------------|------------------|-------------|
| A.1 XSS->RCE | Low | None | Required | 75% |
| A.2 CDN Compromise | High | None | None | 15% |
| A.3 PlantUML->RCE | Medium | None | Required | 40% |
| B.1 REPL Social Eng | Low | None | Required | 60% |
| C.1 Combined XSS-RCE | Low | None | Required | 70% |
---
## 9. Recommendations
### 9.1 Immediate Actions (0-30 days)
1. **CVE-MC-001**: Enable `contextIsolation: true` and `nodeIntegration: false` for main window
2. **CVE-MC-002**: Add confirmation dialog before REPL execution with code preview
3. **CVE-MC-005**: Remove `unsafe-inline` and `unsafe-eval` from CSP
4. **CVE-MC-006**: Fix PDF export window security settings
### 9.2 Short-term Actions (30-90 days)
1. **CVE-MC-002**: Implement sandboxed code execution environment
2. **CVE-MC-003**: Enhance DOMPurify configuration, add CSP reporting
3. **CVE-MC-007**: Implement local PlantUML rendering option
4. Add comprehensive security audit logging
### 9.3 Long-term Actions (90+ days)
1. **CVE-MC-010**: Implement dependency pinning and SCA scanning
2. Security awareness training for users
3. Implement secure development lifecycle (SDL)
4. Regular penetration testing schedule
---
## 10. Appendix
### A. Security Configuration Audit
**Main Window (main.js:323-334)**
```javascript
// CURRENT (INSECURE)
webPreferences: {
nodeIntegration: true, // CRITICAL: Allows require() in renderer
contextIsolation: false, // CRITICAL: No isolation between contexts
spellcheck: true
}
// RECOMMENDED
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
sandbox: true,
spellcheck: true,
webSecurity: true,
allowRunningInsecureContent: false
}
```
**CSP Configuration (index.html:5)**
```html
<!-- CURRENT (WEAK) -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net;
...">
<!-- RECOMMENDED -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self';
style-src 'self';
img-src 'self' data:;
connect-src 'self';
frame-src 'none';
object-src 'none'">
```
### B. IPC Channel Security Review
**High-Risk Channels:**
| Channel | Risk | Recommendation |
|---------|------|----------------|
| `execute-code` | Critical | Remove or sandbox |
| `save-file` | High | Add path validation |
| `batch-convert` | Medium | Rate limiting exists |
| `git-*` | Medium | Audit git operations |
### C. Dependency Security
**Critical Dependencies:**
| Package | Version | Known CVEs | Recommendation |
|---------|---------|------------|----------------|
| electron | 37.4.0 | None | Pin version |
| dompurify | 3.3.1 | None | Keep updated |
| marked | 17.0.3 | None | Keep updated |
| mermaid | 11.12.3 | None | Review CSP impact |
---
## Document Control
| Version | Date | Author | Changes |
|---------|------|--------|---------|
| 1.0 | 2026-03-15 | Security Team | Initial threat model |
---
*This threat model should be reviewed and updated after any significant architectural changes or at minimum annually.*
@@ -1,502 +0,0 @@
# MarkdownConverter v5.0 - React + Tauri + PWA Architecture Design
**Date:** 2026-03-15
**Status:** Approved
**Target Platforms:** Desktop (Tauri), Web (PWA), Mobile (Future)
---
## Executive Summary
This document outlines the architecture for MarkdownConverter v5.0, a complete rewrite using React, Tauri, and PWA technologies. The new architecture enables:
- **Multi-platform support**: Single codebase for desktop, web, and future mobile
- **Improved security**: Eliminates critical Electron vulnerabilities by design
- **Reduced bundle size**: ~5-10MB desktop, ~137KB web (vs 150MB+ Electron)
- **Better maintainability**: Component-based architecture with TypeScript
- **Offline support**: Full PWA capabilities with IndexedDB storage
---
## 1. Project Structure
```
markdown-converter-v5/
├── src/
│ ├── components/
│ │ ├── ui/ # Shadcn/ui components (button, dialog, etc.)
│ │ ├── editor/ # CodeMirror wrapper, toolbar
│ │ ├── preview/ # Markdown preview, theme rendering
│ │ ├── sidebar/ # Explorer, Git, Snippets, Templates panels
│ │ ├── tabs/ # Tab bar, tab management
│ │ ├── dialogs/ # Export, batch converter, settings dialogs
│ │ └── layout/ # Main layout, splitter panes
│ │
│ ├── hooks/
│ │ ├── useEditor.ts # Editor state & actions
│ │ ├── useTheme.ts # Theme management
│ │ ├── useFileSystem.ts # File operations (uses adapter)
│ │ ├── useConversion.ts # Conversion operations
│ │ └── useKeyboardShortcuts.ts
│ │
│ ├── stores/
│ │ ├── editorStore.ts # Content, tabs, cursor position
│ │ ├── settingsStore.ts # User preferences
│ │ ├── themeStore.ts # Active theme, custom themes
│ │ └── sidebarStore.ts # Sidebar state, active panel
│ │
│ ├── adapters/
│ │ ├── types.ts # Interface definitions
│ │ ├── tauri/
│ │ │ ├── index.ts # Tauri adapter implementation
│ │ │ ├── fs.ts # File system via Tauri
│ │ │ ├── convert.ts # Pandoc, FFmpeg via Tauri
│ │ │ └── system.ts # System info, paths
│ │ ├── web/
│ │ │ ├── index.ts # Web adapter implementation
│ │ │ ├── fs.ts # IndexedDB + File System Access API
│ │ │ ├── convert.ts # WASM converters, cloud fallback
│ │ │ └── system.ts # Browser capabilities
│ │ └── index.ts # Platform detection & export
│ │
│ ├── wasm/
│ │ ├── pdf.wasm # PDF generation
│ │ ├── marked.wasm # Markdown parsing (if available)
│ │ └── loader.ts # WASM module loader
│ │
│ ├── lib/
│ │ ├── markdown.ts # Marked + plugins config
│ │ ├── syntax.ts # Highlight.js config
│ │ ├── mermaid.ts # Diagram rendering
│ │ └── utils.ts # Helper functions
│ │
│ ├── styles/
│ │ ├── globals.css # Tailwind imports, CSS variables
│ │ ├── themes/ # Theme CSS files
│ │ └── editor.css # CodeMirror styling
│ │
│ ├── types/
│ │ ├── editor.ts # Editor-related types
│ │ ├── conversion.ts # Conversion options types
│ │ └── platform.ts # Platform capability types
│ │
│ ├── App.tsx # Root component
│ ├── main.tsx # Entry point
│ └── vite-env.d.ts
├── src-tauri/ # Tauri backend (Rust)
│ ├── src/
│ │ ├── main.rs # Tauri entry
│ │ ├── commands/ # IPC command handlers
│ │ │ ├── fs.rs # File system operations
│ │ │ ├── convert.rs # Pandoc, FFmpeg wrappers
│ │ │ └── system.rs # System utilities
│ │ └── lib.rs
│ ├── Cargo.toml
│ └── tauri.conf.json
├── public/
│ ├── manifest.json # PWA manifest
│ ├── sw.js # Service worker
│ ├── fonts/ # JetBrains Mono, Inter
│ └── icons/ # App icons
├── package.json
├── vite.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── components.json # Shadcn/ui config
```
---
## 2. Component Architecture
```tsx
// Component hierarchy
<App> // Root layout, theme provider
<Layout>
<TitleBar /> // Draggable title bar (desktop only)
<TabBar /> // Document tabs
<MainContent>
<Sidebar> // Collapsible sidebar
<ExplorerPanel />
<GitPanel />
<SnippetsPanel />
<TemplatesPanel />
<EditorPane> // Split view container
<CodeMirrorEditor />
<PreviewPane>
<MarkdownPreview />
<BottomPanel> // REPL, terminal, output
<StatusBar /> // Line count, encoding, status
<Dialogs> // Portal-based dialogs
<ExportDialog />
<BatchConvertDialog />
<SettingsDialog />
<ThemeDialog />
<PdfEditorDialog />
```
**Key Components:**
| Component | Props | Responsibility |
|-----------|-------|----------------|
| `CodeMirrorEditor` | `content`, `onChange`, `theme` | Wrap CodeMirror 6 with React |
| `MarkdownPreview` | `content`, `theme` | Render sanitized HTML with themes |
| `TabBar` | `tabs`, `activeId`, `onSelect`, `onClose` | Manage document tabs |
| `Sidebar` | `activePanel`, `collapsed` | Collapsible sidebar container |
| `ExportDialog` | `format`, `options` | Export configuration UI |
---
## 3. State Management (Zustand)
### Editor Store
```typescript
interface Tab {
id: string;
title: string;
content: string;
filePath?: string;
isDirty: boolean;
cursorPosition: { line: number; column: number };
}
interface EditorState {
tabs: Tab[];
activeTabId: string | null;
// Actions
createTab: (title?: string) => string;
closeTab: (id: string) => void;
setActiveTab: (id: string) => void;
updateContent: (id: string, content: string) => void;
updateCursorPosition: (id: string, pos: { line: number; column: number }) => void;
markSaved: (id: string, filePath?: string) => void;
}
```
### Settings Store
```typescript
interface SettingsState {
theme: string;
fontSize: number;
fontFamily: string;
previewMode: 'split' | 'editor' | 'preview';
showLineNumbers: boolean;
wordWrap: boolean;
autoSave: boolean;
autoSaveInterval: number;
}
```
**Stores Summary:**
| Store | State | Persisted |
|-------|-------|-----------|
| `editorStore` | Tabs, content, cursor | Tab metadata only |
| `settingsStore` | User preferences | Yes |
| `themeStore` | Active theme, custom themes | Yes |
| `sidebarStore` | Panel state, width | Yes |
---
## 4. Platform Adapters
### Adapter Interface
```typescript
export interface PlatformAdapter {
name: 'tauri' | 'web';
// File System
fs: {
readFile: (path: string) => Promise<string>;
writeFile: (path: string, content: string) => Promise<void>;
deleteFile: (path: string) => Promise<void>;
listDirectory: (path: string) => Promise<FileInfo[]>;
exists: (path: string) => Promise<boolean>;
watchDirectory?: (path: string, callback: WatchCallback) => () => void;
};
// Conversion
convert: {
toPdf: (content: string, options: PdfOptions) => Promise<Blob>;
toDocx: (content: string, options: DocxOptions) => Promise<Blob>;
toHtml: (content: string, options: HtmlOptions) => Promise<string>;
batchConvert: (files: string[], format: string) => Promise<ConversionResult[]>;
};
// Capabilities
capabilities: {
hasPandoc: boolean;
hasFfmpeg: boolean;
hasLibreOffice: boolean;
hasDirectFs: boolean;
hasSystemNotifications: boolean;
};
}
```
### Platform Detection
```typescript
// Auto-detect platform at startup
const isTauri = typeof window !== 'undefined' &&
'__TAURI__' in window;
export const adapter: PlatformAdapter = isTauri
? tauriAdapter
: webAdapter;
```
### Capability Differences
| Feature | Tauri (Desktop) | Web (PWA) |
|---------|-----------------|-----------|
| File System | Direct access | IndexedDB + File System Access API |
| PDF Export | Pandoc (native) | WASM converter |
| DOCX Export | Pandoc (native) | Limited/not available |
| Media Conversion | FFmpeg (native) | Cloud API or limited |
| File Watching | Native events | Not available |
| Offline | Always | Service Worker |
---
## 5. Build Configuration
### Vite Configuration
- Target: ESNext
- Minifier: esbuild
- Code splitting by vendor chunks
- Source maps enabled
### Tailwind Configuration
- Dark mode: `class` strategy
- Custom colors using CSS variables
- Custom font families (JetBrains Mono, Inter)
- Tailwindcss-animate plugin
### TypeScript Configuration
- Target: ES2022
- Strict mode enabled
- All strict checks enabled
- Path aliases (`@/*`)
### Bundle Sizes (Estimated)
| Chunk | Size (gzipped) |
|-------|----------------|
| `vendor-react` | ~12KB |
| `vendor-editor` | ~45KB |
| `vendor-markdown` | ~35KB |
| `vendor-ui` | ~15KB |
| `app` (your code) | ~30KB |
| **Total PWA** | **~137KB** |
| Tauri desktop | ~5-10MB (with WebView) |
---
## 6. Tauri Backend (Rust)
### IPC Commands
**File System:**
- `read_file` - Read file content
- `write_file` - Write file content
- `delete_file` - Delete file
- `list_directory` - List directory contents
- `path_exists` - Check path existence
- `watch_directory` - Watch for file changes
**Conversion:**
- `to_pdf` - Convert to PDF via Pandoc
- `to_docx` - Convert to DOCX via Pandoc
- `to_html` - Convert to HTML via Pandoc
- `batch_convert` - Batch conversion
**System:**
- `check_dependencies` - Check for Pandoc, FFmpeg, LibreOffice
- `get_config_dir` - Get config directory path
### Security Comparison
| Aspect | Electron (Current) | Tauri |
|--------|-------------------|-------|
| `nodeIntegration` | `true` (CVE) | Not possible |
| `contextIsolation` | `false` (CVE) | Always enforced |
| Bundle size | ~150MB | ~5-10MB |
| Memory usage | Higher | Lower |
| IPC security | Manual whitelist | Compile-time verified |
---
## 7. PWA Configuration
### Web App Manifest
- Name: Markdown Converter
- Display: Standalone
- Theme color: #5661b3
- File handlers for .md, .markdown, .txt
- Share target for receiving shared content
### Service Worker
- Cache-first for static assets
- Network-first for API calls
- Stale-while-revalidate for dynamic content
- Automatic update detection
### IndexedDB Storage
**Stores:**
- `files` - Offline file storage
- `settings` - User preferences
- `templates` - Custom templates
### PWA Features
| Feature | Implementation |
|---------|---------------|
| Offline support | Service Worker + IndexedDB |
| Install prompt | Web App Manifest |
| File handling | File System Access API (Chrome) |
| Share target | Share Target API |
| Background sync | Background Sync API |
---
## 8. Migration Plan
### Timeline: 8 Weeks
**Phase 1: Foundation (Week 1-2)**
- Initialize new repo
- Setup Vite + React + TypeScript
- Configure Tailwind + Shadcn/ui
- Setup Zustand stores
- Create platform adapter interfaces
- Setup Tauri project structure
**Phase 2: Core Editor (Week 3-4)**
- CodeMirrorEditor component
- MarkdownPreview component
- SplitPane layout
- Theme system
- Tab management
- Keyboard shortcuts
**Phase 3: Sidebar & Panels (Week 5)**
- Sidebar container
- ExplorerPanel
- GitPanel
- SnippetsPanel
- TemplatesPanel
- Bottom panel
**Phase 4: Platform Adapters (Week 6)**
- Web adapter implementation
- Tauri adapter implementation
- File system operations
- PDF conversion
- Capability detection
**Phase 5: Export & Conversion (Week 7)**
- ExportDialog
- BatchConvertDialog
- UniversalConverterDialog
- ImageConverterDialog
- AudioConverterDialog
- VideoConverterDialog
- PDF Editor Dialog
**Phase 6: PWA & Polish (Week 8)**
- Service Worker setup
- Web App Manifest
- IndexedDB storage
- Offline mode indicator
- Settings persistence
- Accessibility audit
- Performance optimization
### Parallel Development Strategy
```
Current Electron App (v4.x) New React+Tauri App (v5.0)
│ │
│ Bug fixes only │ Active development
│ Security patches │ Feature migration
▼ ▼
Stable release ────────────> Beta release
(maintained) (new features)
```
---
## 9. Design Decisions Summary
| Decision | Choice | Rationale |
|----------|--------|-----------|
| Code Structure | Single repo with platform adapters | Lightest weight, clean separation |
| State Management | Zustand | Minimal (~1KB), simple API |
| UI Library | Shadcn/ui + Tailwind | Copy-paste ownership, excellent DX |
| Build Tool | Vite | Industry standard, fast HMR |
| TypeScript | Strict mode | Maximum type safety |
| Desktop Features | Hybrid (WASM core, desktop advanced) | Best of both worlds |
| Migration | Parallel development | Zero disruption to stable release |
---
## 10. Success Criteria
- [ ] All core editor features functional on both Tauri and PWA
- [ ] Bundle size under 150KB for PWA
- [ ] All 13 themes migrated and working
- [ ] Export to PDF works on both platforms
- [ ] Offline mode fully functional in PWA
- [ ] WCAG 2.1 AA accessibility compliance
- [ ] TypeScript strict mode with no `any` types
- [ ] All IPC channels have TypeScript types
- [ ] Security audit passes with no critical issues
---
## Appendix: Dependencies
### Production Dependencies
- `react` - UI library
- `react-dom` - React DOM renderer
- `zustand` - State management
- `@radix-ui/react-*` - Headless UI primitives
- `@codemirror/*` - Code editor
- `marked` - Markdown parser
- `highlight.js` - Syntax highlighting
- `mermaid` - Diagram rendering
- `dompurify` - HTML sanitization
- `class-variance-authority` - Component variants
- `clsx` + `tailwind-merge` - Class utilities
- `lucide-react` - Icons
### Development Dependencies
- `@tauri-apps/cli` - Tauri CLI
- `typescript` - TypeScript compiler
- `vite` - Build tool
- `tailwindcss` - CSS framework
- `eslint` - Linting
- `prettier` - Formatting
---
*Document generated: 2026-03-15*
*Next step: Invoke writing-plans skill to create detailed implementation plan*
File diff suppressed because it is too large Load Diff
@@ -1,202 +0,0 @@
# Modal System Design
**Date:** 2026-03-24
**Version:** 4.0.0
**Status:** Approved
## Overview
Replace the existing dialog implementations with a unified modal system that provides:
- Glassmorphism backdrop matching app aesthetic
- Full accessibility (ARIA, focus trap, keyboard navigation)
- Smooth fade + scale animations
- Consistent API via `ModalManager` class
## Decisions Made
| Decision | Choice | Rationale |
|----------|--------|-----------|
| Architecture | Unified `ModalManager` class | Cleaner, consistent behavior across all modals |
| Backdrop style | Glassmorphism | Matches existing app design language |
| Focus management | Focus first interactive element | Standard, predictable behavior |
| Animation | Fade + scale (95% → 100%) | Modern, subtle effect |
| Implementation | Custom (not native `<dialog>`) | Full control, no polyfill concerns |
## Architecture
### File Structure
```
src/
├── utils/
│ └── ModalManager.js # Core modal logic (~150 lines)
├── styles/
│ └── modal.css # Unified modal styles (~200 lines)
└── index.html # Updated dialog markup
```
### ModalManager Class
```javascript
class ModalManager {
constructor(element, options = {})
open() // Show modal with animation
close() // Hide modal with animation
destroy() // Cleanup event listeners
on(event, callback) // Event subscription
// Internal
#createBackdrop() // Create glassmorphism backdrop
#trapFocus() // Manage focus within modal
#handleKeydown(e) // Escape key handler
#getFocusableElements() // Query focusable children
}
```
### Events
- `open` — Fired after open animation completes
- `close` — Fired after close animation completes
## CSS Design
### Variables (from tokens.css)
```css
--z-modal: 200;
--transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
--radius-lg: 0.5rem;
```
### Backdrop
```css
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: var(--z-modal);
}
```
### Modal Container
```css
.modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: calc(var(--z-modal) + 1);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-normal),
visibility var(--transition-normal);
}
.modal.open {
opacity: 1;
visibility: visible;
}
```
### Modal Content (with animation)
```css
.modal-content {
background: hsl(var(--background));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
max-width: 90vw;
max-height: 90vh;
overflow: hidden;
transform: scale(0.95);
transition: transform var(--transition-normal);
}
.modal.open .modal-content {
transform: scale(1);
}
```
## HTML Structure
All dialogs convert to unified structure:
```html
<div id="export-dialog"
class="modal"
role="dialog"
aria-modal="true"
aria-labelledby="export-dialog-title">
<div class="modal-backdrop" data-close></div>
<div class="modal-content">
<div class="modal-header">
<h3 id="export-dialog-title">Export Options</h3>
<button class="modal-close" aria-label="Close">&times;</button>
</div>
<div class="modal-body">
<!-- Dialog-specific content -->
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-close>Cancel</button>
<button class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
```
### Key Attributes
- `role="dialog"` — Screen reader identification
- `aria-modal="true"` — Prevents screen reader from accessing background
- `aria-labelledby` — References the dialog title
- `data-close` — Click handler for closing (backdrop, cancel buttons)
## Accessibility Features
1. **Focus trap** — Tab cycles within modal only
2. **Focus first element** — Auto-focuses first input/button on open
3. **Escape key** — Closes modal
4. **Click outside** — Clicking backdrop closes modal
5. **Focus restoration** — Returns focus to trigger element on close
6. **ARIA attributes** — Proper screen reader support
## Dialogs to Migrate
| Dialog ID | Current Class | Complexity |
|-----------|--------------|------------|
| `find-dialog` | `.find-dialog` | Simple |
| `export-dialog` | `.export-dialog` | Complex (many sections) |
| `print-preview-overlay` | `.export-dialog` | Medium |
| `table-generator-dialog` | `.export-dialog` | Simple |
| `ascii-art-dialog` | `.export-dialog` | Medium |
| `universal-converter-dialog` | `.export-dialog` | Complex |
| `batch-dialog` | `.batch-dialog` | Complex |
| `pdf-editor-dialog` | `.export-dialog` | Complex |
| `header-footer-dialog` | `.export-dialog` | Medium |
| `field-picker-dialog` | `.export-dialog` | Simple |
## Migration Steps
1. Create `src/utils/ModalManager.js`
2. Create `src/styles/modal.css`
3. Update `index.html` to include new stylesheet
4. Convert each dialog HTML to new structure
5. Initialize `ModalManager` instances in `renderer.js`
6. Remove old CSS from `styles.css`
7. Test all dialogs
## Out of Scope
- Modal nesting (stacked modals) — can be added later if needed
- Animated backdrop (currently static blur)
- Modal size variants (small/large/fullscreen) — can use inline styles
File diff suppressed because it is too large Load Diff
@@ -1,326 +0,0 @@
# V4 Enhancement + Flutter Exploration Design
**Date:** 2026-03-24
**Status:** Approved
**Approach:** Incremental V4 Enhancement + Flutter Spike (70/30 split)
---
## Executive Summary
This design outlines a two-track approach:
1. **V4 Enhancement (70%)**: Fix critical bugs, optimize performance, add platform adapters, improve UI patterns
2. **Flutter Exploration (30%)**: Build proof-of-concept for cross-platform evaluation (Windows, Mobile, Web)
---
## Goals & Scope
### Primary Goals
1. **Fix critical bug**: PDF and markdown multitab functionality
2. **Performance improvements**: Faster startup, smoother editing, responsive preview
3. **Architecture improvements**: Platform adapters, cleaner state management
4. **Flutter research**: Proof-of-concept for cross-platform evaluation
### Out of Scope
- Full V5 migration
- Complete UI redesign
- New features (focus on optimization)
### Success Criteria
| Metric | Current | Target |
|--------|---------|--------|
| Startup time | ~3-5s | <2s |
| Editor typing latency | Noticeable lag | <16ms |
| Preview render (1MB file) | ~500ms | <200ms |
| Memory usage | ~300MB | <200MB |
| Bundle size | ~150MB | <100MB |
---
## Section 1: V4 Critical Fixes & Performance Optimizations
### 1.1 Fix: PDF/Markdown Multitab Bug
**Location:** `src/renderer.js` (TabManager class)
**Investigation areas:**
- `switchToTab()` - ensure proper state preservation
- `closeTab()` - ensure EditorView cleanup
- Add tab type tracking (markdown vs pdf)
- Isolate PDF viewer state from editor state
### 1.2 Startup Performance Optimizations
| Optimization | Implementation | Expected Gain |
|--------------|----------------|---------------|
| Defer Mermaid | Load only when diagram detected | ~500ms |
| Defer PDF.js | Load on first PDF open | ~800ms |
| Lazy load themes | Load active theme only | ~200ms |
| Lazy sidebar panels | Load panel code when sidebar opens | ~300ms |
| Preload optimization | Remove unused IPC channels | ~100ms |
**Lazy loading pattern:**
```javascript
// Current (loads everything upfront)
const { dialog } = require('@electron/remote');
// Optimized (load on demand)
let _dialog;
function getDialog() {
if (!_dialog) _dialog = require('@electron/remote').dialog;
return _dialog;
}
```
### 1.3 Editor Performance
| Issue | Solution |
|-------|----------|
| Typing lag with large files | Debounce preview updates (300ms) |
| Syntax highlight overhead | Use highlight.js lazy mode |
| Memory leaks | Clean up EditorView on tab close |
| Theme switching lag | Pre-compile theme CSS |
### 1.4 Preview Rendering
| Issue | Solution |
|-------|----------|
| Mermaid slow | Render on-demand, cache results |
| Full re-render on keystroke | Debounced incremental updates |
| Large documents | Viewport rendering (visible portion only) |
---
## Section 2: Platform Adapter Pattern
### 2.1 Architecture
```
src/
├── adapters/
│ ├── index.js # Auto-detects and exports adapter
│ ├── types.js # Interface definitions (JSDoc)
│ │
│ ├── electron/ # Current Electron implementation
│ │ ├── index.js # Exports electronAdapter
│ │ ├── fs.js # File system operations
│ │ ├── convert.js # Pandoc, FFmpeg conversions
│ │ ├── pdf.js # PDF operations
│ │ └── system.js # System info, dialogs, notifications
│ │
│ └── mock/ # For testing
│ └── index.js # Mock adapter for unit tests
```
### 2.2 Adapter Interface
```javascript
/**
* @typedef {Object} PlatformAdapter
* @property {'electron'} name
* @property {FileSystemAdapter} fs
* @property {ConversionAdapter} convert
* @property {PdfAdapter} pdf
* @property {SystemAdapter} system
*/
/**
* @typedef {Object} FileSystemAdapter
* @property {(path: string) => Promise<string>} readFile
* @property {(path: string, content: string) => Promise<void>} writeFile
* @property {(path: string) => Promise<void>} deleteFile
* @property {(path: string) => Promise<FileInfo[]>} listDirectory
* @property {(path: string) => Promise<boolean>} exists
*/
```
### 2.3 Migration Strategy
| Phase | What | Files Affected |
|-------|------|----------------|
| 1 | Create adapter structure | New files only |
| 2 | Migrate file operations | `renderer.js`, `sidebar/*.js` |
| 3 | Migrate conversions | Export dialogs |
| 4 | Migrate PDF operations | PDF viewer |
| 5 | Remove old IPC calls | `preload.js` cleanup |
---
## Section 3: UI Improvements (Shadcn/ui Patterns)
### 3.1 Design Token System
```css
/* src/styles/tokens.css */
:root {
/* Colors - Light mode */
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 227 44% 52%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--destructive: 0 84.2% 60.2%;
--border: 214.3 31.8% 91.4%;
--ring: 227 44% 52%;
/* Spacing & Radii */
--radius: 0.5rem;
}
```
### 3.2 Component Improvements
| Component | Current Issue | Fix |
|-----------|---------------|-----|
| Buttons | Inconsistent hover/focus | Use `.btn` with variants |
| Dialogs | Missing focus trap | Add focus trap, Escape key, aria-modal |
| Tabs | No keyboard navigation | Add arrow key nav, aria-selected |
| Sidebar | No collapse animation | CSS transitions |
| Dropdowns | Missing click-outside | Add proper event handling |
### 3.3 Accessibility Improvements
- Focus states with `:focus-visible`
- Skip to content link
- ARIA labels on interactive elements
- Keyboard navigation for all components
---
## Section 4: Flutter Exploration (30% Effort)
### 4.1 Flutter Project Structure
```
markdown-converter-flutter/
├── lib/
│ ├── main.dart
│ ├── app.dart
│ ├── core/
│ │ ├── theme/
│ │ └── constants.dart
│ ├── features/
│ │ ├── editor/
│ │ ├── preview/
│ │ └── tabs/
│ ├── services/
│ │ ├── file_service.dart
│ │ ├── export_service.dart
│ │ └── platform_service.dart
│ └── adapters/
│ ├── file_adapter.dart
│ ├── file_adapter_mobile.dart
│ ├── file_adapter_web.dart
│ └── file_adapter_desktop.dart
├── pubspec.yaml
├── windows/
├── web/
└── lib/
```
### 4.2 Key Dependencies
```yaml
dependencies:
flutter_markdown: ^0.7.0
flutter_code_editor: ^0.3.0
provider: ^6.1.0
file_picker: ^8.0.0
path_provider: ^2.1.0
pdf: ^3.10.0
printing: ^5.12.0
```
### 4.3 Prototype Features
| Feature | Priority |
|---------|----------|
| Basic markdown editor | Must have |
| Live preview | Must have |
| Light/dark theme | Must have |
| Tab management | Should have |
| File open/save | Should have |
| PDF export | Nice to have |
| Windows exe build | Must have |
| Web build | Must have |
| Mobile build | Should have |
### 4.4 Evaluation Criteria
| Metric | Target |
|--------|--------|
| Windows exe size | <50MB |
| Web initial load | <500KB |
| Cold start time | <2s |
| Editor typing latency | <16ms |
### 4.5 Flutter vs Tauri Comparison
| Aspect | Flutter | Tauri + React |
|--------|---------|---------------|
| Mobile support | ✅ Excellent | ❌ Requires separate app |
| Web performance | ⚠️ Good, larger | ✅ Excellent, small |
| Desktop bundle | ⚠️ ~30-50MB | ✅ ~5-10MB |
| Native feel | ⚠️ Custom rendering | ✅ System WebView |
| Code reuse | ✅ 100% shared | ⚠️ Some platform-specific |
---
## Implementation Timeline
### Phase 1: V4 Critical Fixes (Week 1)
- Fix PDF/markdown multitab bug
- Implement startup optimizations
- Add debounced preview rendering
### Phase 2: Platform Adapters (Week 2)
- Create adapter structure
- Migrate file operations
- Migrate conversions
### Phase 3: UI Improvements (Week 3)
- Add design tokens
- Improve component accessibility
- Add keyboard navigation
### Phase 4: Flutter Prototype (Weeks 2-4, parallel)
- Set up Flutter project
- Implement basic editor
- Build Windows and Web versions
- Document findings
---
## Risk Mitigation
| Risk | Mitigation |
|------|------------|
| Multitab fix causes regressions | Comprehensive test suite before changes |
| Performance optimizations break features | Incremental changes with benchmarks |
| Flutter proves unsuitable | 30% effort limit, V4 remains primary |
| Platform adapter migration too slow | Phased approach, each phase independent |
---
## Success Metrics
- [ ] Multitab functionality working correctly
- [ ] Startup time < 2 seconds
- [ ] No perceived editor lag with files < 1MB
- [ ] Preview renders in < 200ms
- [ ] Bundle size reduced by 30%+
- [ ] Platform adapters for fs, convert, pdf implemented
- [ ] Design tokens applied to all components
- [ ] Flutter prototype running on Windows + Web
- [ ] Flutter evaluation documented with recommendation
---
*Document generated: 2026-03-24*
*Next step: Create detailed implementation plan*
@@ -1,335 +0,0 @@
# Writer's Studio Feature Pack — Design Document
**Date**: 2026-04-06
**Version**: 4.2.0 target
**Status**: Approved
**Scope**: Three cohesive features to transform MarkdownConverter into a writing environment
---
## Overview
The Writer's Studio Feature Pack adds three interconnected features to MarkdownConverter:
1. **Zen Mode** — Distraction-free writing environment with typewriter scrolling
2. **Document Outline** — Heading hierarchy sidebar panel for navigation
3. **Writing Analytics** — Real-time readability and vocabulary analysis dashboard
These features work together: Zen Mode creates the environment, Outline provides navigation, Analytics gives insight.
---
## Feature 1: Zen Mode
### Purpose
Transform the app from a multi-tool into a focused writing environment. Inspired by iA Writer, Typora, and Bear.
### New Files
- `src/zen-mode.js` — ZenMode class (~150 lines)
- `src/styles-zen.css` — Zen mode specific styles (~120 lines)
### Integration Points
- `src/renderer.js` — Initialize ZenMode, register F11 shortcut, add View > Zen Mode menu
- `src/editor/codemirror-setup.js` — Export typewriter + dimming extensions
### Behavior
**Toggle**: F11, View > Zen Mode, command palette "Toggle Zen Mode"
**Exit**: Escape key, F11 again
**What hides**:
- Tab bar
- Toolbar
- Sidebar (collapsed)
- Status bar
- App header
**What shows**:
- Editor (full viewport)
- Floating HUD (bottom-center, semi-transparent)
### Floating HUD
```
┌─────────────────────────────────────────┐
│ 847 words • ~4 min • 23:45 session │
│ ████████████████░░░░ 85% of 1000 │
└─────────────────────────────────────────┘
```
- Word count (from existing status bar logic)
- Estimated reading time (~200 wpm)
- Session timer (starts when zen mode activates)
- Optional progress bar toward word goal
### CodeMirror Extensions
**Typewriter Scroll** (`ViewPlugin`):
- Listens to `EditorView.update` for selection changes
- Calls `editor.dispatch({ effects: EditorView.scrollIntoView(pos, { y: 'center' }) })`
- Smooth scrolling with `scrollBehavior: 'smooth'` in CSS
**Line Dimming** (`ViewPlugin` + `Decoration`):
- Builds a `DecorationSet` mapping each line to an opacity value
- Active line: opacity 1.0
- 1-2 lines away: 0.7
- 3-4 lines away: 0.5
- 5+ lines away: 0.3
- Uses `Decoration.line({ attributes: { style: 'opacity: X' } })`
### Centered Column
CSS applied to `.zen-mode .cm-content`:
```css
.zen-mode .cm-content {
max-width: 700px;
margin: 0 auto;
font-size: 18px;
line-height: 1.8;
}
```
### State Management
- `this.previousState` stores which UI elements were visible before zen mode
- On exit, restores all elements to their previous visibility
- Editor content, cursor position, and scroll state are never modified
---
## Feature 2: Document Outline Panel
### Purpose
Provide always-visible heading navigation for documents of any length. The single most-requested navigation feature for multi-section documents.
### New Files
- `src/sidebar/outline-panel.js``renderOutlinePanel` function (~100 lines)
### Modified Files
- `src/index.html` — Add outline icon button in sidebar icons strip
- `src/renderer.js` — Register 'outline' panel, provide editor reference
### Sidebar Integration
Uses existing `SidebarManager.registerPanel()` API:
```javascript
sidebarManager.registerPanel('outline', {
title: 'Outline',
render: (container) => renderOutlinePanel(container, editor, editorContent)
});
```
New icon button in sidebar strip (after templates icon):
```html
<button class="sidebar-icon" data-panel="outline" title="Outline (Ctrl+Shift+O)">
<!-- hierarchy/list icon SVG -->
</button>
```
### Parsing Logic
Parse headings from raw markdown content using regex:
```javascript
const headingRegex = /^(#{1,6})\s+(.+)$/gm;
```
Returns array of:
```javascript
{ level: 1-6, text: "Heading Text", line: 42 }
```
Debounced at 300ms to avoid re-parsing on every keystroke.
### UI Structure
```
┌──────────────────────────────────────────┐
│ OUTLINE ☰ │
├──────────────────────────────────────────┤
│ ▸ Introduction (H1) │
│ ▸ Getting Started (H2) │
│ ▸ Prerequisites (H2) │
│ ▸ Node.js (H3) ◄ │
│ ▸ Installation (H2) │
│ ▸ Features (H1) │
│ ▸ Editor (H2) │
│ ▸ Export (H2) │
├──────────────────────────────────────────┤
│ 9 headings • 2 H1 • 4 H2 • 3 H3 │
└──────────────────────────────────────────┘
```
- Indentation based on heading level (H1 = 0px, H2 = 16px, H3 = 32px, etc.)
- Current heading highlighted with accent color (◄ indicator)
- Hover shows full heading text if truncated
### Click-to-Navigate
```javascript
editor.dispatch({
effects: EditorView.scrollIntoView(linePos, { y: 'center' })
});
```
Brief highlight animation on the target line (fades out over 500ms).
### Current Heading Sync
On editor update (debounced 100ms):
1. Get cursor line number
2. Find the last heading whose line number <= cursor line
3. Set that heading as active in the outline
### Empty State
When no headings found:
```
No headings found
Use # to create headings:
# Heading 1
## Heading 2
### Heading 3
```
---
## Feature 3: Writing Analytics
### Purpose
Give writers real-time insight into their document's readability, structure, and vocabulary. This is the "surprise" feature most Markdown editors lack.
### New Files
- `src/analytics/writing-analytics.js``WritingAnalytics` class (~180 lines)
- `src/analytics/analytics-panel.js``renderAnalyticsPanel` function (~120 lines)
### Integration Points
- `src/renderer.js` — Register Ctrl+Shift+A shortcut, command palette entry, View menu item
### Trigger
- Keyboard: `Ctrl+Shift+A`
- Command Palette: "Show Writing Analytics"
- Menu: View > Writing Analytics
### Presentation
Uses existing `ModalManager` to show a modal overlay with analytics dashboard.
```
┌─────────────────────────────────────────────────────┐
│ Writing Analytics ✕ │
├─────────────────────────────────────────────────────┤
│ │
│ ┌─ Readability ──────────────────────────────────┐ │
│ │ Flesch Reading Ease: 67.3 (Standard) ○ │ │
│ │ Grade Level: 8.2 ○○○●○ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─ Timing ───────────────────────────────────────┐ │
│ │ Reading Time: ~4 min │ │
│ │ Speaking Time: ~6 min │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─ Structure ────────────────────────────────────┐ │
│ │ Sentences: 42 • Paragraphs: 8 │ │
│ │ Avg Sentence: 14.2 words │ │
│ │ Longest: 38 words ("The quick brown fox...") │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─ Vocabulary ───────────────────────────────────┐ │
│ │ Unique: 312 / 847 words (36.8%) │ │
│ │ Top: the(42) and(31) markdown(28) ... │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─ Word Goal ────────────────────────────────────┐ │
│ │ Target: [1000] words │ │
│ │ ████████████████░░░░ 847/1000 (85%) │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
```
### Metrics Implementation
**Readability (Flesch-Kincaid):**
```javascript
// Flesch Reading Ease
ease = 206.835 - 1.015 * (words / sentences) - 84.6 * (syllables / words);
// Flesch-Kincaid Grade Level
grade = 0.39 * (words / sentences) + 11.8 * (syllables / words) - 15.59;
```
**Syllable Estimation:**
```javascript
function countSyllables(word) {
word = word.toLowerCase().replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '');
word = word.replace(/^y/, '');
return word.match(/[aeiouy]{1,2}/g)?.length || 1;
}
```
**Reading/Speaking Time:**
- Reading: 200 words/minute
- Speaking: 130 words/minute
**Lexical Diversity:**
- Ratio of unique words to total words (excluding stop words)
**Top Words:**
- Frequency map, sorted descending, top 10
- Excludes common stop words (the, a, an, is, are, etc.)
### Word Goal
- Persisted in `electron-store` per document (or global default)
- Progress bar with percentage
- Celebration effect when goal is reached (brief confetti animation or green flash)
### Update Cadence
- Re-analyzes on editor content change (debounced at 1000ms)
- If modal is open, updates live
- If modal is closed, no computation (zero overhead)
---
## File Summary
| File | Action | Purpose |
|------|--------|---------|
| `src/zen-mode.js` | Create | ZenMode class with CM6 extensions |
| `src/styles-zen.css` | Create | Zen mode styling |
| `src/sidebar/outline-panel.js` | Create | Outline sidebar panel |
| `src/analytics/writing-analytics.js` | Create | Analytics computation engine |
| `src/analytics/analytics-panel.js` | Create | Analytics modal UI |
| `src/index.html` | Modify | Add outline icon, zen mode button |
| `src/renderer.js` | Modify | Initialize all three features |
| `src/editor/codemirror-setup.js` | Modify | Export typewriter + dimming extensions |
## Keyboard Shortcuts
| Shortcut | Feature | Action |
|----------|---------|--------|
| F11 | Zen Mode | Toggle on/off |
| Escape | Zen Mode | Exit (when active) |
| Ctrl+Shift+O | Outline | Open outline sidebar panel |
| Ctrl+Shift+A | Analytics | Open analytics modal |
## Dependencies
No new npm dependencies required. All features use:
- Existing CodeMirror 6 APIs (ViewPlugin, Decoration, scrollIntoView)
- Existing SidebarManager API
- Existing ModalManager API
- Pure JavaScript math for analytics
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
File diff suppressed because it is too large Load Diff
@@ -1,426 +0,0 @@
# MarkdownConverter v5.0 — Platform Design
**Date:** 2026-04-14
**Status:** Approved
**Author:** Amit Haridas
## Overview
Transform MarkdownConverter from a monolithic editor into an extensible platform with a plugin system and three feature packs, shipped together as v5.0.
## Subsystems
1. **Plugin System** — Lightweight plugin registry with extension points (sidebar, commands, settings, status bar, export hooks, event bus)
2. **Writing Studio Plugin** — Manuscript manager, goal tracking, writing sprints, snapshots, smart proofreading
3. **AI Assistant Plugin** — Multi-provider AI writing assistant (Ollama, LMStudio, GGUF direct with GPU, Anthropic, OpenAI)
4. **Collaboration Plugin** — Git-based async collaboration, comments/annotations, review requests
## Core Principle
**Existing functionality is never replaced or broken.** The plugin system is additive. All existing keyboard shortcuts, features, and UI remain untouched. Plugin shortcuts use `Ctrl+Alt+` namespace.
---
## 1. Plugin System
### File Structure
```
src/
plugins/
plugin-registry.js # Load, register, lifecycle
plugin-api.js # Base class plugins extend
plugin-loader.js # Discovers and validates manifests
built-in/
writing-studio/
manifest.json
index.js
panels/
components/
ai-assistant/
manifest.json
index.js
providers/
collaboration/
manifest.json
index.js
```
### Manifest Schema
```json
{
"id": "writing-studio",
"name": "Writing Studio",
"version": "1.0.0",
"description": "Manuscript management, goal tracking, writing sprints",
"icon": "pen-tool",
"extensionPoints": {
"sidebar": { "panel": "panels/manuscript-panel.js", "order": 30 },
"settings": { "section": "settings/index.js" },
"statusBar": { "indicators": ["sprint-timer", "word-goal"] },
"commands": [
{ "id": "start-sprint", "label": "Start Writing Sprint", "shortcut": "Ctrl+Alt+S" },
{ "id": "take-snapshot", "label": "Take Snapshot", "shortcut": "Ctrl+Alt+N" }
],
"exportHooks": {
"preExport": "hooks/pre-export.js",
"postExport": "hooks/post-export.js"
}
},
"settings": [
{ "key": "dailyGoal", "type": "number", "default": 1000, "label": "Daily word goal" },
{ "key": "sprintDuration", "type": "number", "default": 25, "label": "Sprint duration (min)" }
]
}
```
### Plugin Lifecycle
1. PluginLoader discovers manifests in `built-in/` + user plugins directory
2. PluginRegistry validates manifests
3. Each plugin calls `Plugin.init(context)` receiving scoped API context
4. Extension points registered (sidebar panels, commands, status bar items)
5. Plugins activate lazily — sidebar panel loads JS when user clicks tab
### Plugin Context API
Each plugin's `init()` receives:
```javascript
{
sidebar: {
registerPanel(id, { icon, title, component })
},
commands: {
register(id, label, handler, shortcut?)
},
statusBar: {
registerIndicator(id, { position, render })
},
settings: {
get(key), // plugin-scoped
set(key, value), // auto-persisted via electron-store
onChanged(key, callback)
},
editor: {
getContent(), // current document
getSelection(), // selected text
insertAtCursor(text), // requires opt-in
onContentChanged(callback)
},
events: {
on(event, handler),
emit(event, data)
},
exports: {
registerPreHook(handler),
registerPostHook(handler)
},
ipc: {
invoke(channel, ...args),
on(channel, handler)
}
}
```
### Event Bus Events
Each event has a versioned payload schema. Breaking changes increment the version suffix.
```
document:opened → { filePath: string, tabId: string }
document:saved → { filePath: string, tabId: string }
document:changed → { tabId: string, content: string, wordCount: number }
editor:selection-changed → { tabId: string, text: string, from: {line,ch}, to: {line,ch} }
tab:switched → { tabId: string, filePath: string }
tab:closed → { tabId: string, filePath: string }
export:started → { format: string, filePath: string }
export:completed → { format: string, filePath: string, outputPath: string }
export:failed → { format: string, error: string }
plugin:loaded → { pluginId: string, version: string }
plugin:activated → { pluginId: string }
plugin:deactivated → { pluginId: string }
app:ready → {}
app:before-quit → {}
```
### Design Rules
- Built-in plugins use the same API as future third-party plugins
- Lazy activation — sidebar panels don't load until clicked
- Scoped settings: `plugins.<id>.<key>` in electron-store
- Plugin commands globally unique — registry rejects duplicate command IDs at load time
- **Plugin sandboxing**: each plugin handler is wrapped in try/catch. For CPU-intensive operations (AI inference, diff computation), plugins must delegate to main process via IPC. Handlers that block the renderer for >5s trigger a warning notification. Memory-hungry operations (GGUF inference) run in isolated child processes.
- **Cross-plugin graceful degradation**: plugins check `context.events.hasHandler('ai:analyze')` before emitting cross-plugin requests. If no handler (AI plugin disabled), show a "this feature requires the AI plugin" prompt instead of failing silently. All cross-plugin calls have a 30s timeout with default fallback behavior.
---
## 2. Writing Studio Plugin
### 2A. Manuscript / Project Manager
Folder-based project structure:
```
~/Manuscripts/
my-novel/
.project.json # { title, targets, metadata }
01-chapter-one.md
02-chapter-two.md
characters/
protagonist.md
research/
world-building.md
.snapshots/
2026-04-14T10-30.json
```
`.project.json`:
```json
{
"title": "My Novel",
"type": "manuscript",
"target": { "words": 80000, "deadline": "2026-09-01" },
"chapters": [
{ "file": "01-chapter-one.md", "title": "The Beginning", "status": "draft" }
],
"metadata": { "author": "", "genre": "", "synopsis": "" }
}
```
Sidebar panel shows project tree with drag-to-reorder, word counts per chapter, target progress bar. "Compile manuscript" exports all chapters as a single document.
### 2B. Goal Tracking & Writing Sprints
- **Status bar**: daily progress bar + sprint timer
- **Writing sprint**: configurable duration (15/25/30/45/60 min), word count delta, WPM at end
- **Goal tracking**: daily/weekly word goals, streak tracking, 30-day bar chart
- **Enhanced analytics**: session tracking, readability scores, productive time-of-day heatmap
- Data stored in `plugins.writing-studio.history` as date-keyed map
### 2C. Snapshot & Versioning
- `Ctrl+Alt+N` or toolbar button saves snapshot
- Stored as JSON: `{ timestamp, content, wordCount, cursorPos, label }`
- Snapshot panel in sidebar: Restore, Diff (side-by-side), auto-snapshot interval
- Snapshots in `.snapshots/` inside project folder, or app data if no project
### 2D. Smart Proofreading
Delegates to AI plugin via event bus. Writing Studio provides:
- Right-click context menu: "Check grammar", "Suggest alternatives", "Analyze readability"
- Inline wavy underline decorations for issues
- Proofread panel: issues categorized by type with Accept/Dismiss
### Commands
| Command | Shortcut | Action |
|---------|----------|--------|
| `start-sprint` | `Ctrl+Alt+S` | Start writing sprint |
| `stop-sprint` | `Ctrl+Alt+Shift+S` | Stop sprint |
| `take-snapshot` | `Ctrl+Alt+N` | Save snapshot |
| `restore-last-snapshot` | `Ctrl+Alt+Z` | Restore latest snapshot |
| `new-project` | — | Create manuscript project |
| `compile-manuscript` | `Ctrl+Alt+E` | Export all chapters |
| `proofread-document` | `Ctrl+Alt+G` | AI proofread |
---
## 3. AI Assistant Plugin
### Provider Architecture
```
AI Plugin
├── Provider Interface
│ ├── complete(prompt, options) → string
│ ├── stream(prompt, options) → AsyncIterable
│ └── analyze(text, type) → AnalysisResult
├── Providers
│ ├── OllamaProvider — localhost:11434
│ ├── LMStudioProvider — localhost:1234/v1
│ ├── GGUFProvider — direct llama.cpp with GPU support
│ ├── AnthropicProvider — Claude API
│ └── OpenAIProvider — GPT API
└── Features
├── Grammar/style check
├── Inline auto-complete
├── AI chat panel (sidebar)
├── Document analysis
└── Smart commands (command palette)
```
### Provider Details
**Ollama:** `GET /api/tags` for models, `POST /api/generate` and `POST /api/chat` for inference.
**LMStudio:** OpenAI-compatible API at `localhost:1234/v1`. `GET /v1/models`, standard chat completion format, SSE streaming.
**GGUF Direct (with GPU):**
- Ships bundled llama.cpp binaries per platform (CUDA, Vulkan, Metal, CPU variants)
- Auto-detects GPU: CUDA (nvidia-smi), Vulkan driver, Metal (macOS)
- GPU layer offloading: configurable, auto-suggests based on VRAM vs model size
- Settings: GPU backend selection, layer count, context length, thread count
- "Keep model loaded" option for faster repeated requests
- WASM fallback for sandboxed environments (CPU-only)
- External binary path for advanced users with custom builds
- **Process isolation**: llama.cpp runs as a spawned child process (not in main process). If it crashes, detected via exit handler, auto-restarted with notification. GPU memory freed on crash. App remains stable.
- Process management: spawn in server mode on localhost ephemeral port, clean up on app quit or model unload
**Cloud (Anthropic/OpenAI):**
- API key stored encrypted via electron safeStorage
- Token usage tracking with estimated cost
- Rate limit awareness with request queueing and backoff
### IPC Design
All provider HTTP requests go through main process:
- No CORS issues
- API keys never in renderer
- Main process enforces rate limiting
- GGUF inference in isolated child process
**Request/response lifecycle:**
```
Renderer → ipc.invoke('ai:complete') → Main → HTTP to provider → result → Renderer
```
**Streaming lifecycle with error handling:**
```
Renderer → ipc.invoke('ai:stream', { requestId, prompt })
← Main assigns requestId, returns { requestId }
← ipc.on('ai:chunk', { requestId, text }) — repeated
← ipc.on('ai:done', { requestId }) — success
← ipc.on('ai:error', { requestId, error }) — failure
// Cancellation
Renderer → ipc.invoke('ai:cancel', { requestId })
← Main aborts HTTP request, emits 'ai:done'
// Orphan cleanup: if renderer disconnects (crash/close),
// main process detects via 'render-view-deleted' and aborts all active streams.
// Heartbeat: if no chunk received in 30s, main emits 'ai:error' with timeout.
```
### Features
1. **Inline suggestions**: ghost text after configurable delay, Tab to accept, Esc to dismiss
2. **AI chat panel**: sidebar conversation, "Insert" / "Replace selection" buttons
3. **Document analysis**: grammar, style, tone, with accept/reject per suggestion
4. **Smart commands**: summarize, generate outline, find inconsistencies, translate, explain code
### Privacy
- Local-first: default provider is Ollama
- No telemetry: requests go direct to provider
- Content gating: exclude file types from AI
- Status bar shows "AI: processing..." with cancel option
- Cloud usage stats in settings (tokens, cost)
### Cross-Plugin Integration
```javascript
// Writing Studio calls AI Plugin
context.events.emit('ai:analyze', { text, type: 'grammar', callback });
```
---
## 4. Collaboration Plugin
### 4A. Enhanced Git Panel
Upgrades to existing git panel:
- Remote management (add/remove remotes, push/pull)
- Branch list and switching
- Commit history with diff viewer (side-by-side or unified)
- Conflict resolution UI (accept-ours/accept-theirs/per-edit)
### 4B. Shared Repository Workflow
1. Writer A creates project + initializes git + pushes to shared repo
2. Writer B clones repo from within MarkdownConverter
3. Both write on their own branches
4. Writer A creates review request (simplified PR)
Review request: changed files, word count diff, commit messages. Reviewer can approve, request changes, leave inline comments. Reviews are git branches + comments as git notes.
### 4C. Comments & Annotations
Inline comments stored as JSON in `.comments/` directory (git-tracked):
```json
{
"id": "uuid",
"file": "03-chapter-three.md",
"anchor": {
"contextBefore": "The hero looked at the horizon and said,",
"selectedText": "I will not go quietly into that dark night",
"contextAfter": "He turned to face the army alone."
},
"line": 142,
"text": "This dialogue feels unnatural",
"author": "amit",
"timestamp": "2026-04-14T14:30:00Z",
"replies": [],
"resolved": false
}
```
- **Anchor-based positioning**: comments store `contextBefore`, `selectedText`, and `contextAfter` (not absolute byte offsets). On file change, re-anchor by searching for the context text. If context no longer matches, mark comment as "detached" and show a warning. Falls back to `line` number as rough position.
- Highlighted text in editor with tooltip on hover
- Comment panel in sidebar: all unresolved comments across files
- Resolution workflow: add → address → reply → resolve
- Resolved comments dim but stay visible
### 4D. Change Notifications
- Status bar indicator: `↓ 3 new commits`
- Click to see changes, one-click pull
- Conflicts trigger resolution UI
- Push button only when local commits ahead of remote
### 4E. Offline-First
All writing happens locally. Git is the sync mechanism. No internet required for writing, commenting, snapshots, or sprints. Push/pull on user action or auto-sync setting.
### Commands
| Command | Shortcut | Action |
|---------|----------|--------|
| `collab:commit` | `Ctrl+Shift+G` | Commit with message |
| `collab:push` | — | Push current branch |
| `collab:pull` | — | Pull from remote |
| `collab:add-comment` | `Ctrl+Alt+C` | Comment on selection |
| `collab:next-comment` | `F8` | Next unresolved comment |
| `collab:prev-comment` | `Shift+F8` | Previous comment |
| `collab:create-review` | — | Create review request |
### Cross-Plugin Integration
```javascript
context.events.emit('snapshot:created', { file, snapshotId });
context.events.on('project:chapter-opened', (chapter) => { /* load comments */ });
context.events.on('comment:added', (comment) => { /* AI could suggest fix */ });
```
---
## Bundle Size Impact
- llama.cpp binaries: ~15MB per GPU variant. Only target platform shipped. GPU variants (CUDA/Vulkan/Metal) downloaded on demand if user enables GGUF direct loading — not bundled by default. Only CPU fallback bundled (~15MB).
- Plugin system core: ~30KB
- Each built-in plugin: ~50-100KB
- Diff library (jsdiff): ~15KB
- Total estimated increase: ~20-30MB (core), additional ~30-50MB per GPU variant (lazy download)
## Testing Strategy
- Plugin system: unit tests for registry, loader, context API mocking
- Each plugin: isolated unit tests, integration tests via plugin context
- AI provider tests: mock HTTP responses, test streaming parsing
- Git tests: use test repository fixture
- E2E: verify plugin loading doesn't break existing features
@@ -1,399 +0,0 @@
# 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
@@ -1,250 +0,0 @@
# 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
@@ -1,303 +0,0 @@
# 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
@@ -1,361 +0,0 @@
# MarkdownConverter — React + shadcn/ui UI Redesign
**Date:** 2026-06-05
**Status:** Design (awaiting user approval)
**Branch:** `react-electron`
**Author:** Brainstormed with user via superpowers:brainstorming
## Summary
Replace the legacy vanilla JS renderer (`src/renderer.js` is 213 KB; `src/styles.css` is 74 KB) with a modern React 19 + Vite + TypeScript + shadcn/ui renderer that achieves visual feature parity while delivering a Polished + Glassy (Raycast/Arc-style) aesthetic. The Electron main process, preload bridge, and IPC contracts stay unchanged. Work proceeds via vertical slices — each PR ships a demoable feature.
## Goals
1. Replace every render-time feature of the legacy renderer with an idiomatic React + shadcn/ui implementation.
2. Adopt the "Polished + Glassy" visual language (subtle shadows, 812 px radii, gradient accents, gentle depth) on top of the existing ConcreteInfo brand tokens and design system.
3. Use a single component foundation (shadcn/ui) and a single motion library (Motion / Framer Motion) to keep the dependency surface narrow and the design coherent.
4. Keep the main process, preload, and IPC contracts untouched. The renderer is the only surface being rewritten.
5. Keep the app runnable at every commit. No "big bang" merge.
## Non-Goals
- Migrating the main process to TypeScript (out of scope for this spec).
- Adding new features the legacy renderer does not have (plugin system, AI features, etc. — those are future specs).
- Replacing Pandoc/FFmpeg/ImageMagick orchestration.
- Changing the packaging pipeline (electron-builder config stays).
- Replacing the CodeMirror 6 editor — it is the right tool and is already wired up.
## Decisions Locked During Brainstorming
| Decision | Choice | Why |
|---|---|---|
| Scope | Full feature parity with legacy renderer | User-selected option. Renderer is one cohesive surface; splitting it across specs would force premature contracts. |
| Visual style | **B — Polished + Glassy** (Raycast/Arc aesthetic) | "Fancy" comes from elevation, gradient accents, and material depth — not over-designed visuals. |
| Layout | **2 — IDE-style** (equal editor/preview, draggable divider, collapsible sidebar) | Power-user markdown apps converge on this. Draggable divider + keyboard reset. |
| Modal patterns | **A (Centered Dialog), B (Right Side-Sheet), D (Toasts)** | No command palette. |
| Command palette | **No** — full menus, no ⌘K | Power users can use the OS-level launcher. App stays focused on writing. |
| Animation | **Motion (Framer Motion)** | Best for layout transitions, modal/drawer enter/exit, drag. Sparingly used. |
| Component library | **shadcn/ui** | Tailwind + Radix primitives, copy-paste ownership, perfect fit for the "glassy" aesthetic and the HSL-CSS-variable foundation that is already in place. |
| Implementation strategy | **Vertical slices** — one feature end-to-end per PR | App stays runnable. Each PR is reviewable. |
## Defaults (Used Unless Overridden Later)
| Item | Default | Why |
|---|---|---|
| State management | Zustand (already in deps) + Immer for nested patches | Already in `package.json`; perfect for editor state. |
| Theming | shadcn `next-themes`, dark default + light, system-aware | shadcn canonical pattern. Brand colors already in CSS vars. |
| Icons | `lucide-react` (already in deps) | 1000+ tree-shakable icons. |
| Forms | `react-hook-form` + `zod` | Standard for shadcn forms. |
| Drag/drop (sortable lists) | `@dnd-kit/core` | De facto React drag lib (file tree reordering, plugin list reorder). |
| Pane resize (split layout) | `react-resizable-panels` | Canonical React lib for resizable pane groups; handles drag, arrow keys, snap, persisted sizes. |
| Testing | Vitest + RTL + Playwright (E2E + visual regression) | Standard for React + Electron. |
| TypeScript | Strict mode (already wired) | Already in deps and `vite.renderer.config.ts`. |
## Architecture
The Electron app keeps its existing process model. Only the renderer is rewritten.
```
┌──────────────────────────────────────────────────────────┐
│ Electron Main (UNCHANGED) │
│ - BrowserWindow, IPC handlers, file/fs ops │
│ - Pandoc, FFmpeg, ImageMagick orchestration │
└────────────┬─────────────────────────────────────────────┘
│ contextBridge (UNCHANGED preload.js)
┌────────────▼─────────────────────────────────────────────┐
│ React Renderer (REWRITTEN) │
│ ┌────────────────────────────────────────────────────┐ │
│ │ AppShell (layout) │ │
│ │ ├─ MenuBar (native) │ │
│ │ ├─ AppHeader (logo, breadcrumbs, theme toggle) │ │
│ │ ├─ TabBar (open files) │ │
│ │ ├─ Toolbar (formatting) │ │
│ │ ├─ ResizablePaneGroup (sidebar | editor | preview) │ │
│ │ │ ├─ Sidebar (file tree, outline) │ │
│ │ │ ├─ EditorPane (CodeMirror 6) │ │
│ │ │ └─ PreviewPane (marked + KaTeX + Mermaid) │ │
│ │ ├─ StatusBar (word count, encoding, cursor pos) │ │
│ │ └─ ModalLayer (Dialog, SideSheet, Toaster) │ │
│ └────────────────────────────────────────────────────┘ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Feature Modules (each owns UI + state slice) │ │
│ │ ├─ editor/ CodeMirror wrapper, syntax, themes │ │
│ │ ├─ preview/ markdown→html, KaTeX, Mermaid │ │
│ │ ├─ tabs/ open files, dirty state │ │
│ │ ├─ sidebar/ file tree, outline, search results │ │
│ │ ├─ modals/ export, settings, about, etc. │ │
│ │ ├─ tools/ zen, repl, ascii-gen, table-gen │ │
│ │ └─ export/ pdf, docx, html, image batch │ │
│ └────────────────────────────────────────────────────┘ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Shared Infrastructure │ │
│ │ ├─ stores/ Zustand slices per feature │ │
│ │ ├─ hooks/ useFile, useEditor, useTheme, etc. │ │
│ │ ├─ lib/ cn, ipc, formatters, validators │ │
│ │ ├─ ui/ shadcn primitives: button, dialog… │ │
│ │ └─ types/ shared TS types │ │
│ └────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────┘
```
### Architectural Rules
- **Shell components** (`AppHeader`, `TabBar`, `StatusBar`) subscribe only to `useAppStore`.
- **Feature components** subscribe to their own feature's store.
- **Cross-feature access** goes through hooks, not direct store imports (e.g., `useFileTree()` wraps `useFileStore`).
- **Feature modules are self-contained** — each owns its components, its Zustand slice, and its types. Safe to develop in parallel later.
- **No direct `window.electronAPI` calls** from feature code. All IPC goes through `lib/ipc.ts` for type safety and error normalization.
## State Management
```
stores/
├─ useAppStore // global UI: theme, sidebar, pane sizes, modals open
├─ useFileStore // file system: tree, open files, active tab
├─ useEditorStore // editor: per-file content, cursor, selection, dirty
├─ usePreviewStore // preview: scroll sync, zoom, theme
├─ useSettingsStore // user prefs (persisted to electron-store)
└─ useCommandStore // menu actions registry, recent actions
```
**Why slices instead of one mega-store?** Editor content can be megabytes. Keeping it in its own slice lets React avoid re-rendering the preview when only the editor changes — components subscribe with selectors.
**Persistent state** (auto-saved to electron-store via Zustand `persist` middleware): theme, sidebar visibility, last open files, pane divider positions, settings.
**Ephemeral state** (lost on quit): active modal, hover states, search query, current file content (saved to disk on idle).
## Visual Design System
### Color Tokens
The existing `globals.css` HSL variables stay. Additions for the "glassy" aesthetic:
```css
--shadow-sm: 0 1px 2px rgba(13, 11, 9, 0.06);
--shadow-md: 0 4px 12px rgba(13, 11, 9, 0.08), 0 0 0 1px rgba(13, 11, 9, 0.04);
--shadow-lg: 0 12px 32px rgba(13, 11, 9, 0.12), 0 0 0 1px rgba(13, 11, 9, 0.06);
--shadow-glow-brand: 0 0 24px rgba(229, 70, 31, 0.25);
--glass-bg-light: rgba(255, 255, 255, 0.72);
--glass-bg-dark: rgba(13, 11, 9, 0.72);
--glass-border-light: rgba(255, 255, 255, 0.4);
--glass-border-dark: rgba(255, 255, 255, 0.08);
```
### shadcn Components
Install via `npx shadcn@latest add`:
**Primitives** (need all of these): `button`, `dialog`, `sheet`, `popover`, `tooltip`, `select`, `dropdown-menu`, `tabs`, `separator`, `scroll-area`, `toggle`, `switch`, `slider`, `input`, `textarea`, `label`, `form`, `skeleton`, `sonner`, `command`.
**Composite** (custom-built on top of primitives): `file-tree`, `pane-group`, `divider`, `status-bar`, `menu-bar`, `toast`.
### Typography
- Body: Plus Jakarta Sans 15 px / line-height 1.6
- Code: JetBrains Mono 13.5 px
- Display: Barlow Condensed 700/800 — used sparingly (page titles, big metrics)
- Headings: Plus Jakarta Sans 600/700 with tight letter-spacing
- Labels (`.label`): Plus Jakarta Sans 500, 12 px, uppercase, 0.05 em letter-spacing
### Motion Choreography
| Element | Motion | Duration | Easing |
|---|---|---|---|
| Modal (Dialog A) | Scale 0.96→1, opacity 0→1 | 200 ms | `ease-out` |
| Side sheet (B) | TranslateX 100%→0, opacity 0→1 | 300 ms | `cubic-bezier(0.16, 1, 0.3, 1)` |
| Toast | TranslateY 100%→0, opacity | 250 ms | spring(stiffness: 300, damping: 30) |
| Sidebar toggle | Width 264 px↔72 px, content fade | 250 ms | `ease-in-out` |
| Divider drag | Live width update | 0 ms | none (instant) |
| Theme switch | CSS variables, opacity overlay | 300 ms | `ease-in-out` |
| Tab switch | Underline slide | 200 ms | `ease-out` |
| Hover (buttons) | `bg` + `shadow` shift | 150 ms | `ease-out` |
| Focus ring | Outline grow | 100 ms | `ease-out` |
**Rules:** Every motion has a purpose. No gratuitous animation. Respects `prefers-reduced-motion` (Motion handles this automatically).
### Empty / Loading / Error States
Every async surface ships all three. Sonner toasts for ephemeral feedback. Skeleton screens for content areas. Empty-state components with icon + message + primary CTA.
## Modal/Overlay Patterns
| Use case | Pattern | Why |
|---|---|---|
| Export (PDF/DOCX/HTML) | A — Centered Dialog | Focused decision, ~35 fields, "do one thing" |
| Settings | B — Right Side-Sheet | Long form, tabbed sections, stays open while editing |
| Find/Replace | Inline toolbar (not modal) | Always-visible utility |
| About | A — Centered Dialog | Tiny info dump |
| Confirm destructive (delete, close unsaved) | A — Centered Dialog | Forces attention |
| File save error | D — Toast | Non-blocking info |
| Pandoc/FFmpeg progress | D — Toast → sticky on >3 s | Background work feedback |
| Plugin manager | B — Right Side-Sheet | Lists + per-item actions |
| ASCII/Table generators | A — Centered Dialog | Tool-style focused input → output |
| Print preview | A — Centered Dialog | Full-screen-ish modal overlay |
| Welcome (first launch) | A — Centered Dialog | One-time onboarding |
| Word export | A — Centered Dialog | Template selection |
| Zen mode | Full-viewport toggle (no modal) | Replaces the editor entirely |
| REPL | Bottom-pinned panel (split-pane) | Persistent terminal-like UI |
| Quick file open | B — Right Side-Sheet | File tree, search, recent |
### Dialog A Anatomy (Export as example)
```
┌─ Backdrop (rgba(13,11,9,0.45) + backdrop-blur 4px) ─────────┐
│ │
│ ┌──── Modal (max-w-md, rounded-2xl, shadow-lg) ─────┐ │
│ │ ┌── Header ────────────────────────────────────┐ │ │
│ │ │ [Icon] Export as PDF [×] │ │ │
│ │ │ Choose format options │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ ┌── Body ──────────────────────────────────────┐ │ │
│ │ │ Format: [Letter] [A4] [Legal] │ │ │
│ │ │ Margins: ────●──── │ │ │
│ │ │ ☐ Include table of contents │ │ │
│ │ │ ☐ Embed fonts │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ ┌── Footer ────────────────────────────────────┐ │ │
│ │ │ [Cancel] [Export →] │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────┘
```
### Side-Sheet B Anatomy (Settings as example)
Slides in from right, ~50 % width (max 560 px). Backdrop is `rgba(13,11,9,0.2)` with `backdrop-blur(2 px)` (lighter than dialog — the sheet is the focus). Tab navigation in the sheet header (Editor / Theme / Export / Plugins / About).
### Toast D Anatomy (Sonner)
Stacked bottom-right, max 3 visible. Glass background. Color-coded 3 px left border — success `#1a7a56`, error `#ef4444`, info `#0ea5e9`, warning `#eab308`. Icon + title + description. Optional action button. Auto-dismiss 4 s for success, sticky for error.
## Data Flow (Editor → Preview Pipeline)
```
User types
CodeMirror onChange
useEditorStore.updateContent(tabId, content) ← debounced 50 ms
┌─ Persist to electron-store on idle (1 s) ─┐
│ │
└─ Publish to usePreviewStore (subscribed) ─┘
marked(content) → sanitized HTML
PreviewPane renders HTML
KaTeX post-processes $...$
Mermaid post-processes ```mermaid
Highlight.js post-processes ```lang
useEffect: scroll-sync editor cursor → preview position
```
**Bidirectional scroll sync:** editor scroll → preview (primary), preview click → editor cursor (secondary). Throttled to 60 fps via `requestAnimationFrame`.
## IPC Contract
The preload bridge stays unchanged. A new `src/renderer/lib/ipc.ts` wraps every channel with TypeScript types and normalizes errors to a discriminated union:
```ts
type IpcResult<T> =
| { ok: true; data: T }
| { ok: false; error: { code: string; message: string } };
export const ipc = {
file: {
open: (): Promise<IpcResult<FileResult>>,
read: (path: string): Promise<IpcResult<string>>,
write: (path: string, content: string): Promise<IpcResult<void>>,
list: (dir: string): Promise<IpcResult<FileEntry[]>>,
onChange: (cb: (path: string) => void) => () => void,
},
export: {
pdf: (opts: PdfOptions): Promise<IpcResult<ExportResult>>,
docx: (opts: DocxOptions): Promise<IpcResult<ExportResult>>,
html: (opts: HtmlOptions): Promise<IpcResult<ExportResult>>,
batch: (items: BatchItem[], opts: BatchOptions): Promise<IpcResult<BatchResult>>,
},
app: {
getVersion: (): Promise<IpcResult<string>>,
openExternal: (url: string): Promise<IpcResult<void>>,
showItemInFolder: (path: string): Promise<IpcResult<void>>,
},
};
```
## Error Handling
Layered defense — no single failure can crash the app:
1. **IPC errors** → caught in `lib/ipc.ts` wrapper, returned as `IpcResult<T>` discriminated union. Components show toast on error.
2. **Component errors** → React error boundary per feature area (one for editor, one for preview, one for modals). On error: show inline error UI with "Reload this panel" + "Copy details" actions.
3. **Async operations** (export, file ops) → loading state on button + toast on completion. Long ops (>2 s) get a sticky toast with cancel.
4. **Validation errors** (settings, export options) → inline form errors via `react-hook-form` + `zod`. shadcn `Form` component for consistent error display.
5. **Pandoc/FFmpeg missing** → detected at startup, banner + disable export menu items. Don't surprise-fail at export time.
## Testing Strategy
- **Unit (Vitest):** stores, hooks, lib utilities, formatters, validators
- **Component (Vitest + RTL):** shadcn wrappers, dialog interactions, sidebar toggle, divider drag, theme toggle
- **Integration (Vitest + RTL):** editor ↔ preview flow, file open → tab add → content display, settings change persists
- **E2E (Playwright):** app launches, file opens, markdown renders, export to PDF works
- **Visual regression (Playwright snapshots):** locked-in screenshots for header, sidebar, dialogs, toasts — catch accidental style drift
- **Target coverage:** stores/hooks/lib ≥ 90 %, components ≥ 75 %, E2E covers all critical paths
## Accessibility (WCAG 2.1 AA)
Baked in via shadcn + Radix:
- All dialogs focus-trap, Esc to close, return focus to trigger
- All interactive elements keyboard-reachable
- Visible focus rings (2 px brand ring)
- 4.5:1 contrast minimum (already met by brand colors)
- `aria-label` on icon buttons, `role="alert"` on toasts
- Respects `prefers-reduced-motion` (Motion handles this automatically)
## Implementation Phases (Vertical Slices)
Each phase is a shippable PR that keeps the app runnable. The legacy `renderer.js` is gradually replaced; until each phase is complete, the old renderer code still runs the missing parts.
| # | Phase | Output | Acceptance |
|---|---|---|---|
| 1 | **Foundation** | shadcn installed; `next-themes`, `motion`, `react-hook-form`, `zod`, `@dnd-kit/core`, `react-resizable-panels`, `sonner` installed; design tokens finalized; `lib/utils.ts` (`cn`), `lib/ipc.ts` typed wrappers, `lib/motion.ts` preset transitions, `App.tsx` shell skeleton renders | `npm run build` succeeds; dev server shows the new shell with theme toggle working |
| 2 | **App shell + layout** | `AppHeader`, `TabBar`, `Toolbar`, `Breadcrumb`, `StatusBar`, `ResizablePaneGroup` with sidebar toggle and draggable divider. Empty editor/preview panes. | Resize divider with mouse and arrow keys; sidebar collapses; pane sizes persist. |
| 3 | **Editor pane** | CodeMirror 6 wrapped, dark/light themes wired to shadcn theme, syntax highlighting, line numbers, search, autocomplete | Open `.md` file → renders in editor; can edit and save. |
| 4 | **Preview pane** | marked + DOMPurify + KaTeX + Mermaid + highlight.js. Bidirectional scroll sync with editor. | Open file → preview renders, follows cursor. |
| 5 | **File tree + tabs** | Sidebar file tree (read directory on demand, lazy-expand children only on click). Tabs for open files. Dirty state indicator. File content is read from disk only when the tab is activated. | Open folder → root populates; click folder → children load; click file → opens in tab; close tab reverts dirty. |
| 6 | **Native menus + toolbar** | Replace the legacy `CommandPalette` with full menus (File / Edit / View / Insert / Format / Tools / Help) bound to keyboard shortcuts. Toolbar buttons. | All menu items invoke the right action; shortcuts work; toolbar reflects active state. |
| 7 | **Modals** | Export dialog (PDF/DOCX/HTML/batch), Settings side-sheet (Editor/Theme/Export/Plugins/About tabs), About dialog, Confirm-destructive dialog | All dialogs and sheet render with proper motion; settings persist; export works end-to-end. |
| 8 | **Toasts** | Sonner wired into all async operations (save, export, errors, tool missing) | All operations give appropriate feedback; no silent failures. |
| 9 | **Advanced tools** | Zen mode (full-viewport toggle), REPL (bottom-pinned panel), ASCII generator, Table generator, Word export template picker, Print preview | Each tool is feature-complete vs. legacy version. |
| 10 | **Polish + delete legacy** | Visual regression snapshots locked; remove `renderer.js` and old `styles*.css` references from build; `npm run build:linux` produces a working installer | Final PR ships an installer with no legacy code paths. |
## Risks and Mitigations
| Risk | Mitigation |
|---|---|
| shadcn CLI requires Vite (not vanilla Electron renderer) | Vite is already configured for the renderer in `vite.renderer.config.ts`; the CLI works against the same project. |
| shadcn CLI assumes Tailwind is at project root; we have it in renderer/ only | Point the CLI at `src/renderer/components.json` and set `tailwind.css` to the right path. |
| Marked + KaTeX + Mermaid + highlight.js together is heavy | Lazy-load Mermaid (only when `mermaid` code block encountered). KaTeX is loaded once, cached. |
| Editor content state can be megabytes → re-render storms | Editor content lives in its own slice; preview subscribes to a derived/cached HTML string; components use `useShallow` / selector subscriptions. |
| Bidirectional scroll sync loops | `useEffect` debounce + ignore if cursor/selection is the sync source. |
| CodeMirror 6 doesn't ship a Tailwind theme by default | Use `@codemirror/theme-one-dark` for dark; build a custom theme that pulls from CSS variables for light. |
| The legacy `renderer.js` and `styles*.css` are referenced from `index.html` (now `src/renderer/index.html`) | Phase 10 deletes the references; until then, both run side-by-side and the new React app sits in a known root div. |
| Electron `nodeIntegration` is off; we use contextBridge | Already the case. Document the contract clearly in `lib/ipc.ts`. |
## Open Questions (to confirm before implementation)
None. All major decisions are locked. Defaults will be used unless the user overrides them when reviewing the implementation plan.
## References
- `src/renderer.js` (213 KB) — legacy renderer being replaced
- `src/styles.css` (74 KB), `src/styles-modern.css` (71 KB), `src/styles-concreteinfo.css` (21 KB) — legacy styles being replaced
- `src/renderer/styles/globals.css` — already shadcn-compatible (HSL CSS variables)
- `src/renderer/App.tsx` — empty skeleton that references components we will build
- `tailwind.config.js` — brand colors and fonts already defined
- `vite.renderer.config.ts` — Vite + React plugin already configured
- `package.json` — CodeMirror 6, TanStack Table, lucide-react, cva, clsx, tailwind-merge, tailwindcss-animate already installed
@@ -1,333 +0,0 @@
# 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
-112
View File
@@ -1,112 +0,0 @@
/**
* ESLint Configuration for PanConverter
* Uses flat config format (ESLint 9+)
*/
module.exports = [
{
// Global ignores
ignores: [
'node_modules/**',
'dist/**',
'coverage/**',
'*.min.js'
]
},
{
// JavaScript files
files: ['**/*.js'],
languageOptions: {
ecmaVersion: 2022,
sourceType: 'module',
globals: {
// Node.js
require: 'readonly',
module: 'readonly',
exports: 'readonly',
__dirname: 'readonly',
__filename: 'readonly',
process: 'readonly',
Buffer: 'readonly',
console: 'readonly',
setTimeout: 'readonly',
setInterval: 'readonly',
clearTimeout: 'readonly',
clearInterval: 'readonly',
// Browser
window: 'readonly',
document: 'readonly',
localStorage: 'readonly',
alert: 'readonly',
prompt: 'readonly',
confirm: 'readonly',
Event: 'readonly',
CustomEvent: 'readonly',
HTMLElement: 'readonly',
MutationObserver: 'readonly',
TextEncoder: 'readonly',
FileReader: 'readonly',
requestAnimationFrame: 'readonly',
cancelAnimationFrame: 'readonly',
navigator: 'readonly',
location: 'readonly',
fetch: 'readonly',
URL: 'readonly',
Blob: 'readonly',
Image: 'readonly',
DragEvent: 'readonly',
ClipboardEvent: 'readonly',
KeyboardEvent: 'readonly',
MouseEvent: 'readonly',
NodeList: 'readonly',
HTMLInputElement: 'readonly',
HTMLTextAreaElement: 'readonly',
getComputedStyle: 'readonly',
// Electron
electronAPI: 'readonly',
// Libraries
marked: 'readonly',
DOMPurify: 'readonly',
hljs: 'readonly',
mermaid: 'readonly',
// Node.js global object
global: 'writable',
// Jest
jest: 'readonly',
describe: 'readonly',
test: 'readonly',
it: 'readonly',
expect: 'readonly',
beforeEach: 'readonly',
afterEach: 'readonly',
beforeAll: 'readonly',
afterAll: 'readonly'
}
},
rules: {
// Error prevention
'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
'no-undef': 'error',
'no-console': 'off', // Allow console for Electron apps
// Code quality
'eqeqeq': ['warn', 'always'],
'no-var': 'warn',
'prefer-const': 'warn',
// Style (handled by Prettier)
'semi': 'off',
'quotes': 'off',
'indent': 'off',
// Async handling
'no-async-promise-executor': 'warn',
'require-await': 'off',
// Security
'no-eval': 'error',
'no-implied-eval': 'error',
'no-new-func': 'error'
}
}
];
-60
View File
@@ -1,60 +0,0 @@
/**
* Jest Configuration for PanConverter
* @version 2.2.0
*/
module.exports = {
// Test environment
testEnvironment: 'jsdom',
// Root directory
rootDir: '.',
// Test file patterns
testMatch: [
'**/tests/**/*.test.js',
'**/tests/**/*.spec.js'
],
// Coverage configuration
collectCoverageFrom: [
'src/**/*.js',
'!src/main/**', // Main process needs electron-mock
'!src/preload.js', // Electron preload requires contextBridge
'!**/node_modules/**'
],
// Coverage thresholds (raised with expanded test suite)
coverageThreshold: {
global: {
branches: 10,
functions: 15,
lines: 15,
statements: 15
}
},
// Transform settings (no transpilation needed for vanilla JS)
transform: {},
// Module paths
moduleDirectories: ['node_modules', 'src'],
// Setup files
setupFilesAfterEnv: ['<rootDir>/tests/setup.js'],
// Ignore patterns
testPathIgnorePatterns: [
'/node_modules/',
'/dist/'
],
// Verbose output
verbose: true,
// Clear mocks between tests
clearMocks: true,
// Reset modules between tests
resetModules: true
};
Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

-17831
View File
File diff suppressed because it is too large Load Diff
+22 -162
View File
@@ -1,159 +1,47 @@
{
"name": "markdown-converter",
"version": "5.0.0",
"description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
"main": "src/main/index.js",
"name": "pan-converter",
"version": "1.7.6",
"description": "Cross-platform Markdown editor and converter using Pandoc",
"main": "src/main.js",
"scripts": {
"start": "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",
"format:check": "prettier --check src tests",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "electron-builder",
"build:win": "electron-builder --win",
"build:win-signed": "cross-env CSC_LINK=code-signing-cert.pfx electron-builder --win",
"build:win": "cross-env CSC_LINK=code-signing-cert.pfx CSC_KEY_PASSWORD=PanConverter2024! electron-builder --win",
"build:win-unsigned": "cross-env CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --win",
"create-cert": "powershell -ExecutionPolicy Bypass -File scripts/create-selfsigned-cert.ps1",
"build:mac": "electron-builder --mac",
"build:linux": "electron-builder --linux",
"build:linux-ci": "electron-builder --linux deb AppImage",
"build:local": "electron-builder --linux --win",
"dist": "electron-builder --publish=never",
"dist:all": "electron-builder -mwl",
"download-tools": "node scripts/download-tools.js",
"generate-icons": "node scripts/generate-icons.js"
},
"keywords": [
"markdown",
"pandoc",
"converter",
"editor",
"pdf",
"audio",
"video",
"image"
"editor"
],
"author": "ConcreteInfo <amit.wh@gmail.com>",
"author": "Amit Haridas <amit.wh@gmail.com>",
"license": "MIT",
"repository": {
"type": "git",
"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",
"cross-env": "^10.0.0",
"electron": "^41.1.1",
"electron": "^37.4.0",
"electron-builder": "^26.0.12",
"eslint": "^9.39.2",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.4",
"jest": "^30.2.0",
"jest-environment-jsdom": "^30.2.0",
"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"
"sharp": "^0.34.3"
},
"dependencies": {
"@codemirror/autocomplete": "^6.20.1",
"@codemirror/commands": "^6.10.2",
"@codemirror/lang-css": "^6.3.1",
"@codemirror/lang-html": "^6.4.11",
"@codemirror/lang-javascript": "^6.2.5",
"@codemirror/lang-json": "^6.0.2",
"@codemirror/lang-markdown": "^6.5.0",
"@codemirror/lang-python": "^6.2.1",
"@codemirror/language": "^6.12.2",
"@codemirror/lint": "^6.9.5",
"@codemirror/search": "^6.6.0",
"@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.7.1",
"docx4js": "^2.0.1",
"dompurify": "^3.3.1",
"dompurify": "^3.2.6",
"electron-store": "^10.1.0",
"ffmpeg-static": "^5.3.0",
"figlet": "^1.11.0",
"highlight.js": "^11.11.1",
"html2pdf.js": "^0.14.0",
"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",
"marked": "^16.2.1",
"pdf-lib": "^1.17.1",
"pdfjs-dist": "^5.5.207",
"pdfkit": "^0.17.2",
"pizzip": "^3.2.0",
"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",
"sonner": "^2.0.7",
"tslib": "^2.8.1",
"zod": "^4.4.3",
"zustand": "^5.0.14"
},
"overrides": {
"jszip": "^3.10.1",
"nth-check": "^2.1.1",
"lodash.pick": "npm:lodash@^4.17.21",
"lodash-es": "^4.18.1",
"lodash": "^4.17.21"
"xlsx": "^0.18.5"
},
"build": {
"appId": "com.concreteinfo.markdownconverter",
"productName": "MarkdownConverter",
"copyright": "Copyright (C) 2024-2025 ConcreteInfo",
"appId": "com.panconverter.app",
"productName": "PanConverter",
"directories": {
"output": "dist"
},
@@ -165,10 +53,6 @@
"node_modules/**/*",
"package.json"
],
"asarUnpack": [
"node_modules/ffmpeg-static/**"
],
"extraFiles": [],
"fileAssociations": [
{
"ext": "md",
@@ -183,18 +67,10 @@
"description": "Markdown Document",
"mimeType": "text/markdown",
"role": "Editor"
},
{
"ext": "pdf",
"name": "PDF Document",
"description": "PDF Document",
"mimeType": "application/pdf",
"role": "Editor"
}
],
"mac": {
"category": "public.app-category.productivity",
"identity": null
"category": "public.app-category.productivity"
},
"win": {
"target": [
@@ -219,15 +95,7 @@
],
"artifactName": "${productName}-${version}-${arch}.${ext}",
"requestedExecutionLevel": "asInvoker",
"legalTrademarks": "Copyright (C) 2024-2025 ConcreteInfo",
"verifyUpdateCodeSignature": false,
"signAndEditExecutable": false,
"extraFiles": [
{
"from": "bin/win32/pandoc.exe",
"to": "bin/pandoc.exe"
}
]
"signAndEditExecutable": false
},
"nsis": {
"oneClick": false,
@@ -236,7 +104,7 @@
"displayLanguageSelector": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "MarkdownConverter",
"shortcutName": "PanConverter",
"runAfterFinish": true,
"menuCategory": "Productivity",
"license": "LICENSE",
@@ -251,22 +119,14 @@
"AppImage",
"snap"
],
"category": "Utility",
"maintainer": "ConcreteInfo <amit.wh@gmail.com>",
"extraFiles": [
{
"from": "bin/linux/pandoc",
"to": "bin/pandoc"
}
]
"category": "Utility"
},
"deb": {
"depends": [
"imagemagick",
"libreoffice-common"
"pandoc"
],
"description": "Professional Markdown editor and universal file converter",
"maintainer": "ConcreteInfo <amit.wh@gmail.com>"
"description": "Markdown editor and converter using Pandoc",
"maintainer": "Amit Haridas <amit.wh@gmail.com>"
}
}
}
-6
View File
@@ -1,6 +0,0 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
-59
View File
@@ -1,59 +0,0 @@
# create-selfsigned-cert.ps1
# Generates a self-signed code-signing certificate for local/development builds.
#
# Usage:
# powershell -ExecutionPolicy Bypass -File scripts/create-selfsigned-cert.ps1
# npm run create-cert
#
# Then build with:
# $env:CSC_LINK="code-signing-cert.pfx"; $env:CSC_KEY_PASSWORD="YourPassword"; npm run build:win-signed
#
# NOTE: Self-signed certificates will still show a SmartScreen warning for end users.
# For production releases, obtain an OV or EV certificate from a trusted CA
# (DigiCert, Sectigo, Certum, etc.). EV certificates bypass SmartScreen immediately.
# Open-source projects can apply for free signing at https://signpath.io/
param(
[string]$CertPassword = "MarkdownConverter2025",
[string]$OutputFile = "code-signing-cert.pfx",
[string]$Subject = "CN=ConcreteInfo, O=ConcreteInfo, L=India, C=IN"
)
Write-Host "Creating self-signed code-signing certificate..." -ForegroundColor Cyan
# Create the certificate in the current user's certificate store
$cert = New-SelfSignedCertificate `
-Type CodeSigningCert `
-Subject $Subject `
-CertStoreLocation "Cert:\CurrentUser\My" `
-NotAfter (Get-Date).AddYears(3) `
-HashAlgorithm SHA256 `
-KeyLength 4096 `
-KeyUsage DigitalSignature
if (-not $cert) {
Write-Error "Failed to create certificate."
exit 1
}
Write-Host "Certificate created: $($cert.Thumbprint)" -ForegroundColor Green
# Export to PFX
$securePassword = ConvertTo-SecureString -String $CertPassword -Force -AsPlainText
$exportPath = Join-Path (Get-Location) $OutputFile
Export-PfxCertificate -Cert $cert -FilePath $exportPath -Password $securePassword | Out-Null
if (Test-Path $exportPath) {
Write-Host "Certificate exported to: $exportPath" -ForegroundColor Green
Write-Host ""
Write-Host "To build a signed release:" -ForegroundColor Yellow
Write-Host ' $env:CSC_LINK="code-signing-cert.pfx"' -ForegroundColor White
Write-Host " `$env:CSC_KEY_PASSWORD=`"$CertPassword`"" -ForegroundColor White
Write-Host " npm run build:win-signed" -ForegroundColor White
Write-Host ""
Write-Host "IMPORTANT: Add code-signing-cert.pfx to .gitignore!" -ForegroundColor Red
} else {
Write-Error "Export failed."
exit 1
}
-148
View File
@@ -1,148 +0,0 @@
#!/usr/bin/env node
/**
* Downloads pandoc binary for the current build platform.
* Run automatically via `npm run download-tools` before building.
* Skips download if binary already exists (idempotent).
*/
const https = require('https');
const http = require('http');
const fs = require('fs');
const path = require('path');
const os = require('os');
const { execSync } = require('child_process');
const PANDOC_VERSION = '3.9.0.2';
const PANDOC_CONFIG = {
linux: {
url: `https://github.com/jgm/pandoc/releases/download/${PANDOC_VERSION}/pandoc-${PANDOC_VERSION}-linux-amd64.tar.gz`,
archiveExt: '.tar.gz',
destFile: 'pandoc',
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');
fs.copyFileSync(src, path.join(destDir, 'pandoc'));
fs.chmodSync(path.join(destDir, 'pandoc'), 0o755);
fs.rmSync(tmpDir, { recursive: true, force: true });
},
},
win32: {
url: `https://github.com/jgm/pandoc/releases/download/${PANDOC_VERSION}/pandoc-${PANDOC_VERSION}-windows-x86_64.zip`,
archiveExt: '.zip',
destFile: 'pandoc.exe',
extract(archivePath, destDir) {
const tmpDir = path.join(os.tmpdir(), `pandoc-${Date.now()}`);
fs.mkdirSync(tmpDir, { recursive: true });
execSync(
`powershell -Command "Expand-Archive -Force '${archivePath}' '${tmpDir}'"`,
);
const src = path.join(tmpDir, `pandoc-${PANDOC_VERSION}`, 'pandoc.exe');
fs.copyFileSync(src, path.join(destDir, 'pandoc.exe'));
fs.rmSync(tmpDir, { recursive: true, force: true });
},
},
darwin: {
url: `https://github.com/jgm/pandoc/releases/download/${PANDOC_VERSION}/pandoc-${PANDOC_VERSION}-x86_64-macOS.zip`,
archiveExt: '.zip',
destFile: 'pandoc',
extract(archivePath, destDir) {
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');
fs.copyFileSync(src, path.join(destDir, 'pandoc'));
fs.chmodSync(path.join(destDir, 'pandoc'), 0o755);
fs.rmSync(tmpDir, { recursive: true, force: true });
},
},
};
function download(url, destPath) {
return new Promise((resolve, reject) => {
const file = fs.createWriteStream(destPath);
let received = 0;
let total = 0;
let lastPct = -1;
function get(redirectUrl) {
const client = redirectUrl.startsWith('https://') ? https : http;
client
.get(redirectUrl, (res) => {
if (res.statusCode === 301 || res.statusCode === 302) {
get(res.headers.location);
return;
}
if (res.statusCode !== 200) {
reject(new Error(`HTTP ${res.statusCode} for ${redirectUrl}`));
return;
}
total = parseInt(res.headers['content-length'] || '0', 10);
res.on('data', (chunk) => {
received += chunk.length;
if (total > 0) {
const pct = Math.floor((received / total) * 100);
if (pct !== lastPct && pct % 10 === 0) {
process.stdout.write(` ${pct}%\r`);
lastPct = pct;
}
}
});
res.pipe(file);
file.on('finish', () => {
file.close();
process.stdout.write(' 100%\n');
resolve();
});
})
.on('error', (err) => {
fs.unlink(destPath, () => {});
reject(err);
});
}
get(url);
});
}
async function downloadPandoc() {
const platform = process.platform;
const config = PANDOC_CONFIG[platform];
if (!config) {
console.log(`[download-tools] No pandoc config for platform "${platform}" — skipping.`);
return;
}
const destDir = path.join(__dirname, '..', 'bin', platform);
const destFile = path.join(destDir, config.destFile);
if (fs.existsSync(destFile)) {
console.log(`[download-tools] pandoc already present at ${destFile} — skipping.`);
return;
}
fs.mkdirSync(destDir, { recursive: true });
const tmpArchive = path.join(os.tmpdir(), `pandoc-download${config.archiveExt}`);
console.log(`[download-tools] Downloading pandoc ${PANDOC_VERSION} for ${platform}...`);
await download(config.url, tmpArchive);
console.log(`[download-tools] Extracting to ${destDir}...`);
config.extract(tmpArchive, destDir);
try {
fs.unlinkSync(tmpArchive);
} catch (_) {
/* ignore */
}
console.log(`[download-tools] pandoc ready: ${destFile}`);
}
downloadPandoc().catch((err) => {
console.error('[download-tools] FAILED:', err.message);
process.exit(1);
});
+31 -70
View File
@@ -1,82 +1,43 @@
/**
* Icon Generator for MarkdownConverter
* Generates all required icon sizes from NewIcon.jpg
*/
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');
// Source image
const sourceImage = path.join(__dirname, '..', 'assets', 'docico1.png');
const assetsDir = path.join(__dirname, '..', 'assets');
const sizes = {
'icon.png': 512,
'icon@2x.png': 1024,
'icon.ico': 256,
'icon.icns': 512
};
// Icon sizes needed for different platforms
const iconSizes = [16, 24, 32, 48, 64, 128, 256, 512, 1024];
const svgPath = path.join(__dirname, '..', 'assets', 'icon.svg');
const svgBuffer = fs.readFileSync(svgPath);
async function generateIcons() {
console.log('Generating icons from docico1.png...');
for (const [filename, size] of Object.entries(sizes)) {
const outputPath = path.join(__dirname, '..', 'assets', filename);
// Check if source exists
if (!fs.existsSync(sourceImage)) {
console.error('Source image not found:', sourceImage);
process.exit(1);
if (filename.endsWith('.png')) {
await sharp(svgBuffer)
.resize(size, size)
.png()
.toFile(outputPath);
console.log(`Generated ${filename}`);
} else if (filename.endsWith('.ico')) {
// For ICO, we'll just use the PNG version
await sharp(svgBuffer)
.resize(size, size)
.png()
.toFile(outputPath.replace('.ico', '.png'));
console.log(`Generated ${filename.replace('.ico', '.png')} (use png2ico to convert)`);
} else if (filename.endsWith('.icns')) {
// For ICNS, we'll just use the PNG version
await sharp(svgBuffer)
.resize(size, size)
.png()
.toFile(outputPath.replace('.icns', '.png'));
console.log(`Generated ${filename.replace('.icns', '.png')} (use png2icns to convert)`);
}
try {
// Generate main icon.png (512x512)
await sharp(sourceImage)
.resize(512, 512, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
.png()
.toFile(path.join(assetsDir, 'icon.png'));
console.log('Generated icon.png (512x512)');
// Generate icon@2x.png (1024x1024)
await sharp(sourceImage)
.resize(1024, 1024, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
.png()
.toFile(path.join(assetsDir, 'icon@2x.png'));
console.log('Generated icon@2x.png (1024x1024)');
// Create icons directory for multi-size icons
const iconsDir = path.join(assetsDir, 'icons');
if (!fs.existsSync(iconsDir)) {
fs.mkdirSync(iconsDir, { recursive: true });
}
// Generate all sizes
for (const size of iconSizes) {
await sharp(sourceImage)
.resize(size, size, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
.png()
.toFile(path.join(iconsDir, `${size}x${size}.png`));
console.log(`Generated icons/${size}x${size}.png`);
}
// Generate favicon
await sharp(sourceImage)
.resize(32, 32, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
.png()
.toFile(path.join(assetsDir, 'favicon.png'));
console.log('Generated favicon.png (32x32)');
// Generate tray icon (smaller, for system tray)
await sharp(sourceImage)
.resize(24, 24, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
.png()
.toFile(path.join(assetsDir, 'tray-icon.png'));
console.log('Generated tray-icon.png (24x24)');
console.log('\nIcon generation complete!');
console.log('\nFor Windows .ico file, use an online converter or:');
console.log(' magick convert assets/icons/*.png assets/icon.ico');
console.log('\nFor macOS .icns file, use:');
console.log(' iconutil -c icns assets/icon.iconset -o assets/icon.icns');
} catch (error) {
console.error('Error generating icons:', error);
process.exit(1);
}
}
generateIcons();
generateIcons().catch(console.error);
-111
View File
@@ -1,111 +0,0 @@
/**
* Electron File System Adapter
*
* Implements file system operations for Electron using IPC.
* This abstracts file operations to enable easier testing and migration.
*
* @version 4.4.1
*/
/**
* Electron File System Adapter
* @type {import('../types').FileSystemAdapter}
*/
const electronFsAdapter = {
/**
* Read file content
* @param {string} path - File path
* @returns {Promise<string>} File content
*/
async readFile(path) {
return await window.electronAPI.file.read(path);
},
/**
* Write content to file
* @param {string} path - File path
* @param {string} content - File content
* @returns {Promise<void>}
*/
async writeFile(path, content) {
return await window.electronAPI.file.write(path, content);
},
/**
* Delete file
* @param {string} path - File path
* @returns {Promise<void>}
*/
async deleteFile(path) {
return await window.electronAPI.file.delete(path);
},
/**
* Ensure directory exists
* @param {string} path - Directory path
* @returns {Promise<void>}
*/
async ensureDir(path) {
return await window.electronAPI.file.ensureDir(path);
},
/**
* List directory contents
* @param {string} path - Directory path
* @returns {Promise<Array<import('../types').FileInfo>>}
*/
async listDirectory(path) {
const result = await window.electronAPI.invoke('list-directory', path);
if (!result?.entries) {
return [];
}
return result.entries.map((entry) => ({
name: entry.name,
isDir: entry.isDirectory,
size: entry.size ?? 0,
modified: entry.modified ?? 0,
path: entry.path
}));
},
/**
* Check if path exists
* @param {string} path - Path to check
* @returns {Promise<boolean>}
*/
async exists(path) {
return await window.electronAPI.file.exists(path);
},
/**
* Check if path is a directory
* @param {string} path - Path to check
* @returns {Promise<boolean>}
*/
async isDirectory(path) {
return await window.electronAPI.file.isDirectory(path);
},
/**
* Copy file or directory
* @param {string} source - Source path
* @param {string} dest - Destination path
* @returns {Promise<void>}
*/
async copy(source, dest) {
return await window.electronAPI.file.copy(source, dest);
},
/**
* Move file or directory
* @param {string} source - Source path
* @param {string} dest - Destination path
* @returns {Promise<void>}
*/
async move(source, dest) {
return await window.electronAPI.file.move(source, dest);
}
};
module.exports = { electronFsAdapter };
-133
View File
@@ -1,133 +0,0 @@
/**
* Platform Adapter Type Definitions
*
* This module defines the interfaces for platform-specific operations.
* Adapters abstract file system, conversion, and system operations
* to enable easier testing and future platform migration.
*
* @version 4.4.1
*/
/**
* @typedef {Object} FileInfo
* @property {string} name - File or directory name
* @property {boolean} isDir - True if directory
* @property {number} size - File size in bytes
* @property {number} modified - Last modified timestamp (ms since epoch)
*/
/**
* @typedef {Object} WatchEvent
* @property {string} type - Event type ('add', 'change', 'unlink', 'addDir', 'unlinkDir')
* @property {string} path - Affected file/directory path
*/
/**
* @typedef {Object} ConversionOptions
* @property {string} format - Output format (pdf, docx, html, etc.)
* @property {string} [pdfEngine] - PDF engine for PDF export (xelatex, pdflatex, etc.)
* @property {string} [template] - Word template path for DOCX
* @property {string} [geometry] - Page geometry for PDF (e.g., 'margin=1in')
* @property {string} [header] - Header content
* @property {string} [footer] - Footer content
* @property {boolean} [toc] - Include table of contents
*/
/**
* @typedef {Object} ConversionResult
* @property {string} input - Input file path
* @property {string} output - Output file path
* @property {boolean} success - Whether conversion succeeded
* @property {string} [error] - Error message if failed
*/
/**
* @typedef {Object} PlatformCapabilities
* @property {boolean} hasPandoc - Pandoc is available
* @property {boolean} hasFfmpeg - FFmpeg is available
* @property {boolean} hasLibreOffice - LibreOffice is available
* @property {boolean} hasDirectFs - Direct file system access
* @property {boolean} hasSystemNotifications - System notifications available
* @property {boolean} hasPdfJs - PDF.js available for PDF viewing
*/
/**
* @typedef {Object} DialogOptions
* @property {string} [title] - Dialog title
* @property {string} [defaultPath] - Default path
* @property {string[]} [filters] - File filters [{ name: 'Markdown', extensions: ['md'] }]
* @property {string} [buttonLabel] - Custom button label
*/
/**
* @typedef {Object} SystemInfo
* @property {string} platform - Operating system (win32, darwin, linux)
* @property {string} homeDir - User home directory
* @property {string} documentsDir - Documents directory
* @property {string} downloadsDir - Downloads directory
* @property {string} tempDir - Temporary directory
* @property {string} appVersion - Application version
*/
/**
* @typedef {Object} FileSystemAdapter
* @property {(path: string) => Promise<string>} readFile - Read file content
* @property {(path: string, content: string) => Promise<void>} writeFile - Write file content
* @property {(path: string) => Promise<void>} deleteFile - Delete file
* @property {(path: string) => Promise<void>} ensureDir - Ensure directory exists
* @property {(path: string) => Promise<FileInfo[]>} listDirectory - List directory contents
* @property {(path: string) => Promise<boolean>} exists - Check if path exists
* @property {(path: string) => Promise<boolean>} isDirectory - Check if path is directory
* @property {(source: string, dest: string) => Promise<void>} copy - Copy file or directory
* @property {(source: string, dest: string) => Promise<void>} move - Move file or directory
* @property {(path: string, callback: (event: WatchEvent) => void) => () => void>} [watchDirectory] - Watch directory for changes
*/
/**
* @typedef {Object} ConversionAdapter
* @property {(input: string, output: string, options: ConversionOptions) => Promise<void>} convertFile - Convert single file
* @property {(files: string[], outputDir: string, options: ConversionOptions) => Promise<ConversionResult[]>} batchConvert - Batch convert files
* @property {() => Promise<boolean>} checkPandoc - Check if Pandoc is available
* @property {() => Promise<boolean>} checkFfmpeg - Check if FFmpeg is available
* @property {() => Promise<boolean>} checkLibreOffice - Check if LibreOffice is available
*/
/**
* @typedef {Object} DialogAdapter
* @property {(options?: DialogOptions) => Promise<string|null>} showOpenDialog - Show open file dialog
* @property {(options?: DialogOptions) => Promise<string[]>} showOpenDialogMulti - Show multi-select open dialog
* @property {(options?: DialogOptions) => Promise<string|null>} showSaveDialog - Show save file dialog
* @property {(message: string, type?: string) => Promise<void>} showMessage - Show message dialog
* @property {(message: string, type?: string) => Promise<boolean>} showConfirm - Show confirmation dialog
*/
/**
* @typedef {Object} SystemAdapter
* @property {() => Promise<SystemInfo>} getSystemInfo - Get system information
* @property {(title: string, body: string) => Promise<void>} showNotification - Show system notification
* @property {(url: string) => Promise<void>} openExternal - Open URL in default browser
* @property {(path: string) => Promise<void>} openInExplorer - Open path in file explorer
* @property {(path: string) => Promise<void>} openInDefaultApp - Open path in default application
*/
/**
* @typedef {Object} PdfAdapter
* @property {(path: string) => Promise<Object>} loadDocument - Load PDF document
* @property {(doc: Object, pageNum: number, canvas: HTMLCanvasElement, scale: number, rotation: number) => Promise<void>} renderPage - Render PDF page to canvas
* @property {(operations: Object) => Promise<void>} processOperation - Process PDF operation (merge, split, etc.)
*/
/**
* @typedef {Object} PlatformAdapter
* @property {string} name - Platform name ('electron', 'web', 'tauri', 'flutter')
* @property {FileSystemAdapter} fs - File system operations
* @property {ConversionAdapter} convert - Conversion operations
* @property {DialogAdapter} dialog - Dialog operations
* @property {SystemAdapter} system - System operations
* @property {PdfAdapter} [pdf] - PDF operations (optional, not available on all platforms)
* @property {PlatformCapabilities} capabilities - Platform capabilities
*/
module.exports = {
// Type definitions are JSDoc only, no runtime exports needed
};
-112
View File
@@ -1,112 +0,0 @@
/**
* Writing Analytics Panel modal overlay displaying analytics dashboard
*/
const { analyze } = require('./writing-analytics');
function showAnalyticsModal(tabManager) {
const existing = document.getElementById('analytics-modal');
if (existing) existing.remove();
const content = tabManager.getEditorContent();
const metrics = analyze(content);
const overlay = document.createElement('div');
overlay.id = 'analytics-modal';
overlay.className = 'analytics-overlay';
const maxCount = metrics.topWords.length > 0 ? metrics.topWords[0].count : 1;
overlay.innerHTML = `
<div class="analytics-modal">
<div class="analytics-header">
<h2>Writing Analytics</h2>
<button class="analytics-close" title="Close">&times;</button>
</div>
<div class="analytics-body">
<div class="analytics-section">
<h3>Readability</h3>
<div class="analytics-row">
<span class="analytics-label">Flesch Reading Ease</span>
<span class="analytics-value">${metrics.fleschEase}<small>${metrics.readabilityLabel}</small></span>
</div>
<div class="analytics-row">
<span class="analytics-label">Grade Level</span>
<span class="analytics-value">${metrics.fleschGrade}</span>
</div>
<div class="readability-meter">
<div class="readability-fill" style="width: ${Math.max(0, Math.min(100, metrics.fleschEase))}%"></div>
</div>
</div>
<div class="analytics-section">
<h3>Timing</h3>
<div class="analytics-row">
<span class="analytics-label">Reading Time</span>
<span class="analytics-value">~${metrics.readingTime} min</span>
</div>
<div class="analytics-row">
<span class="analytics-label">Speaking Time</span>
<span class="analytics-value">~${metrics.speakingTime} min</span>
</div>
</div>
<div class="analytics-section">
<h3>Structure</h3>
<div class="analytics-row">
<span class="analytics-label">Sentences</span>
<span class="analytics-value">${metrics.sentenceCount} &bull; Paragraphs: ${metrics.paragraphCount}</span>
</div>
<div class="analytics-row">
<span class="analytics-label">Avg Sentence</span>
<span class="analytics-value">${metrics.avgSentenceLength} words</span>
</div>
${metrics.longestSentenceLength > 0 ? `
<div class="analytics-row analytics-longest">
<span class="analytics-label">Longest (${metrics.longestSentenceLength} words)</span>
<span class="analytics-value analytics-sentence-preview">${escapeHtml(metrics.longestSentence)}</span>
</div>` : ''}
</div>
<div class="analytics-section">
<h3>Vocabulary</h3>
<div class="analytics-row">
<span class="analytics-label">Unique</span>
<span class="analytics-value">${metrics.uniqueWordCount} / ${metrics.wordCount}<small>${metrics.lexicalDiversity}%</small></span>
</div>
${metrics.topWords.length > 0 ? `
<div class="word-cloud">
${metrics.topWords.map(w => {
const scale = 13 + Math.round((w.count / maxCount) * 3);
return `<span class="word-tag" style="font-size:${scale}px">${escapeHtml(w.word)}<small>${w.count}</small></span>`;
}).join('')}
</div>` : ''}
</div>
</div>
</div>
`;
const closeBtn = overlay.querySelector('.analytics-close');
closeBtn.addEventListener('click', () => overlay.remove());
overlay.addEventListener('click', (e) => {
if (e.target === overlay) overlay.remove();
});
const escHandler = (e) => {
if (e.key === 'Escape') {
overlay.remove();
document.removeEventListener('keydown', escHandler);
}
};
document.addEventListener('keydown', escHandler);
document.body.appendChild(overlay);
}
function escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
module.exports = { showAnalyticsModal };
-127
View File
@@ -1,127 +0,0 @@
/**
* Writing Analytics pure computation engine
* No DOM dependencies. Exported analyze(text) returns a metrics object.
*/
const STOP_WORDS = new Set([
'the', 'a', 'an', 'is', 'are', 'was', 'were', 'be', 'been',
'have', 'has', 'had', 'do', 'does', 'did', 'will', 'would',
'could', 'should', 'to', 'of', 'in', 'for', 'on', 'with',
'at', 'by', 'from', 'as', 'and', 'or', 'but', 'if', 'it',
'its', 'this', 'that', 'these', 'those', 'i', 'me', 'my',
'we', 'our', 'you', 'your', 'he', 'him', 'his', 'she', 'her',
'they', 'them', 'their', 'not', 'no', 'so', 'than', 'too',
'very', 'also', 'just', 'about', 'up', 'out', 'what', 'which', 'who'
]);
function countSyllables(word) {
word = word.toLowerCase().replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/, '');
word = word.replace(/^y/, '');
return word.match(/[aeiouy]{1,2}/gi)?.length || 1;
}
function extractWords(text) {
return text.match(/[a-zA-Z]+(?:['-][a-zA-Z]+)*/g) || [];
}
function getReadabilityLabel(score) {
if (score >= 90) return 'Very Easy';
if (score >= 70) return 'Easy';
if (score >= 50) return 'Standard';
if (score >= 30) return 'Difficult';
return 'Very Difficult';
}
function analyze(text) {
if (!text || !text.trim()) {
return {
wordCount: 0,
sentenceCount: 0,
paragraphCount: 0,
fleschEase: 0,
fleschGrade: 0,
readabilityLabel: 'N/A',
readingTime: 0,
speakingTime: 0,
uniqueWordCount: 0,
lexicalDiversity: 0,
avgSentenceLength: 0,
longestSentence: '',
longestSentenceLength: 0,
topWords: []
};
}
const words = extractWords(text);
const wordCount = words.length;
const sentences = text.split(/[.!?]+/).map(s => s.trim()).filter(Boolean);
const sentenceCount = Math.max(sentences.length, 1);
const paragraphs = text.split(/\n\s*\n/).map(p => p.trim()).filter(Boolean);
const paragraphCount = Math.max(paragraphs.length, 1);
let totalSyllables = 0;
for (const w of words) {
totalSyllables += countSyllables(w);
}
const fleschEase = Math.round((206.835 - 1.015 * (wordCount / sentenceCount) - 84.6 * (totalSyllables / wordCount)) * 10) / 10;
const fleschGrade = Math.round((0.39 * (wordCount / sentenceCount) + 11.8 * (totalSyllables / wordCount) - 15.59) * 10) / 10;
const readabilityLabel = getReadabilityLabel(fleschEase);
const readingTime = Math.ceil(wordCount / 200);
const speakingTime = Math.ceil(wordCount / 130);
const uniqueWords = new Set(words.map(w => w.toLowerCase()));
const uniqueWordCount = uniqueWords.size;
const lexicalDiversity = wordCount > 0 ? Math.round((uniqueWordCount / wordCount) * 1000) / 10 : 0;
const avgSentenceLength = Math.round((wordCount / sentenceCount) * 10) / 10;
let longestSentence = '';
let longestSentenceLength = 0;
for (const s of sentences) {
const sWords = extractWords(s);
if (sWords.length > longestSentenceLength) {
longestSentenceLength = sWords.length;
longestSentence = s.trim();
}
}
if (longestSentence.length > 80) {
longestSentence = longestSentence.substring(0, 80) + '...';
}
const wordFreq = {};
for (const w of words) {
const lower = w.toLowerCase();
if (!STOP_WORDS.has(lower) && lower.length > 1) {
wordFreq[lower] = (wordFreq[lower] || 0) + 1;
}
}
const topWords = Object.entries(wordFreq)
.sort((a, b) => b[1] - a[1])
.slice(0, 10)
.map(([word, count]) => ({ word, count }));
return {
wordCount,
sentenceCount,
paragraphCount,
fleschEase,
fleschGrade,
readabilityLabel,
readingTime,
speakingTime,
uniqueWordCount,
lexicalDiversity,
avgSentenceLength,
longestSentence,
longestSentenceLength,
topWords
};
}
module.exports = { analyze };
-142
View File
@@ -1,142 +0,0 @@
// CodeMirror 6 wrapper module
// Provides createEditor() and getLanguageExtension() for the rest of the app.
const {
EditorView,
keymap,
lineNumbers,
highlightActiveLine,
drawSelection,
} = require('@codemirror/view');
const { EditorState } = require('@codemirror/state');
const { markdown, markdownLanguage } = require('@codemirror/lang-markdown');
// Language extensions loaded lazily on first use
let _javascript, _html, _css, _json, _python;
const {
defaultKeymap,
history,
historyKeymap,
indentWithTab,
} = require('@codemirror/commands');
const {
searchKeymap,
highlightSelectionMatches,
} = require('@codemirror/search');
const {
autocompletion,
completionKeymap,
} = require('@codemirror/autocomplete');
const {
bracketMatching,
foldGutter,
indentOnInput,
} = require('@codemirror/language');
const { oneDark } = require('@codemirror/theme-one-dark');
// Custom theme for JetBrains Mono font
const jetBrainsMonoTheme = EditorView.theme({
'&': {
fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace"
},
'.cm-content': {
fontFamily: 'inherit'
},
'.cm-scroller': {
fontFamily: 'inherit'
}
});
/**
* Create a CodeMirror 6 editor instance.
*
* @param {HTMLElement} parentElement - DOM element to mount the editor in
* @param {Object} options
* @param {string} options.content - initial document content (default '')
* @param {Function} options.onChange - called with new content string on every doc change
* @param {Function} options.onUpdate - called with the EditorView on every update (selection, doc change, etc.)
* @param {boolean} options.isDark - apply oneDark theme when true (default false)
* @param {boolean} options.showLineNumbers - show line-number gutter (default true)
* @returns {EditorView} the created editor view
*/
function createEditor(parentElement, options = {}) {
console.log('[createEditor] Called with parentElement:', parentElement?.id, 'dimensions:', parentElement?.clientWidth, 'x', parentElement?.clientHeight);
if (!parentElement) {
console.error('[createEditor] ERROR: parentElement is null or undefined!');
return null;
}
const {
content = '',
onChange = () => {},
onUpdate = null,
isDark = false,
showLineNumbers = true,
} = options;
const extensions = [
markdown({ base: markdownLanguage }),
history(),
drawSelection(),
highlightActiveLine(),
bracketMatching(),
indentOnInput(),
highlightSelectionMatches(),
autocompletion(),
foldGutter(),
jetBrainsMonoTheme,
keymap.of([
...defaultKeymap,
...historyKeymap,
...searchKeymap,
...completionKeymap,
indentWithTab,
]),
EditorView.updateListener.of((update) => {
if (update.docChanged) {
onChange(update.state.doc.toString());
}
if (onUpdate && (update.docChanged || update.selectionSet)) {
onUpdate(update.view);
}
}),
EditorView.lineWrapping,
];
if (showLineNumbers) {
extensions.push(lineNumbers());
}
if (isDark) {
extensions.push(oneDark);
}
const state = EditorState.create({ doc: content, extensions });
const view = new EditorView({ state, parent: parentElement });
return view;
}
/**
* Return the appropriate CodeMirror language extension for a given language name.
*
* Supported values: javascript, js, html, css, json, python, py, markdown.
* Falls back to markdown when the language is unrecognised.
*
* @param {string} lang - language identifier
* @returns {Extension} CodeMirror language extension
*/
function getLanguageExtension(lang) {
const loaders = {
javascript: () => { if (!_javascript) _javascript = require('@codemirror/lang-javascript').javascript; return _javascript(); },
html: () => { if (!_html) _html = require('@codemirror/lang-html').html; return _html(); },
css: () => { if (!_css) _css = require('@codemirror/lang-css').css; return _css(); },
json: () => { if (!_json) _json = require('@codemirror/lang-json').json; return _json(); },
python: () => { if (!_python) _python = require('@codemirror/lang-python').python; return _python(); },
markdown: () => markdown({ base: markdownLanguage }),
};
loaders.js = loaders.javascript;
loaders.py = loaders.python;
const loader = loaders[lang];
return loader ? loader() : markdown({ base: markdownLanguage });
}
module.exports = { createEditor, getLanguageExtension };
+949
View File
@@ -0,0 +1,949 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PanConverter - Markdown Editor</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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles-modern.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
</head>
<body>
<div class="container">
<div class="tab-bar" id="tab-bar">
<div class="tab active" data-tab-id="1">
<span class="tab-title">Untitled</span>
<button class="tab-close" title="Close tab">×</button>
</div>
<button class="new-tab-button" id="new-tab-btn" title="New tab">+</button>
</div>
<div class="toolbar">
<button id="btn-bold" title="Bold">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
<path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
</svg>
</button>
<button id="btn-italic" title="Italic">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="19" y1="4" x2="10" y2="4"></line>
<line x1="14" y1="20" x2="5" y2="20"></line>
<line x1="15" y1="4" x2="9" y2="20"></line>
</svg>
</button>
<button id="btn-heading" title="Heading">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="4 7 4 4 20 4 20 7"></polyline>
<line x1="9" y1="20" x2="15" y2="20"></line>
<line x1="12" y1="4" x2="12" y2="20"></line>
</svg>
</button>
<button id="btn-link" title="Link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
</button>
<button id="btn-code" title="Code">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
</button>
<button id="btn-list" title="List">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="8" y1="6" x2="21" y2="6"></line>
<line x1="8" y1="12" x2="21" y2="12"></line>
<line x1="8" y1="18" x2="21" y2="18"></line>
<line x1="3" y1="6" x2="3.01" y2="6"></line>
<line x1="3" y1="12" x2="3.01" y2="12"></line>
<line x1="3" y1="18" x2="3.01" y2="18"></line>
</svg>
</button>
<button id="btn-quote" title="Quote">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path>
<path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path>
</svg>
</button>
<button id="btn-table" title="Insert Table">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="3" y1="9" x2="21" y2="9"></line>
<line x1="3" y1="15" x2="21" y2="15"></line>
<line x1="9" y1="3" x2="9" y2="21"></line>
<line x1="15" y1="3" x2="15" y2="21"></line>
</svg>
</button>
<button id="btn-strikethrough" title="Strikethrough">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 4H9a3 3 0 0 0-2.83 4"></path>
<path d="M14 12a4 4 0 0 1 0 8H6"></path>
<line x1="4" y1="12" x2="20" y2="12"></line>
</svg>
</button>
<button id="btn-code-block" title="Code Block">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="6" width="20" height="12" rx="2"></rect>
<path d="m10 10-2 2 2 2"></path>
<path d="m14 10 2 2-2 2"></path>
</svg>
</button>
<button id="btn-horizontal-rule" title="Horizontal Rule">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
<div class="toolbar-separator"></div>
<button id="btn-find" title="Find & Replace (Ctrl+F)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
</button>
<button id="btn-line-numbers" title="Toggle Line Numbers">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 6h18"></path>
<path d="M3 12h18"></path>
<path d="M3 18h18"></path>
</svg>
</button>
<div class="toolbar-separator"></div>
<button id="btn-preview-toggle" title="Toggle Preview">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>
</div>
<!-- Find & Replace Dialog -->
<div id="find-dialog" class="find-dialog hidden">
<div class="find-controls">
<input type="text" id="find-input" placeholder="Find...">
<input type="text" id="replace-input" placeholder="Replace...">
<button id="btn-find-prev" title="Previous"></button>
<button id="btn-find-next" title="Next"></button>
<button id="btn-replace" title="Replace">Replace</button>
<button id="btn-replace-all" title="Replace All">All</button>
<button id="btn-find-close" title="Close">×</button>
</div>
<div class="find-info">
<span id="find-count">0 matches</span>
</div>
</div>
<!-- Export Options Dialog -->
<div id="export-dialog" class="export-dialog hidden">
<div class="export-dialog-content">
<div class="export-dialog-header">
<h3 id="export-dialog-title">Export Options</h3>
<button id="export-dialog-close" title="Close">×</button>
</div>
<div class="export-dialog-body">
<!-- Simple/Advanced Export Toggle -->
<div class="export-section export-mode-toggle">
<label class="checkbox-label">
<input type="checkbox" id="advanced-export-toggle">
<span class="checkmark"></span>
Show Advanced Options
</label>
<small class="export-help">Enable for templates, metadata, bibliography, and advanced PDF settings</small>
</div>
<!-- Advanced Export Options (hidden by default) -->
<div id="advanced-export-options" class="advanced-options hidden">
<div class="export-section">
<label for="export-template">Template:</label>
<select id="export-template">
<option value="default">Default</option>
<option value="custom">Custom (Browse...)</option>
</select>
<input type="file" id="template-file-input" accept=".tex,.html,.docx,.odt" style="display: none;">
<input type="text" id="custom-template-path" placeholder="Template file path..." style="display: none;">
</div>
<div class="export-section">
<label>Metadata:</label>
<div class="metadata-container">
<div class="metadata-field">
<input type="text" placeholder="title" class="metadata-key">
<input type="text" placeholder="Document title" class="metadata-value">
</div>
<div class="metadata-field">
<input type="text" placeholder="author" class="metadata-key">
<input type="text" placeholder="Author name" class="metadata-value">
</div>
<div class="metadata-field">
<input type="text" placeholder="date" class="metadata-key">
<input type="text" placeholder="Date" class="metadata-value">
</div>
<div class="metadata-field">
<input type="text" placeholder="subject" class="metadata-key">
<input type="text" placeholder="Subject" class="metadata-value">
</div>
</div>
<button id="add-metadata-field" type="button">+ Add Field</button>
</div>
<div class="export-section">
<label>Document Options:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="export-toc"> Table of Contents</label>
<label><input type="checkbox" id="export-number-sections"> Number Sections</label>
<label><input type="checkbox" id="export-citeproc"> Process Citations</label>
</div>
<div class="form-row">
<label for="export-toc-depth">TOC Depth:</label>
<input type="number" id="export-toc-depth" min="1" max="6" value="3">
</div>
</div>
<div class="export-section pdf-only">
<label>PDF Options:</label>
<div class="form-row">
<label for="pdf-engine">PDF Engine:</label>
<select id="pdf-engine">
<option value="xelatex">XeLaTeX (Recommended)</option>
<option value="pdflatex">PDFLaTeX</option>
<option value="lualatex">LuaLaTeX</option>
</select>
</div>
<div class="form-row">
<label for="pdf-geometry">Page Margins:</label>
<select id="pdf-geometry">
<option value="margin=1in">1 inch (Default)</option>
<option value="margin=0.75in">0.75 inch</option>
<option value="margin=1.25in">1.25 inch</option>
<option value="margin=2cm">2 cm</option>
<option value="margin=2.5cm">2.5 cm</option>
<option value="custom">Custom...</option>
</select>
<input type="text" id="custom-geometry" placeholder="e.g., margin=1.5in" style="display: none;">
</div>
</div>
<div class="export-section">
<label>Bibliography:</label>
<div class="form-row">
<input type="text" id="bibliography-file" placeholder="Bibliography file (.bib, .yaml, .json)">
<button id="browse-bibliography">Browse</button>
</div>
<div class="form-row">
<input type="text" id="csl-file" placeholder="Citation style file (.csl)">
<button id="browse-csl">Browse</button>
</div>
</div>
</div> <!-- End advanced-export-options -->
<!-- Basic Export Options (always visible) -->
<div class="export-section basic-options">
<label>Quick Export Settings:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="basic-toc"> Include Table of Contents</label>
<label><input type="checkbox" id="basic-number-sections"> Number Sections</label>
</div>
</div>
</div>
<div class="export-dialog-footer">
<button id="export-cancel">Cancel</button>
<button id="export-confirm" class="primary">Export</button>
</div>
</div>
</div>
<!-- Universal File Converter Dialog -->
<div id="universal-converter-dialog" class="export-dialog hidden">
<div class="export-dialog-content">
<div class="export-dialog-header">
<h3>Universal File Converter</h3>
<button id="converter-dialog-close" title="Close">×</button>
</div>
<div class="export-dialog-body">
<div class="export-section">
<label>Select File to Convert:</label>
<div class="folder-input-group">
<input type="text" id="converter-file-path" placeholder="Browse for a file..." readonly>
<button id="browse-converter-file">Browse</button>
</div>
<small>Supported formats: Documents, Images, Media files</small>
</div>
<div class="export-section">
<label for="converter-tool">Conversion Tool:</label>
<select id="converter-tool">
<option value="libreoffice">LibreOffice (Documents)</option>
<option value="imagemagick">ImageMagick (Images)</option>
<option value="ffmpeg">FFmpeg (Media)</option>
<option value="pandoc">Pandoc (Markup)</option>
</select>
<small id="converter-tool-help">Documents: DOCX, PDF, ODT, RTF, TXT, HTML, XLSX, PPTX</small>
</div>
<div class="export-section">
<label for="converter-from">Input Format:</label>
<select id="converter-from">
<!-- Dynamically populated based on selected converter tool -->
</select>
</div>
<div class="export-section">
<label for="converter-to">Output Format:</label>
<select id="converter-to">
<!-- Dynamically populated based on selected converter tool -->
</select>
</div>
<!-- Batch Mode Toggle -->
<div class="export-section">
<label class="checkbox-label">
<input type="checkbox" id="converter-batch-mode">
<span class="checkmark"></span>
Batch Mode (Convert entire folder)
</label>
<small class="export-help">Enable to convert multiple files at once from a folder</small>
</div>
<!-- Batch Mode Options (hidden by default) -->
<div id="converter-batch-options" class="advanced-options hidden">
<div class="export-section">
<label>Input Folder:</label>
<div class="folder-input-group">
<input type="text" id="converter-batch-input-folder" placeholder="Select folder..." readonly>
<button id="browse-converter-batch-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Output Folder:</label>
<div class="folder-input-group">
<input type="text" id="converter-batch-output-folder" placeholder="Select output folder..." readonly>
<button id="browse-converter-batch-output">Browse</button>
</div>
</div>
<div class="export-section">
<label>
<input type="checkbox" id="converter-batch-subfolders" checked>
Include subfolders (recursive)
</label>
</div>
</div>
<!-- Advanced Options Toggle -->
<div class="export-section export-mode-toggle">
<label class="checkbox-label">
<input type="checkbox" id="converter-advanced-toggle">
<span class="checkmark"></span>
Show Advanced Options
</label>
<small class="export-help">Tool-specific quality, compression, and conversion settings</small>
</div>
<!-- Advanced Converter Options (hidden by default) -->
<div id="converter-advanced-options" class="advanced-options hidden">
<!-- ImageMagick Advanced Options -->
<div class="converter-options imagemagick-options hidden">
<div class="export-section">
<label for="imagemagick-quality">Quality (1-100):</label>
<input type="range" id="imagemagick-quality" min="1" max="100" value="85">
<span id="imagemagick-quality-value">85</span>
</div>
<div class="export-section">
<label for="imagemagick-dpi">Resolution (DPI):</label>
<input type="number" id="imagemagick-dpi" min="72" max="600" value="300" placeholder="300">
<small>Higher DPI = better quality, larger file size</small>
</div>
<div class="export-section">
<label for="imagemagick-resize">Resize (WxH):</label>
<input type="text" id="imagemagick-resize" placeholder="e.g., 1920x1080 or 50%">
<small>Examples: 1920x1080, 800x600, 50% (leave empty for no resize)</small>
</div>
<div class="export-section">
<label for="imagemagick-compression">Compression Type:</label>
<select id="imagemagick-compression">
<option value="">None (Default)</option>
<option value="JPEG">JPEG</option>
<option value="LZW">LZW</option>
<option value="Zip">Zip</option>
<option value="RLE">RLE</option>
</select>
</div>
</div>
<!-- FFmpeg Advanced Options -->
<div class="converter-options ffmpeg-options hidden">
<div class="export-section">
<label for="ffmpeg-video-codec">Video Codec:</label>
<select id="ffmpeg-video-codec">
<option value="">Default</option>
<option value="libx264">H.264 (libx264)</option>
<option value="libx265">H.265/HEVC (libx265)</option>
<option value="libvpx-vp9">VP9 (libvpx-vp9)</option>
<option value="copy">Copy (no re-encode)</option>
</select>
</div>
<div class="export-section">
<label for="ffmpeg-audio-codec">Audio Codec:</label>
<select id="ffmpeg-audio-codec">
<option value="">Default</option>
<option value="aac">AAC</option>
<option value="libmp3lame">MP3 (libmp3lame)</option>
<option value="libopus">Opus (libopus)</option>
<option value="libvorbis">Vorbis (libvorbis)</option>
<option value="copy">Copy (no re-encode)</option>
</select>
</div>
<div class="export-section">
<label for="ffmpeg-bitrate">Video Bitrate (kbps):</label>
<input type="number" id="ffmpeg-bitrate" min="100" max="50000" placeholder="e.g., 2000">
<small>Higher bitrate = better quality, larger file size</small>
</div>
<div class="export-section">
<label for="ffmpeg-preset">Encoding Preset:</label>
<select id="ffmpeg-preset">
<option value="">Default</option>
<option value="ultrafast">Ultra Fast</option>
<option value="fast">Fast</option>
<option value="medium" selected>Medium</option>
<option value="slow">Slow (Better Quality)</option>
<option value="veryslow">Very Slow (Best Quality)</option>
</select>
</div>
<div class="export-section">
<label for="ffmpeg-framerate">Frame Rate (fps):</label>
<input type="number" id="ffmpeg-framerate" min="1" max="120" placeholder="e.g., 30">
<small>Common: 24, 30, 60</small>
</div>
</div>
<!-- LibreOffice Advanced Options -->
<div class="converter-options libreoffice-options hidden">
<div class="export-section">
<label for="libreoffice-quality">Export Quality:</label>
<select id="libreoffice-quality">
<option value="">Default</option>
<option value="high">High</option>
<option value="medium" selected>Medium</option>
<option value="low">Low (Smaller file size)</option>
</select>
</div>
<div class="export-section">
<label for="libreoffice-page-range">Page Range:</label>
<input type="text" id="libreoffice-page-range" placeholder="e.g., 1-5, 7, 9-12">
<small>Leave empty to convert all pages</small>
</div>
<div class="export-section">
<label>
<input type="checkbox" id="libreoffice-export-bookmarks">
Export Bookmarks (PDF only)
</label>
</div>
</div>
<!-- Pandoc Advanced Options -->
<div class="converter-options pandoc-options hidden">
<div class="export-section">
<small>Pandoc conversions can use advanced export options from the Export menu.</small>
<button id="pandoc-show-export-options" type="button">Open Export Options Dialog...</button>
</div>
</div>
</div>
<div id="converter-progress" class="batch-progress hidden">
<div class="progress-text">
<span id="converter-status">Converting...</span>
</div>
</div>
<div class="export-section">
<small><strong>Installation Notes:</strong></small>
<small>• LibreOffice: Download from <a href="https://www.libreoffice.org/download" target="_blank">libreoffice.org</a></small>
<small>• ImageMagick: Download from <a href="https://imagemagick.org/script/download.php" target="_blank">imagemagick.org</a></small>
<small>• FFmpeg: Download from <a href="https://ffmpeg.org/download.html" target="_blank">ffmpeg.org</a></small>
<small>• Pandoc: Download from <a href="https://pandoc.org/installing.html" target="_blank">pandoc.org</a></small>
</div>
</div>
<div class="export-dialog-footer">
<button id="converter-cancel">Cancel</button>
<button id="converter-convert" class="primary">Convert</button>
</div>
</div>
</div>
<!-- Batch Conversion Dialog -->
<div id="batch-dialog" class="batch-dialog hidden">
<div class="batch-dialog-content">
<div class="batch-dialog-header">
<h3>Batch File Conversion</h3>
<button id="batch-dialog-close" title="Close">×</button>
</div>
<div class="batch-dialog-body">
<div class="batch-section">
<label>Input Folder:</label>
<div class="folder-input-group">
<input type="text" id="batch-input-folder" placeholder="Select folder containing markdown files..." readonly>
<button id="browse-input-folder">Browse</button>
</div>
</div>
<div class="batch-section">
<label>Output Folder:</label>
<div class="folder-input-group">
<input type="text" id="batch-output-folder" placeholder="Select output folder..." readonly>
<button id="browse-output-folder">Browse</button>
</div>
</div>
<div class="batch-section">
<label for="batch-format">Output Format:</label>
<select id="batch-format">
<option value="html">HTML</option>
<option value="pdf">PDF</option>
<option value="docx">DOCX</option>
<option value="latex">LaTeX</option>
<option value="rtf">RTF</option>
<option value="odt">ODT</option>
<option value="epub">EPUB</option>
<option value="pptx">PowerPoint (PPTX)</option>
<option value="odp">OpenDocument Presentation (ODP)</option>
</select>
</div>
<div class="batch-section">
<label>
<input type="checkbox" id="batch-include-subfolders" checked>
Include subfolders (recursive)
</label>
</div>
<div class="batch-section">
<button id="batch-show-options" type="button">Advanced Export Options...</button>
</div>
<div id="batch-progress" class="batch-progress hidden">
<div class="progress-bar">
<div class="progress-fill" id="batch-progress-fill"></div>
</div>
<div class="progress-text">
<span id="batch-progress-text">Processing...</span>
<span id="batch-progress-count">0 / 0</span>
</div>
</div>
</div>
<div class="batch-dialog-footer">
<button id="batch-cancel">Cancel</button>
<button id="batch-start" class="primary" disabled>Start Conversion</button>
</div>
</div>
</div>
<!-- PDF Editor Dialog -->
<div id="pdf-editor-dialog" class="export-dialog hidden">
<div class="export-dialog-content">
<div class="export-dialog-header">
<h3 id="pdf-editor-title">PDF Editor</h3>
<button id="pdf-editor-dialog-close" title="Close">×</button>
</div>
<div class="export-dialog-body">
<!-- Merge PDFs Section -->
<div id="pdf-merge-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF Files to Merge:</label>
<div id="merge-files-list" class="file-list">
<!-- Dynamically added file entries -->
</div>
<button id="add-merge-file" type="button">+ Add PDF File</button>
<small>Files will be merged in the order shown. Drag to reorder.</small>
</div>
<div class="export-section">
<label>Output File:</label>
<div class="folder-input-group">
<input type="text" id="merge-output-path" placeholder="Choose output location..." readonly>
<button id="browse-merge-output">Browse</button>
</div>
</div>
</div>
<!-- Split PDF Section -->
<div id="pdf-split-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File to Split:</label>
<div class="folder-input-group">
<input type="text" id="split-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-split-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Split Mode:</label>
<select id="split-mode">
<option value="pages">By Page Range</option>
<option value="interval">Every N Pages</option>
<option value="size">By File Size</option>
</select>
</div>
<div id="split-pages-options" class="export-section">
<label>Page Ranges:</label>
<input type="text" id="split-page-ranges" placeholder="e.g., 1-5, 6-10, 11-15">
<small>Separate ranges with commas. Each range will create a new PDF.</small>
</div>
<div id="split-interval-options" class="export-section hidden">
<label>Split Every:</label>
<input type="number" id="split-interval" min="1" value="5" placeholder="5">
<small>pages (e.g., 5 = split every 5 pages)</small>
</div>
<div id="split-size-options" class="export-section hidden">
<label>Max File Size (MB):</label>
<input type="number" id="split-size" min="1" value="5" placeholder="5">
<small>Split when file size exceeds this limit</small>
</div>
<div class="export-section">
<label>Output Folder:</label>
<div class="folder-input-group">
<input type="text" id="split-output-folder" placeholder="Select output folder..." readonly>
<button id="browse-split-output">Browse</button>
</div>
</div>
</div>
<!-- Compress PDF Section -->
<div id="pdf-compress-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File to Compress:</label>
<div class="folder-input-group">
<input type="text" id="compress-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-compress-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Compression Level:</label>
<select id="compress-level">
<option value="low">Low (Best Quality)</option>
<option value="medium" selected>Medium (Balanced)</option>
<option value="high">High (Smallest Size)</option>
</select>
<small>Higher compression = smaller file size, lower quality</small>
</div>
<div class="export-section">
<label>Compression Options:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="compress-images" checked> Compress Images</label>
<label><input type="checkbox" id="compress-remove-duplicates" checked> Remove Duplicates</label>
<label><input type="checkbox" id="compress-optimize-fonts"> Optimize Fonts</label>
</div>
</div>
<div class="export-section">
<label>Output File:</label>
<div class="folder-input-group">
<input type="text" id="compress-output-path" placeholder="Choose output location..." readonly>
<button id="browse-compress-output">Browse</button>
</div>
</div>
</div>
<!-- Rotate Pages Section -->
<div id="pdf-rotate-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File:</label>
<div class="folder-input-group">
<input type="text" id="rotate-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-rotate-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Pages to Rotate:</label>
<input type="text" id="rotate-pages" placeholder="e.g., 1-5, 7, 9-12 (leave empty for all pages)">
<small>Separate page numbers/ranges with commas, or leave empty to rotate all pages</small>
</div>
<div class="export-section">
<label>Rotation Angle:</label>
<select id="rotate-angle">
<option value="90">90° Clockwise</option>
<option value="180">180°</option>
<option value="270">270° Clockwise (90° Counter-clockwise)</option>
</select>
</div>
<div class="export-section">
<label>Output File:</label>
<div class="folder-input-group">
<input type="text" id="rotate-output-path" placeholder="Choose output location..." readonly>
<button id="browse-rotate-output">Browse</button>
</div>
</div>
</div>
<!-- Delete Pages Section -->
<div id="pdf-delete-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File:</label>
<div class="folder-input-group">
<input type="text" id="delete-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-delete-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Pages to Delete:</label>
<input type="text" id="delete-pages" placeholder="e.g., 1-5, 7, 9-12">
<small>Separate page numbers/ranges with commas</small>
</div>
<div class="export-section">
<label>Output File:</label>
<div class="folder-input-group">
<input type="text" id="delete-output-path" placeholder="Choose output location..." readonly>
<button id="browse-delete-output">Browse</button>
</div>
</div>
</div>
<!-- Reorder Pages Section -->
<div id="pdf-reorder-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File:</label>
<div class="folder-input-group">
<input type="text" id="reorder-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-reorder-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>New Page Order:</label>
<input type="text" id="reorder-pages" placeholder="e.g., 3, 1, 2, 5, 4">
<small>Enter page numbers in desired order, separated by commas</small>
</div>
<div class="export-section">
<button id="load-current-order" type="button">Load Current Page Order</button>
<div id="current-page-order" class="info-display hidden">
Current order: <span id="current-order-display"></span>
</div>
</div>
<div class="export-section">
<label>Output File:</label>
<div class="folder-input-group">
<input type="text" id="reorder-output-path" placeholder="Choose output location..." readonly>
<button id="browse-reorder-output">Browse</button>
</div>
</div>
</div>
<!-- Watermark Section -->
<div id="pdf-watermark-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File:</label>
<div class="folder-input-group">
<input type="text" id="watermark-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-watermark-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Watermark Text:</label>
<input type="text" id="watermark-text" placeholder="Enter watermark text...">
</div>
<div class="export-section">
<label>Font Size:</label>
<input type="number" id="watermark-font-size" min="8" max="144" value="48" placeholder="48">
</div>
<div class="export-section">
<label>Opacity (0-100):</label>
<input type="range" id="watermark-opacity" min="0" max="100" value="30">
<span id="watermark-opacity-value">30</span>
</div>
<div class="export-section">
<label>Position:</label>
<select id="watermark-position">
<option value="center">Center</option>
<option value="diagonal">Diagonal</option>
<option value="top-left">Top Left</option>
<option value="top-center">Top Center</option>
<option value="top-right">Top Right</option>
<option value="bottom-left">Bottom Left</option>
<option value="bottom-center">Bottom Center</option>
<option value="bottom-right">Bottom Right</option>
</select>
</div>
<div class="export-section">
<label>Color:</label>
<input type="color" id="watermark-color" value="#000000">
</div>
<div class="export-section">
<label>Apply to:</label>
<select id="watermark-pages">
<option value="all">All Pages</option>
<option value="custom">Custom Pages</option>
</select>
<input type="text" id="watermark-custom-pages" placeholder="e.g., 1-5, 7, 9-12" class="hidden">
</div>
<div class="export-section">
<label>Output File:</label>
<div class="folder-input-group">
<input type="text" id="watermark-output-path" placeholder="Choose output location..." readonly>
<button id="browse-watermark-output">Browse</button>
</div>
</div>
</div>
<!-- Encrypt PDF Section (Password Protection) -->
<div id="pdf-encrypt-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File to Protect:</label>
<div class="folder-input-group">
<input type="text" id="encrypt-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-encrypt-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>User Password:</label>
<input type="password" id="encrypt-user-password" placeholder="Password to open the PDF">
<small>Required to open and view the PDF</small>
</div>
<div class="export-section">
<label>Owner Password:</label>
<input type="password" id="encrypt-owner-password" placeholder="Password to modify permissions">
<small>Optional: Required to change document permissions</small>
</div>
<div class="export-section">
<label>Encryption Level:</label>
<select id="encrypt-level">
<option value="128">128-bit (Standard)</option>
<option value="256" selected>256-bit (High Security)</option>
</select>
</div>
<div class="export-section">
<label>Document Permissions:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="encrypt-allow-printing" checked> Allow Printing</label>
<label><input type="checkbox" id="encrypt-allow-modify" checked> Allow Content Modification</label>
<label><input type="checkbox" id="encrypt-allow-copy" checked> Allow Content Copying</label>
<label><input type="checkbox" id="encrypt-allow-annotate" checked> Allow Annotations</label>
<label><input type="checkbox" id="encrypt-allow-forms" checked> Allow Form Filling</label>
<label><input type="checkbox" id="encrypt-allow-extract" checked> Allow Accessibility (Screen Readers)</label>
<label><input type="checkbox" id="encrypt-allow-assemble" checked> Allow Document Assembly</label>
<label><input type="checkbox" id="encrypt-allow-print-high" checked> Allow High-Quality Printing</label>
</div>
<small>These permissions apply when owner password is set</small>
</div>
<div class="export-section">
<label>Output File:</label>
<div class="folder-input-group">
<input type="text" id="encrypt-output-path" placeholder="Choose output location..." readonly>
<button id="browse-encrypt-output">Browse</button>
</div>
</div>
</div>
<!-- Decrypt PDF Section (Remove Password) -->
<div id="pdf-decrypt-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>Protected PDF File:</label>
<div class="folder-input-group">
<input type="text" id="decrypt-input-path" placeholder="Select protected PDF file..." readonly>
<button id="browse-decrypt-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Current Password:</label>
<input type="password" id="decrypt-password" placeholder="Enter PDF password">
<small>Enter the password to unlock and remove protection</small>
</div>
<div class="export-section">
<label>Output File:</label>
<div class="folder-input-group">
<input type="text" id="decrypt-output-path" placeholder="Choose output location..." readonly>
<button id="browse-decrypt-output">Browse</button>
</div>
</div>
</div>
<!-- Permissions Section -->
<div id="pdf-permissions-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File:</label>
<div class="folder-input-group">
<input type="text" id="permissions-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-permissions-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Current Password (if protected):</label>
<input type="password" id="permissions-current-password" placeholder="Leave empty if not protected">
</div>
<div class="export-section">
<label>New Owner Password:</label>
<input type="password" id="permissions-owner-password" placeholder="Password to modify permissions">
<small>Set a password required to change document permissions</small>
</div>
<div class="export-section">
<label>Document Permissions:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="permissions-allow-printing" checked> Allow Printing</label>
<label><input type="checkbox" id="permissions-allow-modify" checked> Allow Content Modification</label>
<label><input type="checkbox" id="permissions-allow-copy" checked> Allow Content Copying</label>
<label><input type="checkbox" id="permissions-allow-annotate" checked> Allow Annotations</label>
<label><input type="checkbox" id="permissions-allow-forms" checked> Allow Form Filling</label>
<label><input type="checkbox" id="permissions-allow-extract" checked> Allow Accessibility (Screen Readers)</label>
<label><input type="checkbox" id="permissions-allow-assemble" checked> Allow Document Assembly</label>
<label><input type="checkbox" id="permissions-allow-print-high" checked> Allow High-Quality Printing</label>
</div>
</div>
<div class="export-section">
<label>Output File:</label>
<div class="folder-input-group">
<input type="text" id="permissions-output-path" placeholder="Choose output location..." readonly>
<button id="browse-permissions-output">Browse</button>
</div>
</div>
</div>
<!-- Progress indicator -->
<div id="pdf-progress" class="batch-progress hidden">
<div class="progress-bar">
<div class="progress-fill" id="pdf-progress-fill"></div>
</div>
<div class="progress-text">
<span id="pdf-progress-text">Processing...</span>
</div>
</div>
</div>
<div class="export-dialog-footer">
<button id="pdf-editor-cancel">Cancel</button>
<button id="pdf-editor-process" class="primary">Process</button>
</div>
</div>
</div>
<div class="editor-container">
<div class="tab-content active" id="tab-content-1" data-tab-id="1">
<div id="editor-pane-1" class="pane">
<div class="editor-wrapper">
<div id="line-numbers-1" class="line-numbers hidden"></div>
<textarea id="editor-1" class="editor-textarea"></textarea>
</div>
</div>
<div id="preview-pane-1" class="pane">
<div id="preview-1" class="preview-content"></div>
</div>
</div>
</div>
<div class="status-bar">
<span id="status-text">Ready</span>
<span id="word-count">Words: 0 | Characters: 0</span>
</div>
</div>
<script src="renderer.js"></script>
</body>
</html>
+2132
View File
File diff suppressed because it is too large Load Diff
-44
View File
@@ -1,44 +0,0 @@
const simpleGit = require('simple-git');
function getGitInstance(dir) {
return simpleGit(dir);
}
async function getStatus(dir) {
try {
const git = getGitInstance(dir);
return await git.status();
} catch (err) {
return { error: 'Not a git repository' };
}
}
async function stage(dir, files) {
try {
const git = getGitInstance(dir);
await git.add(files);
return await git.status();
} catch (err) {
return { error: err.message };
}
}
async function commit(dir, message) {
try {
const git = getGitInstance(dir);
return await git.commit(message);
} catch (err) {
return { error: err.message };
}
}
async function log(dir, maxCount = 20) {
try {
const git = getGitInstance(dir);
return await git.log({ maxCount });
} catch (err) {
return { error: err.message };
}
}
module.exports = { getStatus, stage, commit, log };
-433
View File
@@ -1,433 +0,0 @@
const fs = require('fs');
const path = require('path');
const { PDFDocument, rgb, degrees, StandardFonts } = require('pdf-lib');
function parsePageRanges(rangeString, totalPages) {
const pages = [];
const ranges = rangeString.split(',').map(r => r.trim());
for (const range of ranges) {
if (range.includes('-')) {
const [start, end] = range.split('-').map(n => parseInt(n.trim()));
for (let i = start; i <= end && i <= totalPages; i++) {
if (i > 0 && !pages.includes(i - 1)) {
pages.push(i - 1);
}
}
} else {
const page = parseInt(range);
if (page > 0 && page <= totalPages && !pages.includes(page - 1)) {
pages.push(page - 1);
}
}
}
return pages.sort((a, b) => a - b);
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16) / 255,
g: parseInt(result[2], 16) / 255,
b: parseInt(result[3], 16) / 255
} : { r: 0, g: 0, b: 0 };
}
async function pdfMerge(data) {
try {
const mergedPdf = await PDFDocument.create();
for (const filePath of data.inputFiles) {
const pdfBytes = fs.readFileSync(filePath);
const pdf = await PDFDocument.load(pdfBytes);
const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
copiedPages.forEach(page => mergedPdf.addPage(page));
}
const pdfBytes = await mergedPdf.save();
fs.writeFileSync(data.outputPath, pdfBytes);
return { success: true, message: `Successfully merged ${data.inputFiles.length} PDFs` };
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfSplit(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const totalPages = pdf.getPageCount();
const splits = [];
if (data.splitMode === 'pages') {
const ranges = data.pageRanges.split(',').map(r => r.trim());
for (let i = 0; i < ranges.length; i++) {
const range = ranges[i];
const pages = [];
if (range.includes('-')) {
const [start, end] = range.split('-').map(n => parseInt(n.trim()));
for (let p = start; p <= end && p <= totalPages; p++) {
pages.push(p - 1);
}
} else {
const page = parseInt(range);
if (page > 0 && page <= totalPages) {
pages.push(page - 1);
}
}
if (pages.length > 0) {
splits.push({ pages, name: `part_${i + 1}` });
}
}
} else if (data.splitMode === 'interval') {
const interval = data.interval;
for (let i = 0; i < totalPages; i += interval) {
const pages = [];
for (let j = i; j < i + interval && j < totalPages; j++) {
pages.push(j);
}
splits.push({ pages, name: `part_${Math.floor(i / interval) + 1}` });
}
} else if (data.splitMode === 'size') {
const chunkSize = Math.max(1, Math.floor(totalPages / 5));
for (let i = 0; i < totalPages; i += chunkSize) {
const pages = [];
for (let j = i; j < i + chunkSize && j < totalPages; j++) {
pages.push(j);
}
splits.push({ pages, name: `part_${Math.floor(i / chunkSize) + 1}` });
}
}
const baseName = path.basename(data.inputPath, '.pdf');
for (const split of splits) {
const newPdf = await PDFDocument.create();
const copiedPages = await newPdf.copyPages(pdf, split.pages);
copiedPages.forEach(page => newPdf.addPage(page));
const outputPath = path.join(data.outputFolder, `${baseName}_${split.name}.pdf`);
const newPdfBytes = await newPdf.save();
fs.writeFileSync(outputPath, newPdfBytes);
}
return { success: true, message: `Successfully split PDF into ${splits.length} files` };
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfCompress(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const compressedPdfBytes = await pdf.save({
useObjectStreams: true,
addDefaultPage: false,
objectsPerTick: 50
});
fs.writeFileSync(data.outputPath, compressedPdfBytes);
const originalSize = fs.statSync(data.inputPath).size;
const compressedSize = fs.statSync(data.outputPath).size;
const savings = ((originalSize - compressedSize) / originalSize * 100).toFixed(1);
return {
success: true,
message: `PDF compressed. Size reduced by ${savings}% (${(originalSize / 1024).toFixed(1)}KB → ${(compressedSize / 1024).toFixed(1)}KB)`
};
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfRotate(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const totalPages = pdf.getPageCount();
let pagesToRotate = [];
if (data.pages && data.pages.trim()) {
pagesToRotate = parsePageRanges(data.pages, totalPages);
} else {
pagesToRotate = Array.from({ length: totalPages }, (_, i) => i);
}
pagesToRotate.forEach(pageIndex => {
const page = pdf.getPage(pageIndex);
page.setRotation(degrees(data.angle));
});
const rotatedPdfBytes = await pdf.save();
fs.writeFileSync(data.outputPath, rotatedPdfBytes);
return {
success: true,
message: `Successfully rotated ${pagesToRotate.length} page(s) by ${data.angle}\u00B0`
};
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfDeletePages(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const totalPages = pdf.getPageCount();
const pagesToDelete = parsePageRanges(data.pages, totalPages);
pagesToDelete.sort((a, b) => b - a).forEach(pageIndex => {
pdf.removePage(pageIndex);
});
const newPdfBytes = await pdf.save();
fs.writeFileSync(data.outputPath, newPdfBytes);
return {
success: true,
message: `Successfully deleted ${pagesToDelete.length} page(s). New PDF has ${totalPages - pagesToDelete.length} pages`
};
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfReorder(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const totalPages = pdf.getPageCount();
const newOrder = data.newOrder.split(',').map(n => parseInt(n.trim()) - 1);
if (newOrder.length !== totalPages) {
return { success: false, error: `New order must include all ${totalPages} pages` };
}
const newPdf = await PDFDocument.create();
const copiedPages = await newPdf.copyPages(pdf, newOrder);
copiedPages.forEach(page => newPdf.addPage(page));
const reorderedPdfBytes = await newPdf.save();
fs.writeFileSync(data.outputPath, reorderedPdfBytes);
return { success: true, message: 'Successfully reordered PDF pages' };
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfWatermark(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const totalPages = pdf.getPageCount();
let pagesToWatermark = [];
if (data.pages === 'all') {
pagesToWatermark = Array.from({ length: totalPages }, (_, i) => i);
} else if (data.pages === 'custom' && data.customPages) {
pagesToWatermark = parsePageRanges(data.customPages, totalPages);
}
const font = await pdf.embedFont(StandardFonts.Helvetica);
const color = hexToRgb(data.color);
for (const pageIndex of pagesToWatermark) {
const page = pdf.getPage(pageIndex);
const { width, height } = page.getSize();
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,
y,
size: data.fontSize,
font,
color: rgb(color.r, color.g, color.b),
opacity: data.opacity,
rotate: degrees(rotation)
});
}
const watermarkedPdfBytes = await pdf.save();
fs.writeFileSync(data.outputPath, watermarkedPdfBytes);
return {
success: true,
message: `Successfully added watermark to ${pagesToWatermark.length} page(s)`
};
} catch (error) {
return { success: false, error: error.message };
}
}
async function pdfEncrypt(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes);
const encryptedPdfBytes = await pdf.save({
userPassword: data.userPassword,
ownerPassword: data.ownerPassword || data.userPassword,
permissions: {
printing: data.permissions.printing ? 'highResolution' : 'lowResolution',
modifying: data.permissions.modifying,
copying: data.permissions.copying,
annotating: data.permissions.annotating,
fillingForms: data.permissions.fillingForms,
contentAccessibility: data.permissions.contentAccessibility,
documentAssembly: data.permissions.documentAssembly
}
});
fs.writeFileSync(data.outputPath, encryptedPdfBytes);
return { success: true, message: 'Successfully added password protection to PDF' };
} catch (error) {
if (error.message.includes('encrypt') || error.message.includes('password')) {
return {
success: false,
error: 'PDF encryption requires pdf-lib with encryption support. This feature may not be available in the current version.'
};
}
return { success: false, error: error.message };
}
}
async function pdfDecrypt(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const pdf = await PDFDocument.load(pdfBytes, { password: data.password });
const decryptedPdfBytes = await pdf.save();
fs.writeFileSync(data.outputPath, decryptedPdfBytes);
return { success: true, message: 'Successfully removed password protection from PDF' };
} catch (error) {
if (error.message.includes('password') || error.message.includes('encrypted')) {
return { success: false, error: 'Incorrect password or PDF is not encrypted' };
}
return { success: false, error: error.message };
}
}
async function pdfSetPermissions(data) {
try {
const pdfBytes = fs.readFileSync(data.inputPath);
const loadOptions = data.currentPassword ? { password: data.currentPassword } : {};
const pdf = await PDFDocument.load(pdfBytes, loadOptions);
const newPdfBytes = await pdf.save({
ownerPassword: data.ownerPassword,
permissions: {
printing: data.permissions.printing ? 'highResolution' : 'lowResolution',
modifying: data.permissions.modifying,
copying: data.permissions.copying,
annotating: data.permissions.annotating,
fillingForms: data.permissions.fillingForms,
contentAccessibility: data.permissions.contentAccessibility,
documentAssembly: data.permissions.documentAssembly
}
});
fs.writeFileSync(data.outputPath, newPdfBytes);
return { success: true, message: 'Successfully updated PDF permissions' };
} catch (error) {
if (error.message.includes('encrypt') || error.message.includes('permission')) {
return {
success: false,
error: 'PDF permissions require pdf-lib with encryption support. This feature may not be available in the current version.'
};
}
return { success: false, error: error.message };
}
}
function executeOperation(operation, data) {
switch (operation) {
case 'merge': return pdfMerge(data);
case 'split': return pdfSplit(data);
case 'compress': return pdfCompress(data);
case 'rotate': return pdfRotate(data);
case 'delete': return pdfDeletePages(data);
case 'reorder': return pdfReorder(data);
case 'watermark': return pdfWatermark(data);
case 'encrypt': return pdfEncrypt(data);
case 'decrypt': return pdfDecrypt(data);
case 'permissions': return pdfSetPermissions(data);
default: return Promise.resolve({ success: false, error: `Unknown operation: ${operation}` });
}
}
async function getPageCount(filePath) {
const pdfBytes = fs.readFileSync(filePath);
const pdf = await PDFDocument.load(pdfBytes);
return pdf.getPageCount();
}
module.exports = {
parsePageRanges,
hexToRgb,
pdfMerge,
pdfSplit,
pdfCompress,
pdfRotate,
pdfDeletePages,
pdfReorder,
pdfWatermark,
pdfEncrypt,
pdfDecrypt,
pdfSetPermissions,
executeOperation,
getPageCount
};
-13
View File
@@ -1,13 +0,0 @@
// 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 };
});
}
module.exports = { register };
-28
View File
@@ -1,28 +0,0 @@
// 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 () => {
const dir = currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd();
return GitOperations.getStatus(dir);
});
ipcMain.handle('git-stage', async (_event, { files }) => {
const dir = currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd();
return GitOperations.stage(dir, files);
});
ipcMain.handle('git-commit', async (_event, { message }) => {
const dir = currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd();
return GitOperations.commit(dir, message);
});
ipcMain.handle('git-log', async () => {
const dir = currentFileRef.current ? require('path').dirname(currentFileRef.current) : process.cwd();
return GitOperations.log(dir);
});
}
module.exports = { register };
-157
View File
@@ -1,157 +0,0 @@
// src/main/files/index.js
// File ops facade — registers all file-related IPC handlers
const { ipcMain, dialog, shell } = 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 };
-3401
View File
File diff suppressed because it is too large Load Diff
-34
View File
@@ -1,34 +0,0 @@
// 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 };
-522
View File
@@ -1,522 +0,0 @@
// src/main/menu/items.js
// Individual menu items — pure functions that take (mainWindow) and return menu item arrays
const { app, dialog, 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('../main');
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('../main');
openFile();
}
},
{
label: 'Open PDF',
accelerator: 'CmdOrCtrl+Shift+O',
click: () => {
const { openPdfFile } = require('../main');
openPdfFile();
}
},
{
label: 'Save',
accelerator: 'CmdOrCtrl+S',
click: () => mainWindow.webContents.send('file-save')
},
{
label: 'Save As',
accelerator: 'CmdOrCtrl+Shift+S',
click: () => {
const { saveAsFile } = require('../main');
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('../main');
importDocument();
}
},
{
label: 'Export',
submenu: [
{
label: 'HTML', click: () => {
const { exportFile } = require('../main');
exportFile('html');
}
},
{
label: 'PDF', click: () => {
const { exportFile } = require('../main');
exportFile('pdf');
}
},
{
label: 'PDF (Enhanced)', click: () => {
const { exportPDFViaWordTemplate } = require('../main');
exportPDFViaWordTemplate();
}, accelerator: 'Ctrl+Shift+P'
},
{
label: 'DOCX', click: () => {
const { exportFile } = require('../main');
exportFile('docx');
}
},
{
label: 'DOCX (Enhanced)', click: () => {
const { exportWordWithTemplate } = require('../main');
exportWordWithTemplate();
}, accelerator: 'Ctrl+Shift+W'
},
{ label: 'LaTeX', click: () => { const { exportFile } = require('../main'); exportFile('latex'); } },
{ label: 'RTF', click: () => { const { exportFile } = require('../main'); exportFile('rtf'); } },
{ label: 'ODT', click: () => { const { exportFile } = require('../main'); exportFile('odt'); } },
{ label: 'EPUB', click: () => { const { exportFile } = require('../main'); exportFile('epub'); } },
{ type: 'separator' },
{ label: 'PowerPoint (PPTX)', click: () => { const { exportFile } = require('../main'); exportFile('pptx'); } },
{ label: 'OpenDocument Presentation (ODP)', click: () => { const { exportFile } = require('../main'); exportFile('odp'); } },
{ type: 'separator' },
{ label: 'CSV (Tables)', click: () => { const { exportSpreadsheet } = require('../main'); exportSpreadsheet('csv'); } },
{ type: 'separator' },
{ label: 'JSON (.json)', click: () => { const { exportFile } = require('../main'); exportFile('json'); } },
{ label: 'YAML (.yaml)', click: () => { const { exportFile } = require('../main'); exportFile('yaml'); } },
{ label: 'XML (.xml)', click: () => { const { exportFile } = require('../main'); exportFile('xml'); } },
{ type: 'separator' },
{ label: 'Confluence Wiki (.txt)', click: () => { const { exportFile } = require('../main'); exportFile('confluence'); } },
{ label: 'MOBI E-book (.mobi)', click: () => { const { exportFile } = require('../main'); exportFile('mobi'); } }
]
},
{ type: 'separator' },
{
label: 'Select Word Template...',
click: () => {
const { selectWordTemplate } = require('../main');
selectWordTemplate();
}
},
{
label: 'Template Settings...',
click: () => {
const { showTemplateSettings } = require('../main');
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')
},
// NOTE: Command Palette removed — handled by useCommandStore
{ type: 'separator' },
{
label: 'Sidebar',
submenu: [
{ label: 'File Explorer', click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'explorer') },
{ label: 'Git', click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'git') },
{ label: 'Snippets', click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'snippets') },
{ label: 'Templates', click: () => mainWindow.webContents.send('toggle-sidebar-panel', 'templates') }
]
},
{
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('../main'); setTheme('atomonelight'); } },
{ label: 'GitHub Light', click: () => { const { setTheme } = require('../main'); setTheme('github'); } },
{ label: 'Light', click: () => { const { setTheme } = require('../main'); setTheme('light'); } },
{ label: 'Solarized Light', click: () => { const { setTheme } = require('../main'); setTheme('solarized'); } },
{ label: 'Gruvbox Light', click: () => { const { setTheme } = require('../main'); setTheme('gruvbox-light'); } },
{ label: 'Ayu Light', click: () => { const { setTheme } = require('../main'); setTheme('ayu-light'); } },
{ label: 'Sepia', click: () => { const { setTheme } = require('../main'); setTheme('sepia'); } },
{ label: 'Paper', click: () => { const { setTheme } = require('../main'); setTheme('paper'); } },
{ label: 'Rose Pine Dawn', click: () => { const { setTheme } = require('../main'); setTheme('rosepine-dawn'); } },
{ label: 'Concrete Light', click: () => { const { setTheme } = require('../main'); setTheme('concrete-light'); } },
{ type: 'separator' },
{ label: 'Dark', click: () => { const { setTheme } = require('../main'); setTheme('dark'); } },
{ label: 'One Dark', click: () => { const { setTheme } = require('../main'); setTheme('onedark'); } },
{ label: 'Dracula', click: () => { const { setTheme } = require('../main'); setTheme('dracula'); } },
{ label: 'Nord', click: () => { const { setTheme } = require('../main'); setTheme('nord'); } },
{ label: 'Monokai', click: () => { const { setTheme } = require('../main'); setTheme('monokai'); } },
{ label: 'Material', click: () => { const { setTheme } = require('../main'); setTheme('material'); } },
{ label: 'Gruvbox Dark', click: () => { const { setTheme } = require('../main'); setTheme('gruvbox-dark'); } },
{ label: 'Tokyo Night', click: () => { const { setTheme } = require('../main'); setTheme('tokyonight'); } },
{ label: 'Palenight', click: () => { const { setTheme } = require('../main'); setTheme('palenight'); } },
{ label: 'Ayu Dark', click: () => { const { setTheme } = require('../main'); setTheme('ayu-dark'); } },
{ label: 'Ayu Mirage', click: () => { const { setTheme } = require('../main'); setTheme('ayu-mirage'); } },
{ label: 'Oceanic Next', click: () => { const { setTheme } = require('../main'); setTheme('oceanic-next'); } },
{ label: 'Cobalt2', click: () => { const { setTheme } = require('../main'); setTheme('cobalt2'); } },
{ label: 'Concrete Dark', click: () => { const { setTheme } = require('../main'); setTheme('concrete-dark'); } },
{ label: 'Concrete Warm', click: () => { const { setTheme } = require('../main'); 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('../main');
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('../main');
showUniversalConverterDialog();
}
}
];
}
function pdfEditorItems(mainWindow) {
return [
{
label: 'Open PDF File...',
accelerator: 'CmdOrCtrl+Shift+O',
click: () => {
const { openPdfFile } = require('../main');
openPdfFile();
}
},
{ type: 'separator' },
{
label: 'Merge PDFs...',
click: () => {
const { showPDFEditorDialog } = require('../main');
showPDFEditorDialog('merge');
}
},
{
label: 'Split PDF...',
click: () => {
const { showPDFEditorDialog } = require('../main');
showPDFEditorDialog('split');
}
},
{
label: 'Compress PDF...',
click: () => {
const { showPDFEditorDialog } = require('../main');
showPDFEditorDialog('compress');
}
},
{ type: 'separator' },
{
label: 'Rotate Pages...',
click: () => {
const { showPDFEditorDialog } = require('../main');
showPDFEditorDialog('rotate');
}
},
{
label: 'Delete Pages...',
click: () => {
const { showPDFEditorDialog } = require('../main');
showPDFEditorDialog('delete');
}
},
{
label: 'Reorder Pages...',
click: () => {
const { showPDFEditorDialog } = require('../main');
showPDFEditorDialog('reorder');
}
},
{ type: 'separator' },
{
label: 'Add Watermark...',
click: () => {
const { showPDFEditorDialog } = require('../main');
showPDFEditorDialog('watermark');
}
},
{ type: 'separator' },
{
label: 'Security',
submenu: [
{
label: 'Add Password Protection...',
click: () => {
const { showPDFEditorDialog } = require('../main');
showPDFEditorDialog('encrypt');
}
},
{
label: 'Remove Password...',
click: () => {
const { showPDFEditorDialog } = require('../main');
showPDFEditorDialog('decrypt');
}
},
{
label: 'Set Permissions...',
click: () => {
const { showPDFEditorDialog } = require('../main');
showPDFEditorDialog('permissions');
}
}
]
},
{ type: 'separator' },
{
label: 'About PDF Editor',
click: () => {
const { showAboutDialog } = require('../main');
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('../main');
showAboutDialog();
}
},
{ type: 'separator' },
{
label: 'Dependencies & Requirements',
click: () => {
const { showDependenciesDialog } = require('../main');
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
};
-31
View File
@@ -1,31 +0,0 @@
// 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;
-107
View File
@@ -1,107 +0,0 @@
// 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 (err) {
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 };
-80
View File
@@ -1,80 +0,0 @@
// src/main/window/index.js
// Main window creation
const { BrowserWindow } = require('electron');
const path = require('path');
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: false,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
spellcheck: true
},
icon: path.join(__dirname, '../../assets/icon.png')
});
win.loadFile(path.join(__dirname, '../../renderer/index.html'));
// Show window only after content is ready — avoids blank flash
win.once('ready-to-show', () => {
win.show();
});
menu.register(win);
win.on('closed', () => {
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
@@ -1,27 +0,0 @@
// 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 };
-743
View File
@@ -1,743 +0,0 @@
/**
* Word Template Exporter
* Loads word_template.docx, preserves first 2 pages (cover + TOC),
* and adds markdown content starting from page 3 using template styles
*/
const fs = require('fs');
const path = require('path');
const PizZip = require('pizzip');
const Docx = require('docx4js').default;
class WordTemplateExporter {
constructor(templatePath, startPage = 3, pageSettings = null) {
this.templatePath = templatePath || path.join(__dirname, '../word_template.docx');
this.startPage = startPage; // Which page to start inserting content
this.pageSettings = pageSettings; // Page size and orientation settings
}
/**
* Convert markdown to Word document using template
*/
async convert(markdownContent, outputPath) {
try {
// Load template
const templateBuffer = fs.readFileSync(this.templatePath);
const zip = new PizZip(templateBuffer);
// Extract document.xml
let documentXml = zip.file('word/document.xml').asText();
// Set page size if settings provided
if (this.pageSettings) {
documentXml = this.setPageSize(documentXml);
}
// Parse markdown and generate Word XML
const newContentXml = this.markdownToWordXml(markdownContent);
// Insert new content after the specified start page
const modifiedXml = this.insertContentAfterPage(documentXml, newContentXml, this.startPage);
// Update the zip with modified XML
zip.file('word/document.xml', modifiedXml);
// Generate and save the new document
const newDocBuffer = zip.generate({ type: 'nodebuffer' });
fs.writeFileSync(outputPath, newDocBuffer);
return outputPath;
} catch (error) {
console.error('Error in Word export:', error);
throw error;
}
}
/**
* Set page size in document XML
*/
setPageSize(documentXml) {
// Import PAGE_SIZES from main process (need to pass as parameter)
const PAGE_SIZES = {
a4: { width: 11906, height: 16838 },
a3: { width: 16838, height: 23811 },
a5: { width: 8391, height: 11906 },
b4: { width: 14170, height: 20015 },
b5: { width: 9979, height: 14170 },
letter: { width: 12240, height: 15840 },
legal: { width: 12240, height: 20160 },
tabloid: { width: 15840, height: 24480 }
};
let width, height;
const pageSize = PAGE_SIZES[this.pageSettings.size];
if (pageSize) {
width = pageSize.width;
height = pageSize.height;
} else {
// Default to A4
width = 11906;
height = 16838;
}
// Swap dimensions for landscape
if (this.pageSettings.orientation === 'landscape') {
[width, height] = [height, width];
}
// Update all <w:pgSz> elements in section properties
const pgSzRegex = /<w:pgSz[^>]*\/>/g;
let modifiedXml = documentXml.replace(pgSzRegex, () => {
return `<w:pgSz w:w="${width}" w:h="${height}" w:orient="${this.pageSettings.orientation}"/>`;
});
// If no pgSz found, add it to all sectPr elements
if (!pgSzRegex.test(documentXml)) {
const sectPrRegex = /<w:sectPr[^>]*>/g;
modifiedXml = modifiedXml.replace(sectPrRegex, (match) => {
return `${match}<w:pgSz w:w="${width}" w:h="${height}" w:orient="${this.pageSettings.orientation}"/>`;
});
}
return modifiedXml;
}
/**
* Insert markdown content after the specified page in the document
* @param {string} documentXml - The document XML
* @param {string} newContentXml - The new content to insert
* @param {number} afterPage - Insert content after this page number (1-based)
*/
insertContentAfterPage(documentXml, newContentXml, afterPage) {
// Find section breaks that mark page boundaries
// Look for the section properties tag that marks page breaks
const sectionBreakRegex = /<w:sectPr[^>]*>[\s\S]*?<\/w:sectPr>/g;
const matches = [...documentXml.matchAll(sectionBreakRegex)];
// Calculate which section break to insert after
// Page 1 = before 1st section break
// Page 2 = after 1st section break
// Page 3 = after 2nd section break, etc.
const sectionIndex = afterPage - 1;
if (matches.length >= sectionIndex && sectionIndex > 0) {
// Insert after the specified section break
const insertPoint = matches[sectionIndex - 1].index + matches[sectionIndex - 1][0].length;
return documentXml.slice(0, insertPoint) + newContentXml + documentXml.slice(insertPoint);
} else if (afterPage === 1 || matches.length === 0) {
// Insert at the beginning (after <w:body>) or if no section breaks found
const bodyStart = documentXml.indexOf('<w:body>') + 8;
return documentXml.slice(0, bodyStart) + newContentXml + documentXml.slice(bodyStart);
} else {
// If not enough section breaks, insert before closing body tag
return documentXml.replace('</w:body>', newContentXml + '</w:body>');
}
}
/**
* Convert markdown to Word XML format
*/
markdownToWordXml(markdown) {
const lines = markdown.split('\n');
let xml = '';
let inCodeBlock = false;
let codeLines = [];
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
// Handle code blocks
if (line.trim().startsWith('```')) {
if (inCodeBlock) {
// End code block
xml += this.createCodeBlockXml(codeLines.join('\n'));
codeLines = [];
inCodeBlock = false;
} else {
inCodeBlock = true;
}
continue;
}
if (inCodeBlock) {
codeLines.push(line);
continue;
}
// Empty lines
if (!line.trim()) {
xml += '<w:p><w:pPr></w:pPr></w:p>';
continue;
}
// Tables - detect table lines
if (line.includes('|') && line.trim().startsWith('|')) {
const tableLines = [line];
i++;
// Collect all consecutive table lines
while (i < lines.length && lines[i].includes('|')) {
tableLines.push(lines[i]);
i++;
}
i--; // Back up one line
xml += this.createTableXml(tableLines);
continue;
}
// ASCII flowcharts/diagrams - detect box drawing characters
if (this.isAsciiArt(line)) {
const asciiLines = [line];
i++;
// Collect all consecutive ASCII art lines
while (i < lines.length && (this.isAsciiArt(lines[i]) || !lines[i].trim())) {
asciiLines.push(lines[i]);
i++;
if (i < lines.length && lines[i].trim() && !this.isAsciiArt(lines[i])) {
break;
}
}
i--; // Back up one line
xml += this.createAsciiArtXml(asciiLines.join('\n'));
continue;
}
// Headings - strip markdown numbering
if (line.trim().startsWith('#')) {
const level = (line.match(/^#+/) || [''])[0].length;
let text = line.replace(/^#+\s*/, '').trim();
// Remove markdown numbering like "1.1 Title" -> "Title"
text = text.replace(/^\d+(\.\d+)*\.?\s+/, '');
xml += this.createHeadingXml(text, level);
continue;
}
// Blockquotes
if (line.trim().startsWith('>')) {
const text = line.replace(/^>\s*/, '').trim();
xml += this.createQuoteXml(text);
continue;
}
// Ordered lists - strip markdown numbering, use template numbering
if (/^\s*\d+\.\s+/.test(line)) {
const text = line.replace(/^\s*\d+\.\s+/, '');
xml += this.createListItemXml(text, true);
continue;
}
// Unordered lists
if (/^\s*[-*+]\s+/.test(line)) {
const text = line.replace(/^\s*[-*+]\s+/, '');
xml += this.createListItemXml(text, false);
continue;
}
// Horizontal rule
if (/^[-*_]{3,}$/.test(line.trim())) {
xml += this.createHorizontalRuleXml();
continue;
}
// Normal paragraph
xml += this.createParagraphXml(line);
}
return xml;
}
/**
* Create heading XML using template styles
*/
createHeadingXml(text, level) {
const styleName = `Heading${level}`;
const runs = this.parseInlineFormatting(text);
return `<w:p>
<w:pPr>
<w:pStyle w:val="${styleName}"/>
</w:pPr>
${runs}
</w:p>`;
}
/**
* Create paragraph XML with Normal style
*/
createParagraphXml(text) {
const runs = this.parseInlineFormatting(text);
return `<w:p>
<w:pPr>
<w:pStyle w:val="Normal"/>
</w:pPr>
${runs}
</w:p>`;
}
/**
* Create quote XML
*/
createQuoteXml(text) {
const runs = this.parseInlineFormatting(text);
return `<w:p>
<w:pPr>
<w:pStyle w:val="Quote"/>
</w:pPr>
${runs}
</w:p>`;
}
/**
* Create list item XML using template numbering
*/
createListItemXml(text, numbered) {
const runs = this.parseInlineFormatting(text);
const numId = numbered ? '1' : '2'; // Template numbering IDs
return `<w:p>
<w:pPr>
<w:pStyle w:val="${numbered ? 'ListNumber' : 'ListBullet'}"/>
<w:numPr>
<w:ilvl w:val="0"/>
<w:numId w:val="${numId}"/>
</w:numPr>
</w:pPr>
${runs}
</w:p>`;
}
/**
* Create code block XML - renders each line as separate paragraph
* to preserve exact formatting like in preview (monospace, no wrapping)
* Background shading applied at paragraph level to extend full width
*/
createCodeBlockXml(code) {
const lines = code.split('\n');
let xml = '';
lines.forEach((line, index) => {
const escapedLine = this.escapeXml(line);
// Each line gets its own paragraph with exact spacing and no wrapping
// Shading (shd) is at paragraph level so background extends full width
xml += `<w:p>
<w:pPr>
<w:pStyle w:val="Normal"/>
<w:shd w:val="clear" w:color="auto" w:fill="F5F5F5"/>
<w:spacing w:before="${index === 0 ? '120' : '0'}" w:after="${index === lines.length - 1 ? '120' : '0'}" w:line="240" w:lineRule="exact"/>
<w:ind w:left="284" w:right="284"/>
<w:jc w:val="left"/>
<w:keepLines/>
<w:wordWrap w:val="0"/>
</w:pPr>
<w:r>
<w:rPr>
<w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
<w:sz w:val="18"/>
<w:szCs w:val="18"/>
<w:noProof/>
</w:rPr>
<w:t xml:space="preserve">${escapedLine}</w:t>
</w:r>
</w:p>`;
});
return xml;
}
/**
* Create horizontal rule XML
*/
createHorizontalRuleXml() {
return `<w:p>
<w:pPr>
<w:pBdr>
<w:bottom w:val="single" w:sz="6" w:space="1" w:color="auto"/>
</w:pBdr>
</w:pPr>
</w:p>`;
}
/**
* Create table XML from markdown table lines with template styling
* Uses full-width tables with equal column distribution matching template style
*/
createTableXml(tableLines) {
// Parse table
const rows = [];
for (const line of tableLines) {
// Skip separator lines (e.g., |---|---|)
if (/^\s*\|[\s\-:]+\|\s*$/.test(line)) {
continue;
}
// Split by | and trim
const cells = line.split('|').filter(cell => cell.trim()).map(cell => cell.trim());
if (cells.length > 0) {
rows.push(cells);
}
}
if (rows.length === 0) return '';
// Calculate number of columns
const numCols = Math.max(...rows.map(row => row.length));
// Calculate column width in twips (1440 twips = 1 inch)
// Assume standard page width of 9360 twips (6.5 inches usable)
const totalTableWidth = 9360;
const colWidth = Math.floor(totalTableWidth / numCols);
// Build table XML
let tableXml = '<w:tbl>';
// Table properties - use template table style with full width
tableXml += `<w:tblPr>
<w:tblStyle w:val="TableGrid"/>
<w:tblW w:w="0" w:type="auto"/>
<w:tblLayout w:type="fixed"/>
<w:tblLook w:val="04A0" w:firstRow="1" w:lastRow="0" w:firstColumn="0" w:lastColumn="0" w:noHBand="0" w:noVBand="1"/>
<w:tblBorders>
<w:top w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
<w:left w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
<w:bottom w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
<w:right w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
<w:insideH w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
<w:insideV w:val="single" w:sz="8" w:space="0" w:color="F58220"/>
</w:tblBorders>
</w:tblPr>`;
// Table grid with explicit column widths
tableXml += '<w:tblGrid>';
for (let i = 0; i < numCols; i++) {
tableXml += `<w:gridCol w:w="${colWidth}"/>`;
}
tableXml += '</w:tblGrid>';
// Table rows
rows.forEach((rowCells, rowIndex) => {
const isHeader = rowIndex === 0;
tableXml += '<w:tr>';
// Row properties for consistent height
tableXml += '<w:trPr><w:trHeight w:val="0" w:hRule="atLeast"/></w:trPr>';
// Pad row to have same number of columns
while (rowCells.length < numCols) {
rowCells.push('');
}
rowCells.forEach((cellText, colIndex) => {
tableXml += '<w:tc>';
tableXml += '<w:tcPr>';
// Cell width
tableXml += `<w:tcW w:w="${colWidth}" w:type="dxa"/>`;
// Cell shading - orange for header, white for data rows
if (isHeader) {
tableXml += '<w:shd w:val="clear" w:color="auto" w:fill="F58220"/>';
} else {
tableXml += '<w:shd w:val="clear" w:color="auto" w:fill="FFFFFF"/>';
}
// Cell borders
tableXml += '<w:tcBorders>' +
'<w:top w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
'<w:left w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
'<w:bottom w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
'<w:right w:val="single" w:sz="8" w:space="0" w:color="F58220"/>' +
'</w:tcBorders>';
// Cell margins for proper padding
tableXml += '<w:tcMar>' +
'<w:top w:w="80" w:type="dxa"/>' +
'<w:left w:w="120" w:type="dxa"/>' +
'<w:bottom w:w="80" w:type="dxa"/>' +
'<w:right w:w="120" w:type="dxa"/>' +
'</w:tcMar>';
tableXml += '</w:tcPr>';
// Cell content
tableXml += '<w:p>';
tableXml += '<w:pPr>';
tableXml += '<w:spacing w:before="0" w:after="0" w:line="240" w:lineRule="auto"/>';
tableXml += '</w:pPr>';
const runs = this.parseInlineFormatting(cellText);
if (isHeader) {
// Header: bold white text
tableXml += runs.replace(/<w:rPr>/g, '<w:rPr><w:b/><w:color w:val="FFFFFF"/>');
} else {
// Data rows: normal black text
tableXml += runs;
}
tableXml += '</w:p>';
tableXml += '</w:tc>';
});
tableXml += '</w:tr>';
});
tableXml += '</w:tbl>';
// Add spacing after table
tableXml += '<w:p><w:pPr><w:spacing w:before="120" w:after="0"/></w:pPr></w:p>';
return tableXml;
}
/**
* Detect if line contains ASCII art/flowchart characters
*/
isAsciiArt(line) {
// Don't treat markdown tables as ASCII art
if (line.trim().startsWith('|') && line.trim().endsWith('|')) {
// Check if it's a proper markdown table (has multiple cells)
const cells = line.split('|').filter(c => c.trim());
if (cells.length >= 2) {
return false;
}
}
// Common ASCII art characters (Unicode box drawing and symbols)
const asciiArtChars = [
'─', '│', '┌', '┐', '└', '┘', '├', '┤', '┬', '┴', '┼', // Box drawing
'═', '║', '╔', '╗', '╚', '╝', '╠', '╣', '╦', '╩', '╬', // Double box
'╭', '╮', '╯', '╰', // Rounded corners
'▲', '▼', '◄', '►', '♦', '●', '○', '■', '□', '◆', '◇', // Shapes
'↓', '→', '←', '↑', '↔', '↕', '⇒', '⇐', '⇓', '⇑', // Arrows
'┃', '━', '┏', '┓', '┗', '┛', '┣', '┫', '┳', '┻', '╋', // Heavy box
'░', '▒', '▓', '█', // Shading
];
// Check for box drawing characters
if (asciiArtChars.some(char => line.includes(char))) {
return true;
}
// Check for ASCII box patterns with regular characters
const asciiPatterns = [
/^\s*\+[-=_+]+\+/, // +-----+ or +=====+
/^\s*\|[-=_]{3,}\|/, // |-----|
/^\s*[-=_]{5,}$/, // -----
/^\s*\+[-]+\+[-]+\+/, // +---+---+
/^\s*\([A-Z][a-z]+\)\s*\|\|/, // (Deformable) ||
/^\s*\|\s+[A-Z\s]+[-:]\s+[A-Z]/, // | TILE ADHESIVE - TYPE
/^\s*\|\s*\[[^\]]+\]/, // | [BIS Mark / CE Mark]
/^\s*\|\s{2,}\w+.*\|\|/, // || text ||
/^\s*\[[^\]]+\]\s*$/, // [Step in brackets]
/^\s*<[-=]+>/, // <----> or <====>
/^\s*\/[-_\\\/]+\//, // /----/
/^\s*\*[-=\*]+\*/, // *----*
];
return asciiPatterns.some(pattern => pattern.test(line));
}
/**
* Create ASCII art XML with monospace font
* Background shading applied at paragraph level to extend full width
*/
createAsciiArtXml(asciiContent) {
// Split ASCII art into individual lines and create a paragraph for each
const lines = asciiContent.split('\n');
let xml = '';
lines.forEach((line, index) => {
// Shading (shd) is at paragraph level so background extends full width
xml += `<w:p>
<w:pPr>
<w:pStyle w:val="Normal"/>
<w:shd w:val="clear" w:color="auto" w:fill="F5F5F5"/>
<w:spacing w:before="${index === 0 ? '120' : '0'}" w:after="${index === lines.length - 1 ? '120' : '0'}" w:line="240" w:lineRule="exact"/>
<w:ind w:left="284" w:right="284"/>
<w:jc w:val="left"/>
<w:keepLines/>
<w:wordWrap w:val="0"/>
</w:pPr>`;
// Check if line contains arrow characters and color them red
const arrowChars = ['↓', '→', '←', '↑', '▼', '►', '◄', '▲'];
const hasArrow = arrowChars.some(arrow => line.includes(arrow));
if (hasArrow) {
// Split line into parts and color arrows red
let remainingLine = line;
while (remainingLine.length > 0) {
let foundArrow = false;
let arrowIndex = -1;
let foundArrowChar = '';
// Find the first arrow in the remaining text
for (const arrow of arrowChars) {
const idx = remainingLine.indexOf(arrow);
if (idx !== -1 && (arrowIndex === -1 || idx < arrowIndex)) {
arrowIndex = idx;
foundArrowChar = arrow;
foundArrow = true;
}
}
if (foundArrow) {
// Add text before arrow (if any)
if (arrowIndex > 0) {
const beforeArrow = this.escapeXml(remainingLine.substring(0, arrowIndex));
xml += `<w:r>
<w:rPr>
<w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
<w:sz w:val="16"/>
<w:szCs w:val="16"/>
<w:noProof/>
</w:rPr>
<w:t xml:space="preserve">${beforeArrow}</w:t>
</w:r>`;
}
// Add arrow in red
const escapedArrow = this.escapeXml(foundArrowChar);
xml += `<w:r>
<w:rPr>
<w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
<w:sz w:val="16"/>
<w:szCs w:val="16"/>
<w:color w:val="FF0000"/>
<w:noProof/>
</w:rPr>
<w:t xml:space="preserve">${escapedArrow}</w:t>
</w:r>`;
// Continue with remaining text
remainingLine = remainingLine.substring(arrowIndex + foundArrowChar.length);
} else {
// No more arrows, add remaining text
const escapedRemaining = this.escapeXml(remainingLine);
xml += `<w:r>
<w:rPr>
<w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
<w:sz w:val="16"/>
<w:szCs w:val="16"/>
<w:noProof/>
</w:rPr>
<w:t xml:space="preserve">${escapedRemaining}</w:t>
</w:r>`;
remainingLine = '';
}
}
} else {
// No arrows, just add the line normally
const escapedLine = this.escapeXml(line);
xml += `<w:r>
<w:rPr>
<w:rFonts w:ascii="Consolas" w:hAnsi="Consolas" w:cs="Consolas"/>
<w:sz w:val="16"/>
<w:szCs w:val="16"/>
<w:noProof/>
</w:rPr>
<w:t xml:space="preserve">${escapedLine}</w:t>
</w:r>`;
}
xml += `</w:p>`;
});
return xml;
}
/**
* Parse inline formatting (bold, italic, code)
*/
parseInlineFormatting(text) {
let xml = '';
const pos = 0;
// Patterns for inline formatting
const patterns = [
{ regex: /\*\*\*(.+?)\*\*\*/g, bold: true, italic: true },
{ regex: /\*\*(.+?)\*\*/g, bold: true },
{ regex: /\*(.+?)\*/g, italic: true },
{ regex: /`(.+?)`/g, code: true }
];
// Simple approach: process text sequentially
let remaining = text;
while (remaining.length > 0) {
let foundMatch = false;
let earliestPos = remaining.length;
let matchedPattern = null;
let match = null;
// Find earliest match
for (const pattern of patterns) {
pattern.regex.lastIndex = 0;
const m = pattern.regex.exec(remaining);
if (m && m.index < earliestPos) {
earliestPos = m.index;
matchedPattern = pattern;
match = m;
foundMatch = true;
}
}
if (foundMatch) {
// Add text before match
if (earliestPos > 0) {
xml += this.createRunXml(remaining.substring(0, earliestPos));
}
// Add formatted text
xml += this.createRunXml(match[1], matchedPattern.bold, matchedPattern.italic, matchedPattern.code);
remaining = remaining.substring(earliestPos + match[0].length);
} else {
// No more matches, add remaining text
xml += this.createRunXml(remaining);
break;
}
}
return xml;
}
/**
* Create a run (text segment) XML
*/
createRunXml(text, bold = false, italic = false, code = false) {
if (!text) return '';
const escapedText = this.escapeXml(text);
let propsXml = '<w:rPr>';
if (bold) propsXml += '<w:b/>';
if (italic) propsXml += '<w:i/>';
if (code) {
propsXml += '<w:rFonts w:ascii="Consolas" w:hAnsi="Consolas"/>';
propsXml += '<w:sz w:val="20"/>';
}
propsXml += '</w:rPr>';
return `<w:r>${propsXml}<w:t xml:space="preserve">${escapedText}</w:t></w:r>`;
}
/**
* Escape XML special characters
*/
escapeXml(text) {
return text
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&apos;');
}
}
module.exports = WordTemplateExporter;
-12
View File
@@ -1,12 +0,0 @@
const { PluginAPI } = require('../../plugin-api');
class SamplePlugin extends PluginAPI {
init(context) {
this.context = context;
context.commands.register('hello', 'Sample: Hello World', () => {
console.log('[SamplePlugin] Hello from the plugin system!');
});
}
}
module.exports = { Plugin: SamplePlugin };
@@ -1,13 +0,0 @@
{
"id": "_sample",
"name": "Sample Plugin",
"version": "1.0.0",
"description": "Demonstrates the plugin system. Safe to delete.",
"icon": "puzzle",
"extensionPoints": {
"commands": [
{ "id": "hello", "label": "Sample: Hello World", "shortcut": "" }
]
},
"settings": []
}

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