markdown-converter/CLAUDE.md

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.2.1
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 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

# 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

# Start development server
npm start

# Start with debugging
npm start --enable-logging

Building & Packaging

# 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

# 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

# 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)

• 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)

• 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

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
• Find Dialog: Search and replace interface
• Editor Container: Line numbers and text editor
• 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
• 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: September 1, 2025
Claude Assistant: Development completed for v1.2.1 comprehensive editor enhancements