Compare commits

..
46 Commits
Author SHA1 Message Date
amitwh 01d833f520 fix: resolve editor, batch conversion, and startup performance issues
- Remove popout preview button (HTML, JS, CSS)
- Fix Save/Save As flow for new untitled files
- Fix batch conversion menu items (wire show-batch-converter IPC)
- Add universal-convert-batch IPC handler for batch file conversion
- Lazy-load mermaid, pdfjs-dist, sidebar panels, command palette
- Switch highlight.js CSS from CDN to local
- Defer CodeMirror language extensions until first use
- Add show:false + ready-to-show for faster perceived startup
- Install mermaid as local dependency (remove CDN script tag)
2026-03-04 17:44:04 +05:30
amitwh 10d2fc8b8f fix: resolve lint errors for v4 release
- Fix duplicate editorContainer declaration in renderer.js
- Add missing browser globals to eslint config (prompt, FileReader, etc.)
- Add global object for Jest test setup
- Replace path.basename with portable string split in logo preview
2026-03-04 16:35:56 +05:30
amitwh 0344a48f20 docs: add v4.0.0 changelog 2026-03-04 16:33:38 +05:30
amitwh 3c11ac15ce feat: update application menu with all v4 features 2026-03-04 16:33:00 +05:30
amitwh c5a9881d8d feat: update preload.js with all v4 IPC channels 2026-03-04 16:31:28 +05:30
amitwh 15903e782a test: add comprehensive tests for v4 features
Add unit tests for sidebar manager, command palette, print preview,
main process utilities, and markdown extensions. Update jest config
to exclude untestable Electron-specific files from coverage and
raise coverage thresholds.
2026-03-04 16:28:36 +05:30
amitwh 336b24365d feat: add welcome tab, presentation/publishing exports, and spell checking
- Developer format support (JSON, YAML, XML, TOML) import/export
- Presentation export (Reveal.js slides, Beamer PDF)
- Publishing format exports (Confluence wiki, MOBI e-book)
- Enable system spell checking with context menu suggestions
- Add welcome tab with onboarding and feature showcase
2026-03-04 16:24:05 +05:30
amitwh b5409b7754 feat: add developer format support (JSON, YAML, XML, TOML) 2026-03-04 16:23:37 +05:30
amitwh d3afd7ad86 feat: wire up sidebar panels and REPL with IPC handlers, preload channels, and CSS 2026-03-04 16:17:38 +05:30
amitwh 59ef2028f8 feat: add code execution REPL with JS, Python, Bash support 2026-03-04 16:17:34 +05:30
amitwh f62a6b7e59 feat: add code snippets sidebar panel with CRUD 2026-03-04 16:17:30 +05:30
amitwh f650b04685 feat: add Git sidebar panel (status, stage, commit, log) 2026-03-04 16:17:26 +05:30
amitwh 04480c1243 feat: add File Explorer sidebar panel 2026-03-04 16:17:22 +05:30
amitwh 81a78412fd feat: add PlantUML diagram support alongside Mermaid 2026-03-04 16:10:47 +05:30
amitwh 12dcd2d1a3 feat: add document templates library with 10 templates 2026-03-04 16:10:24 +05:30
amitwh ae7b333cea feat: add image paste and drag-drop support 2026-03-04 16:08:55 +05:30
amitwh e2703d8c57 feat: add markdown extensions (footnotes, admonitions, TOC) 2026-03-04 16:08:22 +05:30
amitwh ca0b250506 feat: add custom print preview dialog with configurable options 2026-03-04 16:04:51 +05:30
amitwh 9348b2bd1d security: add file size validation, error sanitization, and rate limiting 2026-03-04 16:00:57 +05:30
amitwh 200e800eb2 security: add Content Security Policy meta tag 2026-03-04 16:00:53 +05:30
amitwh a6456a7b4c feat: add breadcrumb bar showing current file path
Display the active file path below the toolbar with dark theme
support and monospace font for path readability.
2026-03-04 15:56:55 +05:30
amitwh 3908df8b1d feat: add command palette (Ctrl+Shift+P)
Refactor inline command palette into a proper CommandPalette class
with search highlighting, keyboard navigation, and overlay UI.
Register all app actions including formatting, file ops, and sidebar
toggles.
2026-03-04 15:56:24 +05:30
amitwh 72ee803a95 feat: reorganize toolbar into grouped sections with separators
- Grouped toolbar buttons into logical sections: Format, Structure, Insert, View
- Added toolbar-group CSS class for visual grouping
- Updated button titles with keyboard shortcut hints
- Enhanced status bar HTML structure with left/right layout
2026-03-04 15:50:36 +05:30
amitwh 37502fb733 feat: enhanced status bar with word count, char count, line/col, encoding
- Restructured status bar into left/right sections with separators
- Added character count, cursor line/column position, encoding, and language mode indicators
- Added cursor position tracking via CodeMirror onUpdate callback
- Added file path display that updates on tab switch
- Simplified word count display for cleaner status bar layout
2026-03-04 15:50:31 +05:30
amitwh affe1a7e33 feat: add sidebar panel system with icon strip and panel toggle 2026-03-04 15:45:34 +05:30
amitwh ed48f254f1 feat: migrate find/replace to use CodeMirror search 2026-03-04 15:42:09 +05:30
amitwh 0c2b6fe5cc feat: migrate undo/redo to CodeMirror built-in history 2026-03-04 15:41:33 +05:30
amitwh 233225f12c feat: replace textarea with CodeMirror 6 editor 2026-03-04 15:38:33 +05:30
amitwh 47f3b7557e feat: add CodeMirror 6 wrapper module 2026-03-04 15:31:42 +05:30
amitwh 7678c61602 chore: add v4 dependencies (CodeMirror extensions, simple-git, marked plugins) 2026-03-04 15:30:01 +05:30
amitwh 6e7460def7 chore: update html2pdf.js and pdfkit 2026-03-04 15:29:22 +05:30
amitwh bf67156b9c feat: upgrade pdfjs-dist from 3.x to 5.x for improved PDF viewer
Update worker path from .js to .mjs to match the new ESM-only build
structure in pdfjs-dist v5. Core API (getDocument, getPage, render)
remains compatible.
2026-03-04 15:28:07 +05:30
amitwh 824f659e13 feat: upgrade marked to v17 with marked-highlight extension
- Update marked from ^16.2.1 to ^17.0.3
- Add marked-highlight ^2.2.3 for syntax highlighting support
- Replace deprecated marked.setOptions() with marked.use() in renderer.js
- Extract highlight config into markedHighlight() extension (required in v17)
- Update test mock to reflect new API (use instead of setOptions)
2026-03-04 15:24:46 +05:30
amitwh e7eff01db6 chore: update non-breaking dependencies (dompurify, docx, highlight.js, pdf-lib) 2026-03-04 15:22:18 +05:30
amitwh 7b15b2808e chore: bump version to 4.0.0 2026-03-04 15:20:25 +05:30
amitwh 5f43fd2b30 Add bundled Inter and JetBrains Mono fonts for offline use 2026-01-07 00:08:18 +05:30
amitwh f92e69d5ea Add .vs folder to gitignore 2026-01-06 23:31:06 +05:30
amitwhandGitHub 99eeafcaf3 Fix HTML entities in README.md 2026-01-06 23:19:59 +05:30
amitwhandGitHub b49abe48e8 Add images to README for features illustration
Added images to enhance the Markdown editor and PDF viewer sections.
2026-01-06 23:19:32 +05:30
amitwh dc7ee420f5 Merge branch 'windows' 2026-01-06 23:13:35 +05:30
amitwh 521da774b2 Remove AI development files from repository 2026-01-06 23:09:45 +05:30
amitwh 69218dfecf Merge branch 'windows' 2026-01-06 19:34:36 +05:30
amitwh 2c13a73284 Remove unused assets and update local settings
Deleted various image, PDF, and DOCX files that are no longer needed, as well as a sample YAML configuration. Updated .claude/settings.local.json to add new allowed Bash commands for local development.
2026-01-06 19:31:44 +05:30
amitwh 7887b96ca1 Merge windows into master for v3.0.0 release 2026-01-06 18:29:31 +05:30
amitwh 2b99cdd80a Merge branch 'windows' 2026-01-06 14:11:27 +05:30
amitwh 4a908382ce Update CLAUDE.md with v2.1.0 documentation 2025-12-14 10:34:12 +05:30
78 changed files with 4352 additions and 3512 deletions
File diff suppressed because one or more lines are too long
-10
View File
@@ -1,10 +0,0 @@
name: New MCP server
version: 0.0.1
schema: v1
mcpServers:
- name: New MCP server
command: npx
args:
- -y
- <your-mcp-server>
env: {}
+6 -1
View File
@@ -28,4 +28,9 @@ nul
*.tmp
# Development screenshots
pdf\ modal.png
pdf\ modal.png
# Claude/AI development files
.claude/
CLAUDE.md
agents.mdcoverage/
-3
View File
@@ -1,3 +0,0 @@
{
"CurrentProjectSetting": null
}
-7
View File
@@ -1,7 +0,0 @@
{
"ExpandedNodes": [
""
],
"SelectedNode": "\\package.json",
"PreviewInSolutionExplorer": false
}
File diff suppressed because it is too large Load Diff
Binary file not shown.
@@ -1,41 +0,0 @@
{
"Version": 1,
"WorkspaceRootPath": "H:\\Development\\pan-converter\\",
"Documents": [
{
"AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|H:\\Development\\pan-converter\\package.json||{90A6B3A7-C1A3-4009-A288-E2FF89E96FA0}",
"RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:package.json||{90A6B3A7-C1A3-4009-A288-E2FF89E96FA0}"
}
],
"DocumentGroupContainers": [
{
"Orientation": 0,
"VerticalTabListWidth": 256,
"DocumentGroups": [
{
"DockedWidth": 200,
"SelectedChildIndex": 0,
"Children": [
{
"$type": "Document",
"DocumentIndex": 0,
"Title": "package.json",
"DocumentMoniker": "H:\\Development\\pan-converter\\package.json",
"RelativeDocumentMoniker": "package.json",
"ToolTip": "H:\\Development\\pan-converter\\package.json",
"RelativeToolTip": "package.json",
"ViewState": "AgIAAAAAAAAAAAAAAAAAAAsAAAAqAAAAAAAAAA==",
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.001642|",
"WhenOpened": "2025-10-11T13:44:30.357Z",
"EditorCaption": ""
},
{
"$type": "Bookmark",
"Name": "ST:0:0:{cce594b6-0c39-4442-ba28-10c64ac7e89f}"
}
]
}
]
}
]
}
-41
View File
@@ -1,41 +0,0 @@
{
"Version": 1,
"WorkspaceRootPath": "H:\\Development\\pan-converter\\",
"Documents": [
{
"AbsoluteMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|H:\\Development\\pan-converter\\package.json||{90A6B3A7-C1A3-4009-A288-E2FF89E96FA0}",
"RelativeMoniker": "D:0:0:{A2FE74E1-B743-11D0-AE1A-00A0C90FFFC3}|\u003CMiscFiles\u003E|solutionrelative:package.json||{90A6B3A7-C1A3-4009-A288-E2FF89E96FA0}"
}
],
"DocumentGroupContainers": [
{
"Orientation": 0,
"VerticalTabListWidth": 256,
"DocumentGroups": [
{
"DockedWidth": 200,
"SelectedChildIndex": 0,
"Children": [
{
"$type": "Document",
"DocumentIndex": 0,
"Title": "package.json",
"DocumentMoniker": "H:\\Development\\pan-converter\\package.json",
"RelativeDocumentMoniker": "package.json",
"ToolTip": "H:\\Development\\pan-converter\\package.json",
"RelativeToolTip": "package.json",
"ViewState": "AgIAAAAAAAAAAAAAAAAAAAsAAAAqAAAAAAAAAA==",
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.001642|",
"WhenOpened": "2025-10-11T13:44:30.357Z",
"EditorCaption": ""
},
{
"$type": "Bookmark",
"Name": "ST:0:0:{cce594b6-0c39-4442-ba28-10c64ac7e89f}"
}
]
}
]
}
]
}
BIN
View File
Binary file not shown.
-1328
View File
File diff suppressed because it is too large Load Diff
+3
View File
@@ -5,6 +5,7 @@ A powerful cross-platform Markdown editor and document converter powered by Pand
## 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
@@ -15,6 +16,8 @@ A powerful cross-platform Markdown editor and document converter powered by Pand
- **Math support** - KaTeX integration for mathematical expressions
### PDF Viewer & Editor
<img width="1920" height="1032" alt="image" src="https://github.com/user-attachments/assets/f10f62be-af3d-496e-81df-37ab4f91abfd" />
- **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
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 171 KiB

+51
View File
@@ -1,5 +1,56 @@
# 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
View File
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.
+22
View File
@@ -38,10 +38,30 @@ module.exports = [
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
@@ -49,6 +69,8 @@ module.exports = [
DOMPurify: 'readonly',
hljs: 'readonly',
mermaid: 'readonly',
// Node.js global object
global: 'writable',
// Jest
jest: 'readonly',
describe: 'readonly',
+6 -4
View File
@@ -20,16 +20,18 @@ module.exports = {
collectCoverageFrom: [
'src/**/*.js',
'!src/main.js', // Main process needs electron-mock
'!src/renderer.js', // Large renderer file with duplicate declarations
'!src/preload.js', // Electron preload requires contextBridge
'!**/node_modules/**'
],
// Coverage thresholds (start low, increase over time)
// Coverage thresholds (raised with expanded test suite)
coverageThreshold: {
global: {
branches: 10,
functions: 10,
lines: 10,
statements: 10
functions: 15,
lines: 15,
statements: 15
}
},
BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

+25 -7
View File
@@ -1,6 +1,6 @@
{
"name": "markdown-converter",
"version": "3.0.0",
"version": "4.0.0",
"description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
"main": "src/main.js",
"scripts": {
@@ -52,19 +52,37 @@
"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",
"codemirror": "^6.0.2",
"core-util-is": "^1.0.3",
"docx": "^9.5.1",
"docx": "^9.6.0",
"docx4js": "^3.3.0",
"dompurify": "^3.2.6",
"dompurify": "^3.3.1",
"electron-store": "^10.1.0",
"highlight.js": "^11.11.1",
"html2pdf.js": "^0.10.1",
"marked": "^16.2.1",
"html2pdf.js": "^0.14.0",
"marked": "^17.0.3",
"marked-footnote": "^1.4.0",
"marked-highlight": "^2.2.3",
"mermaid": "^11.12.3",
"pdf-lib": "^1.17.1",
"pdfjs-dist": "^3.11.174",
"pdfkit": "^0.14.0",
"pdfjs-dist": "^5.5.207",
"pdfkit": "^0.17.2",
"pizzip": "^3.2.0",
"simple-git": "^3.32.3",
"tslib": "^2.8.1",
"xlsx": "^0.18.5"
},
Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
View File
Binary file not shown.
+109
View File
@@ -0,0 +1,109 @@
class CommandPalette {
constructor() {
this.overlay = document.getElementById('command-palette-overlay');
this.input = document.getElementById('command-palette-input');
this.results = document.getElementById('command-palette-results');
this.commands = [];
this.selectedIndex = 0;
this.filteredCommands = [];
this.setupEventListeners();
}
register(label, shortcut, action) {
this.commands.push({ label, shortcut, action });
}
open() {
this.overlay.classList.remove('hidden');
this.input.value = '';
this.input.focus();
this.selectedIndex = 0;
this.renderResults('');
}
close() {
this.overlay.classList.add('hidden');
}
isOpen() {
return !this.overlay.classList.contains('hidden');
}
setupEventListeners() {
this.input.addEventListener('input', () => {
this.selectedIndex = 0;
this.renderResults(this.input.value);
});
this.overlay.addEventListener('click', (e) => {
if (e.target === this.overlay) this.close();
});
this.input.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
e.preventDefault();
this.close();
} else if (e.key === 'Enter') {
e.preventDefault();
this.executeSelected();
} else if (e.key === 'ArrowDown') {
e.preventDefault();
this.selectedIndex = Math.min(this.selectedIndex + 1, this.filteredCommands.length - 1);
this.updateSelection();
} else if (e.key === 'ArrowUp') {
e.preventDefault();
this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
this.updateSelection();
}
});
}
renderResults(query) {
this.filteredCommands = query
? this.commands.filter(cmd => cmd.label.toLowerCase().includes(query.toLowerCase()))
: [...this.commands];
this.results.innerHTML = this.filteredCommands.map((cmd, i) => `
<div class="command-item ${i === this.selectedIndex ? 'selected' : ''}" data-index="${i}">
<span class="command-label">${this.highlightMatch(cmd.label, query)}</span>
${cmd.shortcut ? `<span class="command-shortcut">${cmd.shortcut}</span>` : ''}
</div>
`).join('');
this.results.querySelectorAll('.command-item').forEach((el) => {
el.addEventListener('click', () => {
const idx = parseInt(el.dataset.index);
this.filteredCommands[idx].action();
this.close();
});
el.addEventListener('mouseenter', () => {
this.selectedIndex = parseInt(el.dataset.index);
this.updateSelection();
});
});
}
highlightMatch(text, query) {
if (!query) return text;
const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
return text.replace(regex, '<strong>$1</strong>');
}
updateSelection() {
this.results.querySelectorAll('.command-item').forEach((el, i) => {
el.classList.toggle('selected', i === this.selectedIndex);
});
// Scroll selected into view
const selected = this.results.querySelector('.command-item.selected');
if (selected) selected.scrollIntoView({ block: 'nearest' });
}
executeSelected() {
if (this.filteredCommands[this.selectedIndex]) {
this.filteredCommands[this.selectedIndex].action();
this.close();
}
}
}
module.exports = { CommandPalette };
+123
View File
@@ -0,0 +1,123 @@
// 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');
/**
* 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 = {}) {
const {
content = '',
onChange = () => {},
onUpdate = null,
isDark = false,
showLineNumbers = true,
} = options;
const extensions = [
markdown({ base: markdownLanguage }),
history(),
drawSelection(),
highlightActiveLine(),
bracketMatching(),
indentOnInput(),
highlightSelectionMatches(),
autocompletion(),
foldGutter(),
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 };
+75
View File
@@ -0,0 +1,75 @@
/* Local Font Definitions for MarkdownConverter */
/* Inter Font Family */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../assets/fonts/Inter-Light.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../assets/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/Inter-Bold.woff2') format('woff2');
}
/* JetBrains Mono Font Family - For code, markdown editor, and ASCII art */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
}
+274 -118
View File
@@ -2,14 +2,16 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' 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;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MarkdownConverter</title>
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles-modern.css">
<link rel="stylesheet" href="styles-concreteinfo.css">
<!-- Load external resources asynchronously -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" media="print" onload="this.media='all'">
<script defer src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<link rel="stylesheet" href="styles-sidebar.css">
<link rel="stylesheet" href="styles-welcome.css">
<link rel="stylesheet" href="../node_modules/highlight.js/styles/default.css">
</head>
<body>
<div class="container">
@@ -20,7 +22,7 @@
<span class="app-title">MarkdownConverter</span>
</div>
<div class="app-header-right">
<span class="app-version">v3.0.0</span>
<span class="app-version">v4.0.0</span>
</div>
</div>
<div class="tab-bar" id="tab-bar">
@@ -31,107 +33,124 @@
<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-group">
<!-- Format: Bold, Italic, Strikethrough -->
<button id="btn-bold" title="Bold (Ctrl+B)">
<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 (Ctrl+I)">
<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-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>
</div>
<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-group">
<!-- Structure: Heading, List, Quote -->
<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-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>
</div>
<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 class="toolbar-group">
<!-- Insert: Link, Code, Code Block, Table, HR -->
<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="Inline Code (Ctrl+`)">
<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-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-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-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>
<div class="toolbar-separator"></div>
<div class="toolbar-group">
<!-- View: Find, Line Numbers, Preview -->
<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>
<button id="btn-preview-toggle" title="Toggle Preview (Ctrl+Shift+P)">
<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>
</div>
<div class="breadcrumb-bar" id="breadcrumb-bar">
<span class="breadcrumb-path" id="breadcrumb-path">Untitled</span>
</div>
<!-- Find & Replace Dialog -->
<div id="find-dialog" class="find-dialog hidden">
<div class="find-controls">
@@ -311,16 +330,86 @@
</div>
</div>
<!-- Command Palette -->
<div id="command-palette" class="command-palette hidden">
<div class="command-palette-content">
<input type="text" id="command-search" placeholder="Type a command..." autofocus>
<div id="command-list" class="command-list"></div>
<div class="command-palette-footer">
<span>↑↓ Navigate</span>
<span>Enter Execute</span>
<span>Esc Close</span>
<!-- Print Preview Dialog -->
<div class="export-dialog hidden" id="print-preview-overlay">
<div class="export-dialog-content print-preview-dialog">
<div class="export-dialog-header">
<h3>Print Preview</h3>
<button id="print-preview-close" title="Close" style="background:none;border:none;color:white;font-size:24px;cursor:pointer;">&times;</button>
</div>
<div class="print-preview-body">
<div class="print-preview-sidebar">
<div class="print-option-group">
<label>Paper Size</label>
<select id="print-paper-size">
<option value="A3">A3</option>
<option value="A4" selected>A4</option>
<option value="A5">A5</option>
<option value="Letter">Letter</option>
<option value="Legal">Legal</option>
<option value="Tabloid">Tabloid</option>
</select>
</div>
<div class="print-option-group">
<label>Orientation</label>
<select id="print-orientation">
<option value="portrait" selected>Portrait</option>
<option value="landscape">Landscape</option>
</select>
</div>
<div class="print-option-group">
<label>Margins</label>
<select id="print-margins">
<option value="default" selected>Default</option>
<option value="narrow">Narrow</option>
<option value="wide">Wide</option>
<option value="none">None</option>
</select>
</div>
<div class="print-option-group">
<label>Scale</label>
<div class="scale-control">
<input type="range" id="print-scale" min="50" max="200" value="100">
<span id="print-scale-value">100%</span>
</div>
</div>
<div class="print-option-group">
<label class="checkbox-label">
<input type="checkbox" id="print-headers" checked>
Headers &amp; Footers
</label>
</div>
<div class="print-option-group">
<label class="checkbox-label">
<input type="checkbox" id="print-background" checked>
Background Colors
</label>
</div>
<div class="print-option-group">
<label>Pages</label>
<select id="print-pages">
<option value="all" selected>All</option>
<option value="custom">Custom Range</option>
</select>
<input type="text" id="print-page-range" placeholder="e.g., 1-3, 5" class="hidden print-range-input">
</div>
<div class="print-actions">
<button class="btn-primary" id="print-execute">Print</button>
<button class="btn-secondary" id="print-cancel">Cancel</button>
</div>
</div>
<div class="print-preview-content">
<iframe id="print-preview-frame" style="width:100%;height:100%;border:none;background:white;"></iframe>
</div>
</div>
</div>
</div>
<!-- Command Palette -->
<div class="command-palette-overlay hidden" id="command-palette-overlay">
<div class="command-palette">
<input type="text" class="command-palette-input" id="command-palette-input" placeholder="Type a command..." autocomplete="off">
<div class="command-palette-results" id="command-palette-results"></div>
</div>
</div>
@@ -1292,12 +1381,52 @@
</div>
</div>
<div class="editor-container">
<div class="main-content" id="main-content">
<!-- Sidebar -->
<div class="sidebar collapsed" id="sidebar">
<div class="sidebar-icons">
<button class="sidebar-icon" data-panel="explorer" title="File Explorer (Ctrl+Shift+E)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/>
</svg>
</button>
<button class="sidebar-icon" data-panel="git" title="Git (Ctrl+Shift+G)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="6" y1="3" x2="6" y2="15"/>
<circle cx="18" cy="6" r="3"/>
<circle cx="6" cy="6" r="3"/>
<path d="M18 9a9 9 0 01-9 9"/>
</svg>
</button>
<button class="sidebar-icon" data-panel="snippets" title="Snippets (Ctrl+Shift+S)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="16 18 22 12 16 6"/>
<polyline points="8 6 2 12 8 18"/>
</svg>
</button>
<button class="sidebar-icon" data-panel="templates" title="Templates">
<svg width="20" height="20" 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"/>
<line x1="3" y1="9" x2="21" y2="9"/>
<line x1="9" y1="21" x2="9" y2="9"/>
</svg>
</button>
</div>
<div class="sidebar-panel" id="sidebar-panel">
<div class="sidebar-panel-header">
<span class="sidebar-panel-title"></span>
<button class="sidebar-panel-close" title="Close panel">&times;</button>
</div>
<div class="sidebar-panel-content" id="sidebar-panel-content"></div>
</div>
</div>
<!-- Editor Container -->
<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 id="editor-cm-1" class="codemirror-container"></div>
</div>
</div>
<div class="pane-resizer" id="pane-resizer-1" title="Drag to resize"></div>
@@ -1400,11 +1529,38 @@
<canvas id="pdf-canvas"></canvas>
</div>
</div>
</div>
</div>
<div class="status-bar">
<span id="status-text">Ready</span>
<span id="word-count">Words: 0 | Characters: 0</span>
<!-- Bottom Panel (REPL Output) -->
<div class="bottom-panel collapsed" id="bottom-panel">
<div class="bottom-panel-header">
<span class="bottom-panel-title">Output</span>
<div class="bottom-panel-actions">
<button class="bottom-panel-btn" id="repl-clear" title="Clear output">Clear</button>
<button class="bottom-panel-btn" id="bottom-panel-toggle" title="Toggle panel">&#x25BC;</button>
</div>
</div>
<div class="bottom-panel-content" id="repl-output"></div>
</div>
<div class="status-bar" id="status-bar">
<div class="status-bar-left">
<span class="status-item" id="status-text">Ready</span>
<span class="status-separator">|</span>
<span class="status-item" id="status-file-path" title=""></span>
</div>
<div class="status-bar-right">
<span class="status-item" id="word-count">Words: 0</span>
<span class="status-separator">|</span>
<span class="status-item" id="char-count">Chars: 0</span>
<span class="status-separator">|</span>
<span class="status-item" id="line-col">Ln 1, Col 1</span>
<span class="status-separator">|</span>
<span class="status-item" id="encoding">UTF-8</span>
<span class="status-separator">|</span>
<span class="status-item" id="language-mode">Markdown</span>
</div>
</div>
</div>
+626 -25
View File
@@ -50,6 +50,48 @@ function safeExecFile(command, args, options = {}) {
});
}
// File size validation
const MAX_FILE_SIZE_MB = 50;
const MAX_FILE_SIZE = MAX_FILE_SIZE_MB * 1024 * 1024;
// Sanitize error messages to strip absolute file paths
function sanitizeErrorMessage(message) {
if (typeof message !== 'string') return String(message);
// Strip absolute Windows paths, keeping only filename
return message
.replace(/[A-Z]:\\[^\s"']+\\([^\s"'\\]+)/gi, '$1')
.replace(/\/[^\s"']+\/([^\s"'/]+)/g, '$1');
}
// Rate limiter for conversions
function createRateLimiter(minIntervalMs = 2000) {
let lastCall = 0;
return function canProceed() {
const now = Date.now();
if (now - lastCall < minIntervalMs) return false;
lastCall = now;
return true;
};
}
const conversionLimiter = createRateLimiter(2000);
// Convert structured data formats to markdown code blocks
function convertDataToMarkdown(content, format) {
switch (format) {
case 'json':
return '```json\n' + content + '\n```';
case 'yaml':
case 'yml':
return '```yaml\n' + content + '\n```';
case 'xml':
return '```xml\n' + content + '\n```';
case 'toml':
return '```toml\n' + content + '\n```';
default:
return '```\n' + content + '\n```';
}
}
/**
* Run Pandoc command safely with execFile
* @param {string[]} args - Pandoc arguments array
@@ -282,21 +324,60 @@ function createWindow() {
mainWindow = new BrowserWindow({
width: 1200,
height: 800,
show: false,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
contextIsolation: false,
spellcheck: true
},
icon: path.join(__dirname, '../assets/icon.png')
});
mainWindow.loadFile(path.join(__dirname, 'index.html'));
// Show window only after content is ready — avoids blank flash
mainWindow.once('ready-to-show', () => {
mainWindow.show();
});
createMenu();
mainWindow.on('closed', () => {
mainWindow = null;
});
// Spell check context menu
mainWindow.webContents.on('context-menu', (event, params) => {
const { Menu, MenuItem } = require('electron');
const menu = new Menu();
// Add spell check suggestions
if (params.misspelledWord) {
for (const suggestion of params.dictionarySuggestions) {
menu.append(new MenuItem({
label: suggestion,
click: () => mainWindow.webContents.replaceMisspelling(suggestion)
}));
}
if (params.dictionarySuggestions.length > 0) {
menu.append(new MenuItem({ type: 'separator' }));
}
menu.append(new MenuItem({
label: 'Add to Dictionary',
click: () => mainWindow.webContents.session.addWordToSpellCheckerDictionary(params.misspelledWord)
}));
menu.append(new MenuItem({ type: 'separator' }));
}
// Standard context menu items
menu.append(new MenuItem({ role: 'cut' }));
menu.append(new MenuItem({ role: 'copy' }));
menu.append(new MenuItem({ role: 'paste' }));
menu.append(new MenuItem({ role: 'selectAll' }));
menu.popup();
});
// Wait for the page to fully load before sending file data
mainWindow.webContents.on('did-finish-load', () => {
console.log('Window finished loading');
@@ -321,11 +402,16 @@ function buildRecentFilesMenu() {
label: filePath.split(/[\\/]/).pop(), // Get filename only
click: () => {
if (fs.existsSync(filePath)) {
const stats = fs.statSync(filePath);
if (stats.size > MAX_FILE_SIZE) {
dialog.showErrorBox('File Too Large', `File exceeds the ${MAX_FILE_SIZE_MB}MB size limit.`);
return;
}
currentFile = filePath;
const content = fs.readFileSync(filePath, 'utf-8');
mainWindow.webContents.send('file-opened', { path: filePath, content });
} else {
dialog.showErrorBox('File Not Found', `The file "${filePath}" could not be found.`);
dialog.showErrorBox('File Not Found', sanitizeErrorMessage(`The file "${filePath}" could not be found.`));
}
},
toolTip: filePath // Show full path in tooltip
@@ -403,6 +489,22 @@ function createMenu() {
submenu: buildRecentFilesMenu()
},
{ 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',
@@ -425,6 +527,17 @@ function createMenu() {
{ label: 'OpenDocument Presentation (ODP)', click: () => exportFile('odp') },
{ type: 'separator' },
{ label: 'CSV (Tables)', click: () => exportSpreadsheet('csv') },
{ type: 'separator' },
{ label: 'JSON (.json)', click: () => exportFile('json') },
{ label: 'YAML (.yaml)', click: () => exportFile('yaml') },
{ label: 'XML (.xml)', click: () => exportFile('xml') },
{ label: 'TOML (.toml)', click: () => exportFile('toml') },
{ type: 'separator' },
{ label: 'Reveal.js Slides (.html)', click: () => exportFile('revealjs') },
{ label: 'Beamer Slides (.pdf)', click: () => exportFile('beamer') },
{ type: 'separator' },
{ label: 'Confluence Wiki (.txt)', click: () => exportFile('confluence') },
{ label: 'MOBI E-book (.mobi)', click: () => exportFile('mobi') },
]
},
{ type: 'separator' },
@@ -483,9 +596,29 @@ function createMenu() {
submenu: [
{
label: 'Toggle Preview',
accelerator: 'CmdOrCtrl+Shift+P',
accelerator: 'CmdOrCtrl+Shift+V',
click: () => mainWindow.webContents.send('toggle-preview')
},
{
label: 'Command Palette',
accelerator: 'CmdOrCtrl+Shift+P',
click: () => mainWindow.webContents.send('toggle-command-palette')
},
{ 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: [
@@ -541,6 +674,15 @@ function createMenu() {
]
},
{ type: 'separator' },
{
label: 'Spell Check',
type: 'checkbox',
checked: true,
click: (menuItem) => {
mainWindow.webContents.session.setSpellCheckerEnabled(menuItem.checked);
}
},
{ type: 'separator' },
{ label: 'Reload', accelerator: 'CmdOrCtrl+R', role: 'reload' },
{ label: 'Toggle DevTools', accelerator: 'F12', role: 'toggleDevTools' },
{ type: 'separator' },
@@ -783,7 +925,7 @@ function showAboutDialog() {
<body>
<img src="${iconBase64}" class="logo" alt="MarkdownConverter">
<h1>MarkdownConverter</h1>
<div class="version">Version 3.0.0</div>
<div class="version">Version 4.0.0</div>
<div class="company">
<span>by</span>
@@ -812,7 +954,7 @@ function showAboutDialog() {
<div class="footer">
<p>License: MIT</p>
<p>© 2024-2025 ConcreteInfo. All rights reserved.</p>
<p>© 2024-2026 ConcreteInfo. All rights reserved.</p>
</div>
</body>
</html>`;
@@ -945,6 +1087,11 @@ function openPDFFile() {
});
if (files && files[0]) {
const stats = fs.statSync(files[0]);
if (stats.size > MAX_FILE_SIZE) {
dialog.showErrorBox('File Too Large', `File exceeds the ${MAX_FILE_SIZE_MB}MB size limit.`);
return;
}
mainWindow.webContents.send('open-pdf-viewer', files[0]);
}
}
@@ -954,13 +1101,27 @@ function openFile() {
properties: ['openFile'],
filters: [
{ name: 'Markdown', extensions: ['md', 'markdown'] },
{ name: 'Developer Formats', extensions: ['json', 'yaml', 'yml', 'xml', 'toml'] },
{ name: 'All Files', extensions: ['*'] }
]
});
if (files && files[0]) {
const stats = fs.statSync(files[0]);
if (stats.size > MAX_FILE_SIZE) {
dialog.showErrorBox('File Too Large', `File exceeds the ${MAX_FILE_SIZE_MB}MB size limit.`);
return;
}
currentFile = files[0];
const content = fs.readFileSync(currentFile, 'utf-8');
const ext = path.extname(currentFile).toLowerCase().slice(1);
let content = fs.readFileSync(currentFile, 'utf-8');
// Wrap developer format files in code blocks for markdown display
const devFormats = ['json', 'yaml', 'yml', 'xml', 'toml'];
if (devFormats.includes(ext)) {
content = convertDataToMarkdown(content, ext);
}
mainWindow.webContents.send('file-opened', { path: currentFile, content });
}
}
@@ -975,6 +1136,11 @@ function openPdfFile() {
});
if (files && files[0]) {
const stats = fs.statSync(files[0]);
if (stats.size > MAX_FILE_SIZE) {
dialog.showErrorBox('File Too Large', `File exceeds the ${MAX_FILE_SIZE_MB}MB size limit.`);
return;
}
mainWindow.webContents.send('open-pdf-file', files[0]);
}
}
@@ -1158,7 +1324,7 @@ ipcMain.on('browse-header-footer-logo', async (event, position) => {
}
} catch (error) {
console.error('Logo browse error:', error);
dialog.showErrorBox('Logo Error', `Failed to select logo: ${error.message}`);
dialog.showErrorBox('Logo Error', sanitizeErrorMessage(`Failed to select logo: ${error.message}`));
}
});
@@ -1180,7 +1346,7 @@ ipcMain.on('save-header-footer-logo', async (event, { position, filePath }) => {
// Verify source file exists
if (!fs.existsSync(filePath)) {
dialog.showErrorBox('Logo Error', `Source file not found: ${filePath}`);
dialog.showErrorBox('Logo Error', sanitizeErrorMessage(`Source file not found: ${filePath}`));
return;
}
@@ -1202,7 +1368,7 @@ ipcMain.on('save-header-footer-logo', async (event, { position, filePath }) => {
event.reply('header-footer-logo-saved', { position, path: destPath });
} catch (error) {
console.error('Logo save error:', error);
dialog.showErrorBox('Logo Error', `Failed to save logo: ${error.message}`);
dialog.showErrorBox('Logo Error', sanitizeErrorMessage(`Failed to save logo: ${error.message}`));
}
});
@@ -1457,7 +1623,7 @@ async function exportWordWithTemplate() {
});
} catch (error) {
dialog.showErrorBox('Export Error', `Failed to export document: ${error.message}`);
dialog.showErrorBox('Export Error', sanitizeErrorMessage(`Failed to export document: ${error.message}`));
}
}
@@ -1505,7 +1671,7 @@ async function exportPDFViaWordTemplate() {
if (error) {
dialog.showErrorBox('PDF Conversion Error',
`Failed to convert to PDF. Please ensure LibreOffice is installed.\n\nError: ${error.message}`);
sanitizeErrorMessage(`Failed to convert to PDF. Please ensure LibreOffice is installed.\n\nError: ${error.message}`));
return;
}
@@ -1530,7 +1696,7 @@ async function exportPDFViaWordTemplate() {
});
} catch (error) {
dialog.showErrorBox('Export Error', `Failed to export PDF: ${error.message}`);
dialog.showErrorBox('Export Error', sanitizeErrorMessage(`Failed to export PDF: ${error.message}`));
}
}
@@ -1579,6 +1745,10 @@ function checkConverterAvailable(tool) {
// Handle universal file conversion
ipcMain.on('universal-convert', async (event, { tool, fromFormat, toFormat, filePath }) => {
if (!conversionLimiter()) {
mainWindow.webContents.send('conversion-status', 'Please wait before converting again...');
return;
}
try {
mainWindow.webContents.send('conversion-status', 'Checking converter availability...');
@@ -1657,6 +1827,91 @@ ipcMain.on('universal-convert', async (event, { tool, fromFormat, toFormat, file
}
});
// Handle universal batch file conversion
ipcMain.on('universal-convert-batch', async (event, { tool, fromFormat, toFormat, inputFolder, outputFolder, includeSubfolders, advancedOptions }) => {
if (!conversionLimiter()) {
mainWindow.webContents.send('conversion-status', 'Please wait before converting again...');
return;
}
try {
const toolAvailable = await checkConverterAvailable(tool);
if (!toolAvailable) {
throw new Error(`${tool} is not installed or not found in PATH. Please install it first.`);
}
// Collect matching files
const files = [];
function collectFiles(dir) {
const entries = fs.readdirSync(dir, { withFileTypes: true });
for (const entry of entries) {
const fullPath = path.join(dir, entry.name);
if (entry.isDirectory() && includeSubfolders) {
collectFiles(fullPath);
} else if (entry.isFile() && entry.name.toLowerCase().endsWith(`.${fromFormat}`)) {
files.push(fullPath);
}
}
}
collectFiles(inputFolder);
if (files.length === 0) {
mainWindow.webContents.send('conversion-complete', { success: false, error: `No .${fromFormat} files found in the selected folder.` });
return;
}
let completed = 0;
let failed = 0;
for (const filePath of files) {
const relativePath = path.relative(inputFolder, filePath);
const outputPath = path.join(outputFolder, relativePath.replace(/\.[^/.]+$/, `.${toFormat}`));
// Ensure output subdirectory exists
fs.mkdirSync(path.dirname(outputPath), { recursive: true });
mainWindow.webContents.send('conversion-status', `Converting ${completed + 1}/${files.length}: ${path.basename(filePath)}`);
let conversionInfo;
switch (tool) {
case 'libreoffice': conversionInfo = convertWithLibreOffice(filePath, toFormat, outputPath); break;
case 'imagemagick': conversionInfo = convertWithImageMagick(filePath, outputPath); break;
case 'ffmpeg': conversionInfo = convertWithFFmpeg(filePath, outputPath); break;
case 'pandoc': conversionInfo = convertWithPandoc(filePath, outputPath); break;
default: throw new Error(`Unknown conversion tool: ${tool}`);
}
await new Promise((resolve) => {
execFile(conversionInfo.command, conversionInfo.args, (error) => {
if (error) { failed++; } else { completed++; }
resolve();
});
});
}
mainWindow.webContents.send('conversion-complete', {
success: true,
outputPath: outputFolder
});
dialog.showMessageBox(mainWindow, {
type: 'info',
title: 'Batch Conversion Complete',
message: `Batch conversion finished!`,
detail: `Converted: ${completed}/${files.length} files${failed > 0 ? ` (${failed} failed)` : ''}\nOutput: ${outputFolder}`,
buttons: ['OK']
});
} catch (error) {
mainWindow.webContents.send('conversion-complete', { success: false, error: error.message });
dialog.showMessageBox(mainWindow, {
type: 'error',
title: 'Batch Conversion Failed',
message: 'Batch conversion failed',
detail: error.message,
buttons: ['OK']
});
}
});
// LibreOffice conversion - returns {command, args} for execFile (safer than exec)
function convertWithLibreOffice(inputFile, outputFormat, outputPath) {
const outputDir = path.dirname(outputPath);
@@ -1717,10 +1972,19 @@ function convertWithPandoc(inputFile, outputPath) {
}
function performExportWithOptions(format, options) {
// Map format names to file extensions
const formatExtMap = {
revealjs: 'html',
beamer: 'pdf',
confluence: 'txt',
jira: 'txt',
};
const fileExt = formatExtMap[format] || format;
const outputFile = dialog.showSaveDialogSync(mainWindow, {
defaultPath: currentFile.replace(/\.[^/.]+$/, `.${format}`),
defaultPath: currentFile.replace(/\.[^/.]+$/, `.${fileExt}`),
filters: [
{ name: format.toUpperCase(), extensions: [format] }
{ name: format.toUpperCase(), extensions: [fileExt] }
]
});
@@ -1851,13 +2115,59 @@ function performExportWithOptions(format, options) {
pandocCmd += ` --variable footer="${footerText}"`;
}
exportWithPandoc(pandocCmd, outputFile, format);
} else if (format === 'json') {
pandocCmd = `${getPandocPath()} "${currentFile}" -t json -o "${outputFile}"`;
exportWithPandoc(pandocCmd, outputFile, format);
} else if (format === 'yaml' || format === 'xml' || format === 'toml') {
// For YAML/XML/TOML, save the raw markdown content with the new extension
try {
const content = fs.readFileSync(currentFile, 'utf-8');
fs.writeFileSync(outputFile, content, 'utf-8');
showExportSuccess(outputFile);
} catch (err) {
dialog.showErrorBox('Export Error', sanitizeErrorMessage(`Failed to export: ${err.message}`));
}
} else if (format === 'revealjs') {
pandocCmd = `${getPandocPath()} "${currentFile}" -t revealjs -s -o "${outputFile}" --slide-level=2`;
exportWithPandoc(pandocCmd, outputFile, format);
} else if (format === 'beamer') {
pandocCmd = `${getPandocPath()} "${currentFile}" -t beamer -o "${outputFile}"`;
exportWithPandoc(pandocCmd, outputFile, format);
} else if (format === 'confluence' || format === 'jira') {
pandocCmd = `${getPandocPath()} "${currentFile}" -t jira -o "${outputFile}"`;
exportWithPandoc(pandocCmd, outputFile, format);
} else if (format === 'mobi') {
// First export to EPUB, then try ebook-convert if available
const epubFile = outputFile.replace(/\.mobi$/i, '.epub');
pandocCmd = `${getPandocPath()} "${currentFile}" -o "${epubFile}"`;
runPandocCmd(pandocCmd, (error) => {
if (error) {
dialog.showErrorBox('Export Error', sanitizeErrorMessage(`Failed to export EPUB intermediate: ${error.message}`));
return;
}
// Try ebook-convert (Calibre) for MOBI
execFile('ebook-convert', [epubFile, outputFile], (ebookError) => {
if (ebookError) {
dialog.showMessageBox(mainWindow, {
type: 'warning',
title: 'MOBI Export - Partial',
message: `Calibre's ebook-convert was not found. The file has been exported as EPUB instead.\n\nEPUB saved to: ${epubFile}\n\nTo get MOBI output, install Calibre from: https://calibre-ebook.com/`,
buttons: ['OK']
});
} else {
// Clean up intermediate EPUB
try { fs.unlinkSync(epubFile); } catch (e) { /* ignore */ }
showExportSuccess(outputFile);
}
});
});
} else {
// Generic export for other formats
exportWithPandoc(pandocCmd, outputFile, format);
}
}).catch((error) => {
console.error('Error checking pandoc availability:', error);
dialog.showErrorBox('Export Error', `Error checking system requirements: ${error.message}`);
dialog.showErrorBox('Export Error', sanitizeErrorMessage(`Error checking system requirements: ${error.message}`));
});
}
@@ -1967,7 +2277,7 @@ function exportWithPandoc(pandocCmd, outputFile, format) {
errorMessage += `\n\nCommand used: ${pandocCmd}`;
dialog.showErrorBox('Export Error', errorMessage);
dialog.showErrorBox('Export Error', sanitizeErrorMessage(errorMessage));
} else {
console.log(`Successfully exported to ${format}:`, outputFile);
console.log(`Pandoc stdout:`, stdout);
@@ -2159,7 +2469,7 @@ function exportToHTML(outputFile) {
showExportSuccess(outputFile);
} catch (error) {
console.error('HTML export error:', error);
dialog.showErrorBox('HTML Export Error', `Failed to export HTML: ${error.message}`);
dialog.showErrorBox('HTML Export Error', sanitizeErrorMessage(`Failed to export HTML: ${error.message}`));
}
}
@@ -2290,14 +2600,14 @@ function exportToPDFElectron(outputFile) {
}).catch((error) => {
pdfWindow.close();
console.error('Electron PDF export error:', error);
dialog.showErrorBox('PDF Export Error',
`Failed to export PDF using built-in engine: ${error.message}\n\n` +
`For better PDF export, please install Pandoc with LaTeX support.`
dialog.showErrorBox('PDF Export Error',
sanitizeErrorMessage(`Failed to export PDF using built-in engine: ${error.message}\n\n` +
`For better PDF export, please install Pandoc with LaTeX support.`)
);
});
} catch (error) {
console.error('PDF export setup error:', error);
dialog.showErrorBox('PDF Export Error', `Failed to setup PDF export: ${error.message}`);
dialog.showErrorBox('PDF Export Error', sanitizeErrorMessage(`Failed to setup PDF export: ${error.message}`));
}
}
@@ -2323,13 +2633,18 @@ function importDocument() {
{ name: 'Web Formats', extensions: ['html', 'htm', 'xhtml'] },
{ name: 'Wiki Formats', extensions: ['mediawiki', 'dokuwiki', 'tikiwiki', 'twiki'] },
{ name: 'CSV/TSV', extensions: ['csv', 'tsv'] },
{ name: 'JSON', extensions: ['json'] },
{ name: 'Developer Formats', extensions: ['json', 'yaml', 'yml', 'xml', 'toml'] },
{ name: 'All Files', extensions: ['*'] }
]
});
if (files && files[0]) {
const inputFile = files[0];
const stats = fs.statSync(inputFile);
if (stats.size > MAX_FILE_SIZE) {
dialog.showErrorBox('File Too Large', `File exceeds the ${MAX_FILE_SIZE_MB}MB size limit.`);
return;
}
const ext = path.extname(inputFile).toLowerCase().slice(1);
const outputFile = inputFile.replace(/\.[^/.]+$/, '.md');
@@ -2351,12 +2666,29 @@ function importDocument() {
additionalOptions = '--from=json -t markdown';
}
// For YAML, XML, TOML - wrap content in code blocks directly
if (['yaml', 'yml', 'xml', 'toml'].includes(ext)) {
const rawContent = fs.readFileSync(inputFile, 'utf-8');
const mdContent = convertDataToMarkdown(rawContent, ext);
const mdOutputFile = inputFile.replace(/\.[^/.]+$/, '.md');
fs.writeFileSync(mdOutputFile, mdContent, 'utf-8');
currentFile = mdOutputFile;
mainWindow.webContents.send('file-opened', { path: mdOutputFile, content: mdContent });
dialog.showMessageBox(mainWindow, {
type: 'info',
title: 'Import Complete',
message: `Document imported successfully as ${path.basename(mdOutputFile)}\n\nOriginal format: ${ext.toUpperCase()}\nConverted to: Markdown`,
buttons: ['OK']
});
return;
}
// Convert to markdown using pandoc (using runPandocCmd for safety)
const pandocCmd = `${getPandocPath()} "${inputFile}" -t markdown ${additionalOptions} -o "${outputFile}"`;
runPandocCmd(pandocCmd, (error, stdout, stderr) => {
if (error) {
dialog.showErrorBox('Import Error', `Failed to import: ${error.message}\n\nMake sure Pandoc is installed.\n\nSupported formats: DOCX, ODT, RTF, HTML, LaTeX, EPUB, PDF, PPTX, ODP, RST, Textile, MediaWiki, Org-mode, AsciiDoc, CSV, and more.`);
dialog.showErrorBox('Import Error', sanitizeErrorMessage(`Failed to import: ${error.message}\n\nMake sure Pandoc is installed.\n\nSupported formats: DOCX, ODT, RTF, HTML, LaTeX, EPUB, PDF, PPTX, ODP, RST, Textile, MediaWiki, Org-mode, AsciiDoc, CSV, and more.`));
} else {
// Open the converted markdown file
currentFile = outputFile;
@@ -2418,6 +2750,32 @@ ipcMain.on('do-print', (event, { withStyles }) => {
}
});
// Handle printing with custom options from print preview dialog
ipcMain.on('do-print-with-options', (event, options) => {
if (!mainWindow) return;
const marginsMap = {
'default': { marginType: 'default' },
'narrow': { top: 0.4, bottom: 0.4, left: 0.4, right: 0.4 },
'wide': { top: 1.0, bottom: 1.0, left: 1.0, right: 1.0 },
'none': { top: 0, bottom: 0, left: 0, right: 0 },
};
const printOptions = {
silent: false,
printBackground: options.background,
landscape: options.orientation === 'landscape',
scaleFactor: options.scale / 100,
pageSize: options.paperSize,
};
if (options.margins && options.margins !== 'default') {
printOptions.margins = marginsMap[options.margins];
}
mainWindow.webContents.print(printOptions);
});
// Handle renderer ready for file association
ipcMain.on('renderer-ready', (event) => {
console.log('[MAIN] renderer-ready received, rendererReady was:', rendererReady);
@@ -2441,11 +2799,19 @@ ipcMain.on('renderer-ready', (event) => {
// Handle export with options
ipcMain.on('export-with-options', (event, { format, options }) => {
if (!conversionLimiter()) {
mainWindow.webContents.send('conversion-status', 'Please wait before converting again...');
return;
}
performExportWithOptions(format, options);
});
// Handle batch conversion
ipcMain.on('batch-convert', (event, { inputFolder, outputFolder, format, options }) => {
if (!conversionLimiter()) {
mainWindow.webContents.send('conversion-status', 'Please wait before converting again...');
return;
}
performBatchConversion(inputFolder, outputFolder, format, options);
});
@@ -2506,7 +2872,7 @@ ipcMain.on('export-spreadsheet', (event, { content, format }) => {
buttons: ['OK']
});
} catch (error) {
dialog.showErrorBox('Export Error', `Failed to export: ${error.message}`);
dialog.showErrorBox('Export Error', sanitizeErrorMessage(`Failed to export: ${error.message}`));
}
}
});
@@ -2564,7 +2930,7 @@ function performBatchConversion(inputFolder, outputFolder, format, options) {
try {
fs.mkdirSync(outputFolder, { recursive: true });
} catch (error) {
dialog.showErrorBox('Error', `Failed to create output folder: ${error.message}`);
dialog.showErrorBox('Error', sanitizeErrorMessage(`Failed to create output folder: ${error.message}`));
return;
}
}
@@ -3077,6 +3443,36 @@ function buildPandocCommand(content, format, outputPath) {
command += ` --variable footer="${footerText}"`;
}
break;
case 'json':
command = `pandoc "${inputFile}" -t json -o "${outputPath}"`;
break;
case 'yaml':
command = `pandoc "${inputFile}" -t markdown -o "${outputPath}"`;
break;
case 'xml':
command = `pandoc "${inputFile}" -t jats -o "${outputPath}"`;
break;
case 'toml':
// TOML: save raw markdown content with .toml extension
command = `pandoc "${inputFile}" -t markdown -o "${outputPath}"`;
break;
case 'revealjs':
command = `pandoc "${inputFile}" -t revealjs -s -o "${outputPath}" --slide-level=2`;
break;
case 'beamer':
command = `pandoc "${inputFile}" -t beamer -o "${outputPath}"`;
break;
case 'confluence':
case 'jira':
command = `pandoc "${inputFile}" -t jira -o "${outputPath}"`;
break;
}
return command;
@@ -3192,6 +3588,11 @@ function openFileFromPath(filePath) {
console.log('[MAIN] openFileFromPath called with:', filePath);
console.log('[MAIN] rendererReady:', rendererReady, 'mainWindow exists:', !!mainWindow);
if (fs.existsSync(filePath)) {
const stats = fs.statSync(filePath);
if (stats.size > MAX_FILE_SIZE) {
dialog.showErrorBox('File Too Large', `File exceeds the ${MAX_FILE_SIZE_MB}MB size limit.`);
return;
}
currentFile = filePath;
const content = fs.readFileSync(filePath, 'utf-8');
console.log('[MAIN] File read successfully, content length:', content.length);
@@ -3787,9 +4188,209 @@ ipcMain.on('open-table-generator', () => {
openTableGenerator();
});
// IPC Handler for loading document templates
ipcMain.handle('load-template', async (event, filename) => {
try {
const templatePath = path.join(__dirname, 'templates', filename);
return fs.readFileSync(templatePath, 'utf-8');
} catch (err) {
console.error('Failed to load template:', err);
return null;
}
});
// IPC Handler for saving pasted/dropped images
ipcMain.handle('save-pasted-image', async (event, { base64, ext }) => {
try {
let saveDir;
if (currentFile) {
// Save relative to current file
saveDir = path.join(path.dirname(currentFile), 'assets');
} else {
// Use temp directory
saveDir = path.join(app.getPath('temp'), 'markdown-converter-images');
}
if (!fs.existsSync(saveDir)) {
fs.mkdirSync(saveDir, { recursive: true });
}
const filename = `image-${Date.now()}.${ext}`;
const filePath = path.join(saveDir, filename);
const buffer = Buffer.from(base64, 'base64');
fs.writeFileSync(filePath, buffer);
return { relativePath: `assets/${filename}`, absolutePath: filePath };
} catch (error) {
console.error('Failed to save pasted image:', error);
return null;
}
});
// IPC Handler to receive generated content from generator windows
ipcMain.on('insert-generated-content', (event, content) => {
if (mainWindow && !mainWindow.isDestroyed()) {
mainWindow.webContents.send('insert-content', content);
}
});
// ============================================
// File Explorer IPC Handlers
// ============================================
ipcMain.handle('list-directory', async (event, dirPath) => {
try {
if (!dirPath) {
const result = await dialog.showOpenDialog(mainWindow, {
properties: ['openDirectory']
});
if (result.canceled || !result.filePaths[0]) return null;
dirPath = result.filePaths[0];
}
const entries = fs.readdirSync(dirPath, { withFileTypes: true })
.filter(e => !e.name.startsWith('.'))
.sort((a, b) => {
if (a.isDirectory() && !b.isDirectory()) return -1;
if (!a.isDirectory() && b.isDirectory()) return 1;
return a.name.localeCompare(b.name);
})
.map(e => ({
name: e.name,
isDirectory: e.isDirectory(),
path: path.join(dirPath, e.name)
}));
return { path: dirPath, entries };
} catch (err) {
console.error('list-directory error:', err);
return null;
}
});
// Open a file by path (from explorer panel)
ipcMain.on('open-file-path', (event, filePath) => {
try {
if (!fs.existsSync(filePath)) return;
const stat = fs.statSync(filePath);
if (stat.size > MAX_FILE_SIZE) return;
currentFile = filePath;
const content = fs.readFileSync(filePath, 'utf-8');
mainWindow.webContents.send('file-opened', { path: filePath, content });
} catch (err) {
console.error('open-file-path error:', err);
}
});
// ============================================
// Git IPC Handlers
// ============================================
const simpleGit = require('simple-git');
function getGitRepo() {
// Use the directory of the current file, or the app's working directory
const dir = currentFile ? path.dirname(currentFile) : process.cwd();
return simpleGit(dir);
}
ipcMain.handle('git-status', async () => {
try {
const git = getGitRepo();
return await git.status();
} catch (err) {
return { error: 'Not a git repository' };
}
});
ipcMain.handle('git-stage', async (event, { files }) => {
try {
const git = getGitRepo();
await git.add(files);
return await git.status();
} catch (err) {
return { error: err.message };
}
});
ipcMain.handle('git-commit', async (event, { message }) => {
try {
const git = getGitRepo();
return await git.commit(message);
} catch (err) {
return { error: err.message };
}
});
ipcMain.handle('git-log', async () => {
try {
const git = getGitRepo();
return await git.log({ maxCount: 20 });
} catch (err) {
return { error: err.message };
}
});
// ============================================
// Snippets IPC Handlers
// ============================================
const snippetsPath = path.join(app.getPath('userData'), 'snippets.json');
function loadSnippets() {
try {
if (fs.existsSync(snippetsPath)) {
return JSON.parse(fs.readFileSync(snippetsPath, 'utf-8'));
}
} catch (err) { console.error('Failed to load snippets:', err); }
return [];
}
function saveSnippetsFile(snippets) {
fs.writeFileSync(snippetsPath, JSON.stringify(snippets, null, 2));
}
ipcMain.handle('get-snippets', async () => loadSnippets());
ipcMain.handle('save-snippet', async (event, snippet) => {
const snippets = loadSnippets();
const existing = snippets.findIndex(s => s.id === snippet.id);
if (existing >= 0) snippets[existing] = snippet;
else snippets.push(snippet);
saveSnippetsFile(snippets);
return snippets;
});
ipcMain.handle('delete-snippet', async (event, id) => {
const snippets = loadSnippets().filter(s => s.id !== id);
saveSnippetsFile(snippets);
return snippets;
});
// ============================================
// Code Execution (REPL) IPC Handler
// ============================================
ipcMain.handle('execute-code', async (event, { code, language }) => {
const timeout = 10000;
return new Promise((resolve) => {
let cmd, args;
if (language === 'javascript' || language === 'js') {
cmd = 'node';
args = ['-e', code];
} else if (language === 'python' || language === 'py') {
cmd = process.platform === 'win32' ? 'python' : 'python3';
args = ['-c', code];
} else if (language === 'bash' || language === 'sh') {
cmd = process.platform === 'win32' ? 'cmd' : 'bash';
args = process.platform === 'win32' ? ['/c', code] : ['-c', code];
} else {
resolve({ error: `Unsupported language: ${language}` });
return;
}
execFile(cmd, args, { timeout, maxBuffer: 1024 * 1024 }, (err, stdout, stderr) => {
resolve({
stdout: stdout || '',
stderr: stderr || '',
error: err?.killed ? 'Execution timed out (10s limit)' : (err?.message || null)
});
});
});
});
+49 -3
View File
@@ -9,7 +9,7 @@
* - All IPC channels are explicitly whitelisted
* - Prevents XSS from escalating to full system access
*
* @version 2.2.0
* @version 4.0.0
*/
const { contextBridge, ipcRenderer } = require('electron');
@@ -29,6 +29,7 @@ const ALLOWED_SEND_CHANNELS = [
// Print
'do-print',
'do-print-with-options',
// Export
'export-with-options',
@@ -90,7 +91,43 @@ const ALLOWED_SEND_CHANNELS = [
'open-table-generator',
// Insert generated content
'insert-generated-content'
'insert-generated-content',
// Image paste/drop
'save-pasted-image',
// Templates
'load-template',
// File Explorer
'list-directory',
// Git
'git-status',
'git-stage',
'git-commit',
'git-log',
// Snippets
'get-snippets',
'save-snippet',
'delete-snippet',
// Code execution (REPL)
'execute-code',
// File open by path
'open-file-path',
// PDF editor from toolbar
'show-pdf-editor-from-toolbar',
// Menu triggers
'menu-open',
'export',
// Git diff
'git-diff'
];
const ALLOWED_RECEIVE_CHANNELS = [
@@ -176,7 +213,16 @@ const ALLOWED_RECEIVE_CHANNELS = [
'pdf-operation-progress',
// Insert content from generator windows
'insert-content'
'insert-content',
// Batch converter
'show-batch-converter',
// v4 menu-triggered events
'load-template-menu',
'toggle-command-palette',
'toggle-sidebar-panel',
'toggle-bottom-panel'
];
/**
+139
View File
@@ -0,0 +1,139 @@
class PrintPreview {
constructor() {
this.overlay = document.getElementById('print-preview-overlay');
this._lastContent = '';
this.setupEventListeners();
}
open(htmlContent) {
this._lastContent = htmlContent;
this.overlay.classList.remove('hidden');
this.updatePreview(htmlContent);
this.updateScaleLabel();
}
close() {
this.overlay.classList.add('hidden');
}
setupEventListeners() {
document.getElementById('print-preview-close')?.addEventListener('click', () => this.close());
document.getElementById('print-cancel')?.addEventListener('click', () => this.close());
document.getElementById('print-execute')?.addEventListener('click', () => this.executePrint());
// Update preview on option changes
['print-paper-size', 'print-orientation', 'print-margins'].forEach(id => {
document.getElementById(id)?.addEventListener('change', () => this.refreshPreview());
});
// Scale slider
const scaleSlider = document.getElementById('print-scale');
scaleSlider?.addEventListener('input', () => this.updateScaleLabel());
// Page range toggle
document.getElementById('print-pages')?.addEventListener('change', (e) => {
const rangeInput = document.getElementById('print-page-range');
if (rangeInput) {
rangeInput.classList.toggle('hidden', e.target.value !== 'custom');
}
});
// Close on overlay click
this.overlay?.addEventListener('click', (e) => {
if (e.target === this.overlay) this.close();
});
// Close on Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !this.overlay.classList.contains('hidden')) {
this.close();
}
});
}
updateScaleLabel() {
const scale = document.getElementById('print-scale')?.value || 100;
const label = document.getElementById('print-scale-value');
if (label) label.textContent = `${scale}%`;
}
updatePreview(htmlContent) {
const frame = document.getElementById('print-preview-frame');
if (!frame) return;
this._lastContent = htmlContent;
const orientation = document.getElementById('print-orientation')?.value || 'portrait';
const paperSize = document.getElementById('print-paper-size')?.value || 'A4';
// Get dimensions for paper size
const sizes = {
'A3': { width: '297mm', height: '420mm' },
'A4': { width: '210mm', height: '297mm' },
'A5': { width: '148mm', height: '210mm' },
'Letter': { width: '8.5in', height: '11in' },
'Legal': { width: '8.5in', height: '14in' },
'Tabloid': { width: '11in', height: '17in' },
};
const size = sizes[paperSize] || sizes['A4'];
const width = orientation === 'landscape' ? size.height : size.width;
const height = orientation === 'landscape' ? size.width : size.height;
const previewHtml = `
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
line-height: 1.6;
}
@page { size: ${width} ${height}; }
pre { background: #f5f5f5; padding: 12px; border-radius: 6px; overflow-x: auto; }
code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 13px; }
pre code { background: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px; }
blockquote { border-left: 4px solid #ddd; margin-left: 0; padding-left: 16px; color: #666; }
img { max-width: 100%; }
h1, h2, h3 { margin-top: 1.5em; }
</style>
</head>
<body>${htmlContent || ''}</body>
</html>
`;
frame.srcdoc = previewHtml;
}
refreshPreview() {
if (this._lastContent) {
this.updatePreview(this._lastContent);
}
}
getOptions() {
return {
paperSize: document.getElementById('print-paper-size')?.value || 'A4',
orientation: document.getElementById('print-orientation')?.value || 'portrait',
margins: document.getElementById('print-margins')?.value || 'default',
scale: parseInt(document.getElementById('print-scale')?.value || '100'),
headers: document.getElementById('print-headers')?.checked ?? true,
background: document.getElementById('print-background')?.checked ?? true,
pages: document.getElementById('print-pages')?.value || 'all',
pageRange: document.getElementById('print-page-range')?.value || '',
};
}
executePrint() {
const options = this.getOptions();
const { ipcRenderer } = require('electron');
ipcRenderer.send('do-print-with-options', options);
this.close();
}
}
module.exports = { PrintPreview };
+654 -723
View File
File diff suppressed because it is too large Load Diff
+49
View File
@@ -0,0 +1,49 @@
class ReplPanel {
constructor() {
this.panel = document.getElementById('bottom-panel');
this.output = document.getElementById('repl-output');
this.setupEventListeners();
}
setupEventListeners() {
document.getElementById('bottom-panel-toggle')?.addEventListener('click', () => this.toggle());
document.getElementById('repl-clear')?.addEventListener('click', () => this.clear());
}
toggle() {
this.panel.classList.toggle('collapsed');
const btn = document.getElementById('bottom-panel-toggle');
if (btn) btn.textContent = this.panel.classList.contains('collapsed') ? '\u25BC' : '\u25B2';
}
show() {
this.panel.classList.remove('collapsed');
const btn = document.getElementById('bottom-panel-toggle');
if (btn) btn.textContent = '\u25B2';
}
clear() {
if (this.output) this.output.innerHTML = '';
}
appendOutput(command, result) {
const entry = document.createElement('div');
entry.className = 'repl-entry';
entry.innerHTML = `
<div class="repl-command">\u25B6 ${command}</div>
${result.stdout ? `<div class="repl-stdout">${this.escapeHtml(result.stdout)}</div>` : ''}
${result.stderr ? `<div class="repl-stderr">${this.escapeHtml(result.stderr)}</div>` : ''}
${result.error ? `<div class="repl-error">Error: ${this.escapeHtml(result.error)}</div>` : ''}
`;
this.output?.appendChild(entry);
this.output?.scrollTo(0, this.output.scrollHeight);
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
}
module.exports = { ReplPanel };
+70
View File
@@ -0,0 +1,70 @@
const path = require('path');
function renderExplorerPanel(container, { listDirectory, onFileOpen, currentDir }) {
container.innerHTML = `
<div class="explorer-panel">
<div class="explorer-toolbar">
<input type="text" class="explorer-path" id="explorer-path" value="${currentDir || ''}" placeholder="Open a folder..." readonly>
<button class="explorer-browse-btn" id="explorer-browse" title="Browse folder">&#x1F4C2;</button>
</div>
<div class="explorer-tree" id="explorer-tree"></div>
</div>
`;
document.getElementById('explorer-browse')?.addEventListener('click', async () => {
const dir = await listDirectory(null); // null means open folder dialog
if (dir) {
document.getElementById('explorer-path').value = dir.path;
renderTree(document.getElementById('explorer-tree'), dir.entries, listDirectory, onFileOpen, dir.path);
}
});
if (currentDir) {
listDirectory(currentDir).then(dir => {
if (dir) renderTree(document.getElementById('explorer-tree'), dir.entries, listDirectory, onFileOpen, currentDir);
});
}
}
function renderTree(container, entries, listDirectory, onFileOpen, basePath) {
container.innerHTML = entries.map(entry => {
if (entry.isDirectory) {
return `<div class="tree-item tree-folder collapsed" data-path="${entry.path}">
<span class="tree-icon">&#x25B6;</span>
<span class="tree-name">${entry.name}</span>
<div class="tree-children"></div>
</div>`;
}
return `<div class="tree-item tree-file" data-path="${entry.path}">
<span class="tree-icon">${getFileIcon(entry.name)}</span>
<span class="tree-name">${entry.name}</span>
</div>`;
}).join('');
container.querySelectorAll('.tree-folder').forEach(el => {
el.querySelector('.tree-name').addEventListener('click', async () => {
const isCollapsed = el.classList.contains('collapsed');
if (isCollapsed) {
const dir = await listDirectory(el.dataset.path);
if (dir) {
const childContainer = el.querySelector('.tree-children');
renderTree(childContainer, dir.entries, listDirectory, onFileOpen, el.dataset.path);
}
}
el.classList.toggle('collapsed');
el.querySelector('.tree-icon').textContent = el.classList.contains('collapsed') ? '\u25B6' : '\u25BC';
});
});
container.querySelectorAll('.tree-file').forEach(el => {
el.addEventListener('click', () => onFileOpen(el.dataset.path));
});
}
function getFileIcon(filename) {
const ext = filename.split('.').pop().toLowerCase();
const icons = { md: '\u{1F4DD}', js: '\u{1F4DC}', json: '{}', html: '\u{1F310}', css: '\u{1F3A8}', py: '\u{1F40D}', pdf: '\u{1F4D5}', txt: '\u{1F4C4}' };
return icons[ext] || '\u{1F4C4}';
}
module.exports = { renderExplorerPanel };
+84
View File
@@ -0,0 +1,84 @@
function renderGitPanel(container, { gitStatus, gitDiff, gitStage, gitCommit, gitLog }) {
container.innerHTML = `
<div class="git-panel">
<div class="git-section">
<h4 class="git-section-title">Changes</h4>
<div class="git-changes" id="git-changes">
<p class="git-loading">Loading...</p>
</div>
</div>
<div class="git-section">
<h4 class="git-section-title">Commit</h4>
<textarea class="git-commit-input" id="git-commit-msg" placeholder="Commit message..." rows="3"></textarea>
<button class="git-commit-btn" id="git-commit-btn">Commit</button>
</div>
<div class="git-section">
<h4 class="git-section-title">Recent Commits</h4>
<div class="git-log" id="git-log"></div>
</div>
</div>
`;
loadGitStatus();
async function loadGitStatus() {
const status = await gitStatus();
const changesEl = document.getElementById('git-changes');
if (!status || !changesEl) return;
if (status.error) {
changesEl.innerHTML = `<p class="git-info">${status.error}</p>`;
return;
}
const files = [
...status.modified.map(f => ({ file: f, status: 'M', color: '#f59e0b' })),
...status.not_added.map(f => ({ file: f, status: '?', color: '#6b7280' })),
...status.created.map(f => ({ file: f, status: 'A', color: '#10b981' })),
...status.deleted.map(f => ({ file: f, status: 'D', color: '#ef4444' })),
...status.staged.map(f => ({ file: f, status: 'S', color: '#3b82f6' })),
];
if (files.length === 0) {
changesEl.innerHTML = '<p class="git-info">No changes</p>';
} else {
changesEl.innerHTML = files.map(f => `
<div class="git-file" data-file="${f.file}">
<span class="git-file-status" style="color:${f.color}">${f.status}</span>
<span class="git-file-name">${f.file}</span>
<button class="git-stage-btn" data-file="${f.file}" title="Stage file">+</button>
</div>
`).join('');
changesEl.querySelectorAll('.git-stage-btn').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.stopPropagation();
await gitStage([btn.dataset.file]);
loadGitStatus();
});
});
}
// Load log
const log = await gitLog();
const logEl = document.getElementById('git-log');
if (log && logEl) {
logEl.innerHTML = (log.all || []).slice(0, 10).map(entry => `
<div class="git-log-entry">
<div class="git-log-msg">${entry.message}</div>
<div class="git-log-meta">${entry.date?.substring(0, 10) || ''} &middot; ${entry.author_name || ''}</div>
</div>
`).join('') || '<p class="git-info">No commits</p>';
}
}
document.getElementById('git-commit-btn')?.addEventListener('click', async () => {
const msg = document.getElementById('git-commit-msg')?.value?.trim();
if (!msg) return;
await gitCommit(msg);
document.getElementById('git-commit-msg').value = '';
loadGitStatus();
});
}
module.exports = { renderGitPanel };
+50
View File
@@ -0,0 +1,50 @@
class SidebarManager {
constructor() {
this.sidebar = document.getElementById('sidebar');
this.panelContent = document.getElementById('sidebar-panel-content');
this.panelTitle = document.querySelector('.sidebar-panel-title');
this.activePanel = null;
this.panels = new Map();
this.setupEventListeners();
}
setupEventListeners() {
document.querySelectorAll('.sidebar-icon').forEach(btn => {
btn.addEventListener('click', () => this.togglePanel(btn.dataset.panel));
});
document.querySelector('.sidebar-panel-close')?.addEventListener('click', () => this.collapse());
}
registerPanel(name, { title, render }) {
this.panels.set(name, { title, render });
}
togglePanel(name) {
if (this.activePanel === name) {
this.collapse();
} else {
this.expand(name);
}
}
expand(name) {
const panel = this.panels.get(name);
if (!panel) return;
this.sidebar.classList.remove('collapsed');
this.panelTitle.textContent = panel.title;
this.panelContent.innerHTML = '';
panel.render(this.panelContent);
this.activePanel = name;
document.querySelectorAll('.sidebar-icon').forEach(btn => {
btn.classList.toggle('active', btn.dataset.panel === name);
});
}
collapse() {
this.sidebar.classList.add('collapsed');
this.activePanel = null;
document.querySelectorAll('.sidebar-icon').forEach(btn => btn.classList.remove('active'));
}
}
module.exports = { SidebarManager };
+71
View File
@@ -0,0 +1,71 @@
function renderSnippetsPanel(container, { getSnippets, saveSnippet, deleteSnippet, onInsert }) {
container.innerHTML = `
<div class="snippets-panel">
<div class="snippets-toolbar">
<input type="text" class="snippets-search" id="snippets-search" placeholder="Search snippets...">
<button class="snippets-add-btn" id="snippets-add" title="Add snippet">+</button>
</div>
<div class="snippets-list" id="snippets-list"></div>
</div>
`;
let snippets = [];
async function loadSnippets() {
snippets = await getSnippets() || [];
renderList(document.getElementById('snippets-search')?.value || '');
}
function renderList(query) {
const list = document.getElementById('snippets-list');
if (!list) return;
const filtered = query
? snippets.filter(s => s.name.toLowerCase().includes(query.toLowerCase()) || (s.language || '').toLowerCase().includes(query.toLowerCase()))
: snippets;
list.innerHTML = filtered.length ? filtered.map(s => `
<div class="snippet-item" data-id="${s.id}">
<div class="snippet-header">
<span class="snippet-name">${s.name}</span>
<span class="snippet-lang">${s.language || 'text'}</span>
</div>
<pre class="snippet-preview"><code>${(s.code || '').substring(0, 100)}${(s.code || '').length > 100 ? '...' : ''}</code></pre>
<div class="snippet-actions">
<button class="snippet-insert" data-id="${s.id}" title="Insert">Insert</button>
<button class="snippet-delete" data-id="${s.id}" title="Delete">&times;</button>
</div>
</div>
`).join('') : '<p class="git-info">No snippets yet. Click + to add one.</p>';
list.querySelectorAll('.snippet-insert').forEach(btn => {
btn.addEventListener('click', () => {
const s = snippets.find(sn => sn.id === btn.dataset.id);
if (s) onInsert(s.code);
});
});
list.querySelectorAll('.snippet-delete').forEach(btn => {
btn.addEventListener('click', async () => {
await deleteSnippet(btn.dataset.id);
loadSnippets();
});
});
}
document.getElementById('snippets-search')?.addEventListener('input', (e) => renderList(e.target.value));
document.getElementById('snippets-add')?.addEventListener('click', () => {
const name = prompt('Snippet name:');
if (!name) return;
const language = prompt('Language (e.g., javascript, python, html):') || 'text';
const code = prompt('Paste your code snippet:');
if (!code) return;
saveSnippet({ id: Date.now().toString(), name, language, code }).then(() => loadSnippets());
});
loadSnippets();
}
module.exports = { renderSnippetsPanel };
+34
View File
@@ -0,0 +1,34 @@
const fs = require('fs');
const path = require('path');
const templates = [
{ name: 'Blog Post', file: 'blog-post.md', description: 'Article with frontmatter' },
{ name: 'Meeting Notes', file: 'meeting-notes.md', description: 'Agenda, notes, action items' },
{ name: 'Technical Spec', file: 'technical-spec.md', description: 'Requirements and architecture' },
{ name: 'Changelog', file: 'changelog.md', description: 'Keep a Changelog format' },
{ name: 'README', file: 'readme.md', description: 'Project documentation' },
{ name: 'Project Plan', file: 'project-plan.md', description: 'Goals, milestones, timeline' },
{ name: 'API Docs', file: 'api-docs.md', description: 'API endpoint documentation' },
{ name: 'Tutorial', file: 'tutorial.md', description: 'Step-by-step guide' },
{ name: 'Release Notes', file: 'release-notes.md', description: 'Version release summary' },
{ name: 'Comparison', file: 'comparison.md', description: 'Feature comparison table' },
];
function renderTemplatesPanel(container, onSelect) {
container.innerHTML = `
<div class="panel-list">
${templates.map(t => `
<div class="panel-list-item template-item" data-file="${t.file}">
<div class="panel-list-item-title">${t.name}</div>
<div class="panel-list-item-desc">${t.description}</div>
</div>
`).join('')}
</div>
`;
container.querySelectorAll('.template-item').forEach(el => {
el.addEventListener('click', () => onSelect(el.dataset.file));
});
}
module.exports = { renderTemplatesPanel, templates };
+223 -1
View File
@@ -290,6 +290,20 @@ body {
/* Color controlled by theme */
}
/* CodeMirror container */
.codemirror-container {
height: 100%;
overflow: auto;
}
.codemirror-container .cm-editor {
height: 100%;
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
font-size: 14px;
}
.codemirror-container .cm-scroller {
overflow: auto;
}
.pane:last-child {
padding: 0;
/* Background controlled by theme */
@@ -309,10 +323,12 @@ body {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px;
padding: 2px 12px;
/* Background and color controlled by theme */
font-size: 12px;
font-weight: 500;
min-height: 24px;
flex-shrink: 0;
}
/* Preview Styles - Modern Typography */
@@ -2111,3 +2127,209 @@ body.theme-rosepine-dawn .batch-dialog-footer {
background: #f2e9e1;
border-top-color: #dfdad9;
}
/* ========================================
Command Palette (Ctrl+Shift+P)
======================================== */
.command-palette-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1000;
display: flex;
justify-content: center;
padding-top: 80px;
}
.command-palette-overlay.hidden {
display: none;
}
.command-palette {
width: 560px;
max-height: 400px;
background: #fff;
border-radius: 12px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
overflow: hidden;
display: flex;
flex-direction: column;
}
.command-palette-input {
width: 100%;
padding: 14px 18px;
border: none;
outline: none;
font-size: 15px;
border-bottom: 1px solid #e5e7eb;
font-family: inherit;
}
.command-palette-results {
overflow-y: auto;
max-height: 340px;
}
.command-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 18px;
cursor: pointer;
font-size: 14px;
}
.command-item:hover,
.command-item.selected {
background: #f3f4f6;
}
.command-label strong {
color: #5661b3;
}
.command-shortcut {
font-size: 12px;
color: #9ca3af;
background: #f3f4f6;
padding: 2px 8px;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
}
/* Dark theme command palette */
body[class*="dark"] .command-palette {
background: #1e1e1e;
border: 1px solid #333;
}
body[class*="dark"] .command-palette-input {
background: #1e1e1e;
color: #eee;
border-color: #333;
}
body[class*="dark"] .command-item:hover,
body[class*="dark"] .command-item.selected {
background: #2d2d2d;
}
body[class*="dark"] .command-shortcut {
background: #333;
color: #888;
}
/* ========================================
Breadcrumb Bar
======================================== */
.breadcrumb-bar {
padding: 4px 12px;
font-size: 12px;
color: var(--gray-500, #6b7280);
border-bottom: 1px solid var(--gray-200, #e5e7eb);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
background: var(--gray-50, #f9fafb);
font-family: 'JetBrains Mono', monospace;
}
body[class*="dark"] .breadcrumb-bar {
background: #1a1a1a;
color: #888;
border-color: #333;
}
/* Print Preview Dialog */
.print-preview-dialog {
width: 90vw;
max-width: 1200px;
height: 80vh;
display: flex;
flex-direction: column;
}
.print-preview-body {
display: flex;
flex: 1;
overflow: hidden;
}
.print-preview-sidebar {
width: 260px;
padding: 16px;
border-right: 1px solid var(--gray-200, #e5e7eb);
overflow-y: auto;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.print-preview-content {
flex: 1;
padding: 16px;
background: #e5e7eb;
display: flex;
justify-content: center;
overflow: auto;
}
.print-preview-content iframe {
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
border-radius: 4px;
}
.print-option-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.print-option-group label {
font-size: 13px;
font-weight: 500;
color: var(--gray-600, #4b5563);
}
.print-option-group select,
.print-option-group input[type="text"] {
padding: 8px 10px;
border: 1px solid var(--gray-300, #d1d5db);
border-radius: 8px;
font-size: 13px;
background: white;
}
.scale-control {
display: flex;
align-items: center;
gap: 8px;
}
.scale-control input[type="range"] {
flex: 1;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.print-range-input {
margin-top: 6px;
}
.print-actions {
display: flex;
gap: 8px;
margin-top: auto;
padding-top: 16px;
}
.btn-primary {
flex: 1;
padding: 10px;
background: var(--primary-dark, #5661b3);
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.btn-primary:hover {
opacity: 0.9;
}
.btn-secondary {
flex: 1;
padding: 10px;
background: var(--gray-100, #f3f4f6);
color: var(--gray-700, #374151);
border: 1px solid var(--gray-300, #d1d5db);
border-radius: 8px;
font-size: 14px;
cursor: pointer;
}
+268
View File
@@ -0,0 +1,268 @@
/* Sidebar */
.main-content {
display: flex;
flex: 1;
overflow: hidden;
min-height: 0;
}
.sidebar {
display: flex;
flex-shrink: 0;
height: 100%;
transition: width 0.2s ease;
}
.sidebar.collapsed {
width: 48px;
}
.sidebar:not(.collapsed) {
width: 328px; /* 48px icons + 280px panel */
}
.sidebar-icons {
display: flex;
flex-direction: column;
width: 48px;
background: var(--gray-100, #f3f4f6);
border-right: 1px solid var(--gray-200, #e5e7eb);
padding: 8px 0;
gap: 4px;
align-items: center;
}
.sidebar-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
color: var(--gray-500, #6b7280);
transition: all 0.15s ease;
}
.sidebar-icon:hover {
background: var(--gray-200, #e5e7eb);
color: var(--gray-700, #374151);
}
.sidebar-icon.active {
background: var(--gray-200, #e5e7eb);
color: var(--primary-dark, #5661b3);
box-shadow: inset 3px 0 0 var(--primary-dark, #5661b3);
}
.sidebar-panel {
width: 280px;
background: var(--gray-50, #f9fafb);
border-right: 1px solid var(--gray-200, #e5e7eb);
display: flex;
flex-direction: column;
overflow: hidden;
}
.sidebar.collapsed .sidebar-panel {
display: none;
}
.sidebar-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--gray-200, #e5e7eb);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--gray-600, #4b5563);
}
.sidebar-panel-close {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
color: var(--gray-400, #9ca3af);
padding: 0 4px;
border-radius: 4px;
}
.sidebar-panel-close:hover {
background: var(--gray-200, #e5e7eb);
color: var(--gray-600, #4b5563);
}
.sidebar-panel-content {
flex: 1;
overflow-y: auto;
padding: 12px;
}
/* Dark theme support */
body[class*="dark"] .sidebar-icons,
body[class*="dark"] .sidebar-panel {
background: #1e1e1e;
border-color: #333;
}
body[class*="dark"] .sidebar-icon {
color: #888;
}
body[class*="dark"] .sidebar-icon:hover {
background: #333;
color: #ccc;
}
body[class*="dark"] .sidebar-icon.active {
background: #333;
color: #8b9aff;
box-shadow: inset 3px 0 0 #8b9aff;
}
body[class*="dark"] .sidebar-panel-header {
border-color: #333;
color: #ccc;
}
/* Panel list items (templates, etc.) */
.panel-list-item {
padding: 10px 12px;
border-radius: 6px;
cursor: pointer;
margin-bottom: 4px;
}
.panel-list-item:hover {
background: var(--gray-200, #e5e7eb);
}
.panel-list-item-title {
font-size: 13px;
font-weight: 500;
color: var(--gray-800, #1f2937);
}
.panel-list-item-desc {
font-size: 11px;
color: var(--gray-500, #6b7280);
margin-top: 2px;
}
body[class*="dark"] .panel-list-item:hover {
background: #333;
}
body[class*="dark"] .panel-list-item-title {
color: #ddd;
}
body[class*="dark"] .panel-list-item-desc {
color: #888;
}
/* Explorer Panel */
.explorer-toolbar {
display: flex;
gap: 4px;
margin-bottom: 8px;
}
.explorer-path {
flex: 1;
padding: 6px 8px;
border: 1px solid var(--gray-300, #d1d5db);
border-radius: 6px;
font-size: 12px;
background: white;
overflow: hidden;
text-overflow: ellipsis;
}
.explorer-browse-btn {
border: 1px solid var(--gray-300, #d1d5db);
border-radius: 6px;
background: white;
cursor: pointer;
padding: 4px 8px;
}
.tree-item {
padding: 3px 0;
cursor: pointer;
font-size: 13px;
user-select: none;
}
.tree-item:hover {
background: var(--gray-100, #f3f4f6);
border-radius: 4px;
}
.tree-icon {
margin-right: 4px;
font-size: 12px;
}
.tree-children {
padding-left: 16px;
}
.tree-folder.collapsed .tree-children {
display: none;
}
.tree-name {
font-size: 13px;
}
/* Git Panel */
.git-section { margin-bottom: 16px; }
.git-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin-bottom: 8px; }
.git-file { display: flex; align-items: center; padding: 4px 6px; border-radius: 4px; font-size: 13px; gap: 6px; }
.git-file:hover { background: var(--gray-100, #f3f4f6); }
.git-file-status { font-weight: 700; font-family: monospace; width: 16px; text-align: center; }
.git-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.git-stage-btn { border: none; background: var(--gray-200); border-radius: 4px; cursor: pointer; font-size: 14px; width: 22px; height: 22px; }
.git-commit-input { width: 100%; padding: 8px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical; box-sizing: border-box; }
.git-commit-btn { width: 100%; margin-top: 8px; padding: 8px; background: var(--primary-dark, #5661b3); color: white; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; }
.git-commit-btn:hover { opacity: 0.9; }
.git-log-entry { padding: 6px 0; border-bottom: 1px solid var(--gray-100); }
.git-log-msg { font-size: 13px; }
.git-log-meta { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
.git-info { font-size: 13px; color: var(--gray-500); padding: 8px 0; }
.git-loading { font-size: 13px; color: var(--gray-400); }
/* Snippets Panel */
.snippets-toolbar { display: flex; gap: 4px; margin-bottom: 8px; }
.snippets-search { flex: 1; padding: 6px 10px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px; }
.snippets-add-btn { width: 32px; border: 1px solid var(--gray-300); border-radius: 6px; background: white; font-size: 18px; cursor: pointer; }
.snippet-item { padding: 8px; border: 1px solid var(--gray-200); border-radius: 6px; margin-bottom: 6px; }
.snippet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.snippet-name { font-size: 13px; font-weight: 500; }
.snippet-lang { font-size: 11px; background: var(--gray-100); padding: 2px 6px; border-radius: 4px; color: var(--gray-500); }
.snippet-preview { font-size: 12px; background: var(--gray-50); padding: 6px; border-radius: 4px; margin: 4px 0; overflow: hidden; max-height: 60px; }
.snippet-preview code { font-family: 'JetBrains Mono', monospace; }
.snippet-actions { display: flex; gap: 4px; }
.snippet-insert { font-size: 12px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: white; cursor: pointer; }
.snippet-delete { font-size: 14px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: white; cursor: pointer; color: #ef4444; }
/* Dark theme for sidebar panels */
body[class*="dark"] .explorer-path,
body[class*="dark"] .explorer-browse-btn,
body[class*="dark"] .snippets-search,
body[class*="dark"] .snippets-add-btn,
body[class*="dark"] .snippet-insert,
body[class*="dark"] .snippet-delete {
background: #2d2d2d;
border-color: #444;
color: #ccc;
}
body[class*="dark"] .git-commit-input {
background: #2d2d2d;
border-color: #444;
color: #ccc;
}
body[class*="dark"] .snippet-item {
border-color: #444;
}
body[class*="dark"] .snippet-preview {
background: #2d2d2d;
}
body[class*="dark"] .tree-item:hover,
body[class*="dark"] .git-file:hover {
background: #333;
}
+24
View File
@@ -0,0 +1,24 @@
.welcome-container { padding: 40px; max-width: 900px; margin: 0 auto; }
.welcome-hero { text-align: center; margin-bottom: 40px; }
.welcome-title { font-size: 32px; font-weight: 700; color: var(--gray-800, #1f2937); }
.welcome-version { font-size: 14px; color: var(--primary-dark, #5661b3); margin-top: 4px; font-weight: 500; }
.welcome-subtitle { font-size: 16px; color: var(--gray-500, #6b7280); margin-top: 8px; }
.welcome-grid { display: grid; gap: 32px; }
.welcome-section h2 { font-size: 18px; margin-bottom: 16px; color: var(--gray-700, #374151); }
.welcome-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.welcome-card { padding: 20px; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px; cursor: pointer; text-align: center; transition: all 0.2s; }
.welcome-card:hover { border-color: var(--primary-dark, #5661b3); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-2px); }
.welcome-card-icon { font-size: 28px; margin-bottom: 8px; }
.welcome-card h3 { font-size: 15px; margin-bottom: 4px; }
.welcome-card p { font-size: 13px; color: var(--gray-500); }
.welcome-card kbd { display: inline-block; margin-top: 8px; padding: 2px 8px; background: var(--gray-100); border: 1px solid var(--gray-300); border-radius: 4px; font-size: 12px; font-family: 'JetBrains Mono', monospace; }
.welcome-features { list-style: none; padding: 0; }
.welcome-features li { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
.welcome-features strong { color: var(--primary-dark, #5661b3); }
.welcome-recent-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 4px; }
.welcome-recent-item:hover { background: var(--gray-100); }
.welcome-recent-name { font-size: 14px; font-weight: 500; display: block; }
.welcome-recent-path { font-size: 12px; color: var(--gray-500); display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; }
.welcome-muted { color: var(--gray-400); font-size: 14px; }
.welcome-footer { margin-top: 32px; text-align: center; }
.welcome-checkbox { font-size: 13px; color: var(--gray-500); cursor: pointer; }
+116 -136
View File
@@ -139,11 +139,18 @@ body {
background: #d0d0d0;
}
.toolbar-group {
display: flex;
align-items: center;
gap: 2px;
}
.toolbar-separator {
width: 1px;
height: 24px;
background: #ccc;
margin: 0 8px;
height: 20px;
background: rgba(0, 0, 0, 0.12);
margin: 0 6px;
align-self: center;
flex-shrink: 0;
}
/* Editor Container */
@@ -181,34 +188,6 @@ body {
background: #666;
}
/* Preview Header */
.preview-header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 4px 8px;
background: #f6f8fa;
border-bottom: 1px solid #dfe2e5;
min-height: 32px;
}
.preview-popout-btn {
background: transparent;
border: none;
border-radius: 3px;
padding: 2px 6px;
cursor: pointer;
font-size: 11px;
color: #8c959f;
opacity: 0.5;
transition: all 0.2s;
}
.preview-popout-btn:hover {
background: rgba(0, 0, 0, 0.05);
opacity: 1;
color: #24292f;
}
.editor-textarea {
width: 100%;
@@ -222,6 +201,20 @@ body {
resize: none;
}
/* CodeMirror container */
.codemirror-container {
height: 100%;
overflow: auto;
}
.codemirror-container .cm-editor {
height: 100%;
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
font-size: 14px;
}
.codemirror-container .cm-scroller {
overflow: auto;
}
.pane:last-child {
padding: 0;
background: #fff;
@@ -269,15 +262,67 @@ body {
line-height: 1.6;
}
/* Bottom Panel (REPL Output) */
.bottom-panel { display: flex; flex-direction: column; border-top: 1px solid var(--gray-200, #e5e7eb); flex-shrink: 0; }
.bottom-panel.collapsed { height: 0; overflow: hidden; border: none; }
.bottom-panel:not(.collapsed) { height: 200px; }
.bottom-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: var(--gray-50, #f9fafb); border-bottom: 1px solid var(--gray-200); }
.bottom-panel-title { font-size: 13px; font-weight: 600; color: var(--gray-600); }
.bottom-panel-actions { display: flex; gap: 4px; }
.bottom-panel-btn { font-size: 12px; padding: 4px 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: white; cursor: pointer; }
.bottom-panel-content { flex: 1; overflow-y: auto; padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 13px; background: #1e1e1e; color: #d4d4d4; }
.repl-entry { margin-bottom: 8px; }
.repl-command { color: #569cd6; margin-bottom: 2px; }
.repl-stdout { color: #d4d4d4; white-space: pre-wrap; }
.repl-stderr { color: #f44747; white-space: pre-wrap; }
.repl-error { color: #f44747; }
/* Code Run Button */
.code-run-btn {
position: absolute;
top: 6px;
right: 6px;
padding: 4px 10px;
font-size: 12px;
background: var(--primary-dark, #5661b3);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s;
}
pre:hover .code-run-btn { opacity: 1; }
/* Dark theme bottom panel */
body[class*="dark"] .bottom-panel-header { background: #1e1e1e; border-color: #333; }
body[class*="dark"] .bottom-panel-btn { background: #2d2d2d; border-color: #444; color: #ccc; }
body[class*="dark"] .bottom-panel-title { color: #ccc; }
/* Status Bar */
.status-bar {
display: flex;
justify-content: space-between;
padding: 4px 12px;
align-items: center;
padding: 2px 12px;
background: #f5f5f5;
border-top: 1px solid #ddd;
font-size: 12px;
color: #666;
min-height: 24px;
flex-shrink: 0;
}
.status-bar-left, .status-bar-right {
display: flex;
align-items: center;
gap: 4px;
}
.status-separator {
color: var(--gray-300, #d1d5db);
margin: 0 2px;
}
.status-item {
white-space: nowrap;
}
/* Preview Styles */
@@ -3973,108 +4018,43 @@ body.theme-github .mermaid {
border-color: #e1e4e8;
}
/* Task List Styles */
.preview-content input[type="checkbox"] {
margin-right: 6px;
pointer-events: none;
}
.preview-content li.task-list-item {
list-style: none;
margin-left: -20px;
}
/* Admonition Styles */
.admonition {
border-left: 4px solid;
border-radius: 4px;
padding: 12px 16px;
margin: 16px 0;
}
.admonition-title {
font-weight: 600;
margin-bottom: 8px;
}
.admonition-note, .admonition-info { border-color: #3b82f6; background: #eff6ff; }
.admonition-warning { border-color: #f59e0b; background: #fffbeb; }
.admonition-tip { border-color: #10b981; background: #ecfdf5; }
.admonition-danger { border-color: #ef4444; background: #fef2f2; }
/* TOC Styles */
.toc { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; margin: 16px 0; }
.toc h2 { font-size: 14px; margin-bottom: 8px; }
.toc ul { list-style: none; padding: 0; }
.toc li { padding: 2px 0; }
.toc .toc-h1 { padding-left: 0; }
.toc .toc-h2 { padding-left: 16px; }
.toc .toc-h3 { padding-left: 32px; }
.toc .toc-h4 { padding-left: 48px; }
.toc a { color: #5661b3; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
/* Command Palette Styles */
.command-palette {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 100px;
z-index: 10000;
}
.command-palette.hidden {
display: none;
}
.command-palette-content {
background: #fff;
border-radius: 12px;
width: 600px;
max-width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
#command-search {
width: 100%;
padding: 20px;
font-size: 18px;
border: none;
border-bottom: 1px solid #e0e0e0;
outline: none;
}
.command-list {
max-height: 400px;
overflow-y: auto;
}
.command-item {
padding: 12px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.15s;
}
.command-item:hover,
.command-item.selected {
background: #f0f0f0;
}
.command-name {
font-weight: 500;
}
.command-shortcut {
font-size: 12px;
color: #666;
background: #f5f5f5;
padding: 3px 8px;
border-radius: 3px;
}
.command-palette-footer {
padding: 12px 20px;
background: #f9f9f9;
border-top: 1px solid #e0e0e0;
display: flex;
gap: 20px;
font-size: 12px;
color: #666;
}
/* Dark theme support for command palette */
body.theme-dark .command-palette-content {
background: #2d2d2d;
color: #f0f0f0;
}
body.theme-dark #command-search {
background: #2d2d2d;
color: #f0f0f0;
border-color: #444;
}
body.theme-dark .command-item:hover,
body.theme-dark .command-item.selected {
background: #3d3d3d;
}
body.theme-dark .command-shortcut {
background: #3d3d3d;
color: #ccc;
}
body.theme-dark .command-palette-footer {
background: #252525;
border-color: #444;
color: #999;
}
/* Command Palette styles moved to styles-modern.css */
+90
View File
@@ -0,0 +1,90 @@
# API Documentation
**Base URL:** `https://api.example.com/v1`
**Version:** 1.0
**Date:** {{DATE}}
## Authentication
All requests require an API key in the header:
```
Authorization: Bearer YOUR_API_KEY
```
## Endpoints
### Get All Resources
```
GET /resources
```
**Query Parameters:**
| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| page | integer | No | Page number (default: 1) |
| limit | integer | No | Items per page (default: 20) |
**Response:**
```json
{
"data": [],
"total": 0,
"page": 1
}
```
### Get Resource by ID
```
GET /resources/:id
```
**Response:**
```json
{
"id": "1",
"name": "Resource name",
"created_at": "2024-01-01T00:00:00Z"
}
```
### Create Resource
```
POST /resources
```
**Request Body:**
```json
{
"name": "New resource",
"description": "Description"
}
```
### Update Resource
```
PUT /resources/:id
```
### Delete Resource
```
DELETE /resources/:id
```
## Error Codes
| Code | Description |
|------|-------------|
| 400 | Bad Request |
| 401 | Unauthorized |
| 404 | Not Found |
| 500 | Internal Server Error |
+20
View File
@@ -0,0 +1,20 @@
---
title: Blog Post Title
date: {{DATE}}
author: Your Name
tags: []
---
# Blog Post Title
## Introduction
Write your introduction here.
## Main Content
Your main content goes here.
## Conclusion
Wrap up your thoughts.
+20
View File
@@ -0,0 +1,20 @@
# Changelog
## [Unreleased]
### Added
- New feature
### Changed
- Updated feature
### Fixed
- Bug fix
### Removed
- Removed feature
## [1.0.0] - {{DATE}}
### Added
- Initial release
+59
View File
@@ -0,0 +1,59 @@
# Comparison: [Option A] vs [Option B]
**Date:** {{DATE}}
**Author:** Your Name
## Overview
Brief description of what is being compared and why.
## Feature Comparison
| Feature | Option A | Option B |
|---------|----------|----------|
| Feature 1 | Yes | Yes |
| Feature 2 | Yes | No |
| Feature 3 | No | Yes |
| Feature 4 | Partial | Yes |
## Pricing
| Plan | Option A | Option B |
|------|----------|----------|
| Free | Limited | Limited |
| Pro | $10/mo | $15/mo |
| Enterprise | Custom | Custom |
## Pros and Cons
### Option A
**Pros:**
- Pro 1
- Pro 2
**Cons:**
- Con 1
- Con 2
### Option B
**Pros:**
- Pro 1
- Pro 2
**Cons:**
- Con 1
- Con 2
## Performance
| Metric | Option A | Option B |
|--------|----------|----------|
| Speed | Fast | Moderate |
| Memory | Low | Medium |
| Scalability | Good | Excellent |
## Recommendation
Based on the analysis above, [Option A/B] is recommended for [use case] because [reason].
+26
View File
@@ -0,0 +1,26 @@
# Meeting Notes
**Date:** {{DATE}}
**Attendees:**
- Name 1
- Name 2
## Agenda
1. Topic 1
2. Topic 2
## Discussion
### Topic 1
Notes here.
## Action Items
- [ ] Action item 1 — Owner — Due date
- [ ] Action item 2 — Owner — Due date
## Next Meeting
Date: TBD
+54
View File
@@ -0,0 +1,54 @@
# Project Plan: [Project Name]
**Date:** {{DATE}}
**Project Lead:** Your Name
**Status:** Planning
## Goals
1. Primary goal
2. Secondary goal
## Scope
### In Scope
- Item 1
- Item 2
### Out of Scope
- Item 1
## Milestones
| Milestone | Target Date | Status |
|-----------|-------------|--------|
| Kickoff | {{DATE}} | Not Started |
| MVP | TBD | Not Started |
| Launch | TBD | Not Started |
## Resources
| Role | Person | Allocation |
|------|--------|------------|
| Lead | Name | 100% |
| Developer | Name | 50% |
## Risks
| Risk | Impact | Likelihood | Mitigation |
|------|--------|------------|------------|
| Risk 1 | High | Medium | Plan |
## Timeline
### Phase 1: Planning
- [ ] Define requirements
- [ ] Create design documents
### Phase 2: Development
- [ ] Implement core features
- [ ] Write tests
### Phase 3: Launch
- [ ] Deploy to production
- [ ] Monitor and iterate
+38
View File
@@ -0,0 +1,38 @@
# Project Name
Brief description of the project.
## Features
- Feature 1
- Feature 2
## Installation
```bash
npm install project-name
```
## Usage
```javascript
const project = require('project-name');
```
## Configuration
| Option | Default | Description |
|--------|---------|-------------|
| option1 | true | Description |
## Contributing
1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request
## License
MIT
+42
View File
@@ -0,0 +1,42 @@
# Release Notes - v1.0.0
**Release Date:** {{DATE}}
## Highlights
Brief summary of the most important changes in this release.
## New Features
- **Feature 1:** Description of the new feature
- **Feature 2:** Description of the new feature
## Improvements
- Improved performance of feature X
- Updated dependency Y to version Z
## Bug Fixes
- Fixed issue where X would cause Y (#123)
- Resolved crash when performing Z (#456)
## Breaking Changes
- Changed API endpoint from `/old` to `/new`
- Removed deprecated method `oldMethod()`
## Migration Guide
### From v0.9.x to v1.0.0
1. Update configuration file format
2. Replace deprecated API calls
## Known Issues
- Issue description (#789)
## Contributors
Thanks to everyone who contributed to this release.
+42
View File
@@ -0,0 +1,42 @@
# Technical Specification: [Feature Name]
**Version:** 1.0
**Date:** {{DATE}}
**Author:** Your Name
**Status:** Draft
## Overview
Brief description of what this feature does.
## Requirements
### Functional Requirements
1. Requirement 1
2. Requirement 2
### Non-Functional Requirements
1. Performance requirement
2. Security requirement
## Architecture
Describe the technical approach.
## API Design
### Endpoints
| Method | Path | Description |
|--------|------|-------------|
| GET | /api/resource | Get resource |
## Testing Strategy
Describe how this will be tested.
## Timeline
| Phase | Duration | Deliverables |
|-------|----------|-------------|
| Phase 1 | 1 week | Core implementation |
+71
View File
@@ -0,0 +1,71 @@
# Tutorial: [Topic Name]
**Date:** {{DATE}}
**Difficulty:** Beginner / Intermediate / Advanced
**Time:** ~30 minutes
## Prerequisites
- Prerequisite 1
- Prerequisite 2
## What You Will Learn
- Learning objective 1
- Learning objective 2
## Step 1: Getting Started
Description of the first step.
```bash
# Example command
echo "Hello, World!"
```
## Step 2: Core Concepts
Explain the main concepts here.
### Key Concept A
Details about concept A.
### Key Concept B
Details about concept B.
## Step 3: Building the Feature
Walk through the implementation.
```javascript
// Example code
function example() {
return 'Hello';
}
```
## Step 4: Testing
How to verify everything works.
## Common Issues
### Issue 1
**Problem:** Description of the problem.
**Solution:** How to fix it.
### Issue 2
**Problem:** Description of the problem.
**Solution:** How to fix it.
## Next Steps
- Suggested follow-up 1
- Suggested follow-up 2
## Resources
- [Resource 1](https://example.com)
- [Resource 2](https://example.com)
+78
View File
@@ -0,0 +1,78 @@
function createWelcomeContent(recentFiles = []) {
const recentHtml = recentFiles.length
? recentFiles.map(f => {
const name = f.split(/[/\\]/).pop();
return `<div class="welcome-recent-item" data-path="${f}"><span class="welcome-recent-name">${name}</span><span class="welcome-recent-path">${f}</span></div>`;
}).join('')
: '<p class="welcome-muted">No recent files</p>';
return `
<div class="welcome-container">
<div class="welcome-hero">
<h1 class="welcome-title">MarkdownConverter</h1>
<p class="welcome-version">Version 4.0.0</p>
<p class="welcome-subtitle">Professional Markdown Editor & Universal Document Converter</p>
</div>
<div class="welcome-grid">
<div class="welcome-section">
<h2>Quick Start</h2>
<div class="welcome-cards">
<div class="welcome-card" data-action="new-file">
<div class="welcome-card-icon">+</div>
<h3>New Document</h3>
<p>Create a blank document</p>
<kbd>Ctrl+N</kbd>
</div>
<div class="welcome-card" data-action="open-file">
<div class="welcome-card-icon">&#128194;</div>
<h3>Open File</h3>
<p>Open an existing file</p>
<kbd>Ctrl+O</kbd>
</div>
<div class="welcome-card" data-action="open-template">
<div class="welcome-card-icon">&#128203;</div>
<h3>From Template</h3>
<p>Start from a template</p>
</div>
<div class="welcome-card" data-action="command-palette">
<div class="welcome-card-icon">&#8984;</div>
<h3>Command Palette</h3>
<p>Search all actions</p>
<kbd>Ctrl+Shift+P</kbd>
</div>
</div>
</div>
<div class="welcome-section">
<h2>What's New in v4.0.0</h2>
<ul class="welcome-features">
<li><strong>CodeMirror Editor</strong> — Syntax highlighting, code folding, multiple cursors</li>
<li><strong>Sidebar Panels</strong> — File Explorer, Git, Snippets, Templates</li>
<li><strong>Command Palette</strong> — Quick access to all actions</li>
<li><strong>Code Execution</strong> — Run JS, Python, Bash from code blocks</li>
<li><strong>Print Preview</strong> — Full print customization dialog</li>
<li><strong>New Formats</strong> — Reveal.js, YAML, JSON, Confluence, and more</li>
<li><strong>Spell Checking</strong> — System dictionary with suggestions</li>
<li><strong>Markdown Extensions</strong> — Footnotes, admonitions, TOC</li>
<li><strong>Image Handling</strong> — Paste and drag-drop images</li>
<li><strong>PlantUML</strong> — Diagram rendering in preview</li>
</ul>
</div>
<div class="welcome-section">
<h2>Recent Files</h2>
<div class="welcome-recent">${recentHtml}</div>
</div>
</div>
<div class="welcome-footer">
<label class="welcome-checkbox">
<input type="checkbox" id="show-welcome-startup" checked>
Show this tab on startup
</label>
</div>
</div>`;
}
module.exports = { createWelcomeContent };
+144
View File
@@ -0,0 +1,144 @@
/**
* @jest-environment jsdom
*/
/**
* Tests for CommandPalette
* Tests command registration, filtering, execution, and keyboard navigation
*/
describe('CommandPalette', () => {
let CommandPalette;
beforeEach(() => {
document.body.innerHTML = `
<div class="command-palette-overlay hidden" id="command-palette-overlay">
<div class="command-palette">
<input type="text" id="command-palette-input">
<div id="command-palette-results"></div>
</div>
</div>
`;
CommandPalette = require('../src/command-palette').CommandPalette;
});
test('starts hidden', () => {
const palette = new CommandPalette();
expect(palette.isOpen()).toBe(false);
});
test('opens and focuses input', () => {
const palette = new CommandPalette();
palette.open();
expect(palette.isOpen()).toBe(true);
});
test('closes', () => {
const palette = new CommandPalette();
palette.open();
palette.close();
expect(palette.isOpen()).toBe(false);
});
test('registers and renders commands', () => {
const palette = new CommandPalette();
palette.register('Test Command', 'Ctrl+T', () => {});
palette.register('Another Command', '', () => {});
palette.open();
const items = document.querySelectorAll('.command-item');
expect(items.length).toBe(2);
});
test('filters commands by search', () => {
const palette = new CommandPalette();
palette.register('Save File', 'Ctrl+S', () => {});
palette.register('Open File', 'Ctrl+O', () => {});
palette.register('Bold Text', 'Ctrl+B', () => {});
palette.renderResults('file');
const items = document.querySelectorAll('.command-item');
expect(items.length).toBe(2);
});
test('executes command', () => {
const palette = new CommandPalette();
const action = jest.fn();
palette.register('Test', '', action);
palette.open();
palette.executeSelected();
expect(action).toHaveBeenCalled();
});
test('highlights matching text', () => {
const palette = new CommandPalette();
const result = palette.highlightMatch('Save File', 'save');
expect(result).toContain('<strong>');
expect(result).toContain('Save');
});
test('highlightMatch returns original text when no query', () => {
const palette = new CommandPalette();
const result = palette.highlightMatch('Save File', '');
expect(result).toBe('Save File');
});
test('filters case-insensitively', () => {
const palette = new CommandPalette();
palette.register('Save File', '', () => {});
palette.register('Open File', '', () => {});
palette.renderResults('SAVE');
const items = document.querySelectorAll('.command-item');
expect(items.length).toBe(1);
});
test('shows all commands when query is empty', () => {
const palette = new CommandPalette();
palette.register('Cmd1', '', () => {});
palette.register('Cmd2', '', () => {});
palette.register('Cmd3', '', () => {});
palette.renderResults('');
const items = document.querySelectorAll('.command-item');
expect(items.length).toBe(3);
});
test('displays shortcut when provided', () => {
const palette = new CommandPalette();
palette.register('Save File', 'Ctrl+S', () => {});
palette.open();
const shortcut = document.querySelector('.command-shortcut');
expect(shortcut).not.toBeNull();
expect(shortcut.textContent).toBe('Ctrl+S');
});
test('does not display shortcut when empty', () => {
const palette = new CommandPalette();
palette.register('Test Command', '', () => {});
palette.open();
const shortcut = document.querySelector('.command-shortcut');
expect(shortcut).toBeNull();
});
test('closes on overlay click', () => {
const palette = new CommandPalette();
palette.open();
// Simulate click on the overlay itself
const event = new Event('click', { bubbles: true });
Object.defineProperty(event, 'target', { value: palette.overlay });
palette.overlay.dispatchEvent(event);
expect(palette.isOpen()).toBe(false);
});
test('executeSelected does nothing when no commands', () => {
const palette = new CommandPalette();
palette.open();
// Should not throw
expect(() => palette.executeSelected()).not.toThrow();
});
test('closes after executing command', () => {
const palette = new CommandPalette();
palette.register('Test', '', jest.fn());
palette.open();
palette.executeSelected();
expect(palette.isOpen()).toBe(false);
});
});
+100
View File
@@ -0,0 +1,100 @@
/**
* Tests for Main Process Utilities
* Tests sanitization, rate limiting, and other main process helpers
*/
describe('sanitizeErrorMessage', () => {
const sanitizeErrorMessage = (message) => {
if (typeof message !== 'string') return String(message);
return message
.replace(/[A-Z]:\\[^\s"']+\\([^\s"'\\]+)/gi, '$1')
.replace(/\/[^\s"']+\/([^\s"'/]+)/g, '$1');
};
test('strips Windows absolute paths', () => {
expect(sanitizeErrorMessage('Error in C:\\Users\\test\\file.js'))
.toBe('Error in file.js');
});
test('strips Unix absolute paths', () => {
expect(sanitizeErrorMessage('Error in /home/user/project/file.js'))
.toBe('Error in file.js');
});
test('handles non-string input', () => {
expect(sanitizeErrorMessage(42)).toBe('42');
expect(sanitizeErrorMessage(null)).toBe('null');
});
test('preserves messages without paths', () => {
expect(sanitizeErrorMessage('Something went wrong'))
.toBe('Something went wrong');
});
test('strips nested Windows paths', () => {
expect(sanitizeErrorMessage('Cannot read C:\\Users\\admin\\AppData\\Local\\config.json'))
.toBe('Cannot read config.json');
});
test('strips nested Unix paths', () => {
expect(sanitizeErrorMessage('File not found: /var/log/app/error.log'))
.toBe('File not found: error.log');
});
test('handles undefined input', () => {
expect(sanitizeErrorMessage(undefined)).toBe('undefined');
});
});
describe('createRateLimiter', () => {
const createRateLimiter = (minIntervalMs = 2000) => {
let lastCall = 0;
return function canProceed() {
const now = Date.now();
if (now - lastCall < minIntervalMs) return false;
lastCall = now;
return true;
};
};
test('allows first call', () => {
const limiter = createRateLimiter(1000);
expect(limiter()).toBe(true);
});
test('blocks rapid calls', () => {
const limiter = createRateLimiter(1000);
limiter(); // first call
expect(limiter()).toBe(false); // too soon
});
test('allows call after interval', () => {
jest.useFakeTimers();
const limiter = createRateLimiter(1000);
limiter();
jest.advanceTimersByTime(1001);
expect(limiter()).toBe(true);
jest.useRealTimers();
});
test('uses default interval of 2000ms', () => {
jest.useFakeTimers();
const limiter = createRateLimiter();
limiter();
jest.advanceTimersByTime(1999);
expect(limiter()).toBe(false);
jest.advanceTimersByTime(2);
expect(limiter()).toBe(true);
jest.useRealTimers();
});
test('resets after successful call', () => {
jest.useFakeTimers();
const limiter = createRateLimiter(500);
limiter();
jest.advanceTimersByTime(501);
limiter(); // resets the timer
expect(limiter()).toBe(false); // too soon after second call
jest.useRealTimers();
});
});
+130
View File
@@ -0,0 +1,130 @@
/**
* Tests for Markdown Extensions
* Tests TOC generation, admonition parsing, and PlantUML encoding
*/
describe('Markdown Extensions', () => {
describe('TOC generation from headings', () => {
test('extracts all heading levels', () => {
const html = '<h1>Title</h1><h2>Section 1</h2><h2>Section 2</h2><h3>Subsection</h3>';
const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
const toc = [];
let match;
while ((match = headingRegex.exec(html)) !== null) {
toc.push({ level: parseInt(match[1]), text: match[2] });
}
expect(toc).toHaveLength(4);
expect(toc[0]).toEqual({ level: 1, text: 'Title' });
expect(toc[3]).toEqual({ level: 3, text: 'Subsection' });
});
test('handles empty HTML', () => {
const html = '<p>No headings here</p>';
const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
const toc = [];
let match;
while ((match = headingRegex.exec(html)) !== null) {
toc.push({ level: parseInt(match[1]), text: match[2] });
}
expect(toc).toHaveLength(0);
});
test('handles headings with attributes', () => {
const html = '<h1 id="title" class="main">Title</h1><h2 id="sec">Section</h2>';
const headingRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/gi;
const toc = [];
let match;
while ((match = headingRegex.exec(html)) !== null) {
toc.push({ level: parseInt(match[1]), text: match[2] });
}
expect(toc).toHaveLength(2);
expect(toc[0].text).toBe('Title');
});
});
describe('Admonition regex matching', () => {
test('matches note admonition', () => {
const src = ':::note\nThis is a note.\n:::\n';
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).not.toBeNull();
expect(match[1]).toBe('note');
expect(match[2].trim()).toBe('This is a note.');
});
test('matches all admonition types', () => {
const types = ['note', 'warning', 'tip', 'danger', 'info'];
types.forEach(type => {
const src = `:::${type}\nContent\n:::\n`;
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).not.toBeNull();
expect(match[1]).toBe(type);
});
});
test('does not match invalid admonition type', () => {
const src = ':::custom\nContent\n:::\n';
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).toBeNull();
});
test('captures multiline content', () => {
const src = ':::warning\nLine 1\nLine 2\nLine 3\n:::\n';
const match = src.match(/^:::(note|warning|tip|danger|info)\s*\n([\s\S]*?)^:::\s*$/m);
expect(match).not.toBeNull();
expect(match[2]).toContain('Line 1');
expect(match[2]).toContain('Line 3');
});
});
describe('PlantUML hex encoding', () => {
const plantumlEncode = (text) => {
const hex = Array.from(Buffer.from(text, 'utf-8'))
.map(b => b.toString(16).padStart(2, '0'))
.join('');
return '~h' + hex;
};
test('encodes simple text', () => {
const encoded = plantumlEncode('A -> B');
expect(encoded).toBe('~h41202d3e2042');
});
test('encodes empty string', () => {
expect(plantumlEncode('')).toBe('~h');
});
test('encodes special characters', () => {
const encoded = plantumlEncode('@startuml');
expect(encoded).toMatch(/^~h[0-9a-f]+$/);
// '@' is 0x40, 's' is 0x73
expect(encoded.startsWith('~h40')).toBe(true);
});
});
describe('Slug generation for TOC anchors', () => {
const slugify = (text) => {
return text
.toLowerCase()
.replace(/[^\w\s-]/g, '')
.replace(/\s+/g, '-')
.replace(/-+/g, '-')
.trim();
};
test('converts heading to slug', () => {
expect(slugify('Hello World')).toBe('hello-world');
});
test('removes special characters', () => {
expect(slugify('What is C++?')).toBe('what-is-c');
});
test('collapses multiple dashes', () => {
expect(slugify('Hello World')).toBe('hello-world');
});
test('handles already lowercase text', () => {
expect(slugify('simple')).toBe('simple');
});
});
});
+56 -2
View File
@@ -14,12 +14,29 @@ describe('Preload Security', () => {
'renderer-ready',
'get-theme',
'do-print',
'do-print-with-options',
'export-with-options',
'export-spreadsheet',
'batch-convert',
'select-folder',
'universal-convert',
'universal-convert-batch',
'image-convert',
'image-batch-convert',
'image-resize',
'image-compress',
'image-rotate',
'audio-convert',
'audio-batch-convert',
'audio-extract',
'audio-trim',
'audio-merge',
'video-convert',
'video-batch-convert',
'video-compress',
'video-trim',
'video-frames',
'video-gif',
'get-header-footer-settings',
'save-header-footer-settings',
'browse-header-footer-logo',
@@ -30,7 +47,26 @@ describe('Preload Security', () => {
'set-custom-start-page',
'process-pdf-operation',
'get-pdf-page-count',
'select-pdf-folder'
'select-pdf-folder',
'open-ascii-generator',
'open-table-generator',
'insert-generated-content',
'save-pasted-image',
'load-template',
'list-directory',
'open-file-path',
'git-status',
'git-stage',
'git-commit',
'git-log',
'git-diff',
'get-snippets',
'save-snippet',
'delete-snippet',
'execute-code',
'show-pdf-editor-from-toolbar',
'menu-open',
'export'
];
const EXPECTED_RECEIVE_CHANNELS = [
@@ -54,18 +90,36 @@ describe('Preload Security', () => {
'show-universal-converter-dialog',
'show-table-generator',
'show-pdf-editor-dialog',
'show-image-converter',
'show-audio-converter',
'show-video-converter',
'open-pdf-viewer',
'conversion-status',
'conversion-complete',
'batch-progress',
'image-conversion-complete',
'audio-conversion-complete',
'video-conversion-complete',
'folder-selected',
'pdf-folder-selected',
'header-footer-settings-data',
'header-footer-logo-selected',
'header-footer-logo-saved',
'header-footer-logo-cleared',
'page-settings-data',
'pdf-page-count',
'pdf-operation-complete',
'pdf-operation-error'
'pdf-operation-error',
'pdf-operation-progress',
'show-ascii-generator-window',
'show-ascii-generator',
'show-table-generator-window',
'open-header-footer-dialog',
'insert-content',
'load-template-menu',
'toggle-command-palette',
'toggle-sidebar-panel',
'toggle-bottom-panel'
];
test('should define all expected send channels', () => {
+109
View File
@@ -0,0 +1,109 @@
/**
* @jest-environment jsdom
*/
/**
* Tests for PrintPreview
* Tests print dialog options, open/close, and preview rendering
*/
describe('PrintPreview', () => {
beforeEach(() => {
// Mock electron require for executePrint
jest.mock('electron', () => ({
ipcRenderer: { send: jest.fn(), invoke: jest.fn() }
}), { virtual: true });
document.body.innerHTML = `
<div class="dialog-overlay hidden" id="print-preview-overlay">
<button id="print-preview-close"></button>
<button id="print-cancel"></button>
<button id="print-execute"></button>
<select id="print-paper-size"><option value="A4">A4</option><option value="Letter">Letter</option></select>
<select id="print-orientation"><option value="portrait">Portrait</option><option value="landscape">Landscape</option></select>
<select id="print-margins"><option value="default">Default</option></select>
<input type="range" id="print-scale" value="100">
<span id="print-scale-value">100%</span>
<input type="checkbox" id="print-headers" checked>
<input type="checkbox" id="print-background" checked>
<select id="print-pages"><option value="all">All</option><option value="custom">Custom</option></select>
<input type="text" id="print-page-range" class="hidden">
<iframe id="print-preview-frame"></iframe>
</div>
`;
});
test('getOptions returns default values', () => {
const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview();
const options = preview.getOptions();
expect(options.paperSize).toBe('A4');
expect(options.orientation).toBe('portrait');
expect(options.scale).toBe(100);
expect(options.headers).toBe(true);
expect(options.background).toBe(true);
expect(options.pages).toBe('all');
expect(options.margins).toBe('default');
expect(options.pageRange).toBe('');
});
test('opens and closes', () => {
const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview();
preview.open('<p>Test</p>');
expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(false);
preview.close();
expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(true);
});
test('updateScaleLabel reflects slider value', () => {
const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview();
document.getElementById('print-scale').value = '75';
preview.updateScaleLabel();
expect(document.getElementById('print-scale-value').textContent).toBe('75%');
});
test('close button closes preview', () => {
const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview();
preview.open('<p>Test</p>');
document.getElementById('print-preview-close').click();
expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(true);
});
test('cancel button closes preview', () => {
const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview();
preview.open('<p>Test</p>');
document.getElementById('print-cancel').click();
expect(document.getElementById('print-preview-overlay').classList.contains('hidden')).toBe(true);
});
test('getOptions reflects changed values', () => {
const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview();
// Change paper size to Letter
const paperSelect = document.getElementById('print-paper-size');
paperSelect.value = 'Letter';
// Change scale
document.getElementById('print-scale').value = '50';
// Uncheck headers
document.getElementById('print-headers').checked = false;
const options = preview.getOptions();
expect(options.paperSize).toBe('Letter');
expect(options.scale).toBe(50);
expect(options.headers).toBe(false);
});
test('stores last content for refresh', () => {
const { PrintPreview } = require('../src/print-preview');
const preview = new PrintPreview();
preview.open('<p>Hello World</p>');
expect(preview._lastContent).toBe('<p>Hello World</p>');
});
});
+1 -1
View File
@@ -59,7 +59,7 @@ global.window.electronAPI = {
// Mock marked library
global.window.marked = {
parse: jest.fn((text) => `<p>${text}</p>`),
setOptions: jest.fn()
use: jest.fn()
};
// Mock DOMPurify
+121
View File
@@ -0,0 +1,121 @@
/**
* @jest-environment jsdom
*/
/**
* Tests for SidebarManager
* Tests panel registration, toggling, expand/collapse behavior
*/
describe('SidebarManager', () => {
let SidebarManager;
beforeEach(() => {
document.body.innerHTML = `
<div class="sidebar collapsed" id="sidebar">
<div class="sidebar-icons">
<button class="sidebar-icon" data-panel="test1"></button>
<button class="sidebar-icon" data-panel="test2"></button>
</div>
<div class="sidebar-panel" id="sidebar-panel">
<div class="sidebar-panel-header">
<span class="sidebar-panel-title"></span>
<button class="sidebar-panel-close"></button>
</div>
<div class="sidebar-panel-content" id="sidebar-panel-content"></div>
</div>
</div>
`;
SidebarManager = require('../src/sidebar/sidebar-manager').SidebarManager;
});
test('starts collapsed', () => {
const mgr = new SidebarManager();
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
});
test('expands on panel toggle', () => {
const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: (c) => { c.innerHTML = 'hello'; } });
mgr.togglePanel('test1');
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(false);
expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Test 1');
});
test('collapses on second toggle', () => {
const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
mgr.togglePanel('test1');
mgr.togglePanel('test1');
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
});
test('switches panels', () => {
const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Panel 1', render: (c) => { c.innerHTML = 'one'; } });
mgr.registerPanel('test2', { title: 'Panel 2', render: (c) => { c.innerHTML = 'two'; } });
mgr.togglePanel('test1');
mgr.togglePanel('test2');
expect(document.querySelector('.sidebar-panel-title').textContent).toBe('Panel 2');
expect(document.getElementById('sidebar-panel-content').innerHTML).toBe('two');
});
test('collapse resets active panel', () => {
const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test', render: () => {} });
mgr.expand('test1');
mgr.collapse();
expect(mgr.activePanel).toBe(null);
});
test('expand sets active icon', () => {
const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
mgr.expand('test1');
const btn = document.querySelector('[data-panel="test1"]');
expect(btn.classList.contains('active')).toBe(true);
});
test('collapse removes active icon', () => {
const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
mgr.expand('test1');
mgr.collapse();
const btn = document.querySelector('[data-panel="test1"]');
expect(btn.classList.contains('active')).toBe(false);
});
test('expand with unregistered panel does nothing', () => {
const mgr = new SidebarManager();
mgr.expand('nonexistent');
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
expect(mgr.activePanel).toBe(null);
});
test('render function receives panel content element', () => {
const mgr = new SidebarManager();
const renderFn = jest.fn();
mgr.registerPanel('test1', { title: 'Test 1', render: renderFn });
mgr.expand('test1');
expect(renderFn).toHaveBeenCalledWith(document.getElementById('sidebar-panel-content'));
});
test('clicking sidebar icon toggles panel', () => {
const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
const btn = document.querySelector('[data-panel="test1"]');
btn.click();
expect(mgr.activePanel).toBe('test1');
btn.click();
expect(mgr.activePanel).toBe(null);
});
test('clicking close button collapses sidebar', () => {
const mgr = new SidebarManager();
mgr.registerPanel('test1', { title: 'Test 1', render: () => {} });
mgr.expand('test1');
document.querySelector('.sidebar-panel-close').click();
expect(mgr.activePanel).toBe(null);
expect(document.getElementById('sidebar').classList.contains('collapsed')).toBe(true);
});
});
Binary file not shown.