Compare commits

...
Author SHA1 Message Date
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 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 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 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 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
7 changed files with 1443 additions and 368 deletions
+263 -149
View File
@@ -1,189 +1,303 @@
# Pan Converter
# PanConverter - Claude Development Guide
## Overview
Pan Converter is a cross-platform desktop application for editing and converting Markdown files using Pandoc. It features a rich markdown editor with live preview, multiple themes, and support for exporting to various formats.
## Project Overview
## Features
- **Markdown Editor**: Full-featured editor with syntax highlighting
- **Live Preview**: Real-time preview of your markdown content
- **Multiple Themes**: Light, Dark, Solarized, Monokai, and GitHub themes
- **Format Conversion**: Export to HTML, PDF, DOCX, LaTeX, RTF, ODT, and EPUB using Pandoc
- **Cross-Platform**: Runs on Windows, macOS, and Linux
- **Auto-Save**: Automatic saving every 30 seconds
**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.
## Requirements
- **Pandoc**: Must be installed on the system for export functionality
- Ubuntu/Debian: `sudo apt-get install pandoc`
- macOS: `brew install pandoc`
- Windows: Download from https://pandoc.org/installing.html
**Current Version**: v1.2.1
**Author**: Amit Haridas (amit.wh@gmail.com)
**License**: MIT
**Repository**: https://github.com/amitwh/pan-converter
## Development Setup
## Architecture & Technology Stack
### Core Technologies
- **Electron** - Cross-platform desktop application framework
- **Pandoc** - Universal document converter (required dependency)
- **marked** - Markdown parsing and rendering
- **highlight.js** - Syntax highlighting
- **XLSX** - Spreadsheet export functionality
- **DOMPurify** - HTML sanitization
### Application Structure
```
src/
├── main.js # Electron main process, menu system, IPC handlers
├── renderer.js # UI logic, editor functionality, event handling
├── index.html # Application layout and components
└── styles.css # Comprehensive styling with multi-theme support
assets/
└── icon.png # Application icon
package.json # Dependencies and build configuration
```
## Development Commands
### Prerequisites
- Node.js (v14 or higher)
- npm or yarn
- Pandoc (for export features)
### Installation
```bash
# Clone the repository
git clone <repository-url>
cd pan-converter
# Install dependencies
# Install Node.js dependencies
npm install
# Generate icons
# 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
# Start the application
npm start
```
## Building
### Build for Current Platform
```bash
# Build for current platform
npm run build
```
### Build for Specific Platforms
```bash
# Windows
npm run build:win
# Platform-specific builds
npm run build:win # Windows
npm run build:mac # macOS
npm run build:linux # Linux (AppImage, .deb, .snap)
# macOS
npm run build:mac
# Linux (generates .deb, .AppImage, and .snap)
npm run build:linux
```
### Build for All Platforms
```bash
# Build for all platforms
npm run dist:all
```
## Project Structure
```
pan-converter/
├── src/
│ ├── main.js # Main process
│ ├── renderer.js # Renderer process
│ ├── index.html # Main window HTML
│ └── styles.css # Application styles
├── assets/
│ ├── icon.svg # Source icon
│ └── icon.png # Generated icons
├── scripts/
│ └── generate-icons.js # Icon generation script
├── package.json # Project configuration
└── CLAUDE.md # This file
### 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
```
## Architecture
### 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.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`)
- Manages application lifecycle
- Creates and manages windows
- Handles file operations
- Manages menu bar
- Communicates with renderer via IPC
- **Menu System**: Comprehensive menu with file operations, editing, conversion, view options
- **IPC Handlers**: Communication between main and renderer processes
- **File Operations**: Open, save, import/export functionality
- **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`)
- Handles UI interactions
- Manages editor state
- Renders markdown preview
- Handles theme switching
- Communicates with main process via IPC
- **Editor Initialization**: CodeMirror-like functionality with custom implementation
- **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
- **Event Handling**: Keyboard shortcuts and UI interactions
- **Statistics Tracking**: Word/character counting
### Key Libraries
- **Electron**: Desktop application framework
- **marked**: Markdown parsing
- **highlight.js**: Syntax highlighting
- **DOMPurify**: HTML sanitization
- **electron-store**: Persistent storage
- **electron-builder**: Application packaging
### 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
## Features Implementation
### HTML Structure (`src/index.html`)
- **Toolbar**: Feature buttons with SVG icons
- **Find Dialog**: Search and replace interface
- **Editor Container**: Line numbers and text editor
- **Preview Pane**: Rendered markdown display
- **Status Bar**: Statistics and application status
### Markdown Editor
- Uses native textarea with custom styling
- Supports common markdown shortcuts via toolbar
- Tab key inserts 4 spaces for code indentation
- Auto-save every 30 seconds when content changes
## Testing & Quality Assurance
### Live Preview
- Updates in real-time as you type
- Sanitized HTML output for security
- Syntax highlighting for code blocks
- GitHub-flavored markdown support
### 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
- [ ] All themes render correctly for new components
- [ ] Export functions work with various document formats
- [ ] Table creation and export functionality
- [ ] Cross-platform compatibility
### Theme System
- Themes stored in user preferences
- Applied via CSS classes on body element
- Persists across application restarts
- Five built-in themes
### 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
### Export System
- Uses Pandoc command-line tool
- Supports multiple output formats
- Maintains original file structure
- Shows error messages if Pandoc not installed
## Deployment & Distribution
## Platform-Specific Branches
### 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
The repository maintains separate branches for platform-specific customizations:
- `master`: Main development branch
- `linux`: Linux-specific configurations
- `macos`: macOS-specific configurations
- `windows`: Windows-specific configurations
### 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
## Debian Package
## Contributing Guidelines
The application can be built as a `.deb` package for Debian-based systems:
```bash
npm run build:linux
```
### 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
The generated `.deb` file will:
- Install to `/opt/pan-converter`
- Create desktop entry for application menu
- Set up proper file associations
- Declare Pandoc as dependency
### 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
## Testing
### Bug Reporting
- Include steps to reproduce
- Specify platform and version information
- Attach relevant screenshots or error logs
- Check existing issues before creating new ones
### Manual Testing
1. File Operations: New, Open, Save, Save As
2. Editor Features: Bold, Italic, Headings, Links, Code, Lists, Quotes
3. Preview Toggle: Show/hide preview pane
4. Theme Switching: Test all five themes
5. Export Functions: Test each export format
6. Auto-save: Verify 30-second auto-save works
## Future Roadmap
### Platform Testing
Test on:
- Windows 10/11
- macOS 11+ (Big Sur and later)
- Ubuntu 20.04+, Debian 11+
### 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
## Known Issues
- ICO and ICNS icons need manual conversion from PNG
- Pandoc must be installed separately
- Large files may cause performance issues
### 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
## Future Enhancements
- [ ] Add spell checking
- [ ] Implement find and replace
- [ ] Add custom CSS for preview
- [ ] Support for markdown extensions
- [ ] Plugin system for custom exporters
- [ ] Cloud sync capabilities
- [ ] Collaborative editing
---
## License
MIT License
## Support
For issues or feature requests, please open an issue on the GitHub repository.
**Last Updated**: September 1, 2025
**Claude Assistant**: Development completed for v1.2.1 comprehensive editor enhancements
+105 -14
View File
@@ -6,24 +6,57 @@ A cross-platform Markdown editor and converter powered by Pandoc.
## Features
- 📝 **Rich Markdown Editor** - Full-featured editor with syntax highlighting
- 👁 **Live Preview** - See your markdown rendered in real-time
### ✨ 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
### 🎨 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
- 📤 **Export to Multiple Formats** - Convert to HTML, PDF, DOCX, LaTeX, RTF, ODT, and EPUB
- 💾 **Auto-Save** - Never lose your work with automatic saving
- 🖥️ **Cross-Platform** - Works on Windows, macOS, and Linux
- 💾 **Auto-Save** - Never lose your work with automatic saving every 30 seconds
### 📤 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 Excel (XLSX/XLS) and OpenDocument Spreadsheet (ODS) formats
- 📥 **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
### 🖥️ Platform Support
- **Cross-Platform** - Works seamlessly on Windows, macOS, and Linux
## Installation
### Prerequisites
- [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
### 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/yourusername/pan-converter/releases) page.
Download the latest release for your platform from the [Releases](https://github.com/amitwh/pan-converter/releases) page.
#### Linux
- **AppImage**: `PanConverter-1.3.0.AppImage` (universal, may require `--no-sandbox` flag)
- **Debian Package**: `pan-converter_1.3.0_amd64.deb`
- **Snap Package**: `pan-converter_1.3.0_amd64.snap`
### Install from Source
```bash
git clone https://github.com/yourusername/pan-converter.git
git clone https://github.com/amitwh/pan-converter.git
cd pan-converter
npm install
npm start
@@ -31,45 +64,103 @@ npm start
## Usage
### 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 via File > Export
4. **Export** - Export your document to various formats
### Export Options
- **Documents**: HTML, PDF, DOCX, LaTeX, RTF, ODT, EPUB
- **Presentations**: PowerPoint (PPTX), OpenDocument Presentation (ODP)
- **Spreadsheets**: Excel (XLSX/XLS), OpenDocument Spreadsheet (ODS)
### 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
- `Ctrl/Cmd + N` - New file
### 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
### 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
### View & Navigation
- `Ctrl/Cmd + P` - Toggle preview
- `Ctrl/Cmd + Enter` - Toggle preview (alternative)
- `Escape` - Close find dialog
## Building
```bash
# Install dependencies
npm install
# Generate icons
npm run generate-icons
# Build for current platform
npm run build
# Build for specific platform
npm run build:win
npm run build:mac
npm run build:linux
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.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.
Contributions are welcome! Please feel free to submit a Pull Request to the [GitHub repository](https://github.com/amitwh/pan-converter).
## License
MIT License - see LICENSE file for details
MIT License - see LICENSE file for details.
## Author
**Amit Haridas** - [amit.wh@gmail.com](mailto:amit.wh@gmail.com)
## Acknowledgments
- 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)
+11 -5
View File
@@ -1,6 +1,6 @@
{
"name": "pan-converter",
"version": "1.0.0",
"version": "1.3.0",
"description": "Cross-platform Markdown editor and converter using Pandoc",
"main": "src/main.js",
"scripts": {
@@ -14,8 +14,13 @@
"dist:all": "electron-builder -mwl",
"generate-icons": "node scripts/generate-icons.js"
},
"keywords": ["markdown", "pandoc", "converter", "editor"],
"author": "Your Name",
"keywords": [
"markdown",
"pandoc",
"converter",
"editor"
],
"author": "Amit Haridas <amit.wh@gmail.com>",
"license": "MIT",
"devDependencies": {
"electron": "^37.4.0",
@@ -27,7 +32,8 @@
"dompurify": "^3.2.6",
"electron-store": "^10.1.0",
"highlight.js": "^11.11.1",
"marked": "^16.2.1"
"marked": "^16.2.1",
"xlsx": "^0.18.5"
},
"build": {
"appId": "com.panconverter.app",
@@ -63,7 +69,7 @@
"pandoc"
],
"description": "Markdown editor and converter using Pandoc",
"maintainer": "Your Name <your.email@example.com>"
"maintainer": "Amit Haridas <amit.wh@gmail.com>"
}
}
}
+55 -4
View File
@@ -10,6 +10,13 @@
</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">
@@ -59,6 +66,29 @@
<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>
<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">
@@ -68,12 +98,33 @@
</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>
<div class="editor-container">
<div id="editor-pane" class="pane">
<textarea id="editor"></textarea>
<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 id="preview-pane" class="pane">
<div id="preview"></div>
</div>
</div>
+242 -8
View File
@@ -2,6 +2,7 @@ const { app, BrowserWindow, Menu, dialog, ipcMain, shell } = require('electron')
const path = require('path');
const fs = require('fs');
const { exec } = require('child_process');
const XLSX = require('xlsx');
// Simple storage implementation to replace electron-store
const settingsPath = path.join(app.getPath('userData'), 'settings.json');
@@ -27,7 +28,7 @@ const store = {
};
let mainWindow;
let currentFile = null;
let currentFile = null; // This will now represent the active tab's file
function createWindow() {
mainWindow = new BrowserWindow({
@@ -47,6 +48,14 @@ function createWindow() {
mainWindow.on('closed', () => {
mainWindow = null;
});
// Handle pending file from file association
if (app.pendingFile) {
mainWindow.webContents.once('dom-ready', () => {
openFileFromPath(app.pendingFile);
app.pendingFile = null;
});
}
}
function createMenu() {
@@ -75,6 +84,11 @@ function createMenu() {
click: saveAsFile
},
{ type: 'separator' },
{
label: 'Import Document...',
accelerator: 'CmdOrCtrl+I',
click: importDocument
},
{
label: 'Export',
submenu: [
@@ -84,7 +98,14 @@ function createMenu() {
{ label: 'LaTeX', click: () => exportFile('latex') },
{ label: 'RTF', click: () => exportFile('rtf') },
{ label: 'ODT', click: () => exportFile('odt') },
{ label: 'EPUB', click: () => exportFile('epub') }
{ label: 'EPUB', click: () => exportFile('epub') },
{ type: 'separator' },
{ label: 'PowerPoint (PPTX)', click: () => exportFile('pptx') },
{ label: 'OpenDocument Presentation (ODP)', click: () => exportFile('odp') },
{ type: 'separator' },
{ label: 'Excel (XLSX)', click: () => exportSpreadsheet('xlsx') },
{ label: 'Excel Legacy (XLS)', click: () => exportSpreadsheet('xls') },
{ label: 'OpenDocument Spreadsheet (ODS)', click: () => exportSpreadsheet('ods') }
]
},
{ type: 'separator' },
@@ -99,12 +120,18 @@ function createMenu() {
label: 'Edit',
submenu: [
{ label: 'Undo', accelerator: 'CmdOrCtrl+Z', role: 'undo' },
{ label: 'Redo', accelerator: 'CmdOrCtrl+Y', role: 'redo' },
{ label: 'Redo', accelerator: 'CmdOrCtrl+Shift+Z', role: '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' }
{ label: 'Select All', accelerator: 'CmdOrCtrl+A', role: 'selectAll' },
{ type: 'separator' },
{
label: 'Find & Replace',
accelerator: 'CmdOrCtrl+F',
click: () => mainWindow.webContents.send('toggle-find')
}
]
},
{
@@ -144,14 +171,14 @@ function createMenu() {
type: 'info',
title: 'About PanConverter',
message: 'PanConverter',
detail: 'A cross-platform Markdown editor and converter using Pandoc.\n\nVersion: 1.0.0\nLicense: MIT',
detail: 'A cross-platform Markdown editor and converter using Pandoc.\n\nVersion: 1.3.0\nAuthor: Amit Haridas\nEmail: amit.wh@gmail.com\nLicense: MIT\n\nFeatures:\n• Tabbed interface for multiple files\n• Advanced markdown editing with live preview\n• Enhanced PDF export with LaTeX engines\n• Find & replace with match highlighting\n• Line numbers and auto-indentation\n• Export to multiple formats via Pandoc\n• PowerPoint & presentation export\n• Export tables to Excel/ODS spreadsheets\n• Document import & conversion\n• Table creation helper\n• Multiple themes support\n• Undo/redo functionality',
buttons: ['OK']
});
}
},
{
label: 'Documentation',
click: () => shell.openExternal('https://github.com/yourusername/pan-converter')
click: () => shell.openExternal('https://github.com/amitwh/pan-converter')
}
]
}
@@ -206,12 +233,54 @@ function exportFile(format) {
});
if (outputFile) {
const pandocCmd = `pandoc "${currentFile}" -o "${outputFile}"`;
let pandocCmd = `pandoc "${currentFile}" -o "${outputFile}"`;
// Add specific options for PDF export to ensure proper generation
if (format === 'pdf') {
pandocCmd = `pandoc "${currentFile}" --pdf-engine=xelatex -V geometry:margin=1in -o "${outputFile}"`;
// Try with different PDF engines if xelatex fails
exec(pandocCmd, (error, stdout, stderr) => {
if (error) {
// Fallback to pdflatex
const fallbackCmd = `pandoc "${currentFile}" --pdf-engine=pdflatex -V geometry:margin=1in -o "${outputFile}"`;
exec(fallbackCmd, (fallbackError, fallbackStdout, fallbackStderr) => {
if (fallbackError) {
// Final fallback to wkhtmltopdf
const htmlToPdfCmd = `pandoc "${currentFile}" -t html5 | wkhtmltopdf - "${outputFile}"`;
exec(htmlToPdfCmd, (finalError) => {
if (finalError) {
dialog.showErrorBox('PDF Export Error',
`Failed to export PDF. Please ensure you have one of the following installed:\n` +
`• XeLaTeX (recommended): sudo apt-get install texlive-xetex\n` +
`• PDFLaTeX: sudo apt-get install texlive-latex-base\n` +
`• wkhtmltopdf: sudo apt-get install wkhtmltopdf\n\n` +
`Error: ${finalError.message}`
);
} else {
showExportSuccess(outputFile);
}
});
} else {
showExportSuccess(outputFile);
}
});
} else {
showExportSuccess(outputFile);
}
});
} else {
exec(pandocCmd, (error, stdout, stderr) => {
if (error) {
dialog.showErrorBox('Export Error', `Failed to export: ${error.message}\n\nMake sure Pandoc is installed.`);
} else {
showExportSuccess(outputFile);
}
});
}
}
}
function showExportSuccess(outputFile) {
dialog.showMessageBox(mainWindow, {
type: 'info',
title: 'Export Complete',
@@ -219,10 +288,55 @@ function exportFile(format) {
buttons: ['OK']
});
}
function exportSpreadsheet(format) {
if (!currentFile) {
dialog.showErrorBox('Error', 'Please save the file first');
return;
}
// Request content from renderer
mainWindow.webContents.send('get-content-for-spreadsheet', format);
}
function importDocument() {
const files = dialog.showOpenDialogSync(mainWindow, {
properties: ['openFile'],
filters: [
{ name: 'Documents', extensions: ['docx', 'odt', 'rtf', 'html', 'tex', 'epub', 'pdf'] },
{ name: 'Presentations', extensions: ['pptx', 'odp'] },
{ name: 'All Files', extensions: ['*'] }
]
});
if (files && files[0]) {
const inputFile = files[0];
const outputFile = inputFile.replace(/\.[^/.]+$/, '.md');
// Convert to markdown using pandoc
const pandocCmd = `pandoc "${inputFile}" -t markdown -o "${outputFile}"`;
exec(pandocCmd, (error, stdout, stderr) => {
if (error) {
dialog.showErrorBox('Import Error', `Failed to import: ${error.message}\n\nMake sure Pandoc is installed.`);
} else {
// Open the converted markdown file
currentFile = outputFile;
const content = fs.readFileSync(outputFile, 'utf-8');
mainWindow.webContents.send('file-opened', { path: outputFile, content });
dialog.showMessageBox(mainWindow, {
type: 'info',
title: 'Import Complete',
message: `Document imported successfully as ${outputFile}`,
buttons: ['OK']
});
}
});
}
}
function setTheme(theme) {
store.set('theme', theme);
mainWindow.webContents.send('theme-changed', theme);
@@ -247,7 +361,105 @@ ipcMain.on('get-theme', (event) => {
event.reply('theme-changed', theme);
});
app.whenReady().then(createWindow);
// Handle tab file tracking for exports
ipcMain.on('set-current-file', (event, filePath) => {
currentFile = filePath;
});
ipcMain.on('export-spreadsheet', (event, { content, format }) => {
const outputFile = dialog.showSaveDialogSync(mainWindow, {
defaultPath: currentFile.replace(/\.[^/.]+$/, `.${format}`),
filters: [
{ name: format.toUpperCase(), extensions: [format] }
]
});
if (outputFile) {
try {
// Parse markdown content to extract tables
const tables = extractTablesFromMarkdown(content);
if (tables.length === 0) {
dialog.showErrorBox('Export Error', 'No tables found in the markdown content');
return;
}
// Create workbook
const wb = XLSX.utils.book_new();
tables.forEach((table, index) => {
const ws = XLSX.utils.aoa_to_sheet(table);
XLSX.utils.book_append_sheet(wb, ws, `Table ${index + 1}`);
});
// Write file
XLSX.writeFile(wb, outputFile);
dialog.showMessageBox(mainWindow, {
type: 'info',
title: 'Export Complete',
message: `Spreadsheet exported successfully to ${outputFile}`,
buttons: ['OK']
});
} catch (error) {
dialog.showErrorBox('Export Error', `Failed to export: ${error.message}`);
}
}
});
// Helper function to extract tables from markdown
function extractTablesFromMarkdown(markdown) {
const tables = [];
const lines = markdown.split('\n');
let currentTable = [];
let inTable = false;
for (const line of lines) {
if (line.includes('|')) {
if (!inTable) {
inTable = true;
currentTable = [];
}
// Skip separator lines (|---|---|)
if (!line.match(/^\s*\|?\s*:?-+:?\s*\|/)) {
const cells = line.split('|')
.map(cell => cell.trim())
.filter(cell => cell !== '');
if (cells.length > 0) {
currentTable.push(cells);
}
}
} else if (inTable && line.trim() === '') {
// End of table
if (currentTable.length > 0) {
tables.push(currentTable);
}
currentTable = [];
inTable = false;
}
}
// Add last table if exists
if (currentTable.length > 0) {
tables.push(currentTable);
}
return tables;
}
app.whenReady().then(() => {
createWindow();
// Handle file association on app startup
if (process.argv.length > 1) {
const filePath = process.argv.find(arg => arg.endsWith('.md') || arg.endsWith('.markdown'));
if (filePath && fs.existsSync(filePath)) {
openFileFromPath(filePath);
}
}
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
@@ -260,3 +472,25 @@ app.on('activate', () => {
createWindow();
}
});
// Handle file opening on macOS
app.on('open-file', (event, filePath) => {
event.preventDefault();
if (mainWindow) {
openFileFromPath(filePath);
} else {
// Store the file path to open after window is created
app.pendingFile = filePath;
}
});
// Handle file opening from command line or file association
function openFileFromPath(filePath) {
if (fs.existsSync(filePath)) {
currentFile = filePath;
const content = fs.readFileSync(filePath, 'utf-8');
if (mainWindow && mainWindow.webContents) {
mainWindow.webContents.send('file-opened', { path: filePath, content });
}
}
}
+483 -161
View File
@@ -17,202 +17,524 @@ marked.setOptions({
gfm: true
});
// Elements
const editor = document.getElementById('editor');
const preview = document.getElementById('preview');
const previewPane = document.getElementById('preview-pane');
const editorPane = document.getElementById('editor-pane');
const statusText = document.getElementById('status-text');
const wordCount = document.getElementById('word-count');
// Tab Management
class TabManager {
constructor() {
this.tabs = new Map();
this.activeTabId = 1;
this.nextTabId = 2;
this.isPreviewVisible = true;
this.showLineNumbers = false;
// State
let isPreviewVisible = true;
let currentContent = '';
let isDirty = false;
// Initialize
document.addEventListener('DOMContentLoaded', () => {
// Request current theme
ipcRenderer.send('get-theme');
// Set up auto-save interval
setInterval(autoSave, 30000); // Auto-save every 30 seconds
// Initialize with empty content
updatePreview();
updateWordCount();
// Initialize first tab
this.tabs.set(1, {
id: 1,
title: 'Untitled',
content: '',
filePath: null,
isDirty: false,
undoStack: [],
redoStack: [],
findMatches: [],
currentMatchIndex: -1
});
// Editor input handler
editor.addEventListener('input', () => {
currentContent = editor.value;
isDirty = true;
updatePreview();
updateWordCount();
updateStatus('Modified');
});
// Toolbar button handlers
document.getElementById('btn-bold').addEventListener('click', () => insertMarkdown('**', '**'));
document.getElementById('btn-italic').addEventListener('click', () => insertMarkdown('*', '*'));
document.getElementById('btn-heading').addEventListener('click', () => insertMarkdown('## ', ''));
document.getElementById('btn-link').addEventListener('click', () => insertMarkdown('[', '](url)'));
document.getElementById('btn-code').addEventListener('click', () => insertMarkdown('`', '`'));
document.getElementById('btn-list').addEventListener('click', () => insertMarkdown('- ', ''));
document.getElementById('btn-quote').addEventListener('click', () => insertMarkdown('> ', ''));
document.getElementById('btn-preview-toggle').addEventListener('click', togglePreview);
// Markdown insertion helper
function insertMarkdown(before, after) {
const start = editor.selectionStart;
const end = editor.selectionEnd;
const selectedText = editor.value.substring(start, end);
const replacement = before + (selectedText || 'text') + after;
editor.value = editor.value.substring(0, start) + replacement + editor.value.substring(end);
// Set cursor position
if (selectedText) {
editor.selectionStart = start;
editor.selectionEnd = start + replacement.length;
} else {
editor.selectionStart = start + before.length;
editor.selectionEnd = start + before.length + 4; // Select "text"
this.setupEventListeners();
this.updateUI();
}
setupEventListeners() {
// Tab bar events
document.getElementById('new-tab-btn').addEventListener('click', () => this.createNewTab());
document.getElementById('tab-bar').addEventListener('click', (e) => {
if (e.target.classList.contains('tab-close')) {
e.stopPropagation();
const tabId = parseInt(e.target.closest('.tab').dataset.tabId);
this.closeTab(tabId);
} else if (e.target.closest('.tab')) {
const tabId = parseInt(e.target.closest('.tab').dataset.tabId);
this.switchToTab(tabId);
}
});
// Editor events for active tab
this.setupEditorEvents();
// Toolbar events
this.setupToolbarEvents();
// Find dialog events
this.setupFindEvents();
// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
if (e.ctrlKey || e.metaKey) {
switch (e.key) {
case 'n':
e.preventDefault();
this.createNewTab();
break;
case 'w':
if (this.tabs.size > 1) {
e.preventDefault();
this.closeTab(this.activeTabId);
}
break;
case 't':
e.preventDefault();
this.createNewTab();
break;
case 'Tab':
if (this.tabs.size > 1) {
e.preventDefault();
this.switchToNextTab();
}
break;
}
}
});
}
createNewTab() {
const newTabId = this.nextTabId++;
const tab = {
id: newTabId,
title: 'Untitled',
content: '',
filePath: null,
isDirty: false,
undoStack: [],
redoStack: [],
findMatches: [],
currentMatchIndex: -1
};
this.tabs.set(newTabId, tab);
this.createTabElements(tab);
this.switchToTab(newTabId);
this.updateTabBar();
}
createTabElements(tab) {
// Create tab content container
const tabContent = document.createElement('div');
tabContent.className = 'tab-content';
tabContent.id = `tab-content-${tab.id}`;
tabContent.dataset.tabId = tab.id;
tabContent.innerHTML = `
<div id="editor-pane-${tab.id}" class="pane">
<div class="editor-wrapper">
<div id="line-numbers-${tab.id}" class="line-numbers hidden"></div>
<textarea id="editor-${tab.id}" class="editor-textarea"></textarea>
</div>
</div>
<div id="preview-pane-${tab.id}" class="pane">
<div id="preview-${tab.id}" class="preview-content"></div>
</div>
`;
document.querySelector('.editor-container').appendChild(tabContent);
}
switchToTab(tabId) {
if (!this.tabs.has(tabId)) return;
// Save current tab state before switching
if (this.activeTabId && this.tabs.has(this.activeTabId)) {
this.saveCurrentTabState();
}
this.activeTabId = tabId;
this.updateUI();
this.restoreTabState(tabId);
this.focusActiveEditor();
// Notify main process about current file for exports
const tab = this.tabs.get(tabId);
if (tab && tab.filePath) {
ipcRenderer.send('set-current-file', tab.filePath);
}
}
switchToNextTab() {
const tabIds = Array.from(this.tabs.keys());
const currentIndex = tabIds.indexOf(this.activeTabId);
const nextIndex = (currentIndex + 1) % tabIds.length;
this.switchToTab(tabIds[nextIndex]);
}
closeTab(tabId) {
if (this.tabs.size === 1) return; // Don't close the last tab
const tab = this.tabs.get(tabId);
if (tab.isDirty) {
// TODO: Show confirmation dialog
}
// Remove tab elements
const tabElement = document.querySelector(`[data-tab-id="${tabId}"]`);
const tabContent = document.getElementById(`tab-content-${tabId}`);
if (tabElement && tabElement.classList.contains('tab')) {
tabElement.remove();
}
if (tabContent) {
tabContent.remove();
}
this.tabs.delete(tabId);
// Switch to another tab if this was active
if (this.activeTabId === tabId) {
const remainingTabs = Array.from(this.tabs.keys());
this.switchToTab(remainingTabs[0]);
}
this.updateTabBar();
}
updateTabBar() {
const tabBar = document.getElementById('tab-bar');
const existingTabs = tabBar.querySelectorAll('.tab');
// Remove all existing tab elements except the new tab button
existingTabs.forEach(tab => tab.remove());
// Add tabs in order
const sortedTabs = Array.from(this.tabs.values()).sort((a, b) => a.id - b.id);
const newTabBtn = document.getElementById('new-tab-btn');
sortedTabs.forEach(tab => {
const tabElement = document.createElement('div');
tabElement.className = `tab ${tab.id === this.activeTabId ? 'active' : ''}`;
tabElement.dataset.tabId = tab.id;
const title = tab.filePath ?
tab.filePath.split('/').pop() :
tab.title;
const dirtyIndicator = tab.isDirty ? ' •' : '';
tabElement.innerHTML = `
<span class="tab-title">${title}${dirtyIndicator}</span>
<button class="tab-close" title="Close tab">×</button>
`;
tabBar.insertBefore(tabElement, newTabBtn);
});
}
updateUI() {
// Show/hide tab contents
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
const activeContent = document.getElementById(`tab-content-${this.activeTabId}`);
if (activeContent) {
activeContent.classList.add('active');
}
// Update preview visibility
this.updatePreviewVisibility();
this.updateLineNumbers();
this.updateTabBar();
}
saveCurrentTabState() {
const tab = this.tabs.get(this.activeTabId);
if (!tab) return;
const editor = document.getElementById(`editor-${this.activeTabId}`);
if (editor) {
tab.content = editor.value;
tab.isDirty = tab.content !== (tab.originalContent || '');
}
}
restoreTabState(tabId) {
const tab = this.tabs.get(tabId);
if (!tab) return;
const editor = document.getElementById(`editor-${tabId}`);
const preview = document.getElementById(`preview-${tabId}`);
if (editor) {
editor.value = tab.content;
this.updatePreview(tabId);
this.updateWordCount();
}
}
focusActiveEditor() {
const editor = document.getElementById(`editor-${this.activeTabId}`);
if (editor) {
editor.focus();
// Trigger input event
editor.dispatchEvent(new Event('input'));
}
}
// Update preview
function updatePreview() {
const html = marked.parse(editor.value);
const clean = DOMPurify.sanitize(html);
preview.innerHTML = clean;
updatePreview(tabId = this.activeTabId) {
const tab = this.tabs.get(tabId);
const preview = document.getElementById(`preview-${tabId}`);
// Re-highlight code blocks
preview.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block);
});
if (!tab || !preview) return;
try {
const html = marked.parse(tab.content);
const sanitizedHtml = DOMPurify.sanitize(html);
preview.innerHTML = sanitizedHtml;
} catch (error) {
preview.innerHTML = '<p>Error rendering preview</p>';
}
}
// Toggle preview visibility
function togglePreview() {
isPreviewVisible = !isPreviewVisible;
updatePreviewVisibility() {
document.querySelectorAll('.tab-content').forEach(content => {
const previewPane = content.querySelector('.pane:last-child');
const editorPane = content.querySelector('.pane:first-child');
if (isPreviewVisible) {
if (this.isPreviewVisible) {
previewPane.classList.remove('hidden');
editorPane.classList.remove('full-width');
} else {
previewPane.classList.add('hidden');
editorPane.classList.add('full-width');
}
});
}
// Update word count
function updateWordCount() {
const text = editor.value;
const words = text.trim() ? text.trim().split(/\s+/).length : 0;
const chars = text.length;
wordCount.textContent = `Words: ${words} | Characters: ${chars}`;
}
updateLineNumbers() {
const editor = document.getElementById(`editor-${this.activeTabId}`);
const lineNumbers = document.getElementById(`line-numbers-${this.activeTabId}`);
// Update status
function updateStatus(text) {
statusText.textContent = text;
}
if (!editor || !lineNumbers) return;
// Auto-save function
function autoSave() {
if (isDirty && currentContent) {
ipcRenderer.send('save-current-file', currentContent);
isDirty = false;
updateStatus('Auto-saved');
setTimeout(() => updateStatus('Ready'), 2000);
}
}
// IPC event handlers
ipcRenderer.on('file-new', () => {
if (isDirty) {
if (confirm('You have unsaved changes. Do you want to continue?')) {
editor.value = '';
currentContent = '';
isDirty = false;
updatePreview();
updateWordCount();
updateStatus('New file');
}
if (this.showLineNumbers) {
const lines = editor.value.split('\\n');
lineNumbers.innerHTML = lines.map((_, i) =>
`<div class="line-number">${i + 1}</div>`
).join('');
lineNumbers.classList.remove('hidden');
} else {
editor.value = '';
currentContent = '';
updatePreview();
updateWordCount();
updateStatus('New file');
lineNumbers.classList.add('hidden');
}
}
updateWordCount() {
const tab = this.tabs.get(this.activeTabId);
if (!tab) return;
const words = tab.content.trim().split(/\\s+/).filter(word => word.length > 0).length;
const chars = tab.content.length;
document.getElementById('word-count').textContent = `Words: ${words} | Characters: ${chars}`;
}
setupEditorEvents() {
// Set up editor events using event delegation
document.addEventListener('input', (e) => {
if (e.target.classList.contains('editor-textarea')) {
const tabId = parseInt(e.target.id.split('-')[1]);
if (tabId === this.activeTabId) {
this.handleEditorInput(tabId);
}
}
});
ipcRenderer.on('file-opened', (event, { path, content }) => {
editor.value = content;
currentContent = content;
isDirty = false;
updatePreview();
updateWordCount();
updateStatus(`Opened: ${path}`);
document.addEventListener('scroll', (e) => {
if (e.target.classList.contains('editor-textarea')) {
const tabId = parseInt(e.target.id.split('-')[1]);
if (tabId === this.activeTabId) {
this.updateLineNumbers();
}
}
});
}
handleEditorInput(tabId) {
const tab = this.tabs.get(tabId);
if (!tab) return;
const editor = document.getElementById(`editor-${tabId}`);
tab.content = editor.value;
tab.isDirty = true;
this.updatePreview(tabId);
this.updateWordCount();
this.updateLineNumbers();
this.updateTabBar();
// Add to undo stack
this.pushUndoState(tabId);
}
pushUndoState(tabId) {
const tab = this.tabs.get(tabId);
if (!tab) return;
tab.undoStack.push(tab.content);
if (tab.undoStack.length > 50) {
tab.undoStack.shift();
}
tab.redoStack = [];
}
undo() {
const tab = this.tabs.get(this.activeTabId);
if (!tab || tab.undoStack.length === 0) return;
tab.redoStack.push(tab.content);
tab.content = tab.undoStack.pop();
const editor = document.getElementById(`editor-${this.activeTabId}`);
if (editor) {
editor.value = tab.content;
this.updatePreview();
this.updateWordCount();
}
}
redo() {
const tab = this.tabs.get(this.activeTabId);
if (!tab || tab.redoStack.length === 0) return;
tab.undoStack.push(tab.content);
tab.content = tab.redoStack.pop();
const editor = document.getElementById(`editor-${this.activeTabId}`);
if (editor) {
editor.value = tab.content;
this.updatePreview();
this.updateWordCount();
}
}
setupToolbarEvents() {
// Existing toolbar setup...
document.getElementById('btn-preview-toggle').addEventListener('click', () => {
this.isPreviewVisible = !this.isPreviewVisible;
this.updatePreviewVisibility();
});
document.getElementById('btn-line-numbers').addEventListener('click', () => {
this.showLineNumbers = !this.showLineNumbers;
this.updateLineNumbers();
});
// Add other toolbar events...
}
setupFindEvents() {
// Find dialog implementation...
document.getElementById('btn-find').addEventListener('click', () => {
document.getElementById('find-dialog').classList.remove('hidden');
document.getElementById('find-input').focus();
});
document.getElementById('btn-find-close').addEventListener('click', () => {
document.getElementById('find-dialog').classList.add('hidden');
});
}
// File operations
openFile(filePath, content) {
let tab = this.tabs.get(this.activeTabId);
// If current tab is empty and untitled, reuse it
if (!tab.filePath && !tab.isDirty && tab.content === '') {
tab.filePath = filePath;
tab.title = filePath.split('/').pop();
tab.content = content;
tab.originalContent = content;
tab.isDirty = false;
} else {
// Create new tab for the file
this.createNewTab();
tab = this.tabs.get(this.activeTabId);
tab.filePath = filePath;
tab.title = filePath.split('/').pop();
tab.content = content;
tab.originalContent = content;
tab.isDirty = false;
}
this.restoreTabState(this.activeTabId);
this.updateTabBar();
}
getCurrentContent() {
const tab = this.tabs.get(this.activeTabId);
return tab ? tab.content : '';
}
getCurrentFilePath() {
const tab = this.tabs.get(this.activeTabId);
return tab ? tab.filePath : null;
}
}
// Initialize tab manager
let tabManager;
document.addEventListener('DOMContentLoaded', () => {
tabManager = new TabManager();
// Request current theme
ipcRenderer.send('get-theme');
// Set up auto-save interval
setInterval(() => {
// Auto-save logic for all tabs
tabManager.tabs.forEach(tab => {
if (tab.isDirty && tab.filePath) {
ipcRenderer.send('save-current-file', tab.content);
}
});
}, 30000);
});
// IPC event listeners
ipcRenderer.on('file-new', () => {
tabManager.createNewTab();
});
ipcRenderer.on('file-opened', (event, data) => {
tabManager.openFile(data.path, data.content);
});
ipcRenderer.on('file-save', () => {
ipcRenderer.send('save-current-file', editor.value);
isDirty = false;
updateStatus('Saved');
const currentContent = tabManager.getCurrentContent();
const currentFilePath = tabManager.getCurrentFilePath();
if (currentFilePath) {
ipcRenderer.send('save-current-file', currentContent);
}
});
ipcRenderer.on('get-content-for-save', (event, path) => {
ipcRenderer.send('save-file', { path, content: editor.value });
isDirty = false;
updateStatus(`Saved: ${path}`);
ipcRenderer.on('get-content-for-save', (event, filePath) => {
const currentContent = tabManager.getCurrentContent();
ipcRenderer.send('save-file', { path: filePath, content: currentContent });
});
ipcRenderer.on('get-content-for-spreadsheet', (event, format) => {
const currentContent = tabManager.getCurrentContent();
ipcRenderer.send('export-spreadsheet', { content: currentContent, format });
});
ipcRenderer.on('toggle-preview', () => {
togglePreview();
tabManager.isPreviewVisible = !tabManager.isPreviewVisible;
tabManager.updatePreviewVisibility();
});
ipcRenderer.on('toggle-find', () => {
const findDialog = document.getElementById('find-dialog');
if (findDialog.classList.contains('hidden')) {
findDialog.classList.remove('hidden');
document.getElementById('find-input').focus();
} else {
findDialog.classList.add('hidden');
}
});
ipcRenderer.on('theme-changed', (event, theme) => {
// Remove all theme classes
document.body.classList.remove('theme-light', 'theme-dark', 'theme-solarized', 'theme-monokai', 'theme-github');
// Add new theme class
if (theme !== 'light') {
document.body.classList.add(`theme-${theme}`);
}
updateStatus(`Theme: ${theme}`);
});
// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
// Ctrl/Cmd + Enter to toggle preview
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
togglePreview();
}
// Tab key in editor
if (e.key === 'Tab' && e.target === editor) {
e.preventDefault();
const start = editor.selectionStart;
const end = editor.selectionEnd;
editor.value = editor.value.substring(0, start) + ' ' + editor.value.substring(end);
editor.selectionStart = editor.selectionEnd = start + 4;
}
});
// Prevent accidental navigation
window.addEventListener('beforeunload', (e) => {
if (isDirty) {
e.preventDefault();
e.returnValue = '';
}
document.body.className = `theme-${theme}`;
});
+257
View File
@@ -16,6 +16,93 @@ body {
height: 100vh;
}
/* Tab Bar */
.tab-bar {
display: flex;
align-items: center;
background: #f0f0f0;
border-bottom: 1px solid #ddd;
padding: 0 8px;
min-height: 36px;
}
.tab {
display: flex;
align-items: center;
padding: 6px 12px;
background: #e8e8e8;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 6px 6px 0 0;
margin-right: 2px;
cursor: pointer;
user-select: none;
max-width: 200px;
min-width: 120px;
}
.tab.active {
background: #fff;
border-color: #999;
z-index: 1;
}
.tab-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
}
.tab-close {
background: none;
border: none;
font-size: 16px;
font-weight: bold;
cursor: pointer;
padding: 0;
margin-left: 8px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
color: #666;
}
.tab-close:hover {
background: #ddd;
color: #000;
}
.new-tab-button {
background: none;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 8px;
cursor: pointer;
font-size: 14px;
margin-left: 8px;
color: #666;
}
.new-tab-button:hover {
background: #e8e8e8;
}
/* Tab Content */
.tab-content {
display: flex;
flex: 1;
overflow: hidden;
}
.tab-content:not(.active) {
display: none;
}
/* Toolbar */
.toolbar {
display: flex;
@@ -217,6 +304,40 @@ body.theme-dark {
color: #d4d4d4;
}
body.theme-dark .tab-bar {
background: #2d2d30;
border-bottom-color: #3e3e42;
}
body.theme-dark .tab {
background: #3c3c3c;
border-color: #555;
color: #d4d4d4;
}
body.theme-dark .tab.active {
background: #1e1e1e;
border-color: #666;
}
body.theme-dark .tab-close {
color: #ccc;
}
body.theme-dark .tab-close:hover {
background: #555;
color: #fff;
}
body.theme-dark .new-tab-button {
border-color: #555;
color: #ccc;
}
body.theme-dark .new-tab-button:hover {
background: #3c3c3c;
}
body.theme-dark .toolbar {
background: #2d2d30;
border-bottom-color: #3e3e42;
@@ -460,3 +581,139 @@ body.theme-github .status-bar {
#editor-pane.full-width {
border-right: none;
}
/* Find & Replace Dialog */
.find-dialog {
position: absolute;
top: 60px;
right: 20px;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1000;
min-width: 400px;
padding: 12px;
}
.find-dialog.hidden {
display: none;
}
.find-controls {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
}
.find-controls input {
flex: 1;
padding: 6px 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 13px;
}
.find-controls button {
padding: 6px 10px;
border: 1px solid #ddd;
background: #f5f5f5;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
white-space: nowrap;
}
.find-controls button:hover {
background: #e5e5e5;
}
.find-info {
font-size: 12px;
color: #666;
text-align: right;
}
/* Editor Wrapper with Line Numbers */
.editor-wrapper {
position: relative;
display: flex;
height: 100%;
}
.line-numbers {
min-width: 40px;
padding: 8px 4px;
background: #f8f8f8;
border-right: 1px solid #ddd;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 13px;
line-height: 1.4;
color: #666;
text-align: right;
user-select: none;
overflow: hidden;
}
.line-numbers.hidden {
display: none;
}
.line-numbers .line-number {
display: block;
white-space: nowrap;
}
/* Adjust editor when line numbers are shown */
.editor-wrapper #editor {
flex: 1;
}
/* Theme support for find dialog */
body.theme-dark .find-dialog {
background: #2d2d2d;
border-color: #555;
color: #f0f0f0;
}
body.theme-dark .find-controls input {
background: #333;
border-color: #555;
color: #f0f0f0;
}
body.theme-dark .find-controls button {
background: #404040;
border-color: #555;
color: #f0f0f0;
}
body.theme-dark .find-controls button:hover {
background: #4a4a4a;
}
body.theme-dark .line-numbers {
background: #2a2a2a;
border-right-color: #555;
color: #888;
}
/* Additional theme support for line numbers */
body.theme-solarized .line-numbers {
background: #fdf6e3;
border-right-color: #eee8d5;
color: #93a1a1;
}
body.theme-monokai .line-numbers {
background: #2f2f2f;
border-right-color: #555;
color: #75715e;
}
body.theme-github .line-numbers {
background: #fafbfc;
border-right-color: #e1e4e8;
color: #586069;
}