-
-
- ASCII Art Generator
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Arrows & Flow
-
-
-
-
-
-
-
-
- Diagrams
-
-
-
-
-
-
-
-
- Boxes & Containers
-
-
-
-
-
-
-
-
- Decorative
-
-
-
-
-
-
-
-
- Preview
-
-
-
-
+
+
+ ASCII Art Generator
+
+
+
+
+
+
+
+
diff --git a/src/fonts.css b/src/fonts.css
index c312c87..ca5866e 100644
--- a/src/fonts.css
+++ b/src/fonts.css
@@ -1,75 +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');
-}
+/* 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');
+}
diff --git a/src/index.html b/src/index.html
index 5fc5299..83ea896 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,1414 +1,1414 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Arrows & Flow
+
+
+
+
+
+
+
+
+ Diagrams
+
+
+
+
+
+
+
+
+ Boxes & Containers
+
+
+
+
+
+
+
+
+ Decorative
+
+
+
+
+
+
+
+
+ Preview
+
+
+
+
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
- MarkdownConverter
-
-
- MarkdownConverter
-
- v3.0.0
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e55ae1c..74a9c4b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3795 +1,3795 @@
-const { app, BrowserWindow, Menu, dialog, ipcMain, shell } = require('electron');
-const path = require('path');
-const fs = require('fs');
-const { exec, execFile, spawn } = require('child_process');
-const { PDFDocument, rgb, degrees, StandardFonts } = require('pdf-lib');
-const WordTemplateExporter = require('./wordTemplateExporter');
-
-// Add MiKTeX to PATH for LaTeX support
-if (process.platform === 'win32') {
- const miktexPath = 'C:\\Program Files\\MiKTeX\\miktex\\bin\\x64';
- if (fs.existsSync(miktexPath)) {
- process.env.PATH = `${miktexPath};${process.env.PATH}`;
- console.log('[MAIN] Added MiKTeX to PATH:', miktexPath);
- }
-}
-
-// Get the system Pandoc path
-function getPandocPath() {
- // Pandoc is expected to be in the system's PATH.
- // The command will be executed directly. Quoting is handled by exec.
- return 'pandoc';
-}
-
-// Check if Pandoc is available
-function checkPandocAvailable() {
- return new Promise((resolve) => {
- const pandocPath = getPandocPath();
- execFile(pandocPath, ['--version'], (error) => {
- resolve(!error);
- });
- });
-}
-
-/**
- * Safe command execution using execFile (no shell injection risk)
- * @param {string} command - The command to execute
- * @param {string[]} args - Array of arguments
- * @param {object} options - Options for execFile
- * @returns {Promise<{stdout: string, stderr: string}>}
- */
-function safeExecFile(command, args, options = {}) {
- return new Promise((resolve, reject) => {
- execFile(command, args, { maxBuffer: 10 * 1024 * 1024, ...options }, (error, stdout, stderr) => {
- if (error) {
- reject({ error, stdout, stderr });
- } else {
- resolve({ stdout, stderr });
- }
- });
- });
-}
-
-/**
- * Run Pandoc command safely with execFile
- * @param {string[]} args - Pandoc arguments array
- * @param {Function} callback - Callback function (error, stdout, stderr)
- */
-function runPandoc(args, callback) {
- const pandocPath = getPandocPath();
- execFile(pandocPath, args, { maxBuffer: 10 * 1024 * 1024 }, callback);
-}
-
-/**
- * Run a Pandoc command string safely using execFile
- * Parses the command string and uses execFile to prevent shell injection
- * @param {string} cmdString - Full Pandoc command string (e.g., 'pandoc "input.md" -o "output.pdf"')
- * @param {Function} callback - Callback function (error, stdout, stderr)
- */
-function runPandocCmd(cmdString, callback) {
- const parsed = parseCommand(cmdString);
- // Skip 'pandoc' if it's the first element (command itself)
- const args = parsed.command === 'pandoc' ? parsed.args : [parsed.command, ...parsed.args];
- const pandocPath = getPandocPath();
- execFile(pandocPath, args, { maxBuffer: 10 * 1024 * 1024 }, callback);
-}
-
-/**
- * Parse a command string into command and arguments array
- * This helps transition from exec() to execFile() safely
- * @param {string} cmdString - Full command string
- * @returns {{command: string, args: string[]}}
- */
-function parseCommand(cmdString) {
- // Handle quoted strings properly
- const parts = [];
- let current = '';
- let inQuotes = false;
- let quoteChar = '';
-
- for (let i = 0; i < cmdString.length; i++) {
- const char = cmdString[i];
- if ((char === '"' || char === "'") && !inQuotes) {
- inQuotes = true;
- quoteChar = char;
- } else if (char === quoteChar && inQuotes) {
- inQuotes = false;
- quoteChar = '';
- } else if (char === ' ' && !inQuotes) {
- if (current) {
- parts.push(current);
- current = '';
- }
- } else {
- current += char;
- }
- }
- if (current) {
- parts.push(current);
- }
-
- return {
- command: parts[0],
- args: parts.slice(1)
- };
-}
-
-// Simple storage implementation to replace electron-store
-const settingsPath = path.join(app.getPath('userData'), 'settings.json');
-const store = {
- get: (key, defaultValue) => {
- try {
- const data = fs.readFileSync(settingsPath, 'utf-8');
- const settings = JSON.parse(data);
- return settings[key] || defaultValue;
- } catch {
- return defaultValue;
- }
- },
- set: (key, value) => {
- let settings = {};
- try {
- const data = fs.readFileSync(settingsPath, 'utf-8');
- settings = JSON.parse(data);
- } catch {}
- settings[key] = value;
- fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2));
- }
-};
-
-let mainWindow;
-let currentFile = null; // This will now represent the active tab's file
-let pandocAvailable = null; // Cache pandoc availability check
-let wordTemplatePath = null; // Path to selected Word template
-let templateStartPage = 3; // Which page to start inserting content (default: page 3)
-let rendererReady = false; // Track if renderer is ready to receive file data
-
-// Header & Footer Settings
-let headerFooterSettings = {
- enabled: true,
- header: {
- left: '',
- center: '',
- right: '',
- logo: null // Will store image file path
- },
- footer: {
- left: '',
- center: '$PAGE$ of $TOTAL$',
- right: '',
- logo: null
- }
-};
-
-// Page Size Definitions (in twentieths of a point for Word, mm/inches for Pandoc)
-const PAGE_SIZES = {
- a4: {
- name: 'A4',
- pandoc: 'a4',
- word: { width: 11906, height: 16838 }, // 210×297mm
- dimensions: '210×297mm'
- },
- a3: {
- name: 'A3',
- pandoc: 'a3',
- word: { width: 16838, height: 23811 }, // 297×420mm
- dimensions: '297×420mm'
- },
- a5: {
- name: 'A5',
- pandoc: 'a5',
- word: { width: 8391, height: 11906 }, // 148×210mm
- dimensions: '148×210mm'
- },
- b4: {
- name: 'B4',
- pandoc: 'b4',
- word: { width: 14170, height: 20015 }, // 250×353mm
- dimensions: '250×353mm'
- },
- b5: {
- name: 'B5',
- pandoc: 'b5',
- word: { width: 9979, height: 14170 }, // 176×250mm
- dimensions: '176×250mm'
- },
- letter: {
- name: 'Letter',
- pandoc: 'letter',
- word: { width: 12240, height: 15840 }, // 8.5×11in
- dimensions: '8.5×11in'
- },
- legal: {
- name: 'Legal',
- pandoc: 'legal',
- word: { width: 12240, height: 20160 }, // 8.5×14in
- dimensions: '8.5×14in'
- },
- tabloid: {
- name: 'Tabloid',
- pandoc: 'tabloid',
- word: { width: 15840, height: 24480 }, // 11×17in
- dimensions: '11×17in'
- }
-};
-
-// Default page settings
-let pageSettings = {
- size: 'a4',
- orientation: 'portrait',
- customWidth: null,
- customHeight: null
-};
-
-// Handle single instance lock for Windows file association
-// When a file is double-clicked and the app is already running,
-// Windows tries to start a second instance. We prevent this and
-// pass the file to the existing instance instead.
-const gotTheLock = app.requestSingleInstanceLock();
-
-if (!gotTheLock) {
- // Another instance is already running, quit this one
- app.quit();
-} else {
- // This is the first instance, handle second-instance events
- app.on('second-instance', (event, commandLine, workingDirectory) => {
- // Someone tried to run a second instance, focus our window instead
- if (mainWindow) {
- if (mainWindow.isMinimized()) mainWindow.restore();
- mainWindow.focus();
- }
-
- // Check if a file was passed to the second instance
- // commandLine is an array like: ['PanConverter.exe', 'file.md']
- console.log('[MAIN] Second instance commandLine:', JSON.stringify(commandLine));
- const startIndex = app.isPackaged ? 1 : 2;
- const fileArgs = commandLine.slice(startIndex);
- console.log('[MAIN] Second instance file args:', fileArgs);
- for (const arg of fileArgs) {
- if ((arg.endsWith('.md') || arg.endsWith('.markdown'))) {
- const resolvedPath = path.isAbsolute(arg) ? arg : path.resolve(workingDirectory, arg);
- console.log('[MAIN] Second instance resolved path:', resolvedPath);
- if (fs.existsSync(resolvedPath)) {
- // Open the file in the existing instance
- if (rendererReady) {
- openFileFromPath(resolvedPath);
- } else {
- app.pendingFile = resolvedPath;
- }
- break;
- }
- }
- }
- });
-}
-
-// Check if pandoc is available (using execFile for consistency)
-function checkPandocAvailability() {
- return new Promise((resolve) => {
- if (pandocAvailable !== null) {
- resolve(pandocAvailable);
- return;
- }
-
- execFile('pandoc', ['--version'], (error, stdout, stderr) => {
- pandocAvailable = !error;
- resolve(pandocAvailable);
- });
- });
-}
-
-function createWindow() {
- mainWindow = new BrowserWindow({
- width: 1200,
- height: 800,
- webPreferences: {
- nodeIntegration: true,
- contextIsolation: false
- },
- icon: path.join(__dirname, '../assets/icon.png')
- });
-
- mainWindow.loadFile(path.join(__dirname, 'index.html'));
-
- createMenu();
-
- mainWindow.on('closed', () => {
- mainWindow = null;
- });
-
- // Wait for the page to fully load before sending file data
- mainWindow.webContents.on('did-finish-load', () => {
- console.log('Window finished loading');
- // Don't open file here - wait for renderer-ready signal
- // The renderer will send renderer-ready when TabManager is initialized
- });
-}
-
-function buildRecentFilesMenu() {
- const recentFiles = getRecentFiles();
-
- if (recentFiles.length === 0) {
- return [
- {
- label: 'No recent files',
- enabled: false
- }
- ];
- }
-
- const recentFileItems = recentFiles.map(filePath => ({
- label: filePath.split(/[\\/]/).pop(), // Get filename only
- click: () => {
- if (fs.existsSync(filePath)) {
- 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.`);
- }
- },
- toolTip: filePath // Show full path in tooltip
- }));
-
- return [
- ...recentFileItems,
- { type: 'separator' },
- {
- label: 'Clear Recent Files',
- click: () => {
- mainWindow.webContents.send('clear-recent-files');
- }
- }
- ];
-}
-
-function getRecentFiles() {
- try {
- const recentFiles = JSON.parse(fs.readFileSync(path.join(app.getPath('userData'), 'recent-files.json'), 'utf-8'));
- return recentFiles.filter(file => fs.existsSync(file));
- } catch (e) {
- return [];
- }
-}
-
-function createMenu() {
- const template = [
- {
- label: 'File',
- submenu: [
- {
- label: 'New',
- accelerator: 'CmdOrCtrl+N',
- click: () => mainWindow.webContents.send('file-new')
- },
- {
- label: 'Open',
- accelerator: 'CmdOrCtrl+O',
- click: openFile
- },
- {
- label: 'Open PDF',
- accelerator: 'CmdOrCtrl+Shift+O',
- click: openPdfFile
- },
- {
- label: 'Save',
- accelerator: 'CmdOrCtrl+S',
- click: () => mainWindow.webContents.send('file-save')
- },
- {
- label: 'Save As',
- accelerator: 'CmdOrCtrl+Shift+S',
- click: saveAsFile
- },
- { type: 'separator' },
- {
- label: 'Print',
- submenu: [
- {
- label: 'Print Preview',
- accelerator: 'CmdOrCtrl+P',
- click: () => mainWindow.webContents.send('print-preview')
- },
- {
- label: 'Print Preview (With Styles)',
- click: () => mainWindow.webContents.send('print-preview-styled')
- }
- ]
- },
- { type: 'separator' },
- {
- label: 'Recent Files',
- submenu: buildRecentFilesMenu()
- },
- { type: 'separator' },
- {
- label: 'Import Document...',
- accelerator: 'CmdOrCtrl+I',
- click: importDocument
- },
- {
- label: 'Export',
- submenu: [
- { label: 'HTML', click: () => exportFile('html') },
- { label: 'PDF', click: () => exportFile('pdf') },
- { label: 'PDF (Enhanced)', click: () => exportPDFViaWordTemplate(), accelerator: 'Ctrl+Shift+P' },
- { label: 'DOCX', click: () => exportFile('docx') },
- { label: 'DOCX (Enhanced)', click: () => exportWordWithTemplate(), accelerator: 'Ctrl+Shift+W' },
- { label: 'LaTeX', click: () => exportFile('latex') },
- { label: 'RTF', click: () => exportFile('rtf') },
- { label: 'ODT', click: () => exportFile('odt') },
- { label: 'EPUB', click: () => exportFile('epub') },
- { type: 'separator' },
- { label: 'PowerPoint (PPTX)', click: () => exportFile('pptx') },
- { label: 'OpenDocument Presentation (ODP)', click: () => exportFile('odp') },
- { type: 'separator' },
- { label: 'CSV (Tables)', click: () => exportSpreadsheet('csv') },
- ]
- },
- { type: 'separator' },
- {
- label: 'Select Word Template...',
- click: selectWordTemplate
- },
- {
- label: 'Template Settings...',
- click: showTemplateSettings
- },
- {
- label: 'Header & Footer Settings...',
- click: () => {
- if (mainWindow) {
- mainWindow.webContents.send('open-header-footer-dialog');
- }
- }
- },
- { type: 'separator' },
- {
- label: 'Quit',
- accelerator: process.platform === 'darwin' ? 'Cmd+Q' : 'Ctrl+Q',
- click: () => app.quit()
- }
- ]
- },
- {
- label: 'Edit',
- submenu: [
- {
- label: 'Undo',
- accelerator: 'CmdOrCtrl+Z',
- click: () => mainWindow.webContents.send('undo')
- },
- {
- label: 'Redo',
- accelerator: 'CmdOrCtrl+Shift+Z',
- click: () => mainWindow.webContents.send('redo')
- },
- { type: 'separator' },
- { label: 'Cut', accelerator: 'CmdOrCtrl+X', role: 'cut' },
- { label: 'Copy', accelerator: 'CmdOrCtrl+C', role: 'copy' },
- { label: 'Paste', accelerator: 'CmdOrCtrl+V', role: 'paste' },
- { label: 'Select All', accelerator: 'CmdOrCtrl+A', role: 'selectAll' },
- { type: 'separator' },
- {
- label: 'Find & Replace',
- accelerator: 'CmdOrCtrl+F',
- click: () => mainWindow.webContents.send('toggle-find')
- }
- ]
- },
- {
- label: 'View',
- submenu: [
- {
- label: 'Toggle Preview',
- accelerator: 'CmdOrCtrl+Shift+P',
- click: () => mainWindow.webContents.send('toggle-preview')
- },
- {
- label: 'Theme',
- submenu: [
- // Light Themes (grouped first)
- { label: 'Atom One Light (Default)', click: () => setTheme('atomonelight') },
- { label: 'GitHub Light', click: () => setTheme('github') },
- { label: 'Light', click: () => setTheme('light') },
- { label: 'Solarized Light', click: () => setTheme('solarized') },
- { label: 'Gruvbox Light', click: () => setTheme('gruvbox-light') },
- { label: 'Ayu Light', click: () => setTheme('ayu-light') },
- { label: 'Sepia', click: () => setTheme('sepia') },
- { label: 'Paper', click: () => setTheme('paper') },
- { label: 'Rose Pine Dawn', click: () => setTheme('rosepine-dawn') },
- { label: 'Concrete Light', click: () => setTheme('concrete-light') },
- { type: 'separator' },
- // Dark Themes
- { label: 'Dark', click: () => setTheme('dark') },
- { label: 'One Dark', click: () => setTheme('onedark') },
- { label: 'Dracula', click: () => setTheme('dracula') },
- { label: 'Nord', click: () => setTheme('nord') },
- { label: 'Monokai', click: () => setTheme('monokai') },
- { label: 'Material', click: () => setTheme('material') },
- { label: 'Gruvbox Dark', click: () => setTheme('gruvbox-dark') },
- { label: 'Tokyo Night', click: () => setTheme('tokyonight') },
- { label: 'Palenight', click: () => setTheme('palenight') },
- { label: 'Ayu Dark', click: () => setTheme('ayu-dark') },
- { label: 'Ayu Mirage', click: () => setTheme('ayu-mirage') },
- { label: 'Oceanic Next', click: () => setTheme('oceanic-next') },
- { label: 'Cobalt2', click: () => setTheme('cobalt2') },
- { label: 'Concrete Dark', click: () => setTheme('concrete-dark') },
- { label: 'Concrete Warm', click: () => setTheme('concrete-warm') }
- ]
- },
- { type: 'separator' },
- {
- label: 'Font Size',
- submenu: [
- {
- label: 'Increase Font Size',
- accelerator: 'CmdOrCtrl+Shift+Plus',
- click: () => mainWindow.webContents.send('adjust-font-size', 'increase')
- },
- {
- label: 'Decrease Font Size',
- accelerator: 'CmdOrCtrl+Shift+-',
- click: () => mainWindow.webContents.send('adjust-font-size', 'decrease')
- },
- {
- label: 'Reset Font Size',
- accelerator: 'CmdOrCtrl+Shift+0',
- click: () => mainWindow.webContents.send('adjust-font-size', 'reset')
- }
- ]
- },
- { type: 'separator' },
- { label: 'Reload', accelerator: 'CmdOrCtrl+R', role: 'reload' },
- { label: 'Toggle DevTools', accelerator: 'F12', role: 'toggleDevTools' },
- { type: 'separator' },
- { label: 'Zoom In', accelerator: 'CmdOrCtrl+Plus', role: 'zoomIn' },
- { label: 'Zoom Out', accelerator: 'CmdOrCtrl+-', role: 'zoomOut' },
- { label: 'Reset Zoom', accelerator: 'CmdOrCtrl+0', role: 'resetZoom' }
- ]
- },
- {
- label: 'Batch',
- submenu: [
- {
- label: 'Convert Markdown Folder...',
- click: () => showBatchConversionDialog()
- },
- { type: 'separator' },
- {
- label: 'Batch Image Conversion...',
- click: () => mainWindow.webContents.send('show-batch-converter', 'image')
- },
- {
- label: 'Batch Audio Conversion...',
- click: () => mainWindow.webContents.send('show-batch-converter', 'audio')
- },
- {
- label: 'Batch Video Conversion...',
- click: () => mainWindow.webContents.send('show-batch-converter', 'video')
- },
- {
- label: 'Batch PDF Conversion...',
- click: () => mainWindow.webContents.send('show-batch-converter', 'pdf')
- }
- ]
- },
- {
- label: 'Convert',
- submenu: [
- {
- label: 'Universal File Converter...',
- accelerator: 'CmdOrCtrl+Shift+C',
- click: () => showUniversalConverterDialog()
- }
- ]
- },
- {
- label: 'PDF Editor',
- submenu: [
- {
- label: 'Open PDF File...',
- accelerator: 'CmdOrCtrl+Shift+O',
- click: () => openPDFFile()
- },
- { type: 'separator' },
- {
- label: 'Merge PDFs...',
- click: () => showPDFEditorDialog('merge')
- },
- {
- label: 'Split PDF...',
- click: () => showPDFEditorDialog('split')
- },
- {
- label: 'Compress PDF...',
- click: () => showPDFEditorDialog('compress')
- },
- {
- type: 'separator'
- },
- {
- label: 'Rotate Pages...',
- click: () => showPDFEditorDialog('rotate')
- },
- {
- label: 'Delete Pages...',
- click: () => showPDFEditorDialog('delete')
- },
- {
- label: 'Reorder Pages...',
- click: () => showPDFEditorDialog('reorder')
- },
- {
- type: 'separator'
- },
- {
- label: 'Add Watermark...',
- click: () => showPDFEditorDialog('watermark')
- },
- {
- type: 'separator'
- },
- {
- label: 'Security',
- submenu: [
- {
- label: 'Add Password Protection...',
- click: () => showPDFEditorDialog('encrypt')
- },
- {
- label: 'Remove Password...',
- click: () => showPDFEditorDialog('decrypt')
- },
- {
- label: 'Set Permissions...',
- click: () => showPDFEditorDialog('permissions')
- }
- ]
- },
- {
- type: 'separator'
- },
- {
- label: 'About PDF Editor',
- click: () => {
- dialog.showMessageBox(mainWindow, {
- type: 'info',
- title: 'About PDF Editor',
- message: 'PDF Editor',
- detail: 'Comprehensive PDF editing capabilities powered by pdf-lib.\n\nFeatures:\n• Merge multiple PDF files\n• Split PDF into separate files\n• Compress PDF to reduce file size\n• Rotate pages (90°, 180°, 270°)\n• Delete unwanted pages\n• Reorder pages\n• Add text watermarks\n\nSecurity Features:\n• Password protection (encryption)\n• Remove passwords (decryption)\n• Set document permissions\n\n100% offline and open-source.',
- buttons: ['OK']
- });
- }
- }
- ]
- },
- {
- label: 'Tools',
- submenu: [
- {
- label: 'Table Generator',
- accelerator: 'CmdOrCtrl+Shift+T',
- click: () => openTableGenerator()
- },
- {
- label: 'ASCII Art Generator',
- accelerator: 'CmdOrCtrl+Shift+A',
- click: () => openAsciiGenerator()
- },
- { type: 'separator' },
- {
- label: 'Document Compare',
- click: () => mainWindow.webContents.send('show-document-compare')
- }
- ]
- },
- {
- label: 'Help',
- submenu: [
- {
- label: 'About MarkdownConverter',
- click: () => showAboutDialog()
- },
- { type: 'separator' },
- {
- label: 'Dependencies & Requirements',
- click: () => showDependenciesDialog()
- },
- { type: 'separator' },
- {
- label: 'Documentation',
- click: () => shell.openExternal('https://github.com/amitwh/markdown-converter')
- },
- {
- label: 'Report Issue',
- click: () => shell.openExternal('https://github.com/amitwh/markdown-converter/issues')
- },
- {
- label: 'Check for Updates',
- click: () => shell.openExternal('https://github.com/amitwh/markdown-converter/releases')
- }
- ]
- }
- ];
-
- const menu = Menu.buildFromTemplate(template);
- Menu.setApplicationMenu(menu);
-}
-
-// Show About Dialog with logo
-function showAboutDialog() {
- const aboutWindow = new BrowserWindow({
- width: 500,
- height: 600,
- parent: mainWindow,
- modal: true,
- resizable: false,
- minimizable: false,
- maximizable: false,
- webPreferences: {
- nodeIntegration: false,
- contextIsolation: true
- },
- icon: path.join(__dirname, '../assets/icon.png')
- });
-
- // Convert images to base64 for data URL compatibility
- let logoBase64 = '';
- let iconBase64 = '';
- try {
- const logoPath = path.join(__dirname, '../assets/logo.png');
- const iconPath = path.join(__dirname, '../assets/icon.png');
- if (fs.existsSync(logoPath)) {
- logoBase64 = 'data:image/png;base64,' + fs.readFileSync(logoPath).toString('base64');
- }
- if (fs.existsSync(iconPath)) {
- iconBase64 = 'data:image/png;base64,' + fs.readFileSync(iconPath).toString('base64');
- }
- } catch (e) {
- console.error('Error loading about dialog images:', e);
- }
-
- const aboutHTML = `
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ MarkdownConverter
+
+
+ MarkdownConverter
+
+ v3.0.0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ MarkdownConverter
-Version 3.0.0
-
-
- by
- 
-
-
-
-
-
-
-
-
-
-`;
-
- aboutWindow.loadURL('data:text/html;charset=utf-8,' + encodeURIComponent(aboutHTML));
- aboutWindow.setMenuBarVisibility(false);
-}
-
-// Show Dependencies Dialog
-function showDependenciesDialog() {
- const depsWindow = new BrowserWindow({
- width: 600,
- height: 700,
- parent: mainWindow,
- modal: true,
- resizable: true,
- webPreferences: {
- nodeIntegration: false,
- contextIsolation: true
- },
- icon: path.join(__dirname, '../assets/icon.png')
- });
-
- const depsHTML = `
-
-
-
-
- Features
--
-
- Professional Markdown editing with syntax highlighting -
- Universal file converter (Image, Audio, Video, PDF) -
- Batch conversion for all media types -
- Advanced PDF Editor (merge, split, watermark, encrypt) -
- Export to PDF, DOCX, HTML, LaTeX, EPUB & more -
- 23+ beautiful themes including ConcreteInfo theme -
- ASCII Art & Table generators -
- Code file syntax highlighting -
Dependencies & Requirements
- -Required Dependencies
- -
-
-
- Pandoc Required
- Universal document converter. Required for most export formats (PDF, DOCX, LaTeX, EPUB).
- https://pandoc.org/installing.html
- Optional Dependencies (for extended features)
- -
-
-
- FFmpeg Optional
- Required for audio/video conversion and processing.
- https://ffmpeg.org/download.html
-
-
-
- ImageMagick Optional
- Required for image format conversion and processing.
- https://imagemagick.org/script/download.php
-
-
-
- LibreOffice Optional
- Required for enhanced document conversion (Office formats).
- https://www.libreoffice.org/download/download/
-
-
-
- MiKTeX / TeX Live Optional
- Required for PDF export via LaTeX (higher quality PDFs).
- https://miktex.org/download
- Bundled Libraries
- -
-
-
- pdf-lib
- PDF manipulation library for merge, split, watermark, and encryption features.
-
-
-
- marked
- Markdown parser for preview rendering.
-
-
-
- highlight.js
- Syntax highlighting for code blocks.
-
-
-
-`;
-
- depsWindow.loadURL('data:text/html;charset=utf-8,' + encodeURIComponent(depsHTML));
- depsWindow.setMenuBarVisibility(false);
-}
-
-// Open PDF File for viewing/editing
-function openPDFFile() {
- const files = dialog.showOpenDialogSync(mainWindow, {
- properties: ['openFile'],
- filters: [
- { name: 'PDF Files', extensions: ['pdf'] }
- ]
- });
-
- if (files && files[0]) {
- mainWindow.webContents.send('open-pdf-viewer', files[0]);
- }
-}
-
-function openFile() {
- const files = dialog.showOpenDialogSync(mainWindow, {
- properties: ['openFile'],
- filters: [
- { name: 'Markdown', extensions: ['md', 'markdown'] },
- { name: 'All Files', extensions: ['*'] }
- ]
- });
-
- if (files && files[0]) {
- currentFile = files[0];
- const content = fs.readFileSync(currentFile, 'utf-8');
- mainWindow.webContents.send('file-opened', { path: currentFile, content });
- }
-}
-
-function openPdfFile() {
- const files = dialog.showOpenDialogSync(mainWindow, {
- properties: ['openFile'],
- filters: [
- { name: 'PDF Files', extensions: ['pdf'] },
- { name: 'All Files', extensions: ['*'] }
- ]
- });
-
- if (files && files[0]) {
- mainWindow.webContents.send('open-pdf-file', files[0]);
- }
-}
-
-function saveAsFile() {
- const file = dialog.showSaveDialogSync(mainWindow, {
- defaultExt: '.md',
- filters: [
- { name: 'Markdown', extensions: ['md', 'markdown'] },
- { name: 'All Files', extensions: ['*'] }
- ]
- });
-
- if (file) {
- currentFile = file;
- mainWindow.webContents.send('get-content-for-save', file);
- }
-}
-
-function exportFile(format) {
- if (!currentFile) {
- dialog.showErrorBox('Error', 'Please save the file first');
- return;
- }
-
- // Show export options dialog
- showExportOptionsDialog(format);
-}
-
-function showExportOptionsDialog(format) {
- mainWindow.webContents.send('show-export-dialog', format);
-}
-
-function showBatchConversionDialog() {
- mainWindow.webContents.send('show-batch-dialog');
-}
-
-// Select Word Template
-async function selectWordTemplate() {
- const result = await dialog.showOpenDialog(mainWindow, {
- title: 'Select Word Template',
- filters: [{ name: 'Word Document', extensions: ['docx'] }],
- properties: ['openFile']
- });
-
- if (!result.canceled && result.filePaths.length > 0) {
- wordTemplatePath = result.filePaths[0];
- store.set('wordTemplatePath', wordTemplatePath);
-
- dialog.showMessageBox(mainWindow, {
- type: 'info',
- title: 'Template Selected',
- message: 'Word template has been updated',
- detail: `Template: ${path.basename(wordTemplatePath)}`
- });
- }
-}
-
-// Template Settings Dialog
-async function showTemplateSettings() {
- const result = await dialog.showMessageBox(mainWindow, {
- type: 'question',
- title: 'Template Settings',
- message: 'Configure Word Template Export',
- detail: `Current template: ${wordTemplatePath ? path.basename(wordTemplatePath) : 'Default template'}\nContent starts from page: ${templateStartPage}\n\nWhich page should content start from?\n(Templates usually have cover pages, TOC, etc.)`,
- buttons: ['Page 1', 'Page 2', 'Page 3', 'Page 4', 'Page 5', 'Custom...', 'Cancel'],
- defaultId: templateStartPage - 1,
- cancelId: 6
- });
-
- if (result.response === 6) return; // Cancel
-
- let newStartPage;
- if (result.response === 5) { // Custom
- // Show input dialog for custom page number
- mainWindow.webContents.send('show-custom-start-page-dialog', templateStartPage);
- } else {
- newStartPage = result.response + 1; // Convert button index to page number
- templateStartPage = newStartPage;
- store.set('templateStartPage', templateStartPage);
-
- dialog.showMessageBox(mainWindow, {
- type: 'info',
- title: 'Settings Updated',
- message: 'Template settings have been updated',
- detail: `Content will now start from page ${templateStartPage}`
- });
- }
-}
-
-// Handle custom start page input from renderer
-ipcMain.on('set-custom-start-page', (event, pageNumber) => {
- const page = parseInt(pageNumber);
- if (page >= 1 && page <= 100) {
- templateStartPage = page;
- store.set('templateStartPage', templateStartPage);
-
- dialog.showMessageBox(mainWindow, {
- type: 'info',
- title: 'Settings Updated',
- message: 'Template settings have been updated',
- detail: `Content will now start from page ${templateStartPage}`
- });
- } else {
- dialog.showErrorBox('Invalid Page Number', 'Please enter a page number between 1 and 100');
- }
-});
-
-// Header & Footer Settings IPC Handlers
-
-// Get current header/footer settings
-ipcMain.on('get-header-footer-settings', (event) => {
- event.reply('header-footer-settings-data', headerFooterSettings);
-});
-
-// Save header/footer settings
-ipcMain.on('save-header-footer-settings', (event, settings) => {
- headerFooterSettings = settings;
- store.set('headerFooterSettings', headerFooterSettings);
-
- dialog.showMessageBox(mainWindow, {
- type: 'info',
- title: 'Settings Saved',
- message: 'Header and footer settings have been saved successfully!',
- buttons: ['OK']
- });
-});
-
-// Get current page settings
-ipcMain.on('get-page-settings', (event) => {
- event.reply('page-settings-data', pageSettings);
-});
-
-// Update page settings from export dialog
-ipcMain.on('update-page-settings', (event, settings) => {
- pageSettings = settings;
- store.set('pageSettings', pageSettings);
- console.log('Page settings updated:', pageSettings);
-});
-
-// Save header/footer logo image
-// Browse for header/footer logo
-ipcMain.on('browse-header-footer-logo', async (event, position) => {
- try {
- const result = await dialog.showOpenDialog(mainWindow, {
- title: `Select ${position.charAt(0).toUpperCase() + position.slice(1)} Logo/Image`,
- filters: [
- { name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp'] }
- ],
- properties: ['openFile']
- });
-
- if (!result.canceled && result.filePaths.length > 0) {
- const filePath = result.filePaths[0];
-
- // Copy image to userData directory for persistent storage
- const userDataPath = app.getPath('userData');
- const logoDir = path.join(userDataPath, 'logos');
-
- // Create logos directory if it doesn't exist
- if (!fs.existsSync(logoDir)) {
- fs.mkdirSync(logoDir, { recursive: true });
- }
-
- // Generate unique filename
- const ext = path.extname(filePath);
- const filename = `${position}_${Date.now()}${ext}`;
- const destPath = path.join(logoDir, filename);
-
- // Copy file
- fs.copyFileSync(filePath, destPath);
-
- // Update settings
- if (position === 'header') {
- headerFooterSettings.header.logo = destPath;
- } else if (position === 'footer') {
- headerFooterSettings.footer.logo = destPath;
- }
-
- event.reply('header-footer-logo-saved', { position, path: destPath });
- }
- } catch (error) {
- console.error('Logo browse error:', error);
- dialog.showErrorBox('Logo Error', `Failed to select logo: ${error.message}`);
- }
-});
-
-ipcMain.on('save-header-footer-logo', async (event, { position, filePath }) => {
- try {
- if (!filePath) {
- dialog.showErrorBox('Logo Error', 'Failed to save logo: The "path" argument must be of type string. Received undefined');
- return;
- }
-
- // Copy image to userData directory for persistent storage
- const userDataPath = app.getPath('userData');
- const logoDir = path.join(userDataPath, 'logos');
-
- // Create logos directory if it doesn't exist
- if (!fs.existsSync(logoDir)) {
- fs.mkdirSync(logoDir, { recursive: true });
- }
-
- // Verify source file exists
- if (!fs.existsSync(filePath)) {
- dialog.showErrorBox('Logo Error', `Source file not found: ${filePath}`);
- return;
- }
-
- // Generate unique filename
- const ext = path.extname(filePath);
- const filename = `${position}_${Date.now()}${ext}`;
- const destPath = path.join(logoDir, filename);
-
- // Copy file
- fs.copyFileSync(filePath, destPath);
-
- // Update settings
- if (position === 'header') {
- headerFooterSettings.header.logo = destPath;
- } else if (position === 'footer') {
- headerFooterSettings.footer.logo = destPath;
- }
-
- 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}`);
- }
-});
-
-// Clear header/footer logo
-ipcMain.on('clear-header-footer-logo', (event, position) => {
- if (position === 'header') {
- headerFooterSettings.header.logo = null;
- } else if (position === 'footer') {
- headerFooterSettings.footer.logo = null;
- }
- event.reply('header-footer-logo-cleared', position);
-});
-
-// Helper function to process dynamic fields in header/footer text
-function processDynamicFields(text, metadata = {}) {
- if (!text) return '';
-
- const now = new Date();
- const dateStr = now.toLocaleDateString();
- const timeStr = now.toLocaleTimeString();
-
- let result = text;
- result = result.replace(/\$DATE\$/g, dateStr);
- result = result.replace(/\$TIME\$/g, timeStr);
- result = result.replace(/\$TITLE\$/g, metadata.title || 'Untitled');
- result = result.replace(/\$AUTHOR\$/g, metadata.author || '');
- result = result.replace(/\$FILENAME\$/g, metadata.filename || '');
-
- // Note: $PAGE$ and $TOTAL$ are handled by Pandoc/export tools
-
- return result;
-}
-
-// Add headers/footers to DOCX file using PizZip and docx4js
-// Function to set page size in DOCX files
-async function setDocxPageSize(docxPath) {
- try {
- const PizZip = require('pizzip');
-
- // Read the DOCX file
- const docxBuffer = fs.readFileSync(docxPath);
- const zip = new PizZip(docxBuffer);
-
- // Get document.xml
- let documentXml = zip.file('word/document.xml').asText();
-
- // Get page dimensions
- let width, height;
- const pageSize = PAGE_SIZES[pageSettings.size];
-
- if (pageSize) {
- width = pageSize.word.width;
- height = pageSize.word.height;
- } else if (pageSettings.customWidth && pageSettings.customHeight) {
- // Parse custom dimensions (convert to twentieths of a point)
- // Note: This is simplified - production code should handle various units
- width = parseInt(pageSettings.customWidth) || 11906;
- height = parseInt(pageSettings.customHeight) || 16838;
- } else {
- // Default to A4
- width = 11906;
- height = 16838;
- }
-
- // Swap dimensions for landscape
- if (pageSettings.orientation === 'landscape') {
- [width, height] = [height, width];
- }
-
- // Update all DOMPurify
- HTML sanitization for security.
- MarkdownConverter
+Version 3.0.0
+
+
+ by
+
+
+
+
+
+
+
+
+
+
+`;
+
+ aboutWindow.loadURL('data:text/html;charset=utf-8,' + encodeURIComponent(aboutHTML));
+ aboutWindow.setMenuBarVisibility(false);
+}
+
+// Show Dependencies Dialog
+function showDependenciesDialog() {
+ const depsWindow = new BrowserWindow({
+ width: 600,
+ height: 700,
+ parent: mainWindow,
+ modal: true,
+ resizable: true,
+ webPreferences: {
+ nodeIntegration: false,
+ contextIsolation: true
+ },
+ icon: path.join(__dirname, '../assets/icon.png')
+ });
+
+ const depsHTML = `
+
+
+
+
+ Features
+-
+
- Professional Markdown editing with syntax highlighting +
- Universal file converter (Image, Audio, Video, PDF) +
- Batch conversion for all media types +
- Advanced PDF Editor (merge, split, watermark, encrypt) +
- Export to PDF, DOCX, HTML, LaTeX, EPUB & more +
- 23+ beautiful themes including ConcreteInfo theme +
- ASCII Art & Table generators +
- Code file syntax highlighting +
Dependencies & Requirements
+ +Required Dependencies
+ +
+
+
+ Pandoc Required
+ Universal document converter. Required for most export formats (PDF, DOCX, LaTeX, EPUB).
+ https://pandoc.org/installing.html
+ Optional Dependencies (for extended features)
+ +
+
+
+ FFmpeg Optional
+ Required for audio/video conversion and processing.
+ https://ffmpeg.org/download.html
+
+
+
+ ImageMagick Optional
+ Required for image format conversion and processing.
+ https://imagemagick.org/script/download.php
+
+
+
+ LibreOffice Optional
+ Required for enhanced document conversion (Office formats).
+ https://www.libreoffice.org/download/download/
+
+
+
+ MiKTeX / TeX Live Optional
+ Required for PDF export via LaTeX (higher quality PDFs).
+ https://miktex.org/download
+ Bundled Libraries
+ +
+
+
+ pdf-lib
+ PDF manipulation library for merge, split, watermark, and encryption features.
+
+
+
+ marked
+ Markdown parser for preview rendering.
+
+
+
+ highlight.js
+ Syntax highlighting for code blocks.
+
+
+
+`;
+
+ depsWindow.loadURL('data:text/html;charset=utf-8,' + encodeURIComponent(depsHTML));
+ depsWindow.setMenuBarVisibility(false);
+}
+
+// Open PDF File for viewing/editing
+function openPDFFile() {
+ const files = dialog.showOpenDialogSync(mainWindow, {
+ properties: ['openFile'],
+ filters: [
+ { name: 'PDF Files', extensions: ['pdf'] }
+ ]
+ });
+
+ if (files && files[0]) {
+ mainWindow.webContents.send('open-pdf-viewer', files[0]);
+ }
+}
+
+function openFile() {
+ const files = dialog.showOpenDialogSync(mainWindow, {
+ properties: ['openFile'],
+ filters: [
+ { name: 'Markdown', extensions: ['md', 'markdown'] },
+ { name: 'All Files', extensions: ['*'] }
+ ]
+ });
+
+ if (files && files[0]) {
+ currentFile = files[0];
+ const content = fs.readFileSync(currentFile, 'utf-8');
+ mainWindow.webContents.send('file-opened', { path: currentFile, content });
+ }
+}
+
+function openPdfFile() {
+ const files = dialog.showOpenDialogSync(mainWindow, {
+ properties: ['openFile'],
+ filters: [
+ { name: 'PDF Files', extensions: ['pdf'] },
+ { name: 'All Files', extensions: ['*'] }
+ ]
+ });
+
+ if (files && files[0]) {
+ mainWindow.webContents.send('open-pdf-file', files[0]);
+ }
+}
+
+function saveAsFile() {
+ const file = dialog.showSaveDialogSync(mainWindow, {
+ defaultExt: '.md',
+ filters: [
+ { name: 'Markdown', extensions: ['md', 'markdown'] },
+ { name: 'All Files', extensions: ['*'] }
+ ]
+ });
+
+ if (file) {
+ currentFile = file;
+ mainWindow.webContents.send('get-content-for-save', file);
+ }
+}
+
+function exportFile(format) {
+ if (!currentFile) {
+ dialog.showErrorBox('Error', 'Please save the file first');
+ return;
+ }
+
+ // Show export options dialog
+ showExportOptionsDialog(format);
+}
+
+function showExportOptionsDialog(format) {
+ mainWindow.webContents.send('show-export-dialog', format);
+}
+
+function showBatchConversionDialog() {
+ mainWindow.webContents.send('show-batch-dialog');
+}
+
+// Select Word Template
+async function selectWordTemplate() {
+ const result = await dialog.showOpenDialog(mainWindow, {
+ title: 'Select Word Template',
+ filters: [{ name: 'Word Document', extensions: ['docx'] }],
+ properties: ['openFile']
+ });
+
+ if (!result.canceled && result.filePaths.length > 0) {
+ wordTemplatePath = result.filePaths[0];
+ store.set('wordTemplatePath', wordTemplatePath);
+
+ dialog.showMessageBox(mainWindow, {
+ type: 'info',
+ title: 'Template Selected',
+ message: 'Word template has been updated',
+ detail: `Template: ${path.basename(wordTemplatePath)}`
+ });
+ }
+}
+
+// Template Settings Dialog
+async function showTemplateSettings() {
+ const result = await dialog.showMessageBox(mainWindow, {
+ type: 'question',
+ title: 'Template Settings',
+ message: 'Configure Word Template Export',
+ detail: `Current template: ${wordTemplatePath ? path.basename(wordTemplatePath) : 'Default template'}\nContent starts from page: ${templateStartPage}\n\nWhich page should content start from?\n(Templates usually have cover pages, TOC, etc.)`,
+ buttons: ['Page 1', 'Page 2', 'Page 3', 'Page 4', 'Page 5', 'Custom...', 'Cancel'],
+ defaultId: templateStartPage - 1,
+ cancelId: 6
+ });
+
+ if (result.response === 6) return; // Cancel
+
+ let newStartPage;
+ if (result.response === 5) { // Custom
+ // Show input dialog for custom page number
+ mainWindow.webContents.send('show-custom-start-page-dialog', templateStartPage);
+ } else {
+ newStartPage = result.response + 1; // Convert button index to page number
+ templateStartPage = newStartPage;
+ store.set('templateStartPage', templateStartPage);
+
+ dialog.showMessageBox(mainWindow, {
+ type: 'info',
+ title: 'Settings Updated',
+ message: 'Template settings have been updated',
+ detail: `Content will now start from page ${templateStartPage}`
+ });
+ }
+}
+
+// Handle custom start page input from renderer
+ipcMain.on('set-custom-start-page', (event, pageNumber) => {
+ const page = parseInt(pageNumber);
+ if (page >= 1 && page <= 100) {
+ templateStartPage = page;
+ store.set('templateStartPage', templateStartPage);
+
+ dialog.showMessageBox(mainWindow, {
+ type: 'info',
+ title: 'Settings Updated',
+ message: 'Template settings have been updated',
+ detail: `Content will now start from page ${templateStartPage}`
+ });
+ } else {
+ dialog.showErrorBox('Invalid Page Number', 'Please enter a page number between 1 and 100');
+ }
+});
+
+// Header & Footer Settings IPC Handlers
+
+// Get current header/footer settings
+ipcMain.on('get-header-footer-settings', (event) => {
+ event.reply('header-footer-settings-data', headerFooterSettings);
+});
+
+// Save header/footer settings
+ipcMain.on('save-header-footer-settings', (event, settings) => {
+ headerFooterSettings = settings;
+ store.set('headerFooterSettings', headerFooterSettings);
+
+ dialog.showMessageBox(mainWindow, {
+ type: 'info',
+ title: 'Settings Saved',
+ message: 'Header and footer settings have been saved successfully!',
+ buttons: ['OK']
+ });
+});
+
+// Get current page settings
+ipcMain.on('get-page-settings', (event) => {
+ event.reply('page-settings-data', pageSettings);
+});
+
+// Update page settings from export dialog
+ipcMain.on('update-page-settings', (event, settings) => {
+ pageSettings = settings;
+ store.set('pageSettings', pageSettings);
+ console.log('Page settings updated:', pageSettings);
+});
+
+// Save header/footer logo image
+// Browse for header/footer logo
+ipcMain.on('browse-header-footer-logo', async (event, position) => {
+ try {
+ const result = await dialog.showOpenDialog(mainWindow, {
+ title: `Select ${position.charAt(0).toUpperCase() + position.slice(1)} Logo/Image`,
+ filters: [
+ { name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'webp'] }
+ ],
+ properties: ['openFile']
+ });
+
+ if (!result.canceled && result.filePaths.length > 0) {
+ const filePath = result.filePaths[0];
+
+ // Copy image to userData directory for persistent storage
+ const userDataPath = app.getPath('userData');
+ const logoDir = path.join(userDataPath, 'logos');
+
+ // Create logos directory if it doesn't exist
+ if (!fs.existsSync(logoDir)) {
+ fs.mkdirSync(logoDir, { recursive: true });
+ }
+
+ // Generate unique filename
+ const ext = path.extname(filePath);
+ const filename = `${position}_${Date.now()}${ext}`;
+ const destPath = path.join(logoDir, filename);
+
+ // Copy file
+ fs.copyFileSync(filePath, destPath);
+
+ // Update settings
+ if (position === 'header') {
+ headerFooterSettings.header.logo = destPath;
+ } else if (position === 'footer') {
+ headerFooterSettings.footer.logo = destPath;
+ }
+
+ event.reply('header-footer-logo-saved', { position, path: destPath });
+ }
+ } catch (error) {
+ console.error('Logo browse error:', error);
+ dialog.showErrorBox('Logo Error', `Failed to select logo: ${error.message}`);
+ }
+});
+
+ipcMain.on('save-header-footer-logo', async (event, { position, filePath }) => {
+ try {
+ if (!filePath) {
+ dialog.showErrorBox('Logo Error', 'Failed to save logo: The "path" argument must be of type string. Received undefined');
+ return;
+ }
+
+ // Copy image to userData directory for persistent storage
+ const userDataPath = app.getPath('userData');
+ const logoDir = path.join(userDataPath, 'logos');
+
+ // Create logos directory if it doesn't exist
+ if (!fs.existsSync(logoDir)) {
+ fs.mkdirSync(logoDir, { recursive: true });
+ }
+
+ // Verify source file exists
+ if (!fs.existsSync(filePath)) {
+ dialog.showErrorBox('Logo Error', `Source file not found: ${filePath}`);
+ return;
+ }
+
+ // Generate unique filename
+ const ext = path.extname(filePath);
+ const filename = `${position}_${Date.now()}${ext}`;
+ const destPath = path.join(logoDir, filename);
+
+ // Copy file
+ fs.copyFileSync(filePath, destPath);
+
+ // Update settings
+ if (position === 'header') {
+ headerFooterSettings.header.logo = destPath;
+ } else if (position === 'footer') {
+ headerFooterSettings.footer.logo = destPath;
+ }
+
+ 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}`);
+ }
+});
+
+// Clear header/footer logo
+ipcMain.on('clear-header-footer-logo', (event, position) => {
+ if (position === 'header') {
+ headerFooterSettings.header.logo = null;
+ } else if (position === 'footer') {
+ headerFooterSettings.footer.logo = null;
+ }
+ event.reply('header-footer-logo-cleared', position);
+});
+
+// Helper function to process dynamic fields in header/footer text
+function processDynamicFields(text, metadata = {}) {
+ if (!text) return '';
+
+ const now = new Date();
+ const dateStr = now.toLocaleDateString();
+ const timeStr = now.toLocaleTimeString();
+
+ let result = text;
+ result = result.replace(/\$DATE\$/g, dateStr);
+ result = result.replace(/\$TIME\$/g, timeStr);
+ result = result.replace(/\$TITLE\$/g, metadata.title || 'Untitled');
+ result = result.replace(/\$AUTHOR\$/g, metadata.author || '');
+ result = result.replace(/\$FILENAME\$/g, metadata.filename || '');
+
+ // Note: $PAGE$ and $TOTAL$ are handled by Pandoc/export tools
+
+ return result;
+}
+
+// Add headers/footers to DOCX file using PizZip and docx4js
+// Function to set page size in DOCX files
+async function setDocxPageSize(docxPath) {
+ try {
+ const PizZip = require('pizzip');
+
+ // Read the DOCX file
+ const docxBuffer = fs.readFileSync(docxPath);
+ const zip = new PizZip(docxBuffer);
+
+ // Get document.xml
+ let documentXml = zip.file('word/document.xml').asText();
+
+ // Get page dimensions
+ let width, height;
+ const pageSize = PAGE_SIZES[pageSettings.size];
+
+ if (pageSize) {
+ width = pageSize.word.width;
+ height = pageSize.word.height;
+ } else if (pageSettings.customWidth && pageSettings.customHeight) {
+ // Parse custom dimensions (convert to twentieths of a point)
+ // Note: This is simplified - production code should handle various units
+ width = parseInt(pageSettings.customWidth) || 11906;
+ height = parseInt(pageSettings.customHeight) || 16838;
+ } else {
+ // Default to A4
+ width = 11906;
+ height = 16838;
+ }
+
+ // Swap dimensions for landscape
+ if (pageSettings.orientation === 'landscape') {
+ [width, height] = [height, width];
+ }
+
+ // Update all DOMPurify
+ HTML sanitization for security.
+
-
-
-
-
-
-
-
-
- `;
-
- document.querySelector('.editor-container').appendChild(tabContent);
-
- // Directly attach input listener to the new editor
- const editor = document.getElementById(`editor-${tab.id}`);
- if (editor) {
- editor.addEventListener('input', () => {
- this.handleEditorInput(tab.id);
- });
-
- // Add scroll listener for line number sync
- editor.addEventListener('scroll', () => {
- if (this.showLineNumbers && this.activeTabId === tab.id) {
- const lineNumbers = document.getElementById(`line-numbers-${tab.id}`);
- if (lineNumbers) {
- lineNumbers.scrollTop = editor.scrollTop;
- }
- }
- });
- }
- }
-
- switchToTab(tabId) {
- if (!this.tabs.has(tabId)) return;
-
- // Save current tab state before switching
- if (this.activeTabId && this.tabs.has(this.activeTabId)) {
- this.saveCurrentTabState();
- }
-
- this.activeTabId = tabId;
- this.updateUI();
- this.restoreTabState(tabId);
- this.focusActiveEditor();
-
- // Notify main process about current file for exports
- const tab = this.tabs.get(tabId);
- if (tab?.filePath) {
- ipcRenderer.send('set-current-file', tab.filePath);
- }
- }
-
- switchToNextTab() {
- const tabIds = Array.from(this.tabs.keys());
- const currentIndex = tabIds.indexOf(this.activeTabId);
- const nextIndex = (currentIndex + 1) % tabIds.length;
- this.switchToTab(tabIds[nextIndex]);
- }
-
- closeTab(tabId) {
- if (this.tabs.size === 1) return; // Don't close the last tab
-
- const tab = this.tabs.get(tabId);
- if (tab.isDirty) {
- // Show confirmation dialog for unsaved changes
- const result = confirm('You have unsaved changes. Do you want to close this tab without saving?');
- if (!result) return;
- }
-
- // Remove tab elements
- const tabElement = document.querySelector(`[data-tab-id="${tabId}"]`);
- const tabContent = document.getElementById(`tab-content-${tabId}`);
-
- if (tabElement?.classList.contains('tab')) {
- tabElement.remove();
- }
- if (tabContent) {
- tabContent.remove();
- }
-
- this.tabs.delete(tabId);
-
- // Switch to another tab if this was active
- if (this.activeTabId === tabId) {
- const remainingTabs = Array.from(this.tabs.keys());
- this.switchToTab(remainingTabs[0]);
- }
-
- this.updateTabBar();
- }
-
- updateTabBar() {
- const tabBar = document.getElementById('tab-bar');
- const existingTabs = tabBar.querySelectorAll('.tab');
-
- // Remove all existing tab elements except the new tab button
- existingTabs.forEach(tab => tab.remove());
-
- // Add tabs in order
- const sortedTabs = Array.from(this.tabs.values()).sort((a, b) => a.id - b.id);
- const newTabBtn = document.getElementById('new-tab-btn');
-
- sortedTabs.forEach(tab => {
- const tabElement = document.createElement('div');
- tabElement.className = `tab ${tab.id === this.activeTabId ? 'active' : ''}`;
- tabElement.dataset.tabId = tab.id;
-
- const title = tab.filePath ?
- tab.filePath.split('/').pop() :
- tab.title;
-
- const dirtyIndicator = tab.isDirty ? ' •' : '';
-
- tabElement.innerHTML = `
- ${title}${dirtyIndicator}
-
- `;
-
- tabBar.insertBefore(tabElement, newTabBtn);
- });
- }
-
- updateUI() {
- // Show/hide tab contents
- document.querySelectorAll('.tab-content').forEach(content => {
- content.classList.remove('active');
- });
-
- const activeContent = document.getElementById(`tab-content-${this.activeTabId}`);
- if (activeContent) {
- activeContent.classList.add('active');
- }
-
- // Update preview visibility
- this.updatePreviewVisibility();
- this.updateLineNumbers();
- this.updateTabBar();
- }
-
- saveCurrentTabState() {
- const tab = this.tabs.get(this.activeTabId);
- if (!tab) return;
-
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (editor) {
- tab.content = editor.value;
- tab.isDirty = tab.content !== (tab.originalContent || '');
- }
- }
-
- restoreTabState(tabId) {
- const tab = this.tabs.get(tabId);
- if (!tab) return;
-
- const editor = document.getElementById(`editor-${tabId}`);
-
- if (editor) {
- editor.value = tab.content;
- this.updatePreview(tabId);
- this.updateWordCount();
- }
- }
-
- focusActiveEditor() {
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (editor) {
- editor.focus();
- }
- }
-
- updatePreview(tabId = this.activeTabId) {
- const tab = this.tabs.get(tabId);
- const preview = document.getElementById(`preview-${tabId}`);
-
- if (!tab || !preview) return;
-
- try {
- // Check if libraries are available
- if (!marked || !DOMPurify) {
- preview.innerHTML = '
-
-
-
- Error: Required libraries (marked/DOMPurify) not loaded. Check internet connection.
'; - return; - } - const html = marked.parse(tab.content); - const sanitizedHtml = DOMPurify.sanitize(html); - preview.innerHTML = sanitizedHtml; - - // Render math expressions if KaTeX is available - if (window.katex && window.renderMathInElement) { - try { - window.renderMathInElement(preview, { - delimiters: [ - {left: '$$', right: '$$', display: true}, - {left: '$', right: '$', display: false}, - {left: '\\[', right: '\\]', display: true}, - {left: '\\(', right: '\\)', display: false} - ] - }); - } catch (mathError) { - console.warn('Math rendering error:', mathError); - } - } - - // Render Mermaid diagrams if Mermaid is available - if (window.mermaid) { - try { - // Find all code blocks with language-mermaid class - const mermaidBlocks = preview.querySelectorAll('pre code.language-mermaid'); - mermaidBlocks.forEach((block, index) => { - const code = block.textContent; - const pre = block.parentElement; - - // Create a div for mermaid rendering - const mermaidDiv = document.createElement('div'); - mermaidDiv.className = 'mermaid'; - mermaidDiv.setAttribute('data-processed', 'true'); - mermaidDiv.textContent = code; - - // Replace the pre element with the mermaid div - pre.parentElement.replaceChild(mermaidDiv, pre); - }); - - // Initialize Mermaid with dark theme support - const theme = document.body.className.includes('theme-dark') ? 'dark' : 'default'; - mermaid.initialize({ - startOnLoad: false, - theme: theme, - securityLevel: 'loose' - }); - - // Render all mermaid diagrams - mermaid.run({ - querySelector: '.mermaid:not([data-rendered])' - }).then(() => { - // Mark as rendered - preview.querySelectorAll('.mermaid').forEach(el => { - el.setAttribute('data-rendered', 'true'); - }); - }); - } catch (mermaidError) { - console.warn('Mermaid rendering error:', mermaidError); - } - } - } catch (error) { - console.error('Error rendering preview:', error); - preview.innerHTML = 'Error rendering preview. Please check your markdown syntax.
'; - } - } - - updatePreviewVisibility() { - document.querySelectorAll('.tab-content').forEach(content => { - const previewPane = content.querySelector('.pane:last-child'); - const editorPane = content.querySelector('.pane:first-child'); - - if (this.isPreviewVisible) { - previewPane.classList.remove('hidden'); - editorPane.classList.remove('full-width'); - } else { - previewPane.classList.add('hidden'); - editorPane.classList.add('full-width'); - } - }); - } - - updateLineNumbers() { - const editor = document.getElementById(`editor-${this.activeTabId}`); - const lineNumbers = document.getElementById(`line-numbers-${this.activeTabId}`); - - if (!editor || !lineNumbers) return; - - if (this.showLineNumbers) { - const lines = editor.value.split('\n'); - lineNumbers.innerHTML = lines.map((_, i) => - `${i + 1}
`
- ).join('');
- lineNumbers.classList.remove('hidden');
-
- // Sync scroll position
- lineNumbers.scrollTop = editor.scrollTop;
- } else {
- lineNumbers.classList.add('hidden');
- }
- }
-
- updateWordCount() {
- const tab = this.tabs.get(this.activeTabId);
- if (!tab) return;
-
- const content = tab.content;
- const words = content.trim() ? content.trim().split(/\s+/).filter(word => word.length > 0).length : 0;
- const chars = content.length;
- const charsNoSpaces = content.replace(/\s/g, '').length;
-
- // Enhanced statistics
- const lines = content.split('\n').length;
- const paragraphs = content.split(/\n\s*\n/).filter(p => p.trim()).length;
- const readingTime = Math.ceil(words / 200); // Average reading speed: 200 words/minute
- const sentences = content.split(/[.!?]+/).filter(s => s.trim()).length;
-
- // Update the word count display with enhanced stats
- const basicStats = `Words: ${words} | Characters: ${chars} (${charsNoSpaces} no spaces)`;
- const enhancedStats = `Lines: ${lines} | Paragraphs: ${paragraphs} | Sentences: ${sentences} | Reading time: ${readingTime} min`;
-
- document.getElementById('word-count').textContent = basicStats;
-
- // Add enhanced stats to a separate element
- let enhancedEl = document.getElementById('enhanced-stats');
- if (!enhancedEl) {
- enhancedEl = document.createElement('div');
- enhancedEl.id = 'enhanced-stats';
- enhancedEl.className = 'enhanced-stats';
- document.querySelector('.status-bar').appendChild(enhancedEl);
- }
- enhancedEl.textContent = enhancedStats;
- }
-
- setupEditorEvents() {
- // Set up editor events using event delegation on the container
- const editorContainer = document.querySelector('.editor-container');
- if (editorContainer) {
- editorContainer.addEventListener('input', (e) => {
- if (e.target.classList.contains('editor-textarea')) {
- const tabId = parseInt(e.target.id.split('-')[1]);
- this.handleEditorInput(tabId);
- }
- });
-
- editorContainer.addEventListener('scroll', (e) => {
- if (e.target.classList.contains('editor-textarea')) {
- this.updateLineNumbers();
- }
- }, true);
- }
- }
-
- handleEditorInput(tabId) {
- const tab = this.tabs.get(tabId);
- if (!tab) return;
-
- const editor = document.getElementById(`editor-${tabId}`);
- if (!editor) return;
-
- tab.content = editor.value;
- tab.isDirty = true;
-
- this.updatePreview(tabId);
- this.updateWordCount();
- this.updateLineNumbers();
- this.updateTabBar();
-
- // Add to undo stack
- this.pushUndoState(tabId);
- }
-
- pushUndoState(tabId) {
- const tab = this.tabs.get(tabId);
- if (!tab) return;
-
- tab.undoStack.push(tab.content);
- if (tab.undoStack.length > 50) {
- tab.undoStack.shift();
- }
- tab.redoStack = [];
- }
-
- undo() {
- const tab = this.tabs.get(this.activeTabId);
- if (!tab || tab.undoStack.length === 0) return;
-
- tab.redoStack.push(tab.content);
- tab.content = tab.undoStack.pop();
-
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (editor) {
- editor.value = tab.content;
- this.updatePreview();
- this.updateWordCount();
- }
- }
-
- redo() {
- const tab = this.tabs.get(this.activeTabId);
- if (!tab || tab.redoStack.length === 0) return;
-
- tab.undoStack.push(tab.content);
- tab.content = tab.redoStack.pop();
-
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (editor) {
- editor.value = tab.content;
- this.updatePreview();
- this.updateWordCount();
- }
- }
-
- // Auto-save functionality
- startAutoSave() {
- if (this.autoSaveInterval) {
- clearInterval(this.autoSaveInterval);
- }
-
- this.autoSaveInterval = setInterval(() => {
- this.performAutoSave();
- }, this.autoSaveDelay);
- }
-
- stopAutoSave() {
- if (this.autoSaveInterval) {
- clearInterval(this.autoSaveInterval);
- this.autoSaveInterval = null;
- }
- }
-
- performAutoSave() {
- const tab = this.tabs.get(this.activeTabId);
- if (!tab || !tab.filePath || !tab.content) return;
-
- // Only auto-save if content has changed since last save
- if (tab.lastSavedContent !== tab.content) {
- ipcRenderer.send('save-file', { path: tab.filePath, content: tab.content });
- tab.lastSavedContent = tab.content;
-
- // Show brief auto-save indicator
- this.showAutoSaveIndicator();
- }
- }
-
- showAutoSaveIndicator() {
- const indicator = document.createElement('div');
- indicator.textContent = 'Auto-saved';
- indicator.className = 'auto-save-indicator';
- document.body.appendChild(indicator);
-
- setTimeout(() => {
- indicator.classList.add('fade-out');
- setTimeout(() => {
- if (indicator.parentNode) {
- indicator.parentNode.removeChild(indicator);
- }
- }, 300);
- }, 1500);
- }
-
- // Recent files functionality
- addToRecentFiles(filePath) {
- if (!filePath) return;
-
- // Remove if already exists
- this.recentFiles = this.recentFiles.filter(f => f !== filePath);
-
- // Add to beginning
- this.recentFiles.unshift(filePath);
-
- // Keep only last 10 files
- this.recentFiles = this.recentFiles.slice(0, 10);
-
- // Save to localStorage and sync with main process
- localStorage.setItem('recentFiles', JSON.stringify(this.recentFiles));
- ipcRenderer.send('save-recent-files', this.recentFiles);
- }
-
- getRecentFiles() {
- return this.recentFiles.filter(file => {
- // Check if file still exists (basic check by trying to access it)
- try {
- return file && file.length > 0;
- } catch (e) {
- return false;
- }
- });
- }
-
- setupToolbarEvents() {
- // Bold
- document.getElementById('btn-bold').addEventListener('click', () => {
- this.wrapSelection('**', '**');
- });
-
- // Italic
- document.getElementById('btn-italic').addEventListener('click', () => {
- this.wrapSelection('*', '*');
- });
-
- // Heading
- document.getElementById('btn-heading').addEventListener('click', () => {
- this.insertAtLineStart('## ');
- });
-
- // Link
- document.getElementById('btn-link').addEventListener('click', () => {
- this.wrapSelection('[', '](url)');
- });
-
- // Code
- document.getElementById('btn-code').addEventListener('click', () => {
- this.wrapSelection('`', '`');
- });
-
- // List
- document.getElementById('btn-list').addEventListener('click', () => {
- this.insertAtLineStart('- ');
- });
-
- // Quote
- document.getElementById('btn-quote').addEventListener('click', () => {
- this.insertAtLineStart('> ');
- });
-
- // Table
- document.getElementById('btn-table').addEventListener('click', () => {
- this.insertTable();
- });
-
- // Strikethrough
- document.getElementById('btn-strikethrough').addEventListener('click', () => {
- this.wrapSelection('~~', '~~');
- });
-
- // Code Block
- document.getElementById('btn-code-block').addEventListener('click', () => {
- this.insertCodeBlock();
- });
-
- // Horizontal Rule
- document.getElementById('btn-horizontal-rule').addEventListener('click', () => {
- this.insertHorizontalRule();
- });
-
- // Preview toggle
- document.getElementById('btn-preview-toggle').addEventListener('click', () => {
- this.isPreviewVisible = !this.isPreviewVisible;
- this.updatePreviewVisibility();
- });
-
- // Line numbers
- document.getElementById('btn-line-numbers').addEventListener('click', () => {
- this.showLineNumbers = !this.showLineNumbers;
- this.updateLineNumbers();
- });
- }
-
- // Helper function to wrap selected text
- wrapSelection(before, after) {
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (!editor) return;
-
- const start = editor.selectionStart;
- const end = editor.selectionEnd;
- const selectedText = editor.value.substring(start, end);
- const replacement = before + (selectedText || 'text') + after;
-
- editor.value = editor.value.substring(0, start) + replacement + editor.value.substring(end);
-
- // Update cursor position
- const newCursorPos = selectedText ? start + replacement.length : start + before.length;
- editor.selectionStart = editor.selectionEnd = newCursorPos;
- editor.focus();
-
- // Trigger update
- this.handleEditorInput(this.activeTabId);
- }
-
- // Helper function to insert text at the start of current line
- insertAtLineStart(prefix) {
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (!editor) return;
-
- const start = editor.selectionStart;
- const text = editor.value;
-
- // Find the start of the current line
- let lineStart = text.lastIndexOf('\n', start - 1) + 1;
-
- // Insert the prefix
- editor.value = text.substring(0, lineStart) + prefix + text.substring(lineStart);
-
- // Update cursor position
- editor.selectionStart = editor.selectionEnd = start + prefix.length;
- editor.focus();
-
- // Trigger update
- this.handleEditorInput(this.activeTabId);
- }
-
- // Insert a markdown table
- insertTable() {
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (!editor) return;
-
- const table = '\n| Column 1 | Column 2 | Column 3 |\n' +
- '|----------|----------|----------|\n' +
- '| Cell 1 | Cell 2 | Cell 3 |\n' +
- '| Cell 4 | Cell 5 | Cell 6 |\n';
-
- const start = editor.selectionStart;
- editor.value = editor.value.substring(0, start) + table + editor.value.substring(start);
-
- // Update cursor position
- editor.selectionStart = editor.selectionEnd = start + table.length;
- editor.focus();
-
- // Trigger update
- this.handleEditorInput(this.activeTabId);
- }
-
- // Insert a code block
- insertCodeBlock() {
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (!editor) return;
-
- const selectedText = editor.value.substring(editor.selectionStart, editor.selectionEnd);
- const codeBlock = '\n```\n' + (selectedText || 'code here') + '\n```\n';
-
- const start = editor.selectionStart;
- editor.value = editor.value.substring(0, start) + codeBlock + editor.value.substring(editor.selectionEnd);
-
- // Update cursor position
- editor.selectionStart = editor.selectionEnd = start + codeBlock.length;
- editor.focus();
-
- // Trigger update
- this.handleEditorInput(this.activeTabId);
- }
-
- // Insert a horizontal rule
- insertHorizontalRule() {
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (!editor) return;
-
- const hr = '\n\n---\n\n';
- const start = editor.selectionStart;
-
- editor.value = editor.value.substring(0, start) + hr + editor.value.substring(start);
-
- // Update cursor position
- editor.selectionStart = editor.selectionEnd = start + hr.length;
- editor.focus();
-
- // Trigger update
- this.handleEditorInput(this.activeTabId);
- }
-
- setupFindEvents() {
- const btnFind = document.getElementById('btn-find');
- const btnFindClose = document.getElementById('btn-find-close');
- const findInput = document.getElementById('find-input');
- const btnFindNext = document.getElementById('btn-find-next');
- const btnFindPrev = document.getElementById('btn-find-prev');
- const btnReplace = document.getElementById('btn-replace');
- const btnReplaceAll = document.getElementById('btn-replace-all');
-
- if (!btnFind || !btnFindClose || !findInput || !btnFindNext || !btnFindPrev || !btnReplace || !btnReplaceAll) {
- console.error('Find dialog elements not found');
- return;
- }
-
- // Show find dialog
- btnFind.addEventListener('click', () => {
- document.getElementById('find-dialog').classList.remove('hidden');
- findInput.focus();
- });
-
- // Close find dialog
- btnFindClose.addEventListener('click', () => {
- document.getElementById('find-dialog').classList.add('hidden');
- this.clearFindHighlights();
- });
-
- // Find input change - update matches
- findInput.addEventListener('input', () => {
- this.performFind();
- });
-
- // Find next
- btnFindNext.addEventListener('click', () => {
- this.findNext();
- });
-
- // Find previous
- btnFindPrev.addEventListener('click', () => {
- this.findPrevious();
- });
-
- // Replace
- btnReplace.addEventListener('click', () => {
- this.replaceOne();
- });
-
- // Replace all
- btnReplaceAll.addEventListener('click', () => {
- this.replaceAll();
- });
-
- // Enter key in find input - find next
- findInput.addEventListener('keydown', (e) => {
- if (e.key === 'Enter') {
- e.preventDefault();
- if (e.shiftKey) {
- this.findPrevious();
- } else {
- this.findNext();
- }
- }
- });
-
- }
-
- performFind() {
- const findText = document.getElementById('find-input').value;
- const tab = this.tabs.get(this.activeTabId);
- const editor = document.getElementById(`editor-${this.activeTabId}`);
-
- if (!findText || !tab || !editor) {
- this.clearFindHighlights();
- const findCount = document.getElementById('find-count');
- if (findCount) {
- findCount.textContent = '0 matches';
- }
- return;
- }
-
- const content = editor.value;
- const matches = [];
- let index = 0;
-
- // Find all matches
- while ((index = content.indexOf(findText, index)) !== -1) {
- matches.push(index);
- index += findText.length;
- }
-
- tab.findMatches = matches;
- tab.currentMatchIndex = matches.length > 0 ? 0 : -1;
-
- // Update match count
- const findCount = document.getElementById('find-count');
- if (findCount) {
- findCount.textContent = `${matches.length} match${matches.length !== 1 ? 'es' : ''}`;
- }
-
- // Highlight first match
- if (matches.length > 0) {
- this.highlightMatch(0);
- }
- }
-
- findNext() {
- const tab = this.tabs.get(this.activeTabId);
- if (!tab || tab.findMatches.length === 0) return;
-
- tab.currentMatchIndex = (tab.currentMatchIndex + 1) % tab.findMatches.length;
- this.highlightMatch(tab.currentMatchIndex);
- }
-
- findPrevious() {
- const tab = this.tabs.get(this.activeTabId);
- if (!tab || tab.findMatches.length === 0) return;
-
- tab.currentMatchIndex = tab.currentMatchIndex - 1;
- if (tab.currentMatchIndex < 0) {
- tab.currentMatchIndex = tab.findMatches.length - 1;
- }
- this.highlightMatch(tab.currentMatchIndex);
- }
-
- highlightMatch(matchIndex) {
- const tab = this.tabs.get(this.activeTabId);
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- const findText = document.getElementById('find-input').value;
-
- if (!tab || !editor || matchIndex < 0 || matchIndex >= tab.findMatches.length) return;
-
- const position = tab.findMatches[matchIndex];
-
- // Select the match WITHOUT focusing (to keep focus on find input)
- editor.setSelectionRange(position, position + findText.length);
-
- // Make the selection visible by briefly focusing and then restoring focus
- const findInput = document.getElementById('find-input');
- const hadFocus = document.activeElement === findInput;
-
- // Temporarily focus editor to make selection visible
- editor.focus();
-
- // Restore focus to find input if it had focus
- if (hadFocus) {
- setTimeout(() => {
- findInput.focus();
- // Restore cursor position in find input
- findInput.setSelectionRange(findInput.value.length, findInput.value.length);
- }, 10);
- }
-
- // Scroll into view
- const lineHeight = 20; // Approximate line height
- const charPosition = position;
- const numLines = editor.value.substring(0, charPosition).split('\n').length;
- const scrollPosition = (numLines - 5) * lineHeight; // Show match 5 lines from top
-
- editor.scrollTop = Math.max(0, scrollPosition);
-
- // Update match counter
- const findCount = document.getElementById('find-count');
- if (findCount) {
- findCount.textContent = `Match ${matchIndex + 1} of ${tab.findMatches.length}`;
- }
- }
-
- replaceOne() {
- const tab = this.tabs.get(this.activeTabId);
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- const findText = document.getElementById('find-input').value;
- const replaceText = document.getElementById('replace-input').value;
-
- if (!tab || !editor || tab.findMatches.length === 0 || tab.currentMatchIndex < 0) return;
-
- const position = tab.findMatches[tab.currentMatchIndex];
- const before = editor.value.substring(0, position);
- const after = editor.value.substring(position + findText.length);
-
- editor.value = before + replaceText + after;
- tab.content = editor.value;
- tab.isDirty = true;
-
- this.updatePreview(this.activeTabId);
- this.updateWordCount();
- this.updateTabBar();
-
- // Re-perform find to update matches
- this.performFind();
- }
-
- replaceAll() {
- const tab = this.tabs.get(this.activeTabId);
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- const findText = document.getElementById('find-input').value;
- const replaceText = document.getElementById('replace-input').value;
-
- if (!tab || !editor || !findText) return;
-
- // Simple replace all
- const newContent = editor.value.split(findText).join(replaceText);
- const replacedCount = tab.findMatches.length;
-
- editor.value = newContent;
- tab.content = newContent;
- tab.isDirty = true;
-
- this.updatePreview(this.activeTabId);
- this.updateWordCount();
- this.updateTabBar();
-
- // Update match count
- document.getElementById('find-count').textContent = `Replaced ${replacedCount} match${replacedCount !== 1 ? 'es' : ''}`;
-
- // Re-perform find
- this.performFind();
- }
-
- clearFindHighlights() {
- const tab = this.tabs.get(this.activeTabId);
- if (tab) {
- tab.findMatches = [];
- tab.currentMatchIndex = -1;
- }
- }
-
- // File operations
- openFile(filePath, content) {
- console.log('openFile called with:', filePath, 'content length:', content.length);
- let tab = this.tabs.get(this.activeTabId);
-
- // Handle both forward and back slashes for cross-platform compatibility
- const fileName = filePath.split(/[\\/]/).pop();
-
- // If current tab is empty and untitled, reuse it
- if (!tab.filePath && !tab.isDirty && tab.content === '') {
- console.log('Reusing current tab');
- tab.filePath = filePath;
- tab.title = fileName;
- tab.content = content;
- tab.originalContent = content;
- tab.isDirty = false;
-
- // Update the editor and preview
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (editor) {
- editor.value = content;
- // Update preview after editor is updated
- this.updatePreview(this.activeTabId);
- this.updateWordCount();
- }
- } else {
- // Create new tab for the file
- console.log('Creating new tab for file');
- this.createNewTab();
- tab = this.tabs.get(this.activeTabId);
- tab.filePath = filePath;
- tab.title = fileName;
- tab.content = content;
- tab.originalContent = content;
- tab.isDirty = false;
-
- // Wait a moment for the DOM to update, then set content
- setTimeout(() => {
- const editor = document.getElementById(`editor-${this.activeTabId}`);
- if (editor) {
- editor.value = content;
- this.updatePreview(this.activeTabId);
- this.updateWordCount();
- }
- }, 50);
- }
- this.startAutoSave();
- this.addToRecentFiles(filePath);
- this.updateTabBar();
-
- // Notify main process about current file for exports
- ipcRenderer.send('set-current-file', filePath);
-
- console.log('File opened successfully');
- }
-
- getCurrentContent() {
- const tab = this.tabs.get(this.activeTabId);
- return tab ? tab.content : '';
- }
-
- getCurrentFilePath() {
- const tab = this.tabs.get(this.activeTabId);
- return tab ? tab.filePath : null;
- }
-}
-
-// Initialize tab manager
-let tabManager;
-
-document.addEventListener('DOMContentLoaded', () => {
- tabManager = new TabManager();
-
- // Attach input listener to the initial editor (tab 1)
- const initialEditor = document.getElementById('editor-1');
- if (initialEditor) {
- initialEditor.addEventListener('input', () => {
- tabManager.handleEditorInput(1);
- });
-
- // Add scroll listener for line number sync
- initialEditor.addEventListener('scroll', () => {
- if (tabManager.showLineNumbers && tabManager.activeTabId === 1) {
- const lineNumbers = document.getElementById('line-numbers-1');
- if (lineNumbers) {
- lineNumbers.scrollTop = initialEditor.scrollTop;
- }
- }
- });
- }
-
- // Request current theme
- ipcRenderer.send('get-theme');
-
- // Also send renderer-ready immediately as backup
- // This ensures we don't get stuck waiting for theme-changed
- setTimeout(() => {
- console.log('Backup renderer-ready timeout triggered');
- ipcRenderer.send('renderer-ready');
- }, 100);
-
- // Set up auto-save interval
- setInterval(() => {
- // Auto-save logic for all tabs
- tabManager.tabs.forEach(tab => {
- if (tab.isDirty && tab.filePath) {
- ipcRenderer.send('save-current-file', tab.content);
- }
- });
- }, 30000);
-});
-
-// IPC event listeners
-ipcRenderer.on('file-new', () => {
- tabManager.createNewTab();
-});
-
-ipcRenderer.on('file-opened', (event, data) => {
- console.log('[RENDERER] file-opened received:', data.path, 'content length:', data.content.length);
- if (tabManager) {
- tabManager.openFile(data.path, data.content);
- } else {
- console.error('[RENDERER] tabManager not initialized!');
- }
-});
-
-ipcRenderer.on('file-save', () => {
- const currentContent = tabManager.getCurrentContent();
- const currentFilePath = tabManager.getCurrentFilePath();
- if (currentFilePath) {
- ipcRenderer.send('save-current-file', currentContent);
- }
-});
-
-ipcRenderer.on('get-content-for-save', (event, filePath) => {
- const currentContent = tabManager.getCurrentContent();
- ipcRenderer.send('save-file', { path: filePath, content: currentContent });
-});
-
-ipcRenderer.on('get-content-for-spreadsheet', (event, format) => {
- const currentContent = tabManager.getCurrentContent();
- ipcRenderer.send('export-spreadsheet', { content: currentContent, format });
-});
-
-ipcRenderer.on('toggle-preview', () => {
- tabManager.isPreviewVisible = !tabManager.isPreviewVisible;
- tabManager.updatePreviewVisibility();
-});
-
-ipcRenderer.on('toggle-find', () => {
- const findDialog = document.getElementById('find-dialog');
- if (findDialog.classList.contains('hidden')) {
- findDialog.classList.remove('hidden');
- document.getElementById('find-input').focus();
- } else {
- findDialog.classList.add('hidden');
- }
-});
-
-ipcRenderer.on('theme-changed', (event, theme) => {
- console.log('[RENDERER] Theme changed to:', theme);
- document.body.className = `theme-${theme}`;
-
- // After theme is applied, wait for next frame then signal renderer is ready
- // This ensures complete UI initialization before files are opened
- requestAnimationFrame(() => {
- console.log('[RENDERER] Sending renderer-ready from theme-changed');
- ipcRenderer.send('renderer-ready');
- });
-});
-
-// Undo/Redo handlers
-ipcRenderer.on('undo', () => {
- if (tabManager) {
- tabManager.undo();
- }
-});
-
-ipcRenderer.on('redo', () => {
- if (tabManager) {
- tabManager.redo();
- }
-});
-
-// Font size adjustment
-let currentFontSize = parseInt(localStorage.getItem('fontSize')) || 15;
-
-function updateFontSizes(size) {
- const editors = document.querySelectorAll('#editor, .editor-textarea');
- const previews = document.querySelectorAll('#preview, .preview-content');
-
- editors.forEach(editor => {
- editor.style.fontSize = `${size}px`;
- });
-
- previews.forEach(preview => {
- preview.style.fontSize = `${size}px`;
- });
-
- localStorage.setItem('fontSize', size);
-}
-
-// Apply saved font size on load
-updateFontSizes(currentFontSize);
-
-ipcRenderer.on('adjust-font-size', (event, action) => {
- if (action === 'increase' && currentFontSize < 24) {
- currentFontSize++;
- } else if (action === 'decrease' && currentFontSize > 10) {
- currentFontSize--;
- } else if (action === 'reset') {
- currentFontSize = 15;
- }
- updateFontSizes(currentFontSize);
-});
-
-// Print preview request handlers - handle printing directly
-ipcRenderer.on('print-preview', () => {
- console.log('[RENDERER] print-preview received');
- handlePrintPreview(false);
-});
-
-ipcRenderer.on('print-preview-styled', () => {
- console.log('[RENDERER] print-preview-styled received');
- handlePrintPreview(true);
-});
-
-function handlePrintPreview(withStyles) {
- const activeTabId = tabManager ? tabManager.activeTabId : 1;
- const previewContent = document.getElementById(`preview-${activeTabId}`);
-
- if (!previewContent || !previewContent.innerHTML.trim()) {
- alert('Nothing to print. Please create or open a document and ensure the preview is visible.');
- return;
- }
-
- console.log('[RENDERER] Starting print with withStyles:', withStyles);
- console.log('[RENDERER] Preview content length:', previewContent.innerHTML.length);
-
- // Add body classes for print mode - let CSS handle everything
- document.body.classList.add('printing');
- if (!withStyles) {
- document.body.classList.add('printing-no-styles');
- }
-
- // Wait for CSS to apply then print
- setTimeout(() => {
- console.log('[RENDERER] Sending do-print to main process');
- ipcRenderer.send('do-print', { withStyles });
-
- // Restore classes after print dialog opens
- setTimeout(() => {
- document.body.classList.remove('printing', 'printing-no-styles');
- console.log('[RENDERER] Print classes removed');
- }, 1000);
- }, 100);
-}
-
-// Export Dialog functionality
-let currentExportFormat = null;
-
-ipcRenderer.on('show-export-dialog', (event, format) => {
- currentExportFormat = format;
- showExportDialog(format);
-});
-
-function showExportDialog(format) {
- console.log('showExportDialog called with format:', format);
- const dialog = document.getElementById('export-dialog');
- const title = document.getElementById('export-dialog-title');
-
- if (!dialog) {
- console.error('Export dialog element not found!');
- return;
- }
-
- console.log('Dialog found, showing export options for:', format);
- title.textContent = `Export as ${format.toUpperCase()}`;
- dialog.setAttribute('data-format', format);
- dialog.classList.remove('hidden');
-
- // Initialize form values
- initializeExportForm(format);
- console.log('Export dialog should now be visible');
-}
-
-function hideExportDialog() {
- const dialog = document.getElementById('export-dialog');
- dialog.classList.add('hidden');
- currentExportFormat = null;
-}
-
-function initializeExportForm(format) {
- // Reset advanced export toggle to unchecked
- const advancedToggle = document.getElementById('advanced-export-toggle');
- const advancedOptions = document.getElementById('advanced-export-options');
-
- advancedToggle.checked = false;
- advancedOptions.classList.add('hidden');
-
- // Reset form to defaults
- document.getElementById('export-template').value = 'default';
- document.getElementById('custom-template-path').style.display = 'none';
-
- // Clear metadata fields
- const metadataFields = document.querySelectorAll('.metadata-field');
- metadataFields.forEach((field, index) => {
- if (index < 4) { // Keep first 4 default fields
- field.querySelector('.metadata-key').value = ['title', 'author', 'date', 'subject'][index] || '';
- field.querySelector('.metadata-value').value = '';
- } else {
- field.remove(); // Remove additional fields
- }
- });
-
- // Reset checkboxes and other fields
- document.getElementById('export-toc').checked = false;
- document.getElementById('export-number-sections').checked = false;
- document.getElementById('export-citeproc').checked = false;
- document.getElementById('export-toc-depth').value = 3;
-
- // PDF-specific fields
- if (format === 'pdf') {
- document.getElementById('pdf-engine').value = 'xelatex';
- document.getElementById('pdf-geometry').value = 'margin=1in';
- document.getElementById('custom-geometry').style.display = 'none';
- }
-
- // Clear bibliography fields
- document.getElementById('bibliography-file').value = '';
- document.getElementById('csl-file').value = '';
-
- // Request current page settings from main process and apply them
- ipcRenderer.send('get-page-settings');
-}
-
-function collectExportOptions() {
- const advancedMode = document.getElementById('advanced-export-toggle').checked;
- const options = {};
-
- if (advancedMode) {
- // Collect advanced options
- options.template = document.getElementById('export-template').value;
- options.metadata = {};
- options.variables = {};
- options.toc = document.getElementById('export-toc').checked;
- options.tocDepth = document.getElementById('export-toc-depth').value;
- options.numberSections = document.getElementById('export-number-sections').checked;
- options.citeproc = document.getElementById('export-citeproc').checked;
- } else {
- // Collect basic options only
- options.template = 'default';
- options.metadata = {};
- options.variables = {};
- options.toc = document.getElementById('basic-toc').checked;
- options.tocDepth = 3;
- options.numberSections = document.getElementById('basic-number-sections').checked;
- options.citeproc = false;
- }
-
- if (advancedMode) {
- // Collect custom template path
- if (options.template === 'custom') {
- options.template = document.getElementById('custom-template-path').value.trim();
- }
-
- // Collect metadata
- const metadataFields = document.querySelectorAll('.metadata-field');
- metadataFields.forEach(field => {
- const key = field.querySelector('.metadata-key').value.trim();
- const value = field.querySelector('.metadata-value').value.trim();
- if (key && value) {
- options.metadata[key] = value;
- }
- });
-
- // PDF-specific options
- if (currentExportFormat === 'pdf') {
- options.pdfEngine = document.getElementById('pdf-engine').value;
- const geometrySelect = document.getElementById('pdf-geometry');
- if (geometrySelect.value === 'custom') {
- options.geometry = document.getElementById('custom-geometry').value.trim() || 'margin=1in';
- } else {
- options.geometry = geometrySelect.value;
- }
- }
-
- // Bibliography
- const bibFile = document.getElementById('bibliography-file').value.trim();
- const cslFile = document.getElementById('csl-file').value.trim();
- if (bibFile) options.bibliography = bibFile;
- if (cslFile) options.csl = cslFile;
- } else {
- // Basic mode - set default PDF options if needed
- if (currentExportFormat === 'pdf') {
- options.pdfEngine = 'xelatex';
- options.geometry = 'margin=1in';
- }
- }
-
- // Collect page size and orientation (always collected, from basic options)
- const pageSize = document.getElementById('page-size').value;
- const pageOrientation = document.getElementById('page-orientation').value;
- const customWidth = document.getElementById('custom-width').value.trim();
- const customHeight = document.getElementById('custom-height').value.trim();
-
- // Send page settings to main process
- ipcRenderer.send('update-page-settings', {
- size: pageSize,
- orientation: pageOrientation,
- customWidth: customWidth || null,
- customHeight: customHeight || null
- });
-
- return options;
-}
-
-// Export Profiles Management
-let exportProfiles = {};
-
-function loadExportProfiles() {
- const saved = localStorage.getItem('exportProfiles');
- if (saved) {
- try {
- exportProfiles = JSON.parse(saved);
- populateProfileDropdown();
- } catch (e) {
- console.error('Failed to load export profiles:', e);
- exportProfiles = {};
- }
- }
-}
-
-function saveExportProfiles() {
- localStorage.setItem('exportProfiles', JSON.stringify(exportProfiles));
-}
-
-function populateProfileDropdown() {
- const select = document.getElementById('export-profile-select');
- if (!select) return;
-
- // Clear existing options except the first one
- while (select.options.length > 1) {
- select.remove(1);
- }
-
- // Add saved profiles
- Object.keys(exportProfiles).forEach(name => {
- const option = document.createElement('option');
- option.value = name;
- option.textContent = name;
- select.appendChild(option);
- });
-}
-
-function saveCurrentProfile() {
- const name = prompt('Enter a name for this export profile:', 'My Profile');
- if (!name || name.trim() === '') return;
-
- const profileName = name.trim();
-
- // Collect current settings
- const profile = {
- format: currentExportFormat,
- advancedMode: document.getElementById('advanced-export-toggle').checked,
- pageSize: document.getElementById('page-size').value,
- pageOrientation: document.getElementById('page-orientation').value,
- basicToc: document.getElementById('basic-toc').checked,
- basicNumberSections: document.getElementById('basic-number-sections').checked
- };
-
- // Add advanced options if enabled
- if (profile.advancedMode) {
- profile.template = document.getElementById('export-template').value;
- profile.toc = document.getElementById('export-toc').checked;
- profile.tocDepth = document.getElementById('export-toc-depth').value;
- profile.numberSections = document.getElementById('export-number-sections').checked;
- profile.citeproc = document.getElementById('export-citeproc').checked;
-
- if (currentExportFormat === 'pdf') {
- profile.pdfEngine = document.getElementById('pdf-engine').value;
- profile.pdfGeometry = document.getElementById('pdf-geometry').value;
- }
- }
-
- exportProfiles[profileName] = profile;
- saveExportProfiles();
- populateProfileDropdown();
-
- // Select the newly created profile
- document.getElementById('export-profile-select').value = profileName;
-
- alert(`Profile "${profileName}" saved successfully!`);
-}
-
-function loadProfile(profileName) {
- if (!profileName || !exportProfiles[profileName]) return;
-
- const profile = exportProfiles[profileName];
-
- // Apply settings
- if (profile.advancedMode !== undefined) {
- document.getElementById('advanced-export-toggle').checked = profile.advancedMode;
- const advancedOptions = document.getElementById('advanced-export-options');
- if (profile.advancedMode) {
- advancedOptions.classList.remove('hidden');
- } else {
- advancedOptions.classList.add('hidden');
- }
- }
-
- if (profile.pageSize) document.getElementById('page-size').value = profile.pageSize;
- if (profile.pageOrientation) document.getElementById('page-orientation').value = profile.pageOrientation;
- if (profile.basicToc !== undefined) document.getElementById('basic-toc').checked = profile.basicToc;
- if (profile.basicNumberSections !== undefined) document.getElementById('basic-number-sections').checked = profile.basicNumberSections;
-
- // Advanced options
- if (profile.advancedMode && profile.template) document.getElementById('export-template').value = profile.template;
- if (profile.toc !== undefined) document.getElementById('export-toc').checked = profile.toc;
- if (profile.tocDepth) document.getElementById('export-toc-depth').value = profile.tocDepth;
- if (profile.numberSections !== undefined) document.getElementById('export-number-sections').checked = profile.numberSections;
- if (profile.citeproc !== undefined) document.getElementById('export-citeproc').checked = profile.citeproc;
-
- if (profile.pdfEngine) document.getElementById('pdf-engine').value = profile.pdfEngine;
- if (profile.pdfGeometry) document.getElementById('pdf-geometry').value = profile.pdfGeometry;
-}
-
-function deleteSelectedProfile() {
- const select = document.getElementById('export-profile-select');
- const profileName = select.value;
-
- if (!profileName) {
- alert('Please select a profile to delete.');
- return;
- }
-
- if (confirm(`Are you sure you want to delete the profile "${profileName}"?`)) {
- delete exportProfiles[profileName];
- saveExportProfiles();
- populateProfileDropdown();
- select.value = '';
- alert(`Profile "${profileName}" deleted successfully!`);
- }
-}
-
-// Event listeners for export dialog
-document.addEventListener('DOMContentLoaded', () => {
- // Load export profiles on startup
- loadExportProfiles();
- // Template selection
- document.getElementById('export-template').addEventListener('change', (e) => {
- const customPath = document.getElementById('custom-template-path');
- const fileInput = document.getElementById('template-file-input');
-
- if (e.target.value === 'custom') {
- customPath.style.display = 'block';
- fileInput.style.display = 'block';
- } else {
- customPath.style.display = 'none';
- fileInput.style.display = 'none';
- customPath.value = '';
- }
- });
-
- // Advanced export toggle
- document.getElementById('advanced-export-toggle').addEventListener('change', (e) => {
- const advancedOptions = document.getElementById('advanced-export-options');
- if (e.target.checked) {
- advancedOptions.classList.remove('hidden');
- // Scroll the advanced options into view after they become visible
- setTimeout(() => {
- advancedOptions.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
- }, 100);
- } else {
- advancedOptions.classList.add('hidden');
- }
- });
-
- // Template file input
- document.getElementById('template-file-input').addEventListener('change', (e) => {
- const file = e.target.files[0];
- if (file) {
- document.getElementById('custom-template-path').value = file.path;
- }
- });
-
- // PDF geometry selection
- document.getElementById('pdf-geometry').addEventListener('change', (e) => {
- const customGeometry = document.getElementById('custom-geometry');
- if (e.target.value === 'custom') {
- customGeometry.style.display = 'block';
- } else {
- customGeometry.style.display = 'none';
- }
- });
-
- // Page size selection - show/hide custom size inputs
- document.getElementById('page-size').addEventListener('change', (e) => {
- const customPageSize = document.getElementById('custom-page-size');
- if (e.target.value === 'custom') {
- customPageSize.style.display = 'block';
- } else {
- customPageSize.style.display = 'none';
- }
- });
-
- // Load saved page settings on startup
- ipcRenderer.send('get-page-settings');
-
- // Handle page settings data (can be called multiple times)
- ipcRenderer.on('page-settings-data', (event, settings) => {
- console.log('Received page settings:', settings);
- if (settings) {
- const pageSizeEl = document.getElementById('page-size');
- const pageOrientationEl = document.getElementById('page-orientation');
- const customPageSizeEl = document.getElementById('custom-page-size');
- const customWidthEl = document.getElementById('custom-width');
- const customHeightEl = document.getElementById('custom-height');
-
- if (pageSizeEl) pageSizeEl.value = settings.size || 'a4';
- if (pageOrientationEl) pageOrientationEl.value = settings.orientation || 'portrait';
-
- if (customWidthEl && settings.customWidth) {
- customWidthEl.value = settings.customWidth;
- }
- if (customHeightEl && settings.customHeight) {
- customHeightEl.value = settings.customHeight;
- }
-
- // Show custom inputs if size is custom
- if (customPageSizeEl) {
- if (settings.size === 'custom') {
- customPageSizeEl.style.display = 'block';
- } else {
- customPageSizeEl.style.display = 'none';
- }
- }
- }
- });
-
- // Export Profile buttons
- document.getElementById('save-profile-btn').addEventListener('click', saveCurrentProfile);
- document.getElementById('delete-profile-btn').addEventListener('click', deleteSelectedProfile);
- document.getElementById('export-profile-select').addEventListener('change', (e) => {
- loadProfile(e.target.value);
- });
-
- // Add metadata field
- document.getElementById('add-metadata-field').addEventListener('click', () => {
- const container = document.querySelector('.metadata-container');
- const newField = document.createElement('div');
- newField.className = 'metadata-field';
- newField.innerHTML = `
-
-
- `;
- container.appendChild(newField);
- });
-
- // Browse bibliography
- document.getElementById('browse-bibliography').addEventListener('click', () => {
- const input = document.createElement('input');
- input.type = 'file';
- input.accept = '.bib,.yaml,.yml,.json';
- input.onchange = (e) => {
- const file = e.target.files[0];
- if (file) {
- document.getElementById('bibliography-file').value = file.path;
- }
- };
- input.click();
- });
-
- // Browse CSL
- document.getElementById('browse-csl').addEventListener('click', () => {
- const input = document.createElement('input');
- input.type = 'file';
- input.accept = '.csl';
- input.onchange = (e) => {
- const file = e.target.files[0];
- if (file) {
- document.getElementById('csl-file').value = file.path;
- }
- };
- input.click();
- });
-
- // Dialog close buttons
- document.getElementById('export-dialog-close').addEventListener('click', hideExportDialog);
- document.getElementById('export-cancel').addEventListener('click', hideExportDialog);
-
- // Export confirm
- document.getElementById('export-confirm').addEventListener('click', () => {
- const options = collectExportOptions();
- ipcRenderer.send('export-with-options', {
- format: currentExportFormat,
- options: options
- });
- hideExportDialog();
- });
-
- // Close on backdrop click
- document.getElementById('export-dialog').addEventListener('click', (e) => {
- if (e.target === document.getElementById('export-dialog')) {
- hideExportDialog();
- }
- });
-
- // Close on Escape key
- document.addEventListener('keydown', (e) => {
- if (e.key === 'Escape' && !document.getElementById('export-dialog').classList.contains('hidden')) {
- hideExportDialog();
- }
- });
-});
-
-// Batch Conversion Dialog functionality
-let currentBatchOptions = {};
-
-ipcRenderer.on('show-batch-dialog', () => {
- showBatchDialog();
-});
-
-// Universal Converter dialog handlers
-ipcRenderer.on('show-universal-converter-dialog', () => {
- showUniversalConverterDialog();
-});
-
-ipcRenderer.on('conversion-status', (event, status) => {
- document.getElementById('converter-status').textContent = status;
-});
-
-ipcRenderer.on('conversion-complete', (event, result) => {
- document.getElementById('converter-progress').classList.add('hidden');
- if (result.success) {
- document.getElementById('universal-converter-dialog').classList.add('hidden');
- }
-});
-
-ipcRenderer.on('batch-progress', (event, progress) => {
- updateBatchProgress(progress);
-});
-
-ipcRenderer.on('folder-selected', (event, { type, path }) => {
- if (type === 'input') {
- document.getElementById('batch-input-folder').value = path;
- validateBatchForm();
- } else if (type === 'output') {
- document.getElementById('batch-output-folder').value = path;
- validateBatchForm();
- } else if (type === 'converter-batch-input') {
- document.getElementById('converter-batch-input-folder').value = path;
- } else if (type === 'converter-batch-output') {
- document.getElementById('converter-batch-output-folder').value = path;
- }
-});
-
-function showBatchDialog() {
- const dialog = document.getElementById('batch-dialog');
- dialog.classList.remove('hidden');
-
- // Reset form
- document.getElementById('batch-input-folder').value = '';
- document.getElementById('batch-output-folder').value = '';
- document.getElementById('batch-format').value = 'html';
- document.getElementById('batch-include-subfolders').checked = true;
- document.getElementById('batch-progress').classList.add('hidden');
- document.getElementById('batch-start').disabled = true;
-
- currentBatchOptions = {
- template: 'default',
- metadata: {},
- variables: {},
- toc: false,
- tocDepth: 3,
- numberSections: false,
- citeproc: false
- };
-}
-
-function hideBatchDialog() {
- const dialog = document.getElementById('batch-dialog');
- dialog.classList.add('hidden');
-}
-
-function updateBatchProgress(progress) {
- const progressSection = document.getElementById('batch-progress');
- const progressFill = document.getElementById('batch-progress-fill');
- const progressText = document.getElementById('batch-progress-text');
- const progressCount = document.getElementById('batch-progress-count');
-
- progressSection.classList.remove('hidden');
-
- const percentage = Math.round((progress.completed / progress.total) * 100);
- progressFill.style.width = `${percentage}%`;
-
- if (progress.completed === progress.total) {
- progressText.textContent = 'Conversion complete!';
- } else {
- progressText.textContent = `Processing: ${progress.currentFile}`;
- }
-
- progressCount.textContent = `${progress.completed} / ${progress.total}`;
-}
-
-function validateBatchForm() {
- const inputFolder = document.getElementById('batch-input-folder').value.trim();
- const outputFolder = document.getElementById('batch-output-folder').value.trim();
- const startButton = document.getElementById('batch-start');
-
- startButton.disabled = !inputFolder || !outputFolder;
-}
-
-// Event listeners for batch dialog
-document.addEventListener('DOMContentLoaded', () => {
- // Browse input folder
- document.getElementById('browse-input-folder').addEventListener('click', () => {
- ipcRenderer.send('select-folder', 'input');
- });
-
- // Browse output folder
- document.getElementById('browse-output-folder').addEventListener('click', () => {
- ipcRenderer.send('select-folder', 'output');
- });
-
- // Show advanced options
- document.getElementById('batch-show-options').addEventListener('click', () => {
- const format = document.getElementById('batch-format').value;
- currentExportFormat = format;
- showExportDialog(format);
- });
-
- // Dialog close buttons
- document.getElementById('batch-dialog-close').addEventListener('click', hideBatchDialog);
- document.getElementById('batch-cancel').addEventListener('click', hideBatchDialog);
-
- // Start batch conversion
- document.getElementById('batch-start').addEventListener('click', () => {
- const inputFolder = document.getElementById('batch-input-folder').value.trim();
- const outputFolder = document.getElementById('batch-output-folder').value.trim();
- const format = document.getElementById('batch-format').value;
-
- if (!inputFolder || !outputFolder) {
- return;
- }
-
- // Use current export options from advanced dialog if they were set
- const options = currentBatchOptions;
-
- // Start batch conversion
- ipcRenderer.send('batch-convert', {
- inputFolder,
- outputFolder,
- format,
- options
- });
-
- // Show progress
- document.getElementById('batch-progress').classList.remove('hidden');
- document.getElementById('batch-start').disabled = true;
- });
-
- // Close on backdrop click
- document.getElementById('batch-dialog').addEventListener('click', (e) => {
- if (e.target === document.getElementById('batch-dialog')) {
- hideBatchDialog();
- }
- });
-
- // Close on Escape key (modified to handle both dialogs)
- document.addEventListener('keydown', (e) => {
- if (e.key === 'Escape') {
- if (!document.getElementById('export-dialog').classList.contains('hidden')) {
- hideExportDialog();
- } else if (!document.getElementById('batch-dialog').classList.contains('hidden')) {
- hideBatchDialog();
- }
- }
- });
-
- // Input validation
- document.getElementById('batch-input-folder').addEventListener('input', validateBatchForm);
- document.getElementById('batch-output-folder').addEventListener('input', validateBatchForm);
-});
-
-// Override the export dialog confirm to also save batch options
-const originalExportConfirm = document.getElementById('export-confirm');
-if (originalExportConfirm) {
- originalExportConfirm.addEventListener('click', () => {
- // If batch dialog is open, save options for batch conversion
- if (!document.getElementById('batch-dialog').classList.contains('hidden')) {
- currentBatchOptions = collectExportOptions();
- }
- });
-}
-
-// Universal File Converter Dialog Functions
-let converterFilePath = '';
-
-// Format definitions for each converter
-const converterFormats = {
- libreoffice: {
- input: [
- { value: 'docx', label: 'Word Document (DOCX)' },
- { value: 'doc', label: 'Word 97-2003 (DOC)' },
- { value: 'odt', label: 'OpenDocument Text (ODT)' },
- { value: 'rtf', label: 'Rich Text Format (RTF)' },
- { value: 'txt', label: 'Plain Text (TXT)' },
- { value: 'html', label: 'HTML Document' },
- { value: 'htm', label: 'HTM Document' },
- { value: 'xlsx', label: 'Excel Spreadsheet (XLSX)' },
- { value: 'xls', label: 'Excel 97-2003 (XLS)' },
- { value: 'ods', label: 'OpenDocument Spreadsheet (ODS)' },
- { value: 'csv', label: 'Comma Separated Values (CSV)' },
- { value: 'pptx', label: 'PowerPoint (PPTX)' },
- { value: 'ppt', label: 'PowerPoint 97-2003 (PPT)' },
- { value: 'odp', label: 'OpenDocument Presentation (ODP)' }
- ],
- output: [
- { value: 'pdf', label: 'PDF Document' },
- { value: 'docx', label: 'Word Document (DOCX)' },
- { value: 'doc', label: 'Word 97-2003 (DOC)' },
- { value: 'odt', label: 'OpenDocument Text (ODT)' },
- { value: 'rtf', label: 'Rich Text Format (RTF)' },
- { value: 'txt', label: 'Plain Text (TXT)' },
- { value: 'html', label: 'HTML Document' },
- { value: 'xlsx', label: 'Excel Spreadsheet (XLSX)' },
- { value: 'xls', label: 'Excel 97-2003 (XLS)' },
- { value: 'ods', label: 'OpenDocument Spreadsheet (ODS)' },
- { value: 'csv', label: 'CSV' },
- { value: 'pptx', label: 'PowerPoint (PPTX)' },
- { value: 'ppt', label: 'PowerPoint 97-2003 (PPT)' },
- { value: 'odp', label: 'OpenDocument Presentation (ODP)' }
- ]
- },
- imagemagick: {
- input: [
- { value: 'jpg', label: 'JPEG Image (JPG)' },
- { value: 'jpeg', label: 'JPEG Image (JPEG)' },
- { value: 'png', label: 'PNG Image' },
- { value: 'gif', label: 'GIF Image' },
- { value: 'bmp', label: 'Bitmap Image (BMP)' },
- { value: 'tiff', label: 'TIFF Image' },
- { value: 'tif', label: 'TIF Image' },
- { value: 'webp', label: 'WebP Image' },
- { value: 'svg', label: 'SVG Vector Image' },
- { value: 'ico', label: 'Icon File (ICO)' },
- { value: 'psd', label: 'Photoshop (PSD)' },
- { value: 'raw', label: 'RAW Image' },
- { value: 'cr2', label: 'Canon RAW (CR2)' },
- { value: 'nef', label: 'Nikon RAW (NEF)' },
- { value: 'heic', label: 'HEIC Image' },
- { value: 'avif', label: 'AVIF Image' }
- ],
- output: [
- { value: 'jpg', label: 'JPEG Image (JPG)' },
- { value: 'png', label: 'PNG Image' },
- { value: 'gif', label: 'GIF Image' },
- { value: 'bmp', label: 'Bitmap Image (BMP)' },
- { value: 'tiff', label: 'TIFF Image' },
- { value: 'webp', label: 'WebP Image' },
- { value: 'svg', label: 'SVG Vector Image' },
- { value: 'ico', label: 'Icon File (ICO)' },
- { value: 'pdf', label: 'PDF Document' },
- { value: 'eps', label: 'EPS Vector' },
- { value: 'ps', label: 'PostScript' },
- { value: 'avif', label: 'AVIF Image' }
- ]
- },
- ffmpeg: {
- input: [
- { value: 'mp4', label: 'MP4 Video' },
- { value: 'avi', label: 'AVI Video' },
- { value: 'mov', label: 'MOV Video (QuickTime)' },
- { value: 'mkv', label: 'MKV Video (Matroska)' },
- { value: 'wmv', label: 'WMV Video (Windows Media)' },
- { value: 'flv', label: 'FLV Video (Flash)' },
- { value: 'webm', label: 'WebM Video' },
- { value: 'mpeg', label: 'MPEG Video' },
- { value: 'mpg', label: 'MPG Video' },
- { value: 'm4v', label: 'M4V Video' },
- { value: 'mp3', label: 'MP3 Audio' },
- { value: 'wav', label: 'WAV Audio' },
- { value: 'ogg', label: 'OGG Audio' },
- { value: 'flac', label: 'FLAC Audio' },
- { value: 'aac', label: 'AAC Audio' },
- { value: 'm4a', label: 'M4A Audio' },
- { value: 'wma', label: 'WMA Audio' }
- ],
- output: [
- { value: 'mp4', label: 'MP4 Video' },
- { value: 'avi', label: 'AVI Video' },
- { value: 'mov', label: 'MOV Video (QuickTime)' },
- { value: 'mkv', label: 'MKV Video (Matroska)' },
- { value: 'webm', label: 'WebM Video' },
- { value: 'mpeg', label: 'MPEG Video' },
- { value: 'gif', label: 'Animated GIF' },
- { value: 'mp3', label: 'MP3 Audio' },
- { value: 'wav', label: 'WAV Audio' },
- { value: 'ogg', label: 'OGG Audio' },
- { value: 'flac', label: 'FLAC Audio' },
- { value: 'aac', label: 'AAC Audio' },
- { value: 'm4a', label: 'M4A Audio' }
- ]
- },
- pandoc: {
- input: [
- { value: 'md', label: 'Markdown (MD)' },
- { value: 'markdown', label: 'Markdown' },
- { value: 'html', label: 'HTML Document' },
- { value: 'docx', label: 'Word Document (DOCX)' },
- { value: 'odt', label: 'OpenDocument Text (ODT)' },
- { value: 'rtf', label: 'Rich Text Format (RTF)' },
- { value: 'tex', label: 'LaTeX Document' },
- { value: 'latex', label: 'LaTeX' },
- { value: 'epub', label: 'EPUB eBook' },
- { value: 'rst', label: 'reStructuredText (RST)' },
- { value: 'textile', label: 'Textile' },
- { value: 'org', label: 'Org Mode' },
- { value: 'mediawiki', label: 'MediaWiki' },
- { value: 'docbook', label: 'DocBook XML' }
- ],
- output: [
- { value: 'html', label: 'HTML Document' },
- { value: 'pdf', label: 'PDF Document' },
- { value: 'docx', label: 'Word Document (DOCX)' },
- { value: 'odt', label: 'OpenDocument Text (ODT)' },
- { value: 'rtf', label: 'Rich Text Format (RTF)' },
- { value: 'epub', label: 'EPUB eBook' },
- { value: 'latex', label: 'LaTeX Document' },
- { value: 'md', label: 'Markdown (MD)' },
- { value: 'rst', label: 'reStructuredText (RST)' },
- { value: 'textile', label: 'Textile' },
- { value: 'org', label: 'Org Mode' },
- { value: 'mediawiki', label: 'MediaWiki' },
- { value: 'docbook', label: 'DocBook XML' },
- { value: 'pptx', label: 'PowerPoint (PPTX)' }
- ]
- }
-};
-
-function showUniversalConverterDialog() {
- const dialog = document.getElementById('universal-converter-dialog');
- dialog.classList.remove('hidden');
- converterFilePath = '';
- document.getElementById('converter-file-path').value = '';
- document.getElementById('converter-tool').value = 'libreoffice';
- document.getElementById('converter-progress').classList.add('hidden');
- updateConverterFormats('libreoffice');
-}
-
-function updateConverterFormats(tool) {
- const fromSelect = document.getElementById('converter-from');
- const toSelect = document.getElementById('converter-to');
- const helpText = document.getElementById('converter-tool-help');
-
- // Clear existing options
- fromSelect.innerHTML = '';
- toSelect.innerHTML = '';
-
- // Get formats for selected tool
- const formats = converterFormats[tool];
-
- if (formats) {
- // Populate input formats
- formats.input.forEach(format => {
- const option = document.createElement('option');
- option.value = format.value;
- option.textContent = format.label;
- fromSelect.appendChild(option);
- });
-
- // Populate output formats
- formats.output.forEach(format => {
- const option = document.createElement('option');
- option.value = format.value;
- option.textContent = format.label;
- toSelect.appendChild(option);
- });
-
- // Update help text
- if (tool === 'libreoffice') {
- helpText.textContent = 'Documents, Spreadsheets, Presentations - Office file conversions';
- } else if (tool === 'imagemagick') {
- helpText.textContent = 'Image format conversions - JPG, PNG, GIF, TIFF, WebP, SVG, and more';
- } else if (tool === 'ffmpeg') {
- helpText.textContent = 'Video and audio conversions - MP4, AVI, MOV, MP3, WAV, and more';
- } else if (tool === 'pandoc') {
- helpText.textContent = 'Document markup conversions - Markdown, HTML, LaTeX, EPUB, and more';
- }
- }
-}
-
-function updateConverterAdvancedOptions(tool) {
- // Hide all tool-specific options
- const allOptions = document.querySelectorAll('.converter-options');
- allOptions.forEach(opt => opt.classList.add('hidden'));
-
- // Show options for selected tool
- const toolOptions = document.querySelector(`.${tool}-options`);
- if (toolOptions) {
- toolOptions.classList.remove('hidden');
- }
-}
-
-function collectConverterAdvancedOptions(tool) {
- const options = {};
- const advancedMode = document.getElementById('converter-advanced-toggle').checked;
-
- if (!advancedMode) {
- return options;
- }
-
- // Tool-specific options
- if (tool === 'imagemagick') {
- options.quality = document.getElementById('imagemagick-quality').value;
- options.dpi = document.getElementById('imagemagick-dpi').value || null;
- options.resize = document.getElementById('imagemagick-resize').value || null;
- options.compression = document.getElementById('imagemagick-compression').value || null;
- } else if (tool === 'ffmpeg') {
- options.videoCodec = document.getElementById('ffmpeg-video-codec').value || null;
- options.audioCodec = document.getElementById('ffmpeg-audio-codec').value || null;
- options.bitrate = document.getElementById('ffmpeg-bitrate').value || null;
- options.preset = document.getElementById('ffmpeg-preset').value || null;
- options.framerate = document.getElementById('ffmpeg-framerate').value || null;
- } else if (tool === 'libreoffice') {
- options.quality = document.getElementById('libreoffice-quality').value || null;
- options.pageRange = document.getElementById('libreoffice-page-range').value || null;
- options.exportBookmarks = document.getElementById('libreoffice-export-bookmarks').checked;
- }
-
- return options;
-}
-
-document.addEventListener('DOMContentLoaded', () => {
- // Universal Converter tool change
- const converterTool = document.getElementById('converter-tool');
- if (converterTool) {
- converterTool.addEventListener('change', (e) => {
- updateConverterFormats(e.target.value);
- updateConverterAdvancedOptions(e.target.value);
- });
- }
-
- // Batch mode toggle
- const converterBatchMode = document.getElementById('converter-batch-mode');
- if (converterBatchMode) {
- converterBatchMode.addEventListener('change', (e) => {
- const batchOptions = document.getElementById('converter-batch-options');
- const singleFileSection = document.getElementById('converter-file-path').closest('.export-section');
-
- if (e.target.checked) {
- batchOptions.classList.remove('hidden');
- singleFileSection.style.display = 'none';
- } else {
- batchOptions.classList.add('hidden');
- singleFileSection.style.display = 'block';
- }
- });
- }
-
- // Advanced options toggle
- const converterAdvancedToggle = document.getElementById('converter-advanced-toggle');
- if (converterAdvancedToggle) {
- converterAdvancedToggle.addEventListener('change', (e) => {
- const advancedOptions = document.getElementById('converter-advanced-options');
- if (e.target.checked) {
- advancedOptions.classList.remove('hidden');
- // Update which tool-specific options to show
- updateConverterAdvancedOptions(document.getElementById('converter-tool').value);
- } else {
- advancedOptions.classList.add('hidden');
- }
- });
- }
-
- // ImageMagick quality slider
- const imagemagickQuality = document.getElementById('imagemagick-quality');
- if (imagemagickQuality) {
- imagemagickQuality.addEventListener('input', (e) => {
- document.getElementById('imagemagick-quality-value').textContent = e.target.value;
- });
- }
-
- // Browse batch input folder
- const browseBatchInput = document.getElementById('browse-converter-batch-input');
- if (browseBatchInput) {
- browseBatchInput.addEventListener('click', () => {
- ipcRenderer.send('select-folder', 'converter-batch-input');
- });
- }
-
- // Browse batch output folder
- const browseBatchOutput = document.getElementById('browse-converter-batch-output');
- if (browseBatchOutput) {
- browseBatchOutput.addEventListener('click', () => {
- ipcRenderer.send('select-folder', 'converter-batch-output');
- });
- }
-
- // Browse for file to convert
- const browseConverterFile = document.getElementById('browse-converter-file');
- if (browseConverterFile) {
- browseConverterFile.addEventListener('click', () => {
- const input = document.createElement('input');
- input.type = 'file';
- input.accept = '*';
- input.onchange = (e) => {
- const file = e.target.files[0];
- if (file) {
- converterFilePath = file.path;
- document.getElementById('converter-file-path').value = file.path;
- }
- };
- input.click();
- });
- }
-
- // Universal Converter dialog close
- const converterDialogClose = document.getElementById('converter-dialog-close');
- if (converterDialogClose) {
- converterDialogClose.addEventListener('click', () => {
- document.getElementById('universal-converter-dialog').classList.add('hidden');
- });
- }
-
- // Universal Converter cancel
- const converterCancel = document.getElementById('converter-cancel');
- if (converterCancel) {
- converterCancel.addEventListener('click', () => {
- document.getElementById('universal-converter-dialog').classList.add('hidden');
- });
- }
-
- // Universal Converter convert
- const converterConvert = document.getElementById('converter-convert');
- if (converterConvert) {
- converterConvert.addEventListener('click', () => {
- const tool = document.getElementById('converter-tool').value;
- const fromFormat = document.getElementById('converter-from').value;
- const toFormat = document.getElementById('converter-to').value;
- const batchMode = document.getElementById('converter-batch-mode').checked;
- const advancedOptions = collectConverterAdvancedOptions(tool);
-
- if (batchMode) {
- // Batch conversion
- const inputFolder = document.getElementById('converter-batch-input-folder').value.trim();
- const outputFolder = document.getElementById('converter-batch-output-folder').value.trim();
- const includeSubfolders = document.getElementById('converter-batch-subfolders').checked;
-
- if (!inputFolder || !outputFolder) {
- alert('Please select both input and output folders for batch conversion');
- return;
- }
-
- // Show progress
- document.getElementById('converter-progress').classList.remove('hidden');
-
- // Send batch conversion request
- ipcRenderer.send('universal-convert-batch', {
- tool,
- fromFormat,
- toFormat,
- inputFolder,
- outputFolder,
- includeSubfolders,
- advancedOptions
- });
- } else {
- // Single file conversion
- const filePath = converterFilePath;
-
- if (!filePath) {
- alert('Please select a file to convert');
- return;
- }
-
- // Show progress
- document.getElementById('converter-progress').classList.remove('hidden');
-
- // Send single file conversion request
- ipcRenderer.send('universal-convert', {
- tool,
- fromFormat,
- toFormat,
- filePath,
- advancedOptions
- });
- }
- });
- }
-});
-
-// IPC event listeners for recent files functionality
-ipcRenderer.on('recent-files-cleared', () => {
- if (tabManager) {
- tabManager.recentFiles = [];
- localStorage.setItem('recentFiles', JSON.stringify([]));
- console.log('Recent files cleared');
- }
-});
-
-// ========================================
-// PDF Editor Dialog Functionality
-// ========================================
-
-let currentPDFOperation = null;
-let mergeFilePaths = [];
-
-// Show Table Generator Dialog
-ipcRenderer.on('show-table-generator', () => {
- showTableGenerator();
-});
-
-// Show PDF Editor Dialog
-ipcRenderer.on('show-pdf-editor-dialog', (event, operation, openedFilePath) => {
- currentPDFOperation = operation;
- showPDFEditorDialog(operation, openedFilePath);
-});
-
-function showPDFEditorDialog(operation, openedFilePath = null) {
- const dialog = document.getElementById('pdf-editor-dialog');
- const title = document.getElementById('pdf-editor-title');
-
- // Hide all operation sections
- document.querySelectorAll('.pdf-operation-section').forEach(section => {
- section.classList.add('hidden');
- });
-
- // Show the appropriate section and set title
- let sectionId, titleText;
- switch (operation) {
- case 'merge':
- sectionId = 'pdf-merge-section';
- titleText = 'Merge PDFs';
- mergeFilePaths = [];
- // If we have an opened file, add it as the first file to merge
- if (openedFilePath) {
- mergeFilePaths.push(openedFilePath);
- }
- updateMergeFilesList();
- break;
- case 'split':
- sectionId = 'pdf-split-section';
- titleText = 'Split PDF';
- // Pre-fill input path if we have an opened file
- if (openedFilePath) {
- document.getElementById('split-input-path').value = openedFilePath;
- }
- break;
- case 'compress':
- sectionId = 'pdf-compress-section';
- titleText = 'Compress PDF';
- if (openedFilePath) {
- document.getElementById('compress-input-path').value = openedFilePath;
- }
- break;
- case 'rotate':
- sectionId = 'pdf-rotate-section';
- titleText = 'Rotate Pages';
- if (openedFilePath) {
- const rotateInput = document.getElementById('rotate-input-path');
- if (rotateInput) rotateInput.value = openedFilePath;
- }
- break;
- case 'delete':
- sectionId = 'pdf-delete-section';
- titleText = 'Delete Pages';
- if (openedFilePath) {
- const deleteInput = document.getElementById('delete-input-path');
- if (deleteInput) deleteInput.value = openedFilePath;
- }
- break;
- case 'reorder':
- sectionId = 'pdf-reorder-section';
- titleText = 'Reorder Pages';
- if (openedFilePath) {
- const reorderInput = document.getElementById('reorder-input-path');
- if (reorderInput) reorderInput.value = openedFilePath;
- }
- break;
- case 'watermark':
- sectionId = 'pdf-watermark-section';
- titleText = 'Add Watermark';
- if (openedFilePath) {
- const watermarkInput = document.getElementById('watermark-input-path');
- if (watermarkInput) watermarkInput.value = openedFilePath;
- }
- break;
- case 'encrypt':
- sectionId = 'pdf-encrypt-section';
- titleText = 'Password Protection';
- if (openedFilePath) {
- const encryptInput = document.getElementById('encrypt-input-path');
- if (encryptInput) encryptInput.value = openedFilePath;
- }
- break;
- case 'decrypt':
- sectionId = 'pdf-decrypt-section';
- titleText = 'Remove Password';
- if (openedFilePath) {
- const decryptInput = document.getElementById('decrypt-input-path');
- if (decryptInput) decryptInput.value = openedFilePath;
- }
- break;
- case 'permissions':
- sectionId = 'pdf-permissions-section';
- titleText = 'Set Permissions';
- if (openedFilePath) {
- const permInput = document.getElementById('permissions-input-path');
- if (permInput) permInput.value = openedFilePath;
- }
- break;
- }
-
- title.textContent = titleText;
- document.getElementById(sectionId).classList.remove('hidden');
- dialog.classList.remove('hidden');
-}
-
-function hidePDFEditorDialog() {
- document.getElementById('pdf-editor-dialog').classList.add('hidden');
- document.getElementById('pdf-progress').classList.add('hidden');
- currentPDFOperation = null;
-}
-
-function updateMergeFilesList() {
- const listContainer = document.getElementById('merge-files-list');
- listContainer.innerHTML = '';
-
- mergeFilePaths.forEach((filePath, index) => {
- const fileEntry = document.createElement('div');
- fileEntry.className = 'file-entry';
- fileEntry.innerHTML = `
- ${filePath.split(/[\\/]/).pop()}
-
- `;
- listContainer.appendChild(fileEntry);
- });
-}
-
-// PDF Editor Event Listeners
-document.addEventListener('DOMContentLoaded', () => {
- // Close PDF Editor Dialog
- const pdfEditorClose = document.getElementById('pdf-editor-dialog-close');
- if (pdfEditorClose) {
- pdfEditorClose.addEventListener('click', hidePDFEditorDialog);
- }
-
- const pdfEditorCancel = document.getElementById('pdf-editor-cancel');
- if (pdfEditorCancel) {
- pdfEditorCancel.addEventListener('click', hidePDFEditorDialog);
- }
-
- // Process button
- const pdfEditorProcess = document.getElementById('pdf-editor-process');
- if (pdfEditorProcess) {
- pdfEditorProcess.addEventListener('click', processPDFOperation);
- }
-
- // Merge PDFs - Add file button
- const addMergeFile = document.getElementById('add-merge-file');
- if (addMergeFile) {
- addMergeFile.addEventListener('click', () => {
- const input = document.createElement('input');
- input.type = 'file';
- input.accept = '.pdf';
- input.multiple = true;
- input.onchange = (e) => {
- const files = Array.from(e.target.files);
- files.forEach(file => {
- if (!mergeFilePaths.includes(file.path)) {
- mergeFilePaths.push(file.path);
- }
- });
- updateMergeFilesList();
- };
- input.click();
- });
- }
-
- // Remove file from merge list (using event delegation)
- const mergeFilesList = document.getElementById('merge-files-list');
- if (mergeFilesList) {
- mergeFilesList.addEventListener('click', (e) => {
- if (e.target.classList.contains('remove-file')) {
- const index = parseInt(e.target.dataset.index);
- mergeFilePaths.splice(index, 1);
- updateMergeFilesList();
- }
- });
- }
-
- // Browse buttons for all operations
- const browseButtons = [
- { id: 'browse-merge-output', inputId: 'merge-output-path', saveDialog: true },
- { id: 'browse-split-input', inputId: 'split-input-path', saveDialog: false },
- { id: 'browse-split-output', inputId: 'split-output-folder', folder: true },
- { id: 'browse-compress-input', inputId: 'compress-input-path', saveDialog: false },
- { id: 'browse-compress-output', inputId: 'compress-output-path', saveDialog: true },
- { id: 'browse-rotate-input', inputId: 'rotate-input-path', saveDialog: false },
- { id: 'browse-rotate-output', inputId: 'rotate-output-path', saveDialog: true },
- { id: 'browse-delete-input', inputId: 'delete-input-path', saveDialog: false },
- { id: 'browse-delete-output', inputId: 'delete-output-path', saveDialog: true },
- { id: 'browse-reorder-input', inputId: 'reorder-input-path', saveDialog: false },
- { id: 'browse-reorder-output', inputId: 'reorder-output-path', saveDialog: true },
- { id: 'browse-watermark-input', inputId: 'watermark-input-path', saveDialog: false },
- { id: 'browse-watermark-output', inputId: 'watermark-output-path', saveDialog: true },
- { id: 'browse-encrypt-input', inputId: 'encrypt-input-path', saveDialog: false },
- { id: 'browse-encrypt-output', inputId: 'encrypt-output-path', saveDialog: true },
- { id: 'browse-decrypt-input', inputId: 'decrypt-input-path', saveDialog: false },
- { id: 'browse-decrypt-output', inputId: 'decrypt-output-path', saveDialog: true },
- { id: 'browse-permissions-input', inputId: 'permissions-input-path', saveDialog: false },
- { id: 'browse-permissions-output', inputId: 'permissions-output-path', saveDialog: true }
- ];
-
- browseButtons.forEach(button => {
- const btn = document.getElementById(button.id);
- if (btn) {
- btn.addEventListener('click', () => {
- const input = document.createElement('input');
- input.type = 'file';
-
- if (button.folder) {
- // Request folder selection via IPC
- ipcRenderer.send('select-pdf-folder', button.inputId);
- } else if (button.saveDialog) {
- input.nwsaveas = true;
- input.accept = '.pdf';
- input.onchange = (e) => {
- const file = e.target.files[0];
- if (file) {
- document.getElementById(button.inputId).value = file.path;
- }
- };
- input.click();
- } else {
- input.accept = '.pdf';
- input.onchange = (e) => {
- const file = e.target.files[0];
- if (file) {
- document.getElementById(button.inputId).value = file.path;
- }
- };
- input.click();
- }
- });
- }
- });
-
- // Split mode change handler
- const splitMode = document.getElementById('split-mode');
- if (splitMode) {
- splitMode.addEventListener('change', (e) => {
- // Hide all split options
- document.getElementById('split-pages-options').classList.add('hidden');
- document.getElementById('split-interval-options').classList.add('hidden');
- document.getElementById('split-size-options').classList.add('hidden');
-
- // Show selected split option
- if (e.target.value === 'pages') {
- document.getElementById('split-pages-options').classList.remove('hidden');
- } else if (e.target.value === 'interval') {
- document.getElementById('split-interval-options').classList.remove('hidden');
- } else if (e.target.value === 'size') {
- document.getElementById('split-size-options').classList.remove('hidden');
- }
- });
- }
-
- // Watermark opacity slider
- const watermarkOpacity = document.getElementById('watermark-opacity');
- if (watermarkOpacity) {
- watermarkOpacity.addEventListener('input', (e) => {
- document.getElementById('watermark-opacity-value').textContent = e.target.value;
- });
- }
-
- // Watermark pages selection
- const watermarkPages = document.getElementById('watermark-pages');
- if (watermarkPages) {
- watermarkPages.addEventListener('change', (e) => {
- const customPages = document.getElementById('watermark-custom-pages');
- if (e.target.value === 'custom') {
- customPages.classList.remove('hidden');
- } else {
- customPages.classList.add('hidden');
- }
- });
- }
-
- // Overwrite checkbox handlers - toggle Save As section visibility
- const overwriteCheckboxes = [
- { checkbox: 'compress-overwrite', section: 'compress-saveas-section' },
- { checkbox: 'rotate-overwrite', section: 'rotate-saveas-section' },
- { checkbox: 'delete-overwrite', section: 'delete-saveas-section' },
- { checkbox: 'reorder-overwrite', section: 'reorder-saveas-section' },
- { checkbox: 'watermark-overwrite', section: 'watermark-saveas-section' },
- { checkbox: 'encrypt-overwrite', section: 'encrypt-saveas-section' },
- { checkbox: 'decrypt-overwrite', section: 'decrypt-saveas-section' },
- { checkbox: 'permissions-overwrite', section: 'permissions-saveas-section' }
- ];
-
- overwriteCheckboxes.forEach(item => {
- const checkbox = document.getElementById(item.checkbox);
- const section = document.getElementById(item.section);
- if (checkbox && section) {
- checkbox.addEventListener('change', (e) => {
- if (e.target.checked) {
- section.classList.add('hidden');
- } else {
- section.classList.remove('hidden');
- }
- });
- }
- });
-
- // Load current page order button
- const loadCurrentOrder = document.getElementById('load-current-order');
- if (loadCurrentOrder) {
- loadCurrentOrder.addEventListener('click', () => {
- const inputPath = document.getElementById('reorder-input-path').value;
- if (!inputPath) {
- alert('Please select a PDF file first');
- return;
- }
- // Request page count from main process
- ipcRenderer.send('get-pdf-page-count', inputPath);
- });
- }
-});
-
-// Handle folder selection response
-ipcRenderer.on('pdf-folder-selected', (event, { inputId, path }) => {
- document.getElementById(inputId).value = path;
-});
-
-// Handle PDF page count response
-ipcRenderer.on('pdf-page-count', (event, { count, error }) => {
- if (error) {
- alert('Error reading PDF: ' + error);
- return;
- }
-
- const currentOrder = Array.from({ length: count }, (_, i) => i + 1).join(', ');
- document.getElementById('current-order-display').textContent = currentOrder;
- document.getElementById('current-page-order').classList.remove('hidden');
- document.getElementById('reorder-pages').value = currentOrder;
-});
-
-// Process PDF Operation
-function processPDFOperation() {
- const operation = currentPDFOperation;
- let operationData = { operation };
-
- try {
- switch (operation) {
- case 'merge':
- if (mergeFilePaths.length < 2) {
- alert('Please add at least 2 PDF files to merge');
- return;
- }
- operationData.inputFiles = mergeFilePaths;
- operationData.outputPath = document.getElementById('merge-output-path').value.trim();
- if (!operationData.outputPath) {
- alert('Please select an output file path');
- return;
- }
- break;
-
- case 'split':
- operationData.inputPath = document.getElementById('split-input-path').value.trim();
- operationData.outputFolder = document.getElementById('split-output-folder').value.trim();
- operationData.splitMode = document.getElementById('split-mode').value;
-
- if (!operationData.inputPath || !operationData.outputFolder) {
- alert('Please select input file and output folder');
- return;
- }
-
- if (operationData.splitMode === 'pages') {
- operationData.pageRanges = document.getElementById('split-page-ranges').value.trim();
- } else if (operationData.splitMode === 'interval') {
- operationData.interval = parseInt(document.getElementById('split-interval').value);
- } else if (operationData.splitMode === 'size') {
- operationData.maxSize = parseInt(document.getElementById('split-size').value);
- }
- break;
-
- case 'compress':
- operationData.inputPath = document.getElementById('compress-input-path').value.trim();
- operationData.overwrite = document.getElementById('compress-overwrite').checked;
- operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('compress-output-path').value.trim();
- operationData.compressionLevel = document.getElementById('compress-level').value;
- operationData.compressImages = document.getElementById('compress-images').checked;
- operationData.removeDuplicates = document.getElementById('compress-remove-duplicates').checked;
- operationData.optimizeFonts = document.getElementById('compress-optimize-fonts').checked;
-
- if (!operationData.inputPath || !operationData.outputPath) {
- alert('Please select input file' + (operationData.overwrite ? '' : ' and output file paths'));
- return;
- }
- break;
-
- case 'rotate':
- operationData.inputPath = document.getElementById('rotate-input-path').value.trim();
- operationData.overwrite = document.getElementById('rotate-overwrite').checked;
- operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('rotate-output-path').value.trim();
- operationData.pages = document.getElementById('rotate-pages').value.trim();
- operationData.angle = parseInt(document.getElementById('rotate-angle').value);
-
- if (!operationData.inputPath || !operationData.outputPath) {
- alert('Please select input file' + (operationData.overwrite ? '' : ' and output file'));
- return;
- }
- break;
-
- case 'delete':
- operationData.inputPath = document.getElementById('delete-input-path').value.trim();
- operationData.overwrite = document.getElementById('delete-overwrite').checked;
- operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('delete-output-path').value.trim();
- operationData.pages = document.getElementById('delete-pages').value.trim();
-
- if (!operationData.inputPath || !operationData.outputPath || !operationData.pages) {
- alert('Please fill in all required fields');
- return;
- }
- break;
-
- case 'reorder':
- operationData.inputPath = document.getElementById('reorder-input-path').value.trim();
- operationData.overwrite = document.getElementById('reorder-overwrite').checked;
- operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('reorder-output-path').value.trim();
- operationData.newOrder = document.getElementById('reorder-pages').value.trim();
-
- if (!operationData.inputPath || !operationData.outputPath || !operationData.newOrder) {
- alert('Please fill in all required fields');
- return;
- }
- break;
-
- case 'watermark':
- operationData.inputPath = document.getElementById('watermark-input-path').value.trim();
- operationData.overwrite = document.getElementById('watermark-overwrite').checked;
- operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('watermark-output-path').value.trim();
- operationData.text = document.getElementById('watermark-text').value.trim();
- operationData.fontSize = parseInt(document.getElementById('watermark-font-size').value);
- operationData.opacity = parseInt(document.getElementById('watermark-opacity').value) / 100;
- operationData.position = document.getElementById('watermark-position').value;
- operationData.color = document.getElementById('watermark-color').value;
- operationData.pages = document.getElementById('watermark-pages').value;
-
- if (operationData.pages === 'custom') {
- operationData.customPages = document.getElementById('watermark-custom-pages').value.trim();
- }
-
- if (!operationData.inputPath || !operationData.outputPath || !operationData.text) {
- alert('Please fill in all required fields');
- return;
- }
- break;
-
- case 'encrypt':
- operationData.inputPath = document.getElementById('encrypt-input-path').value.trim();
- operationData.overwrite = document.getElementById('encrypt-overwrite').checked;
- operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('encrypt-output-path').value.trim();
- operationData.userPassword = document.getElementById('encrypt-user-password').value;
- operationData.ownerPassword = document.getElementById('encrypt-owner-password').value;
- operationData.encryptionLevel = parseInt(document.getElementById('encrypt-level').value);
-
- operationData.permissions = {
- printing: document.getElementById('encrypt-allow-printing').checked,
- modifying: document.getElementById('encrypt-allow-modify').checked,
- copying: document.getElementById('encrypt-allow-copy').checked,
- annotating: document.getElementById('encrypt-allow-annotate').checked,
- fillingForms: document.getElementById('encrypt-allow-forms').checked,
- contentAccessibility: document.getElementById('encrypt-allow-extract').checked,
- documentAssembly: document.getElementById('encrypt-allow-assemble').checked,
- printingQuality: document.getElementById('encrypt-allow-print-high').checked
- };
-
- if (!operationData.inputPath || !operationData.outputPath || !operationData.userPassword) {
- alert('Please select file and enter a user password');
- return;
- }
- break;
-
- case 'decrypt':
- operationData.inputPath = document.getElementById('decrypt-input-path').value.trim();
- operationData.overwrite = document.getElementById('decrypt-overwrite').checked;
- operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('decrypt-output-path').value.trim();
- operationData.password = document.getElementById('decrypt-password').value;
-
- if (!operationData.inputPath || !operationData.outputPath || !operationData.password) {
- alert('Please fill in all required fields');
- return;
- }
- break;
-
- case 'permissions':
- operationData.inputPath = document.getElementById('permissions-input-path').value.trim();
- operationData.overwrite = document.getElementById('permissions-overwrite').checked;
- operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('permissions-output-path').value.trim();
- operationData.currentPassword = document.getElementById('permissions-current-password').value;
- operationData.ownerPassword = document.getElementById('permissions-owner-password').value;
-
- operationData.permissions = {
- printing: document.getElementById('permissions-allow-printing').checked,
- modifying: document.getElementById('permissions-allow-modify').checked,
- copying: document.getElementById('permissions-allow-copy').checked,
- annotating: document.getElementById('permissions-allow-annotate').checked,
- fillingForms: document.getElementById('permissions-allow-forms').checked,
- contentAccessibility: document.getElementById('permissions-allow-extract').checked,
- documentAssembly: document.getElementById('permissions-allow-assemble').checked,
- printingQuality: document.getElementById('permissions-allow-print-high').checked
- };
-
- if (!operationData.inputPath || !operationData.outputPath || !operationData.ownerPassword) {
- alert('Please fill in all required fields');
- return;
- }
- break;
- }
-
- // Show progress
- document.getElementById('pdf-progress').classList.remove('hidden');
- document.getElementById('pdf-progress-text').textContent = 'Processing PDF...';
-
- // Send to main process
- ipcRenderer.send('process-pdf-operation', operationData);
-
- } catch (error) {
- alert('Error: ' + error.message);
- console.error('PDF operation error:', error);
- }
-}
-
-// Handle PDF operation completion
-ipcRenderer.on('pdf-operation-complete', (event, { success, error, message }) => {
- document.getElementById('pdf-progress').classList.add('hidden');
-
- if (success) {
- alert(message || 'PDF operation completed successfully!');
- hidePDFEditorDialog();
- } else {
- alert('Error: ' + (error || 'PDF operation failed'));
- }
-});
-
-// Handle PDF operation progress
-ipcRenderer.on('pdf-operation-progress', (event, { message, progress }) => {
- document.getElementById('pdf-progress-text').textContent = message;
- if (progress !== undefined) {
- const progressFill = document.getElementById('pdf-progress-fill');
- if (progressFill) {
- progressFill.style.width = `${progress}%`;
- }
- }
-});
-
-// Add math rendering support using KaTeX for enhanced preview
-function initMathSupport() {
- // Add KaTeX CSS
- const katexCSS = document.createElement('link');
- katexCSS.rel = 'stylesheet';
- katexCSS.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css';
- katexCSS.crossOrigin = 'anonymous';
- document.head.appendChild(katexCSS);
-
- // Add KaTeX JS
- const katexJS = document.createElement('script');
- katexJS.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js';
- katexJS.crossOrigin = 'anonymous';
- katexJS.onload = () => {
- // Add auto-render extension
- const autoRenderJS = document.createElement('script');
- autoRenderJS.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js';
- autoRenderJS.crossOrigin = 'anonymous';
- autoRenderJS.onload = () => {
- console.log('Math support (KaTeX) initialized');
- // Re-render current preview to include math
- if (tabManager) {
- tabManager.updatePreview();
- }
- };
- document.head.appendChild(autoRenderJS);
- };
- document.head.appendChild(katexJS);
-}
-
-// Initialize math support on load
-initMathSupport();
-
-// ================================
-// Header & Footer Dialog Management
-// ================================
-
-let currentFieldTarget = null; // Track which input field is being edited
-
-// Open header/footer settings dialog
-function openHeaderFooterDialog() {
- const dialog = document.getElementById('header-footer-dialog');
- dialog.classList.remove('hidden');
-
- // Request current settings from main process
- ipcRenderer.send('get-header-footer-settings');
-}
-
-// Close header/footer settings dialog
-function closeHeaderFooterDialog() {
- const dialog = document.getElementById('header-footer-dialog');
- dialog.classList.add('hidden');
-}
-
-// Open field picker dialog
-function openFieldPickerDialog(targetInputId) {
- currentFieldTarget = targetInputId;
- const dialog = document.getElementById('field-picker-dialog');
- dialog.classList.remove('hidden');
-}
-
-// Close field picker dialog
-function closeFieldPickerDialog() {
- const dialog = document.getElementById('field-picker-dialog');
- dialog.classList.add('hidden');
- currentFieldTarget = null;
-}
-
-// Load settings into dialog
-ipcRenderer.on('header-footer-settings-data', (event, settings) => {
- // Enable/disable checkbox
- document.getElementById('hf-enabled').checked = settings.enabled;
-
- // Header fields
- document.getElementById('header-left').value = settings.header.left || '';
- document.getElementById('header-center').value = settings.header.center || '';
- document.getElementById('header-right').value = settings.header.right || '';
-
- // Footer fields
- document.getElementById('footer-left').value = settings.footer.left || '';
- document.getElementById('footer-center').value = settings.footer.center || '';
- document.getElementById('footer-right').value = settings.footer.right || '';
-
- // Logo previews
- if (settings.header.logo) {
- document.getElementById('header-logo-preview').textContent = path.basename(settings.header.logo);
- } else {
- document.getElementById('header-logo-preview').textContent = '';
- }
-
- if (settings.footer.logo) {
- document.getElementById('footer-logo-preview').textContent = path.basename(settings.footer.logo);
- } else {
- document.getElementById('footer-logo-preview').textContent = '';
- }
-
- // Update config content visibility
- toggleConfigContent();
-});
-
-// Toggle config content based on enabled checkbox
-function toggleConfigContent() {
- const enabled = document.getElementById('hf-enabled').checked;
- const configContent = document.getElementById('hf-config-content');
-
- if (enabled) {
- configContent.classList.remove('disabled');
- } else {
- configContent.classList.add('disabled');
- }
-}
-
-// Save header/footer settings
-function saveHeaderFooterSettings() {
- const settings = {
- enabled: document.getElementById('hf-enabled').checked,
- header: {
- left: document.getElementById('header-left').value || '',
- center: document.getElementById('header-center').value || '',
- right: document.getElementById('header-right').value || '',
- logo: null // Logo paths are managed separately
- },
- footer: {
- left: document.getElementById('footer-left').value || '',
- center: document.getElementById('footer-center').value || '',
- right: document.getElementById('footer-right').value || '',
- logo: null
- }
- };
-
- ipcRenderer.send('save-header-footer-settings', settings);
- closeHeaderFooterDialog();
-}
-
-// Handle logo browsing - ask main process to show open dialog
-function browseForLogo(position) {
- ipcRenderer.send('browse-header-footer-logo', position);
-}
-
-// Handle logo saved confirmation
-ipcRenderer.on('header-footer-logo-saved', (event, { position, path }) => {
- document.getElementById(`${position}-logo-preview`).textContent = path.split(/[\\/]/).pop();
-});
-
-// Clear logo
-function clearLogo(position) {
- ipcRenderer.send('clear-header-footer-logo', position);
- document.getElementById(`${position}-logo-preview`).textContent = '';
-}
-
-// Handle logo cleared confirmation
-ipcRenderer.on('header-footer-logo-cleared', (event, position) => {
- console.log(`${position} logo cleared`);
-});
-
-// Insert dynamic field into input
-function insertDynamicField(field) {
- if (currentFieldTarget) {
- const input = document.getElementById(currentFieldTarget);
- const cursorPos = input.selectionStart;
- const textBefore = input.value.substring(0, cursorPos);
- const textAfter = input.value.substring(cursorPos);
-
- input.value = textBefore + field + textAfter;
- input.focus();
- input.setSelectionRange(cursorPos + field.length, cursorPos + field.length);
- }
-
- closeFieldPickerDialog();
-}
-
-// Event Listeners for Header/Footer Dialog
-
-// Close buttons
-document.getElementById('header-footer-close').addEventListener('click', closeHeaderFooterDialog);
-document.getElementById('header-footer-cancel').addEventListener('click', closeHeaderFooterDialog);
-document.getElementById('header-footer-save').addEventListener('click', saveHeaderFooterSettings);
-
-// Enable/disable checkbox
-document.getElementById('hf-enabled').addEventListener('change', toggleConfigContent);
-
-// Field insert buttons
-document.querySelectorAll('.field-insert-btn').forEach(btn => {
- btn.addEventListener('click', () => {
- const target = btn.getAttribute('data-target');
- openFieldPickerDialog(target);
- });
-});
-
-// Logo browse buttons
-document.getElementById('header-logo-browse').addEventListener('click', () => browseForLogo('header'));
-document.getElementById('footer-logo-browse').addEventListener('click', () => browseForLogo('footer'));
-
-// Logo clear buttons
-document.getElementById('header-logo-clear').addEventListener('click', () => clearLogo('header'));
-document.getElementById('footer-logo-clear').addEventListener('click', () => clearLogo('footer'));
-
-// Field picker dialog
-document.getElementById('field-picker-close').addEventListener('click', closeFieldPickerDialog);
-document.querySelectorAll('.field-option').forEach(btn => {
- btn.addEventListener('click', () => {
- const field = btn.getAttribute('data-field');
- insertDynamicField(field);
- });
-});
-
-// Export function to make openHeaderFooterDialog accessible globally
-window.openHeaderFooterDialog = openHeaderFooterDialog;
-
-// Listen for menu command to open dialog
-ipcRenderer.on('open-header-footer-dialog', () => {
- openHeaderFooterDialog();
-});
-// Command Palette Implementation
-const commands = [
- { name: 'New File', action: () => tabManager.createTab(), shortcut: 'Ctrl+N' },
- { name: 'Open File', action: () => ipcRenderer.send('open-file'), shortcut: 'Ctrl+O' },
- { name: 'Save File', action: () => ipcRenderer.send('save-file'), shortcut: 'Ctrl+S' },
- { name: 'Save As', action: () => ipcRenderer.send('save-file-as'), shortcut: 'Ctrl+Shift+S' },
- { name: 'Export to PDF', action: () => ipcRenderer.send('export', 'pdf'), shortcut: '' },
- { name: 'Export to DOCX', action: () => ipcRenderer.send('export', 'docx'), shortcut: '' },
- { name: 'Export to HTML', action: () => ipcRenderer.send('export', 'html'), shortcut: '' },
- { name: 'Toggle Preview', action: () => tabManager.togglePreview(), shortcut: 'Ctrl+Shift+P' },
- { name: 'Toggle Line Numbers', action: () => tabManager.toggleLineNumbers(), shortcut: '' },
- { name: 'Find & Replace', action: () => showFindDialog(), shortcut: 'Ctrl+F' },
- { name: 'New Tab', action: () => tabManager.createTab(), shortcut: 'Ctrl+T' },
- { name: 'Close Tab', action: () => tabManager.closeTab(tabManager.activeTabId), shortcut: 'Ctrl+W' },
- { name: 'Undo', action: () => tabManager.undo(), shortcut: 'Ctrl+Z' },
- { name: 'Redo', action: () => tabManager.redo(), shortcut: 'Ctrl+Shift+Z' },
- { name: 'Bold', action: () => insertMarkdown('**', '**'), shortcut: 'Ctrl+B' },
- { name: 'Italic', action: () => insertMarkdown('*', '*'), shortcut: 'Ctrl+I' },
- { name: 'Heading 1', action: () => insertMarkdown('# ', ''), shortcut: '' },
- { name: 'Heading 2', action: () => insertMarkdown('## ', ''), shortcut: '' },
- { name: 'Heading 3', action: () => insertMarkdown('### ', ''), shortcut: '' },
- { name: 'Insert Link', action: () => insertMarkdown('[', '](url)'), shortcut: '' },
- { name: 'Insert Image', action: () => insertMarkdown(''), shortcut: '' },
- { name: 'Insert Code Block', action: () => insertMarkdown('```\n', '\n```'), shortcut: '' },
- { name: 'Insert Table', action: () => insertMarkdown('\n| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |\n', ''), shortcut: '' },
- { name: 'Table Generator', action: () => showTableGenerator(), shortcut: '' },
- { name: 'ASCII Art Generator', action: () => showASCIIGenerator(), shortcut: '' },
- { name: 'Increase Font Size', action: () => ipcRenderer.send('adjust-font-size', 'increase'), shortcut: 'Ctrl+Shift++' },
- { name: 'Decrease Font Size', action: () => ipcRenderer.send('adjust-font-size', 'decrease'), shortcut: 'Ctrl+Shift+-' }
-];
-
-let commandPaletteSelectedIndex = 0;
-let filteredCommands = [...commands];
-
-function showCommandPalette() {
- const palette = document.getElementById('command-palette');
- const searchInput = document.getElementById('command-search');
-
- palette.classList.remove('hidden');
- searchInput.value = '';
- searchInput.focus();
-
- filteredCommands = [...commands];
- commandPaletteSelectedIndex = 0;
- renderCommandList();
-}
-
-function hideCommandPalette() {
- const palette = document.getElementById('command-palette');
- palette.classList.add('hidden');
-}
-
-function renderCommandList() {
- const list = document.getElementById('command-list');
- list.innerHTML = '';
-
- filteredCommands.forEach((cmd, index) => {
- const item = document.createElement('div');
- item.className = 'command-item';
- if (index === commandPaletteSelectedIndex) {
- item.classList.add('selected');
- }
-
- const name = document.createElement('span');
- name.className = 'command-name';
- name.textContent = cmd.name;
-
- const shortcut = document.createElement('span');
- shortcut.className = 'command-shortcut';
- shortcut.textContent = cmd.shortcut || '';
-
- item.appendChild(name);
- if (cmd.shortcut) {
- item.appendChild(shortcut);
- }
-
- item.addEventListener('click', () => {
- executeCommand(cmd);
- });
-
- list.appendChild(item);
- });
-}
-
-function filterCommands(query) {
- const lowerQuery = query.toLowerCase();
- filteredCommands = commands.filter(cmd =>
- cmd.name.toLowerCase().includes(lowerQuery)
- );
- commandPaletteSelectedIndex = 0;
- renderCommandList();
-}
-
-function executeCommand(cmd) {
- hideCommandPalette();
- if (cmd && cmd.action) {
- cmd.action();
- }
-}
-
-function navigateCommandPalette(direction) {
- commandPaletteSelectedIndex += direction;
- if (commandPaletteSelectedIndex < 0) {
- commandPaletteSelectedIndex = filteredCommands.length - 1;
- }
- if (commandPaletteSelectedIndex >= filteredCommands.length) {
- commandPaletteSelectedIndex = 0;
- }
- renderCommandList();
-}
-
-// Command Palette Event Listeners
-document.addEventListener('keydown', (e) => {
- // Ctrl+Shift+P to open command palette
- if (e.ctrlKey && e.shiftKey && e.key === 'P') {
- e.preventDefault();
- showCommandPalette();
- return;
- }
-
- // Handle command palette navigation when open
- const palette = document.getElementById('command-palette');
- if (!palette.classList.contains('hidden')) {
- if (e.key === 'Escape') {
- e.preventDefault();
- hideCommandPalette();
- } else if (e.key === 'ArrowDown') {
- e.preventDefault();
- navigateCommandPalette(1);
- } else if (e.key === 'ArrowUp') {
- e.preventDefault();
- navigateCommandPalette(-1);
- } else if (e.key === 'Enter') {
- e.preventDefault();
- if (filteredCommands[commandPaletteSelectedIndex]) {
- executeCommand(filteredCommands[commandPaletteSelectedIndex]);
- }
- }
- }
-});
-
-document.getElementById('command-search').addEventListener('input', (e) => {
- filterCommands(e.target.value);
-});
-
-// Close on backdrop click
-document.getElementById('command-palette').addEventListener('click', (e) => {
- if (e.target === document.getElementById('command-palette')) {
- hideCommandPalette();
- }
-});
-
-// ============================================================================
-// TABLE GENERATOR
-// ============================================================================
-
-function showTableGenerator() {
- const dialog = document.getElementById('table-generator-dialog');
- dialog.classList.remove('hidden');
-
- // Generate initial preview
- generateTablePreview();
-
- // Focus on rows input
- setTimeout(() => {
- document.getElementById('table-rows').focus();
- }, 100);
-}
-
-function hideTableGenerator() {
- const dialog = document.getElementById('table-generator-dialog');
- dialog.classList.add('hidden');
-}
-
-function generateTablePreview() {
- const rows = parseInt(document.getElementById('table-rows').value) || 3;
- const cols = parseInt(document.getElementById('table-cols').value) || 3;
- const hasHeader = document.getElementById('table-has-header').checked;
- const alignment = document.getElementById('table-alignment').value;
-
- const table = generateMarkdownTable(rows, cols, hasHeader, alignment);
- document.getElementById('table-preview').textContent = table;
-}
-
-function generateMarkdownTable(rows, cols, hasHeader, alignment) {
- let table = '';
-
- // Generate alignment string
- let alignChar = '-';
- if (alignment === 'center') {
- alignChar = ':' + '-'.repeat(Math.max(8, 10)) + ':';
- } else if (alignment === 'right') {
- alignChar = '-'.repeat(Math.max(8, 10)) + ':';
- } else {
- alignChar = '-'.repeat(Math.max(8, 10));
- }
-
- // Generate header row
- if (hasHeader) {
- table += '| ';
- for (let c = 1; c <= cols; c++) {
- table += `Header ${c}`;
- if (c < cols) table += ' | ';
- }
- table += ' |\n';
-
- // Separator row
- table += '| ';
- for (let c = 1; c <= cols; c++) {
- table += alignChar;
- if (c < cols) table += ' | ';
- }
- table += ' |\n';
-
- // Data rows (excluding header)
- for (let r = 1; r < rows; r++) {
- table += '| ';
- for (let c = 1; c <= cols; c++) {
- table += `Cell ${r},${c}`;
- if (c < cols) table += ' | ';
- }
- table += ' |\n';
- }
- } else {
- // No header - all rows are data rows
- // First row (acts as separator position)
- table += '| ';
- for (let c = 1; c <= cols; c++) {
- table += `Cell 1,${c}`;
- if (c < cols) table += ' | ';
- }
- table += ' |\n';
-
- // Separator row
- table += '| ';
- for (let c = 1; c <= cols; c++) {
- table += alignChar;
- if (c < cols) table += ' | ';
- }
- table += ' |\n';
-
- // Remaining data rows
- for (let r = 2; r <= rows; r++) {
- table += '| ';
- for (let c = 1; c <= cols; c++) {
- table += `Cell ${r},${c}`;
- if (c < cols) table += ' | ';
- }
- table += ' |\n';
- }
- }
-
- return table;
-}
-
-function insertGeneratedTable() {
- const table = document.getElementById('table-preview').textContent;
-
- if (!table) {
- alert('Please generate a table preview first');
- return;
- }
-
- // Get active editor
- const activeTabId = tabManager ? tabManager.activeTabId : 1;
- const editor = document.getElementById(`editor-${activeTabId}`);
-
- if (!editor) {
- alert('No active editor found');
- return;
- }
-
- // Insert table at cursor position
- const start = editor.selectionStart;
- const before = editor.value.substring(0, start);
- const after = editor.value.substring(editor.selectionEnd);
-
- // Add newlines for spacing
- const tableWithSpacing = '\n' + table + '\n';
- editor.value = before + tableWithSpacing + after;
-
- // Update cursor position
- editor.selectionStart = editor.selectionEnd = start + tableWithSpacing.length;
- editor.focus();
-
- // Trigger update
- if (tabManager) {
- tabManager.handleEditorInput(activeTabId);
- }
-
- // Close dialog
- hideTableGenerator();
-}
-
-// Table Generator Event Listeners
-document.getElementById('table-dialog-close').addEventListener('click', hideTableGenerator);
-document.getElementById('table-cancel').addEventListener('click', hideTableGenerator);
-document.getElementById('table-generate-preview').addEventListener('click', generateTablePreview);
-document.getElementById('table-insert').addEventListener('click', insertGeneratedTable);
-
-// Auto-update preview when inputs change
-document.getElementById('table-rows').addEventListener('input', generateTablePreview);
-document.getElementById('table-cols').addEventListener('input', generateTablePreview);
-document.getElementById('table-has-header').addEventListener('change', generateTablePreview);
-document.getElementById('table-alignment').addEventListener('change', generateTablePreview);
-
-// Close dialog on backdrop click
-document.getElementById('table-generator-dialog').addEventListener('click', (e) => {
- if (e.target === document.getElementById('table-generator-dialog')) {
- hideTableGenerator();
- }
-});
-
-// Handle Enter key in inputs
-document.getElementById('table-rows').addEventListener('keypress', (e) => {
- if (e.key === 'Enter') {
- e.preventDefault();
- insertGeneratedTable();
- }
-});
-
-document.getElementById('table-cols').addEventListener('keypress', (e) => {
- if (e.key === 'Enter') {
- e.preventDefault();
- insertGeneratedTable();
- }
-});
-
-// ============================================================================
-// ASCII ART GENERATOR
-// ============================================================================
-
-let currentASCIIMode = 'text';
-
-function showASCIIGenerator() {
- const dialog = document.getElementById('ascii-art-dialog');
- dialog.classList.remove('hidden');
-
- // Initialize with text mode
- switchASCIIMode('text');
-
- // Generate initial preview
- setTimeout(() => {
- generateASCIIPreview();
- }, 100);
-}
-
-function hideASCIIGenerator() {
- const dialog = document.getElementById('ascii-art-dialog');
- dialog.classList.add('hidden');
-}
-
-function switchASCIIMode(mode) {
- currentASCIIMode = mode;
-
- // Update button states
- document.querySelectorAll('.ascii-mode-btn').forEach(btn => {
- btn.classList.remove('active');
- });
-
- // Hide all mode sections
- document.querySelectorAll('.ascii-mode-section').forEach(section => {
- section.classList.add('hidden');
- });
-
- // Show selected mode
- if (mode === 'text') {
- document.getElementById('ascii-mode-text').classList.add('active');
- document.getElementById('ascii-text-mode').classList.remove('hidden');
- } else if (mode === 'box') {
- document.getElementById('ascii-mode-box').classList.add('active');
- document.getElementById('ascii-box-mode').classList.remove('hidden');
- } else if (mode === 'templates') {
- document.getElementById('ascii-mode-templates').classList.add('active');
- document.getElementById('ascii-templates-mode').classList.remove('hidden');
- }
-
- // Generate preview
- generateASCIIPreview();
-}
-
-function generateASCIIPreview() {
- let result = '';
-
- if (currentASCIIMode === 'text') {
- const text = document.getElementById('ascii-text-input').value || 'Sample';
- const style = document.getElementById('ascii-font-style').value;
- result = textToASCII(text, style);
- } else if (currentASCIIMode === 'box') {
- const text = document.getElementById('ascii-box-text').value || 'Sample Text';
- const style = document.getElementById('ascii-box-style').value;
- const padding = parseInt(document.getElementById('ascii-box-padding').value) || 2;
- result = createASCIIBox(text, style, padding);
- } else if (currentASCIIMode === 'templates') {
- result = 'Select a template from the buttons above';
- }
-
- document.getElementById('ascii-preview').textContent = result;
-}
-
-// Simple ASCII art text generator
-function textToASCII(text, style) {
- const fonts = {
- standard: {
- height: 5,
- chars: {
- 'A': [' _ ', ' / \\ ', '/___\\', '| |', '| |'],
- 'B': ['____ ', '| \\', '|___/', '| \\', '|___/'],
- 'C': [' ___ ', '/ _/', '| \\', '| ', '\\___/'],
- 'D': ['____ ', '| \\', '| |', '| |', '|___/'],
- 'E': ['_____', '| ', '|___ ', '| ', '|____'],
- 'F': ['_____', '| ', '|___ ', '| ', '| '],
- 'G': [' ___ ', '/ _', '| ||', '| |', '\\___/'],
- 'H': ['| |', '| |', '|___|', '| |', '| |'],
- 'I': ['_____', ' | ', ' | ', ' | ', '_____'],
- 'J': ['_____', ' | ', ' | ', '| | ', '\\__/ '],
- 'K': ['| |', '| / ', '|_/ ', '| \\ ', '| \\ '],
- 'L': ['| ', '| ', '| ', '| ', '|____'],
- 'M': ['| |', '|\\ /|', '| V |', '| |', '| |'],
- 'N': ['| |', '|\\ |', '| \\ |', '| \\|', '| |'],
- 'O': [' ___ ', '/ \\', '| |', '| |', '\\___/'],
- 'P': ['____ ', '| \\', '|___/', '| ', '| '],
- 'Q': [' ___ ', '/ \\', '| |', '| |\\ ', '\\__\\|'],
- 'R': ['____ ', '| \\', '|___/', '| \\ ', '| \\ '],
- 'S': [' ___ ', '/ _/', '\\_ \\', ' \\ ', '\\___/'],
- 'T': ['_____', ' | ', ' | ', ' | ', ' | '],
- 'U': ['| |', '| |', '| |', '| |', '\\___/'],
- 'V': ['| |', '| |', '| |', ' \\ / ', ' V '],
- 'W': ['| |', '| |', '| W |', '|/ \\|', '| |'],
- 'X': ['| |', ' \\ / ', ' X ', ' / \\ ', '| |'],
- 'Y': ['| |', ' \\ / ', ' Y ', ' | ', ' | '],
- 'Z': ['_____', ' / ', ' / ', ' / ', '/___ '],
- ' ': [' ', ' ', ' ', ' ', ' '],
- '0': [' ___ ', '/ \\', '| | |', '| |', '\\___/'],
- '1': [' | ', ' || ', ' | ', ' | ', ' _|_ '],
- '2': [' ___ ', '\\ /', ' __/ ', '/ ', '\\____'],
- '3': [' ___ ', '\\ /', ' __/ ', ' / ', '\\___/'],
- '4': ['| |', '| |', '|___|', ' |', ' |'],
- '5': [' ___ ', '| ', '|___ ', ' / ', '\\___/'],
- '6': [' ___ ', '/ ', '|___ ', '| |', '\\___/'],
- '7': ['_____', ' / ', ' / ', ' / ', '/ '],
- '8': [' ___ ', '| |', ' ___ ', '| |', '\\___/'],
- '9': [' ___ ', '| |', '\\___|', ' |', '\\___/']
- }
- },
- banner: {
- height: 7,
- chars: {
- 'A': [' ### ', ' ## ## ', ' ## ## ', ' ## ## ', ' ####### ', ' ## ## ', ' ## ## '],
- 'B': [' ###### ', ' ## ## ', ' ## ## ', ' ###### ', ' ## ## ', ' ## ## ', ' ###### '],
- 'C': [' ##### ', ' ## ## ', ' ## ', ' ## ', ' ## ', ' ## ## ', ' ##### '],
- 'D': [' ###### ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ###### '],
- 'E': [' ####### ', ' ## ', ' ## ', ' ##### ', ' ## ', ' ## ', ' ####### '],
- 'F': [' ####### ', ' ## ', ' ## ', ' ##### ', ' ## ', ' ## ', ' ## '],
- 'G': [' ##### ', ' ## ## ', ' ## ', ' ## ### ', ' ## ## ', ' ## ## ', ' ##### '],
- 'H': [' ## ## ', ' ## ## ', ' ## ## ', ' ####### ', ' ## ## ', ' ## ## ', ' ## ## '],
- 'I': [' ####### ', ' ### ', ' ### ', ' ### ', ' ### ', ' ### ', ' ####### '],
- 'J': [' ####### ', ' ## ', ' ## ', ' ## ', ' ## ## ', ' ## ## ', ' #### '],
- 'K': [' ## ## ', ' ## ## ', ' ## ## ', ' #### ', ' ## ## ', ' ## ## ', ' ## ## '],
- 'L': [' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ####### '],
- 'M': [' ## ## ', ' ### ### ', ' ####### ', ' ## # ## ', ' ## ## ', ' ## ## ', ' ## ## '],
- 'N': [' ## ## ', ' ### ## ', ' #### ## ', ' ## #### ', ' ## ### ', ' ## ## ', ' ## ## '],
- 'O': [' ##### ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ##### '],
- 'P': [' ###### ', ' ## ## ', ' ## ## ', ' ###### ', ' ## ', ' ## ', ' ## '],
- 'Q': [' ##### ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## # ## ', ' ## ## ', ' ### ## '],
- 'R': [' ###### ', ' ## ## ', ' ## ## ', ' ###### ', ' ## ## ', ' ## ## ', ' ## ## '],
- 'S': [' ##### ', ' ## ## ', ' ## ', ' ##### ', ' ## ', ' ## ## ', ' ##### '],
- 'T': [' ####### ', ' ### ', ' ### ', ' ### ', ' ### ', ' ### ', ' ### '],
- 'U': [' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ##### '],
- 'V': [' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ### '],
- 'W': [' ## ## ', ' ## ## ', ' ## ## ', ' ## # ## ', ' ####### ', ' ### ### ', ' ## ## '],
- 'X': [' ## ## ', ' ## ## ', ' ### ', ' # ', ' ### ', ' ## ## ', ' ## ## '],
- 'Y': [' ## ## ', ' ## ## ', ' ### ', ' # ', ' # ', ' # ', ' # '],
- 'Z': [' ####### ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ####### '],
- ' ': [' ', ' ', ' ', ' ', ' ', ' ', ' '],
- '0': [' ##### ', ' ## ## ', ' ## ### ', ' ## #### ', ' ### ## ', ' ## ## ', ' ##### '],
- '1': [' ## ', ' ### ', ' ## ', ' ## ', ' ## ', ' ## ', ' ####### '],
- '2': [' ##### ', ' ## ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ####### '],
- '3': [' ##### ', ' ## ## ', ' ## ', ' ### ', ' ## ', ' ## ## ', ' ##### '],
- '4': [' ### ', ' #### ', ' ## ## ', ' ## ## ', ' ####### ', ' ## ', ' ## '],
- '5': [' ####### ', ' ## ', ' ###### ', ' ## ', ' ## ', ' ## ## ', ' ##### '],
- '6': [' ##### ', ' ## ## ', ' ## ', ' ###### ', ' ## ## ', ' ## ## ', ' ##### '],
- '7': [' ####### ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## '],
- '8': [' ##### ', ' ## ## ', ' ## ## ', ' ##### ', ' ## ## ', ' ## ## ', ' ##### '],
- '9': [' ##### ', ' ## ## ', ' ## ## ', ' ###### ', ' ## ', ' ## ## ', ' ##### ']
- }
- },
- block: {
- height: 6,
- chars: {
- 'A': ['█████╗ ', '██╔══██╗', '███████║', '██╔══██║', '██║ ██║', '╚═╝ ╚═╝'],
- 'B': ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██████╔╝', '╚═════╝ '],
- 'C': ['██████╗', '██╔════╝', '██║ ', '██║ ', '╚██████╗', ' ╚═════╝'],
- 'D': ['██████╗ ', '██╔══██╗', '██║ ██║', '██║ ██║', '██████╔╝', '╚═════╝ '],
- 'E': ['███████╗', '██╔════╝', '█████╗ ', '██╔══╝ ', '███████╗', '╚══════╝'],
- 'F': ['███████╗', '██╔════╝', '█████╗ ', '██╔══╝ ', '██║ ', '╚═╝ '],
- 'G': ['██████╗ ', '██╔════╝', '██║ ███╗', '██║ ██║', '╚██████╔╝', ' ╚═════╝ '],
- 'H': ['██╗ ██╗', '██║ ██║', '███████║', '██╔══██║', '██║ ██║', '╚═╝ ╚═╝'],
- 'I': ['██╗', '██║', '██║', '██║', '██║', '╚═╝'],
- ' ': [' ', ' ', ' ', ' ', ' ', ' ']
- }
- },
- bubble: {
- height: 5,
- chars: {
- 'A': [' Ⓐ ', ' ⒜ ⒜ ', '⒜⒜⒜⒜⒜', '⒜ ⒜', '⒜ ⒜'],
- 'B': ['ⒷⒷⒷⒷ ', 'Ⓑ Ⓑ', 'ⒷⒷⒷⒷ ', 'Ⓑ Ⓑ', 'ⒷⒷⒷⒷ '],
- 'C': [' ⒸⒸⒸ ', 'Ⓒ ', 'Ⓒ ', 'Ⓒ ', ' ⒸⒸⒸ '],
- ' ': [' ', ' ', ' ', ' ', ' ']
- }
- },
- digital: {
- height: 7,
- chars: {
- 'A': [' ▄▀▀▀▄ ', '▐ ▌', '▐▄▄▄▄▌', '▐ ▌', '▐ ▌', '▐ ▌', ' '],
- 'B': ['▐▀▀▀▄ ', '▐▄▄▄▀ ', '▐▄▄▄▄ ', '▐ ▌', '▐▄▄▄▀ ', ' ', ' '],
- 'C': [' ▄▀▀▀▄', '▐ ', '▐ ', '▐ ', ' ▀▄▄▄▀', ' ', ' '],
- ' ': [' ', ' ', ' ', ' ', ' ', ' ', ' ']
- }
- }
- };
-
- // Use selected font or fallback to standard
- const font = fonts[style] || fonts.standard;
- const lines = [];
- const upperText = text.toUpperCase();
-
- for (let i = 0; i < font.height; i++) {
- lines[i] = '';
- }
-
- for (let char of upperText) {
- const charLines = font.chars[char] || font.chars[' '];
- if (charLines) {
- for (let i = 0; i < font.height; i++) {
- lines[i] += (charLines[i] || ' '.repeat(font.chars[' '][i].length));
- }
- }
- }
-
- return lines.join('\n');
-}
-
-// Create ASCII box/frame
-function createASCIIBox(text, style, padding) {
- const styles = {
- single: { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' },
- double: { tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' },
- rounded: { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' },
- bold: { tl: '┏', tr: '┓', bl: '┗', br: '┛', h: '━', v: '┃' },
- ascii: { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' }
- };
-
- const chars = styles[style] || styles.single;
- const lines = text.split('\n');
- const maxLength = Math.max(...lines.map(l => l.length));
- const width = maxLength + (padding * 2);
-
- let result = '';
-
- // Top border
- result += chars.tl + chars.h.repeat(width) + chars.tr + '\n';
-
- // Padding rows above
- for (let i = 0; i < padding - 1; i++) {
- result += chars.v + ' '.repeat(width) + chars.v + '\n';
- }
-
- // Content lines
- for (let line of lines) {
- const paddedLine = line.padEnd(maxLength, ' ');
- result += chars.v + ' '.repeat(padding) + paddedLine + ' '.repeat(padding) + chars.v + '\n';
- }
-
- // Padding rows below
- for (let i = 0; i < padding - 1; i++) {
- result += chars.v + ' '.repeat(width) + chars.v + '\n';
- }
-
- // Bottom border
- result += chars.bl + chars.h.repeat(width) + chars.br;
-
- return result;
-}
-
-// ASCII Art Templates
-function getASCIITemplate(templateName) {
- const templates = {
- 'arrow-right': `
- ┌────────┐
- │ │
-────► NEXT │
- │ │
- └────────┘`,
- 'arrow-down': `
- │
- │
- ▼
- ┌──────┐
- │ NEXT │
- └──────┘`,
- 'check': `
- ✓ Task completed
- ✓ All tests passed
- ✓ Ready to deploy
- ✓ Documentation updated`,
- 'divider': `
-═══════════════════════════════════════════════════════════
-`,
- 'header': `
-╔═══════════════════════════════════════════════════╗
-║ SECTION HEADER ║
-╚═══════════════════════════════════════════════════╝`,
- 'flowchart': `
-┌─────────────┐
-│ START │
-└──────┬──────┘
- │
- ▼
-┌─────────────┐
-│ PROCESS │
-└──────┬──────┘
- │
- ┌───┴───┐
- │ Check │
- └───┬───┘
- │
- ┌───▼──┬──────┐
- │ Yes │ No │
- ▼ ▼ │
-┌────┐ ┌────┐ │
-│ A │ │ B │ │
-└─┬──┘ └─┬──┘ │
- │ │ │
- └──┬───┘ │
- │◄──────────┘
- ▼
-┌─────────────┐
-│ END │
-└─────────────┘`,
- 'decision': `
- ┌─────────┐
- │ Check? │
- └────┬────┘
- │
- ┌─────┴─────┐
- │ │
- Yes│ │No
- ▼ ▼
- ┌────────┐ ┌────────┐
- │ True │ │ False │
- └────────┘ └────────┘`,
- 'sequence': `
- User System Database
- │ │ │
- │ Request │ │
- ├──────────►│ │
- │ │ Query │
- │ ├──────────►│
- │ │ │
- │ │ Result │
- │ │◄──────────┤
- │ Response │ │
- │◄──────────┤ │
- │ │ │`,
- 'table-simple': `
-┌──────────┬──────────┬──────────┐
-│ Header 1 │ Header 2 │ Header 3 │
-├──────────┼──────────┼──────────┤
-│ Data 1 │ Data 2 │ Data 3 │
-├──────────┼──────────┼──────────┤
-│ Data 4 │ Data 5 │ Data 6 │
-└──────────┴──────────┴──────────┘`,
- 'timeline': `
- 2020 2021 2022 2023
- │ │ │ │
- ●───────────●───────────●───────────●
- │ │ │ │
- Start Milestone Release Current`,
- 'network': `
- ┌──────────┐
- │ Server │
- └────┬─────┘
- │
- ┌─────────┼─────────┐
- │ │ │
- ┌───▼───┐ ┌──▼────┐ ┌──▼────┐
- │Client1│ │Client2│ │Client3│
- └───────┘ └───────┘ └───────┘`,
- 'hierarchy': `
- ┌─────────┐
- │ Root │
- └────┬────┘
- │
- ┌────────┴────────┐
- │ │
-┌───▼───┐ ┌───▼───┐
-│Child 1│ │Child 2│
-└───┬───┘ └───┬───┘
- │ │
-┌───▼───┐ ┌───▼───┐
-│Grand 1│ │Grand 2│
-└───────┘ └───────┘`,
- 'process-flow': `
-┌─────────┐ ┌─────────┐ ┌─────────┐
-│ Input │────►│Process 1│────►│ Output │
-└─────────┘ └────┬────┘ └─────────┘
- │
- ┌────▼────┐
- │Process 2│
- └─────────┘`,
- 'note-box': `
-┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-┃ NOTE: ┃
-┃ This is an important note ┃
-┃ that requires attention! ┃
-┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`,
- 'warning-box': `
-╔════════════════════════════════════╗
-║ ⚠ WARNING ║
-║ Proceed with caution! ║
-╚════════════════════════════════════╝`,
- 'info-box': `
-╭────────────────────────────────────╮
-│ ℹ Information │
-│ Additional context here │
-╰────────────────────────────────────╯`,
- 'separator-fancy': `
-╭──────────────────────────────────────────────────────╮
-│ │
-╰──────────────────────────────────────────────────────╯`,
- 'brackets': `
-【 Important Text 】`,
- 'banner-stars': `
-************************************************************************
-* IMPORTANT BANNER *
-************************************************************************`,
- 'progress-bar': `
-Progress: [████████████░░░░░░░░] 60%
- 0% 100%`
- };
-
- return templates[templateName] || '';
-}
-
-function loadASCIITemplate(templateName) {
- const template = getASCIITemplate(templateName);
- document.getElementById('ascii-preview').textContent = template;
-}
-
-function insertASCIIArt() {
- const asciiArt = document.getElementById('ascii-preview').textContent;
-
- if (!asciiArt || asciiArt === 'Select a template from the buttons above') {
- alert('Please generate ASCII art first');
- return;
- }
-
- // Get active editor
- const activeTabId = tabManager ? tabManager.activeTabId : 1;
- const editor = document.getElementById(`editor-${activeTabId}`);
-
- if (!editor) {
- alert('No active editor found');
- return;
- }
-
- // Insert in code block for proper rendering
- const start = editor.selectionStart;
- const before = editor.value.substring(0, start);
- const after = editor.value.substring(editor.selectionEnd);
-
- const codeBlock = '\n```\n' + asciiArt + '\n```\n';
- editor.value = before + codeBlock + after;
-
- // Update cursor position
- editor.selectionStart = editor.selectionEnd = start + codeBlock.length;
- editor.focus();
-
- // Trigger update
- if (tabManager) {
- tabManager.handleEditorInput(activeTabId);
- }
-
- // Close dialog
- hideASCIIGenerator();
-}
-
-// ASCII Art Event Listeners
-document.getElementById('ascii-dialog-close').addEventListener('click', hideASCIIGenerator);
-document.getElementById('ascii-cancel').addEventListener('click', hideASCIIGenerator);
-document.getElementById('ascii-generate').addEventListener('click', generateASCIIPreview);
-document.getElementById('ascii-insert').addEventListener('click', insertASCIIArt);
-
-// Mode switching
-document.getElementById('ascii-mode-text').addEventListener('click', () => switchASCIIMode('text'));
-document.getElementById('ascii-mode-box').addEventListener('click', () => switchASCIIMode('box'));
-document.getElementById('ascii-mode-templates').addEventListener('click', () => switchASCIIMode('templates'));
-
-// Auto-update preview for text mode
-document.getElementById('ascii-text-input').addEventListener('input', generateASCIIPreview);
-document.getElementById('ascii-font-style').addEventListener('change', generateASCIIPreview);
-
-// Auto-update preview for box mode
-document.getElementById('ascii-box-text').addEventListener('input', generateASCIIPreview);
-document.getElementById('ascii-box-style').addEventListener('change', generateASCIIPreview);
-document.getElementById('ascii-box-padding').addEventListener('input', generateASCIIPreview);
-
-// Template buttons
-document.querySelectorAll('.ascii-template-btn').forEach(btn => {
- btn.addEventListener('click', function() {
- const template = this.getAttribute('data-template');
- loadASCIITemplate(template);
- });
-});
-
-// Close dialog on backdrop click
-document.getElementById('ascii-art-dialog').addEventListener('click', (e) => {
- if (e.target === document.getElementById('ascii-art-dialog')) {
- hideASCIIGenerator();
- }
-});
-
-// IPC listener for menu
-ipcRenderer.on('show-ascii-generator', () => {
- showASCIIGenerator();
-});
-
-// ============================================================================
-// PANE RESIZING
-// ============================================================================
-
-let isResizing = false;
-let currentResizer = null;
-
-document.addEventListener('mousedown', (e) => {
- if (e.target.classList.contains('pane-resizer')) {
- isResizing = true;
- currentResizer = e.target;
- document.body.style.cursor = 'col-resize';
- document.body.style.userSelect = 'none';
- }
-});
-
-document.addEventListener('mousemove', (e) => {
- if (!isResizing) return;
-
- const container = currentResizer.parentElement;
- const editorPane = currentResizer.previousElementSibling;
- const previewPane = currentResizer.nextElementSibling;
-
- const containerRect = container.getBoundingClientRect();
- const containerWidth = containerRect.width;
- const mouseX = e.clientX - containerRect.left;
-
- // Calculate percentages (minimum 20%, maximum 80% for each pane)
- let editorPercentage = (mouseX / containerWidth) * 100;
- editorPercentage = Math.max(20, Math.min(80, editorPercentage));
-
- const previewPercentage = 100 - editorPercentage;
-
- editorPane.style.flex = `0 0 ${editorPercentage}%`;
- previewPane.style.flex = `0 0 ${previewPercentage}%`;
-});
-
-document.addEventListener('mouseup', () => {
- if (isResizing) {
- isResizing = false;
- currentResizer = null;
- document.body.style.cursor = '';
- document.body.style.userSelect = '';
- }
-});
-
-// ============================================================================
-// PREVIEW POP-OUT
-// ============================================================================
-
-let popoutWindow = null;
-
-function popoutPreview(tabId) {
- const previewContent = document.getElementById(`preview-${tabId}`);
-
- if (!previewContent) {
- alert('No preview content to pop out');
- return;
- }
-
- // Close existing popout if open
- if (popoutWindow && !popoutWindow.closed) {
- popoutWindow.close();
- }
-
- // Create new window
- popoutWindow = window.open('', 'Preview Window', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');
-
- if (!popoutWindow) {
- alert('Pop-up blocked! Please allow pop-ups for this application.');
- return;
- }
-
- // Write content to popout window
- const htmlContent = `
-
-
-
-
- ${previewContent.innerHTML}
-
-
-
-
- `;
-
- popoutWindow.document.write(htmlContent);
- popoutWindow.document.close();
-
- // Setup auto-update
- setupPopoutAutoUpdate(tabId);
-}
-
-function getPreviewStyles() {
- // Extract relevant preview styles
- return `
- h1, h2, h3, h4, h5, h6 {
- margin-top: 24px;
- margin-bottom: 16px;
- font-weight: 600;
- line-height: 1.25;
- }
- h1 {
- font-size: 2em;
- border-bottom: 1px solid #eaecef;
- padding-bottom: 0.3em;
- }
- h2 {
- font-size: 1.5em;
- border-bottom: 1px solid #eaecef;
- padding-bottom: 0.3em;
- }
- p {
- margin-bottom: 16px;
- }
- code {
- padding: 0.2em 0.4em;
- margin: 0;
- font-size: 85%;
- background-color: #f6f8fa;
- border: 1px solid #d0d7de;
- border-radius: 6px;
- font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
- }
- pre {
- padding: 16px;
- overflow: auto;
- font-size: 85%;
- line-height: 1.45;
- background-color: #f6f8fa;
- border: 1px solid #d0d7de;
- border-radius: 6px;
- margin-bottom: 16px;
- }
- pre code {
- background: transparent;
- border: none;
- padding: 0;
- }
- table {
- border-collapse: collapse;
- margin-bottom: 16px;
- width: 100%;
- }
- table th, table td {
- padding: 6px 13px;
- border: 1px solid #dfe2e5;
- }
- table th {
- font-weight: 600;
- background-color: #f6f8fa;
- }
- a {
- color: #0366d6;
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
- blockquote {
- padding: 0 1em;
- color: #6a737d;
- border-left: 0.25em solid #dfe2e5;
- margin-bottom: 16px;
- }
- img {
- max-width: 100%;
- height: auto;
- }
- ul, ol {
- padding-left: 2em;
- margin-bottom: 16px;
- }
- li {
- margin-bottom: 4px;
- }
- `;
-}
-
-function setupPopoutAutoUpdate(tabId) {
- // Monitor for preview changes and update popout
- const observer = new MutationObserver(() => {
- if (popoutWindow && !popoutWindow.closed) {
- const previewContent = document.getElementById(`preview-${tabId}`);
- popoutWindow.postMessage({
- type: 'preview-update',
- content: previewContent.innerHTML
- }, '*');
- } else {
- observer.disconnect();
- }
- });
-
- const previewElement = document.getElementById(`preview-${tabId}`);
- if (previewElement) {
- observer.observe(previewElement, {
- childList: true,
- subtree: true,
- characterData: true
- });
- }
-}
-
-// Pop-out button event listener
-document.addEventListener('click', (e) => {
- if (e.target.classList.contains('preview-popout-btn')) {
- const tabId = e.target.id.replace('preview-popout-', '');
- popoutPreview(tabId);
- }
-});
-
-// ============================================
-// Insert Content from Generator Windows
-// ============================================
-ipcRenderer.on('insert-content', (event, content) => {
- if (tabManager) {
- const activeTabId = tabManager.activeTabId;
- const editor = document.getElementById(`editor-${activeTabId}`);
- if (editor) {
- const cursorPos = editor.selectionStart;
- const textBefore = editor.value.substring(0, cursorPos);
- const textAfter = editor.value.substring(cursorPos);
-
- editor.value = textBefore + content + textAfter;
- editor.focus();
-
- const newPos = cursorPos + content.length;
- editor.setSelectionRange(newPos, newPos);
-
- // Update state and preview
- tabManager.tabs.get(activeTabId).content = editor.value;
- tabManager.tabs.get(activeTabId).modified = true;
- tabManager.updatePreview(activeTabId);
- tabManager.updateTabTitle(activeTabId);
- }
- }
-});
-
-// ============================================
-// PDF VIEWER FUNCTIONALITY
-// ============================================
-
-let pdfDoc = null;
-let pdfCurrentPage = 1;
-let pdfZoomLevel = 1.0;
-let pdfRotation = 0;
-let pdfFilePath = null;
-let isPdfViewerActive = false; // Track if PDF viewer is currently shown
-
-// Initialize PDF.js
-const pdfjsLib = require('pdfjs-dist');
-pdfjsLib.GlobalWorkerOptions.workerSrc = require.resolve('pdfjs-dist/build/pdf.worker.js');
-
-// Open PDF file
-async function openPdfFile(filePath) {
- // Prevent multiple simultaneous PDF loads
- if (isPdfViewerActive && pdfFilePath === filePath) {
- console.log('PDF already open:', filePath);
- return;
- }
-
- // Close any existing PDF first
- if (pdfDoc) {
- try {
- await pdfDoc.destroy();
- } catch (e) {
- console.warn('Error destroying previous PDF:', e);
- }
- pdfDoc = null;
- }
-
- try {
- // Show loading state
- document.getElementById('status-text').textContent = 'Loading PDF...';
-
- const loadingTask = pdfjsLib.getDocument(filePath);
- pdfDoc = await loadingTask.promise;
- pdfFilePath = filePath;
- pdfCurrentPage = 1;
- pdfZoomLevel = 1.0;
- pdfRotation = 0;
- isPdfViewerActive = true;
-
- // Update UI
- document.getElementById('pdf-total-pages').textContent = pdfDoc.numPages;
- document.getElementById('pdf-page-input').value = 1;
- document.getElementById('pdf-page-input').max = pdfDoc.numPages;
- document.getElementById('pdf-filename').textContent = require('path').basename(filePath);
- document.getElementById('pdf-zoom-level').textContent = '100%';
-
- // Hide markdown toolbar, tabs, show PDF viewer
- document.querySelector('.toolbar').classList.add('hidden');
- document.getElementById('tab-bar').classList.add('hidden');
- document.querySelectorAll('.tab-content').forEach(tc => tc.classList.add('hidden'));
- document.getElementById('pdf-viewer-container').classList.remove('hidden');
-
- // Render first page
- await renderPdfPage(pdfCurrentPage);
-
- // Update status
- document.getElementById('status-text').textContent = `PDF: ${require('path').basename(filePath)} (${pdfDoc.numPages} pages)`;
- } catch (error) {
- console.error('Error loading PDF:', error);
- isPdfViewerActive = false;
- pdfDoc = null;
- pdfFilePath = null;
- document.getElementById('status-text').textContent = 'Error loading PDF';
- alert('Error loading PDF: ' + error.message);
- }
-}
-
-// Render PDF page
-async function renderPdfPage(pageNum) {
- if (!pdfDoc) return;
-
- try {
- const page = await pdfDoc.getPage(pageNum);
- const canvas = document.getElementById('pdf-canvas');
- const ctx = canvas.getContext('2d');
-
- // Calculate viewport with zoom and rotation
- const viewport = page.getViewport({ scale: pdfZoomLevel, rotation: pdfRotation });
-
- canvas.width = viewport.width;
- canvas.height = viewport.height;
-
- const renderContext = {
- canvasContext: ctx,
- viewport: viewport
- };
-
- await page.render(renderContext).promise;
-
- // Update page input
- document.getElementById('pdf-page-input').value = pageNum;
- } catch (error) {
- console.error('Error rendering PDF page:', error);
- }
-}
-
-// PDF navigation handlers
-document.getElementById('pdf-prev-page')?.addEventListener('click', async () => {
- if (pdfCurrentPage > 1) {
- pdfCurrentPage--;
- await renderPdfPage(pdfCurrentPage);
- }
-});
-
-document.getElementById('pdf-next-page')?.addEventListener('click', async () => {
- if (pdfDoc && pdfCurrentPage < pdfDoc.numPages) {
- pdfCurrentPage++;
- await renderPdfPage(pdfCurrentPage);
- }
-});
-
-document.getElementById('pdf-page-input')?.addEventListener('change', async (e) => {
- const pageNum = parseInt(e.target.value);
- if (pdfDoc && pageNum >= 1 && pageNum <= pdfDoc.numPages) {
- pdfCurrentPage = pageNum;
- await renderPdfPage(pdfCurrentPage);
- }
-});
-
-// PDF zoom handlers
-document.getElementById('pdf-zoom-out')?.addEventListener('click', async () => {
- if (pdfZoomLevel > 0.25) {
- pdfZoomLevel -= 0.25;
- document.getElementById('pdf-zoom-level').textContent = Math.round(pdfZoomLevel * 100) + '%';
- await renderPdfPage(pdfCurrentPage);
- }
-});
-
-document.getElementById('pdf-zoom-in')?.addEventListener('click', async () => {
- if (pdfZoomLevel < 4.0) {
- pdfZoomLevel += 0.25;
- document.getElementById('pdf-zoom-level').textContent = Math.round(pdfZoomLevel * 100) + '%';
- await renderPdfPage(pdfCurrentPage);
- }
-});
-
-document.getElementById('pdf-fit-width')?.addEventListener('click', async () => {
- if (!pdfDoc) return;
- const page = await pdfDoc.getPage(pdfCurrentPage);
- const viewport = page.getViewport({ scale: 1, rotation: pdfRotation });
- const containerWidth = document.getElementById('pdf-viewer').clientWidth - 40;
- pdfZoomLevel = containerWidth / viewport.width;
- document.getElementById('pdf-zoom-level').textContent = Math.round(pdfZoomLevel * 100) + '%';
- await renderPdfPage(pdfCurrentPage);
-});
-
-document.getElementById('pdf-fit-page')?.addEventListener('click', async () => {
- if (!pdfDoc) return;
- const page = await pdfDoc.getPage(pdfCurrentPage);
- const viewport = page.getViewport({ scale: 1, rotation: pdfRotation });
- const container = document.getElementById('pdf-viewer');
- const containerWidth = container.clientWidth - 40;
- const containerHeight = container.clientHeight - 40;
- const scaleX = containerWidth / viewport.width;
- const scaleY = containerHeight / viewport.height;
- pdfZoomLevel = Math.min(scaleX, scaleY);
- document.getElementById('pdf-zoom-level').textContent = Math.round(pdfZoomLevel * 100) + '%';
- await renderPdfPage(pdfCurrentPage);
-});
-
-// PDF rotation handlers
-document.getElementById('pdf-rotate-left')?.addEventListener('click', async () => {
- pdfRotation = (pdfRotation - 90 + 360) % 360;
- await renderPdfPage(pdfCurrentPage);
-});
-
-document.getElementById('pdf-rotate-right')?.addEventListener('click', async () => {
- pdfRotation = (pdfRotation + 90) % 360;
- await renderPdfPage(pdfCurrentPage);
-});
-
-// Close PDF viewer
-document.getElementById('pdf-close')?.addEventListener('click', () => {
- closePdfViewer();
-});
-
-async function closePdfViewer() {
- // Destroy PDF document to free memory
- if (pdfDoc) {
- try {
- await pdfDoc.destroy();
- } catch (e) {
- console.warn('Error destroying PDF:', e);
- }
- }
-
- pdfDoc = null;
- pdfFilePath = null;
- isPdfViewerActive = false;
-
- // Hide PDF viewer
- document.getElementById('pdf-viewer-container').classList.add('hidden');
-
- // Show markdown tabs, tab bar, and toolbar
- document.getElementById('tab-bar').classList.remove('hidden');
- document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('hidden'));
- document.querySelector('.toolbar').classList.remove('hidden');
-
- // Activate the correct markdown tab
- if (tabManager) {
- const activeTab = document.querySelector(`.tab-content[data-tab-id="${tabManager.activeTabId}"]`);
- if (activeTab) activeTab.classList.add('active');
- // Refresh the active tab
- tabManager.updatePreview(tabManager.activeTabId);
- }
-
- document.getElementById('status-text').textContent = 'Ready';
-}
-
-// Handle PDF file open from main process
-ipcRenderer.on('open-pdf-file', (event, filePath) => {
- openPdfFile(filePath);
-});
-
-// ============================================
-// PDF EDITOR TOOLBAR BUTTONS
-// ============================================
-
-// Helper function to trigger PDF editor dialog
-function openPdfEditorDialog(operation) {
- // Use the opened PDF file if available, otherwise prompt
- if (pdfFilePath) {
- ipcRenderer.send('show-pdf-editor-from-toolbar', { operation, filePath: pdfFilePath });
- } else {
- ipcRenderer.send('show-pdf-editor-from-toolbar', { operation, filePath: null });
- }
-}
-
-// PDF Editor toolbar button handlers
-document.getElementById('pdf-tb-merge')?.addEventListener('click', () => {
- openPdfEditorDialog('merge');
-});
-
-document.getElementById('pdf-tb-split')?.addEventListener('click', () => {
- openPdfEditorDialog('split');
-});
-
-document.getElementById('pdf-tb-compress')?.addEventListener('click', () => {
- openPdfEditorDialog('compress');
-});
-
-document.getElementById('pdf-tb-rotate')?.addEventListener('click', () => {
- openPdfEditorDialog('rotate');
-});
-
-document.getElementById('pdf-tb-delete')?.addEventListener('click', () => {
- openPdfEditorDialog('delete');
-});
-
-document.getElementById('pdf-tb-reorder')?.addEventListener('click', () => {
- openPdfEditorDialog('reorder');
-});
-
-document.getElementById('pdf-tb-watermark')?.addEventListener('click', () => {
- openPdfEditorDialog('watermark');
-});
-
-document.getElementById('pdf-tb-encrypt')?.addEventListener('click', () => {
- openPdfEditorDialog('encrypt');
-});
-
-document.getElementById('pdf-tb-decrypt')?.addEventListener('click', () => {
- openPdfEditorDialog('decrypt');
-});
-
-// ============================================
-// DYNAMIC PANE RESIZER
-// ============================================
-
-function initPaneResizer(tabId) {
- const resizer = document.getElementById(`pane-resizer-${tabId}`);
- const editorPane = document.getElementById(`editor-pane-${tabId}`);
- const previewPane = document.getElementById(`preview-pane-${tabId}`);
- const tabContent = document.getElementById(`tab-content-${tabId}`);
-
- if (!resizer || !editorPane || !previewPane) return;
-
- let isResizing = false;
- let startX = 0;
- let startEditorWidth = 0;
-
- resizer.addEventListener('mousedown', (e) => {
- isResizing = true;
- startX = e.clientX;
- startEditorWidth = editorPane.offsetWidth;
- document.body.style.cursor = 'col-resize';
- document.body.style.userSelect = 'none';
- e.preventDefault();
- });
-
- document.addEventListener('mousemove', (e) => {
- if (!isResizing) return;
-
- const containerWidth = tabContent.offsetWidth;
- const deltaX = e.clientX - startX;
- let newEditorWidth = startEditorWidth + deltaX;
-
- // Minimum widths
- const minWidth = 150;
- const maxWidth = containerWidth - minWidth - 6; // 6px for resizer
-
- newEditorWidth = Math.max(minWidth, Math.min(maxWidth, newEditorWidth));
-
- const editorPercent = (newEditorWidth / containerWidth) * 100;
- const previewPercent = 100 - editorPercent - 1; // 1% for resizer
-
- editorPane.style.flex = `0 0 ${editorPercent}%`;
- previewPane.style.flex = `0 0 ${previewPercent}%`;
- });
-
- document.addEventListener('mouseup', () => {
- if (isResizing) {
- isResizing = false;
- document.body.style.cursor = '';
- document.body.style.userSelect = '';
- }
- });
-}
-
-// Initialize resizer for first tab
-document.addEventListener('DOMContentLoaded', () => {
- initPaneResizer(1);
-});
-
-// ============================================
-// IMAGE/AUDIO/VIDEO CONVERTER HANDLERS
-// These require external tools (ImageMagick, FFmpeg)
-// ============================================
-
-ipcRenderer.on('show-image-tool', (event, tool) => {
- alert(`Image ${tool} tool requires ImageMagick to be installed.\n\nPlease install ImageMagick from: https://imagemagick.org/\n\nThis feature will be available in a future update with built-in support.`);
-});
-
-ipcRenderer.on('show-audio-tool', (event, tool) => {
- alert(`Audio ${tool} tool requires FFmpeg to be installed.\n\nPlease install FFmpeg from: https://ffmpeg.org/\n\nThis feature will be available in a future update with built-in support.`);
-});
-
-ipcRenderer.on('show-video-tool', (event, tool) => {
- alert(`Video ${tool} tool requires FFmpeg to be installed.\n\nPlease install FFmpeg from: https://ffmpeg.org/\n\nThis feature will be available in a future update with built-in support.`);
-});
-
+/**
+ * MarkdownConverter Renderer Process
+ * @version 3.0.0
+ */
+
+const { ipcRenderer } = require('electron');
+const marked = require('marked');
+const DOMPurify = require('dompurify');
+const hljs = require('highlight.js');
+
+// Configure marked
+marked.setOptions({
+ highlight: function(code, lang) {
+ if (lang && hljs.getLanguage(lang)) {
+ try {
+ return hljs.highlight(code, { language: lang }).value;
+ } catch (err) {
+ console.warn('Syntax highlighting failed for language:', lang, err.message);
+ }
+ }
+ return hljs.highlightAuto(code).value;
+ },
+ breaks: true,
+ gfm: true
+});
+
+// Tab Management
+class TabManager {
+ constructor() {
+ this.tabs = new Map();
+ this.activeTabId = 1;
+ this.nextTabId = 2;
+ this.isPreviewVisible = true;
+ this.showLineNumbers = false;
+ this.autoSaveInterval = null;
+ this.autoSaveDelay = 30000; // 30 seconds
+ this.recentFiles = JSON.parse(localStorage.getItem('recentFiles') || '[]');
+
+ // Initialize first tab
+ this.tabs.set(1, {
+ id: 1,
+ title: 'Untitled',
+ content: '',
+ filePath: null,
+ isDirty: false,
+ undoStack: [],
+ redoStack: [],
+ findMatches: [],
+ currentMatchIndex: -1
+ });
+
+ this.setupEventListeners();
+ this.updateUI();
+ }
+
+ setupEventListeners() {
+ // Tab bar events
+ document.getElementById('new-tab-btn').addEventListener('click', () => this.createNewTab());
+ document.getElementById('tab-bar').addEventListener('click', (e) => {
+ if (e.target.classList.contains('tab-close')) {
+ e.stopPropagation();
+ const tabId = parseInt(e.target.closest('.tab').dataset.tabId);
+ this.closeTab(tabId);
+ } else if (e.target.closest('.tab')) {
+ const tabId = parseInt(e.target.closest('.tab').dataset.tabId);
+ this.switchToTab(tabId);
+ }
+ });
+
+ // Editor events for active tab
+ this.setupEditorEvents();
+
+ // Toolbar events
+ this.setupToolbarEvents();
+
+ // Find dialog events
+ this.setupFindEvents();
+
+ // Keyboard shortcuts
+ document.addEventListener('keydown', (e) => {
+ if (e.ctrlKey || e.metaKey) {
+ switch (e.key) {
+ case 'n':
+ case 't':
+ e.preventDefault();
+ this.createNewTab();
+ break;
+ case 'w':
+ if (this.tabs.size > 1) {
+ e.preventDefault();
+ this.closeTab(this.activeTabId);
+ }
+ break;
+ case 'Tab':
+ if (this.tabs.size > 1) {
+ e.preventDefault();
+ this.switchToNextTab();
+ }
+ break;
+ }
+ }
+ });
+ }
+
+ createNewTab() {
+ const newTabId = this.nextTabId++;
+ const tab = {
+ id: newTabId,
+ title: 'Untitled',
+ content: '',
+ filePath: null,
+ isDirty: false,
+ undoStack: [],
+ redoStack: [],
+ findMatches: [],
+ currentMatchIndex: -1
+ };
+
+ this.tabs.set(newTabId, tab);
+ this.createTabElements(tab);
+ this.switchToTab(newTabId);
+ this.startAutoSave();
+ this.updateTabBar();
+ }
+
+ createTabElements(tab) {
+ // Create tab content container
+ const tabContent = document.createElement('div');
+ tabContent.className = 'tab-content';
+ tabContent.id = `tab-content-${tab.id}`;
+ tabContent.dataset.tabId = tab.id;
+
+ tabContent.innerHTML = `
+
+
+
+
+
+
+
+
+
+ `;
+
+ document.querySelector('.editor-container').appendChild(tabContent);
+
+ // Directly attach input listener to the new editor
+ const editor = document.getElementById(`editor-${tab.id}`);
+ if (editor) {
+ editor.addEventListener('input', () => {
+ this.handleEditorInput(tab.id);
+ });
+
+ // Add scroll listener for line number sync
+ editor.addEventListener('scroll', () => {
+ if (this.showLineNumbers && this.activeTabId === tab.id) {
+ const lineNumbers = document.getElementById(`line-numbers-${tab.id}`);
+ if (lineNumbers) {
+ lineNumbers.scrollTop = editor.scrollTop;
+ }
+ }
+ });
+ }
+ }
+
+ switchToTab(tabId) {
+ if (!this.tabs.has(tabId)) return;
+
+ // Save current tab state before switching
+ if (this.activeTabId && this.tabs.has(this.activeTabId)) {
+ this.saveCurrentTabState();
+ }
+
+ this.activeTabId = tabId;
+ this.updateUI();
+ this.restoreTabState(tabId);
+ this.focusActiveEditor();
+
+ // Notify main process about current file for exports
+ const tab = this.tabs.get(tabId);
+ if (tab?.filePath) {
+ ipcRenderer.send('set-current-file', tab.filePath);
+ }
+ }
+
+ switchToNextTab() {
+ const tabIds = Array.from(this.tabs.keys());
+ const currentIndex = tabIds.indexOf(this.activeTabId);
+ const nextIndex = (currentIndex + 1) % tabIds.length;
+ this.switchToTab(tabIds[nextIndex]);
+ }
+
+ closeTab(tabId) {
+ if (this.tabs.size === 1) return; // Don't close the last tab
+
+ const tab = this.tabs.get(tabId);
+ if (tab.isDirty) {
+ // Show confirmation dialog for unsaved changes
+ const result = confirm('You have unsaved changes. Do you want to close this tab without saving?');
+ if (!result) return;
+ }
+
+ // Remove tab elements
+ const tabElement = document.querySelector(`[data-tab-id="${tabId}"]`);
+ const tabContent = document.getElementById(`tab-content-${tabId}`);
+
+ if (tabElement?.classList.contains('tab')) {
+ tabElement.remove();
+ }
+ if (tabContent) {
+ tabContent.remove();
+ }
+
+ this.tabs.delete(tabId);
+
+ // Switch to another tab if this was active
+ if (this.activeTabId === tabId) {
+ const remainingTabs = Array.from(this.tabs.keys());
+ this.switchToTab(remainingTabs[0]);
+ }
+
+ this.updateTabBar();
+ }
+
+ updateTabBar() {
+ const tabBar = document.getElementById('tab-bar');
+ const existingTabs = tabBar.querySelectorAll('.tab');
+
+ // Remove all existing tab elements except the new tab button
+ existingTabs.forEach(tab => tab.remove());
+
+ // Add tabs in order
+ const sortedTabs = Array.from(this.tabs.values()).sort((a, b) => a.id - b.id);
+ const newTabBtn = document.getElementById('new-tab-btn');
+
+ sortedTabs.forEach(tab => {
+ const tabElement = document.createElement('div');
+ tabElement.className = `tab ${tab.id === this.activeTabId ? 'active' : ''}`;
+ tabElement.dataset.tabId = tab.id;
+
+ const title = tab.filePath ?
+ tab.filePath.split('/').pop() :
+ tab.title;
+
+ const dirtyIndicator = tab.isDirty ? ' •' : '';
+
+ tabElement.innerHTML = `
+ ${title}${dirtyIndicator}
+
+ `;
+
+ tabBar.insertBefore(tabElement, newTabBtn);
+ });
+ }
+
+ updateUI() {
+ // Show/hide tab contents
+ document.querySelectorAll('.tab-content').forEach(content => {
+ content.classList.remove('active');
+ });
+
+ const activeContent = document.getElementById(`tab-content-${this.activeTabId}`);
+ if (activeContent) {
+ activeContent.classList.add('active');
+ }
+
+ // Update preview visibility
+ this.updatePreviewVisibility();
+ this.updateLineNumbers();
+ this.updateTabBar();
+ }
+
+ saveCurrentTabState() {
+ const tab = this.tabs.get(this.activeTabId);
+ if (!tab) return;
+
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (editor) {
+ tab.content = editor.value;
+ tab.isDirty = tab.content !== (tab.originalContent || '');
+ }
+ }
+
+ restoreTabState(tabId) {
+ const tab = this.tabs.get(tabId);
+ if (!tab) return;
+
+ const editor = document.getElementById(`editor-${tabId}`);
+
+ if (editor) {
+ editor.value = tab.content;
+ this.updatePreview(tabId);
+ this.updateWordCount();
+ }
+ }
+
+ focusActiveEditor() {
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (editor) {
+ editor.focus();
+ }
+ }
+
+ updatePreview(tabId = this.activeTabId) {
+ const tab = this.tabs.get(tabId);
+ const preview = document.getElementById(`preview-${tabId}`);
+
+ if (!tab || !preview) return;
+
+ try {
+ // Check if libraries are available
+ if (!marked || !DOMPurify) {
+ preview.innerHTML = '
+
+
+
+ Error: Required libraries (marked/DOMPurify) not loaded. Check internet connection.
'; + return; + } + const html = marked.parse(tab.content); + const sanitizedHtml = DOMPurify.sanitize(html); + preview.innerHTML = sanitizedHtml; + + // Render math expressions if KaTeX is available + if (window.katex && window.renderMathInElement) { + try { + window.renderMathInElement(preview, { + delimiters: [ + {left: '$$', right: '$$', display: true}, + {left: '$', right: '$', display: false}, + {left: '\\[', right: '\\]', display: true}, + {left: '\\(', right: '\\)', display: false} + ] + }); + } catch (mathError) { + console.warn('Math rendering error:', mathError); + } + } + + // Render Mermaid diagrams if Mermaid is available + if (window.mermaid) { + try { + // Find all code blocks with language-mermaid class + const mermaidBlocks = preview.querySelectorAll('pre code.language-mermaid'); + mermaidBlocks.forEach((block, index) => { + const code = block.textContent; + const pre = block.parentElement; + + // Create a div for mermaid rendering + const mermaidDiv = document.createElement('div'); + mermaidDiv.className = 'mermaid'; + mermaidDiv.setAttribute('data-processed', 'true'); + mermaidDiv.textContent = code; + + // Replace the pre element with the mermaid div + pre.parentElement.replaceChild(mermaidDiv, pre); + }); + + // Initialize Mermaid with dark theme support + const theme = document.body.className.includes('theme-dark') ? 'dark' : 'default'; + mermaid.initialize({ + startOnLoad: false, + theme: theme, + securityLevel: 'loose' + }); + + // Render all mermaid diagrams + mermaid.run({ + querySelector: '.mermaid:not([data-rendered])' + }).then(() => { + // Mark as rendered + preview.querySelectorAll('.mermaid').forEach(el => { + el.setAttribute('data-rendered', 'true'); + }); + }); + } catch (mermaidError) { + console.warn('Mermaid rendering error:', mermaidError); + } + } + } catch (error) { + console.error('Error rendering preview:', error); + preview.innerHTML = 'Error rendering preview. Please check your markdown syntax.
'; + } + } + + updatePreviewVisibility() { + document.querySelectorAll('.tab-content').forEach(content => { + const previewPane = content.querySelector('.pane:last-child'); + const editorPane = content.querySelector('.pane:first-child'); + + if (this.isPreviewVisible) { + previewPane.classList.remove('hidden'); + editorPane.classList.remove('full-width'); + } else { + previewPane.classList.add('hidden'); + editorPane.classList.add('full-width'); + } + }); + } + + updateLineNumbers() { + const editor = document.getElementById(`editor-${this.activeTabId}`); + const lineNumbers = document.getElementById(`line-numbers-${this.activeTabId}`); + + if (!editor || !lineNumbers) return; + + if (this.showLineNumbers) { + const lines = editor.value.split('\n'); + lineNumbers.innerHTML = lines.map((_, i) => + `${i + 1}
`
+ ).join('');
+ lineNumbers.classList.remove('hidden');
+
+ // Sync scroll position
+ lineNumbers.scrollTop = editor.scrollTop;
+ } else {
+ lineNumbers.classList.add('hidden');
+ }
+ }
+
+ updateWordCount() {
+ const tab = this.tabs.get(this.activeTabId);
+ if (!tab) return;
+
+ const content = tab.content;
+ const words = content.trim() ? content.trim().split(/\s+/).filter(word => word.length > 0).length : 0;
+ const chars = content.length;
+ const charsNoSpaces = content.replace(/\s/g, '').length;
+
+ // Enhanced statistics
+ const lines = content.split('\n').length;
+ const paragraphs = content.split(/\n\s*\n/).filter(p => p.trim()).length;
+ const readingTime = Math.ceil(words / 200); // Average reading speed: 200 words/minute
+ const sentences = content.split(/[.!?]+/).filter(s => s.trim()).length;
+
+ // Update the word count display with enhanced stats
+ const basicStats = `Words: ${words} | Characters: ${chars} (${charsNoSpaces} no spaces)`;
+ const enhancedStats = `Lines: ${lines} | Paragraphs: ${paragraphs} | Sentences: ${sentences} | Reading time: ${readingTime} min`;
+
+ document.getElementById('word-count').textContent = basicStats;
+
+ // Add enhanced stats to a separate element
+ let enhancedEl = document.getElementById('enhanced-stats');
+ if (!enhancedEl) {
+ enhancedEl = document.createElement('div');
+ enhancedEl.id = 'enhanced-stats';
+ enhancedEl.className = 'enhanced-stats';
+ document.querySelector('.status-bar').appendChild(enhancedEl);
+ }
+ enhancedEl.textContent = enhancedStats;
+ }
+
+ setupEditorEvents() {
+ // Set up editor events using event delegation on the container
+ const editorContainer = document.querySelector('.editor-container');
+ if (editorContainer) {
+ editorContainer.addEventListener('input', (e) => {
+ if (e.target.classList.contains('editor-textarea')) {
+ const tabId = parseInt(e.target.id.split('-')[1]);
+ this.handleEditorInput(tabId);
+ }
+ });
+
+ editorContainer.addEventListener('scroll', (e) => {
+ if (e.target.classList.contains('editor-textarea')) {
+ this.updateLineNumbers();
+ }
+ }, true);
+ }
+ }
+
+ handleEditorInput(tabId) {
+ const tab = this.tabs.get(tabId);
+ if (!tab) return;
+
+ const editor = document.getElementById(`editor-${tabId}`);
+ if (!editor) return;
+
+ tab.content = editor.value;
+ tab.isDirty = true;
+
+ this.updatePreview(tabId);
+ this.updateWordCount();
+ this.updateLineNumbers();
+ this.updateTabBar();
+
+ // Add to undo stack
+ this.pushUndoState(tabId);
+ }
+
+ pushUndoState(tabId) {
+ const tab = this.tabs.get(tabId);
+ if (!tab) return;
+
+ tab.undoStack.push(tab.content);
+ if (tab.undoStack.length > 50) {
+ tab.undoStack.shift();
+ }
+ tab.redoStack = [];
+ }
+
+ undo() {
+ const tab = this.tabs.get(this.activeTabId);
+ if (!tab || tab.undoStack.length === 0) return;
+
+ tab.redoStack.push(tab.content);
+ tab.content = tab.undoStack.pop();
+
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (editor) {
+ editor.value = tab.content;
+ this.updatePreview();
+ this.updateWordCount();
+ }
+ }
+
+ redo() {
+ const tab = this.tabs.get(this.activeTabId);
+ if (!tab || tab.redoStack.length === 0) return;
+
+ tab.undoStack.push(tab.content);
+ tab.content = tab.redoStack.pop();
+
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (editor) {
+ editor.value = tab.content;
+ this.updatePreview();
+ this.updateWordCount();
+ }
+ }
+
+ // Auto-save functionality
+ startAutoSave() {
+ if (this.autoSaveInterval) {
+ clearInterval(this.autoSaveInterval);
+ }
+
+ this.autoSaveInterval = setInterval(() => {
+ this.performAutoSave();
+ }, this.autoSaveDelay);
+ }
+
+ stopAutoSave() {
+ if (this.autoSaveInterval) {
+ clearInterval(this.autoSaveInterval);
+ this.autoSaveInterval = null;
+ }
+ }
+
+ performAutoSave() {
+ const tab = this.tabs.get(this.activeTabId);
+ if (!tab || !tab.filePath || !tab.content) return;
+
+ // Only auto-save if content has changed since last save
+ if (tab.lastSavedContent !== tab.content) {
+ ipcRenderer.send('save-file', { path: tab.filePath, content: tab.content });
+ tab.lastSavedContent = tab.content;
+
+ // Show brief auto-save indicator
+ this.showAutoSaveIndicator();
+ }
+ }
+
+ showAutoSaveIndicator() {
+ const indicator = document.createElement('div');
+ indicator.textContent = 'Auto-saved';
+ indicator.className = 'auto-save-indicator';
+ document.body.appendChild(indicator);
+
+ setTimeout(() => {
+ indicator.classList.add('fade-out');
+ setTimeout(() => {
+ if (indicator.parentNode) {
+ indicator.parentNode.removeChild(indicator);
+ }
+ }, 300);
+ }, 1500);
+ }
+
+ // Recent files functionality
+ addToRecentFiles(filePath) {
+ if (!filePath) return;
+
+ // Remove if already exists
+ this.recentFiles = this.recentFiles.filter(f => f !== filePath);
+
+ // Add to beginning
+ this.recentFiles.unshift(filePath);
+
+ // Keep only last 10 files
+ this.recentFiles = this.recentFiles.slice(0, 10);
+
+ // Save to localStorage and sync with main process
+ localStorage.setItem('recentFiles', JSON.stringify(this.recentFiles));
+ ipcRenderer.send('save-recent-files', this.recentFiles);
+ }
+
+ getRecentFiles() {
+ return this.recentFiles.filter(file => {
+ // Check if file still exists (basic check by trying to access it)
+ try {
+ return file && file.length > 0;
+ } catch (e) {
+ return false;
+ }
+ });
+ }
+
+ setupToolbarEvents() {
+ // Bold
+ document.getElementById('btn-bold').addEventListener('click', () => {
+ this.wrapSelection('**', '**');
+ });
+
+ // Italic
+ document.getElementById('btn-italic').addEventListener('click', () => {
+ this.wrapSelection('*', '*');
+ });
+
+ // Heading
+ document.getElementById('btn-heading').addEventListener('click', () => {
+ this.insertAtLineStart('## ');
+ });
+
+ // Link
+ document.getElementById('btn-link').addEventListener('click', () => {
+ this.wrapSelection('[', '](url)');
+ });
+
+ // Code
+ document.getElementById('btn-code').addEventListener('click', () => {
+ this.wrapSelection('`', '`');
+ });
+
+ // List
+ document.getElementById('btn-list').addEventListener('click', () => {
+ this.insertAtLineStart('- ');
+ });
+
+ // Quote
+ document.getElementById('btn-quote').addEventListener('click', () => {
+ this.insertAtLineStart('> ');
+ });
+
+ // Table
+ document.getElementById('btn-table').addEventListener('click', () => {
+ this.insertTable();
+ });
+
+ // Strikethrough
+ document.getElementById('btn-strikethrough').addEventListener('click', () => {
+ this.wrapSelection('~~', '~~');
+ });
+
+ // Code Block
+ document.getElementById('btn-code-block').addEventListener('click', () => {
+ this.insertCodeBlock();
+ });
+
+ // Horizontal Rule
+ document.getElementById('btn-horizontal-rule').addEventListener('click', () => {
+ this.insertHorizontalRule();
+ });
+
+ // Preview toggle
+ document.getElementById('btn-preview-toggle').addEventListener('click', () => {
+ this.isPreviewVisible = !this.isPreviewVisible;
+ this.updatePreviewVisibility();
+ });
+
+ // Line numbers
+ document.getElementById('btn-line-numbers').addEventListener('click', () => {
+ this.showLineNumbers = !this.showLineNumbers;
+ this.updateLineNumbers();
+ });
+ }
+
+ // Helper function to wrap selected text
+ wrapSelection(before, after) {
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (!editor) return;
+
+ const start = editor.selectionStart;
+ const end = editor.selectionEnd;
+ const selectedText = editor.value.substring(start, end);
+ const replacement = before + (selectedText || 'text') + after;
+
+ editor.value = editor.value.substring(0, start) + replacement + editor.value.substring(end);
+
+ // Update cursor position
+ const newCursorPos = selectedText ? start + replacement.length : start + before.length;
+ editor.selectionStart = editor.selectionEnd = newCursorPos;
+ editor.focus();
+
+ // Trigger update
+ this.handleEditorInput(this.activeTabId);
+ }
+
+ // Helper function to insert text at the start of current line
+ insertAtLineStart(prefix) {
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (!editor) return;
+
+ const start = editor.selectionStart;
+ const text = editor.value;
+
+ // Find the start of the current line
+ let lineStart = text.lastIndexOf('\n', start - 1) + 1;
+
+ // Insert the prefix
+ editor.value = text.substring(0, lineStart) + prefix + text.substring(lineStart);
+
+ // Update cursor position
+ editor.selectionStart = editor.selectionEnd = start + prefix.length;
+ editor.focus();
+
+ // Trigger update
+ this.handleEditorInput(this.activeTabId);
+ }
+
+ // Insert a markdown table
+ insertTable() {
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (!editor) return;
+
+ const table = '\n| Column 1 | Column 2 | Column 3 |\n' +
+ '|----------|----------|----------|\n' +
+ '| Cell 1 | Cell 2 | Cell 3 |\n' +
+ '| Cell 4 | Cell 5 | Cell 6 |\n';
+
+ const start = editor.selectionStart;
+ editor.value = editor.value.substring(0, start) + table + editor.value.substring(start);
+
+ // Update cursor position
+ editor.selectionStart = editor.selectionEnd = start + table.length;
+ editor.focus();
+
+ // Trigger update
+ this.handleEditorInput(this.activeTabId);
+ }
+
+ // Insert a code block
+ insertCodeBlock() {
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (!editor) return;
+
+ const selectedText = editor.value.substring(editor.selectionStart, editor.selectionEnd);
+ const codeBlock = '\n```\n' + (selectedText || 'code here') + '\n```\n';
+
+ const start = editor.selectionStart;
+ editor.value = editor.value.substring(0, start) + codeBlock + editor.value.substring(editor.selectionEnd);
+
+ // Update cursor position
+ editor.selectionStart = editor.selectionEnd = start + codeBlock.length;
+ editor.focus();
+
+ // Trigger update
+ this.handleEditorInput(this.activeTabId);
+ }
+
+ // Insert a horizontal rule
+ insertHorizontalRule() {
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (!editor) return;
+
+ const hr = '\n\n---\n\n';
+ const start = editor.selectionStart;
+
+ editor.value = editor.value.substring(0, start) + hr + editor.value.substring(start);
+
+ // Update cursor position
+ editor.selectionStart = editor.selectionEnd = start + hr.length;
+ editor.focus();
+
+ // Trigger update
+ this.handleEditorInput(this.activeTabId);
+ }
+
+ setupFindEvents() {
+ const btnFind = document.getElementById('btn-find');
+ const btnFindClose = document.getElementById('btn-find-close');
+ const findInput = document.getElementById('find-input');
+ const btnFindNext = document.getElementById('btn-find-next');
+ const btnFindPrev = document.getElementById('btn-find-prev');
+ const btnReplace = document.getElementById('btn-replace');
+ const btnReplaceAll = document.getElementById('btn-replace-all');
+
+ if (!btnFind || !btnFindClose || !findInput || !btnFindNext || !btnFindPrev || !btnReplace || !btnReplaceAll) {
+ console.error('Find dialog elements not found');
+ return;
+ }
+
+ // Show find dialog
+ btnFind.addEventListener('click', () => {
+ document.getElementById('find-dialog').classList.remove('hidden');
+ findInput.focus();
+ });
+
+ // Close find dialog
+ btnFindClose.addEventListener('click', () => {
+ document.getElementById('find-dialog').classList.add('hidden');
+ this.clearFindHighlights();
+ });
+
+ // Find input change - update matches
+ findInput.addEventListener('input', () => {
+ this.performFind();
+ });
+
+ // Find next
+ btnFindNext.addEventListener('click', () => {
+ this.findNext();
+ });
+
+ // Find previous
+ btnFindPrev.addEventListener('click', () => {
+ this.findPrevious();
+ });
+
+ // Replace
+ btnReplace.addEventListener('click', () => {
+ this.replaceOne();
+ });
+
+ // Replace all
+ btnReplaceAll.addEventListener('click', () => {
+ this.replaceAll();
+ });
+
+ // Enter key in find input - find next
+ findInput.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ if (e.shiftKey) {
+ this.findPrevious();
+ } else {
+ this.findNext();
+ }
+ }
+ });
+
+ }
+
+ performFind() {
+ const findText = document.getElementById('find-input').value;
+ const tab = this.tabs.get(this.activeTabId);
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+
+ if (!findText || !tab || !editor) {
+ this.clearFindHighlights();
+ const findCount = document.getElementById('find-count');
+ if (findCount) {
+ findCount.textContent = '0 matches';
+ }
+ return;
+ }
+
+ const content = editor.value;
+ const matches = [];
+ let index = 0;
+
+ // Find all matches
+ while ((index = content.indexOf(findText, index)) !== -1) {
+ matches.push(index);
+ index += findText.length;
+ }
+
+ tab.findMatches = matches;
+ tab.currentMatchIndex = matches.length > 0 ? 0 : -1;
+
+ // Update match count
+ const findCount = document.getElementById('find-count');
+ if (findCount) {
+ findCount.textContent = `${matches.length} match${matches.length !== 1 ? 'es' : ''}`;
+ }
+
+ // Highlight first match
+ if (matches.length > 0) {
+ this.highlightMatch(0);
+ }
+ }
+
+ findNext() {
+ const tab = this.tabs.get(this.activeTabId);
+ if (!tab || tab.findMatches.length === 0) return;
+
+ tab.currentMatchIndex = (tab.currentMatchIndex + 1) % tab.findMatches.length;
+ this.highlightMatch(tab.currentMatchIndex);
+ }
+
+ findPrevious() {
+ const tab = this.tabs.get(this.activeTabId);
+ if (!tab || tab.findMatches.length === 0) return;
+
+ tab.currentMatchIndex = tab.currentMatchIndex - 1;
+ if (tab.currentMatchIndex < 0) {
+ tab.currentMatchIndex = tab.findMatches.length - 1;
+ }
+ this.highlightMatch(tab.currentMatchIndex);
+ }
+
+ highlightMatch(matchIndex) {
+ const tab = this.tabs.get(this.activeTabId);
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ const findText = document.getElementById('find-input').value;
+
+ if (!tab || !editor || matchIndex < 0 || matchIndex >= tab.findMatches.length) return;
+
+ const position = tab.findMatches[matchIndex];
+
+ // Select the match WITHOUT focusing (to keep focus on find input)
+ editor.setSelectionRange(position, position + findText.length);
+
+ // Make the selection visible by briefly focusing and then restoring focus
+ const findInput = document.getElementById('find-input');
+ const hadFocus = document.activeElement === findInput;
+
+ // Temporarily focus editor to make selection visible
+ editor.focus();
+
+ // Restore focus to find input if it had focus
+ if (hadFocus) {
+ setTimeout(() => {
+ findInput.focus();
+ // Restore cursor position in find input
+ findInput.setSelectionRange(findInput.value.length, findInput.value.length);
+ }, 10);
+ }
+
+ // Scroll into view
+ const lineHeight = 20; // Approximate line height
+ const charPosition = position;
+ const numLines = editor.value.substring(0, charPosition).split('\n').length;
+ const scrollPosition = (numLines - 5) * lineHeight; // Show match 5 lines from top
+
+ editor.scrollTop = Math.max(0, scrollPosition);
+
+ // Update match counter
+ const findCount = document.getElementById('find-count');
+ if (findCount) {
+ findCount.textContent = `Match ${matchIndex + 1} of ${tab.findMatches.length}`;
+ }
+ }
+
+ replaceOne() {
+ const tab = this.tabs.get(this.activeTabId);
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ const findText = document.getElementById('find-input').value;
+ const replaceText = document.getElementById('replace-input').value;
+
+ if (!tab || !editor || tab.findMatches.length === 0 || tab.currentMatchIndex < 0) return;
+
+ const position = tab.findMatches[tab.currentMatchIndex];
+ const before = editor.value.substring(0, position);
+ const after = editor.value.substring(position + findText.length);
+
+ editor.value = before + replaceText + after;
+ tab.content = editor.value;
+ tab.isDirty = true;
+
+ this.updatePreview(this.activeTabId);
+ this.updateWordCount();
+ this.updateTabBar();
+
+ // Re-perform find to update matches
+ this.performFind();
+ }
+
+ replaceAll() {
+ const tab = this.tabs.get(this.activeTabId);
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ const findText = document.getElementById('find-input').value;
+ const replaceText = document.getElementById('replace-input').value;
+
+ if (!tab || !editor || !findText) return;
+
+ // Simple replace all
+ const newContent = editor.value.split(findText).join(replaceText);
+ const replacedCount = tab.findMatches.length;
+
+ editor.value = newContent;
+ tab.content = newContent;
+ tab.isDirty = true;
+
+ this.updatePreview(this.activeTabId);
+ this.updateWordCount();
+ this.updateTabBar();
+
+ // Update match count
+ document.getElementById('find-count').textContent = `Replaced ${replacedCount} match${replacedCount !== 1 ? 'es' : ''}`;
+
+ // Re-perform find
+ this.performFind();
+ }
+
+ clearFindHighlights() {
+ const tab = this.tabs.get(this.activeTabId);
+ if (tab) {
+ tab.findMatches = [];
+ tab.currentMatchIndex = -1;
+ }
+ }
+
+ // File operations
+ openFile(filePath, content) {
+ console.log('openFile called with:', filePath, 'content length:', content.length);
+ let tab = this.tabs.get(this.activeTabId);
+
+ // Handle both forward and back slashes for cross-platform compatibility
+ const fileName = filePath.split(/[\\/]/).pop();
+
+ // If current tab is empty and untitled, reuse it
+ if (!tab.filePath && !tab.isDirty && tab.content === '') {
+ console.log('Reusing current tab');
+ tab.filePath = filePath;
+ tab.title = fileName;
+ tab.content = content;
+ tab.originalContent = content;
+ tab.isDirty = false;
+
+ // Update the editor and preview
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (editor) {
+ editor.value = content;
+ // Update preview after editor is updated
+ this.updatePreview(this.activeTabId);
+ this.updateWordCount();
+ }
+ } else {
+ // Create new tab for the file
+ console.log('Creating new tab for file');
+ this.createNewTab();
+ tab = this.tabs.get(this.activeTabId);
+ tab.filePath = filePath;
+ tab.title = fileName;
+ tab.content = content;
+ tab.originalContent = content;
+ tab.isDirty = false;
+
+ // Wait a moment for the DOM to update, then set content
+ setTimeout(() => {
+ const editor = document.getElementById(`editor-${this.activeTabId}`);
+ if (editor) {
+ editor.value = content;
+ this.updatePreview(this.activeTabId);
+ this.updateWordCount();
+ }
+ }, 50);
+ }
+ this.startAutoSave();
+ this.addToRecentFiles(filePath);
+ this.updateTabBar();
+
+ // Notify main process about current file for exports
+ ipcRenderer.send('set-current-file', filePath);
+
+ console.log('File opened successfully');
+ }
+
+ getCurrentContent() {
+ const tab = this.tabs.get(this.activeTabId);
+ return tab ? tab.content : '';
+ }
+
+ getCurrentFilePath() {
+ const tab = this.tabs.get(this.activeTabId);
+ return tab ? tab.filePath : null;
+ }
+}
+
+// Initialize tab manager
+let tabManager;
+
+document.addEventListener('DOMContentLoaded', () => {
+ tabManager = new TabManager();
+
+ // Attach input listener to the initial editor (tab 1)
+ const initialEditor = document.getElementById('editor-1');
+ if (initialEditor) {
+ initialEditor.addEventListener('input', () => {
+ tabManager.handleEditorInput(1);
+ });
+
+ // Add scroll listener for line number sync
+ initialEditor.addEventListener('scroll', () => {
+ if (tabManager.showLineNumbers && tabManager.activeTabId === 1) {
+ const lineNumbers = document.getElementById('line-numbers-1');
+ if (lineNumbers) {
+ lineNumbers.scrollTop = initialEditor.scrollTop;
+ }
+ }
+ });
+ }
+
+ // Request current theme
+ ipcRenderer.send('get-theme');
+
+ // Also send renderer-ready immediately as backup
+ // This ensures we don't get stuck waiting for theme-changed
+ setTimeout(() => {
+ console.log('Backup renderer-ready timeout triggered');
+ ipcRenderer.send('renderer-ready');
+ }, 100);
+
+ // Set up auto-save interval
+ setInterval(() => {
+ // Auto-save logic for all tabs
+ tabManager.tabs.forEach(tab => {
+ if (tab.isDirty && tab.filePath) {
+ ipcRenderer.send('save-current-file', tab.content);
+ }
+ });
+ }, 30000);
+});
+
+// IPC event listeners
+ipcRenderer.on('file-new', () => {
+ tabManager.createNewTab();
+});
+
+ipcRenderer.on('file-opened', (event, data) => {
+ console.log('[RENDERER] file-opened received:', data.path, 'content length:', data.content.length);
+ if (tabManager) {
+ tabManager.openFile(data.path, data.content);
+ } else {
+ console.error('[RENDERER] tabManager not initialized!');
+ }
+});
+
+ipcRenderer.on('file-save', () => {
+ const currentContent = tabManager.getCurrentContent();
+ const currentFilePath = tabManager.getCurrentFilePath();
+ if (currentFilePath) {
+ ipcRenderer.send('save-current-file', currentContent);
+ }
+});
+
+ipcRenderer.on('get-content-for-save', (event, filePath) => {
+ const currentContent = tabManager.getCurrentContent();
+ ipcRenderer.send('save-file', { path: filePath, content: currentContent });
+});
+
+ipcRenderer.on('get-content-for-spreadsheet', (event, format) => {
+ const currentContent = tabManager.getCurrentContent();
+ ipcRenderer.send('export-spreadsheet', { content: currentContent, format });
+});
+
+ipcRenderer.on('toggle-preview', () => {
+ tabManager.isPreviewVisible = !tabManager.isPreviewVisible;
+ tabManager.updatePreviewVisibility();
+});
+
+ipcRenderer.on('toggle-find', () => {
+ const findDialog = document.getElementById('find-dialog');
+ if (findDialog.classList.contains('hidden')) {
+ findDialog.classList.remove('hidden');
+ document.getElementById('find-input').focus();
+ } else {
+ findDialog.classList.add('hidden');
+ }
+});
+
+ipcRenderer.on('theme-changed', (event, theme) => {
+ console.log('[RENDERER] Theme changed to:', theme);
+ document.body.className = `theme-${theme}`;
+
+ // After theme is applied, wait for next frame then signal renderer is ready
+ // This ensures complete UI initialization before files are opened
+ requestAnimationFrame(() => {
+ console.log('[RENDERER] Sending renderer-ready from theme-changed');
+ ipcRenderer.send('renderer-ready');
+ });
+});
+
+// Undo/Redo handlers
+ipcRenderer.on('undo', () => {
+ if (tabManager) {
+ tabManager.undo();
+ }
+});
+
+ipcRenderer.on('redo', () => {
+ if (tabManager) {
+ tabManager.redo();
+ }
+});
+
+// Font size adjustment
+let currentFontSize = parseInt(localStorage.getItem('fontSize')) || 15;
+
+function updateFontSizes(size) {
+ const editors = document.querySelectorAll('#editor, .editor-textarea');
+ const previews = document.querySelectorAll('#preview, .preview-content');
+
+ editors.forEach(editor => {
+ editor.style.fontSize = `${size}px`;
+ });
+
+ previews.forEach(preview => {
+ preview.style.fontSize = `${size}px`;
+ });
+
+ localStorage.setItem('fontSize', size);
+}
+
+// Apply saved font size on load
+updateFontSizes(currentFontSize);
+
+ipcRenderer.on('adjust-font-size', (event, action) => {
+ if (action === 'increase' && currentFontSize < 24) {
+ currentFontSize++;
+ } else if (action === 'decrease' && currentFontSize > 10) {
+ currentFontSize--;
+ } else if (action === 'reset') {
+ currentFontSize = 15;
+ }
+ updateFontSizes(currentFontSize);
+});
+
+// Print preview request handlers - handle printing directly
+ipcRenderer.on('print-preview', () => {
+ console.log('[RENDERER] print-preview received');
+ handlePrintPreview(false);
+});
+
+ipcRenderer.on('print-preview-styled', () => {
+ console.log('[RENDERER] print-preview-styled received');
+ handlePrintPreview(true);
+});
+
+function handlePrintPreview(withStyles) {
+ const activeTabId = tabManager ? tabManager.activeTabId : 1;
+ const previewContent = document.getElementById(`preview-${activeTabId}`);
+
+ if (!previewContent || !previewContent.innerHTML.trim()) {
+ alert('Nothing to print. Please create or open a document and ensure the preview is visible.');
+ return;
+ }
+
+ console.log('[RENDERER] Starting print with withStyles:', withStyles);
+ console.log('[RENDERER] Preview content length:', previewContent.innerHTML.length);
+
+ // Add body classes for print mode - let CSS handle everything
+ document.body.classList.add('printing');
+ if (!withStyles) {
+ document.body.classList.add('printing-no-styles');
+ }
+
+ // Wait for CSS to apply then print
+ setTimeout(() => {
+ console.log('[RENDERER] Sending do-print to main process');
+ ipcRenderer.send('do-print', { withStyles });
+
+ // Restore classes after print dialog opens
+ setTimeout(() => {
+ document.body.classList.remove('printing', 'printing-no-styles');
+ console.log('[RENDERER] Print classes removed');
+ }, 1000);
+ }, 100);
+}
+
+// Export Dialog functionality
+let currentExportFormat = null;
+
+ipcRenderer.on('show-export-dialog', (event, format) => {
+ currentExportFormat = format;
+ showExportDialog(format);
+});
+
+function showExportDialog(format) {
+ console.log('showExportDialog called with format:', format);
+ const dialog = document.getElementById('export-dialog');
+ const title = document.getElementById('export-dialog-title');
+
+ if (!dialog) {
+ console.error('Export dialog element not found!');
+ return;
+ }
+
+ console.log('Dialog found, showing export options for:', format);
+ title.textContent = `Export as ${format.toUpperCase()}`;
+ dialog.setAttribute('data-format', format);
+ dialog.classList.remove('hidden');
+
+ // Initialize form values
+ initializeExportForm(format);
+ console.log('Export dialog should now be visible');
+}
+
+function hideExportDialog() {
+ const dialog = document.getElementById('export-dialog');
+ dialog.classList.add('hidden');
+ currentExportFormat = null;
+}
+
+function initializeExportForm(format) {
+ // Reset advanced export toggle to unchecked
+ const advancedToggle = document.getElementById('advanced-export-toggle');
+ const advancedOptions = document.getElementById('advanced-export-options');
+
+ advancedToggle.checked = false;
+ advancedOptions.classList.add('hidden');
+
+ // Reset form to defaults
+ document.getElementById('export-template').value = 'default';
+ document.getElementById('custom-template-path').style.display = 'none';
+
+ // Clear metadata fields
+ const metadataFields = document.querySelectorAll('.metadata-field');
+ metadataFields.forEach((field, index) => {
+ if (index < 4) { // Keep first 4 default fields
+ field.querySelector('.metadata-key').value = ['title', 'author', 'date', 'subject'][index] || '';
+ field.querySelector('.metadata-value').value = '';
+ } else {
+ field.remove(); // Remove additional fields
+ }
+ });
+
+ // Reset checkboxes and other fields
+ document.getElementById('export-toc').checked = false;
+ document.getElementById('export-number-sections').checked = false;
+ document.getElementById('export-citeproc').checked = false;
+ document.getElementById('export-toc-depth').value = 3;
+
+ // PDF-specific fields
+ if (format === 'pdf') {
+ document.getElementById('pdf-engine').value = 'xelatex';
+ document.getElementById('pdf-geometry').value = 'margin=1in';
+ document.getElementById('custom-geometry').style.display = 'none';
+ }
+
+ // Clear bibliography fields
+ document.getElementById('bibliography-file').value = '';
+ document.getElementById('csl-file').value = '';
+
+ // Request current page settings from main process and apply them
+ ipcRenderer.send('get-page-settings');
+}
+
+function collectExportOptions() {
+ const advancedMode = document.getElementById('advanced-export-toggle').checked;
+ const options = {};
+
+ if (advancedMode) {
+ // Collect advanced options
+ options.template = document.getElementById('export-template').value;
+ options.metadata = {};
+ options.variables = {};
+ options.toc = document.getElementById('export-toc').checked;
+ options.tocDepth = document.getElementById('export-toc-depth').value;
+ options.numberSections = document.getElementById('export-number-sections').checked;
+ options.citeproc = document.getElementById('export-citeproc').checked;
+ } else {
+ // Collect basic options only
+ options.template = 'default';
+ options.metadata = {};
+ options.variables = {};
+ options.toc = document.getElementById('basic-toc').checked;
+ options.tocDepth = 3;
+ options.numberSections = document.getElementById('basic-number-sections').checked;
+ options.citeproc = false;
+ }
+
+ if (advancedMode) {
+ // Collect custom template path
+ if (options.template === 'custom') {
+ options.template = document.getElementById('custom-template-path').value.trim();
+ }
+
+ // Collect metadata
+ const metadataFields = document.querySelectorAll('.metadata-field');
+ metadataFields.forEach(field => {
+ const key = field.querySelector('.metadata-key').value.trim();
+ const value = field.querySelector('.metadata-value').value.trim();
+ if (key && value) {
+ options.metadata[key] = value;
+ }
+ });
+
+ // PDF-specific options
+ if (currentExportFormat === 'pdf') {
+ options.pdfEngine = document.getElementById('pdf-engine').value;
+ const geometrySelect = document.getElementById('pdf-geometry');
+ if (geometrySelect.value === 'custom') {
+ options.geometry = document.getElementById('custom-geometry').value.trim() || 'margin=1in';
+ } else {
+ options.geometry = geometrySelect.value;
+ }
+ }
+
+ // Bibliography
+ const bibFile = document.getElementById('bibliography-file').value.trim();
+ const cslFile = document.getElementById('csl-file').value.trim();
+ if (bibFile) options.bibliography = bibFile;
+ if (cslFile) options.csl = cslFile;
+ } else {
+ // Basic mode - set default PDF options if needed
+ if (currentExportFormat === 'pdf') {
+ options.pdfEngine = 'xelatex';
+ options.geometry = 'margin=1in';
+ }
+ }
+
+ // Collect page size and orientation (always collected, from basic options)
+ const pageSize = document.getElementById('page-size').value;
+ const pageOrientation = document.getElementById('page-orientation').value;
+ const customWidth = document.getElementById('custom-width').value.trim();
+ const customHeight = document.getElementById('custom-height').value.trim();
+
+ // Send page settings to main process
+ ipcRenderer.send('update-page-settings', {
+ size: pageSize,
+ orientation: pageOrientation,
+ customWidth: customWidth || null,
+ customHeight: customHeight || null
+ });
+
+ return options;
+}
+
+// Export Profiles Management
+let exportProfiles = {};
+
+function loadExportProfiles() {
+ const saved = localStorage.getItem('exportProfiles');
+ if (saved) {
+ try {
+ exportProfiles = JSON.parse(saved);
+ populateProfileDropdown();
+ } catch (e) {
+ console.error('Failed to load export profiles:', e);
+ exportProfiles = {};
+ }
+ }
+}
+
+function saveExportProfiles() {
+ localStorage.setItem('exportProfiles', JSON.stringify(exportProfiles));
+}
+
+function populateProfileDropdown() {
+ const select = document.getElementById('export-profile-select');
+ if (!select) return;
+
+ // Clear existing options except the first one
+ while (select.options.length > 1) {
+ select.remove(1);
+ }
+
+ // Add saved profiles
+ Object.keys(exportProfiles).forEach(name => {
+ const option = document.createElement('option');
+ option.value = name;
+ option.textContent = name;
+ select.appendChild(option);
+ });
+}
+
+function saveCurrentProfile() {
+ const name = prompt('Enter a name for this export profile:', 'My Profile');
+ if (!name || name.trim() === '') return;
+
+ const profileName = name.trim();
+
+ // Collect current settings
+ const profile = {
+ format: currentExportFormat,
+ advancedMode: document.getElementById('advanced-export-toggle').checked,
+ pageSize: document.getElementById('page-size').value,
+ pageOrientation: document.getElementById('page-orientation').value,
+ basicToc: document.getElementById('basic-toc').checked,
+ basicNumberSections: document.getElementById('basic-number-sections').checked
+ };
+
+ // Add advanced options if enabled
+ if (profile.advancedMode) {
+ profile.template = document.getElementById('export-template').value;
+ profile.toc = document.getElementById('export-toc').checked;
+ profile.tocDepth = document.getElementById('export-toc-depth').value;
+ profile.numberSections = document.getElementById('export-number-sections').checked;
+ profile.citeproc = document.getElementById('export-citeproc').checked;
+
+ if (currentExportFormat === 'pdf') {
+ profile.pdfEngine = document.getElementById('pdf-engine').value;
+ profile.pdfGeometry = document.getElementById('pdf-geometry').value;
+ }
+ }
+
+ exportProfiles[profileName] = profile;
+ saveExportProfiles();
+ populateProfileDropdown();
+
+ // Select the newly created profile
+ document.getElementById('export-profile-select').value = profileName;
+
+ alert(`Profile "${profileName}" saved successfully!`);
+}
+
+function loadProfile(profileName) {
+ if (!profileName || !exportProfiles[profileName]) return;
+
+ const profile = exportProfiles[profileName];
+
+ // Apply settings
+ if (profile.advancedMode !== undefined) {
+ document.getElementById('advanced-export-toggle').checked = profile.advancedMode;
+ const advancedOptions = document.getElementById('advanced-export-options');
+ if (profile.advancedMode) {
+ advancedOptions.classList.remove('hidden');
+ } else {
+ advancedOptions.classList.add('hidden');
+ }
+ }
+
+ if (profile.pageSize) document.getElementById('page-size').value = profile.pageSize;
+ if (profile.pageOrientation) document.getElementById('page-orientation').value = profile.pageOrientation;
+ if (profile.basicToc !== undefined) document.getElementById('basic-toc').checked = profile.basicToc;
+ if (profile.basicNumberSections !== undefined) document.getElementById('basic-number-sections').checked = profile.basicNumberSections;
+
+ // Advanced options
+ if (profile.advancedMode && profile.template) document.getElementById('export-template').value = profile.template;
+ if (profile.toc !== undefined) document.getElementById('export-toc').checked = profile.toc;
+ if (profile.tocDepth) document.getElementById('export-toc-depth').value = profile.tocDepth;
+ if (profile.numberSections !== undefined) document.getElementById('export-number-sections').checked = profile.numberSections;
+ if (profile.citeproc !== undefined) document.getElementById('export-citeproc').checked = profile.citeproc;
+
+ if (profile.pdfEngine) document.getElementById('pdf-engine').value = profile.pdfEngine;
+ if (profile.pdfGeometry) document.getElementById('pdf-geometry').value = profile.pdfGeometry;
+}
+
+function deleteSelectedProfile() {
+ const select = document.getElementById('export-profile-select');
+ const profileName = select.value;
+
+ if (!profileName) {
+ alert('Please select a profile to delete.');
+ return;
+ }
+
+ if (confirm(`Are you sure you want to delete the profile "${profileName}"?`)) {
+ delete exportProfiles[profileName];
+ saveExportProfiles();
+ populateProfileDropdown();
+ select.value = '';
+ alert(`Profile "${profileName}" deleted successfully!`);
+ }
+}
+
+// Event listeners for export dialog
+document.addEventListener('DOMContentLoaded', () => {
+ // Load export profiles on startup
+ loadExportProfiles();
+ // Template selection
+ document.getElementById('export-template').addEventListener('change', (e) => {
+ const customPath = document.getElementById('custom-template-path');
+ const fileInput = document.getElementById('template-file-input');
+
+ if (e.target.value === 'custom') {
+ customPath.style.display = 'block';
+ fileInput.style.display = 'block';
+ } else {
+ customPath.style.display = 'none';
+ fileInput.style.display = 'none';
+ customPath.value = '';
+ }
+ });
+
+ // Advanced export toggle
+ document.getElementById('advanced-export-toggle').addEventListener('change', (e) => {
+ const advancedOptions = document.getElementById('advanced-export-options');
+ if (e.target.checked) {
+ advancedOptions.classList.remove('hidden');
+ // Scroll the advanced options into view after they become visible
+ setTimeout(() => {
+ advancedOptions.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+ }, 100);
+ } else {
+ advancedOptions.classList.add('hidden');
+ }
+ });
+
+ // Template file input
+ document.getElementById('template-file-input').addEventListener('change', (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ document.getElementById('custom-template-path').value = file.path;
+ }
+ });
+
+ // PDF geometry selection
+ document.getElementById('pdf-geometry').addEventListener('change', (e) => {
+ const customGeometry = document.getElementById('custom-geometry');
+ if (e.target.value === 'custom') {
+ customGeometry.style.display = 'block';
+ } else {
+ customGeometry.style.display = 'none';
+ }
+ });
+
+ // Page size selection - show/hide custom size inputs
+ document.getElementById('page-size').addEventListener('change', (e) => {
+ const customPageSize = document.getElementById('custom-page-size');
+ if (e.target.value === 'custom') {
+ customPageSize.style.display = 'block';
+ } else {
+ customPageSize.style.display = 'none';
+ }
+ });
+
+ // Load saved page settings on startup
+ ipcRenderer.send('get-page-settings');
+
+ // Handle page settings data (can be called multiple times)
+ ipcRenderer.on('page-settings-data', (event, settings) => {
+ console.log('Received page settings:', settings);
+ if (settings) {
+ const pageSizeEl = document.getElementById('page-size');
+ const pageOrientationEl = document.getElementById('page-orientation');
+ const customPageSizeEl = document.getElementById('custom-page-size');
+ const customWidthEl = document.getElementById('custom-width');
+ const customHeightEl = document.getElementById('custom-height');
+
+ if (pageSizeEl) pageSizeEl.value = settings.size || 'a4';
+ if (pageOrientationEl) pageOrientationEl.value = settings.orientation || 'portrait';
+
+ if (customWidthEl && settings.customWidth) {
+ customWidthEl.value = settings.customWidth;
+ }
+ if (customHeightEl && settings.customHeight) {
+ customHeightEl.value = settings.customHeight;
+ }
+
+ // Show custom inputs if size is custom
+ if (customPageSizeEl) {
+ if (settings.size === 'custom') {
+ customPageSizeEl.style.display = 'block';
+ } else {
+ customPageSizeEl.style.display = 'none';
+ }
+ }
+ }
+ });
+
+ // Export Profile buttons
+ document.getElementById('save-profile-btn').addEventListener('click', saveCurrentProfile);
+ document.getElementById('delete-profile-btn').addEventListener('click', deleteSelectedProfile);
+ document.getElementById('export-profile-select').addEventListener('change', (e) => {
+ loadProfile(e.target.value);
+ });
+
+ // Add metadata field
+ document.getElementById('add-metadata-field').addEventListener('click', () => {
+ const container = document.querySelector('.metadata-container');
+ const newField = document.createElement('div');
+ newField.className = 'metadata-field';
+ newField.innerHTML = `
+
+
+ `;
+ container.appendChild(newField);
+ });
+
+ // Browse bibliography
+ document.getElementById('browse-bibliography').addEventListener('click', () => {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = '.bib,.yaml,.yml,.json';
+ input.onchange = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ document.getElementById('bibliography-file').value = file.path;
+ }
+ };
+ input.click();
+ });
+
+ // Browse CSL
+ document.getElementById('browse-csl').addEventListener('click', () => {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = '.csl';
+ input.onchange = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ document.getElementById('csl-file').value = file.path;
+ }
+ };
+ input.click();
+ });
+
+ // Dialog close buttons
+ document.getElementById('export-dialog-close').addEventListener('click', hideExportDialog);
+ document.getElementById('export-cancel').addEventListener('click', hideExportDialog);
+
+ // Export confirm
+ document.getElementById('export-confirm').addEventListener('click', () => {
+ const options = collectExportOptions();
+ ipcRenderer.send('export-with-options', {
+ format: currentExportFormat,
+ options: options
+ });
+ hideExportDialog();
+ });
+
+ // Close on backdrop click
+ document.getElementById('export-dialog').addEventListener('click', (e) => {
+ if (e.target === document.getElementById('export-dialog')) {
+ hideExportDialog();
+ }
+ });
+
+ // Close on Escape key
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && !document.getElementById('export-dialog').classList.contains('hidden')) {
+ hideExportDialog();
+ }
+ });
+});
+
+// Batch Conversion Dialog functionality
+let currentBatchOptions = {};
+
+ipcRenderer.on('show-batch-dialog', () => {
+ showBatchDialog();
+});
+
+// Universal Converter dialog handlers
+ipcRenderer.on('show-universal-converter-dialog', () => {
+ showUniversalConverterDialog();
+});
+
+ipcRenderer.on('conversion-status', (event, status) => {
+ document.getElementById('converter-status').textContent = status;
+});
+
+ipcRenderer.on('conversion-complete', (event, result) => {
+ document.getElementById('converter-progress').classList.add('hidden');
+ if (result.success) {
+ document.getElementById('universal-converter-dialog').classList.add('hidden');
+ }
+});
+
+ipcRenderer.on('batch-progress', (event, progress) => {
+ updateBatchProgress(progress);
+});
+
+ipcRenderer.on('folder-selected', (event, { type, path }) => {
+ if (type === 'input') {
+ document.getElementById('batch-input-folder').value = path;
+ validateBatchForm();
+ } else if (type === 'output') {
+ document.getElementById('batch-output-folder').value = path;
+ validateBatchForm();
+ } else if (type === 'converter-batch-input') {
+ document.getElementById('converter-batch-input-folder').value = path;
+ } else if (type === 'converter-batch-output') {
+ document.getElementById('converter-batch-output-folder').value = path;
+ }
+});
+
+function showBatchDialog() {
+ const dialog = document.getElementById('batch-dialog');
+ dialog.classList.remove('hidden');
+
+ // Reset form
+ document.getElementById('batch-input-folder').value = '';
+ document.getElementById('batch-output-folder').value = '';
+ document.getElementById('batch-format').value = 'html';
+ document.getElementById('batch-include-subfolders').checked = true;
+ document.getElementById('batch-progress').classList.add('hidden');
+ document.getElementById('batch-start').disabled = true;
+
+ currentBatchOptions = {
+ template: 'default',
+ metadata: {},
+ variables: {},
+ toc: false,
+ tocDepth: 3,
+ numberSections: false,
+ citeproc: false
+ };
+}
+
+function hideBatchDialog() {
+ const dialog = document.getElementById('batch-dialog');
+ dialog.classList.add('hidden');
+}
+
+function updateBatchProgress(progress) {
+ const progressSection = document.getElementById('batch-progress');
+ const progressFill = document.getElementById('batch-progress-fill');
+ const progressText = document.getElementById('batch-progress-text');
+ const progressCount = document.getElementById('batch-progress-count');
+
+ progressSection.classList.remove('hidden');
+
+ const percentage = Math.round((progress.completed / progress.total) * 100);
+ progressFill.style.width = `${percentage}%`;
+
+ if (progress.completed === progress.total) {
+ progressText.textContent = 'Conversion complete!';
+ } else {
+ progressText.textContent = `Processing: ${progress.currentFile}`;
+ }
+
+ progressCount.textContent = `${progress.completed} / ${progress.total}`;
+}
+
+function validateBatchForm() {
+ const inputFolder = document.getElementById('batch-input-folder').value.trim();
+ const outputFolder = document.getElementById('batch-output-folder').value.trim();
+ const startButton = document.getElementById('batch-start');
+
+ startButton.disabled = !inputFolder || !outputFolder;
+}
+
+// Event listeners for batch dialog
+document.addEventListener('DOMContentLoaded', () => {
+ // Browse input folder
+ document.getElementById('browse-input-folder').addEventListener('click', () => {
+ ipcRenderer.send('select-folder', 'input');
+ });
+
+ // Browse output folder
+ document.getElementById('browse-output-folder').addEventListener('click', () => {
+ ipcRenderer.send('select-folder', 'output');
+ });
+
+ // Show advanced options
+ document.getElementById('batch-show-options').addEventListener('click', () => {
+ const format = document.getElementById('batch-format').value;
+ currentExportFormat = format;
+ showExportDialog(format);
+ });
+
+ // Dialog close buttons
+ document.getElementById('batch-dialog-close').addEventListener('click', hideBatchDialog);
+ document.getElementById('batch-cancel').addEventListener('click', hideBatchDialog);
+
+ // Start batch conversion
+ document.getElementById('batch-start').addEventListener('click', () => {
+ const inputFolder = document.getElementById('batch-input-folder').value.trim();
+ const outputFolder = document.getElementById('batch-output-folder').value.trim();
+ const format = document.getElementById('batch-format').value;
+
+ if (!inputFolder || !outputFolder) {
+ return;
+ }
+
+ // Use current export options from advanced dialog if they were set
+ const options = currentBatchOptions;
+
+ // Start batch conversion
+ ipcRenderer.send('batch-convert', {
+ inputFolder,
+ outputFolder,
+ format,
+ options
+ });
+
+ // Show progress
+ document.getElementById('batch-progress').classList.remove('hidden');
+ document.getElementById('batch-start').disabled = true;
+ });
+
+ // Close on backdrop click
+ document.getElementById('batch-dialog').addEventListener('click', (e) => {
+ if (e.target === document.getElementById('batch-dialog')) {
+ hideBatchDialog();
+ }
+ });
+
+ // Close on Escape key (modified to handle both dialogs)
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape') {
+ if (!document.getElementById('export-dialog').classList.contains('hidden')) {
+ hideExportDialog();
+ } else if (!document.getElementById('batch-dialog').classList.contains('hidden')) {
+ hideBatchDialog();
+ }
+ }
+ });
+
+ // Input validation
+ document.getElementById('batch-input-folder').addEventListener('input', validateBatchForm);
+ document.getElementById('batch-output-folder').addEventListener('input', validateBatchForm);
+});
+
+// Override the export dialog confirm to also save batch options
+const originalExportConfirm = document.getElementById('export-confirm');
+if (originalExportConfirm) {
+ originalExportConfirm.addEventListener('click', () => {
+ // If batch dialog is open, save options for batch conversion
+ if (!document.getElementById('batch-dialog').classList.contains('hidden')) {
+ currentBatchOptions = collectExportOptions();
+ }
+ });
+}
+
+// Universal File Converter Dialog Functions
+let converterFilePath = '';
+
+// Format definitions for each converter
+const converterFormats = {
+ libreoffice: {
+ input: [
+ { value: 'docx', label: 'Word Document (DOCX)' },
+ { value: 'doc', label: 'Word 97-2003 (DOC)' },
+ { value: 'odt', label: 'OpenDocument Text (ODT)' },
+ { value: 'rtf', label: 'Rich Text Format (RTF)' },
+ { value: 'txt', label: 'Plain Text (TXT)' },
+ { value: 'html', label: 'HTML Document' },
+ { value: 'htm', label: 'HTM Document' },
+ { value: 'xlsx', label: 'Excel Spreadsheet (XLSX)' },
+ { value: 'xls', label: 'Excel 97-2003 (XLS)' },
+ { value: 'ods', label: 'OpenDocument Spreadsheet (ODS)' },
+ { value: 'csv', label: 'Comma Separated Values (CSV)' },
+ { value: 'pptx', label: 'PowerPoint (PPTX)' },
+ { value: 'ppt', label: 'PowerPoint 97-2003 (PPT)' },
+ { value: 'odp', label: 'OpenDocument Presentation (ODP)' }
+ ],
+ output: [
+ { value: 'pdf', label: 'PDF Document' },
+ { value: 'docx', label: 'Word Document (DOCX)' },
+ { value: 'doc', label: 'Word 97-2003 (DOC)' },
+ { value: 'odt', label: 'OpenDocument Text (ODT)' },
+ { value: 'rtf', label: 'Rich Text Format (RTF)' },
+ { value: 'txt', label: 'Plain Text (TXT)' },
+ { value: 'html', label: 'HTML Document' },
+ { value: 'xlsx', label: 'Excel Spreadsheet (XLSX)' },
+ { value: 'xls', label: 'Excel 97-2003 (XLS)' },
+ { value: 'ods', label: 'OpenDocument Spreadsheet (ODS)' },
+ { value: 'csv', label: 'CSV' },
+ { value: 'pptx', label: 'PowerPoint (PPTX)' },
+ { value: 'ppt', label: 'PowerPoint 97-2003 (PPT)' },
+ { value: 'odp', label: 'OpenDocument Presentation (ODP)' }
+ ]
+ },
+ imagemagick: {
+ input: [
+ { value: 'jpg', label: 'JPEG Image (JPG)' },
+ { value: 'jpeg', label: 'JPEG Image (JPEG)' },
+ { value: 'png', label: 'PNG Image' },
+ { value: 'gif', label: 'GIF Image' },
+ { value: 'bmp', label: 'Bitmap Image (BMP)' },
+ { value: 'tiff', label: 'TIFF Image' },
+ { value: 'tif', label: 'TIF Image' },
+ { value: 'webp', label: 'WebP Image' },
+ { value: 'svg', label: 'SVG Vector Image' },
+ { value: 'ico', label: 'Icon File (ICO)' },
+ { value: 'psd', label: 'Photoshop (PSD)' },
+ { value: 'raw', label: 'RAW Image' },
+ { value: 'cr2', label: 'Canon RAW (CR2)' },
+ { value: 'nef', label: 'Nikon RAW (NEF)' },
+ { value: 'heic', label: 'HEIC Image' },
+ { value: 'avif', label: 'AVIF Image' }
+ ],
+ output: [
+ { value: 'jpg', label: 'JPEG Image (JPG)' },
+ { value: 'png', label: 'PNG Image' },
+ { value: 'gif', label: 'GIF Image' },
+ { value: 'bmp', label: 'Bitmap Image (BMP)' },
+ { value: 'tiff', label: 'TIFF Image' },
+ { value: 'webp', label: 'WebP Image' },
+ { value: 'svg', label: 'SVG Vector Image' },
+ { value: 'ico', label: 'Icon File (ICO)' },
+ { value: 'pdf', label: 'PDF Document' },
+ { value: 'eps', label: 'EPS Vector' },
+ { value: 'ps', label: 'PostScript' },
+ { value: 'avif', label: 'AVIF Image' }
+ ]
+ },
+ ffmpeg: {
+ input: [
+ { value: 'mp4', label: 'MP4 Video' },
+ { value: 'avi', label: 'AVI Video' },
+ { value: 'mov', label: 'MOV Video (QuickTime)' },
+ { value: 'mkv', label: 'MKV Video (Matroska)' },
+ { value: 'wmv', label: 'WMV Video (Windows Media)' },
+ { value: 'flv', label: 'FLV Video (Flash)' },
+ { value: 'webm', label: 'WebM Video' },
+ { value: 'mpeg', label: 'MPEG Video' },
+ { value: 'mpg', label: 'MPG Video' },
+ { value: 'm4v', label: 'M4V Video' },
+ { value: 'mp3', label: 'MP3 Audio' },
+ { value: 'wav', label: 'WAV Audio' },
+ { value: 'ogg', label: 'OGG Audio' },
+ { value: 'flac', label: 'FLAC Audio' },
+ { value: 'aac', label: 'AAC Audio' },
+ { value: 'm4a', label: 'M4A Audio' },
+ { value: 'wma', label: 'WMA Audio' }
+ ],
+ output: [
+ { value: 'mp4', label: 'MP4 Video' },
+ { value: 'avi', label: 'AVI Video' },
+ { value: 'mov', label: 'MOV Video (QuickTime)' },
+ { value: 'mkv', label: 'MKV Video (Matroska)' },
+ { value: 'webm', label: 'WebM Video' },
+ { value: 'mpeg', label: 'MPEG Video' },
+ { value: 'gif', label: 'Animated GIF' },
+ { value: 'mp3', label: 'MP3 Audio' },
+ { value: 'wav', label: 'WAV Audio' },
+ { value: 'ogg', label: 'OGG Audio' },
+ { value: 'flac', label: 'FLAC Audio' },
+ { value: 'aac', label: 'AAC Audio' },
+ { value: 'm4a', label: 'M4A Audio' }
+ ]
+ },
+ pandoc: {
+ input: [
+ { value: 'md', label: 'Markdown (MD)' },
+ { value: 'markdown', label: 'Markdown' },
+ { value: 'html', label: 'HTML Document' },
+ { value: 'docx', label: 'Word Document (DOCX)' },
+ { value: 'odt', label: 'OpenDocument Text (ODT)' },
+ { value: 'rtf', label: 'Rich Text Format (RTF)' },
+ { value: 'tex', label: 'LaTeX Document' },
+ { value: 'latex', label: 'LaTeX' },
+ { value: 'epub', label: 'EPUB eBook' },
+ { value: 'rst', label: 'reStructuredText (RST)' },
+ { value: 'textile', label: 'Textile' },
+ { value: 'org', label: 'Org Mode' },
+ { value: 'mediawiki', label: 'MediaWiki' },
+ { value: 'docbook', label: 'DocBook XML' }
+ ],
+ output: [
+ { value: 'html', label: 'HTML Document' },
+ { value: 'pdf', label: 'PDF Document' },
+ { value: 'docx', label: 'Word Document (DOCX)' },
+ { value: 'odt', label: 'OpenDocument Text (ODT)' },
+ { value: 'rtf', label: 'Rich Text Format (RTF)' },
+ { value: 'epub', label: 'EPUB eBook' },
+ { value: 'latex', label: 'LaTeX Document' },
+ { value: 'md', label: 'Markdown (MD)' },
+ { value: 'rst', label: 'reStructuredText (RST)' },
+ { value: 'textile', label: 'Textile' },
+ { value: 'org', label: 'Org Mode' },
+ { value: 'mediawiki', label: 'MediaWiki' },
+ { value: 'docbook', label: 'DocBook XML' },
+ { value: 'pptx', label: 'PowerPoint (PPTX)' }
+ ]
+ }
+};
+
+function showUniversalConverterDialog() {
+ const dialog = document.getElementById('universal-converter-dialog');
+ dialog.classList.remove('hidden');
+ converterFilePath = '';
+ document.getElementById('converter-file-path').value = '';
+ document.getElementById('converter-tool').value = 'libreoffice';
+ document.getElementById('converter-progress').classList.add('hidden');
+ updateConverterFormats('libreoffice');
+}
+
+function updateConverterFormats(tool) {
+ const fromSelect = document.getElementById('converter-from');
+ const toSelect = document.getElementById('converter-to');
+ const helpText = document.getElementById('converter-tool-help');
+
+ // Clear existing options
+ fromSelect.innerHTML = '';
+ toSelect.innerHTML = '';
+
+ // Get formats for selected tool
+ const formats = converterFormats[tool];
+
+ if (formats) {
+ // Populate input formats
+ formats.input.forEach(format => {
+ const option = document.createElement('option');
+ option.value = format.value;
+ option.textContent = format.label;
+ fromSelect.appendChild(option);
+ });
+
+ // Populate output formats
+ formats.output.forEach(format => {
+ const option = document.createElement('option');
+ option.value = format.value;
+ option.textContent = format.label;
+ toSelect.appendChild(option);
+ });
+
+ // Update help text
+ if (tool === 'libreoffice') {
+ helpText.textContent = 'Documents, Spreadsheets, Presentations - Office file conversions';
+ } else if (tool === 'imagemagick') {
+ helpText.textContent = 'Image format conversions - JPG, PNG, GIF, TIFF, WebP, SVG, and more';
+ } else if (tool === 'ffmpeg') {
+ helpText.textContent = 'Video and audio conversions - MP4, AVI, MOV, MP3, WAV, and more';
+ } else if (tool === 'pandoc') {
+ helpText.textContent = 'Document markup conversions - Markdown, HTML, LaTeX, EPUB, and more';
+ }
+ }
+}
+
+function updateConverterAdvancedOptions(tool) {
+ // Hide all tool-specific options
+ const allOptions = document.querySelectorAll('.converter-options');
+ allOptions.forEach(opt => opt.classList.add('hidden'));
+
+ // Show options for selected tool
+ const toolOptions = document.querySelector(`.${tool}-options`);
+ if (toolOptions) {
+ toolOptions.classList.remove('hidden');
+ }
+}
+
+function collectConverterAdvancedOptions(tool) {
+ const options = {};
+ const advancedMode = document.getElementById('converter-advanced-toggle').checked;
+
+ if (!advancedMode) {
+ return options;
+ }
+
+ // Tool-specific options
+ if (tool === 'imagemagick') {
+ options.quality = document.getElementById('imagemagick-quality').value;
+ options.dpi = document.getElementById('imagemagick-dpi').value || null;
+ options.resize = document.getElementById('imagemagick-resize').value || null;
+ options.compression = document.getElementById('imagemagick-compression').value || null;
+ } else if (tool === 'ffmpeg') {
+ options.videoCodec = document.getElementById('ffmpeg-video-codec').value || null;
+ options.audioCodec = document.getElementById('ffmpeg-audio-codec').value || null;
+ options.bitrate = document.getElementById('ffmpeg-bitrate').value || null;
+ options.preset = document.getElementById('ffmpeg-preset').value || null;
+ options.framerate = document.getElementById('ffmpeg-framerate').value || null;
+ } else if (tool === 'libreoffice') {
+ options.quality = document.getElementById('libreoffice-quality').value || null;
+ options.pageRange = document.getElementById('libreoffice-page-range').value || null;
+ options.exportBookmarks = document.getElementById('libreoffice-export-bookmarks').checked;
+ }
+
+ return options;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ // Universal Converter tool change
+ const converterTool = document.getElementById('converter-tool');
+ if (converterTool) {
+ converterTool.addEventListener('change', (e) => {
+ updateConverterFormats(e.target.value);
+ updateConverterAdvancedOptions(e.target.value);
+ });
+ }
+
+ // Batch mode toggle
+ const converterBatchMode = document.getElementById('converter-batch-mode');
+ if (converterBatchMode) {
+ converterBatchMode.addEventListener('change', (e) => {
+ const batchOptions = document.getElementById('converter-batch-options');
+ const singleFileSection = document.getElementById('converter-file-path').closest('.export-section');
+
+ if (e.target.checked) {
+ batchOptions.classList.remove('hidden');
+ singleFileSection.style.display = 'none';
+ } else {
+ batchOptions.classList.add('hidden');
+ singleFileSection.style.display = 'block';
+ }
+ });
+ }
+
+ // Advanced options toggle
+ const converterAdvancedToggle = document.getElementById('converter-advanced-toggle');
+ if (converterAdvancedToggle) {
+ converterAdvancedToggle.addEventListener('change', (e) => {
+ const advancedOptions = document.getElementById('converter-advanced-options');
+ if (e.target.checked) {
+ advancedOptions.classList.remove('hidden');
+ // Update which tool-specific options to show
+ updateConverterAdvancedOptions(document.getElementById('converter-tool').value);
+ } else {
+ advancedOptions.classList.add('hidden');
+ }
+ });
+ }
+
+ // ImageMagick quality slider
+ const imagemagickQuality = document.getElementById('imagemagick-quality');
+ if (imagemagickQuality) {
+ imagemagickQuality.addEventListener('input', (e) => {
+ document.getElementById('imagemagick-quality-value').textContent = e.target.value;
+ });
+ }
+
+ // Browse batch input folder
+ const browseBatchInput = document.getElementById('browse-converter-batch-input');
+ if (browseBatchInput) {
+ browseBatchInput.addEventListener('click', () => {
+ ipcRenderer.send('select-folder', 'converter-batch-input');
+ });
+ }
+
+ // Browse batch output folder
+ const browseBatchOutput = document.getElementById('browse-converter-batch-output');
+ if (browseBatchOutput) {
+ browseBatchOutput.addEventListener('click', () => {
+ ipcRenderer.send('select-folder', 'converter-batch-output');
+ });
+ }
+
+ // Browse for file to convert
+ const browseConverterFile = document.getElementById('browse-converter-file');
+ if (browseConverterFile) {
+ browseConverterFile.addEventListener('click', () => {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = '*';
+ input.onchange = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ converterFilePath = file.path;
+ document.getElementById('converter-file-path').value = file.path;
+ }
+ };
+ input.click();
+ });
+ }
+
+ // Universal Converter dialog close
+ const converterDialogClose = document.getElementById('converter-dialog-close');
+ if (converterDialogClose) {
+ converterDialogClose.addEventListener('click', () => {
+ document.getElementById('universal-converter-dialog').classList.add('hidden');
+ });
+ }
+
+ // Universal Converter cancel
+ const converterCancel = document.getElementById('converter-cancel');
+ if (converterCancel) {
+ converterCancel.addEventListener('click', () => {
+ document.getElementById('universal-converter-dialog').classList.add('hidden');
+ });
+ }
+
+ // Universal Converter convert
+ const converterConvert = document.getElementById('converter-convert');
+ if (converterConvert) {
+ converterConvert.addEventListener('click', () => {
+ const tool = document.getElementById('converter-tool').value;
+ const fromFormat = document.getElementById('converter-from').value;
+ const toFormat = document.getElementById('converter-to').value;
+ const batchMode = document.getElementById('converter-batch-mode').checked;
+ const advancedOptions = collectConverterAdvancedOptions(tool);
+
+ if (batchMode) {
+ // Batch conversion
+ const inputFolder = document.getElementById('converter-batch-input-folder').value.trim();
+ const outputFolder = document.getElementById('converter-batch-output-folder').value.trim();
+ const includeSubfolders = document.getElementById('converter-batch-subfolders').checked;
+
+ if (!inputFolder || !outputFolder) {
+ alert('Please select both input and output folders for batch conversion');
+ return;
+ }
+
+ // Show progress
+ document.getElementById('converter-progress').classList.remove('hidden');
+
+ // Send batch conversion request
+ ipcRenderer.send('universal-convert-batch', {
+ tool,
+ fromFormat,
+ toFormat,
+ inputFolder,
+ outputFolder,
+ includeSubfolders,
+ advancedOptions
+ });
+ } else {
+ // Single file conversion
+ const filePath = converterFilePath;
+
+ if (!filePath) {
+ alert('Please select a file to convert');
+ return;
+ }
+
+ // Show progress
+ document.getElementById('converter-progress').classList.remove('hidden');
+
+ // Send single file conversion request
+ ipcRenderer.send('universal-convert', {
+ tool,
+ fromFormat,
+ toFormat,
+ filePath,
+ advancedOptions
+ });
+ }
+ });
+ }
+});
+
+// IPC event listeners for recent files functionality
+ipcRenderer.on('recent-files-cleared', () => {
+ if (tabManager) {
+ tabManager.recentFiles = [];
+ localStorage.setItem('recentFiles', JSON.stringify([]));
+ console.log('Recent files cleared');
+ }
+});
+
+// ========================================
+// PDF Editor Dialog Functionality
+// ========================================
+
+let currentPDFOperation = null;
+let mergeFilePaths = [];
+
+// Show Table Generator Dialog
+ipcRenderer.on('show-table-generator', () => {
+ showTableGenerator();
+});
+
+// Show PDF Editor Dialog
+ipcRenderer.on('show-pdf-editor-dialog', (event, operation, openedFilePath) => {
+ currentPDFOperation = operation;
+ showPDFEditorDialog(operation, openedFilePath);
+});
+
+function showPDFEditorDialog(operation, openedFilePath = null) {
+ const dialog = document.getElementById('pdf-editor-dialog');
+ const title = document.getElementById('pdf-editor-title');
+
+ // Hide all operation sections
+ document.querySelectorAll('.pdf-operation-section').forEach(section => {
+ section.classList.add('hidden');
+ });
+
+ // Show the appropriate section and set title
+ let sectionId, titleText;
+ switch (operation) {
+ case 'merge':
+ sectionId = 'pdf-merge-section';
+ titleText = 'Merge PDFs';
+ mergeFilePaths = [];
+ // If we have an opened file, add it as the first file to merge
+ if (openedFilePath) {
+ mergeFilePaths.push(openedFilePath);
+ }
+ updateMergeFilesList();
+ break;
+ case 'split':
+ sectionId = 'pdf-split-section';
+ titleText = 'Split PDF';
+ // Pre-fill input path if we have an opened file
+ if (openedFilePath) {
+ document.getElementById('split-input-path').value = openedFilePath;
+ }
+ break;
+ case 'compress':
+ sectionId = 'pdf-compress-section';
+ titleText = 'Compress PDF';
+ if (openedFilePath) {
+ document.getElementById('compress-input-path').value = openedFilePath;
+ }
+ break;
+ case 'rotate':
+ sectionId = 'pdf-rotate-section';
+ titleText = 'Rotate Pages';
+ if (openedFilePath) {
+ const rotateInput = document.getElementById('rotate-input-path');
+ if (rotateInput) rotateInput.value = openedFilePath;
+ }
+ break;
+ case 'delete':
+ sectionId = 'pdf-delete-section';
+ titleText = 'Delete Pages';
+ if (openedFilePath) {
+ const deleteInput = document.getElementById('delete-input-path');
+ if (deleteInput) deleteInput.value = openedFilePath;
+ }
+ break;
+ case 'reorder':
+ sectionId = 'pdf-reorder-section';
+ titleText = 'Reorder Pages';
+ if (openedFilePath) {
+ const reorderInput = document.getElementById('reorder-input-path');
+ if (reorderInput) reorderInput.value = openedFilePath;
+ }
+ break;
+ case 'watermark':
+ sectionId = 'pdf-watermark-section';
+ titleText = 'Add Watermark';
+ if (openedFilePath) {
+ const watermarkInput = document.getElementById('watermark-input-path');
+ if (watermarkInput) watermarkInput.value = openedFilePath;
+ }
+ break;
+ case 'encrypt':
+ sectionId = 'pdf-encrypt-section';
+ titleText = 'Password Protection';
+ if (openedFilePath) {
+ const encryptInput = document.getElementById('encrypt-input-path');
+ if (encryptInput) encryptInput.value = openedFilePath;
+ }
+ break;
+ case 'decrypt':
+ sectionId = 'pdf-decrypt-section';
+ titleText = 'Remove Password';
+ if (openedFilePath) {
+ const decryptInput = document.getElementById('decrypt-input-path');
+ if (decryptInput) decryptInput.value = openedFilePath;
+ }
+ break;
+ case 'permissions':
+ sectionId = 'pdf-permissions-section';
+ titleText = 'Set Permissions';
+ if (openedFilePath) {
+ const permInput = document.getElementById('permissions-input-path');
+ if (permInput) permInput.value = openedFilePath;
+ }
+ break;
+ }
+
+ title.textContent = titleText;
+ document.getElementById(sectionId).classList.remove('hidden');
+ dialog.classList.remove('hidden');
+}
+
+function hidePDFEditorDialog() {
+ document.getElementById('pdf-editor-dialog').classList.add('hidden');
+ document.getElementById('pdf-progress').classList.add('hidden');
+ currentPDFOperation = null;
+}
+
+function updateMergeFilesList() {
+ const listContainer = document.getElementById('merge-files-list');
+ listContainer.innerHTML = '';
+
+ mergeFilePaths.forEach((filePath, index) => {
+ const fileEntry = document.createElement('div');
+ fileEntry.className = 'file-entry';
+ fileEntry.innerHTML = `
+ ${filePath.split(/[\\/]/).pop()}
+
+ `;
+ listContainer.appendChild(fileEntry);
+ });
+}
+
+// PDF Editor Event Listeners
+document.addEventListener('DOMContentLoaded', () => {
+ // Close PDF Editor Dialog
+ const pdfEditorClose = document.getElementById('pdf-editor-dialog-close');
+ if (pdfEditorClose) {
+ pdfEditorClose.addEventListener('click', hidePDFEditorDialog);
+ }
+
+ const pdfEditorCancel = document.getElementById('pdf-editor-cancel');
+ if (pdfEditorCancel) {
+ pdfEditorCancel.addEventListener('click', hidePDFEditorDialog);
+ }
+
+ // Process button
+ const pdfEditorProcess = document.getElementById('pdf-editor-process');
+ if (pdfEditorProcess) {
+ pdfEditorProcess.addEventListener('click', processPDFOperation);
+ }
+
+ // Merge PDFs - Add file button
+ const addMergeFile = document.getElementById('add-merge-file');
+ if (addMergeFile) {
+ addMergeFile.addEventListener('click', () => {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = '.pdf';
+ input.multiple = true;
+ input.onchange = (e) => {
+ const files = Array.from(e.target.files);
+ files.forEach(file => {
+ if (!mergeFilePaths.includes(file.path)) {
+ mergeFilePaths.push(file.path);
+ }
+ });
+ updateMergeFilesList();
+ };
+ input.click();
+ });
+ }
+
+ // Remove file from merge list (using event delegation)
+ const mergeFilesList = document.getElementById('merge-files-list');
+ if (mergeFilesList) {
+ mergeFilesList.addEventListener('click', (e) => {
+ if (e.target.classList.contains('remove-file')) {
+ const index = parseInt(e.target.dataset.index);
+ mergeFilePaths.splice(index, 1);
+ updateMergeFilesList();
+ }
+ });
+ }
+
+ // Browse buttons for all operations
+ const browseButtons = [
+ { id: 'browse-merge-output', inputId: 'merge-output-path', saveDialog: true },
+ { id: 'browse-split-input', inputId: 'split-input-path', saveDialog: false },
+ { id: 'browse-split-output', inputId: 'split-output-folder', folder: true },
+ { id: 'browse-compress-input', inputId: 'compress-input-path', saveDialog: false },
+ { id: 'browse-compress-output', inputId: 'compress-output-path', saveDialog: true },
+ { id: 'browse-rotate-input', inputId: 'rotate-input-path', saveDialog: false },
+ { id: 'browse-rotate-output', inputId: 'rotate-output-path', saveDialog: true },
+ { id: 'browse-delete-input', inputId: 'delete-input-path', saveDialog: false },
+ { id: 'browse-delete-output', inputId: 'delete-output-path', saveDialog: true },
+ { id: 'browse-reorder-input', inputId: 'reorder-input-path', saveDialog: false },
+ { id: 'browse-reorder-output', inputId: 'reorder-output-path', saveDialog: true },
+ { id: 'browse-watermark-input', inputId: 'watermark-input-path', saveDialog: false },
+ { id: 'browse-watermark-output', inputId: 'watermark-output-path', saveDialog: true },
+ { id: 'browse-encrypt-input', inputId: 'encrypt-input-path', saveDialog: false },
+ { id: 'browse-encrypt-output', inputId: 'encrypt-output-path', saveDialog: true },
+ { id: 'browse-decrypt-input', inputId: 'decrypt-input-path', saveDialog: false },
+ { id: 'browse-decrypt-output', inputId: 'decrypt-output-path', saveDialog: true },
+ { id: 'browse-permissions-input', inputId: 'permissions-input-path', saveDialog: false },
+ { id: 'browse-permissions-output', inputId: 'permissions-output-path', saveDialog: true }
+ ];
+
+ browseButtons.forEach(button => {
+ const btn = document.getElementById(button.id);
+ if (btn) {
+ btn.addEventListener('click', () => {
+ const input = document.createElement('input');
+ input.type = 'file';
+
+ if (button.folder) {
+ // Request folder selection via IPC
+ ipcRenderer.send('select-pdf-folder', button.inputId);
+ } else if (button.saveDialog) {
+ input.nwsaveas = true;
+ input.accept = '.pdf';
+ input.onchange = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ document.getElementById(button.inputId).value = file.path;
+ }
+ };
+ input.click();
+ } else {
+ input.accept = '.pdf';
+ input.onchange = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ document.getElementById(button.inputId).value = file.path;
+ }
+ };
+ input.click();
+ }
+ });
+ }
+ });
+
+ // Split mode change handler
+ const splitMode = document.getElementById('split-mode');
+ if (splitMode) {
+ splitMode.addEventListener('change', (e) => {
+ // Hide all split options
+ document.getElementById('split-pages-options').classList.add('hidden');
+ document.getElementById('split-interval-options').classList.add('hidden');
+ document.getElementById('split-size-options').classList.add('hidden');
+
+ // Show selected split option
+ if (e.target.value === 'pages') {
+ document.getElementById('split-pages-options').classList.remove('hidden');
+ } else if (e.target.value === 'interval') {
+ document.getElementById('split-interval-options').classList.remove('hidden');
+ } else if (e.target.value === 'size') {
+ document.getElementById('split-size-options').classList.remove('hidden');
+ }
+ });
+ }
+
+ // Watermark opacity slider
+ const watermarkOpacity = document.getElementById('watermark-opacity');
+ if (watermarkOpacity) {
+ watermarkOpacity.addEventListener('input', (e) => {
+ document.getElementById('watermark-opacity-value').textContent = e.target.value;
+ });
+ }
+
+ // Watermark pages selection
+ const watermarkPages = document.getElementById('watermark-pages');
+ if (watermarkPages) {
+ watermarkPages.addEventListener('change', (e) => {
+ const customPages = document.getElementById('watermark-custom-pages');
+ if (e.target.value === 'custom') {
+ customPages.classList.remove('hidden');
+ } else {
+ customPages.classList.add('hidden');
+ }
+ });
+ }
+
+ // Overwrite checkbox handlers - toggle Save As section visibility
+ const overwriteCheckboxes = [
+ { checkbox: 'compress-overwrite', section: 'compress-saveas-section' },
+ { checkbox: 'rotate-overwrite', section: 'rotate-saveas-section' },
+ { checkbox: 'delete-overwrite', section: 'delete-saveas-section' },
+ { checkbox: 'reorder-overwrite', section: 'reorder-saveas-section' },
+ { checkbox: 'watermark-overwrite', section: 'watermark-saveas-section' },
+ { checkbox: 'encrypt-overwrite', section: 'encrypt-saveas-section' },
+ { checkbox: 'decrypt-overwrite', section: 'decrypt-saveas-section' },
+ { checkbox: 'permissions-overwrite', section: 'permissions-saveas-section' }
+ ];
+
+ overwriteCheckboxes.forEach(item => {
+ const checkbox = document.getElementById(item.checkbox);
+ const section = document.getElementById(item.section);
+ if (checkbox && section) {
+ checkbox.addEventListener('change', (e) => {
+ if (e.target.checked) {
+ section.classList.add('hidden');
+ } else {
+ section.classList.remove('hidden');
+ }
+ });
+ }
+ });
+
+ // Load current page order button
+ const loadCurrentOrder = document.getElementById('load-current-order');
+ if (loadCurrentOrder) {
+ loadCurrentOrder.addEventListener('click', () => {
+ const inputPath = document.getElementById('reorder-input-path').value;
+ if (!inputPath) {
+ alert('Please select a PDF file first');
+ return;
+ }
+ // Request page count from main process
+ ipcRenderer.send('get-pdf-page-count', inputPath);
+ });
+ }
+});
+
+// Handle folder selection response
+ipcRenderer.on('pdf-folder-selected', (event, { inputId, path }) => {
+ document.getElementById(inputId).value = path;
+});
+
+// Handle PDF page count response
+ipcRenderer.on('pdf-page-count', (event, { count, error }) => {
+ if (error) {
+ alert('Error reading PDF: ' + error);
+ return;
+ }
+
+ const currentOrder = Array.from({ length: count }, (_, i) => i + 1).join(', ');
+ document.getElementById('current-order-display').textContent = currentOrder;
+ document.getElementById('current-page-order').classList.remove('hidden');
+ document.getElementById('reorder-pages').value = currentOrder;
+});
+
+// Process PDF Operation
+function processPDFOperation() {
+ const operation = currentPDFOperation;
+ let operationData = { operation };
+
+ try {
+ switch (operation) {
+ case 'merge':
+ if (mergeFilePaths.length < 2) {
+ alert('Please add at least 2 PDF files to merge');
+ return;
+ }
+ operationData.inputFiles = mergeFilePaths;
+ operationData.outputPath = document.getElementById('merge-output-path').value.trim();
+ if (!operationData.outputPath) {
+ alert('Please select an output file path');
+ return;
+ }
+ break;
+
+ case 'split':
+ operationData.inputPath = document.getElementById('split-input-path').value.trim();
+ operationData.outputFolder = document.getElementById('split-output-folder').value.trim();
+ operationData.splitMode = document.getElementById('split-mode').value;
+
+ if (!operationData.inputPath || !operationData.outputFolder) {
+ alert('Please select input file and output folder');
+ return;
+ }
+
+ if (operationData.splitMode === 'pages') {
+ operationData.pageRanges = document.getElementById('split-page-ranges').value.trim();
+ } else if (operationData.splitMode === 'interval') {
+ operationData.interval = parseInt(document.getElementById('split-interval').value);
+ } else if (operationData.splitMode === 'size') {
+ operationData.maxSize = parseInt(document.getElementById('split-size').value);
+ }
+ break;
+
+ case 'compress':
+ operationData.inputPath = document.getElementById('compress-input-path').value.trim();
+ operationData.overwrite = document.getElementById('compress-overwrite').checked;
+ operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('compress-output-path').value.trim();
+ operationData.compressionLevel = document.getElementById('compress-level').value;
+ operationData.compressImages = document.getElementById('compress-images').checked;
+ operationData.removeDuplicates = document.getElementById('compress-remove-duplicates').checked;
+ operationData.optimizeFonts = document.getElementById('compress-optimize-fonts').checked;
+
+ if (!operationData.inputPath || !operationData.outputPath) {
+ alert('Please select input file' + (operationData.overwrite ? '' : ' and output file paths'));
+ return;
+ }
+ break;
+
+ case 'rotate':
+ operationData.inputPath = document.getElementById('rotate-input-path').value.trim();
+ operationData.overwrite = document.getElementById('rotate-overwrite').checked;
+ operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('rotate-output-path').value.trim();
+ operationData.pages = document.getElementById('rotate-pages').value.trim();
+ operationData.angle = parseInt(document.getElementById('rotate-angle').value);
+
+ if (!operationData.inputPath || !operationData.outputPath) {
+ alert('Please select input file' + (operationData.overwrite ? '' : ' and output file'));
+ return;
+ }
+ break;
+
+ case 'delete':
+ operationData.inputPath = document.getElementById('delete-input-path').value.trim();
+ operationData.overwrite = document.getElementById('delete-overwrite').checked;
+ operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('delete-output-path').value.trim();
+ operationData.pages = document.getElementById('delete-pages').value.trim();
+
+ if (!operationData.inputPath || !operationData.outputPath || !operationData.pages) {
+ alert('Please fill in all required fields');
+ return;
+ }
+ break;
+
+ case 'reorder':
+ operationData.inputPath = document.getElementById('reorder-input-path').value.trim();
+ operationData.overwrite = document.getElementById('reorder-overwrite').checked;
+ operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('reorder-output-path').value.trim();
+ operationData.newOrder = document.getElementById('reorder-pages').value.trim();
+
+ if (!operationData.inputPath || !operationData.outputPath || !operationData.newOrder) {
+ alert('Please fill in all required fields');
+ return;
+ }
+ break;
+
+ case 'watermark':
+ operationData.inputPath = document.getElementById('watermark-input-path').value.trim();
+ operationData.overwrite = document.getElementById('watermark-overwrite').checked;
+ operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('watermark-output-path').value.trim();
+ operationData.text = document.getElementById('watermark-text').value.trim();
+ operationData.fontSize = parseInt(document.getElementById('watermark-font-size').value);
+ operationData.opacity = parseInt(document.getElementById('watermark-opacity').value) / 100;
+ operationData.position = document.getElementById('watermark-position').value;
+ operationData.color = document.getElementById('watermark-color').value;
+ operationData.pages = document.getElementById('watermark-pages').value;
+
+ if (operationData.pages === 'custom') {
+ operationData.customPages = document.getElementById('watermark-custom-pages').value.trim();
+ }
+
+ if (!operationData.inputPath || !operationData.outputPath || !operationData.text) {
+ alert('Please fill in all required fields');
+ return;
+ }
+ break;
+
+ case 'encrypt':
+ operationData.inputPath = document.getElementById('encrypt-input-path').value.trim();
+ operationData.overwrite = document.getElementById('encrypt-overwrite').checked;
+ operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('encrypt-output-path').value.trim();
+ operationData.userPassword = document.getElementById('encrypt-user-password').value;
+ operationData.ownerPassword = document.getElementById('encrypt-owner-password').value;
+ operationData.encryptionLevel = parseInt(document.getElementById('encrypt-level').value);
+
+ operationData.permissions = {
+ printing: document.getElementById('encrypt-allow-printing').checked,
+ modifying: document.getElementById('encrypt-allow-modify').checked,
+ copying: document.getElementById('encrypt-allow-copy').checked,
+ annotating: document.getElementById('encrypt-allow-annotate').checked,
+ fillingForms: document.getElementById('encrypt-allow-forms').checked,
+ contentAccessibility: document.getElementById('encrypt-allow-extract').checked,
+ documentAssembly: document.getElementById('encrypt-allow-assemble').checked,
+ printingQuality: document.getElementById('encrypt-allow-print-high').checked
+ };
+
+ if (!operationData.inputPath || !operationData.outputPath || !operationData.userPassword) {
+ alert('Please select file and enter a user password');
+ return;
+ }
+ break;
+
+ case 'decrypt':
+ operationData.inputPath = document.getElementById('decrypt-input-path').value.trim();
+ operationData.overwrite = document.getElementById('decrypt-overwrite').checked;
+ operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('decrypt-output-path').value.trim();
+ operationData.password = document.getElementById('decrypt-password').value;
+
+ if (!operationData.inputPath || !operationData.outputPath || !operationData.password) {
+ alert('Please fill in all required fields');
+ return;
+ }
+ break;
+
+ case 'permissions':
+ operationData.inputPath = document.getElementById('permissions-input-path').value.trim();
+ operationData.overwrite = document.getElementById('permissions-overwrite').checked;
+ operationData.outputPath = operationData.overwrite ? operationData.inputPath : document.getElementById('permissions-output-path').value.trim();
+ operationData.currentPassword = document.getElementById('permissions-current-password').value;
+ operationData.ownerPassword = document.getElementById('permissions-owner-password').value;
+
+ operationData.permissions = {
+ printing: document.getElementById('permissions-allow-printing').checked,
+ modifying: document.getElementById('permissions-allow-modify').checked,
+ copying: document.getElementById('permissions-allow-copy').checked,
+ annotating: document.getElementById('permissions-allow-annotate').checked,
+ fillingForms: document.getElementById('permissions-allow-forms').checked,
+ contentAccessibility: document.getElementById('permissions-allow-extract').checked,
+ documentAssembly: document.getElementById('permissions-allow-assemble').checked,
+ printingQuality: document.getElementById('permissions-allow-print-high').checked
+ };
+
+ if (!operationData.inputPath || !operationData.outputPath || !operationData.ownerPassword) {
+ alert('Please fill in all required fields');
+ return;
+ }
+ break;
+ }
+
+ // Show progress
+ document.getElementById('pdf-progress').classList.remove('hidden');
+ document.getElementById('pdf-progress-text').textContent = 'Processing PDF...';
+
+ // Send to main process
+ ipcRenderer.send('process-pdf-operation', operationData);
+
+ } catch (error) {
+ alert('Error: ' + error.message);
+ console.error('PDF operation error:', error);
+ }
+}
+
+// Handle PDF operation completion
+ipcRenderer.on('pdf-operation-complete', (event, { success, error, message }) => {
+ document.getElementById('pdf-progress').classList.add('hidden');
+
+ if (success) {
+ alert(message || 'PDF operation completed successfully!');
+ hidePDFEditorDialog();
+ } else {
+ alert('Error: ' + (error || 'PDF operation failed'));
+ }
+});
+
+// Handle PDF operation progress
+ipcRenderer.on('pdf-operation-progress', (event, { message, progress }) => {
+ document.getElementById('pdf-progress-text').textContent = message;
+ if (progress !== undefined) {
+ const progressFill = document.getElementById('pdf-progress-fill');
+ if (progressFill) {
+ progressFill.style.width = `${progress}%`;
+ }
+ }
+});
+
+// Add math rendering support using KaTeX for enhanced preview
+function initMathSupport() {
+ // Add KaTeX CSS
+ const katexCSS = document.createElement('link');
+ katexCSS.rel = 'stylesheet';
+ katexCSS.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css';
+ katexCSS.crossOrigin = 'anonymous';
+ document.head.appendChild(katexCSS);
+
+ // Add KaTeX JS
+ const katexJS = document.createElement('script');
+ katexJS.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js';
+ katexJS.crossOrigin = 'anonymous';
+ katexJS.onload = () => {
+ // Add auto-render extension
+ const autoRenderJS = document.createElement('script');
+ autoRenderJS.src = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js';
+ autoRenderJS.crossOrigin = 'anonymous';
+ autoRenderJS.onload = () => {
+ console.log('Math support (KaTeX) initialized');
+ // Re-render current preview to include math
+ if (tabManager) {
+ tabManager.updatePreview();
+ }
+ };
+ document.head.appendChild(autoRenderJS);
+ };
+ document.head.appendChild(katexJS);
+}
+
+// Initialize math support on load
+initMathSupport();
+
+// ================================
+// Header & Footer Dialog Management
+// ================================
+
+let currentFieldTarget = null; // Track which input field is being edited
+
+// Open header/footer settings dialog
+function openHeaderFooterDialog() {
+ const dialog = document.getElementById('header-footer-dialog');
+ dialog.classList.remove('hidden');
+
+ // Request current settings from main process
+ ipcRenderer.send('get-header-footer-settings');
+}
+
+// Close header/footer settings dialog
+function closeHeaderFooterDialog() {
+ const dialog = document.getElementById('header-footer-dialog');
+ dialog.classList.add('hidden');
+}
+
+// Open field picker dialog
+function openFieldPickerDialog(targetInputId) {
+ currentFieldTarget = targetInputId;
+ const dialog = document.getElementById('field-picker-dialog');
+ dialog.classList.remove('hidden');
+}
+
+// Close field picker dialog
+function closeFieldPickerDialog() {
+ const dialog = document.getElementById('field-picker-dialog');
+ dialog.classList.add('hidden');
+ currentFieldTarget = null;
+}
+
+// Load settings into dialog
+ipcRenderer.on('header-footer-settings-data', (event, settings) => {
+ // Enable/disable checkbox
+ document.getElementById('hf-enabled').checked = settings.enabled;
+
+ // Header fields
+ document.getElementById('header-left').value = settings.header.left || '';
+ document.getElementById('header-center').value = settings.header.center || '';
+ document.getElementById('header-right').value = settings.header.right || '';
+
+ // Footer fields
+ document.getElementById('footer-left').value = settings.footer.left || '';
+ document.getElementById('footer-center').value = settings.footer.center || '';
+ document.getElementById('footer-right').value = settings.footer.right || '';
+
+ // Logo previews
+ if (settings.header.logo) {
+ document.getElementById('header-logo-preview').textContent = path.basename(settings.header.logo);
+ } else {
+ document.getElementById('header-logo-preview').textContent = '';
+ }
+
+ if (settings.footer.logo) {
+ document.getElementById('footer-logo-preview').textContent = path.basename(settings.footer.logo);
+ } else {
+ document.getElementById('footer-logo-preview').textContent = '';
+ }
+
+ // Update config content visibility
+ toggleConfigContent();
+});
+
+// Toggle config content based on enabled checkbox
+function toggleConfigContent() {
+ const enabled = document.getElementById('hf-enabled').checked;
+ const configContent = document.getElementById('hf-config-content');
+
+ if (enabled) {
+ configContent.classList.remove('disabled');
+ } else {
+ configContent.classList.add('disabled');
+ }
+}
+
+// Save header/footer settings
+function saveHeaderFooterSettings() {
+ const settings = {
+ enabled: document.getElementById('hf-enabled').checked,
+ header: {
+ left: document.getElementById('header-left').value || '',
+ center: document.getElementById('header-center').value || '',
+ right: document.getElementById('header-right').value || '',
+ logo: null // Logo paths are managed separately
+ },
+ footer: {
+ left: document.getElementById('footer-left').value || '',
+ center: document.getElementById('footer-center').value || '',
+ right: document.getElementById('footer-right').value || '',
+ logo: null
+ }
+ };
+
+ ipcRenderer.send('save-header-footer-settings', settings);
+ closeHeaderFooterDialog();
+}
+
+// Handle logo browsing - ask main process to show open dialog
+function browseForLogo(position) {
+ ipcRenderer.send('browse-header-footer-logo', position);
+}
+
+// Handle logo saved confirmation
+ipcRenderer.on('header-footer-logo-saved', (event, { position, path }) => {
+ document.getElementById(`${position}-logo-preview`).textContent = path.split(/[\\/]/).pop();
+});
+
+// Clear logo
+function clearLogo(position) {
+ ipcRenderer.send('clear-header-footer-logo', position);
+ document.getElementById(`${position}-logo-preview`).textContent = '';
+}
+
+// Handle logo cleared confirmation
+ipcRenderer.on('header-footer-logo-cleared', (event, position) => {
+ console.log(`${position} logo cleared`);
+});
+
+// Insert dynamic field into input
+function insertDynamicField(field) {
+ if (currentFieldTarget) {
+ const input = document.getElementById(currentFieldTarget);
+ const cursorPos = input.selectionStart;
+ const textBefore = input.value.substring(0, cursorPos);
+ const textAfter = input.value.substring(cursorPos);
+
+ input.value = textBefore + field + textAfter;
+ input.focus();
+ input.setSelectionRange(cursorPos + field.length, cursorPos + field.length);
+ }
+
+ closeFieldPickerDialog();
+}
+
+// Event Listeners for Header/Footer Dialog
+
+// Close buttons
+document.getElementById('header-footer-close').addEventListener('click', closeHeaderFooterDialog);
+document.getElementById('header-footer-cancel').addEventListener('click', closeHeaderFooterDialog);
+document.getElementById('header-footer-save').addEventListener('click', saveHeaderFooterSettings);
+
+// Enable/disable checkbox
+document.getElementById('hf-enabled').addEventListener('change', toggleConfigContent);
+
+// Field insert buttons
+document.querySelectorAll('.field-insert-btn').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const target = btn.getAttribute('data-target');
+ openFieldPickerDialog(target);
+ });
+});
+
+// Logo browse buttons
+document.getElementById('header-logo-browse').addEventListener('click', () => browseForLogo('header'));
+document.getElementById('footer-logo-browse').addEventListener('click', () => browseForLogo('footer'));
+
+// Logo clear buttons
+document.getElementById('header-logo-clear').addEventListener('click', () => clearLogo('header'));
+document.getElementById('footer-logo-clear').addEventListener('click', () => clearLogo('footer'));
+
+// Field picker dialog
+document.getElementById('field-picker-close').addEventListener('click', closeFieldPickerDialog);
+document.querySelectorAll('.field-option').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const field = btn.getAttribute('data-field');
+ insertDynamicField(field);
+ });
+});
+
+// Export function to make openHeaderFooterDialog accessible globally
+window.openHeaderFooterDialog = openHeaderFooterDialog;
+
+// Listen for menu command to open dialog
+ipcRenderer.on('open-header-footer-dialog', () => {
+ openHeaderFooterDialog();
+});
+// Command Palette Implementation
+const commands = [
+ { name: 'New File', action: () => tabManager.createTab(), shortcut: 'Ctrl+N' },
+ { name: 'Open File', action: () => ipcRenderer.send('open-file'), shortcut: 'Ctrl+O' },
+ { name: 'Save File', action: () => ipcRenderer.send('save-file'), shortcut: 'Ctrl+S' },
+ { name: 'Save As', action: () => ipcRenderer.send('save-file-as'), shortcut: 'Ctrl+Shift+S' },
+ { name: 'Export to PDF', action: () => ipcRenderer.send('export', 'pdf'), shortcut: '' },
+ { name: 'Export to DOCX', action: () => ipcRenderer.send('export', 'docx'), shortcut: '' },
+ { name: 'Export to HTML', action: () => ipcRenderer.send('export', 'html'), shortcut: '' },
+ { name: 'Toggle Preview', action: () => tabManager.togglePreview(), shortcut: 'Ctrl+Shift+P' },
+ { name: 'Toggle Line Numbers', action: () => tabManager.toggleLineNumbers(), shortcut: '' },
+ { name: 'Find & Replace', action: () => showFindDialog(), shortcut: 'Ctrl+F' },
+ { name: 'New Tab', action: () => tabManager.createTab(), shortcut: 'Ctrl+T' },
+ { name: 'Close Tab', action: () => tabManager.closeTab(tabManager.activeTabId), shortcut: 'Ctrl+W' },
+ { name: 'Undo', action: () => tabManager.undo(), shortcut: 'Ctrl+Z' },
+ { name: 'Redo', action: () => tabManager.redo(), shortcut: 'Ctrl+Shift+Z' },
+ { name: 'Bold', action: () => insertMarkdown('**', '**'), shortcut: 'Ctrl+B' },
+ { name: 'Italic', action: () => insertMarkdown('*', '*'), shortcut: 'Ctrl+I' },
+ { name: 'Heading 1', action: () => insertMarkdown('# ', ''), shortcut: '' },
+ { name: 'Heading 2', action: () => insertMarkdown('## ', ''), shortcut: '' },
+ { name: 'Heading 3', action: () => insertMarkdown('### ', ''), shortcut: '' },
+ { name: 'Insert Link', action: () => insertMarkdown('[', '](url)'), shortcut: '' },
+ { name: 'Insert Image', action: () => insertMarkdown(''), shortcut: '' },
+ { name: 'Insert Code Block', action: () => insertMarkdown('```\n', '\n```'), shortcut: '' },
+ { name: 'Insert Table', action: () => insertMarkdown('\n| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |\n', ''), shortcut: '' },
+ { name: 'Table Generator', action: () => showTableGenerator(), shortcut: '' },
+ { name: 'ASCII Art Generator', action: () => showASCIIGenerator(), shortcut: '' },
+ { name: 'Increase Font Size', action: () => ipcRenderer.send('adjust-font-size', 'increase'), shortcut: 'Ctrl+Shift++' },
+ { name: 'Decrease Font Size', action: () => ipcRenderer.send('adjust-font-size', 'decrease'), shortcut: 'Ctrl+Shift+-' }
+];
+
+let commandPaletteSelectedIndex = 0;
+let filteredCommands = [...commands];
+
+function showCommandPalette() {
+ const palette = document.getElementById('command-palette');
+ const searchInput = document.getElementById('command-search');
+
+ palette.classList.remove('hidden');
+ searchInput.value = '';
+ searchInput.focus();
+
+ filteredCommands = [...commands];
+ commandPaletteSelectedIndex = 0;
+ renderCommandList();
+}
+
+function hideCommandPalette() {
+ const palette = document.getElementById('command-palette');
+ palette.classList.add('hidden');
+}
+
+function renderCommandList() {
+ const list = document.getElementById('command-list');
+ list.innerHTML = '';
+
+ filteredCommands.forEach((cmd, index) => {
+ const item = document.createElement('div');
+ item.className = 'command-item';
+ if (index === commandPaletteSelectedIndex) {
+ item.classList.add('selected');
+ }
+
+ const name = document.createElement('span');
+ name.className = 'command-name';
+ name.textContent = cmd.name;
+
+ const shortcut = document.createElement('span');
+ shortcut.className = 'command-shortcut';
+ shortcut.textContent = cmd.shortcut || '';
+
+ item.appendChild(name);
+ if (cmd.shortcut) {
+ item.appendChild(shortcut);
+ }
+
+ item.addEventListener('click', () => {
+ executeCommand(cmd);
+ });
+
+ list.appendChild(item);
+ });
+}
+
+function filterCommands(query) {
+ const lowerQuery = query.toLowerCase();
+ filteredCommands = commands.filter(cmd =>
+ cmd.name.toLowerCase().includes(lowerQuery)
+ );
+ commandPaletteSelectedIndex = 0;
+ renderCommandList();
+}
+
+function executeCommand(cmd) {
+ hideCommandPalette();
+ if (cmd && cmd.action) {
+ cmd.action();
+ }
+}
+
+function navigateCommandPalette(direction) {
+ commandPaletteSelectedIndex += direction;
+ if (commandPaletteSelectedIndex < 0) {
+ commandPaletteSelectedIndex = filteredCommands.length - 1;
+ }
+ if (commandPaletteSelectedIndex >= filteredCommands.length) {
+ commandPaletteSelectedIndex = 0;
+ }
+ renderCommandList();
+}
+
+// Command Palette Event Listeners
+document.addEventListener('keydown', (e) => {
+ // Ctrl+Shift+P to open command palette
+ if (e.ctrlKey && e.shiftKey && e.key === 'P') {
+ e.preventDefault();
+ showCommandPalette();
+ return;
+ }
+
+ // Handle command palette navigation when open
+ const palette = document.getElementById('command-palette');
+ if (!palette.classList.contains('hidden')) {
+ if (e.key === 'Escape') {
+ e.preventDefault();
+ hideCommandPalette();
+ } else if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ navigateCommandPalette(1);
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ navigateCommandPalette(-1);
+ } else if (e.key === 'Enter') {
+ e.preventDefault();
+ if (filteredCommands[commandPaletteSelectedIndex]) {
+ executeCommand(filteredCommands[commandPaletteSelectedIndex]);
+ }
+ }
+ }
+});
+
+document.getElementById('command-search').addEventListener('input', (e) => {
+ filterCommands(e.target.value);
+});
+
+// Close on backdrop click
+document.getElementById('command-palette').addEventListener('click', (e) => {
+ if (e.target === document.getElementById('command-palette')) {
+ hideCommandPalette();
+ }
+});
+
+// ============================================================================
+// TABLE GENERATOR
+// ============================================================================
+
+function showTableGenerator() {
+ const dialog = document.getElementById('table-generator-dialog');
+ dialog.classList.remove('hidden');
+
+ // Generate initial preview
+ generateTablePreview();
+
+ // Focus on rows input
+ setTimeout(() => {
+ document.getElementById('table-rows').focus();
+ }, 100);
+}
+
+function hideTableGenerator() {
+ const dialog = document.getElementById('table-generator-dialog');
+ dialog.classList.add('hidden');
+}
+
+function generateTablePreview() {
+ const rows = parseInt(document.getElementById('table-rows').value) || 3;
+ const cols = parseInt(document.getElementById('table-cols').value) || 3;
+ const hasHeader = document.getElementById('table-has-header').checked;
+ const alignment = document.getElementById('table-alignment').value;
+
+ const table = generateMarkdownTable(rows, cols, hasHeader, alignment);
+ document.getElementById('table-preview').textContent = table;
+}
+
+function generateMarkdownTable(rows, cols, hasHeader, alignment) {
+ let table = '';
+
+ // Generate alignment string
+ let alignChar = '-';
+ if (alignment === 'center') {
+ alignChar = ':' + '-'.repeat(Math.max(8, 10)) + ':';
+ } else if (alignment === 'right') {
+ alignChar = '-'.repeat(Math.max(8, 10)) + ':';
+ } else {
+ alignChar = '-'.repeat(Math.max(8, 10));
+ }
+
+ // Generate header row
+ if (hasHeader) {
+ table += '| ';
+ for (let c = 1; c <= cols; c++) {
+ table += `Header ${c}`;
+ if (c < cols) table += ' | ';
+ }
+ table += ' |\n';
+
+ // Separator row
+ table += '| ';
+ for (let c = 1; c <= cols; c++) {
+ table += alignChar;
+ if (c < cols) table += ' | ';
+ }
+ table += ' |\n';
+
+ // Data rows (excluding header)
+ for (let r = 1; r < rows; r++) {
+ table += '| ';
+ for (let c = 1; c <= cols; c++) {
+ table += `Cell ${r},${c}`;
+ if (c < cols) table += ' | ';
+ }
+ table += ' |\n';
+ }
+ } else {
+ // No header - all rows are data rows
+ // First row (acts as separator position)
+ table += '| ';
+ for (let c = 1; c <= cols; c++) {
+ table += `Cell 1,${c}`;
+ if (c < cols) table += ' | ';
+ }
+ table += ' |\n';
+
+ // Separator row
+ table += '| ';
+ for (let c = 1; c <= cols; c++) {
+ table += alignChar;
+ if (c < cols) table += ' | ';
+ }
+ table += ' |\n';
+
+ // Remaining data rows
+ for (let r = 2; r <= rows; r++) {
+ table += '| ';
+ for (let c = 1; c <= cols; c++) {
+ table += `Cell ${r},${c}`;
+ if (c < cols) table += ' | ';
+ }
+ table += ' |\n';
+ }
+ }
+
+ return table;
+}
+
+function insertGeneratedTable() {
+ const table = document.getElementById('table-preview').textContent;
+
+ if (!table) {
+ alert('Please generate a table preview first');
+ return;
+ }
+
+ // Get active editor
+ const activeTabId = tabManager ? tabManager.activeTabId : 1;
+ const editor = document.getElementById(`editor-${activeTabId}`);
+
+ if (!editor) {
+ alert('No active editor found');
+ return;
+ }
+
+ // Insert table at cursor position
+ const start = editor.selectionStart;
+ const before = editor.value.substring(0, start);
+ const after = editor.value.substring(editor.selectionEnd);
+
+ // Add newlines for spacing
+ const tableWithSpacing = '\n' + table + '\n';
+ editor.value = before + tableWithSpacing + after;
+
+ // Update cursor position
+ editor.selectionStart = editor.selectionEnd = start + tableWithSpacing.length;
+ editor.focus();
+
+ // Trigger update
+ if (tabManager) {
+ tabManager.handleEditorInput(activeTabId);
+ }
+
+ // Close dialog
+ hideTableGenerator();
+}
+
+// Table Generator Event Listeners
+document.getElementById('table-dialog-close').addEventListener('click', hideTableGenerator);
+document.getElementById('table-cancel').addEventListener('click', hideTableGenerator);
+document.getElementById('table-generate-preview').addEventListener('click', generateTablePreview);
+document.getElementById('table-insert').addEventListener('click', insertGeneratedTable);
+
+// Auto-update preview when inputs change
+document.getElementById('table-rows').addEventListener('input', generateTablePreview);
+document.getElementById('table-cols').addEventListener('input', generateTablePreview);
+document.getElementById('table-has-header').addEventListener('change', generateTablePreview);
+document.getElementById('table-alignment').addEventListener('change', generateTablePreview);
+
+// Close dialog on backdrop click
+document.getElementById('table-generator-dialog').addEventListener('click', (e) => {
+ if (e.target === document.getElementById('table-generator-dialog')) {
+ hideTableGenerator();
+ }
+});
+
+// Handle Enter key in inputs
+document.getElementById('table-rows').addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ insertGeneratedTable();
+ }
+});
+
+document.getElementById('table-cols').addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ insertGeneratedTable();
+ }
+});
+
+// ============================================================================
+// ASCII ART GENERATOR
+// ============================================================================
+
+let currentASCIIMode = 'text';
+
+function showASCIIGenerator() {
+ const dialog = document.getElementById('ascii-art-dialog');
+ dialog.classList.remove('hidden');
+
+ // Initialize with text mode
+ switchASCIIMode('text');
+
+ // Generate initial preview
+ setTimeout(() => {
+ generateASCIIPreview();
+ }, 100);
+}
+
+function hideASCIIGenerator() {
+ const dialog = document.getElementById('ascii-art-dialog');
+ dialog.classList.add('hidden');
+}
+
+function switchASCIIMode(mode) {
+ currentASCIIMode = mode;
+
+ // Update button states
+ document.querySelectorAll('.ascii-mode-btn').forEach(btn => {
+ btn.classList.remove('active');
+ });
+
+ // Hide all mode sections
+ document.querySelectorAll('.ascii-mode-section').forEach(section => {
+ section.classList.add('hidden');
+ });
+
+ // Show selected mode
+ if (mode === 'text') {
+ document.getElementById('ascii-mode-text').classList.add('active');
+ document.getElementById('ascii-text-mode').classList.remove('hidden');
+ } else if (mode === 'box') {
+ document.getElementById('ascii-mode-box').classList.add('active');
+ document.getElementById('ascii-box-mode').classList.remove('hidden');
+ } else if (mode === 'templates') {
+ document.getElementById('ascii-mode-templates').classList.add('active');
+ document.getElementById('ascii-templates-mode').classList.remove('hidden');
+ }
+
+ // Generate preview
+ generateASCIIPreview();
+}
+
+function generateASCIIPreview() {
+ let result = '';
+
+ if (currentASCIIMode === 'text') {
+ const text = document.getElementById('ascii-text-input').value || 'Sample';
+ const style = document.getElementById('ascii-font-style').value;
+ result = textToASCII(text, style);
+ } else if (currentASCIIMode === 'box') {
+ const text = document.getElementById('ascii-box-text').value || 'Sample Text';
+ const style = document.getElementById('ascii-box-style').value;
+ const padding = parseInt(document.getElementById('ascii-box-padding').value) || 2;
+ result = createASCIIBox(text, style, padding);
+ } else if (currentASCIIMode === 'templates') {
+ result = 'Select a template from the buttons above';
+ }
+
+ document.getElementById('ascii-preview').textContent = result;
+}
+
+// Simple ASCII art text generator
+function textToASCII(text, style) {
+ const fonts = {
+ standard: {
+ height: 5,
+ chars: {
+ 'A': [' _ ', ' / \\ ', '/___\\', '| |', '| |'],
+ 'B': ['____ ', '| \\', '|___/', '| \\', '|___/'],
+ 'C': [' ___ ', '/ _/', '| \\', '| ', '\\___/'],
+ 'D': ['____ ', '| \\', '| |', '| |', '|___/'],
+ 'E': ['_____', '| ', '|___ ', '| ', '|____'],
+ 'F': ['_____', '| ', '|___ ', '| ', '| '],
+ 'G': [' ___ ', '/ _', '| ||', '| |', '\\___/'],
+ 'H': ['| |', '| |', '|___|', '| |', '| |'],
+ 'I': ['_____', ' | ', ' | ', ' | ', '_____'],
+ 'J': ['_____', ' | ', ' | ', '| | ', '\\__/ '],
+ 'K': ['| |', '| / ', '|_/ ', '| \\ ', '| \\ '],
+ 'L': ['| ', '| ', '| ', '| ', '|____'],
+ 'M': ['| |', '|\\ /|', '| V |', '| |', '| |'],
+ 'N': ['| |', '|\\ |', '| \\ |', '| \\|', '| |'],
+ 'O': [' ___ ', '/ \\', '| |', '| |', '\\___/'],
+ 'P': ['____ ', '| \\', '|___/', '| ', '| '],
+ 'Q': [' ___ ', '/ \\', '| |', '| |\\ ', '\\__\\|'],
+ 'R': ['____ ', '| \\', '|___/', '| \\ ', '| \\ '],
+ 'S': [' ___ ', '/ _/', '\\_ \\', ' \\ ', '\\___/'],
+ 'T': ['_____', ' | ', ' | ', ' | ', ' | '],
+ 'U': ['| |', '| |', '| |', '| |', '\\___/'],
+ 'V': ['| |', '| |', '| |', ' \\ / ', ' V '],
+ 'W': ['| |', '| |', '| W |', '|/ \\|', '| |'],
+ 'X': ['| |', ' \\ / ', ' X ', ' / \\ ', '| |'],
+ 'Y': ['| |', ' \\ / ', ' Y ', ' | ', ' | '],
+ 'Z': ['_____', ' / ', ' / ', ' / ', '/___ '],
+ ' ': [' ', ' ', ' ', ' ', ' '],
+ '0': [' ___ ', '/ \\', '| | |', '| |', '\\___/'],
+ '1': [' | ', ' || ', ' | ', ' | ', ' _|_ '],
+ '2': [' ___ ', '\\ /', ' __/ ', '/ ', '\\____'],
+ '3': [' ___ ', '\\ /', ' __/ ', ' / ', '\\___/'],
+ '4': ['| |', '| |', '|___|', ' |', ' |'],
+ '5': [' ___ ', '| ', '|___ ', ' / ', '\\___/'],
+ '6': [' ___ ', '/ ', '|___ ', '| |', '\\___/'],
+ '7': ['_____', ' / ', ' / ', ' / ', '/ '],
+ '8': [' ___ ', '| |', ' ___ ', '| |', '\\___/'],
+ '9': [' ___ ', '| |', '\\___|', ' |', '\\___/']
+ }
+ },
+ banner: {
+ height: 7,
+ chars: {
+ 'A': [' ### ', ' ## ## ', ' ## ## ', ' ## ## ', ' ####### ', ' ## ## ', ' ## ## '],
+ 'B': [' ###### ', ' ## ## ', ' ## ## ', ' ###### ', ' ## ## ', ' ## ## ', ' ###### '],
+ 'C': [' ##### ', ' ## ## ', ' ## ', ' ## ', ' ## ', ' ## ## ', ' ##### '],
+ 'D': [' ###### ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ###### '],
+ 'E': [' ####### ', ' ## ', ' ## ', ' ##### ', ' ## ', ' ## ', ' ####### '],
+ 'F': [' ####### ', ' ## ', ' ## ', ' ##### ', ' ## ', ' ## ', ' ## '],
+ 'G': [' ##### ', ' ## ## ', ' ## ', ' ## ### ', ' ## ## ', ' ## ## ', ' ##### '],
+ 'H': [' ## ## ', ' ## ## ', ' ## ## ', ' ####### ', ' ## ## ', ' ## ## ', ' ## ## '],
+ 'I': [' ####### ', ' ### ', ' ### ', ' ### ', ' ### ', ' ### ', ' ####### '],
+ 'J': [' ####### ', ' ## ', ' ## ', ' ## ', ' ## ## ', ' ## ## ', ' #### '],
+ 'K': [' ## ## ', ' ## ## ', ' ## ## ', ' #### ', ' ## ## ', ' ## ## ', ' ## ## '],
+ 'L': [' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ####### '],
+ 'M': [' ## ## ', ' ### ### ', ' ####### ', ' ## # ## ', ' ## ## ', ' ## ## ', ' ## ## '],
+ 'N': [' ## ## ', ' ### ## ', ' #### ## ', ' ## #### ', ' ## ### ', ' ## ## ', ' ## ## '],
+ 'O': [' ##### ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ##### '],
+ 'P': [' ###### ', ' ## ## ', ' ## ## ', ' ###### ', ' ## ', ' ## ', ' ## '],
+ 'Q': [' ##### ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## # ## ', ' ## ## ', ' ### ## '],
+ 'R': [' ###### ', ' ## ## ', ' ## ## ', ' ###### ', ' ## ## ', ' ## ## ', ' ## ## '],
+ 'S': [' ##### ', ' ## ## ', ' ## ', ' ##### ', ' ## ', ' ## ## ', ' ##### '],
+ 'T': [' ####### ', ' ### ', ' ### ', ' ### ', ' ### ', ' ### ', ' ### '],
+ 'U': [' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ##### '],
+ 'V': [' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ## ## ', ' ### '],
+ 'W': [' ## ## ', ' ## ## ', ' ## ## ', ' ## # ## ', ' ####### ', ' ### ### ', ' ## ## '],
+ 'X': [' ## ## ', ' ## ## ', ' ### ', ' # ', ' ### ', ' ## ## ', ' ## ## '],
+ 'Y': [' ## ## ', ' ## ## ', ' ### ', ' # ', ' # ', ' # ', ' # '],
+ 'Z': [' ####### ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ####### '],
+ ' ': [' ', ' ', ' ', ' ', ' ', ' ', ' '],
+ '0': [' ##### ', ' ## ## ', ' ## ### ', ' ## #### ', ' ### ## ', ' ## ## ', ' ##### '],
+ '1': [' ## ', ' ### ', ' ## ', ' ## ', ' ## ', ' ## ', ' ####### '],
+ '2': [' ##### ', ' ## ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ####### '],
+ '3': [' ##### ', ' ## ## ', ' ## ', ' ### ', ' ## ', ' ## ## ', ' ##### '],
+ '4': [' ### ', ' #### ', ' ## ## ', ' ## ## ', ' ####### ', ' ## ', ' ## '],
+ '5': [' ####### ', ' ## ', ' ###### ', ' ## ', ' ## ', ' ## ## ', ' ##### '],
+ '6': [' ##### ', ' ## ## ', ' ## ', ' ###### ', ' ## ## ', ' ## ## ', ' ##### '],
+ '7': [' ####### ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## ', ' ## '],
+ '8': [' ##### ', ' ## ## ', ' ## ## ', ' ##### ', ' ## ## ', ' ## ## ', ' ##### '],
+ '9': [' ##### ', ' ## ## ', ' ## ## ', ' ###### ', ' ## ', ' ## ## ', ' ##### ']
+ }
+ },
+ block: {
+ height: 6,
+ chars: {
+ 'A': ['█████╗ ', '██╔══██╗', '███████║', '██╔══██║', '██║ ██║', '╚═╝ ╚═╝'],
+ 'B': ['██████╗ ', '██╔══██╗', '██████╔╝', '██╔══██╗', '██████╔╝', '╚═════╝ '],
+ 'C': ['██████╗', '██╔════╝', '██║ ', '██║ ', '╚██████╗', ' ╚═════╝'],
+ 'D': ['██████╗ ', '██╔══██╗', '██║ ██║', '██║ ██║', '██████╔╝', '╚═════╝ '],
+ 'E': ['███████╗', '██╔════╝', '█████╗ ', '██╔══╝ ', '███████╗', '╚══════╝'],
+ 'F': ['███████╗', '██╔════╝', '█████╗ ', '██╔══╝ ', '██║ ', '╚═╝ '],
+ 'G': ['██████╗ ', '██╔════╝', '██║ ███╗', '██║ ██║', '╚██████╔╝', ' ╚═════╝ '],
+ 'H': ['██╗ ██╗', '██║ ██║', '███████║', '██╔══██║', '██║ ██║', '╚═╝ ╚═╝'],
+ 'I': ['██╗', '██║', '██║', '██║', '██║', '╚═╝'],
+ ' ': [' ', ' ', ' ', ' ', ' ', ' ']
+ }
+ },
+ bubble: {
+ height: 5,
+ chars: {
+ 'A': [' Ⓐ ', ' ⒜ ⒜ ', '⒜⒜⒜⒜⒜', '⒜ ⒜', '⒜ ⒜'],
+ 'B': ['ⒷⒷⒷⒷ ', 'Ⓑ Ⓑ', 'ⒷⒷⒷⒷ ', 'Ⓑ Ⓑ', 'ⒷⒷⒷⒷ '],
+ 'C': [' ⒸⒸⒸ ', 'Ⓒ ', 'Ⓒ ', 'Ⓒ ', ' ⒸⒸⒸ '],
+ ' ': [' ', ' ', ' ', ' ', ' ']
+ }
+ },
+ digital: {
+ height: 7,
+ chars: {
+ 'A': [' ▄▀▀▀▄ ', '▐ ▌', '▐▄▄▄▄▌', '▐ ▌', '▐ ▌', '▐ ▌', ' '],
+ 'B': ['▐▀▀▀▄ ', '▐▄▄▄▀ ', '▐▄▄▄▄ ', '▐ ▌', '▐▄▄▄▀ ', ' ', ' '],
+ 'C': [' ▄▀▀▀▄', '▐ ', '▐ ', '▐ ', ' ▀▄▄▄▀', ' ', ' '],
+ ' ': [' ', ' ', ' ', ' ', ' ', ' ', ' ']
+ }
+ }
+ };
+
+ // Use selected font or fallback to standard
+ const font = fonts[style] || fonts.standard;
+ const lines = [];
+ const upperText = text.toUpperCase();
+
+ for (let i = 0; i < font.height; i++) {
+ lines[i] = '';
+ }
+
+ for (let char of upperText) {
+ const charLines = font.chars[char] || font.chars[' '];
+ if (charLines) {
+ for (let i = 0; i < font.height; i++) {
+ lines[i] += (charLines[i] || ' '.repeat(font.chars[' '][i].length));
+ }
+ }
+ }
+
+ return lines.join('\n');
+}
+
+// Create ASCII box/frame
+function createASCIIBox(text, style, padding) {
+ const styles = {
+ single: { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' },
+ double: { tl: '╔', tr: '╗', bl: '╚', br: '╝', h: '═', v: '║' },
+ rounded: { tl: '╭', tr: '╮', bl: '╰', br: '╯', h: '─', v: '│' },
+ bold: { tl: '┏', tr: '┓', bl: '┗', br: '┛', h: '━', v: '┃' },
+ ascii: { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' }
+ };
+
+ const chars = styles[style] || styles.single;
+ const lines = text.split('\n');
+ const maxLength = Math.max(...lines.map(l => l.length));
+ const width = maxLength + (padding * 2);
+
+ let result = '';
+
+ // Top border
+ result += chars.tl + chars.h.repeat(width) + chars.tr + '\n';
+
+ // Padding rows above
+ for (let i = 0; i < padding - 1; i++) {
+ result += chars.v + ' '.repeat(width) + chars.v + '\n';
+ }
+
+ // Content lines
+ for (let line of lines) {
+ const paddedLine = line.padEnd(maxLength, ' ');
+ result += chars.v + ' '.repeat(padding) + paddedLine + ' '.repeat(padding) + chars.v + '\n';
+ }
+
+ // Padding rows below
+ for (let i = 0; i < padding - 1; i++) {
+ result += chars.v + ' '.repeat(width) + chars.v + '\n';
+ }
+
+ // Bottom border
+ result += chars.bl + chars.h.repeat(width) + chars.br;
+
+ return result;
+}
+
+// ASCII Art Templates
+function getASCIITemplate(templateName) {
+ const templates = {
+ 'arrow-right': `
+ ┌────────┐
+ │ │
+────► NEXT │
+ │ │
+ └────────┘`,
+ 'arrow-down': `
+ │
+ │
+ ▼
+ ┌──────┐
+ │ NEXT │
+ └──────┘`,
+ 'check': `
+ ✓ Task completed
+ ✓ All tests passed
+ ✓ Ready to deploy
+ ✓ Documentation updated`,
+ 'divider': `
+═══════════════════════════════════════════════════════════
+`,
+ 'header': `
+╔═══════════════════════════════════════════════════╗
+║ SECTION HEADER ║
+╚═══════════════════════════════════════════════════╝`,
+ 'flowchart': `
+┌─────────────┐
+│ START │
+└──────┬──────┘
+ │
+ ▼
+┌─────────────┐
+│ PROCESS │
+└──────┬──────┘
+ │
+ ┌───┴───┐
+ │ Check │
+ └───┬───┘
+ │
+ ┌───▼──┬──────┐
+ │ Yes │ No │
+ ▼ ▼ │
+┌────┐ ┌────┐ │
+│ A │ │ B │ │
+└─┬──┘ └─┬──┘ │
+ │ │ │
+ └──┬───┘ │
+ │◄──────────┘
+ ▼
+┌─────────────┐
+│ END │
+└─────────────┘`,
+ 'decision': `
+ ┌─────────┐
+ │ Check? │
+ └────┬────┘
+ │
+ ┌─────┴─────┐
+ │ │
+ Yes│ │No
+ ▼ ▼
+ ┌────────┐ ┌────────┐
+ │ True │ │ False │
+ └────────┘ └────────┘`,
+ 'sequence': `
+ User System Database
+ │ │ │
+ │ Request │ │
+ ├──────────►│ │
+ │ │ Query │
+ │ ├──────────►│
+ │ │ │
+ │ │ Result │
+ │ │◄──────────┤
+ │ Response │ │
+ │◄──────────┤ │
+ │ │ │`,
+ 'table-simple': `
+┌──────────┬──────────┬──────────┐
+│ Header 1 │ Header 2 │ Header 3 │
+├──────────┼──────────┼──────────┤
+│ Data 1 │ Data 2 │ Data 3 │
+├──────────┼──────────┼──────────┤
+│ Data 4 │ Data 5 │ Data 6 │
+└──────────┴──────────┴──────────┘`,
+ 'timeline': `
+ 2020 2021 2022 2023
+ │ │ │ │
+ ●───────────●───────────●───────────●
+ │ │ │ │
+ Start Milestone Release Current`,
+ 'network': `
+ ┌──────────┐
+ │ Server │
+ └────┬─────┘
+ │
+ ┌─────────┼─────────┐
+ │ │ │
+ ┌───▼───┐ ┌──▼────┐ ┌──▼────┐
+ │Client1│ │Client2│ │Client3│
+ └───────┘ └───────┘ └───────┘`,
+ 'hierarchy': `
+ ┌─────────┐
+ │ Root │
+ └────┬────┘
+ │
+ ┌────────┴────────┐
+ │ │
+┌───▼───┐ ┌───▼───┐
+│Child 1│ │Child 2│
+└───┬───┘ └───┬───┘
+ │ │
+┌───▼───┐ ┌───▼───┐
+│Grand 1│ │Grand 2│
+└───────┘ └───────┘`,
+ 'process-flow': `
+┌─────────┐ ┌─────────┐ ┌─────────┐
+│ Input │────►│Process 1│────►│ Output │
+└─────────┘ └────┬────┘ └─────────┘
+ │
+ ┌────▼────┐
+ │Process 2│
+ └─────────┘`,
+ 'note-box': `
+┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+┃ NOTE: ┃
+┃ This is an important note ┃
+┃ that requires attention! ┃
+┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛`,
+ 'warning-box': `
+╔════════════════════════════════════╗
+║ ⚠ WARNING ║
+║ Proceed with caution! ║
+╚════════════════════════════════════╝`,
+ 'info-box': `
+╭────────────────────────────────────╮
+│ ℹ Information │
+│ Additional context here │
+╰────────────────────────────────────╯`,
+ 'separator-fancy': `
+╭──────────────────────────────────────────────────────╮
+│ │
+╰──────────────────────────────────────────────────────╯`,
+ 'brackets': `
+【 Important Text 】`,
+ 'banner-stars': `
+************************************************************************
+* IMPORTANT BANNER *
+************************************************************************`,
+ 'progress-bar': `
+Progress: [████████████░░░░░░░░] 60%
+ 0% 100%`
+ };
+
+ return templates[templateName] || '';
+}
+
+function loadASCIITemplate(templateName) {
+ const template = getASCIITemplate(templateName);
+ document.getElementById('ascii-preview').textContent = template;
+}
+
+function insertASCIIArt() {
+ const asciiArt = document.getElementById('ascii-preview').textContent;
+
+ if (!asciiArt || asciiArt === 'Select a template from the buttons above') {
+ alert('Please generate ASCII art first');
+ return;
+ }
+
+ // Get active editor
+ const activeTabId = tabManager ? tabManager.activeTabId : 1;
+ const editor = document.getElementById(`editor-${activeTabId}`);
+
+ if (!editor) {
+ alert('No active editor found');
+ return;
+ }
+
+ // Insert in code block for proper rendering
+ const start = editor.selectionStart;
+ const before = editor.value.substring(0, start);
+ const after = editor.value.substring(editor.selectionEnd);
+
+ const codeBlock = '\n```\n' + asciiArt + '\n```\n';
+ editor.value = before + codeBlock + after;
+
+ // Update cursor position
+ editor.selectionStart = editor.selectionEnd = start + codeBlock.length;
+ editor.focus();
+
+ // Trigger update
+ if (tabManager) {
+ tabManager.handleEditorInput(activeTabId);
+ }
+
+ // Close dialog
+ hideASCIIGenerator();
+}
+
+// ASCII Art Event Listeners
+document.getElementById('ascii-dialog-close').addEventListener('click', hideASCIIGenerator);
+document.getElementById('ascii-cancel').addEventListener('click', hideASCIIGenerator);
+document.getElementById('ascii-generate').addEventListener('click', generateASCIIPreview);
+document.getElementById('ascii-insert').addEventListener('click', insertASCIIArt);
+
+// Mode switching
+document.getElementById('ascii-mode-text').addEventListener('click', () => switchASCIIMode('text'));
+document.getElementById('ascii-mode-box').addEventListener('click', () => switchASCIIMode('box'));
+document.getElementById('ascii-mode-templates').addEventListener('click', () => switchASCIIMode('templates'));
+
+// Auto-update preview for text mode
+document.getElementById('ascii-text-input').addEventListener('input', generateASCIIPreview);
+document.getElementById('ascii-font-style').addEventListener('change', generateASCIIPreview);
+
+// Auto-update preview for box mode
+document.getElementById('ascii-box-text').addEventListener('input', generateASCIIPreview);
+document.getElementById('ascii-box-style').addEventListener('change', generateASCIIPreview);
+document.getElementById('ascii-box-padding').addEventListener('input', generateASCIIPreview);
+
+// Template buttons
+document.querySelectorAll('.ascii-template-btn').forEach(btn => {
+ btn.addEventListener('click', function() {
+ const template = this.getAttribute('data-template');
+ loadASCIITemplate(template);
+ });
+});
+
+// Close dialog on backdrop click
+document.getElementById('ascii-art-dialog').addEventListener('click', (e) => {
+ if (e.target === document.getElementById('ascii-art-dialog')) {
+ hideASCIIGenerator();
+ }
+});
+
+// IPC listener for menu
+ipcRenderer.on('show-ascii-generator', () => {
+ showASCIIGenerator();
+});
+
+// ============================================================================
+// PANE RESIZING
+// ============================================================================
+
+let isResizing = false;
+let currentResizer = null;
+
+document.addEventListener('mousedown', (e) => {
+ if (e.target.classList.contains('pane-resizer')) {
+ isResizing = true;
+ currentResizer = e.target;
+ document.body.style.cursor = 'col-resize';
+ document.body.style.userSelect = 'none';
+ }
+});
+
+document.addEventListener('mousemove', (e) => {
+ if (!isResizing) return;
+
+ const container = currentResizer.parentElement;
+ const editorPane = currentResizer.previousElementSibling;
+ const previewPane = currentResizer.nextElementSibling;
+
+ const containerRect = container.getBoundingClientRect();
+ const containerWidth = containerRect.width;
+ const mouseX = e.clientX - containerRect.left;
+
+ // Calculate percentages (minimum 20%, maximum 80% for each pane)
+ let editorPercentage = (mouseX / containerWidth) * 100;
+ editorPercentage = Math.max(20, Math.min(80, editorPercentage));
+
+ const previewPercentage = 100 - editorPercentage;
+
+ editorPane.style.flex = `0 0 ${editorPercentage}%`;
+ previewPane.style.flex = `0 0 ${previewPercentage}%`;
+});
+
+document.addEventListener('mouseup', () => {
+ if (isResizing) {
+ isResizing = false;
+ currentResizer = null;
+ document.body.style.cursor = '';
+ document.body.style.userSelect = '';
+ }
+});
+
+// ============================================================================
+// PREVIEW POP-OUT
+// ============================================================================
+
+let popoutWindow = null;
+
+function popoutPreview(tabId) {
+ const previewContent = document.getElementById(`preview-${tabId}`);
+
+ if (!previewContent) {
+ alert('No preview content to pop out');
+ return;
+ }
+
+ // Close existing popout if open
+ if (popoutWindow && !popoutWindow.closed) {
+ popoutWindow.close();
+ }
+
+ // Create new window
+ popoutWindow = window.open('', 'Preview Window', 'width=800,height=600,menubar=no,toolbar=no,location=no,status=no');
+
+ if (!popoutWindow) {
+ alert('Pop-up blocked! Please allow pop-ups for this application.');
+ return;
+ }
+
+ // Write content to popout window
+ const htmlContent = `
+
+
+
+
+ ${previewContent.innerHTML}
+
+
+
+
+ `;
+
+ popoutWindow.document.write(htmlContent);
+ popoutWindow.document.close();
+
+ // Setup auto-update
+ setupPopoutAutoUpdate(tabId);
+}
+
+function getPreviewStyles() {
+ // Extract relevant preview styles
+ return `
+ h1, h2, h3, h4, h5, h6 {
+ margin-top: 24px;
+ margin-bottom: 16px;
+ font-weight: 600;
+ line-height: 1.25;
+ }
+ h1 {
+ font-size: 2em;
+ border-bottom: 1px solid #eaecef;
+ padding-bottom: 0.3em;
+ }
+ h2 {
+ font-size: 1.5em;
+ border-bottom: 1px solid #eaecef;
+ padding-bottom: 0.3em;
+ }
+ p {
+ margin-bottom: 16px;
+ }
+ code {
+ padding: 0.2em 0.4em;
+ margin: 0;
+ font-size: 85%;
+ background-color: #f6f8fa;
+ border: 1px solid #d0d7de;
+ border-radius: 6px;
+ font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+ }
+ pre {
+ padding: 16px;
+ overflow: auto;
+ font-size: 85%;
+ line-height: 1.45;
+ background-color: #f6f8fa;
+ border: 1px solid #d0d7de;
+ border-radius: 6px;
+ margin-bottom: 16px;
+ }
+ pre code {
+ background: transparent;
+ border: none;
+ padding: 0;
+ }
+ table {
+ border-collapse: collapse;
+ margin-bottom: 16px;
+ width: 100%;
+ }
+ table th, table td {
+ padding: 6px 13px;
+ border: 1px solid #dfe2e5;
+ }
+ table th {
+ font-weight: 600;
+ background-color: #f6f8fa;
+ }
+ a {
+ color: #0366d6;
+ text-decoration: none;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ blockquote {
+ padding: 0 1em;
+ color: #6a737d;
+ border-left: 0.25em solid #dfe2e5;
+ margin-bottom: 16px;
+ }
+ img {
+ max-width: 100%;
+ height: auto;
+ }
+ ul, ol {
+ padding-left: 2em;
+ margin-bottom: 16px;
+ }
+ li {
+ margin-bottom: 4px;
+ }
+ `;
+}
+
+function setupPopoutAutoUpdate(tabId) {
+ // Monitor for preview changes and update popout
+ const observer = new MutationObserver(() => {
+ if (popoutWindow && !popoutWindow.closed) {
+ const previewContent = document.getElementById(`preview-${tabId}`);
+ popoutWindow.postMessage({
+ type: 'preview-update',
+ content: previewContent.innerHTML
+ }, '*');
+ } else {
+ observer.disconnect();
+ }
+ });
+
+ const previewElement = document.getElementById(`preview-${tabId}`);
+ if (previewElement) {
+ observer.observe(previewElement, {
+ childList: true,
+ subtree: true,
+ characterData: true
+ });
+ }
+}
+
+// Pop-out button event listener
+document.addEventListener('click', (e) => {
+ if (e.target.classList.contains('preview-popout-btn')) {
+ const tabId = e.target.id.replace('preview-popout-', '');
+ popoutPreview(tabId);
+ }
+});
+
+// ============================================
+// Insert Content from Generator Windows
+// ============================================
+ipcRenderer.on('insert-content', (event, content) => {
+ if (tabManager) {
+ const activeTabId = tabManager.activeTabId;
+ const editor = document.getElementById(`editor-${activeTabId}`);
+ if (editor) {
+ const cursorPos = editor.selectionStart;
+ const textBefore = editor.value.substring(0, cursorPos);
+ const textAfter = editor.value.substring(cursorPos);
+
+ editor.value = textBefore + content + textAfter;
+ editor.focus();
+
+ const newPos = cursorPos + content.length;
+ editor.setSelectionRange(newPos, newPos);
+
+ // Update state and preview
+ tabManager.tabs.get(activeTabId).content = editor.value;
+ tabManager.tabs.get(activeTabId).modified = true;
+ tabManager.updatePreview(activeTabId);
+ tabManager.updateTabTitle(activeTabId);
+ }
+ }
+});
+
+// ============================================
+// PDF VIEWER FUNCTIONALITY
+// ============================================
+
+let pdfDoc = null;
+let pdfCurrentPage = 1;
+let pdfZoomLevel = 1.0;
+let pdfRotation = 0;
+let pdfFilePath = null;
+let isPdfViewerActive = false; // Track if PDF viewer is currently shown
+
+// Initialize PDF.js
+const pdfjsLib = require('pdfjs-dist');
+pdfjsLib.GlobalWorkerOptions.workerSrc = require.resolve('pdfjs-dist/build/pdf.worker.js');
+
+// Open PDF file
+async function openPdfFile(filePath) {
+ // Prevent multiple simultaneous PDF loads
+ if (isPdfViewerActive && pdfFilePath === filePath) {
+ console.log('PDF already open:', filePath);
+ return;
+ }
+
+ // Close any existing PDF first
+ if (pdfDoc) {
+ try {
+ await pdfDoc.destroy();
+ } catch (e) {
+ console.warn('Error destroying previous PDF:', e);
+ }
+ pdfDoc = null;
+ }
+
+ try {
+ // Show loading state
+ document.getElementById('status-text').textContent = 'Loading PDF...';
+
+ const loadingTask = pdfjsLib.getDocument(filePath);
+ pdfDoc = await loadingTask.promise;
+ pdfFilePath = filePath;
+ pdfCurrentPage = 1;
+ pdfZoomLevel = 1.0;
+ pdfRotation = 0;
+ isPdfViewerActive = true;
+
+ // Update UI
+ document.getElementById('pdf-total-pages').textContent = pdfDoc.numPages;
+ document.getElementById('pdf-page-input').value = 1;
+ document.getElementById('pdf-page-input').max = pdfDoc.numPages;
+ document.getElementById('pdf-filename').textContent = require('path').basename(filePath);
+ document.getElementById('pdf-zoom-level').textContent = '100%';
+
+ // Hide markdown toolbar, tabs, show PDF viewer
+ document.querySelector('.toolbar').classList.add('hidden');
+ document.getElementById('tab-bar').classList.add('hidden');
+ document.querySelectorAll('.tab-content').forEach(tc => tc.classList.add('hidden'));
+ document.getElementById('pdf-viewer-container').classList.remove('hidden');
+
+ // Render first page
+ await renderPdfPage(pdfCurrentPage);
+
+ // Update status
+ document.getElementById('status-text').textContent = `PDF: ${require('path').basename(filePath)} (${pdfDoc.numPages} pages)`;
+ } catch (error) {
+ console.error('Error loading PDF:', error);
+ isPdfViewerActive = false;
+ pdfDoc = null;
+ pdfFilePath = null;
+ document.getElementById('status-text').textContent = 'Error loading PDF';
+ alert('Error loading PDF: ' + error.message);
+ }
+}
+
+// Render PDF page
+async function renderPdfPage(pageNum) {
+ if (!pdfDoc) return;
+
+ try {
+ const page = await pdfDoc.getPage(pageNum);
+ const canvas = document.getElementById('pdf-canvas');
+ const ctx = canvas.getContext('2d');
+
+ // Calculate viewport with zoom and rotation
+ const viewport = page.getViewport({ scale: pdfZoomLevel, rotation: pdfRotation });
+
+ canvas.width = viewport.width;
+ canvas.height = viewport.height;
+
+ const renderContext = {
+ canvasContext: ctx,
+ viewport: viewport
+ };
+
+ await page.render(renderContext).promise;
+
+ // Update page input
+ document.getElementById('pdf-page-input').value = pageNum;
+ } catch (error) {
+ console.error('Error rendering PDF page:', error);
+ }
+}
+
+// PDF navigation handlers
+document.getElementById('pdf-prev-page')?.addEventListener('click', async () => {
+ if (pdfCurrentPage > 1) {
+ pdfCurrentPage--;
+ await renderPdfPage(pdfCurrentPage);
+ }
+});
+
+document.getElementById('pdf-next-page')?.addEventListener('click', async () => {
+ if (pdfDoc && pdfCurrentPage < pdfDoc.numPages) {
+ pdfCurrentPage++;
+ await renderPdfPage(pdfCurrentPage);
+ }
+});
+
+document.getElementById('pdf-page-input')?.addEventListener('change', async (e) => {
+ const pageNum = parseInt(e.target.value);
+ if (pdfDoc && pageNum >= 1 && pageNum <= pdfDoc.numPages) {
+ pdfCurrentPage = pageNum;
+ await renderPdfPage(pdfCurrentPage);
+ }
+});
+
+// PDF zoom handlers
+document.getElementById('pdf-zoom-out')?.addEventListener('click', async () => {
+ if (pdfZoomLevel > 0.25) {
+ pdfZoomLevel -= 0.25;
+ document.getElementById('pdf-zoom-level').textContent = Math.round(pdfZoomLevel * 100) + '%';
+ await renderPdfPage(pdfCurrentPage);
+ }
+});
+
+document.getElementById('pdf-zoom-in')?.addEventListener('click', async () => {
+ if (pdfZoomLevel < 4.0) {
+ pdfZoomLevel += 0.25;
+ document.getElementById('pdf-zoom-level').textContent = Math.round(pdfZoomLevel * 100) + '%';
+ await renderPdfPage(pdfCurrentPage);
+ }
+});
+
+document.getElementById('pdf-fit-width')?.addEventListener('click', async () => {
+ if (!pdfDoc) return;
+ const page = await pdfDoc.getPage(pdfCurrentPage);
+ const viewport = page.getViewport({ scale: 1, rotation: pdfRotation });
+ const containerWidth = document.getElementById('pdf-viewer').clientWidth - 40;
+ pdfZoomLevel = containerWidth / viewport.width;
+ document.getElementById('pdf-zoom-level').textContent = Math.round(pdfZoomLevel * 100) + '%';
+ await renderPdfPage(pdfCurrentPage);
+});
+
+document.getElementById('pdf-fit-page')?.addEventListener('click', async () => {
+ if (!pdfDoc) return;
+ const page = await pdfDoc.getPage(pdfCurrentPage);
+ const viewport = page.getViewport({ scale: 1, rotation: pdfRotation });
+ const container = document.getElementById('pdf-viewer');
+ const containerWidth = container.clientWidth - 40;
+ const containerHeight = container.clientHeight - 40;
+ const scaleX = containerWidth / viewport.width;
+ const scaleY = containerHeight / viewport.height;
+ pdfZoomLevel = Math.min(scaleX, scaleY);
+ document.getElementById('pdf-zoom-level').textContent = Math.round(pdfZoomLevel * 100) + '%';
+ await renderPdfPage(pdfCurrentPage);
+});
+
+// PDF rotation handlers
+document.getElementById('pdf-rotate-left')?.addEventListener('click', async () => {
+ pdfRotation = (pdfRotation - 90 + 360) % 360;
+ await renderPdfPage(pdfCurrentPage);
+});
+
+document.getElementById('pdf-rotate-right')?.addEventListener('click', async () => {
+ pdfRotation = (pdfRotation + 90) % 360;
+ await renderPdfPage(pdfCurrentPage);
+});
+
+// Close PDF viewer
+document.getElementById('pdf-close')?.addEventListener('click', () => {
+ closePdfViewer();
+});
+
+async function closePdfViewer() {
+ // Destroy PDF document to free memory
+ if (pdfDoc) {
+ try {
+ await pdfDoc.destroy();
+ } catch (e) {
+ console.warn('Error destroying PDF:', e);
+ }
+ }
+
+ pdfDoc = null;
+ pdfFilePath = null;
+ isPdfViewerActive = false;
+
+ // Hide PDF viewer
+ document.getElementById('pdf-viewer-container').classList.add('hidden');
+
+ // Show markdown tabs, tab bar, and toolbar
+ document.getElementById('tab-bar').classList.remove('hidden');
+ document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('hidden'));
+ document.querySelector('.toolbar').classList.remove('hidden');
+
+ // Activate the correct markdown tab
+ if (tabManager) {
+ const activeTab = document.querySelector(`.tab-content[data-tab-id="${tabManager.activeTabId}"]`);
+ if (activeTab) activeTab.classList.add('active');
+ // Refresh the active tab
+ tabManager.updatePreview(tabManager.activeTabId);
+ }
+
+ document.getElementById('status-text').textContent = 'Ready';
+}
+
+// Handle PDF file open from main process
+ipcRenderer.on('open-pdf-file', (event, filePath) => {
+ openPdfFile(filePath);
+});
+
+// ============================================
+// PDF EDITOR TOOLBAR BUTTONS
+// ============================================
+
+// Helper function to trigger PDF editor dialog
+function openPdfEditorDialog(operation) {
+ // Use the opened PDF file if available, otherwise prompt
+ if (pdfFilePath) {
+ ipcRenderer.send('show-pdf-editor-from-toolbar', { operation, filePath: pdfFilePath });
+ } else {
+ ipcRenderer.send('show-pdf-editor-from-toolbar', { operation, filePath: null });
+ }
+}
+
+// PDF Editor toolbar button handlers
+document.getElementById('pdf-tb-merge')?.addEventListener('click', () => {
+ openPdfEditorDialog('merge');
+});
+
+document.getElementById('pdf-tb-split')?.addEventListener('click', () => {
+ openPdfEditorDialog('split');
+});
+
+document.getElementById('pdf-tb-compress')?.addEventListener('click', () => {
+ openPdfEditorDialog('compress');
+});
+
+document.getElementById('pdf-tb-rotate')?.addEventListener('click', () => {
+ openPdfEditorDialog('rotate');
+});
+
+document.getElementById('pdf-tb-delete')?.addEventListener('click', () => {
+ openPdfEditorDialog('delete');
+});
+
+document.getElementById('pdf-tb-reorder')?.addEventListener('click', () => {
+ openPdfEditorDialog('reorder');
+});
+
+document.getElementById('pdf-tb-watermark')?.addEventListener('click', () => {
+ openPdfEditorDialog('watermark');
+});
+
+document.getElementById('pdf-tb-encrypt')?.addEventListener('click', () => {
+ openPdfEditorDialog('encrypt');
+});
+
+document.getElementById('pdf-tb-decrypt')?.addEventListener('click', () => {
+ openPdfEditorDialog('decrypt');
+});
+
+// ============================================
+// DYNAMIC PANE RESIZER
+// ============================================
+
+function initPaneResizer(tabId) {
+ const resizer = document.getElementById(`pane-resizer-${tabId}`);
+ const editorPane = document.getElementById(`editor-pane-${tabId}`);
+ const previewPane = document.getElementById(`preview-pane-${tabId}`);
+ const tabContent = document.getElementById(`tab-content-${tabId}`);
+
+ if (!resizer || !editorPane || !previewPane) return;
+
+ let isResizing = false;
+ let startX = 0;
+ let startEditorWidth = 0;
+
+ resizer.addEventListener('mousedown', (e) => {
+ isResizing = true;
+ startX = e.clientX;
+ startEditorWidth = editorPane.offsetWidth;
+ document.body.style.cursor = 'col-resize';
+ document.body.style.userSelect = 'none';
+ e.preventDefault();
+ });
+
+ document.addEventListener('mousemove', (e) => {
+ if (!isResizing) return;
+
+ const containerWidth = tabContent.offsetWidth;
+ const deltaX = e.clientX - startX;
+ let newEditorWidth = startEditorWidth + deltaX;
+
+ // Minimum widths
+ const minWidth = 150;
+ const maxWidth = containerWidth - minWidth - 6; // 6px for resizer
+
+ newEditorWidth = Math.max(minWidth, Math.min(maxWidth, newEditorWidth));
+
+ const editorPercent = (newEditorWidth / containerWidth) * 100;
+ const previewPercent = 100 - editorPercent - 1; // 1% for resizer
+
+ editorPane.style.flex = `0 0 ${editorPercent}%`;
+ previewPane.style.flex = `0 0 ${previewPercent}%`;
+ });
+
+ document.addEventListener('mouseup', () => {
+ if (isResizing) {
+ isResizing = false;
+ document.body.style.cursor = '';
+ document.body.style.userSelect = '';
+ }
+ });
+}
+
+// Initialize resizer for first tab
+document.addEventListener('DOMContentLoaded', () => {
+ initPaneResizer(1);
+});
+
+// ============================================
+// IMAGE/AUDIO/VIDEO CONVERTER HANDLERS
+// These require external tools (ImageMagick, FFmpeg)
+// ============================================
+
+ipcRenderer.on('show-image-tool', (event, tool) => {
+ alert(`Image ${tool} tool requires ImageMagick to be installed.\n\nPlease install ImageMagick from: https://imagemagick.org/\n\nThis feature will be available in a future update with built-in support.`);
+});
+
+ipcRenderer.on('show-audio-tool', (event, tool) => {
+ alert(`Audio ${tool} tool requires FFmpeg to be installed.\n\nPlease install FFmpeg from: https://ffmpeg.org/\n\nThis feature will be available in a future update with built-in support.`);
+});
+
+ipcRenderer.on('show-video-tool', (event, tool) => {
+ alert(`Video ${tool} tool requires FFmpeg to be installed.\n\nPlease install FFmpeg from: https://ffmpeg.org/\n\nThis feature will be available in a future update with built-in support.`);
+});
+
diff --git a/src/styles-concreteinfo.css b/src/styles-concreteinfo.css
index aa80553..cc5c2e2 100644
--- a/src/styles-concreteinfo.css
+++ b/src/styles-concreteinfo.css
@@ -1,969 +1,969 @@
-/**
- * ConcreteInfo Theme for MarkdownConverter
- * Based on logo palette: #464646, #9a9696, #e5461f, #e3e3e3, #0d0b09
- * Version: 3.0.0
- */
-
-/* ============================================
- CSS Variables - ConcreteInfo Theme
- ============================================ */
-:root {
- /* Primary Colors from Logo Palette */
- --ci-dark-gray: #464646;
- --ci-medium-gray: #9a9696;
- --ci-accent: #e5461f;
- --ci-light-gray: #e3e3e3;
- --ci-black: #0d0b09;
-
- /* Extended Palette */
- --ci-accent-hover: #c93a18;
- --ci-accent-light: rgba(229, 70, 31, 0.1);
- --ci-white: #ffffff;
- --ci-bg: #f5f5f5;
- --ci-border: #d0d0d0;
-
- /* Semantic Colors */
- --ci-success: #28a745;
- --ci-warning: #ffc107;
- --ci-danger: #dc3545;
- --ci-info: #17a2b8;
-
- /* Typography */
- --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
- --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-
- /* Spacing */
- --spacing-xs: 4px;
- --spacing-sm: 8px;
- --spacing-md: 16px;
- --spacing-lg: 24px;
- --spacing-xl: 32px;
-
- /* Border Radius */
- --radius-sm: 4px;
- --radius-md: 8px;
- --radius-lg: 12px;
- --radius-full: 9999px;
-
- /* Shadows */
- --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
- --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
- --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
- --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
-
- /* Transitions */
- --transition-fast: 150ms ease;
- --transition-normal: 250ms ease;
- --transition-slow: 350ms ease;
-}
-
-/* ============================================
- ConcreteInfo Theme Application
- ============================================ */
-body.theme-concreteinfo {
- background: var(--ci-bg);
- color: var(--ci-dark-gray);
-}
-
-body.theme-concreteinfo .toolbar {
- background: linear-gradient(135deg, var(--ci-dark-gray) 0%, var(--ci-black) 100%);
- border-bottom: 3px solid var(--ci-accent);
-}
-
-body.theme-concreteinfo .toolbar button {
- color: var(--ci-white);
- background: transparent;
- border: 1px solid transparent;
- transition: all var(--transition-fast);
-}
-
-body.theme-concreteinfo .toolbar button:hover {
- background: var(--ci-accent);
- border-color: var(--ci-accent);
- transform: translateY(-1px);
-}
-
-body.theme-concreteinfo .tab-bar {
- background: var(--ci-dark-gray);
- border-bottom: 2px solid var(--ci-accent);
-}
-
-body.theme-concreteinfo .tab {
- background: var(--ci-medium-gray);
- color: var(--ci-white);
- border: none;
- margin: 2px;
- border-radius: var(--radius-sm) var(--radius-sm) 0 0;
- transition: all var(--transition-fast);
-}
-
-body.theme-concreteinfo .tab:hover {
- background: var(--ci-accent-light);
-}
-
-body.theme-concreteinfo .tab.active {
- background: var(--ci-accent);
- color: var(--ci-white);
-}
-
-body.theme-concreteinfo .editor-textarea {
- background: var(--ci-white);
- color: var(--ci-black);
- border: 1px solid var(--ci-border);
- font-family: var(--font-mono);
-}
-
-body.theme-concreteinfo .preview-content {
- background: var(--ci-white);
- color: var(--ci-dark-gray);
- border-left: 3px solid var(--ci-accent);
-}
-
-body.theme-concreteinfo .status-bar {
- background: var(--ci-dark-gray);
- color: var(--ci-light-gray);
- border-top: 2px solid var(--ci-accent);
-}
-
-/* ============================================
- Modern Modal Styles
- ============================================ */
-.modal-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(13, 11, 9, 0.7);
- backdrop-filter: blur(4px);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 10000;
- opacity: 0;
- visibility: hidden;
- transition: all var(--transition-normal);
-}
-
-.modal-overlay.active {
- opacity: 1;
- visibility: visible;
-}
-
-.modal-content {
- background: var(--ci-white);
- border-radius: var(--radius-lg);
- box-shadow: var(--shadow-xl);
- max-width: 600px;
- width: 90%;
- max-height: 85vh;
- overflow: hidden;
- transform: scale(0.9) translateY(20px);
- transition: transform var(--transition-normal);
-}
-
-.modal-overlay.active .modal-content {
- transform: scale(1) translateY(0);
-}
-
-.modal-header {
- background: linear-gradient(135deg, var(--ci-dark-gray) 0%, var(--ci-black) 100%);
- color: var(--ci-white);
- padding: var(--spacing-md) var(--spacing-lg);
- display: flex;
- align-items: center;
- justify-content: space-between;
- border-bottom: 3px solid var(--ci-accent);
-}
-
-.modal-header h3 {
- margin: 0;
- font-size: 1.25rem;
- font-weight: 600;
- font-family: var(--font-sans);
-}
-
-.modal-close {
- background: transparent;
- border: none;
- color: var(--ci-white);
- font-size: 1.5rem;
- cursor: pointer;
- width: 32px;
- height: 32px;
- border-radius: var(--radius-full);
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all var(--transition-fast);
-}
-
-.modal-close:hover {
- background: var(--ci-accent);
- transform: rotate(90deg);
-}
-
-.modal-body {
- padding: var(--spacing-lg);
- overflow-y: auto;
- max-height: 60vh;
-}
-
-.modal-footer {
- padding: var(--spacing-md) var(--spacing-lg);
- background: var(--ci-light-gray);
- display: flex;
- justify-content: flex-end;
- gap: var(--spacing-sm);
- border-top: 1px solid var(--ci-border);
-}
-
-/* ============================================
- Button Styles
- ============================================ */
-.btn {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- gap: var(--spacing-xs);
- padding: var(--spacing-sm) var(--spacing-md);
- font-family: var(--font-sans);
- font-size: 0.875rem;
- font-weight: 500;
- border-radius: var(--radius-md);
- border: none;
- cursor: pointer;
- transition: all var(--transition-fast);
-}
-
-.btn-primary {
- background: var(--ci-accent);
- color: var(--ci-white);
-}
-
-.btn-primary:hover {
- background: var(--ci-accent-hover);
- transform: translateY(-1px);
- box-shadow: var(--shadow-md);
-}
-
-.btn-secondary {
- background: var(--ci-medium-gray);
- color: var(--ci-white);
-}
-
-.btn-secondary:hover {
- background: var(--ci-dark-gray);
-}
-
-.btn-outline {
- background: transparent;
- border: 2px solid var(--ci-accent);
- color: var(--ci-accent);
-}
-
-.btn-outline:hover {
- background: var(--ci-accent);
- color: var(--ci-white);
-}
-
-.btn-ghost {
- background: transparent;
- color: var(--ci-dark-gray);
-}
-
-.btn-ghost:hover {
- background: var(--ci-light-gray);
-}
-
-/* ============================================
- Form Controls
- ============================================ */
-.form-group {
- margin-bottom: var(--spacing-md);
-}
-
-.form-label {
- display: block;
- margin-bottom: var(--spacing-xs);
- font-weight: 500;
- color: var(--ci-dark-gray);
- font-size: 0.875rem;
-}
-
-.form-input,
-.form-select {
- width: 100%;
- padding: var(--spacing-sm) var(--spacing-md);
- font-family: var(--font-sans);
- font-size: 0.875rem;
- border: 2px solid var(--ci-border);
- border-radius: var(--radius-md);
- background: var(--ci-white);
- color: var(--ci-dark-gray);
- transition: all var(--transition-fast);
-}
-
-.form-input:focus,
-.form-select:focus {
- outline: none;
- border-color: var(--ci-accent);
- box-shadow: 0 0 0 3px var(--ci-accent-light);
-}
-
-.form-input::placeholder {
- color: var(--ci-medium-gray);
-}
-
-/* ============================================
- App Header with Logo
- ============================================ */
-.app-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 6px 16px;
- background: #ffffff;
- border-bottom: 2px solid #e1e4e8;
- min-height: 36px;
-}
-
-.app-header-left {
- display: flex;
- align-items: center;
- gap: 12px;
-}
-
-.app-header-right {
- display: flex;
- align-items: center;
- gap: 12px;
-}
-
-.app-logo {
- height: 22px;
- width: auto;
-}
-
-.app-title {
- color: #24292e;
- font-size: 0.95rem;
- font-weight: 600;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-}
-
-.app-version {
- color: #6a737d;
- font-size: 0.7rem;
- font-family: 'SFMono-Regular', Consolas, monospace;
-}
-
-/* Dark theme header adjustments */
-body.theme-dark .app-header,
-body.theme-dracula .app-header,
-body.theme-onedark .app-header,
-body.theme-tokyonight .app-header,
-body.theme-monokai .app-header,
-body.theme-cobalt2 .app-header,
-body.theme-gruvbox-dark .app-header,
-body.theme-ayu-dark .app-header,
-body.theme-ayu-mirage .app-header,
-body.theme-palenight .app-header,
-body.theme-oceanic-next .app-header,
-body.theme-nord .app-header,
-body.theme-concrete-dark .app-header {
- background: #1f2937;
- border-bottom-color: #374151;
-}
-
-body.theme-dark .app-title,
-body.theme-dracula .app-title,
-body.theme-onedark .app-title,
-body.theme-tokyonight .app-title,
-body.theme-monokai .app-title,
-body.theme-cobalt2 .app-title,
-body.theme-gruvbox-dark .app-title,
-body.theme-ayu-dark .app-title,
-body.theme-ayu-mirage .app-title,
-body.theme-palenight .app-title,
-body.theme-oceanic-next .app-title,
-body.theme-nord .app-title,
-body.theme-concrete-dark .app-title {
- color: #f3f4f6;
-}
-
-body.theme-dark .app-version,
-body.theme-dracula .app-version,
-body.theme-onedark .app-version,
-body.theme-tokyonight .app-version,
-body.theme-monokai .app-version,
-body.theme-cobalt2 .app-version,
-body.theme-gruvbox-dark .app-version,
-body.theme-ayu-dark .app-version,
-body.theme-ayu-mirage .app-version,
-body.theme-palenight .app-version,
-body.theme-oceanic-next .app-version,
-body.theme-nord .app-version,
-body.theme-concrete-dark .app-version {
- color: #9ca3af;
-}
-
-body.theme-dark .app-logo,
-body.theme-dracula .app-logo,
-body.theme-onedark .app-logo,
-body.theme-tokyonight .app-logo,
-body.theme-monokai .app-logo,
-body.theme-cobalt2 .app-logo,
-body.theme-gruvbox-dark .app-logo,
-body.theme-ayu-dark .app-logo,
-body.theme-ayu-mirage .app-logo,
-body.theme-palenight .app-logo,
-body.theme-oceanic-next .app-logo,
-body.theme-nord .app-logo,
-body.theme-concrete-dark .app-logo {
- filter: none;
-}
-
-/* ============================================
- Converter Cards
- ============================================ */
-.converter-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- gap: var(--spacing-md);
- padding: var(--spacing-md);
-}
-
-.converter-card {
- background: var(--ci-white);
- border-radius: var(--radius-lg);
- padding: var(--spacing-lg);
- text-align: center;
- border: 2px solid var(--ci-border);
- transition: all var(--transition-fast);
- cursor: pointer;
-}
-
-.converter-card:hover {
- border-color: var(--ci-accent);
- transform: translateY(-4px);
- box-shadow: var(--shadow-lg);
-}
-
-.converter-card-icon {
- font-size: 2.5rem;
- margin-bottom: var(--spacing-md);
-}
-
-.converter-card-title {
- font-weight: 600;
- color: var(--ci-dark-gray);
- margin-bottom: var(--spacing-xs);
-}
-
-.converter-card-desc {
- font-size: 0.875rem;
- color: var(--ci-medium-gray);
-}
-
-/* ============================================
- Progress Bar
- ============================================ */
-.progress-bar {
- height: 8px;
- background: var(--ci-light-gray);
- border-radius: var(--radius-full);
- overflow: hidden;
-}
-
-.progress-fill {
- height: 100%;
- background: linear-gradient(90deg, var(--ci-accent) 0%, var(--ci-accent-hover) 100%);
- border-radius: var(--radius-full);
- transition: width var(--transition-normal);
-}
-
-/* ============================================
- File Drop Zone
- ============================================ */
-.drop-zone {
- border: 2px dashed var(--ci-border);
- border-radius: var(--radius-lg);
- padding: var(--spacing-xl);
- text-align: center;
- transition: all var(--transition-fast);
- cursor: pointer;
-}
-
-.drop-zone:hover,
-.drop-zone.drag-over {
- border-color: var(--ci-accent);
- background: var(--ci-accent-light);
-}
-
-.drop-zone-icon {
- font-size: 3rem;
- color: var(--ci-medium-gray);
- margin-bottom: var(--spacing-md);
-}
-
-.drop-zone-text {
- color: var(--ci-dark-gray);
- font-weight: 500;
-}
-
-.drop-zone-hint {
- color: var(--ci-medium-gray);
- font-size: 0.875rem;
- margin-top: var(--spacing-xs);
-}
-
-/* ============================================
- Syntax Highlighting for Editor
- ============================================ */
-.editor-syntax .md-heading {
- color: var(--ci-accent);
- font-weight: bold;
-}
-
-.editor-syntax .md-bold {
- color: var(--ci-dark-gray);
- font-weight: bold;
-}
-
-.editor-syntax .md-italic {
- color: var(--ci-dark-gray);
- font-style: italic;
-}
-
-.editor-syntax .md-code {
- background: var(--ci-light-gray);
- color: var(--ci-accent);
- font-family: var(--font-mono);
- padding: 2px 4px;
- border-radius: var(--radius-sm);
-}
-
-.editor-syntax .md-link {
- color: var(--ci-info);
- text-decoration: underline;
-}
-
-.editor-syntax .md-list {
- color: var(--ci-accent);
-}
-
-.editor-syntax .md-blockquote {
- color: var(--ci-medium-gray);
- border-left: 3px solid var(--ci-accent);
- padding-left: var(--spacing-md);
-}
-
-/* ============================================
- ASCII Art Generator Styles
- ============================================ */
-.ascii-preview {
- font-family: var(--font-mono);
- font-size: 12px;
- line-height: 1.2;
- background: var(--ci-black);
- color: #00ff00;
- padding: var(--spacing-md);
- border-radius: var(--radius-md);
- overflow-x: auto;
- white-space: pre;
-}
-
-.ascii-controls {
- display: flex;
- flex-wrap: wrap;
- gap: var(--spacing-sm);
- margin-bottom: var(--spacing-md);
-}
-
-/* ============================================
- Table Generator Styles
- ============================================ */
-.table-generator-grid {
- display: grid;
- gap: 1px;
- background: var(--ci-border);
- border: 1px solid var(--ci-border);
- border-radius: var(--radius-md);
- overflow: hidden;
-}
-
-.table-generator-cell {
- background: var(--ci-white);
- padding: var(--spacing-sm);
- min-width: 80px;
- min-height: 32px;
-}
-
-.table-generator-cell input {
- width: 100%;
- border: none;
- background: transparent;
- text-align: center;
- font-family: var(--font-mono);
-}
-
-.table-generator-cell.header {
- background: var(--ci-light-gray);
- font-weight: 600;
-}
-
-/* ============================================
- PDF Viewer/Editor Styles
- ============================================ */
-.pdf-viewer {
- background: var(--ci-dark-gray);
- padding: var(--spacing-md);
- border-radius: var(--radius-md);
- min-height: 400px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.pdf-page {
- background: var(--ci-white);
- box-shadow: var(--shadow-lg);
- max-width: 100%;
-}
-
-.pdf-toolbar {
- display: flex;
- align-items: center;
- gap: var(--spacing-sm);
- padding: var(--spacing-sm);
- background: var(--ci-light-gray);
- border-radius: var(--radius-md);
- margin-bottom: var(--spacing-md);
-}
-
-/* ============================================
- Dark Mode for ConcreteInfo Theme
- ============================================ */
-body.theme-concreteinfo-dark {
- --ci-bg: #1a1a1a;
- --ci-white: #2a2a2a;
- --ci-light-gray: #3a3a3a;
- --ci-border: #4a4a4a;
-}
-
-body.theme-concreteinfo-dark .editor-textarea,
-body.theme-concreteinfo-dark .preview-content {
- background: #2a2a2a;
- color: #e0e0e0;
-}
-
-body.theme-concreteinfo-dark .modal-content {
- background: #2a2a2a;
- color: #e0e0e0;
-}
-
-body.theme-concreteinfo-dark .modal-body {
- background: #2a2a2a;
-}
-
-body.theme-concreteinfo-dark .modal-footer {
- background: #1a1a1a;
-}
-
-/* ============================================
- Animations
- ============================================ */
-@keyframes fadeIn {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-@keyframes slideUp {
- from { transform: translateY(20px); opacity: 0; }
- to { transform: translateY(0); opacity: 1; }
-}
-
-@keyframes pulse {
- 0%, 100% { transform: scale(1); }
- 50% { transform: scale(1.05); }
-}
-
-.animate-fade-in {
- animation: fadeIn var(--transition-normal);
-}
-
-.animate-slide-up {
- animation: slideUp var(--transition-normal);
-}
-
-.animate-pulse {
- animation: pulse 2s infinite;
-}
-
-/* ============================================
- Responsive Design
- ============================================ */
-@media (max-width: 768px) {
- .modal-content {
- width: 95%;
- max-height: 90vh;
- }
-
- .converter-grid {
- grid-template-columns: 1fr;
- }
-
- .app-header {
- flex-wrap: wrap;
- }
-}
-
-/* ============================================
- Concrete Dark Theme
- ============================================ */
-body.theme-concrete-dark {
- background: #1a1a1a;
- color: #e3e3e3;
-}
-
-body.theme-concrete-dark .toolbar {
- background: linear-gradient(135deg, #0d0b09 0%, #1a1a1a 100%);
- border-bottom: 3px solid #e5461f;
-}
-
-body.theme-concrete-dark .toolbar button {
- color: #e3e3e3;
-}
-
-body.theme-concrete-dark .toolbar button:hover {
- background: #e5461f;
-}
-
-body.theme-concrete-dark .tab-bar {
- background: #0d0b09;
- border-bottom: 2px solid #e5461f;
-}
-
-body.theme-concrete-dark .tab {
- background: #2a2a2a;
- color: #e3e3e3;
- border-radius: 4px 4px 0 0;
-}
-
-body.theme-concrete-dark .tab.active {
- background: #464646;
- border-bottom: 2px solid #e5461f;
-}
-
-body.theme-concrete-dark .editor-textarea,
-body.theme-concrete-dark .editor-pane {
- background: #1a1a1a;
- color: #e3e3e3;
-}
-
-body.theme-concrete-dark .preview-content {
- background: #1a1a1a;
- color: #e3e3e3;
-}
-
-body.theme-concrete-dark .status-bar {
- background: #0d0b09;
- color: #9a9696;
- border-top: 1px solid #464646;
-}
-
-body.theme-concrete-dark .export-dialog-content,
-body.theme-concrete-dark .batch-dialog-content {
- background: #2a2a2a;
- color: #e3e3e3;
-}
-
-body.theme-concrete-dark .export-dialog-header,
-body.theme-concrete-dark .batch-dialog-header {
- background: #1a1a1a;
- border-bottom: 2px solid #e5461f;
-}
-
-body.theme-concrete-dark .export-dialog-footer,
-body.theme-concrete-dark .batch-dialog-footer {
- background: #1a1a1a;
-}
-
-body.theme-concrete-dark input,
-body.theme-concrete-dark select,
-body.theme-concrete-dark textarea {
- background: #1a1a1a;
- color: #e3e3e3;
- border-color: #464646;
-}
-
-body.theme-concrete-dark input:focus,
-body.theme-concrete-dark select:focus,
-body.theme-concrete-dark textarea:focus {
- border-color: #e5461f;
-}
-
-body.theme-concrete-dark .line-numbers {
- background: #0d0b09;
- color: #9a9696;
-}
-
-/* ============================================
- Concrete Light Theme
- ============================================ */
-body.theme-concrete-light {
- background: #f5f5f5;
- color: #464646;
-}
-
-body.theme-concrete-light .toolbar {
- background: #ffffff;
- border-bottom: 3px solid #e5461f;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-body.theme-concrete-light .toolbar button {
- color: #464646;
-}
-
-body.theme-concrete-light .toolbar button:hover {
- background: #e5461f;
- color: #ffffff;
-}
-
-body.theme-concrete-light .tab-bar {
- background: #ffffff;
- border-bottom: 2px solid #e3e3e3;
-}
-
-body.theme-concrete-light .tab {
- background: #f5f5f5;
- color: #464646;
- border-radius: 4px 4px 0 0;
-}
-
-body.theme-concrete-light .tab.active {
- background: #ffffff;
- border-bottom: 2px solid #e5461f;
- color: #e5461f;
-}
-
-body.theme-concrete-light .editor-textarea,
-body.theme-concrete-light .editor-pane {
- background: #ffffff;
- color: #464646;
-}
-
-body.theme-concrete-light .preview-content {
- background: #ffffff;
- color: #464646;
-}
-
-body.theme-concrete-light .status-bar {
- background: #ffffff;
- color: #9a9696;
- border-top: 1px solid #e3e3e3;
-}
-
-body.theme-concrete-light .export-dialog-content,
-body.theme-concrete-light .batch-dialog-content {
- background: #ffffff;
- color: #464646;
-}
-
-body.theme-concrete-light .export-dialog-header,
-body.theme-concrete-light .batch-dialog-header {
- background: #f5f5f5;
- border-bottom: 2px solid #e5461f;
-}
-
-body.theme-concrete-light .line-numbers {
- background: #f5f5f5;
- color: #9a9696;
-}
-
-/* ============================================
- Concrete Warm Theme
- ============================================ */
-body.theme-concrete-warm {
- background: #faf8f5;
- color: #464646;
-}
-
-body.theme-concrete-warm .toolbar {
- background: linear-gradient(135deg, #464646 0%, #5a5a5a 100%);
- border-bottom: 3px solid #e5461f;
-}
-
-body.theme-concrete-warm .toolbar button {
- color: #faf8f5;
-}
-
-body.theme-concrete-warm .toolbar button:hover {
- background: #e5461f;
-}
-
-body.theme-concrete-warm .tab-bar {
- background: #464646;
- border-bottom: 2px solid #e5461f;
-}
-
-body.theme-concrete-warm .tab {
- background: #6a6a6a;
- color: #faf8f5;
- border-radius: 4px 4px 0 0;
-}
-
-body.theme-concrete-warm .tab.active {
- background: #faf8f5;
- color: #e5461f;
- border-bottom: 2px solid #e5461f;
-}
-
-body.theme-concrete-warm .editor-textarea,
-body.theme-concrete-warm .editor-pane {
- background: #faf8f5;
- color: #464646;
-}
-
-body.theme-concrete-warm .preview-content {
- background: #faf8f5;
- color: #464646;
-}
-
-body.theme-concrete-warm .status-bar {
- background: #f0ebe4;
- color: #9a9696;
- border-top: 1px solid #e3e3e3;
-}
-
-body.theme-concrete-warm .export-dialog-content,
-body.theme-concrete-warm .batch-dialog-content {
- background: #faf8f5;
- color: #464646;
-}
-
-body.theme-concrete-warm .export-dialog-header,
-body.theme-concrete-warm .batch-dialog-header {
- background: #f0ebe4;
- border-bottom: 2px solid #e5461f;
-}
-
-body.theme-concrete-warm h1,
-body.theme-concrete-warm h2,
-body.theme-concrete-warm h3,
-body.theme-concrete-warm h4,
-body.theme-concrete-warm h5,
-body.theme-concrete-warm h6 {
- color: #e5461f;
-}
-
-body.theme-concrete-warm a {
- color: #e5461f;
-}
-
-body.theme-concrete-warm .line-numbers {
- background: #f0ebe4;
- color: #9a9696;
-}
+/**
+ * ConcreteInfo Theme for MarkdownConverter
+ * Based on logo palette: #464646, #9a9696, #e5461f, #e3e3e3, #0d0b09
+ * Version: 3.0.0
+ */
+
+/* ============================================
+ CSS Variables - ConcreteInfo Theme
+ ============================================ */
+:root {
+ /* Primary Colors from Logo Palette */
+ --ci-dark-gray: #464646;
+ --ci-medium-gray: #9a9696;
+ --ci-accent: #e5461f;
+ --ci-light-gray: #e3e3e3;
+ --ci-black: #0d0b09;
+
+ /* Extended Palette */
+ --ci-accent-hover: #c93a18;
+ --ci-accent-light: rgba(229, 70, 31, 0.1);
+ --ci-white: #ffffff;
+ --ci-bg: #f5f5f5;
+ --ci-border: #d0d0d0;
+
+ /* Semantic Colors */
+ --ci-success: #28a745;
+ --ci-warning: #ffc107;
+ --ci-danger: #dc3545;
+ --ci-info: #17a2b8;
+
+ /* Typography */
+ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+ --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+
+ /* Spacing */
+ --spacing-xs: 4px;
+ --spacing-sm: 8px;
+ --spacing-md: 16px;
+ --spacing-lg: 24px;
+ --spacing-xl: 32px;
+
+ /* Border Radius */
+ --radius-sm: 4px;
+ --radius-md: 8px;
+ --radius-lg: 12px;
+ --radius-full: 9999px;
+
+ /* Shadows */
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+ --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
+
+ /* Transitions */
+ --transition-fast: 150ms ease;
+ --transition-normal: 250ms ease;
+ --transition-slow: 350ms ease;
+}
+
+/* ============================================
+ ConcreteInfo Theme Application
+ ============================================ */
+body.theme-concreteinfo {
+ background: var(--ci-bg);
+ color: var(--ci-dark-gray);
+}
+
+body.theme-concreteinfo .toolbar {
+ background: linear-gradient(135deg, var(--ci-dark-gray) 0%, var(--ci-black) 100%);
+ border-bottom: 3px solid var(--ci-accent);
+}
+
+body.theme-concreteinfo .toolbar button {
+ color: var(--ci-white);
+ background: transparent;
+ border: 1px solid transparent;
+ transition: all var(--transition-fast);
+}
+
+body.theme-concreteinfo .toolbar button:hover {
+ background: var(--ci-accent);
+ border-color: var(--ci-accent);
+ transform: translateY(-1px);
+}
+
+body.theme-concreteinfo .tab-bar {
+ background: var(--ci-dark-gray);
+ border-bottom: 2px solid var(--ci-accent);
+}
+
+body.theme-concreteinfo .tab {
+ background: var(--ci-medium-gray);
+ color: var(--ci-white);
+ border: none;
+ margin: 2px;
+ border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+ transition: all var(--transition-fast);
+}
+
+body.theme-concreteinfo .tab:hover {
+ background: var(--ci-accent-light);
+}
+
+body.theme-concreteinfo .tab.active {
+ background: var(--ci-accent);
+ color: var(--ci-white);
+}
+
+body.theme-concreteinfo .editor-textarea {
+ background: var(--ci-white);
+ color: var(--ci-black);
+ border: 1px solid var(--ci-border);
+ font-family: var(--font-mono);
+}
+
+body.theme-concreteinfo .preview-content {
+ background: var(--ci-white);
+ color: var(--ci-dark-gray);
+ border-left: 3px solid var(--ci-accent);
+}
+
+body.theme-concreteinfo .status-bar {
+ background: var(--ci-dark-gray);
+ color: var(--ci-light-gray);
+ border-top: 2px solid var(--ci-accent);
+}
+
+/* ============================================
+ Modern Modal Styles
+ ============================================ */
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(13, 11, 9, 0.7);
+ backdrop-filter: blur(4px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+ opacity: 0;
+ visibility: hidden;
+ transition: all var(--transition-normal);
+}
+
+.modal-overlay.active {
+ opacity: 1;
+ visibility: visible;
+}
+
+.modal-content {
+ background: var(--ci-white);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-xl);
+ max-width: 600px;
+ width: 90%;
+ max-height: 85vh;
+ overflow: hidden;
+ transform: scale(0.9) translateY(20px);
+ transition: transform var(--transition-normal);
+}
+
+.modal-overlay.active .modal-content {
+ transform: scale(1) translateY(0);
+}
+
+.modal-header {
+ background: linear-gradient(135deg, var(--ci-dark-gray) 0%, var(--ci-black) 100%);
+ color: var(--ci-white);
+ padding: var(--spacing-md) var(--spacing-lg);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 3px solid var(--ci-accent);
+}
+
+.modal-header h3 {
+ margin: 0;
+ font-size: 1.25rem;
+ font-weight: 600;
+ font-family: var(--font-sans);
+}
+
+.modal-close {
+ background: transparent;
+ border: none;
+ color: var(--ci-white);
+ font-size: 1.5rem;
+ cursor: pointer;
+ width: 32px;
+ height: 32px;
+ border-radius: var(--radius-full);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all var(--transition-fast);
+}
+
+.modal-close:hover {
+ background: var(--ci-accent);
+ transform: rotate(90deg);
+}
+
+.modal-body {
+ padding: var(--spacing-lg);
+ overflow-y: auto;
+ max-height: 60vh;
+}
+
+.modal-footer {
+ padding: var(--spacing-md) var(--spacing-lg);
+ background: var(--ci-light-gray);
+ display: flex;
+ justify-content: flex-end;
+ gap: var(--spacing-sm);
+ border-top: 1px solid var(--ci-border);
+}
+
+/* ============================================
+ Button Styles
+ ============================================ */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--spacing-xs);
+ padding: var(--spacing-sm) var(--spacing-md);
+ font-family: var(--font-sans);
+ font-size: 0.875rem;
+ font-weight: 500;
+ border-radius: var(--radius-md);
+ border: none;
+ cursor: pointer;
+ transition: all var(--transition-fast);
+}
+
+.btn-primary {
+ background: var(--ci-accent);
+ color: var(--ci-white);
+}
+
+.btn-primary:hover {
+ background: var(--ci-accent-hover);
+ transform: translateY(-1px);
+ box-shadow: var(--shadow-md);
+}
+
+.btn-secondary {
+ background: var(--ci-medium-gray);
+ color: var(--ci-white);
+}
+
+.btn-secondary:hover {
+ background: var(--ci-dark-gray);
+}
+
+.btn-outline {
+ background: transparent;
+ border: 2px solid var(--ci-accent);
+ color: var(--ci-accent);
+}
+
+.btn-outline:hover {
+ background: var(--ci-accent);
+ color: var(--ci-white);
+}
+
+.btn-ghost {
+ background: transparent;
+ color: var(--ci-dark-gray);
+}
+
+.btn-ghost:hover {
+ background: var(--ci-light-gray);
+}
+
+/* ============================================
+ Form Controls
+ ============================================ */
+.form-group {
+ margin-bottom: var(--spacing-md);
+}
+
+.form-label {
+ display: block;
+ margin-bottom: var(--spacing-xs);
+ font-weight: 500;
+ color: var(--ci-dark-gray);
+ font-size: 0.875rem;
+}
+
+.form-input,
+.form-select {
+ width: 100%;
+ padding: var(--spacing-sm) var(--spacing-md);
+ font-family: var(--font-sans);
+ font-size: 0.875rem;
+ border: 2px solid var(--ci-border);
+ border-radius: var(--radius-md);
+ background: var(--ci-white);
+ color: var(--ci-dark-gray);
+ transition: all var(--transition-fast);
+}
+
+.form-input:focus,
+.form-select:focus {
+ outline: none;
+ border-color: var(--ci-accent);
+ box-shadow: 0 0 0 3px var(--ci-accent-light);
+}
+
+.form-input::placeholder {
+ color: var(--ci-medium-gray);
+}
+
+/* ============================================
+ App Header with Logo
+ ============================================ */
+.app-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 6px 16px;
+ background: #ffffff;
+ border-bottom: 2px solid #e1e4e8;
+ min-height: 36px;
+}
+
+.app-header-left {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.app-header-right {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.app-logo {
+ height: 22px;
+ width: auto;
+}
+
+.app-title {
+ color: #24292e;
+ font-size: 0.95rem;
+ font-weight: 600;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+}
+
+.app-version {
+ color: #6a737d;
+ font-size: 0.7rem;
+ font-family: 'SFMono-Regular', Consolas, monospace;
+}
+
+/* Dark theme header adjustments */
+body.theme-dark .app-header,
+body.theme-dracula .app-header,
+body.theme-onedark .app-header,
+body.theme-tokyonight .app-header,
+body.theme-monokai .app-header,
+body.theme-cobalt2 .app-header,
+body.theme-gruvbox-dark .app-header,
+body.theme-ayu-dark .app-header,
+body.theme-ayu-mirage .app-header,
+body.theme-palenight .app-header,
+body.theme-oceanic-next .app-header,
+body.theme-nord .app-header,
+body.theme-concrete-dark .app-header {
+ background: #1f2937;
+ border-bottom-color: #374151;
+}
+
+body.theme-dark .app-title,
+body.theme-dracula .app-title,
+body.theme-onedark .app-title,
+body.theme-tokyonight .app-title,
+body.theme-monokai .app-title,
+body.theme-cobalt2 .app-title,
+body.theme-gruvbox-dark .app-title,
+body.theme-ayu-dark .app-title,
+body.theme-ayu-mirage .app-title,
+body.theme-palenight .app-title,
+body.theme-oceanic-next .app-title,
+body.theme-nord .app-title,
+body.theme-concrete-dark .app-title {
+ color: #f3f4f6;
+}
+
+body.theme-dark .app-version,
+body.theme-dracula .app-version,
+body.theme-onedark .app-version,
+body.theme-tokyonight .app-version,
+body.theme-monokai .app-version,
+body.theme-cobalt2 .app-version,
+body.theme-gruvbox-dark .app-version,
+body.theme-ayu-dark .app-version,
+body.theme-ayu-mirage .app-version,
+body.theme-palenight .app-version,
+body.theme-oceanic-next .app-version,
+body.theme-nord .app-version,
+body.theme-concrete-dark .app-version {
+ color: #9ca3af;
+}
+
+body.theme-dark .app-logo,
+body.theme-dracula .app-logo,
+body.theme-onedark .app-logo,
+body.theme-tokyonight .app-logo,
+body.theme-monokai .app-logo,
+body.theme-cobalt2 .app-logo,
+body.theme-gruvbox-dark .app-logo,
+body.theme-ayu-dark .app-logo,
+body.theme-ayu-mirage .app-logo,
+body.theme-palenight .app-logo,
+body.theme-oceanic-next .app-logo,
+body.theme-nord .app-logo,
+body.theme-concrete-dark .app-logo {
+ filter: none;
+}
+
+/* ============================================
+ Converter Cards
+ ============================================ */
+.converter-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: var(--spacing-md);
+ padding: var(--spacing-md);
+}
+
+.converter-card {
+ background: var(--ci-white);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-lg);
+ text-align: center;
+ border: 2px solid var(--ci-border);
+ transition: all var(--transition-fast);
+ cursor: pointer;
+}
+
+.converter-card:hover {
+ border-color: var(--ci-accent);
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-lg);
+}
+
+.converter-card-icon {
+ font-size: 2.5rem;
+ margin-bottom: var(--spacing-md);
+}
+
+.converter-card-title {
+ font-weight: 600;
+ color: var(--ci-dark-gray);
+ margin-bottom: var(--spacing-xs);
+}
+
+.converter-card-desc {
+ font-size: 0.875rem;
+ color: var(--ci-medium-gray);
+}
+
+/* ============================================
+ Progress Bar
+ ============================================ */
+.progress-bar {
+ height: 8px;
+ background: var(--ci-light-gray);
+ border-radius: var(--radius-full);
+ overflow: hidden;
+}
+
+.progress-fill {
+ height: 100%;
+ background: linear-gradient(90deg, var(--ci-accent) 0%, var(--ci-accent-hover) 100%);
+ border-radius: var(--radius-full);
+ transition: width var(--transition-normal);
+}
+
+/* ============================================
+ File Drop Zone
+ ============================================ */
+.drop-zone {
+ border: 2px dashed var(--ci-border);
+ border-radius: var(--radius-lg);
+ padding: var(--spacing-xl);
+ text-align: center;
+ transition: all var(--transition-fast);
+ cursor: pointer;
+}
+
+.drop-zone:hover,
+.drop-zone.drag-over {
+ border-color: var(--ci-accent);
+ background: var(--ci-accent-light);
+}
+
+.drop-zone-icon {
+ font-size: 3rem;
+ color: var(--ci-medium-gray);
+ margin-bottom: var(--spacing-md);
+}
+
+.drop-zone-text {
+ color: var(--ci-dark-gray);
+ font-weight: 500;
+}
+
+.drop-zone-hint {
+ color: var(--ci-medium-gray);
+ font-size: 0.875rem;
+ margin-top: var(--spacing-xs);
+}
+
+/* ============================================
+ Syntax Highlighting for Editor
+ ============================================ */
+.editor-syntax .md-heading {
+ color: var(--ci-accent);
+ font-weight: bold;
+}
+
+.editor-syntax .md-bold {
+ color: var(--ci-dark-gray);
+ font-weight: bold;
+}
+
+.editor-syntax .md-italic {
+ color: var(--ci-dark-gray);
+ font-style: italic;
+}
+
+.editor-syntax .md-code {
+ background: var(--ci-light-gray);
+ color: var(--ci-accent);
+ font-family: var(--font-mono);
+ padding: 2px 4px;
+ border-radius: var(--radius-sm);
+}
+
+.editor-syntax .md-link {
+ color: var(--ci-info);
+ text-decoration: underline;
+}
+
+.editor-syntax .md-list {
+ color: var(--ci-accent);
+}
+
+.editor-syntax .md-blockquote {
+ color: var(--ci-medium-gray);
+ border-left: 3px solid var(--ci-accent);
+ padding-left: var(--spacing-md);
+}
+
+/* ============================================
+ ASCII Art Generator Styles
+ ============================================ */
+.ascii-preview {
+ font-family: var(--font-mono);
+ font-size: 12px;
+ line-height: 1.2;
+ background: var(--ci-black);
+ color: #00ff00;
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ overflow-x: auto;
+ white-space: pre;
+}
+
+.ascii-controls {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--spacing-sm);
+ margin-bottom: var(--spacing-md);
+}
+
+/* ============================================
+ Table Generator Styles
+ ============================================ */
+.table-generator-grid {
+ display: grid;
+ gap: 1px;
+ background: var(--ci-border);
+ border: 1px solid var(--ci-border);
+ border-radius: var(--radius-md);
+ overflow: hidden;
+}
+
+.table-generator-cell {
+ background: var(--ci-white);
+ padding: var(--spacing-sm);
+ min-width: 80px;
+ min-height: 32px;
+}
+
+.table-generator-cell input {
+ width: 100%;
+ border: none;
+ background: transparent;
+ text-align: center;
+ font-family: var(--font-mono);
+}
+
+.table-generator-cell.header {
+ background: var(--ci-light-gray);
+ font-weight: 600;
+}
+
+/* ============================================
+ PDF Viewer/Editor Styles
+ ============================================ */
+.pdf-viewer {
+ background: var(--ci-dark-gray);
+ padding: var(--spacing-md);
+ border-radius: var(--radius-md);
+ min-height: 400px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.pdf-page {
+ background: var(--ci-white);
+ box-shadow: var(--shadow-lg);
+ max-width: 100%;
+}
+
+.pdf-toolbar {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-sm);
+ padding: var(--spacing-sm);
+ background: var(--ci-light-gray);
+ border-radius: var(--radius-md);
+ margin-bottom: var(--spacing-md);
+}
+
+/* ============================================
+ Dark Mode for ConcreteInfo Theme
+ ============================================ */
+body.theme-concreteinfo-dark {
+ --ci-bg: #1a1a1a;
+ --ci-white: #2a2a2a;
+ --ci-light-gray: #3a3a3a;
+ --ci-border: #4a4a4a;
+}
+
+body.theme-concreteinfo-dark .editor-textarea,
+body.theme-concreteinfo-dark .preview-content {
+ background: #2a2a2a;
+ color: #e0e0e0;
+}
+
+body.theme-concreteinfo-dark .modal-content {
+ background: #2a2a2a;
+ color: #e0e0e0;
+}
+
+body.theme-concreteinfo-dark .modal-body {
+ background: #2a2a2a;
+}
+
+body.theme-concreteinfo-dark .modal-footer {
+ background: #1a1a1a;
+}
+
+/* ============================================
+ Animations
+ ============================================ */
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes slideUp {
+ from { transform: translateY(20px); opacity: 0; }
+ to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes pulse {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.05); }
+}
+
+.animate-fade-in {
+ animation: fadeIn var(--transition-normal);
+}
+
+.animate-slide-up {
+ animation: slideUp var(--transition-normal);
+}
+
+.animate-pulse {
+ animation: pulse 2s infinite;
+}
+
+/* ============================================
+ Responsive Design
+ ============================================ */
+@media (max-width: 768px) {
+ .modal-content {
+ width: 95%;
+ max-height: 90vh;
+ }
+
+ .converter-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .app-header {
+ flex-wrap: wrap;
+ }
+}
+
+/* ============================================
+ Concrete Dark Theme
+ ============================================ */
+body.theme-concrete-dark {
+ background: #1a1a1a;
+ color: #e3e3e3;
+}
+
+body.theme-concrete-dark .toolbar {
+ background: linear-gradient(135deg, #0d0b09 0%, #1a1a1a 100%);
+ border-bottom: 3px solid #e5461f;
+}
+
+body.theme-concrete-dark .toolbar button {
+ color: #e3e3e3;
+}
+
+body.theme-concrete-dark .toolbar button:hover {
+ background: #e5461f;
+}
+
+body.theme-concrete-dark .tab-bar {
+ background: #0d0b09;
+ border-bottom: 2px solid #e5461f;
+}
+
+body.theme-concrete-dark .tab {
+ background: #2a2a2a;
+ color: #e3e3e3;
+ border-radius: 4px 4px 0 0;
+}
+
+body.theme-concrete-dark .tab.active {
+ background: #464646;
+ border-bottom: 2px solid #e5461f;
+}
+
+body.theme-concrete-dark .editor-textarea,
+body.theme-concrete-dark .editor-pane {
+ background: #1a1a1a;
+ color: #e3e3e3;
+}
+
+body.theme-concrete-dark .preview-content {
+ background: #1a1a1a;
+ color: #e3e3e3;
+}
+
+body.theme-concrete-dark .status-bar {
+ background: #0d0b09;
+ color: #9a9696;
+ border-top: 1px solid #464646;
+}
+
+body.theme-concrete-dark .export-dialog-content,
+body.theme-concrete-dark .batch-dialog-content {
+ background: #2a2a2a;
+ color: #e3e3e3;
+}
+
+body.theme-concrete-dark .export-dialog-header,
+body.theme-concrete-dark .batch-dialog-header {
+ background: #1a1a1a;
+ border-bottom: 2px solid #e5461f;
+}
+
+body.theme-concrete-dark .export-dialog-footer,
+body.theme-concrete-dark .batch-dialog-footer {
+ background: #1a1a1a;
+}
+
+body.theme-concrete-dark input,
+body.theme-concrete-dark select,
+body.theme-concrete-dark textarea {
+ background: #1a1a1a;
+ color: #e3e3e3;
+ border-color: #464646;
+}
+
+body.theme-concrete-dark input:focus,
+body.theme-concrete-dark select:focus,
+body.theme-concrete-dark textarea:focus {
+ border-color: #e5461f;
+}
+
+body.theme-concrete-dark .line-numbers {
+ background: #0d0b09;
+ color: #9a9696;
+}
+
+/* ============================================
+ Concrete Light Theme
+ ============================================ */
+body.theme-concrete-light {
+ background: #f5f5f5;
+ color: #464646;
+}
+
+body.theme-concrete-light .toolbar {
+ background: #ffffff;
+ border-bottom: 3px solid #e5461f;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+body.theme-concrete-light .toolbar button {
+ color: #464646;
+}
+
+body.theme-concrete-light .toolbar button:hover {
+ background: #e5461f;
+ color: #ffffff;
+}
+
+body.theme-concrete-light .tab-bar {
+ background: #ffffff;
+ border-bottom: 2px solid #e3e3e3;
+}
+
+body.theme-concrete-light .tab {
+ background: #f5f5f5;
+ color: #464646;
+ border-radius: 4px 4px 0 0;
+}
+
+body.theme-concrete-light .tab.active {
+ background: #ffffff;
+ border-bottom: 2px solid #e5461f;
+ color: #e5461f;
+}
+
+body.theme-concrete-light .editor-textarea,
+body.theme-concrete-light .editor-pane {
+ background: #ffffff;
+ color: #464646;
+}
+
+body.theme-concrete-light .preview-content {
+ background: #ffffff;
+ color: #464646;
+}
+
+body.theme-concrete-light .status-bar {
+ background: #ffffff;
+ color: #9a9696;
+ border-top: 1px solid #e3e3e3;
+}
+
+body.theme-concrete-light .export-dialog-content,
+body.theme-concrete-light .batch-dialog-content {
+ background: #ffffff;
+ color: #464646;
+}
+
+body.theme-concrete-light .export-dialog-header,
+body.theme-concrete-light .batch-dialog-header {
+ background: #f5f5f5;
+ border-bottom: 2px solid #e5461f;
+}
+
+body.theme-concrete-light .line-numbers {
+ background: #f5f5f5;
+ color: #9a9696;
+}
+
+/* ============================================
+ Concrete Warm Theme
+ ============================================ */
+body.theme-concrete-warm {
+ background: #faf8f5;
+ color: #464646;
+}
+
+body.theme-concrete-warm .toolbar {
+ background: linear-gradient(135deg, #464646 0%, #5a5a5a 100%);
+ border-bottom: 3px solid #e5461f;
+}
+
+body.theme-concrete-warm .toolbar button {
+ color: #faf8f5;
+}
+
+body.theme-concrete-warm .toolbar button:hover {
+ background: #e5461f;
+}
+
+body.theme-concrete-warm .tab-bar {
+ background: #464646;
+ border-bottom: 2px solid #e5461f;
+}
+
+body.theme-concrete-warm .tab {
+ background: #6a6a6a;
+ color: #faf8f5;
+ border-radius: 4px 4px 0 0;
+}
+
+body.theme-concrete-warm .tab.active {
+ background: #faf8f5;
+ color: #e5461f;
+ border-bottom: 2px solid #e5461f;
+}
+
+body.theme-concrete-warm .editor-textarea,
+body.theme-concrete-warm .editor-pane {
+ background: #faf8f5;
+ color: #464646;
+}
+
+body.theme-concrete-warm .preview-content {
+ background: #faf8f5;
+ color: #464646;
+}
+
+body.theme-concrete-warm .status-bar {
+ background: #f0ebe4;
+ color: #9a9696;
+ border-top: 1px solid #e3e3e3;
+}
+
+body.theme-concrete-warm .export-dialog-content,
+body.theme-concrete-warm .batch-dialog-content {
+ background: #faf8f5;
+ color: #464646;
+}
+
+body.theme-concrete-warm .export-dialog-header,
+body.theme-concrete-warm .batch-dialog-header {
+ background: #f0ebe4;
+ border-bottom: 2px solid #e5461f;
+}
+
+body.theme-concrete-warm h1,
+body.theme-concrete-warm h2,
+body.theme-concrete-warm h3,
+body.theme-concrete-warm h4,
+body.theme-concrete-warm h5,
+body.theme-concrete-warm h6 {
+ color: #e5461f;
+}
+
+body.theme-concrete-warm a {
+ color: #e5461f;
+}
+
+body.theme-concrete-warm .line-numbers {
+ background: #f0ebe4;
+ color: #9a9696;
+}
diff --git a/src/styles-modern.css b/src/styles-modern.css
index 52445b2..1a57a53 100644
--- a/src/styles-modern.css
+++ b/src/styles-modern.css
@@ -1,2113 +1,2113 @@
-/* ========================================
- PanConverter v1.7.1 - Modern UI
- Glassmorphism, Gradients & Animations
- ======================================== */
-
-/* Modern Color Palette */
-:root {
- /* Primary Brand Colors - Purple-Blue Gradient */
- --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- --primary-light: #8b9aff;
- --primary-dark: #5661b3;
-
- /* Accent Colors */
- --accent-green: #10b981;
- --accent-blue: #3b82f6;
- --accent-purple: #8b5cf6;
- --accent-pink: #ec4899;
-
- /* Neutral Colors */
- --gray-50: #f9fafb;
- --gray-100: #f3f4f6;
- --gray-200: #e5e7eb;
- --gray-300: #d1d5db;
- --gray-400: #9ca3af;
- --gray-500: #6b7280;
- --gray-600: #4b5563;
- --gray-700: #374151;
- --gray-800: #1f2937;
- --gray-900: #111827;
-
- /* Glassmorphism */
- --glass-bg: rgba(255, 255, 255, 0.7);
- --glass-border: rgba(255, 255, 255, 0.18);
- --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
-
- /* Effects */
- --blur-amount: 10px;
- --transition-speed: 0.3s;
- --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Reset & Base */
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
- overflow: hidden;
- height: 100vh;
- /* Background controlled by themes - do not set here */
- color: var(--gray-900);
-}
-
-@keyframes gradientShift {
- 0% { background-position: 0% 50%; }
- 50% { background-position: 100% 50%; }
- 100% { background-position: 0% 50%; }
-}
-
-.container {
- display: flex;
- flex-direction: column;
- height: 100vh;
- padding: 4px 8px;
- gap: 2px;
-}
-
-/* Glass Container for main content */
-.main-content-glass {
- background: var(--glass-bg);
- backdrop-filter: blur(var(--blur-amount));
- -webkit-backdrop-filter: blur(var(--blur-amount));
- border: 1px solid var(--glass-border);
- border-radius: 20px;
- box-shadow: var(--glass-shadow);
- overflow: hidden;
- flex: 1;
- display: flex;
- flex-direction: column;
-}
-
-/* Tab Bar - Modern Glassmorphism */
-.tab-bar {
- display: flex;
- align-items: center;
- background: rgba(255, 255, 255, 0.5);
- backdrop-filter: blur(10px);
- border-bottom: 1px solid rgba(0, 0, 0, 0.08);
- padding: 4px 8px;
- min-height: 36px;
- gap: 4px;
- border-radius: 8px;
-}
-
-.tab {
- display: flex;
- align-items: center;
- padding: 8px 16px;
- background: rgba(255, 255, 255, 0.3);
- backdrop-filter: blur(8px);
- border: 1px solid rgba(255, 255, 255, 0.3);
- border-radius: 12px;
- margin-right: 4px;
- cursor: pointer;
- user-select: none;
- max-width: 200px;
- min-width: 120px;
- transition: all var(--transition-speed) var(--transition-ease);
- transform: translateY(0);
-}
-
-.tab:hover {
- background: rgba(0, 0, 0, 0.05);
-}
-
-.tab.active {
- background: #ffffff;
- color: #24292e;
- border-bottom: 2px solid #0366d6;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.tab-title {
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 13px;
- font-weight: 500;
-}
-
-.tab-close {
- background: rgba(255, 255, 255, 0.2);
- border: none;
- font-size: 14px;
- font-weight: bold;
- cursor: pointer;
- padding: 4px;
- margin-left: 8px;
- width: 20px;
- height: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 6px;
- color: currentColor;
- transition: all var(--transition-speed) var(--transition-ease);
-}
-
-.tab-close:hover {
- background: rgba(255, 255, 255, 0.4);
- transform: rotate(90deg);
-}
-
-.new-tab-button {
- background: rgba(255, 255, 255, 0.3);
- backdrop-filter: blur(8px);
- border: 1px solid rgba(255, 255, 255, 0.3);
- border-radius: 10px;
- padding: 8px 16px;
- cursor: pointer;
- font-size: 14px;
- font-weight: 500;
- color: var(--gray-700);
- transition: all var(--transition-speed) var(--transition-ease);
- display: flex;
- align-items: center;
- gap: 6px;
-}
-
-.new-tab-button:hover {
- background: rgba(255, 255, 255, 0.5);
- transform: scale(1.05);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-/* Toolbar - Modern Gradient Buttons */
-.toolbar {
- display: flex;
- align-items: center;
- padding: 4px 8px;
- background: rgba(255, 255, 255, 0.4);
- backdrop-filter: blur(10px);
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
- gap: 2px;
- border-radius: 8px;
-}
-
-.toolbar button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 32px;
- height: 32px;
- border: 1px solid transparent;
- background: transparent;
- border-radius: 6px;
- cursor: pointer;
- transition: all 0.15s ease;
- color: #586069;
-}
-
-.toolbar button:hover {
- background: rgba(0, 0, 0, 0.06);
- color: #24292e;
-}
-
-.toolbar button:active {
- background: rgba(0, 0, 0, 0.1);
- transform: scale(0.95);
-}
-
-.toolbar-separator {
- width: 1px;
- height: 24px;
- background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4), transparent);
- margin: 0 8px;
-}
-
-/* Tab Content */
-.tab-content {
- display: flex;
- flex: 1;
- overflow: hidden;
-}
-
-.tab-content:not(.active) {
- display: none;
-}
-
-/* Editor Container */
-.editor-container {
- display: flex;
- flex: 1;
- overflow: hidden;
- background: rgba(255, 255, 255, 0.3);
- backdrop-filter: blur(10px);
- border-radius: 0 0 20px 20px;
-}
-
-.pane {
- flex: 1;
- overflow: auto;
- min-width: 0;
-}
-
-.pane:first-child {
- border-right: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-/* Custom Scrollbar */
-.pane::-webkit-scrollbar,
-.editor-textarea::-webkit-scrollbar {
- width: 10px;
- height: 10px;
-}
-
-.pane::-webkit-scrollbar-track,
-.editor-textarea::-webkit-scrollbar-track {
- background: rgba(255, 255, 255, 0.1);
- border-radius: 10px;
-}
-
-.pane::-webkit-scrollbar-thumb,
-.editor-textarea::-webkit-scrollbar-thumb {
- background: rgba(0, 0, 0, 0.25);
- border-radius: 10px;
- border: 2px solid rgba(255, 255, 255, 0.2);
-}
-
-.pane::-webkit-scrollbar-thumb:hover,
-.editor-textarea::-webkit-scrollbar-thumb:hover {
- background: rgba(0, 0, 0, 0.4);
-}
-
-.editor-textarea {
- width: 100%;
- height: 100%;
- padding: 24px;
- font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace;
- font-size: 15px;
- line-height: 1.7;
- border: none;
- outline: none;
- resize: none;
- background: transparent;
- /* Color controlled by theme */
-}
-
-.pane:last-child {
- padding: 0;
- /* Background controlled by theme */
-}
-
-.preview-content {
- max-width: none;
- margin: 0;
- padding: 24px 32px;
- line-height: 1.8;
- font-size: 15px;
- /* Color controlled by theme */
-}
-
-/* Status Bar */
-.status-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 8px 20px;
- /* Background and color controlled by theme */
- font-size: 12px;
- font-weight: 500;
-}
-
-/* Preview Styles - Modern Typography */
-.preview-content h1, .preview-content h2, .preview-content h3 {
- /* Color controlled by theme */
- font-weight: 700;
- margin-top: 28px;
- margin-bottom: 16px;
- line-height: 1.3;
-}
-
-.preview-content h1 {
- font-size: 2.5em;
- border-bottom: 3px solid #e1e4e8;
- padding-bottom: 12px;
-}
-
-.preview-content h2 {
- font-size: 2em;
- border-bottom: 2px solid #e1e4e8;
- padding-bottom: 10px;
-}
-
-.preview-content p {
- margin-bottom: 18px;
- line-height: 1.8;
-}
-
-.preview-content code {
- padding: 3px 8px;
- margin: 0 2px;
- font-size: 90%;
- background: rgba(175, 184, 193, 0.2);
- border: 1px solid #e1e4e8;
- border-radius: 6px;
- font-family: 'JetBrains Mono', 'Fira Code', monospace;
- font-weight: 500;
-}
-
-.preview-content pre {
- padding: 20px;
- overflow-x: auto;
- font-size: 14px;
- line-height: 1.6;
- background: #f6f8fa;
- border: 1px solid #e1e4e8;
- border-radius: 12px;
- margin-bottom: 20px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-}
-
-.preview-content pre code {
- background: transparent;
- border: none;
- padding: 0;
- margin: 0;
-}
-
-.preview-content blockquote {
- padding: 16px 20px;
- color: var(--gray-700);
- border-left: 4px solid #e1e4e8;
- margin-bottom: 20px;
- background: #f6f8fa;
- border-radius: 0 8px 8px 0;
- font-style: italic;
-}
-
-.preview-content a {
- color: #0366d6;
- text-decoration: none;
- font-weight: 600;
- position: relative;
- transition: color var(--transition-speed);
-}
-
-.preview-content a::after {
- content: '';
- position: absolute;
- left: 0;
- bottom: -2px;
- width: 0;
- height: 2px;
- background: #0366d6;
- transition: width var(--transition-speed) var(--transition-ease);
-}
-
-.preview-content a:hover {
- color: #0366d6;
-}
-
-.preview-content a:hover::after {
- width: 100%;
-}
-
-.preview-content table {
- border-collapse: separate;
- border-spacing: 0;
- margin-bottom: 20px;
- width: 100%;
- border-radius: 12px;
- overflow: hidden;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-}
-
-.preview-content table th,
-.preview-content table td {
- padding: 12px 16px;
- border: 1px solid #e1e4e8;
-}
-
-.preview-content table th {
- font-weight: 600;
- background: #f0f0f0;
- color: #333333;
-}
-
-.preview-content table tr:nth-child(even) {
- background: rgba(255, 255, 255, 0.5);
-}
-
-/* Modern Dialogs */
-.export-dialog,
-.batch-dialog,
-.find-dialog-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.4);
- backdrop-filter: blur(8px);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
- animation: fadeIn 0.3s var(--transition-ease);
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-.export-dialog.hidden,
-.batch-dialog.hidden {
- display: none;
-}
-
-.export-dialog-content,
-.batch-dialog-content {
- background: rgba(255, 255, 255, 0.95);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.3);
- border-radius: 20px;
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
- width: 90%;
- max-width: 650px;
- max-height: 90vh;
- overflow-y: auto;
- animation: slideUpFade 0.4s var(--transition-ease);
-}
-
-@keyframes slideUpFade {
- from {
- opacity: 0;
- transform: translateY(30px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-.export-dialog-header,
-.batch-dialog-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 20px 24px;
- border-bottom: 1px solid #e1e4e8;
- background: #24292e;
- border-radius: 20px 20px 0 0;
-}
-
-.export-dialog-header h3,
-.batch-dialog-header h3 {
- margin: 0;
- font-size: 20px;
- font-weight: 700;
- color: white;
-}
-
-.export-dialog-body,
-.batch-dialog-body {
- padding: 24px;
-}
-
-.export-section,
-.batch-section {
- margin-bottom: 20px;
-}
-
-.export-section label,
-.batch-section label {
- display: block;
- font-weight: 600;
- margin-bottom: 8px;
- color: var(--gray-700);
- font-size: 14px;
-}
-
-.export-section select,
-.export-section input,
-.batch-section select,
-.batch-section input {
- width: 100%;
- padding: 10px 14px;
- border: 2px solid #e1e4e8;
- border-radius: 10px;
- font-size: 14px;
- background: rgba(255, 255, 255, 0.8);
- backdrop-filter: blur(5px);
- transition: all var(--transition-speed) var(--transition-ease);
-}
-
-.export-section select:focus,
-.export-section input:focus,
-.batch-section select:focus,
-.batch-section input:focus {
- outline: none;
- border-color: #0366d6;
- box-shadow: 0 0 0 4px rgba(3, 102, 214, 0.1);
- background: white;
-}
-
-/* Modern Buttons */
-.export-dialog-footer,
-.batch-dialog-footer {
- display: flex;
- justify-content: flex-end;
- gap: 12px;
- padding: 20px 24px;
- border-top: 1px solid #e1e4e8;
- background: #f6f8fa;
- border-radius: 0 0 20px 20px;
-}
-
-.export-dialog-footer button,
-.batch-dialog-footer button,
-.folder-input-group button {
- padding: 10px 24px;
- border: none;
- border-radius: 10px;
- cursor: pointer;
- font-size: 14px;
- font-weight: 600;
- transition: all var(--transition-speed) var(--transition-ease);
- position: relative;
- overflow: hidden;
-}
-
-.export-dialog-footer button.primary,
-.batch-dialog-footer button.primary {
- background: #2ea44f;
- color: white;
- box-shadow: 0 4px 12px rgba(46, 164, 79, 0.3);
-}
-
-.export-dialog-footer button.primary:hover,
-.batch-dialog-footer button.primary:hover {
- transform: translateY(-2px);
- background: #22863a;
- box-shadow: 0 6px 20px rgba(34, 134, 58, 0.4);
-}
-
-.export-dialog-footer button:not(.primary),
-.batch-dialog-footer button:not(.primary),
-.folder-input-group button {
- background: #fafbfc;
- color: var(--gray-700);
- border: 1px solid #e1e4e8;
-}
-
-.export-dialog-footer button:not(.primary):hover,
-.batch-dialog-footer button:not(.primary):hover,
-.folder-input-group button:hover {
- background: #f3f4f6;
- border-color: #d0d7de;
- transform: translateY(-2px);
-}
-
-/* Find Dialog - Floating Modern */
-.find-dialog {
- position: absolute;
- top: 70px;
- right: 24px;
- background: rgba(255, 255, 255, 0.95);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.3);
- border-radius: 16px;
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
- z-index: 1000;
- min-width: 420px;
- padding: 16px;
- animation: slideInRight 0.3s var(--transition-ease);
-}
-
-@keyframes slideInRight {
- from {
- opacity: 0;
- transform: translateX(30px);
- }
- to {
- opacity: 1;
- transform: translateX(0);
- }
-}
-
-.find-dialog.hidden {
- display: none;
-}
-
-/* Progress Bars - Modern Gradient */
-.progress-bar {
- width: 100%;
- height: 8px;
- background: #e1e4e8;
- border-radius: 10px;
- overflow: hidden;
- margin-bottom: 12px;
-}
-
-.progress-fill {
- height: 100%;
- background: #2ea44f;
- transition: width 0.4s var(--transition-ease);
- width: 0%;
- position: relative;
- overflow: hidden;
-}
-
-.progress-fill::after {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: linear-gradient(90deg,
- transparent,
- rgba(255, 255, 255, 0.3),
- transparent
- );
- animation: shimmer 2s infinite;
-}
-
-@keyframes shimmer {
- 0% {
- transform: translateX(-100%);
- }
- 100% {
- transform: translateX(100%);
- }
-}
-
-/* Auto-save Indicator - Modern */
-.auto-save-indicator {
- position: fixed;
- top: 24px;
- right: 24px;
- background: #2ea44f;
- color: white;
- padding: 10px 20px;
- border-radius: 12px;
- font-size: 13px;
- font-weight: 600;
- z-index: 10000;
- box-shadow: 0 4px 20px rgba(46, 164, 79, 0.3);
- animation: slideInRight 0.3s ease-out;
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.auto-save-indicator::before {
- content: '✓';
- display: inline-block;
- width: 18px;
- height: 18px;
- background: white;
- color: #2ea44f;
- border-radius: 50%;
- font-size: 12px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: bold;
-}
-
-/* Enhanced Statistics - Modern */
-.enhanced-stats {
- font-size: 11px;
- color: var(--gray-600);
- padding: 2px 0;
- margin-left: 16px;
- font-family: 'JetBrains Mono', monospace;
- font-weight: 500;
-}
-
-/* Line Numbers - Modern */
-.line-numbers {
- min-width: 50px;
- padding: 12px 8px;
- background: rgba(255, 255, 255, 0.3);
- backdrop-filter: blur(8px);
- border-right: 1px solid #e1e4e8;
- font-family: 'JetBrains Mono', monospace;
- font-size: 13px;
- line-height: 1.7;
- color: var(--gray-500);
- text-align: right;
- user-select: none;
- overflow: hidden;
-}
-
-.line-numbers.hidden {
- display: none;
-}
-
-/* Animations & Transitions */
-.toolbar button,
-.tab,
-.new-tab-button,
-.export-dialog-footer button,
-.batch-dialog-footer button {
- position: relative;
- overflow: hidden;
-}
-
-.toolbar button::before,
-.tab::before,
-.new-tab-button::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- width: 0;
- height: 0;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.4);
- transform: translate(-50%, -50%);
- transition: width 0.6s, height 0.6s;
-}
-
-.toolbar button:hover::before,
-.tab:hover::before,
-.new-tab-button:hover::before {
- width: 200px;
- height: 200px;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
- .container {
- padding: 8px;
- gap: 8px;
- }
-
- .export-dialog-content,
- .batch-dialog-content {
- max-width: 95%;
- }
-
- .find-dialog {
- right: 12px;
- min-width: 320px;
- }
-}
-
-/* Hide default elements */
-.pane.hidden {
- display: none;
-}
-
-.pane.full-width {
- border-right: none;
-}
-
-/* ========================================
- Dynamic Pane Resizer
- Draggable splitter between editor/preview
- ======================================== */
-
-.pane-resizer {
- width: 6px;
- background: linear-gradient(to right, #e1e4e8, #d0d7de, #e1e4e8);
- cursor: col-resize;
- position: relative;
- flex-shrink: 0;
- transition: background 0.2s ease;
- border-radius: 3px;
-}
-
-.pane-resizer:hover {
- background: linear-gradient(to right, #0366d6, #0366d6, #0366d6);
-}
-
-.pane-resizer:active {
- background: #0366d6;
-}
-
-.pane-resizer::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 2px;
- height: 30px;
- background: rgba(0, 0, 0, 0.2);
- border-radius: 1px;
-}
-
-.pane-resizer:hover::before {
- background: rgba(255, 255, 255, 0.8);
-}
-
-/* Dark theme resizer */
-body.theme-dark .pane-resizer,
-body.theme-one-dark .pane-resizer,
-body.theme-dracula .pane-resizer,
-body.theme-nord .pane-resizer,
-body.theme-tokyo-night .pane-resizer,
-body.theme-palenight .pane-resizer,
-body.theme-ayu-dark .pane-resizer,
-body.theme-ayu-mirage .pane-resizer,
-body.theme-oceanic-next .pane-resizer,
-body.theme-gruvbox-dark .pane-resizer,
-body.theme-cobalt2 .pane-resizer {
- background: linear-gradient(to right, #333, #444, #333);
-}
-
-body.theme-dark .pane-resizer:hover,
-body.theme-one-dark .pane-resizer:hover,
-body.theme-dracula .pane-resizer:hover {
- background: #61afef;
-}
-
-/* ========================================
- PDF Viewer Styles
- Full-featured PDF reader
- ======================================== */
-
-.pdf-viewer-container {
- display: flex;
- flex-direction: column;
- width: 100%;
- height: 100%;
- background: #525659;
-}
-
-.pdf-viewer-container.hidden {
- display: none;
-}
-
-.pdf-viewer-toolbar {
- display: flex;
- align-items: center;
- gap: 8px;
- padding: 8px 12px;
- background: #323639;
- border-bottom: 1px solid #1a1a1a;
- flex-shrink: 0;
-}
-
-.pdf-viewer-toolbar button {
- background: #474a4d;
- border: 1px solid #5a5d60;
- border-radius: 4px;
- color: #fff;
- padding: 6px 10px;
- cursor: pointer;
- font-size: 14px;
- transition: all 0.15s ease;
-}
-
-.pdf-viewer-toolbar button:hover {
- background: #5a5d60;
-}
-
-.pdf-viewer-toolbar button:active {
- background: #0366d6;
-}
-
-.pdf-toolbar-separator {
- width: 1px;
- height: 24px;
- background: #5a5d60;
- margin: 0 4px;
-}
-
-#pdf-page-info {
- color: #fff;
- font-size: 13px;
- display: flex;
- align-items: center;
- gap: 4px;
-}
-
-#pdf-page-input {
- width: 50px;
- padding: 4px 6px;
- border: 1px solid #5a5d60;
- border-radius: 4px;
- background: #474a4d;
- color: #fff;
- text-align: center;
- font-size: 13px;
-}
-
-#pdf-zoom-level {
- color: #fff;
- font-size: 13px;
- min-width: 50px;
- text-align: center;
-}
-
-.pdf-filename {
- color: #aaa;
- font-size: 12px;
- flex: 1;
- text-align: right;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- margin-right: 8px;
-}
-
-#pdf-close {
- background: #c0392b !important;
- border-color: #e74c3c !important;
-}
-
-#pdf-close:hover {
- background: #e74c3c !important;
-}
-
-/* PDF Editor Toolbar Buttons */
-.pdf-editor-btn {
- display: flex;
- align-items: center;
- gap: 4px;
- background: linear-gradient(135deg, #3498db, #2980b9) !important;
- border: 1px solid #2980b9 !important;
- color: #fff !important;
- padding: 5px 8px !important;
- font-size: 11px !important;
- font-weight: 500;
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-
-.pdf-editor-btn:hover {
- background: linear-gradient(135deg, #2980b9, #1a5276) !important;
- transform: translateY(-1px);
-}
-
-.pdf-editor-btn:active {
- transform: translateY(0);
-}
-
-.pdf-editor-btn svg {
- flex-shrink: 0;
-}
-
-.pdf-editor-btn span {
- white-space: nowrap;
-}
-
-/* PDF toolbar wrapping for smaller screens */
-.pdf-toolbar-main {
- flex-wrap: wrap;
- min-height: auto;
- padding: 6px 10px !important;
-}
-
-/* Light theme PDF toolbar - refined styling */
-body.theme-light .pdf-viewer-toolbar,
-body.theme-atomonelight .pdf-viewer-toolbar,
-body.theme-github .pdf-viewer-toolbar,
-body.theme-solarized .pdf-viewer-toolbar,
-body.theme-gruvbox-light .pdf-viewer-toolbar,
-body.theme-ayu-light .pdf-viewer-toolbar,
-body.theme-sepia .pdf-viewer-toolbar,
-body.theme-paper .pdf-viewer-toolbar,
-body.theme-rosepine-dawn .pdf-viewer-toolbar {
- background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%) !important;
- border-bottom: 1px solid #d0d0d0 !important;
- box-shadow: 0 1px 3px rgba(0,0,0,0.08);
-}
-
-body.theme-light .pdf-viewer-toolbar button,
-body.theme-atomonelight .pdf-viewer-toolbar button,
-body.theme-github .pdf-viewer-toolbar button,
-body.theme-solarized .pdf-viewer-toolbar button,
-body.theme-gruvbox-light .pdf-viewer-toolbar button,
-body.theme-ayu-light .pdf-viewer-toolbar button,
-body.theme-sepia .pdf-viewer-toolbar button,
-body.theme-paper .pdf-viewer-toolbar button,
-body.theme-rosepine-dawn .pdf-viewer-toolbar button {
- background: #fff !important;
- border: 1px solid #ccc !important;
- color: #333 !important;
- box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-}
-
-body.theme-light .pdf-viewer-toolbar button:hover,
-body.theme-atomonelight .pdf-viewer-toolbar button:hover,
-body.theme-github .pdf-viewer-toolbar button:hover,
-body.theme-solarized .pdf-viewer-toolbar button:hover,
-body.theme-gruvbox-light .pdf-viewer-toolbar button:hover,
-body.theme-ayu-light .pdf-viewer-toolbar button:hover,
-body.theme-sepia .pdf-viewer-toolbar button:hover,
-body.theme-paper .pdf-viewer-toolbar button:hover,
-body.theme-rosepine-dawn .pdf-viewer-toolbar button:hover {
- background: #e8e8e8 !important;
- border-color: #bbb !important;
-}
-
-/* Light theme PDF editor buttons */
-body.theme-light .pdf-editor-btn,
-body.theme-atomonelight .pdf-editor-btn,
-body.theme-github .pdf-editor-btn,
-body.theme-solarized .pdf-editor-btn,
-body.theme-gruvbox-light .pdf-editor-btn,
-body.theme-ayu-light .pdf-editor-btn,
-body.theme-sepia .pdf-editor-btn,
-body.theme-paper .pdf-editor-btn,
-body.theme-rosepine-dawn .pdf-editor-btn {
- background: linear-gradient(135deg, #4a90d9, #357abd) !important;
- border: 1px solid #357abd !important;
-}
-
-body.theme-light .pdf-editor-btn:hover,
-body.theme-atomonelight .pdf-editor-btn:hover,
-body.theme-github .pdf-editor-btn:hover,
-body.theme-solarized .pdf-editor-btn:hover,
-body.theme-gruvbox-light .pdf-editor-btn:hover,
-body.theme-ayu-light .pdf-editor-btn:hover,
-body.theme-sepia .pdf-editor-btn:hover,
-body.theme-paper .pdf-editor-btn:hover,
-body.theme-rosepine-dawn .pdf-editor-btn:hover {
- background: linear-gradient(135deg, #357abd, #2868a0) !important;
-}
-
-/* Light theme page info */
-body.theme-light #pdf-page-info,
-body.theme-atomonelight #pdf-page-info,
-body.theme-github #pdf-page-info,
-body.theme-solarized #pdf-page-info,
-body.theme-gruvbox-light #pdf-page-info,
-body.theme-ayu-light #pdf-page-info,
-body.theme-sepia #pdf-page-info,
-body.theme-paper #pdf-page-info,
-body.theme-rosepine-dawn #pdf-page-info,
-body.theme-light #pdf-zoom-level,
-body.theme-atomonelight #pdf-zoom-level,
-body.theme-github #pdf-zoom-level,
-body.theme-solarized #pdf-zoom-level,
-body.theme-gruvbox-light #pdf-zoom-level,
-body.theme-ayu-light #pdf-zoom-level,
-body.theme-sepia #pdf-zoom-level,
-body.theme-paper #pdf-zoom-level,
-body.theme-rosepine-dawn #pdf-zoom-level {
- color: #444 !important;
- font-weight: 500;
-}
-
-body.theme-light #pdf-page-input,
-body.theme-atomonelight #pdf-page-input,
-body.theme-github #pdf-page-input,
-body.theme-solarized #pdf-page-input,
-body.theme-gruvbox-light #pdf-page-input,
-body.theme-ayu-light #pdf-page-input,
-body.theme-sepia #pdf-page-input,
-body.theme-paper #pdf-page-input,
-body.theme-rosepine-dawn #pdf-page-input {
- background: #fff !important;
- border: 1px solid #ccc !important;
- color: #333 !important;
-}
-
-body.theme-light .pdf-toolbar-separator,
-body.theme-atomonelight .pdf-toolbar-separator,
-body.theme-github .pdf-toolbar-separator,
-body.theme-solarized .pdf-toolbar-separator,
-body.theme-gruvbox-light .pdf-toolbar-separator,
-body.theme-ayu-light .pdf-toolbar-separator,
-body.theme-sepia .pdf-toolbar-separator,
-body.theme-paper .pdf-toolbar-separator,
-body.theme-rosepine-dawn .pdf-toolbar-separator {
- background: #d0d0d0 !important;
-}
-
-body.theme-light .pdf-filename,
-body.theme-atomonelight .pdf-filename,
-body.theme-github .pdf-filename,
-body.theme-solarized .pdf-filename,
-body.theme-gruvbox-light .pdf-filename,
-body.theme-ayu-light .pdf-filename,
-body.theme-sepia .pdf-filename,
-body.theme-paper .pdf-filename,
-body.theme-rosepine-dawn .pdf-filename {
- color: #555 !important;
-}
-
-/* Sepia theme specific */
-body.theme-sepia .pdf-viewer-toolbar {
- background: linear-gradient(180deg, #f4f0e8 0%, #e8e4dc 100%) !important;
- border-bottom-color: #cdc8c0 !important;
-}
-
-body.theme-sepia .pdf-viewer {
- background: #d8d4cc !important;
-}
-
-/* Rose Pine Dawn specific */
-body.theme-rosepine-dawn .pdf-viewer-toolbar {
- background: linear-gradient(180deg, #faf4ed 0%, #f2e9e1 100%) !important;
- border-bottom-color: #ddd8d1 !important;
-}
-
-body.theme-rosepine-dawn .pdf-viewer {
- background: #e6e0d8 !important;
-}
-
-/* Dark theme PDF toolbar refinement */
-body.theme-dark .pdf-viewer-toolbar,
-body.theme-onedark .pdf-viewer-toolbar,
-body.theme-one-dark .pdf-viewer-toolbar,
-body.theme-dracula .pdf-viewer-toolbar,
-body.theme-nord .pdf-viewer-toolbar,
-body.theme-tokyo-night .pdf-viewer-toolbar,
-body.theme-tokyonight .pdf-viewer-toolbar,
-body.theme-palenight .pdf-viewer-toolbar,
-body.theme-monokai .pdf-viewer-toolbar,
-body.theme-material .pdf-viewer-toolbar,
-body.theme-gruvbox-dark .pdf-viewer-toolbar,
-body.theme-ayu-dark .pdf-viewer-toolbar,
-body.theme-ayu-mirage .pdf-viewer-toolbar,
-body.theme-oceanic-next .pdf-viewer-toolbar,
-body.theme-cobalt2 .pdf-viewer-toolbar,
-body.theme-concrete-dark .pdf-viewer-toolbar,
-body.theme-concrete-warm .pdf-viewer-toolbar {
- background: linear-gradient(180deg, #2d2d2d 0%, #252525 100%) !important;
- border-bottom: 1px solid #1a1a1a !important;
-}
-
-body.theme-dark .pdf-viewer-toolbar button,
-body.theme-onedark .pdf-viewer-toolbar button,
-body.theme-one-dark .pdf-viewer-toolbar button,
-body.theme-dracula .pdf-viewer-toolbar button,
-body.theme-nord .pdf-viewer-toolbar button,
-body.theme-tokyo-night .pdf-viewer-toolbar button,
-body.theme-tokyonight .pdf-viewer-toolbar button,
-body.theme-palenight .pdf-viewer-toolbar button,
-body.theme-monokai .pdf-viewer-toolbar button,
-body.theme-material .pdf-viewer-toolbar button,
-body.theme-gruvbox-dark .pdf-viewer-toolbar button,
-body.theme-ayu-dark .pdf-viewer-toolbar button,
-body.theme-ayu-mirage .pdf-viewer-toolbar button,
-body.theme-oceanic-next .pdf-viewer-toolbar button,
-body.theme-cobalt2 .pdf-viewer-toolbar button,
-body.theme-concrete-dark .pdf-viewer-toolbar button,
-body.theme-concrete-warm .pdf-viewer-toolbar button {
- background: #3d3d3d !important;
- border: 1px solid #4d4d4d !important;
- color: #e0e0e0 !important;
-}
-
-body.theme-dark .pdf-viewer-toolbar button:hover,
-body.theme-onedark .pdf-viewer-toolbar button:hover,
-body.theme-one-dark .pdf-viewer-toolbar button:hover,
-body.theme-dracula .pdf-viewer-toolbar button:hover,
-body.theme-nord .pdf-viewer-toolbar button:hover,
-body.theme-tokyo-night .pdf-viewer-toolbar button:hover,
-body.theme-tokyonight .pdf-viewer-toolbar button:hover,
-body.theme-palenight .pdf-viewer-toolbar button:hover,
-body.theme-monokai .pdf-viewer-toolbar button:hover,
-body.theme-material .pdf-viewer-toolbar button:hover,
-body.theme-gruvbox-dark .pdf-viewer-toolbar button:hover,
-body.theme-ayu-dark .pdf-viewer-toolbar button:hover,
-body.theme-ayu-mirage .pdf-viewer-toolbar button:hover,
-body.theme-oceanic-next .pdf-viewer-toolbar button:hover,
-body.theme-cobalt2 .pdf-viewer-toolbar button:hover,
-body.theme-concrete-dark .pdf-viewer-toolbar button:hover,
-body.theme-concrete-warm .pdf-viewer-toolbar button:hover {
- background: #4d4d4d !important;
- border-color: #5d5d5d !important;
-}
-
-body.theme-dark .pdf-viewer,
-body.theme-onedark .pdf-viewer,
-body.theme-one-dark .pdf-viewer,
-body.theme-dracula .pdf-viewer,
-body.theme-nord .pdf-viewer,
-body.theme-tokyo-night .pdf-viewer,
-body.theme-tokyonight .pdf-viewer,
-body.theme-palenight .pdf-viewer,
-body.theme-monokai .pdf-viewer,
-body.theme-material .pdf-viewer,
-body.theme-gruvbox-dark .pdf-viewer,
-body.theme-ayu-dark .pdf-viewer,
-body.theme-ayu-mirage .pdf-viewer,
-body.theme-oceanic-next .pdf-viewer,
-body.theme-cobalt2 .pdf-viewer,
-body.theme-concrete-dark .pdf-viewer,
-body.theme-concrete-warm .pdf-viewer {
- background: #1a1a1a !important;
-}
-
-body.theme-dark .pdf-viewer-container,
-body.theme-onedark .pdf-viewer-container,
-body.theme-one-dark .pdf-viewer-container,
-body.theme-dracula .pdf-viewer-container,
-body.theme-nord .pdf-viewer-container,
-body.theme-tokyo-night .pdf-viewer-container,
-body.theme-tokyonight .pdf-viewer-container,
-body.theme-palenight .pdf-viewer-container,
-body.theme-monokai .pdf-viewer-container,
-body.theme-material .pdf-viewer-container,
-body.theme-gruvbox-dark .pdf-viewer-container,
-body.theme-ayu-dark .pdf-viewer-container,
-body.theme-ayu-mirage .pdf-viewer-container,
-body.theme-oceanic-next .pdf-viewer-container,
-body.theme-cobalt2 .pdf-viewer-container,
-body.theme-concrete-dark .pdf-viewer-container,
-body.theme-concrete-warm .pdf-viewer-container {
- background: #1a1a1a !important;
-}
-
-body.theme-dark #pdf-page-input,
-body.theme-onedark #pdf-page-input,
-body.theme-one-dark #pdf-page-input,
-body.theme-dracula #pdf-page-input,
-body.theme-nord #pdf-page-input,
-body.theme-tokyo-night #pdf-page-input,
-body.theme-tokyonight #pdf-page-input,
-body.theme-palenight #pdf-page-input,
-body.theme-monokai #pdf-page-input,
-body.theme-material #pdf-page-input,
-body.theme-gruvbox-dark #pdf-page-input,
-body.theme-ayu-dark #pdf-page-input,
-body.theme-ayu-mirage #pdf-page-input,
-body.theme-oceanic-next #pdf-page-input,
-body.theme-cobalt2 #pdf-page-input,
-body.theme-concrete-dark #pdf-page-input,
-body.theme-concrete-warm #pdf-page-input {
- background: #3d3d3d !important;
- border: 1px solid #4d4d4d !important;
- color: #e0e0e0 !important;
-}
-
-body.theme-dark .pdf-toolbar-separator,
-body.theme-onedark .pdf-toolbar-separator,
-body.theme-one-dark .pdf-toolbar-separator,
-body.theme-dracula .pdf-toolbar-separator,
-body.theme-nord .pdf-toolbar-separator,
-body.theme-tokyo-night .pdf-toolbar-separator,
-body.theme-tokyonight .pdf-toolbar-separator,
-body.theme-palenight .pdf-toolbar-separator,
-body.theme-monokai .pdf-toolbar-separator,
-body.theme-material .pdf-toolbar-separator,
-body.theme-gruvbox-dark .pdf-toolbar-separator,
-body.theme-ayu-dark .pdf-toolbar-separator,
-body.theme-ayu-mirage .pdf-toolbar-separator,
-body.theme-oceanic-next .pdf-toolbar-separator,
-body.theme-cobalt2 .pdf-toolbar-separator,
-body.theme-concrete-dark .pdf-toolbar-separator,
-body.theme-concrete-warm .pdf-toolbar-separator {
- background: #3d3d3d !important;
-}
-
-.pdf-viewer {
- flex: 1;
- overflow: auto;
- display: flex;
- justify-content: center;
- align-items: flex-start;
- padding: 20px;
- background: #525659;
-}
-
-#pdf-canvas {
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
- background: white;
-}
-
-/* Light theme PDF viewer */
-body.theme-light .pdf-viewer-container,
-body.theme-atomonelight .pdf-viewer-container,
-body.theme-github .pdf-viewer-container,
-body.theme-solarized .pdf-viewer-container,
-body.theme-gruvbox-light .pdf-viewer-container,
-body.theme-ayu-light .pdf-viewer-container,
-body.theme-sepia .pdf-viewer-container,
-body.theme-paper .pdf-viewer-container,
-body.theme-rosepine-dawn .pdf-viewer-container {
- background: #e8e8e8;
-}
-
-body.theme-light .pdf-viewer-toolbar,
-body.theme-atomonelight .pdf-viewer-toolbar,
-body.theme-github .pdf-viewer-toolbar,
-body.theme-solarized .pdf-viewer-toolbar,
-body.theme-gruvbox-light .pdf-viewer-toolbar,
-body.theme-ayu-light .pdf-viewer-toolbar,
-body.theme-sepia .pdf-viewer-toolbar,
-body.theme-paper .pdf-viewer-toolbar,
-body.theme-rosepine-dawn .pdf-viewer-toolbar {
- background: #f5f5f5;
- border-bottom-color: #ddd;
-}
-
-body.theme-light .pdf-viewer-toolbar button,
-body.theme-atomonelight .pdf-viewer-toolbar button,
-body.theme-github .pdf-viewer-toolbar button {
- background: #fff;
- border-color: #ddd;
- color: #333;
-}
-
-body.theme-light .pdf-viewer-toolbar button:hover,
-body.theme-atomonelight .pdf-viewer-toolbar button:hover,
-body.theme-github .pdf-viewer-toolbar button:hover {
- background: #e8e8e8;
-}
-
-body.theme-light #pdf-page-info,
-body.theme-atomonelight #pdf-page-info,
-body.theme-github #pdf-page-info,
-body.theme-light #pdf-zoom-level,
-body.theme-atomonelight #pdf-zoom-level,
-body.theme-github #pdf-zoom-level {
- color: #333;
-}
-
-body.theme-light #pdf-page-input,
-body.theme-atomonelight #pdf-page-input,
-body.theme-github #pdf-page-input {
- background: #fff;
- border-color: #ddd;
- color: #333;
-}
-
-body.theme-light .pdf-filename,
-body.theme-atomonelight .pdf-filename,
-body.theme-github .pdf-filename {
- color: #666;
-}
-
-body.theme-light .pdf-viewer,
-body.theme-atomonelight .pdf-viewer,
-body.theme-github .pdf-viewer,
-body.theme-solarized .pdf-viewer,
-body.theme-gruvbox-light .pdf-viewer,
-body.theme-ayu-light .pdf-viewer,
-body.theme-sepia .pdf-viewer,
-body.theme-paper .pdf-viewer,
-body.theme-rosepine-dawn .pdf-viewer {
- background: #d0d0d0;
-}
-
-/* ========================================
- Print Styles for styles-modern.css
- Ensures proper print output
- ======================================== */
-
-@media print {
- /* Reset container for print */
- .container {
- padding: 0;
- gap: 0;
- display: block !important;
- }
-
- /* Hide all UI elements */
- .tab-bar,
- .toolbar,
- .status-bar,
- .pane-resizer,
- .preview-header,
- .find-dialog,
- .export-dialog,
- .batch-dialog,
- .editor-pane,
- [id^="editor-pane-"],
- .new-tab-button,
- .tab-close {
- display: none !important;
- }
-
- /* Show preview content */
- .preview-pane,
- [id^="preview-pane-"],
- .preview-content,
- [id^="preview-"] {
- display: block !important;
- width: 100% !important;
- padding: 20px !important;
- position: static !important;
- overflow: visible !important;
- }
-
- /* Reset main content glass */
- .main-content-glass {
- backdrop-filter: none !important;
- border: none !important;
- box-shadow: none !important;
- }
-
- /* Reset editor container */
- .editor-container {
- display: block !important;
- }
-
- /* Reset tab content */
- .tab-content {
- display: block !important;
- }
-
- /* Reset pane */
- .pane {
- display: block !important;
- width: 100% !important;
- }
-
- /* NO STYLES MODE - Black text on white (ink-saving) */
- body.printing-no-styles .container,
- body.printing-no-styles .main-content-glass,
- body.printing-no-styles .tab-content,
- body.printing-no-styles .pane,
- body.printing-no-styles .preview-pane,
- body.printing-no-styles [id^="preview-pane-"],
- body.printing-no-styles .preview-content,
- body.printing-no-styles [id^="preview-"] {
- background: white !important;
- color: #000 !important;
- }
-
- body.printing-no-styles .preview-content h1,
- body.printing-no-styles .preview-content h2,
- body.printing-no-styles .preview-content h3,
- body.printing-no-styles .preview-content h4,
- body.printing-no-styles .preview-content h5,
- body.printing-no-styles .preview-content h6,
- body.printing-no-styles .preview-content p,
- body.printing-no-styles .preview-content li,
- body.printing-no-styles .preview-content td,
- body.printing-no-styles .preview-content th {
- color: #000 !important;
- }
-
- body.printing-no-styles .preview-content code,
- body.printing-no-styles .preview-content pre {
- background: #f5f5f5 !important;
- color: #000 !important;
- border-color: #ddd !important;
- }
-
- body.printing-no-styles .preview-content a {
- color: #000 !important;
- }
-
- body.printing-no-styles .preview-content blockquote {
- background: #f9f9f9 !important;
- color: #333 !important;
- border-left-color: #ccc !important;
- }
-
- /* WITH STYLES MODE - Preserve theme colors */
- /* The theme colors are inherited from the body class */
-}
-
-/* ========================================
- Dark Theme Overrides for styles-modern.css
- These ensure dark themes work properly
- ======================================== */
-
-/* Common dark theme styles for preview content */
-body.theme-dark .preview-content,
-body.theme-dark [id^="preview-"],
-body.theme-one-dark .preview-content,
-body.theme-one-dark [id^="preview-"],
-body.theme-dracula .preview-content,
-body.theme-dracula [id^="preview-"],
-body.theme-nord .preview-content,
-body.theme-nord [id^="preview-"],
-body.theme-tokyo-night .preview-content,
-body.theme-tokyo-night [id^="preview-"],
-body.theme-palenight .preview-content,
-body.theme-palenight [id^="preview-"],
-body.theme-ayu-dark .preview-content,
-body.theme-ayu-dark [id^="preview-"],
-body.theme-ayu-mirage .preview-content,
-body.theme-ayu-mirage [id^="preview-"],
-body.theme-oceanic-next .preview-content,
-body.theme-oceanic-next [id^="preview-"],
-body.theme-gruvbox-dark .preview-content,
-body.theme-gruvbox-dark [id^="preview-"],
-body.theme-cobalt2 .preview-content,
-body.theme-cobalt2 [id^="preview-"] {
- color: #e6e6e6;
- background: transparent;
-}
-
-/* Dark theme headings */
-body.theme-dark .preview-content h1,
-body.theme-dark .preview-content h2,
-body.theme-dark .preview-content h3,
-body.theme-dark .preview-content h4,
-body.theme-dark .preview-content h5,
-body.theme-dark .preview-content h6,
-body.theme-one-dark .preview-content h1,
-body.theme-one-dark .preview-content h2,
-body.theme-one-dark .preview-content h3,
-body.theme-one-dark .preview-content h4,
-body.theme-one-dark .preview-content h5,
-body.theme-one-dark .preview-content h6,
-body.theme-dracula .preview-content h1,
-body.theme-dracula .preview-content h2,
-body.theme-dracula .preview-content h3,
-body.theme-dracula .preview-content h4,
-body.theme-dracula .preview-content h5,
-body.theme-dracula .preview-content h6,
-body.theme-nord .preview-content h1,
-body.theme-nord .preview-content h2,
-body.theme-nord .preview-content h3,
-body.theme-nord .preview-content h4,
-body.theme-nord .preview-content h5,
-body.theme-nord .preview-content h6,
-body.theme-tokyo-night .preview-content h1,
-body.theme-tokyo-night .preview-content h2,
-body.theme-tokyo-night .preview-content h3,
-body.theme-tokyo-night .preview-content h4,
-body.theme-tokyo-night .preview-content h5,
-body.theme-tokyo-night .preview-content h6,
-body.theme-palenight .preview-content h1,
-body.theme-palenight .preview-content h2,
-body.theme-palenight .preview-content h3,
-body.theme-palenight .preview-content h4,
-body.theme-palenight .preview-content h5,
-body.theme-palenight .preview-content h6,
-body.theme-ayu-dark .preview-content h1,
-body.theme-ayu-dark .preview-content h2,
-body.theme-ayu-dark .preview-content h3,
-body.theme-ayu-dark .preview-content h4,
-body.theme-ayu-dark .preview-content h5,
-body.theme-ayu-dark .preview-content h6,
-body.theme-ayu-mirage .preview-content h1,
-body.theme-ayu-mirage .preview-content h2,
-body.theme-ayu-mirage .preview-content h3,
-body.theme-ayu-mirage .preview-content h4,
-body.theme-ayu-mirage .preview-content h5,
-body.theme-ayu-mirage .preview-content h6,
-body.theme-oceanic-next .preview-content h1,
-body.theme-oceanic-next .preview-content h2,
-body.theme-oceanic-next .preview-content h3,
-body.theme-oceanic-next .preview-content h4,
-body.theme-oceanic-next .preview-content h5,
-body.theme-oceanic-next .preview-content h6,
-body.theme-gruvbox-dark .preview-content h1,
-body.theme-gruvbox-dark .preview-content h2,
-body.theme-gruvbox-dark .preview-content h3,
-body.theme-gruvbox-dark .preview-content h4,
-body.theme-gruvbox-dark .preview-content h5,
-body.theme-gruvbox-dark .preview-content h6,
-body.theme-cobalt2 .preview-content h1,
-body.theme-cobalt2 .preview-content h2,
-body.theme-cobalt2 .preview-content h3,
-body.theme-cobalt2 .preview-content h4,
-body.theme-cobalt2 .preview-content h5,
-body.theme-cobalt2 .preview-content h6 {
- color: #f0f0f0;
- border-bottom-color: #444;
-}
-
-/* Dark theme paragraphs and text */
-body.theme-dark .preview-content p,
-body.theme-dark .preview-content li,
-body.theme-dark .preview-content td,
-body.theme-one-dark .preview-content p,
-body.theme-one-dark .preview-content li,
-body.theme-one-dark .preview-content td,
-body.theme-dracula .preview-content p,
-body.theme-dracula .preview-content li,
-body.theme-dracula .preview-content td,
-body.theme-nord .preview-content p,
-body.theme-nord .preview-content li,
-body.theme-nord .preview-content td,
-body.theme-tokyo-night .preview-content p,
-body.theme-tokyo-night .preview-content li,
-body.theme-tokyo-night .preview-content td,
-body.theme-palenight .preview-content p,
-body.theme-palenight .preview-content li,
-body.theme-palenight .preview-content td,
-body.theme-ayu-dark .preview-content p,
-body.theme-ayu-dark .preview-content li,
-body.theme-ayu-dark .preview-content td,
-body.theme-ayu-mirage .preview-content p,
-body.theme-ayu-mirage .preview-content li,
-body.theme-ayu-mirage .preview-content td,
-body.theme-oceanic-next .preview-content p,
-body.theme-oceanic-next .preview-content li,
-body.theme-oceanic-next .preview-content td,
-body.theme-gruvbox-dark .preview-content p,
-body.theme-gruvbox-dark .preview-content li,
-body.theme-gruvbox-dark .preview-content td,
-body.theme-cobalt2 .preview-content p,
-body.theme-cobalt2 .preview-content li,
-body.theme-cobalt2 .preview-content td {
- color: #d4d4d4;
-}
-
-/* Dark theme code blocks */
-body.theme-dark .preview-content pre,
-body.theme-one-dark .preview-content pre,
-body.theme-dracula .preview-content pre,
-body.theme-nord .preview-content pre,
-body.theme-tokyo-night .preview-content pre,
-body.theme-palenight .preview-content pre,
-body.theme-ayu-dark .preview-content pre,
-body.theme-ayu-mirage .preview-content pre,
-body.theme-oceanic-next .preview-content pre,
-body.theme-gruvbox-dark .preview-content pre,
-body.theme-cobalt2 .preview-content pre {
- background: #1e1e1e;
- border-color: #333;
- color: #d4d4d4;
-}
-
-/* Dark theme inline code */
-body.theme-dark .preview-content code,
-body.theme-one-dark .preview-content code,
-body.theme-dracula .preview-content code,
-body.theme-nord .preview-content code,
-body.theme-tokyo-night .preview-content code,
-body.theme-palenight .preview-content code,
-body.theme-ayu-dark .preview-content code,
-body.theme-ayu-mirage .preview-content code,
-body.theme-oceanic-next .preview-content code,
-body.theme-gruvbox-dark .preview-content code,
-body.theme-cobalt2 .preview-content code {
- background: rgba(255, 255, 255, 0.1);
- border-color: #444;
- color: #e06c75;
-}
-
-/* Dark theme blockquotes */
-body.theme-dark .preview-content blockquote,
-body.theme-one-dark .preview-content blockquote,
-body.theme-dracula .preview-content blockquote,
-body.theme-nord .preview-content blockquote,
-body.theme-tokyo-night .preview-content blockquote,
-body.theme-palenight .preview-content blockquote,
-body.theme-ayu-dark .preview-content blockquote,
-body.theme-ayu-mirage .preview-content blockquote,
-body.theme-oceanic-next .preview-content blockquote,
-body.theme-gruvbox-dark .preview-content blockquote,
-body.theme-cobalt2 .preview-content blockquote {
- background: rgba(255, 255, 255, 0.05);
- border-left-color: #555;
- color: #aaa;
-}
-
-/* Dark theme links */
-body.theme-dark .preview-content a,
-body.theme-one-dark .preview-content a,
-body.theme-dracula .preview-content a,
-body.theme-nord .preview-content a,
-body.theme-tokyo-night .preview-content a,
-body.theme-palenight .preview-content a,
-body.theme-ayu-dark .preview-content a,
-body.theme-ayu-mirage .preview-content a,
-body.theme-oceanic-next .preview-content a,
-body.theme-gruvbox-dark .preview-content a,
-body.theme-cobalt2 .preview-content a {
- color: #61afef;
-}
-
-/* Dark theme tables */
-body.theme-dark .preview-content table,
-body.theme-one-dark .preview-content table,
-body.theme-dracula .preview-content table,
-body.theme-nord .preview-content table,
-body.theme-tokyo-night .preview-content table,
-body.theme-palenight .preview-content table,
-body.theme-ayu-dark .preview-content table,
-body.theme-ayu-mirage .preview-content table,
-body.theme-oceanic-next .preview-content table,
-body.theme-gruvbox-dark .preview-content table,
-body.theme-cobalt2 .preview-content table {
- border-color: #444;
-}
-
-body.theme-dark .preview-content table th,
-body.theme-one-dark .preview-content table th,
-body.theme-dracula .preview-content table th,
-body.theme-nord .preview-content table th,
-body.theme-tokyo-night .preview-content table th,
-body.theme-palenight .preview-content table th,
-body.theme-ayu-dark .preview-content table th,
-body.theme-ayu-mirage .preview-content table th,
-body.theme-oceanic-next .preview-content table th,
-body.theme-gruvbox-dark .preview-content table th,
-body.theme-cobalt2 .preview-content table th {
- background: #2d2d2d;
- color: #e6e6e6;
- border-color: #444;
-}
-
-body.theme-dark .preview-content table td,
-body.theme-one-dark .preview-content table td,
-body.theme-dracula .preview-content table td,
-body.theme-nord .preview-content table td,
-body.theme-tokyo-night .preview-content table td,
-body.theme-palenight .preview-content table td,
-body.theme-ayu-dark .preview-content table td,
-body.theme-ayu-mirage .preview-content table td,
-body.theme-oceanic-next .preview-content table td,
-body.theme-gruvbox-dark .preview-content table td,
-body.theme-cobalt2 .preview-content table td {
- border-color: #444;
-}
-
-body.theme-dark .preview-content table tr:nth-child(even),
-body.theme-one-dark .preview-content table tr:nth-child(even),
-body.theme-dracula .preview-content table tr:nth-child(even),
-body.theme-nord .preview-content table tr:nth-child(even),
-body.theme-tokyo-night .preview-content table tr:nth-child(even),
-body.theme-palenight .preview-content table tr:nth-child(even),
-body.theme-ayu-dark .preview-content table tr:nth-child(even),
-body.theme-ayu-mirage .preview-content table tr:nth-child(even),
-body.theme-oceanic-next .preview-content table tr:nth-child(even),
-body.theme-gruvbox-dark .preview-content table tr:nth-child(even),
-body.theme-cobalt2 .preview-content table tr:nth-child(even) {
- background: rgba(255, 255, 255, 0.03);
-}
-
-/* Dark theme horizontal rules */
-body.theme-dark .preview-content hr,
-body.theme-one-dark .preview-content hr,
-body.theme-dracula .preview-content hr,
-body.theme-nord .preview-content hr,
-body.theme-tokyo-night .preview-content hr,
-body.theme-palenight .preview-content hr,
-body.theme-ayu-dark .preview-content hr,
-body.theme-ayu-mirage .preview-content hr,
-body.theme-oceanic-next .preview-content hr,
-body.theme-gruvbox-dark .preview-content hr,
-body.theme-cobalt2 .preview-content hr {
- border-color: #444;
- background: #444;
-}
-
-/* ========================================
- Modal/Dialog Theming
- Dialogs inherit app theme colors
- ======================================== */
-
-/* Dark theme modals */
-body.theme-dark .export-dialog-content,
-body.theme-dark .batch-dialog-content,
-body.theme-dark .pdf-editor-content,
-body.theme-one-dark .export-dialog-content,
-body.theme-one-dark .batch-dialog-content,
-body.theme-one-dark .pdf-editor-content,
-body.theme-onedark .export-dialog-content,
-body.theme-onedark .batch-dialog-content,
-body.theme-onedark .pdf-editor-content,
-body.theme-dracula .export-dialog-content,
-body.theme-dracula .batch-dialog-content,
-body.theme-dracula .pdf-editor-content,
-body.theme-nord .export-dialog-content,
-body.theme-nord .batch-dialog-content,
-body.theme-nord .pdf-editor-content,
-body.theme-tokyo-night .export-dialog-content,
-body.theme-tokyo-night .batch-dialog-content,
-body.theme-tokyo-night .pdf-editor-content,
-body.theme-tokyonight .export-dialog-content,
-body.theme-tokyonight .batch-dialog-content,
-body.theme-tokyonight .pdf-editor-content,
-body.theme-palenight .export-dialog-content,
-body.theme-palenight .batch-dialog-content,
-body.theme-palenight .pdf-editor-content,
-body.theme-ayu-dark .export-dialog-content,
-body.theme-ayu-dark .batch-dialog-content,
-body.theme-ayu-dark .pdf-editor-content,
-body.theme-ayu-mirage .export-dialog-content,
-body.theme-ayu-mirage .batch-dialog-content,
-body.theme-ayu-mirage .pdf-editor-content,
-body.theme-oceanic-next .export-dialog-content,
-body.theme-oceanic-next .batch-dialog-content,
-body.theme-oceanic-next .pdf-editor-content,
-body.theme-gruvbox-dark .export-dialog-content,
-body.theme-gruvbox-dark .batch-dialog-content,
-body.theme-gruvbox-dark .pdf-editor-content,
-body.theme-cobalt2 .export-dialog-content,
-body.theme-cobalt2 .batch-dialog-content,
-body.theme-cobalt2 .pdf-editor-content,
-body.theme-monokai .export-dialog-content,
-body.theme-monokai .batch-dialog-content,
-body.theme-monokai .pdf-editor-content,
-body.theme-material .export-dialog-content,
-body.theme-material .batch-dialog-content,
-body.theme-material .pdf-editor-content,
-body.theme-concrete-dark .export-dialog-content,
-body.theme-concrete-dark .batch-dialog-content,
-body.theme-concrete-dark .pdf-editor-content,
-body.theme-concrete-warm .export-dialog-content,
-body.theme-concrete-warm .batch-dialog-content,
-body.theme-concrete-warm .pdf-editor-content {
- background: #2d2d2d !important;
- border-color: #444 !important;
- color: #e6e6e6 !important;
-}
-
-/* Dark theme dialog headers */
-body.theme-dark .export-dialog-header,
-body.theme-dark .batch-dialog-header,
-body.theme-one-dark .export-dialog-header,
-body.theme-one-dark .batch-dialog-header,
-body.theme-onedark .export-dialog-header,
-body.theme-onedark .batch-dialog-header,
-body.theme-dracula .export-dialog-header,
-body.theme-dracula .batch-dialog-header,
-body.theme-nord .export-dialog-header,
-body.theme-nord .batch-dialog-header,
-body.theme-tokyo-night .export-dialog-header,
-body.theme-tokyo-night .batch-dialog-header,
-body.theme-tokyonight .export-dialog-header,
-body.theme-tokyonight .batch-dialog-header,
-body.theme-palenight .export-dialog-header,
-body.theme-palenight .batch-dialog-header,
-body.theme-ayu-dark .export-dialog-header,
-body.theme-ayu-dark .batch-dialog-header,
-body.theme-ayu-mirage .export-dialog-header,
-body.theme-ayu-mirage .batch-dialog-header,
-body.theme-oceanic-next .export-dialog-header,
-body.theme-oceanic-next .batch-dialog-header,
-body.theme-gruvbox-dark .export-dialog-header,
-body.theme-gruvbox-dark .batch-dialog-header,
-body.theme-cobalt2 .export-dialog-header,
-body.theme-cobalt2 .batch-dialog-header,
-body.theme-monokai .export-dialog-header,
-body.theme-monokai .batch-dialog-header,
-body.theme-material .export-dialog-header,
-body.theme-material .batch-dialog-header,
-body.theme-concrete-dark .export-dialog-header,
-body.theme-concrete-dark .batch-dialog-header,
-body.theme-concrete-warm .export-dialog-header,
-body.theme-concrete-warm .batch-dialog-header {
- background: #1a1a1a !important;
- border-bottom-color: #333 !important;
-}
-
-/* Dark theme dialog header text */
-body.theme-dark .export-dialog-header h3,
-body.theme-dark .batch-dialog-header h3,
-body.theme-onedark .export-dialog-header h3,
-body.theme-onedark .batch-dialog-header h3,
-body.theme-dracula .export-dialog-header h3,
-body.theme-dracula .batch-dialog-header h3,
-body.theme-nord .export-dialog-header h3,
-body.theme-nord .batch-dialog-header h3,
-body.theme-tokyonight .export-dialog-header h3,
-body.theme-tokyonight .batch-dialog-header h3,
-body.theme-monokai .export-dialog-header h3,
-body.theme-monokai .batch-dialog-header h3,
-body.theme-material .export-dialog-header h3,
-body.theme-material .batch-dialog-header h3 {
- color: #fff !important;
-}
-
-/* Dark theme dialog body */
-body.theme-dark .export-dialog-body,
-body.theme-dark .batch-dialog-body,
-body.theme-one-dark .export-dialog-body,
-body.theme-one-dark .batch-dialog-body,
-body.theme-dracula .export-dialog-body,
-body.theme-dracula .batch-dialog-body,
-body.theme-nord .export-dialog-body,
-body.theme-nord .batch-dialog-body,
-body.theme-tokyo-night .export-dialog-body,
-body.theme-tokyo-night .batch-dialog-body,
-body.theme-palenight .export-dialog-body,
-body.theme-palenight .batch-dialog-body,
-body.theme-ayu-dark .export-dialog-body,
-body.theme-ayu-dark .batch-dialog-body,
-body.theme-ayu-mirage .export-dialog-body,
-body.theme-ayu-mirage .batch-dialog-body,
-body.theme-oceanic-next .export-dialog-body,
-body.theme-oceanic-next .batch-dialog-body,
-body.theme-gruvbox-dark .export-dialog-body,
-body.theme-gruvbox-dark .batch-dialog-body,
-body.theme-cobalt2 .export-dialog-body,
-body.theme-cobalt2 .batch-dialog-body {
- background: transparent;
-}
-
-/* Dark theme dialog labels */
-body.theme-dark .export-section label,
-body.theme-dark .batch-section label,
-body.theme-one-dark .export-section label,
-body.theme-one-dark .batch-section label,
-body.theme-dracula .export-section label,
-body.theme-dracula .batch-section label,
-body.theme-nord .export-section label,
-body.theme-nord .batch-section label,
-body.theme-tokyo-night .export-section label,
-body.theme-tokyo-night .batch-section label,
-body.theme-palenight .export-section label,
-body.theme-palenight .batch-section label,
-body.theme-ayu-dark .export-section label,
-body.theme-ayu-dark .batch-section label,
-body.theme-ayu-mirage .export-section label,
-body.theme-ayu-mirage .batch-section label,
-body.theme-oceanic-next .export-section label,
-body.theme-oceanic-next .batch-section label,
-body.theme-gruvbox-dark .export-section label,
-body.theme-gruvbox-dark .batch-section label,
-body.theme-cobalt2 .export-section label,
-body.theme-cobalt2 .batch-section label {
- color: #ccc;
-}
-
-/* Dark theme dialog inputs and selects */
-body.theme-dark .export-section select,
-body.theme-dark .export-section input,
-body.theme-dark .batch-section select,
-body.theme-dark .batch-section input,
-body.theme-one-dark .export-section select,
-body.theme-one-dark .export-section input,
-body.theme-one-dark .batch-section select,
-body.theme-one-dark .batch-section input,
-body.theme-dracula .export-section select,
-body.theme-dracula .export-section input,
-body.theme-dracula .batch-section select,
-body.theme-dracula .batch-section input,
-body.theme-nord .export-section select,
-body.theme-nord .export-section input,
-body.theme-nord .batch-section select,
-body.theme-nord .batch-section input,
-body.theme-tokyo-night .export-section select,
-body.theme-tokyo-night .export-section input,
-body.theme-tokyo-night .batch-section select,
-body.theme-tokyo-night .batch-section input,
-body.theme-palenight .export-section select,
-body.theme-palenight .export-section input,
-body.theme-palenight .batch-section select,
-body.theme-palenight .batch-section input,
-body.theme-ayu-dark .export-section select,
-body.theme-ayu-dark .export-section input,
-body.theme-ayu-dark .batch-section select,
-body.theme-ayu-dark .batch-section input,
-body.theme-ayu-mirage .export-section select,
-body.theme-ayu-mirage .export-section input,
-body.theme-ayu-mirage .batch-section select,
-body.theme-ayu-mirage .batch-section input,
-body.theme-oceanic-next .export-section select,
-body.theme-oceanic-next .export-section input,
-body.theme-oceanic-next .batch-section select,
-body.theme-oceanic-next .batch-section input,
-body.theme-gruvbox-dark .export-section select,
-body.theme-gruvbox-dark .export-section input,
-body.theme-gruvbox-dark .batch-section select,
-body.theme-gruvbox-dark .batch-section input,
-body.theme-cobalt2 .export-section select,
-body.theme-cobalt2 .export-section input,
-body.theme-cobalt2 .batch-section select,
-body.theme-cobalt2 .batch-section input {
- background: #2d2d2d;
- border-color: #444;
- color: #e6e6e6;
-}
-
-/* Dark theme dialog footer */
-body.theme-dark .export-dialog-footer,
-body.theme-dark .batch-dialog-footer,
-body.theme-one-dark .export-dialog-footer,
-body.theme-one-dark .batch-dialog-footer,
-body.theme-dracula .export-dialog-footer,
-body.theme-dracula .batch-dialog-footer,
-body.theme-nord .export-dialog-footer,
-body.theme-nord .batch-dialog-footer,
-body.theme-tokyo-night .export-dialog-footer,
-body.theme-tokyo-night .batch-dialog-footer,
-body.theme-palenight .export-dialog-footer,
-body.theme-palenight .batch-dialog-footer,
-body.theme-ayu-dark .export-dialog-footer,
-body.theme-ayu-dark .batch-dialog-footer,
-body.theme-ayu-mirage .export-dialog-footer,
-body.theme-ayu-mirage .batch-dialog-footer,
-body.theme-oceanic-next .export-dialog-footer,
-body.theme-oceanic-next .batch-dialog-footer,
-body.theme-gruvbox-dark .export-dialog-footer,
-body.theme-gruvbox-dark .batch-dialog-footer,
-body.theme-cobalt2 .export-dialog-footer,
-body.theme-cobalt2 .batch-dialog-footer {
- background: #1a1a1a;
- border-top-color: #333;
-}
-
-/* Sepia theme modals */
-body.theme-sepia .export-dialog-content,
-body.theme-sepia .batch-dialog-content,
-body.theme-sepia .pdf-editor-content {
- background: rgba(244, 236, 216, 0.98);
- border-color: #d4c4a8;
- color: #5b4636;
-}
-
-body.theme-sepia .export-dialog-header,
-body.theme-sepia .batch-dialog-header {
- background: #e8dcc8;
- border-bottom-color: #d4c4a8;
-}
-
-body.theme-sepia .export-dialog-header h3,
-body.theme-sepia .batch-dialog-header h3 {
- color: #3d2914;
-}
-
-body.theme-sepia .export-section label,
-body.theme-sepia .batch-section label {
- color: #5b4636;
-}
-
-body.theme-sepia .export-section select,
-body.theme-sepia .export-section input,
-body.theme-sepia .batch-section select,
-body.theme-sepia .batch-section input {
- background: #f4ecd8;
- border-color: #d4c4a8;
- color: #5b4636;
-}
-
-body.theme-sepia .export-dialog-footer,
-body.theme-sepia .batch-dialog-footer {
- background: #e8dcc8;
- border-top-color: #d4c4a8;
-}
-
-/* Rose Pine Dawn theme modals */
-body.theme-rosepine-dawn .export-dialog-content,
-body.theme-rosepine-dawn .batch-dialog-content,
-body.theme-rosepine-dawn .pdf-editor-content {
- background: rgba(250, 244, 237, 0.98);
- border-color: #dfdad9;
- color: #575279;
-}
-
-body.theme-rosepine-dawn .export-dialog-header,
-body.theme-rosepine-dawn .batch-dialog-header {
- background: #f2e9e1;
- border-bottom-color: #dfdad9;
-}
-
-body.theme-rosepine-dawn .export-dialog-header h3,
-body.theme-rosepine-dawn .batch-dialog-header h3 {
- color: #286983;
-}
-
-body.theme-rosepine-dawn .export-section label,
-body.theme-rosepine-dawn .batch-section label {
- color: #575279;
-}
-
-body.theme-rosepine-dawn .export-section select,
-body.theme-rosepine-dawn .export-section input,
-body.theme-rosepine-dawn .batch-section select,
-body.theme-rosepine-dawn .batch-section input {
- background: #faf4ed;
- border-color: #dfdad9;
- color: #575279;
-}
-
-body.theme-rosepine-dawn .export-dialog-footer,
-body.theme-rosepine-dawn .batch-dialog-footer {
- background: #f2e9e1;
- border-top-color: #dfdad9;
-}
+/* ========================================
+ PanConverter v1.7.1 - Modern UI
+ Glassmorphism, Gradients & Animations
+ ======================================== */
+
+/* Modern Color Palette */
+:root {
+ /* Primary Brand Colors - Purple-Blue Gradient */
+ --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ --primary-light: #8b9aff;
+ --primary-dark: #5661b3;
+
+ /* Accent Colors */
+ --accent-green: #10b981;
+ --accent-blue: #3b82f6;
+ --accent-purple: #8b5cf6;
+ --accent-pink: #ec4899;
+
+ /* Neutral Colors */
+ --gray-50: #f9fafb;
+ --gray-100: #f3f4f6;
+ --gray-200: #e5e7eb;
+ --gray-300: #d1d5db;
+ --gray-400: #9ca3af;
+ --gray-500: #6b7280;
+ --gray-600: #4b5563;
+ --gray-700: #374151;
+ --gray-800: #1f2937;
+ --gray-900: #111827;
+
+ /* Glassmorphism */
+ --glass-bg: rgba(255, 255, 255, 0.7);
+ --glass-border: rgba(255, 255, 255, 0.18);
+ --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+
+ /* Effects */
+ --blur-amount: 10px;
+ --transition-speed: 0.3s;
+ --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Reset & Base */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ overflow: hidden;
+ height: 100vh;
+ /* Background controlled by themes - do not set here */
+ color: var(--gray-900);
+}
+
+@keyframes gradientShift {
+ 0% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+ 100% { background-position: 0% 50%; }
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ padding: 4px 8px;
+ gap: 2px;
+}
+
+/* Glass Container for main content */
+.main-content-glass {
+ background: var(--glass-bg);
+ backdrop-filter: blur(var(--blur-amount));
+ -webkit-backdrop-filter: blur(var(--blur-amount));
+ border: 1px solid var(--glass-border);
+ border-radius: 20px;
+ box-shadow: var(--glass-shadow);
+ overflow: hidden;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Tab Bar - Modern Glassmorphism */
+.tab-bar {
+ display: flex;
+ align-items: center;
+ background: rgba(255, 255, 255, 0.5);
+ backdrop-filter: blur(10px);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+ padding: 4px 8px;
+ min-height: 36px;
+ gap: 4px;
+ border-radius: 8px;
+}
+
+.tab {
+ display: flex;
+ align-items: center;
+ padding: 8px 16px;
+ background: rgba(255, 255, 255, 0.3);
+ backdrop-filter: blur(8px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ border-radius: 12px;
+ margin-right: 4px;
+ cursor: pointer;
+ user-select: none;
+ max-width: 200px;
+ min-width: 120px;
+ transition: all var(--transition-speed) var(--transition-ease);
+ transform: translateY(0);
+}
+
+.tab:hover {
+ background: rgba(0, 0, 0, 0.05);
+}
+
+.tab.active {
+ background: #ffffff;
+ color: #24292e;
+ border-bottom: 2px solid #0366d6;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+.tab-title {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 13px;
+ font-weight: 500;
+}
+
+.tab-close {
+ background: rgba(255, 255, 255, 0.2);
+ border: none;
+ font-size: 14px;
+ font-weight: bold;
+ cursor: pointer;
+ padding: 4px;
+ margin-left: 8px;
+ width: 20px;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px;
+ color: currentColor;
+ transition: all var(--transition-speed) var(--transition-ease);
+}
+
+.tab-close:hover {
+ background: rgba(255, 255, 255, 0.4);
+ transform: rotate(90deg);
+}
+
+.new-tab-button {
+ background: rgba(255, 255, 255, 0.3);
+ backdrop-filter: blur(8px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ border-radius: 10px;
+ padding: 8px 16px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--gray-700);
+ transition: all var(--transition-speed) var(--transition-ease);
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.new-tab-button:hover {
+ background: rgba(255, 255, 255, 0.5);
+ transform: scale(1.05);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Toolbar - Modern Gradient Buttons */
+.toolbar {
+ display: flex;
+ align-items: center;
+ padding: 4px 8px;
+ background: rgba(255, 255, 255, 0.4);
+ backdrop-filter: blur(10px);
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+ gap: 2px;
+ border-radius: 8px;
+}
+
+.toolbar button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: 1px solid transparent;
+ background: transparent;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ color: #586069;
+}
+
+.toolbar button:hover {
+ background: rgba(0, 0, 0, 0.06);
+ color: #24292e;
+}
+
+.toolbar button:active {
+ background: rgba(0, 0, 0, 0.1);
+ transform: scale(0.95);
+}
+
+.toolbar-separator {
+ width: 1px;
+ height: 24px;
+ background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+ margin: 0 8px;
+}
+
+/* Tab Content */
+.tab-content {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+}
+
+.tab-content:not(.active) {
+ display: none;
+}
+
+/* Editor Container */
+.editor-container {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ background: rgba(255, 255, 255, 0.3);
+ backdrop-filter: blur(10px);
+ border-radius: 0 0 20px 20px;
+}
+
+.pane {
+ flex: 1;
+ overflow: auto;
+ min-width: 0;
+}
+
+.pane:first-child {
+ border-right: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* Custom Scrollbar */
+.pane::-webkit-scrollbar,
+.editor-textarea::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+.pane::-webkit-scrollbar-track,
+.editor-textarea::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 10px;
+}
+
+.pane::-webkit-scrollbar-thumb,
+.editor-textarea::-webkit-scrollbar-thumb {
+ background: rgba(0, 0, 0, 0.25);
+ border-radius: 10px;
+ border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.pane::-webkit-scrollbar-thumb:hover,
+.editor-textarea::-webkit-scrollbar-thumb:hover {
+ background: rgba(0, 0, 0, 0.4);
+}
+
+.editor-textarea {
+ width: 100%;
+ height: 100%;
+ padding: 24px;
+ font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace;
+ font-size: 15px;
+ line-height: 1.7;
+ border: none;
+ outline: none;
+ resize: none;
+ background: transparent;
+ /* Color controlled by theme */
+}
+
+.pane:last-child {
+ padding: 0;
+ /* Background controlled by theme */
+}
+
+.preview-content {
+ max-width: none;
+ margin: 0;
+ padding: 24px 32px;
+ line-height: 1.8;
+ font-size: 15px;
+ /* Color controlled by theme */
+}
+
+/* Status Bar */
+.status-bar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 8px 20px;
+ /* Background and color controlled by theme */
+ font-size: 12px;
+ font-weight: 500;
+}
+
+/* Preview Styles - Modern Typography */
+.preview-content h1, .preview-content h2, .preview-content h3 {
+ /* Color controlled by theme */
+ font-weight: 700;
+ margin-top: 28px;
+ margin-bottom: 16px;
+ line-height: 1.3;
+}
+
+.preview-content h1 {
+ font-size: 2.5em;
+ border-bottom: 3px solid #e1e4e8;
+ padding-bottom: 12px;
+}
+
+.preview-content h2 {
+ font-size: 2em;
+ border-bottom: 2px solid #e1e4e8;
+ padding-bottom: 10px;
+}
+
+.preview-content p {
+ margin-bottom: 18px;
+ line-height: 1.8;
+}
+
+.preview-content code {
+ padding: 3px 8px;
+ margin: 0 2px;
+ font-size: 90%;
+ background: rgba(175, 184, 193, 0.2);
+ border: 1px solid #e1e4e8;
+ border-radius: 6px;
+ font-family: 'JetBrains Mono', 'Fira Code', monospace;
+ font-weight: 500;
+}
+
+.preview-content pre {
+ padding: 20px;
+ overflow-x: auto;
+ font-size: 14px;
+ line-height: 1.6;
+ background: #f6f8fa;
+ border: 1px solid #e1e4e8;
+ border-radius: 12px;
+ margin-bottom: 20px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.preview-content pre code {
+ background: transparent;
+ border: none;
+ padding: 0;
+ margin: 0;
+}
+
+.preview-content blockquote {
+ padding: 16px 20px;
+ color: var(--gray-700);
+ border-left: 4px solid #e1e4e8;
+ margin-bottom: 20px;
+ background: #f6f8fa;
+ border-radius: 0 8px 8px 0;
+ font-style: italic;
+}
+
+.preview-content a {
+ color: #0366d6;
+ text-decoration: none;
+ font-weight: 600;
+ position: relative;
+ transition: color var(--transition-speed);
+}
+
+.preview-content a::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: -2px;
+ width: 0;
+ height: 2px;
+ background: #0366d6;
+ transition: width var(--transition-speed) var(--transition-ease);
+}
+
+.preview-content a:hover {
+ color: #0366d6;
+}
+
+.preview-content a:hover::after {
+ width: 100%;
+}
+
+.preview-content table {
+ border-collapse: separate;
+ border-spacing: 0;
+ margin-bottom: 20px;
+ width: 100%;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.preview-content table th,
+.preview-content table td {
+ padding: 12px 16px;
+ border: 1px solid #e1e4e8;
+}
+
+.preview-content table th {
+ font-weight: 600;
+ background: #f0f0f0;
+ color: #333333;
+}
+
+.preview-content table tr:nth-child(even) {
+ background: rgba(255, 255, 255, 0.5);
+}
+
+/* Modern Dialogs */
+.export-dialog,
+.batch-dialog,
+.find-dialog-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.4);
+ backdrop-filter: blur(8px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+ animation: fadeIn 0.3s var(--transition-ease);
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.export-dialog.hidden,
+.batch-dialog.hidden {
+ display: none;
+}
+
+.export-dialog-content,
+.batch-dialog-content {
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ border-radius: 20px;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+ width: 90%;
+ max-width: 650px;
+ max-height: 90vh;
+ overflow-y: auto;
+ animation: slideUpFade 0.4s var(--transition-ease);
+}
+
+@keyframes slideUpFade {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.export-dialog-header,
+.batch-dialog-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 20px 24px;
+ border-bottom: 1px solid #e1e4e8;
+ background: #24292e;
+ border-radius: 20px 20px 0 0;
+}
+
+.export-dialog-header h3,
+.batch-dialog-header h3 {
+ margin: 0;
+ font-size: 20px;
+ font-weight: 700;
+ color: white;
+}
+
+.export-dialog-body,
+.batch-dialog-body {
+ padding: 24px;
+}
+
+.export-section,
+.batch-section {
+ margin-bottom: 20px;
+}
+
+.export-section label,
+.batch-section label {
+ display: block;
+ font-weight: 600;
+ margin-bottom: 8px;
+ color: var(--gray-700);
+ font-size: 14px;
+}
+
+.export-section select,
+.export-section input,
+.batch-section select,
+.batch-section input {
+ width: 100%;
+ padding: 10px 14px;
+ border: 2px solid #e1e4e8;
+ border-radius: 10px;
+ font-size: 14px;
+ background: rgba(255, 255, 255, 0.8);
+ backdrop-filter: blur(5px);
+ transition: all var(--transition-speed) var(--transition-ease);
+}
+
+.export-section select:focus,
+.export-section input:focus,
+.batch-section select:focus,
+.batch-section input:focus {
+ outline: none;
+ border-color: #0366d6;
+ box-shadow: 0 0 0 4px rgba(3, 102, 214, 0.1);
+ background: white;
+}
+
+/* Modern Buttons */
+.export-dialog-footer,
+.batch-dialog-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 12px;
+ padding: 20px 24px;
+ border-top: 1px solid #e1e4e8;
+ background: #f6f8fa;
+ border-radius: 0 0 20px 20px;
+}
+
+.export-dialog-footer button,
+.batch-dialog-footer button,
+.folder-input-group button {
+ padding: 10px 24px;
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 600;
+ transition: all var(--transition-speed) var(--transition-ease);
+ position: relative;
+ overflow: hidden;
+}
+
+.export-dialog-footer button.primary,
+.batch-dialog-footer button.primary {
+ background: #2ea44f;
+ color: white;
+ box-shadow: 0 4px 12px rgba(46, 164, 79, 0.3);
+}
+
+.export-dialog-footer button.primary:hover,
+.batch-dialog-footer button.primary:hover {
+ transform: translateY(-2px);
+ background: #22863a;
+ box-shadow: 0 6px 20px rgba(34, 134, 58, 0.4);
+}
+
+.export-dialog-footer button:not(.primary),
+.batch-dialog-footer button:not(.primary),
+.folder-input-group button {
+ background: #fafbfc;
+ color: var(--gray-700);
+ border: 1px solid #e1e4e8;
+}
+
+.export-dialog-footer button:not(.primary):hover,
+.batch-dialog-footer button:not(.primary):hover,
+.folder-input-group button:hover {
+ background: #f3f4f6;
+ border-color: #d0d7de;
+ transform: translateY(-2px);
+}
+
+/* Find Dialog - Floating Modern */
+.find-dialog {
+ position: absolute;
+ top: 70px;
+ right: 24px;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ border-radius: 16px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ min-width: 420px;
+ padding: 16px;
+ animation: slideInRight 0.3s var(--transition-ease);
+}
+
+@keyframes slideInRight {
+ from {
+ opacity: 0;
+ transform: translateX(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.find-dialog.hidden {
+ display: none;
+}
+
+/* Progress Bars - Modern Gradient */
+.progress-bar {
+ width: 100%;
+ height: 8px;
+ background: #e1e4e8;
+ border-radius: 10px;
+ overflow: hidden;
+ margin-bottom: 12px;
+}
+
+.progress-fill {
+ height: 100%;
+ background: #2ea44f;
+ transition: width 0.4s var(--transition-ease);
+ width: 0%;
+ position: relative;
+ overflow: hidden;
+}
+
+.progress-fill::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(90deg,
+ transparent,
+ rgba(255, 255, 255, 0.3),
+ transparent
+ );
+ animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+/* Auto-save Indicator - Modern */
+.auto-save-indicator {
+ position: fixed;
+ top: 24px;
+ right: 24px;
+ background: #2ea44f;
+ color: white;
+ padding: 10px 20px;
+ border-radius: 12px;
+ font-size: 13px;
+ font-weight: 600;
+ z-index: 10000;
+ box-shadow: 0 4px 20px rgba(46, 164, 79, 0.3);
+ animation: slideInRight 0.3s ease-out;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.auto-save-indicator::before {
+ content: '✓';
+ display: inline-block;
+ width: 18px;
+ height: 18px;
+ background: white;
+ color: #2ea44f;
+ border-radius: 50%;
+ font-size: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+}
+
+/* Enhanced Statistics - Modern */
+.enhanced-stats {
+ font-size: 11px;
+ color: var(--gray-600);
+ padding: 2px 0;
+ margin-left: 16px;
+ font-family: 'JetBrains Mono', monospace;
+ font-weight: 500;
+}
+
+/* Line Numbers - Modern */
+.line-numbers {
+ min-width: 50px;
+ padding: 12px 8px;
+ background: rgba(255, 255, 255, 0.3);
+ backdrop-filter: blur(8px);
+ border-right: 1px solid #e1e4e8;
+ font-family: 'JetBrains Mono', monospace;
+ font-size: 13px;
+ line-height: 1.7;
+ color: var(--gray-500);
+ text-align: right;
+ user-select: none;
+ overflow: hidden;
+}
+
+.line-numbers.hidden {
+ display: none;
+}
+
+/* Animations & Transitions */
+.toolbar button,
+.tab,
+.new-tab-button,
+.export-dialog-footer button,
+.batch-dialog-footer button {
+ position: relative;
+ overflow: hidden;
+}
+
+.toolbar button::before,
+.tab::before,
+.new-tab-button::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.4);
+ transform: translate(-50%, -50%);
+ transition: width 0.6s, height 0.6s;
+}
+
+.toolbar button:hover::before,
+.tab:hover::before,
+.new-tab-button:hover::before {
+ width: 200px;
+ height: 200px;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .container {
+ padding: 8px;
+ gap: 8px;
+ }
+
+ .export-dialog-content,
+ .batch-dialog-content {
+ max-width: 95%;
+ }
+
+ .find-dialog {
+ right: 12px;
+ min-width: 320px;
+ }
+}
+
+/* Hide default elements */
+.pane.hidden {
+ display: none;
+}
+
+.pane.full-width {
+ border-right: none;
+}
+
+/* ========================================
+ Dynamic Pane Resizer
+ Draggable splitter between editor/preview
+ ======================================== */
+
+.pane-resizer {
+ width: 6px;
+ background: linear-gradient(to right, #e1e4e8, #d0d7de, #e1e4e8);
+ cursor: col-resize;
+ position: relative;
+ flex-shrink: 0;
+ transition: background 0.2s ease;
+ border-radius: 3px;
+}
+
+.pane-resizer:hover {
+ background: linear-gradient(to right, #0366d6, #0366d6, #0366d6);
+}
+
+.pane-resizer:active {
+ background: #0366d6;
+}
+
+.pane-resizer::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 2px;
+ height: 30px;
+ background: rgba(0, 0, 0, 0.2);
+ border-radius: 1px;
+}
+
+.pane-resizer:hover::before {
+ background: rgba(255, 255, 255, 0.8);
+}
+
+/* Dark theme resizer */
+body.theme-dark .pane-resizer,
+body.theme-one-dark .pane-resizer,
+body.theme-dracula .pane-resizer,
+body.theme-nord .pane-resizer,
+body.theme-tokyo-night .pane-resizer,
+body.theme-palenight .pane-resizer,
+body.theme-ayu-dark .pane-resizer,
+body.theme-ayu-mirage .pane-resizer,
+body.theme-oceanic-next .pane-resizer,
+body.theme-gruvbox-dark .pane-resizer,
+body.theme-cobalt2 .pane-resizer {
+ background: linear-gradient(to right, #333, #444, #333);
+}
+
+body.theme-dark .pane-resizer:hover,
+body.theme-one-dark .pane-resizer:hover,
+body.theme-dracula .pane-resizer:hover {
+ background: #61afef;
+}
+
+/* ========================================
+ PDF Viewer Styles
+ Full-featured PDF reader
+ ======================================== */
+
+.pdf-viewer-container {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ background: #525659;
+}
+
+.pdf-viewer-container.hidden {
+ display: none;
+}
+
+.pdf-viewer-toolbar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ background: #323639;
+ border-bottom: 1px solid #1a1a1a;
+ flex-shrink: 0;
+}
+
+.pdf-viewer-toolbar button {
+ background: #474a4d;
+ border: 1px solid #5a5d60;
+ border-radius: 4px;
+ color: #fff;
+ padding: 6px 10px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: all 0.15s ease;
+}
+
+.pdf-viewer-toolbar button:hover {
+ background: #5a5d60;
+}
+
+.pdf-viewer-toolbar button:active {
+ background: #0366d6;
+}
+
+.pdf-toolbar-separator {
+ width: 1px;
+ height: 24px;
+ background: #5a5d60;
+ margin: 0 4px;
+}
+
+#pdf-page-info {
+ color: #fff;
+ font-size: 13px;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+#pdf-page-input {
+ width: 50px;
+ padding: 4px 6px;
+ border: 1px solid #5a5d60;
+ border-radius: 4px;
+ background: #474a4d;
+ color: #fff;
+ text-align: center;
+ font-size: 13px;
+}
+
+#pdf-zoom-level {
+ color: #fff;
+ font-size: 13px;
+ min-width: 50px;
+ text-align: center;
+}
+
+.pdf-filename {
+ color: #aaa;
+ font-size: 12px;
+ flex: 1;
+ text-align: right;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-right: 8px;
+}
+
+#pdf-close {
+ background: #c0392b !important;
+ border-color: #e74c3c !important;
+}
+
+#pdf-close:hover {
+ background: #e74c3c !important;
+}
+
+/* PDF Editor Toolbar Buttons */
+.pdf-editor-btn {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ background: linear-gradient(135deg, #3498db, #2980b9) !important;
+ border: 1px solid #2980b9 !important;
+ color: #fff !important;
+ padding: 5px 8px !important;
+ font-size: 11px !important;
+ font-weight: 500;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.pdf-editor-btn:hover {
+ background: linear-gradient(135deg, #2980b9, #1a5276) !important;
+ transform: translateY(-1px);
+}
+
+.pdf-editor-btn:active {
+ transform: translateY(0);
+}
+
+.pdf-editor-btn svg {
+ flex-shrink: 0;
+}
+
+.pdf-editor-btn span {
+ white-space: nowrap;
+}
+
+/* PDF toolbar wrapping for smaller screens */
+.pdf-toolbar-main {
+ flex-wrap: wrap;
+ min-height: auto;
+ padding: 6px 10px !important;
+}
+
+/* Light theme PDF toolbar - refined styling */
+body.theme-light .pdf-viewer-toolbar,
+body.theme-atomonelight .pdf-viewer-toolbar,
+body.theme-github .pdf-viewer-toolbar,
+body.theme-solarized .pdf-viewer-toolbar,
+body.theme-gruvbox-light .pdf-viewer-toolbar,
+body.theme-ayu-light .pdf-viewer-toolbar,
+body.theme-sepia .pdf-viewer-toolbar,
+body.theme-paper .pdf-viewer-toolbar,
+body.theme-rosepine-dawn .pdf-viewer-toolbar {
+ background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%) !important;
+ border-bottom: 1px solid #d0d0d0 !important;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+
+body.theme-light .pdf-viewer-toolbar button,
+body.theme-atomonelight .pdf-viewer-toolbar button,
+body.theme-github .pdf-viewer-toolbar button,
+body.theme-solarized .pdf-viewer-toolbar button,
+body.theme-gruvbox-light .pdf-viewer-toolbar button,
+body.theme-ayu-light .pdf-viewer-toolbar button,
+body.theme-sepia .pdf-viewer-toolbar button,
+body.theme-paper .pdf-viewer-toolbar button,
+body.theme-rosepine-dawn .pdf-viewer-toolbar button {
+ background: #fff !important;
+ border: 1px solid #ccc !important;
+ color: #333 !important;
+ box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+body.theme-light .pdf-viewer-toolbar button:hover,
+body.theme-atomonelight .pdf-viewer-toolbar button:hover,
+body.theme-github .pdf-viewer-toolbar button:hover,
+body.theme-solarized .pdf-viewer-toolbar button:hover,
+body.theme-gruvbox-light .pdf-viewer-toolbar button:hover,
+body.theme-ayu-light .pdf-viewer-toolbar button:hover,
+body.theme-sepia .pdf-viewer-toolbar button:hover,
+body.theme-paper .pdf-viewer-toolbar button:hover,
+body.theme-rosepine-dawn .pdf-viewer-toolbar button:hover {
+ background: #e8e8e8 !important;
+ border-color: #bbb !important;
+}
+
+/* Light theme PDF editor buttons */
+body.theme-light .pdf-editor-btn,
+body.theme-atomonelight .pdf-editor-btn,
+body.theme-github .pdf-editor-btn,
+body.theme-solarized .pdf-editor-btn,
+body.theme-gruvbox-light .pdf-editor-btn,
+body.theme-ayu-light .pdf-editor-btn,
+body.theme-sepia .pdf-editor-btn,
+body.theme-paper .pdf-editor-btn,
+body.theme-rosepine-dawn .pdf-editor-btn {
+ background: linear-gradient(135deg, #4a90d9, #357abd) !important;
+ border: 1px solid #357abd !important;
+}
+
+body.theme-light .pdf-editor-btn:hover,
+body.theme-atomonelight .pdf-editor-btn:hover,
+body.theme-github .pdf-editor-btn:hover,
+body.theme-solarized .pdf-editor-btn:hover,
+body.theme-gruvbox-light .pdf-editor-btn:hover,
+body.theme-ayu-light .pdf-editor-btn:hover,
+body.theme-sepia .pdf-editor-btn:hover,
+body.theme-paper .pdf-editor-btn:hover,
+body.theme-rosepine-dawn .pdf-editor-btn:hover {
+ background: linear-gradient(135deg, #357abd, #2868a0) !important;
+}
+
+/* Light theme page info */
+body.theme-light #pdf-page-info,
+body.theme-atomonelight #pdf-page-info,
+body.theme-github #pdf-page-info,
+body.theme-solarized #pdf-page-info,
+body.theme-gruvbox-light #pdf-page-info,
+body.theme-ayu-light #pdf-page-info,
+body.theme-sepia #pdf-page-info,
+body.theme-paper #pdf-page-info,
+body.theme-rosepine-dawn #pdf-page-info,
+body.theme-light #pdf-zoom-level,
+body.theme-atomonelight #pdf-zoom-level,
+body.theme-github #pdf-zoom-level,
+body.theme-solarized #pdf-zoom-level,
+body.theme-gruvbox-light #pdf-zoom-level,
+body.theme-ayu-light #pdf-zoom-level,
+body.theme-sepia #pdf-zoom-level,
+body.theme-paper #pdf-zoom-level,
+body.theme-rosepine-dawn #pdf-zoom-level {
+ color: #444 !important;
+ font-weight: 500;
+}
+
+body.theme-light #pdf-page-input,
+body.theme-atomonelight #pdf-page-input,
+body.theme-github #pdf-page-input,
+body.theme-solarized #pdf-page-input,
+body.theme-gruvbox-light #pdf-page-input,
+body.theme-ayu-light #pdf-page-input,
+body.theme-sepia #pdf-page-input,
+body.theme-paper #pdf-page-input,
+body.theme-rosepine-dawn #pdf-page-input {
+ background: #fff !important;
+ border: 1px solid #ccc !important;
+ color: #333 !important;
+}
+
+body.theme-light .pdf-toolbar-separator,
+body.theme-atomonelight .pdf-toolbar-separator,
+body.theme-github .pdf-toolbar-separator,
+body.theme-solarized .pdf-toolbar-separator,
+body.theme-gruvbox-light .pdf-toolbar-separator,
+body.theme-ayu-light .pdf-toolbar-separator,
+body.theme-sepia .pdf-toolbar-separator,
+body.theme-paper .pdf-toolbar-separator,
+body.theme-rosepine-dawn .pdf-toolbar-separator {
+ background: #d0d0d0 !important;
+}
+
+body.theme-light .pdf-filename,
+body.theme-atomonelight .pdf-filename,
+body.theme-github .pdf-filename,
+body.theme-solarized .pdf-filename,
+body.theme-gruvbox-light .pdf-filename,
+body.theme-ayu-light .pdf-filename,
+body.theme-sepia .pdf-filename,
+body.theme-paper .pdf-filename,
+body.theme-rosepine-dawn .pdf-filename {
+ color: #555 !important;
+}
+
+/* Sepia theme specific */
+body.theme-sepia .pdf-viewer-toolbar {
+ background: linear-gradient(180deg, #f4f0e8 0%, #e8e4dc 100%) !important;
+ border-bottom-color: #cdc8c0 !important;
+}
+
+body.theme-sepia .pdf-viewer {
+ background: #d8d4cc !important;
+}
+
+/* Rose Pine Dawn specific */
+body.theme-rosepine-dawn .pdf-viewer-toolbar {
+ background: linear-gradient(180deg, #faf4ed 0%, #f2e9e1 100%) !important;
+ border-bottom-color: #ddd8d1 !important;
+}
+
+body.theme-rosepine-dawn .pdf-viewer {
+ background: #e6e0d8 !important;
+}
+
+/* Dark theme PDF toolbar refinement */
+body.theme-dark .pdf-viewer-toolbar,
+body.theme-onedark .pdf-viewer-toolbar,
+body.theme-one-dark .pdf-viewer-toolbar,
+body.theme-dracula .pdf-viewer-toolbar,
+body.theme-nord .pdf-viewer-toolbar,
+body.theme-tokyo-night .pdf-viewer-toolbar,
+body.theme-tokyonight .pdf-viewer-toolbar,
+body.theme-palenight .pdf-viewer-toolbar,
+body.theme-monokai .pdf-viewer-toolbar,
+body.theme-material .pdf-viewer-toolbar,
+body.theme-gruvbox-dark .pdf-viewer-toolbar,
+body.theme-ayu-dark .pdf-viewer-toolbar,
+body.theme-ayu-mirage .pdf-viewer-toolbar,
+body.theme-oceanic-next .pdf-viewer-toolbar,
+body.theme-cobalt2 .pdf-viewer-toolbar,
+body.theme-concrete-dark .pdf-viewer-toolbar,
+body.theme-concrete-warm .pdf-viewer-toolbar {
+ background: linear-gradient(180deg, #2d2d2d 0%, #252525 100%) !important;
+ border-bottom: 1px solid #1a1a1a !important;
+}
+
+body.theme-dark .pdf-viewer-toolbar button,
+body.theme-onedark .pdf-viewer-toolbar button,
+body.theme-one-dark .pdf-viewer-toolbar button,
+body.theme-dracula .pdf-viewer-toolbar button,
+body.theme-nord .pdf-viewer-toolbar button,
+body.theme-tokyo-night .pdf-viewer-toolbar button,
+body.theme-tokyonight .pdf-viewer-toolbar button,
+body.theme-palenight .pdf-viewer-toolbar button,
+body.theme-monokai .pdf-viewer-toolbar button,
+body.theme-material .pdf-viewer-toolbar button,
+body.theme-gruvbox-dark .pdf-viewer-toolbar button,
+body.theme-ayu-dark .pdf-viewer-toolbar button,
+body.theme-ayu-mirage .pdf-viewer-toolbar button,
+body.theme-oceanic-next .pdf-viewer-toolbar button,
+body.theme-cobalt2 .pdf-viewer-toolbar button,
+body.theme-concrete-dark .pdf-viewer-toolbar button,
+body.theme-concrete-warm .pdf-viewer-toolbar button {
+ background: #3d3d3d !important;
+ border: 1px solid #4d4d4d !important;
+ color: #e0e0e0 !important;
+}
+
+body.theme-dark .pdf-viewer-toolbar button:hover,
+body.theme-onedark .pdf-viewer-toolbar button:hover,
+body.theme-one-dark .pdf-viewer-toolbar button:hover,
+body.theme-dracula .pdf-viewer-toolbar button:hover,
+body.theme-nord .pdf-viewer-toolbar button:hover,
+body.theme-tokyo-night .pdf-viewer-toolbar button:hover,
+body.theme-tokyonight .pdf-viewer-toolbar button:hover,
+body.theme-palenight .pdf-viewer-toolbar button:hover,
+body.theme-monokai .pdf-viewer-toolbar button:hover,
+body.theme-material .pdf-viewer-toolbar button:hover,
+body.theme-gruvbox-dark .pdf-viewer-toolbar button:hover,
+body.theme-ayu-dark .pdf-viewer-toolbar button:hover,
+body.theme-ayu-mirage .pdf-viewer-toolbar button:hover,
+body.theme-oceanic-next .pdf-viewer-toolbar button:hover,
+body.theme-cobalt2 .pdf-viewer-toolbar button:hover,
+body.theme-concrete-dark .pdf-viewer-toolbar button:hover,
+body.theme-concrete-warm .pdf-viewer-toolbar button:hover {
+ background: #4d4d4d !important;
+ border-color: #5d5d5d !important;
+}
+
+body.theme-dark .pdf-viewer,
+body.theme-onedark .pdf-viewer,
+body.theme-one-dark .pdf-viewer,
+body.theme-dracula .pdf-viewer,
+body.theme-nord .pdf-viewer,
+body.theme-tokyo-night .pdf-viewer,
+body.theme-tokyonight .pdf-viewer,
+body.theme-palenight .pdf-viewer,
+body.theme-monokai .pdf-viewer,
+body.theme-material .pdf-viewer,
+body.theme-gruvbox-dark .pdf-viewer,
+body.theme-ayu-dark .pdf-viewer,
+body.theme-ayu-mirage .pdf-viewer,
+body.theme-oceanic-next .pdf-viewer,
+body.theme-cobalt2 .pdf-viewer,
+body.theme-concrete-dark .pdf-viewer,
+body.theme-concrete-warm .pdf-viewer {
+ background: #1a1a1a !important;
+}
+
+body.theme-dark .pdf-viewer-container,
+body.theme-onedark .pdf-viewer-container,
+body.theme-one-dark .pdf-viewer-container,
+body.theme-dracula .pdf-viewer-container,
+body.theme-nord .pdf-viewer-container,
+body.theme-tokyo-night .pdf-viewer-container,
+body.theme-tokyonight .pdf-viewer-container,
+body.theme-palenight .pdf-viewer-container,
+body.theme-monokai .pdf-viewer-container,
+body.theme-material .pdf-viewer-container,
+body.theme-gruvbox-dark .pdf-viewer-container,
+body.theme-ayu-dark .pdf-viewer-container,
+body.theme-ayu-mirage .pdf-viewer-container,
+body.theme-oceanic-next .pdf-viewer-container,
+body.theme-cobalt2 .pdf-viewer-container,
+body.theme-concrete-dark .pdf-viewer-container,
+body.theme-concrete-warm .pdf-viewer-container {
+ background: #1a1a1a !important;
+}
+
+body.theme-dark #pdf-page-input,
+body.theme-onedark #pdf-page-input,
+body.theme-one-dark #pdf-page-input,
+body.theme-dracula #pdf-page-input,
+body.theme-nord #pdf-page-input,
+body.theme-tokyo-night #pdf-page-input,
+body.theme-tokyonight #pdf-page-input,
+body.theme-palenight #pdf-page-input,
+body.theme-monokai #pdf-page-input,
+body.theme-material #pdf-page-input,
+body.theme-gruvbox-dark #pdf-page-input,
+body.theme-ayu-dark #pdf-page-input,
+body.theme-ayu-mirage #pdf-page-input,
+body.theme-oceanic-next #pdf-page-input,
+body.theme-cobalt2 #pdf-page-input,
+body.theme-concrete-dark #pdf-page-input,
+body.theme-concrete-warm #pdf-page-input {
+ background: #3d3d3d !important;
+ border: 1px solid #4d4d4d !important;
+ color: #e0e0e0 !important;
+}
+
+body.theme-dark .pdf-toolbar-separator,
+body.theme-onedark .pdf-toolbar-separator,
+body.theme-one-dark .pdf-toolbar-separator,
+body.theme-dracula .pdf-toolbar-separator,
+body.theme-nord .pdf-toolbar-separator,
+body.theme-tokyo-night .pdf-toolbar-separator,
+body.theme-tokyonight .pdf-toolbar-separator,
+body.theme-palenight .pdf-toolbar-separator,
+body.theme-monokai .pdf-toolbar-separator,
+body.theme-material .pdf-toolbar-separator,
+body.theme-gruvbox-dark .pdf-toolbar-separator,
+body.theme-ayu-dark .pdf-toolbar-separator,
+body.theme-ayu-mirage .pdf-toolbar-separator,
+body.theme-oceanic-next .pdf-toolbar-separator,
+body.theme-cobalt2 .pdf-toolbar-separator,
+body.theme-concrete-dark .pdf-toolbar-separator,
+body.theme-concrete-warm .pdf-toolbar-separator {
+ background: #3d3d3d !important;
+}
+
+.pdf-viewer {
+ flex: 1;
+ overflow: auto;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ padding: 20px;
+ background: #525659;
+}
+
+#pdf-canvas {
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+ background: white;
+}
+
+/* Light theme PDF viewer */
+body.theme-light .pdf-viewer-container,
+body.theme-atomonelight .pdf-viewer-container,
+body.theme-github .pdf-viewer-container,
+body.theme-solarized .pdf-viewer-container,
+body.theme-gruvbox-light .pdf-viewer-container,
+body.theme-ayu-light .pdf-viewer-container,
+body.theme-sepia .pdf-viewer-container,
+body.theme-paper .pdf-viewer-container,
+body.theme-rosepine-dawn .pdf-viewer-container {
+ background: #e8e8e8;
+}
+
+body.theme-light .pdf-viewer-toolbar,
+body.theme-atomonelight .pdf-viewer-toolbar,
+body.theme-github .pdf-viewer-toolbar,
+body.theme-solarized .pdf-viewer-toolbar,
+body.theme-gruvbox-light .pdf-viewer-toolbar,
+body.theme-ayu-light .pdf-viewer-toolbar,
+body.theme-sepia .pdf-viewer-toolbar,
+body.theme-paper .pdf-viewer-toolbar,
+body.theme-rosepine-dawn .pdf-viewer-toolbar {
+ background: #f5f5f5;
+ border-bottom-color: #ddd;
+}
+
+body.theme-light .pdf-viewer-toolbar button,
+body.theme-atomonelight .pdf-viewer-toolbar button,
+body.theme-github .pdf-viewer-toolbar button {
+ background: #fff;
+ border-color: #ddd;
+ color: #333;
+}
+
+body.theme-light .pdf-viewer-toolbar button:hover,
+body.theme-atomonelight .pdf-viewer-toolbar button:hover,
+body.theme-github .pdf-viewer-toolbar button:hover {
+ background: #e8e8e8;
+}
+
+body.theme-light #pdf-page-info,
+body.theme-atomonelight #pdf-page-info,
+body.theme-github #pdf-page-info,
+body.theme-light #pdf-zoom-level,
+body.theme-atomonelight #pdf-zoom-level,
+body.theme-github #pdf-zoom-level {
+ color: #333;
+}
+
+body.theme-light #pdf-page-input,
+body.theme-atomonelight #pdf-page-input,
+body.theme-github #pdf-page-input {
+ background: #fff;
+ border-color: #ddd;
+ color: #333;
+}
+
+body.theme-light .pdf-filename,
+body.theme-atomonelight .pdf-filename,
+body.theme-github .pdf-filename {
+ color: #666;
+}
+
+body.theme-light .pdf-viewer,
+body.theme-atomonelight .pdf-viewer,
+body.theme-github .pdf-viewer,
+body.theme-solarized .pdf-viewer,
+body.theme-gruvbox-light .pdf-viewer,
+body.theme-ayu-light .pdf-viewer,
+body.theme-sepia .pdf-viewer,
+body.theme-paper .pdf-viewer,
+body.theme-rosepine-dawn .pdf-viewer {
+ background: #d0d0d0;
+}
+
+/* ========================================
+ Print Styles for styles-modern.css
+ Ensures proper print output
+ ======================================== */
+
+@media print {
+ /* Reset container for print */
+ .container {
+ padding: 0;
+ gap: 0;
+ display: block !important;
+ }
+
+ /* Hide all UI elements */
+ .tab-bar,
+ .toolbar,
+ .status-bar,
+ .pane-resizer,
+ .preview-header,
+ .find-dialog,
+ .export-dialog,
+ .batch-dialog,
+ .editor-pane,
+ [id^="editor-pane-"],
+ .new-tab-button,
+ .tab-close {
+ display: none !important;
+ }
+
+ /* Show preview content */
+ .preview-pane,
+ [id^="preview-pane-"],
+ .preview-content,
+ [id^="preview-"] {
+ display: block !important;
+ width: 100% !important;
+ padding: 20px !important;
+ position: static !important;
+ overflow: visible !important;
+ }
+
+ /* Reset main content glass */
+ .main-content-glass {
+ backdrop-filter: none !important;
+ border: none !important;
+ box-shadow: none !important;
+ }
+
+ /* Reset editor container */
+ .editor-container {
+ display: block !important;
+ }
+
+ /* Reset tab content */
+ .tab-content {
+ display: block !important;
+ }
+
+ /* Reset pane */
+ .pane {
+ display: block !important;
+ width: 100% !important;
+ }
+
+ /* NO STYLES MODE - Black text on white (ink-saving) */
+ body.printing-no-styles .container,
+ body.printing-no-styles .main-content-glass,
+ body.printing-no-styles .tab-content,
+ body.printing-no-styles .pane,
+ body.printing-no-styles .preview-pane,
+ body.printing-no-styles [id^="preview-pane-"],
+ body.printing-no-styles .preview-content,
+ body.printing-no-styles [id^="preview-"] {
+ background: white !important;
+ color: #000 !important;
+ }
+
+ body.printing-no-styles .preview-content h1,
+ body.printing-no-styles .preview-content h2,
+ body.printing-no-styles .preview-content h3,
+ body.printing-no-styles .preview-content h4,
+ body.printing-no-styles .preview-content h5,
+ body.printing-no-styles .preview-content h6,
+ body.printing-no-styles .preview-content p,
+ body.printing-no-styles .preview-content li,
+ body.printing-no-styles .preview-content td,
+ body.printing-no-styles .preview-content th {
+ color: #000 !important;
+ }
+
+ body.printing-no-styles .preview-content code,
+ body.printing-no-styles .preview-content pre {
+ background: #f5f5f5 !important;
+ color: #000 !important;
+ border-color: #ddd !important;
+ }
+
+ body.printing-no-styles .preview-content a {
+ color: #000 !important;
+ }
+
+ body.printing-no-styles .preview-content blockquote {
+ background: #f9f9f9 !important;
+ color: #333 !important;
+ border-left-color: #ccc !important;
+ }
+
+ /* WITH STYLES MODE - Preserve theme colors */
+ /* The theme colors are inherited from the body class */
+}
+
+/* ========================================
+ Dark Theme Overrides for styles-modern.css
+ These ensure dark themes work properly
+ ======================================== */
+
+/* Common dark theme styles for preview content */
+body.theme-dark .preview-content,
+body.theme-dark [id^="preview-"],
+body.theme-one-dark .preview-content,
+body.theme-one-dark [id^="preview-"],
+body.theme-dracula .preview-content,
+body.theme-dracula [id^="preview-"],
+body.theme-nord .preview-content,
+body.theme-nord [id^="preview-"],
+body.theme-tokyo-night .preview-content,
+body.theme-tokyo-night [id^="preview-"],
+body.theme-palenight .preview-content,
+body.theme-palenight [id^="preview-"],
+body.theme-ayu-dark .preview-content,
+body.theme-ayu-dark [id^="preview-"],
+body.theme-ayu-mirage .preview-content,
+body.theme-ayu-mirage [id^="preview-"],
+body.theme-oceanic-next .preview-content,
+body.theme-oceanic-next [id^="preview-"],
+body.theme-gruvbox-dark .preview-content,
+body.theme-gruvbox-dark [id^="preview-"],
+body.theme-cobalt2 .preview-content,
+body.theme-cobalt2 [id^="preview-"] {
+ color: #e6e6e6;
+ background: transparent;
+}
+
+/* Dark theme headings */
+body.theme-dark .preview-content h1,
+body.theme-dark .preview-content h2,
+body.theme-dark .preview-content h3,
+body.theme-dark .preview-content h4,
+body.theme-dark .preview-content h5,
+body.theme-dark .preview-content h6,
+body.theme-one-dark .preview-content h1,
+body.theme-one-dark .preview-content h2,
+body.theme-one-dark .preview-content h3,
+body.theme-one-dark .preview-content h4,
+body.theme-one-dark .preview-content h5,
+body.theme-one-dark .preview-content h6,
+body.theme-dracula .preview-content h1,
+body.theme-dracula .preview-content h2,
+body.theme-dracula .preview-content h3,
+body.theme-dracula .preview-content h4,
+body.theme-dracula .preview-content h5,
+body.theme-dracula .preview-content h6,
+body.theme-nord .preview-content h1,
+body.theme-nord .preview-content h2,
+body.theme-nord .preview-content h3,
+body.theme-nord .preview-content h4,
+body.theme-nord .preview-content h5,
+body.theme-nord .preview-content h6,
+body.theme-tokyo-night .preview-content h1,
+body.theme-tokyo-night .preview-content h2,
+body.theme-tokyo-night .preview-content h3,
+body.theme-tokyo-night .preview-content h4,
+body.theme-tokyo-night .preview-content h5,
+body.theme-tokyo-night .preview-content h6,
+body.theme-palenight .preview-content h1,
+body.theme-palenight .preview-content h2,
+body.theme-palenight .preview-content h3,
+body.theme-palenight .preview-content h4,
+body.theme-palenight .preview-content h5,
+body.theme-palenight .preview-content h6,
+body.theme-ayu-dark .preview-content h1,
+body.theme-ayu-dark .preview-content h2,
+body.theme-ayu-dark .preview-content h3,
+body.theme-ayu-dark .preview-content h4,
+body.theme-ayu-dark .preview-content h5,
+body.theme-ayu-dark .preview-content h6,
+body.theme-ayu-mirage .preview-content h1,
+body.theme-ayu-mirage .preview-content h2,
+body.theme-ayu-mirage .preview-content h3,
+body.theme-ayu-mirage .preview-content h4,
+body.theme-ayu-mirage .preview-content h5,
+body.theme-ayu-mirage .preview-content h6,
+body.theme-oceanic-next .preview-content h1,
+body.theme-oceanic-next .preview-content h2,
+body.theme-oceanic-next .preview-content h3,
+body.theme-oceanic-next .preview-content h4,
+body.theme-oceanic-next .preview-content h5,
+body.theme-oceanic-next .preview-content h6,
+body.theme-gruvbox-dark .preview-content h1,
+body.theme-gruvbox-dark .preview-content h2,
+body.theme-gruvbox-dark .preview-content h3,
+body.theme-gruvbox-dark .preview-content h4,
+body.theme-gruvbox-dark .preview-content h5,
+body.theme-gruvbox-dark .preview-content h6,
+body.theme-cobalt2 .preview-content h1,
+body.theme-cobalt2 .preview-content h2,
+body.theme-cobalt2 .preview-content h3,
+body.theme-cobalt2 .preview-content h4,
+body.theme-cobalt2 .preview-content h5,
+body.theme-cobalt2 .preview-content h6 {
+ color: #f0f0f0;
+ border-bottom-color: #444;
+}
+
+/* Dark theme paragraphs and text */
+body.theme-dark .preview-content p,
+body.theme-dark .preview-content li,
+body.theme-dark .preview-content td,
+body.theme-one-dark .preview-content p,
+body.theme-one-dark .preview-content li,
+body.theme-one-dark .preview-content td,
+body.theme-dracula .preview-content p,
+body.theme-dracula .preview-content li,
+body.theme-dracula .preview-content td,
+body.theme-nord .preview-content p,
+body.theme-nord .preview-content li,
+body.theme-nord .preview-content td,
+body.theme-tokyo-night .preview-content p,
+body.theme-tokyo-night .preview-content li,
+body.theme-tokyo-night .preview-content td,
+body.theme-palenight .preview-content p,
+body.theme-palenight .preview-content li,
+body.theme-palenight .preview-content td,
+body.theme-ayu-dark .preview-content p,
+body.theme-ayu-dark .preview-content li,
+body.theme-ayu-dark .preview-content td,
+body.theme-ayu-mirage .preview-content p,
+body.theme-ayu-mirage .preview-content li,
+body.theme-ayu-mirage .preview-content td,
+body.theme-oceanic-next .preview-content p,
+body.theme-oceanic-next .preview-content li,
+body.theme-oceanic-next .preview-content td,
+body.theme-gruvbox-dark .preview-content p,
+body.theme-gruvbox-dark .preview-content li,
+body.theme-gruvbox-dark .preview-content td,
+body.theme-cobalt2 .preview-content p,
+body.theme-cobalt2 .preview-content li,
+body.theme-cobalt2 .preview-content td {
+ color: #d4d4d4;
+}
+
+/* Dark theme code blocks */
+body.theme-dark .preview-content pre,
+body.theme-one-dark .preview-content pre,
+body.theme-dracula .preview-content pre,
+body.theme-nord .preview-content pre,
+body.theme-tokyo-night .preview-content pre,
+body.theme-palenight .preview-content pre,
+body.theme-ayu-dark .preview-content pre,
+body.theme-ayu-mirage .preview-content pre,
+body.theme-oceanic-next .preview-content pre,
+body.theme-gruvbox-dark .preview-content pre,
+body.theme-cobalt2 .preview-content pre {
+ background: #1e1e1e;
+ border-color: #333;
+ color: #d4d4d4;
+}
+
+/* Dark theme inline code */
+body.theme-dark .preview-content code,
+body.theme-one-dark .preview-content code,
+body.theme-dracula .preview-content code,
+body.theme-nord .preview-content code,
+body.theme-tokyo-night .preview-content code,
+body.theme-palenight .preview-content code,
+body.theme-ayu-dark .preview-content code,
+body.theme-ayu-mirage .preview-content code,
+body.theme-oceanic-next .preview-content code,
+body.theme-gruvbox-dark .preview-content code,
+body.theme-cobalt2 .preview-content code {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: #444;
+ color: #e06c75;
+}
+
+/* Dark theme blockquotes */
+body.theme-dark .preview-content blockquote,
+body.theme-one-dark .preview-content blockquote,
+body.theme-dracula .preview-content blockquote,
+body.theme-nord .preview-content blockquote,
+body.theme-tokyo-night .preview-content blockquote,
+body.theme-palenight .preview-content blockquote,
+body.theme-ayu-dark .preview-content blockquote,
+body.theme-ayu-mirage .preview-content blockquote,
+body.theme-oceanic-next .preview-content blockquote,
+body.theme-gruvbox-dark .preview-content blockquote,
+body.theme-cobalt2 .preview-content blockquote {
+ background: rgba(255, 255, 255, 0.05);
+ border-left-color: #555;
+ color: #aaa;
+}
+
+/* Dark theme links */
+body.theme-dark .preview-content a,
+body.theme-one-dark .preview-content a,
+body.theme-dracula .preview-content a,
+body.theme-nord .preview-content a,
+body.theme-tokyo-night .preview-content a,
+body.theme-palenight .preview-content a,
+body.theme-ayu-dark .preview-content a,
+body.theme-ayu-mirage .preview-content a,
+body.theme-oceanic-next .preview-content a,
+body.theme-gruvbox-dark .preview-content a,
+body.theme-cobalt2 .preview-content a {
+ color: #61afef;
+}
+
+/* Dark theme tables */
+body.theme-dark .preview-content table,
+body.theme-one-dark .preview-content table,
+body.theme-dracula .preview-content table,
+body.theme-nord .preview-content table,
+body.theme-tokyo-night .preview-content table,
+body.theme-palenight .preview-content table,
+body.theme-ayu-dark .preview-content table,
+body.theme-ayu-mirage .preview-content table,
+body.theme-oceanic-next .preview-content table,
+body.theme-gruvbox-dark .preview-content table,
+body.theme-cobalt2 .preview-content table {
+ border-color: #444;
+}
+
+body.theme-dark .preview-content table th,
+body.theme-one-dark .preview-content table th,
+body.theme-dracula .preview-content table th,
+body.theme-nord .preview-content table th,
+body.theme-tokyo-night .preview-content table th,
+body.theme-palenight .preview-content table th,
+body.theme-ayu-dark .preview-content table th,
+body.theme-ayu-mirage .preview-content table th,
+body.theme-oceanic-next .preview-content table th,
+body.theme-gruvbox-dark .preview-content table th,
+body.theme-cobalt2 .preview-content table th {
+ background: #2d2d2d;
+ color: #e6e6e6;
+ border-color: #444;
+}
+
+body.theme-dark .preview-content table td,
+body.theme-one-dark .preview-content table td,
+body.theme-dracula .preview-content table td,
+body.theme-nord .preview-content table td,
+body.theme-tokyo-night .preview-content table td,
+body.theme-palenight .preview-content table td,
+body.theme-ayu-dark .preview-content table td,
+body.theme-ayu-mirage .preview-content table td,
+body.theme-oceanic-next .preview-content table td,
+body.theme-gruvbox-dark .preview-content table td,
+body.theme-cobalt2 .preview-content table td {
+ border-color: #444;
+}
+
+body.theme-dark .preview-content table tr:nth-child(even),
+body.theme-one-dark .preview-content table tr:nth-child(even),
+body.theme-dracula .preview-content table tr:nth-child(even),
+body.theme-nord .preview-content table tr:nth-child(even),
+body.theme-tokyo-night .preview-content table tr:nth-child(even),
+body.theme-palenight .preview-content table tr:nth-child(even),
+body.theme-ayu-dark .preview-content table tr:nth-child(even),
+body.theme-ayu-mirage .preview-content table tr:nth-child(even),
+body.theme-oceanic-next .preview-content table tr:nth-child(even),
+body.theme-gruvbox-dark .preview-content table tr:nth-child(even),
+body.theme-cobalt2 .preview-content table tr:nth-child(even) {
+ background: rgba(255, 255, 255, 0.03);
+}
+
+/* Dark theme horizontal rules */
+body.theme-dark .preview-content hr,
+body.theme-one-dark .preview-content hr,
+body.theme-dracula .preview-content hr,
+body.theme-nord .preview-content hr,
+body.theme-tokyo-night .preview-content hr,
+body.theme-palenight .preview-content hr,
+body.theme-ayu-dark .preview-content hr,
+body.theme-ayu-mirage .preview-content hr,
+body.theme-oceanic-next .preview-content hr,
+body.theme-gruvbox-dark .preview-content hr,
+body.theme-cobalt2 .preview-content hr {
+ border-color: #444;
+ background: #444;
+}
+
+/* ========================================
+ Modal/Dialog Theming
+ Dialogs inherit app theme colors
+ ======================================== */
+
+/* Dark theme modals */
+body.theme-dark .export-dialog-content,
+body.theme-dark .batch-dialog-content,
+body.theme-dark .pdf-editor-content,
+body.theme-one-dark .export-dialog-content,
+body.theme-one-dark .batch-dialog-content,
+body.theme-one-dark .pdf-editor-content,
+body.theme-onedark .export-dialog-content,
+body.theme-onedark .batch-dialog-content,
+body.theme-onedark .pdf-editor-content,
+body.theme-dracula .export-dialog-content,
+body.theme-dracula .batch-dialog-content,
+body.theme-dracula .pdf-editor-content,
+body.theme-nord .export-dialog-content,
+body.theme-nord .batch-dialog-content,
+body.theme-nord .pdf-editor-content,
+body.theme-tokyo-night .export-dialog-content,
+body.theme-tokyo-night .batch-dialog-content,
+body.theme-tokyo-night .pdf-editor-content,
+body.theme-tokyonight .export-dialog-content,
+body.theme-tokyonight .batch-dialog-content,
+body.theme-tokyonight .pdf-editor-content,
+body.theme-palenight .export-dialog-content,
+body.theme-palenight .batch-dialog-content,
+body.theme-palenight .pdf-editor-content,
+body.theme-ayu-dark .export-dialog-content,
+body.theme-ayu-dark .batch-dialog-content,
+body.theme-ayu-dark .pdf-editor-content,
+body.theme-ayu-mirage .export-dialog-content,
+body.theme-ayu-mirage .batch-dialog-content,
+body.theme-ayu-mirage .pdf-editor-content,
+body.theme-oceanic-next .export-dialog-content,
+body.theme-oceanic-next .batch-dialog-content,
+body.theme-oceanic-next .pdf-editor-content,
+body.theme-gruvbox-dark .export-dialog-content,
+body.theme-gruvbox-dark .batch-dialog-content,
+body.theme-gruvbox-dark .pdf-editor-content,
+body.theme-cobalt2 .export-dialog-content,
+body.theme-cobalt2 .batch-dialog-content,
+body.theme-cobalt2 .pdf-editor-content,
+body.theme-monokai .export-dialog-content,
+body.theme-monokai .batch-dialog-content,
+body.theme-monokai .pdf-editor-content,
+body.theme-material .export-dialog-content,
+body.theme-material .batch-dialog-content,
+body.theme-material .pdf-editor-content,
+body.theme-concrete-dark .export-dialog-content,
+body.theme-concrete-dark .batch-dialog-content,
+body.theme-concrete-dark .pdf-editor-content,
+body.theme-concrete-warm .export-dialog-content,
+body.theme-concrete-warm .batch-dialog-content,
+body.theme-concrete-warm .pdf-editor-content {
+ background: #2d2d2d !important;
+ border-color: #444 !important;
+ color: #e6e6e6 !important;
+}
+
+/* Dark theme dialog headers */
+body.theme-dark .export-dialog-header,
+body.theme-dark .batch-dialog-header,
+body.theme-one-dark .export-dialog-header,
+body.theme-one-dark .batch-dialog-header,
+body.theme-onedark .export-dialog-header,
+body.theme-onedark .batch-dialog-header,
+body.theme-dracula .export-dialog-header,
+body.theme-dracula .batch-dialog-header,
+body.theme-nord .export-dialog-header,
+body.theme-nord .batch-dialog-header,
+body.theme-tokyo-night .export-dialog-header,
+body.theme-tokyo-night .batch-dialog-header,
+body.theme-tokyonight .export-dialog-header,
+body.theme-tokyonight .batch-dialog-header,
+body.theme-palenight .export-dialog-header,
+body.theme-palenight .batch-dialog-header,
+body.theme-ayu-dark .export-dialog-header,
+body.theme-ayu-dark .batch-dialog-header,
+body.theme-ayu-mirage .export-dialog-header,
+body.theme-ayu-mirage .batch-dialog-header,
+body.theme-oceanic-next .export-dialog-header,
+body.theme-oceanic-next .batch-dialog-header,
+body.theme-gruvbox-dark .export-dialog-header,
+body.theme-gruvbox-dark .batch-dialog-header,
+body.theme-cobalt2 .export-dialog-header,
+body.theme-cobalt2 .batch-dialog-header,
+body.theme-monokai .export-dialog-header,
+body.theme-monokai .batch-dialog-header,
+body.theme-material .export-dialog-header,
+body.theme-material .batch-dialog-header,
+body.theme-concrete-dark .export-dialog-header,
+body.theme-concrete-dark .batch-dialog-header,
+body.theme-concrete-warm .export-dialog-header,
+body.theme-concrete-warm .batch-dialog-header {
+ background: #1a1a1a !important;
+ border-bottom-color: #333 !important;
+}
+
+/* Dark theme dialog header text */
+body.theme-dark .export-dialog-header h3,
+body.theme-dark .batch-dialog-header h3,
+body.theme-onedark .export-dialog-header h3,
+body.theme-onedark .batch-dialog-header h3,
+body.theme-dracula .export-dialog-header h3,
+body.theme-dracula .batch-dialog-header h3,
+body.theme-nord .export-dialog-header h3,
+body.theme-nord .batch-dialog-header h3,
+body.theme-tokyonight .export-dialog-header h3,
+body.theme-tokyonight .batch-dialog-header h3,
+body.theme-monokai .export-dialog-header h3,
+body.theme-monokai .batch-dialog-header h3,
+body.theme-material .export-dialog-header h3,
+body.theme-material .batch-dialog-header h3 {
+ color: #fff !important;
+}
+
+/* Dark theme dialog body */
+body.theme-dark .export-dialog-body,
+body.theme-dark .batch-dialog-body,
+body.theme-one-dark .export-dialog-body,
+body.theme-one-dark .batch-dialog-body,
+body.theme-dracula .export-dialog-body,
+body.theme-dracula .batch-dialog-body,
+body.theme-nord .export-dialog-body,
+body.theme-nord .batch-dialog-body,
+body.theme-tokyo-night .export-dialog-body,
+body.theme-tokyo-night .batch-dialog-body,
+body.theme-palenight .export-dialog-body,
+body.theme-palenight .batch-dialog-body,
+body.theme-ayu-dark .export-dialog-body,
+body.theme-ayu-dark .batch-dialog-body,
+body.theme-ayu-mirage .export-dialog-body,
+body.theme-ayu-mirage .batch-dialog-body,
+body.theme-oceanic-next .export-dialog-body,
+body.theme-oceanic-next .batch-dialog-body,
+body.theme-gruvbox-dark .export-dialog-body,
+body.theme-gruvbox-dark .batch-dialog-body,
+body.theme-cobalt2 .export-dialog-body,
+body.theme-cobalt2 .batch-dialog-body {
+ background: transparent;
+}
+
+/* Dark theme dialog labels */
+body.theme-dark .export-section label,
+body.theme-dark .batch-section label,
+body.theme-one-dark .export-section label,
+body.theme-one-dark .batch-section label,
+body.theme-dracula .export-section label,
+body.theme-dracula .batch-section label,
+body.theme-nord .export-section label,
+body.theme-nord .batch-section label,
+body.theme-tokyo-night .export-section label,
+body.theme-tokyo-night .batch-section label,
+body.theme-palenight .export-section label,
+body.theme-palenight .batch-section label,
+body.theme-ayu-dark .export-section label,
+body.theme-ayu-dark .batch-section label,
+body.theme-ayu-mirage .export-section label,
+body.theme-ayu-mirage .batch-section label,
+body.theme-oceanic-next .export-section label,
+body.theme-oceanic-next .batch-section label,
+body.theme-gruvbox-dark .export-section label,
+body.theme-gruvbox-dark .batch-section label,
+body.theme-cobalt2 .export-section label,
+body.theme-cobalt2 .batch-section label {
+ color: #ccc;
+}
+
+/* Dark theme dialog inputs and selects */
+body.theme-dark .export-section select,
+body.theme-dark .export-section input,
+body.theme-dark .batch-section select,
+body.theme-dark .batch-section input,
+body.theme-one-dark .export-section select,
+body.theme-one-dark .export-section input,
+body.theme-one-dark .batch-section select,
+body.theme-one-dark .batch-section input,
+body.theme-dracula .export-section select,
+body.theme-dracula .export-section input,
+body.theme-dracula .batch-section select,
+body.theme-dracula .batch-section input,
+body.theme-nord .export-section select,
+body.theme-nord .export-section input,
+body.theme-nord .batch-section select,
+body.theme-nord .batch-section input,
+body.theme-tokyo-night .export-section select,
+body.theme-tokyo-night .export-section input,
+body.theme-tokyo-night .batch-section select,
+body.theme-tokyo-night .batch-section input,
+body.theme-palenight .export-section select,
+body.theme-palenight .export-section input,
+body.theme-palenight .batch-section select,
+body.theme-palenight .batch-section input,
+body.theme-ayu-dark .export-section select,
+body.theme-ayu-dark .export-section input,
+body.theme-ayu-dark .batch-section select,
+body.theme-ayu-dark .batch-section input,
+body.theme-ayu-mirage .export-section select,
+body.theme-ayu-mirage .export-section input,
+body.theme-ayu-mirage .batch-section select,
+body.theme-ayu-mirage .batch-section input,
+body.theme-oceanic-next .export-section select,
+body.theme-oceanic-next .export-section input,
+body.theme-oceanic-next .batch-section select,
+body.theme-oceanic-next .batch-section input,
+body.theme-gruvbox-dark .export-section select,
+body.theme-gruvbox-dark .export-section input,
+body.theme-gruvbox-dark .batch-section select,
+body.theme-gruvbox-dark .batch-section input,
+body.theme-cobalt2 .export-section select,
+body.theme-cobalt2 .export-section input,
+body.theme-cobalt2 .batch-section select,
+body.theme-cobalt2 .batch-section input {
+ background: #2d2d2d;
+ border-color: #444;
+ color: #e6e6e6;
+}
+
+/* Dark theme dialog footer */
+body.theme-dark .export-dialog-footer,
+body.theme-dark .batch-dialog-footer,
+body.theme-one-dark .export-dialog-footer,
+body.theme-one-dark .batch-dialog-footer,
+body.theme-dracula .export-dialog-footer,
+body.theme-dracula .batch-dialog-footer,
+body.theme-nord .export-dialog-footer,
+body.theme-nord .batch-dialog-footer,
+body.theme-tokyo-night .export-dialog-footer,
+body.theme-tokyo-night .batch-dialog-footer,
+body.theme-palenight .export-dialog-footer,
+body.theme-palenight .batch-dialog-footer,
+body.theme-ayu-dark .export-dialog-footer,
+body.theme-ayu-dark .batch-dialog-footer,
+body.theme-ayu-mirage .export-dialog-footer,
+body.theme-ayu-mirage .batch-dialog-footer,
+body.theme-oceanic-next .export-dialog-footer,
+body.theme-oceanic-next .batch-dialog-footer,
+body.theme-gruvbox-dark .export-dialog-footer,
+body.theme-gruvbox-dark .batch-dialog-footer,
+body.theme-cobalt2 .export-dialog-footer,
+body.theme-cobalt2 .batch-dialog-footer {
+ background: #1a1a1a;
+ border-top-color: #333;
+}
+
+/* Sepia theme modals */
+body.theme-sepia .export-dialog-content,
+body.theme-sepia .batch-dialog-content,
+body.theme-sepia .pdf-editor-content {
+ background: rgba(244, 236, 216, 0.98);
+ border-color: #d4c4a8;
+ color: #5b4636;
+}
+
+body.theme-sepia .export-dialog-header,
+body.theme-sepia .batch-dialog-header {
+ background: #e8dcc8;
+ border-bottom-color: #d4c4a8;
+}
+
+body.theme-sepia .export-dialog-header h3,
+body.theme-sepia .batch-dialog-header h3 {
+ color: #3d2914;
+}
+
+body.theme-sepia .export-section label,
+body.theme-sepia .batch-section label {
+ color: #5b4636;
+}
+
+body.theme-sepia .export-section select,
+body.theme-sepia .export-section input,
+body.theme-sepia .batch-section select,
+body.theme-sepia .batch-section input {
+ background: #f4ecd8;
+ border-color: #d4c4a8;
+ color: #5b4636;
+}
+
+body.theme-sepia .export-dialog-footer,
+body.theme-sepia .batch-dialog-footer {
+ background: #e8dcc8;
+ border-top-color: #d4c4a8;
+}
+
+/* Rose Pine Dawn theme modals */
+body.theme-rosepine-dawn .export-dialog-content,
+body.theme-rosepine-dawn .batch-dialog-content,
+body.theme-rosepine-dawn .pdf-editor-content {
+ background: rgba(250, 244, 237, 0.98);
+ border-color: #dfdad9;
+ color: #575279;
+}
+
+body.theme-rosepine-dawn .export-dialog-header,
+body.theme-rosepine-dawn .batch-dialog-header {
+ background: #f2e9e1;
+ border-bottom-color: #dfdad9;
+}
+
+body.theme-rosepine-dawn .export-dialog-header h3,
+body.theme-rosepine-dawn .batch-dialog-header h3 {
+ color: #286983;
+}
+
+body.theme-rosepine-dawn .export-section label,
+body.theme-rosepine-dawn .batch-section label {
+ color: #575279;
+}
+
+body.theme-rosepine-dawn .export-section select,
+body.theme-rosepine-dawn .export-section input,
+body.theme-rosepine-dawn .batch-section select,
+body.theme-rosepine-dawn .batch-section input {
+ background: #faf4ed;
+ border-color: #dfdad9;
+ color: #575279;
+}
+
+body.theme-rosepine-dawn .export-dialog-footer,
+body.theme-rosepine-dawn .batch-dialog-footer {
+ background: #f2e9e1;
+ border-top-color: #dfdad9;
+}
diff --git a/src/styles.css b/src/styles.css
index c377601..673fd4c 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,4080 +1,4080 @@
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
- overflow: hidden;
- height: 100vh;
-}
-
-.hidden {
- display: none !important;
-}
-
-.container {
- display: flex;
- flex-direction: column;
- height: 100vh;
-}
-
-/* Tab Bar */
-.tab-bar {
- display: flex;
- align-items: center;
- background: #f0f0f0;
- border-bottom: 1px solid #ddd;
- padding: 0 8px;
- min-height: 36px;
-}
-
-.tab {
- display: flex;
- align-items: center;
- padding: 6px 12px;
- background: #e8e8e8;
- border: 1px solid #ccc;
- border-bottom: none;
- border-radius: 6px 6px 0 0;
- margin-right: 2px;
- cursor: pointer;
- user-select: none;
- max-width: 200px;
- min-width: 120px;
-}
-
-.tab.active {
- background: #fff;
- border-color: #999;
- z-index: 1;
-}
-
-.tab-title {
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 13px;
-}
-
-.tab-close {
- background: none;
- border: none;
- font-size: 16px;
- font-weight: bold;
- cursor: pointer;
- padding: 0;
- margin-left: 8px;
- width: 16px;
- height: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 3px;
- color: #666;
-}
-
-.tab-close:hover {
- background: #ddd;
- color: #000;
-}
-
-.new-tab-button {
- background: none;
- border: 1px solid #ccc;
- border-radius: 4px;
- padding: 4px 8px;
- cursor: pointer;
- font-size: 14px;
- margin-left: 8px;
- color: #666;
-}
-
-.new-tab-button:hover {
- background: #e8e8e8;
-}
-
-/* Tab Content */
-.tab-content {
- display: flex;
- flex: 1;
- overflow: hidden;
-}
-
-.tab-content:not(.active) {
- display: none;
-}
-
-/* Toolbar */
-.toolbar {
- display: flex;
- align-items: center;
- padding: 8px 12px;
- background: #f5f5f5;
- border-bottom: 1px solid #ddd;
- gap: 4px;
-}
-
-.toolbar button {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 32px;
- height: 32px;
- border: 1px solid transparent;
- background: transparent;
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.2s;
-}
-
-.toolbar button:hover {
- background: #e0e0e0;
- border-color: #ccc;
-}
-
-.toolbar button:active {
- background: #d0d0d0;
-}
-
-.toolbar-separator {
- width: 1px;
- height: 24px;
- background: #ccc;
- margin: 0 8px;
-}
-
-/* Editor Container */
-.editor-container {
- display: flex;
- flex: 1;
- overflow: hidden;
-}
-
-.pane {
- flex: 1;
- overflow: auto;
- min-width: 0;
-}
-
-.pane:first-child {
- border-right: none;
-}
-
-/* Pane Resizer */
-.pane-resizer {
- width: 6px;
- background: #e0e0e0;
- cursor: col-resize;
- position: relative;
- flex-shrink: 0;
- transition: background 0.2s;
-}
-
-.pane-resizer:hover {
- background: #999;
-}
-
-.pane-resizer:active {
- 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%;
- height: 100%;
- padding: 20px;
- font-family: 'SF Mono', Monaco, 'Courier New', monospace;
- font-size: 15px;
- line-height: 1.6;
- border: none;
- outline: none;
- resize: none;
-}
-
-.pane:last-child {
- padding: 0;
- background: #fff;
-}
-
-.preview-content {
- max-width: none;
- margin: 0;
- padding: 20px 24px 24px 24px;
- line-height: 1.6;
- font-size: 15px;
- font-size: 14px;
-}
-
-/* Legacy support for old selectors */
-#editor-pane {
- border-right: 1px solid #ddd;
-}
-
-#editor {
- width: 100%;
- height: 100%;
- padding: 20px;
- font-family: 'SF Mono', Monaco, 'Courier New', monospace;
- font-size: 15px;
- line-height: 1.6;
- border: none;
- outline: none;
- resize: none;
-}
-
-#preview-pane {
- padding: 20px;
- background: #fff;
-}
-
-/* GitHub Light Theme for Preview (Default) */
-#preview, [id^="preview-"], .preview-content {
- max-width: 800px;
- margin: 0 auto;
- font-size: 15px;
- padding: 20px;
- background: #ffffff;
- color: #24292f;
- line-height: 1.6;
-}
-
-/* Status Bar */
-.status-bar {
- display: flex;
- justify-content: space-between;
- padding: 4px 12px;
- background: #f5f5f5;
- border-top: 1px solid #ddd;
- font-size: 12px;
- color: #666;
-}
-
-/* Preview Styles */
-#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6,
-.preview-content h1, .preview-content h2, .preview-content h3, .preview-content h4, .preview-content h5, .preview-content h6 {
- margin-top: 24px;
- margin-bottom: 16px;
- font-weight: 600;
- line-height: 1.25;
-}
-
-#preview h1, .preview-content h1 {
- font-size: 2em;
- border-bottom: 1px solid #eaecef;
- padding-bottom: 0.3em;
- margin-top: 0;
-}
-
-#preview h2, .preview-content h2 {
- font-size: 1.5em;
- border-bottom: 1px solid #eaecef;
- padding-bottom: 0.3em;
-}
-
-#preview p, .preview-content p {
- margin-bottom: 16px;
- line-height: 1.6;
-}
-
-#preview code, .preview-content code, [id^="preview-"] code {
- padding: 0.2em 0.4em;
- margin: 0;
- font-size: 85%;
- background-color: #f6f8fa;
- border: 1px solid #d0d7de;
- border-radius: 6px;
- font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
- color: #24292f;
-}
-
-#preview pre, .preview-content pre, [id^="preview-"] pre {
- padding: 16px;
- overflow: auto;
- font-size: 85%;
- line-height: 1.45;
- background-color: #f6f8fa;
- border: 1px solid #d0d7de;
- border-radius: 6px;
- margin-bottom: 16px;
-}
-
-#preview pre code, .preview-content pre code {
- display: inline;
- max-width: auto;
- padding: 0;
- margin: 0;
- overflow: visible;
- line-height: inherit;
- word-wrap: normal;
- background-color: transparent;
- border: 0;
-}
-
-#preview blockquote, .preview-content blockquote {
- padding: 0 1em;
- color: #6a737d;
- border-left: 0.25em solid #dfe2e5;
- margin-bottom: 16px;
-}
-
-/* GitHub Dark Theme for Preview */
-body.theme-dark #preview,
-body.theme-dark [id^="preview-"],
-body.theme-dark .preview-content {
- background: #0d1117;
- color: #c9d1d9;
-}
-
-body.theme-dark #preview h1,
-body.theme-dark [id^="preview-"] h1,
-body.theme-dark .preview-content h1 {
- color: #c9d1d9;
- border-bottom-color: #21262d;
-}
-
-body.theme-dark #preview h2,
-body.theme-dark [id^="preview-"] h2,
-body.theme-dark .preview-content h2 {
- color: #c9d1d9;
- border-bottom-color: #21262d;
-}
-
-body.theme-dark #preview h3,
-body.theme-dark #preview h4,
-body.theme-dark #preview h5,
-body.theme-dark #preview h6,
-body.theme-dark [id^="preview-"] h3,
-body.theme-dark [id^="preview-"] h4,
-body.theme-dark [id^="preview-"] h5,
-body.theme-dark [id^="preview-"] h6,
-body.theme-dark .preview-content h3,
-body.theme-dark .preview-content h4,
-body.theme-dark .preview-content h5,
-body.theme-dark .preview-content h6 {
- color: #c9d1d9;
-}
-
-body.theme-dark #preview p,
-body.theme-dark [id^="preview-"] p,
-body.theme-dark .preview-content p {
- color: #c9d1d9;
-}
-
-body.theme-dark #preview code,
-body.theme-dark [id^="preview-"] code,
-body.theme-dark .preview-content code {
- background-color: #161b22;
- border-color: #30363d;
- color: #c9d1d9;
-}
-
-body.theme-dark #preview pre,
-body.theme-dark [id^="preview-"] pre,
-body.theme-dark .preview-content pre {
- background-color: #161b22;
- border-color: #30363d;
-}
-
-body.theme-dark #preview blockquote,
-body.theme-dark [id^="preview-"] blockquote,
-body.theme-dark .preview-content blockquote {
- color: #8b949e;
- border-left-color: #3b434b;
-}
-
-body.theme-dark #preview a,
-body.theme-dark [id^="preview-"] a,
-body.theme-dark .preview-content a {
- color: #58a6ff;
-}
-
-body.theme-dark #preview a:hover,
-body.theme-dark [id^="preview-"] a:hover,
-body.theme-dark .preview-content a:hover {
- color: #79c0ff;
-}
-
-body.theme-dark #preview table,
-body.theme-dark [id^="preview-"] table,
-body.theme-dark .preview-content table {
- border-color: #30363d;
-}
-
-body.theme-dark #preview table th,
-body.theme-dark [id^="preview-"] table th,
-body.theme-dark .preview-content table th {
- background-color: #161b22;
- color: #c9d1d9;
- border-color: #30363d;
-}
-
-body.theme-dark #preview table td,
-body.theme-dark [id^="preview-"] table td,
-body.theme-dark .preview-content table td {
- border-color: #30363d;
- color: #c9d1d9;
-}
-
-body.theme-dark #preview hr,
-body.theme-dark [id^="preview-"] hr,
-body.theme-dark .preview-content hr {
- background-color: #21262d;
- border-color: #21262d;
-}
-
-body.theme-dark #preview ul,
-body.theme-dark #preview ol,
-body.theme-dark [id^="preview-"] ul,
-body.theme-dark [id^="preview-"] ol,
-body.theme-dark .preview-content ul,
-body.theme-dark .preview-content ol {
- color: #c9d1d9;
-}
-
-body.theme-dark #preview li,
-body.theme-dark [id^="preview-"] li,
-body.theme-dark .preview-content li {
- color: #c9d1d9;
-}
-
-#preview ul, #preview ol, .preview-content ul, .preview-content ol {
- padding-left: 2em;
- margin-bottom: 16px;
-}
-
-#preview li, .preview-content li {
- margin-bottom: 4px;
-}
-
-#preview a, .preview-content a {
- color: #0366d6;
- text-decoration: none;
-}
-
-#preview a:hover, .preview-content a:hover {
- text-decoration: underline;
-}
-
-#preview img, .preview-content img {
- max-width: 100%;
- height: auto;
-}
-
-#preview table, .preview-content table {
- border-collapse: collapse;
- margin-bottom: 16px;
- width: 100%;
-}
-
-#preview table th, #preview table td,
-.preview-content table th, .preview-content table td {
- padding: 6px 13px;
- border: 1px solid #dfe2e5;
-}
-
-#preview table th, .preview-content table th {
- font-weight: 600;
- background-color: #f6f8fa;
-}
-
-#preview table tr:nth-child(2n), .preview-content table tr:nth-child(2n) {
- background-color: #ffffff;
-}
-
-/* Theme: Dark */
-body.theme-dark {
- background: #1e1e1e;
- color: #d4d4d4;
-}
-
-body.theme-dark .tab-bar {
- background: #2d2d30;
- border-bottom-color: #3e3e42;
-}
-
-body.theme-dark .tab {
- background: #3c3c3c;
- border-color: #555;
- color: #d4d4d4;
-}
-
-body.theme-dark .tab.active {
- background: #1e1e1e;
- border-color: #666;
-}
-
-body.theme-dark .tab-close {
- color: #ccc;
-}
-
-body.theme-dark .tab-close:hover {
- background: #555;
- color: #fff;
-}
-
-body.theme-dark .new-tab-button {
- border-color: #555;
- color: #ccc;
-}
-
-body.theme-dark .new-tab-button:hover {
- background: #3c3c3c;
-}
-
-body.theme-dark .toolbar {
- background: #2d2d30;
- border-bottom-color: #3e3e42;
-}
-
-body.theme-dark .toolbar button {
- color: #cccccc;
-}
-
-body.theme-dark .toolbar button:hover {
- background: #3e3e42;
- border-color: #464647;
-}
-
-body.theme-dark .toolbar-separator {
- background: #3e3e42;
-}
-
-body.theme-dark .pane:first-child {
- border-right-color: #3e3e42;
-}
-
-body.theme-dark .editor-textarea {
- background: #1e1e1e;
- color: #d4d4d4;
-}
-
-body.theme-dark .pane:last-child {
- background: #1e1e1e;
-}
-
-/* Legacy support */
-body.theme-dark #editor-pane {
- border-right-color: #3e3e42;
-}
-
-body.theme-dark #editor {
- background: #1e1e1e;
- color: #d4d4d4;
-}
-
-body.theme-dark #preview-pane {
- background: #252526;
-}
-
-body.theme-dark #preview, body.theme-dark .preview-content {
- color: #d4d4d4;
-}
-
-body.theme-dark #preview h1, body.theme-dark #preview h2,
-body.theme-dark .preview-content h1, body.theme-dark .preview-content h2 {
- border-bottom-color: #3e3e42;
-}
-
-body.theme-dark #preview code, body.theme-dark .preview-content code {
- background-color: rgba(255,255,255,0.1);
-}
-
-body.theme-dark #preview pre, body.theme-dark .preview-content pre {
- background-color: #2d2d30;
-}
-
-body.theme-dark #preview blockquote, body.theme-dark .preview-content blockquote {
- color: #808080;
- border-left-color: #3e3e42;
-}
-
-body.theme-dark #preview a, body.theme-dark .preview-content a {
- color: #569cd6;
-}
-
-body.theme-dark #preview table th, body.theme-dark #preview table td,
-body.theme-dark .preview-content table th, body.theme-dark .preview-content table td {
- border-color: #3e3e42;
-}
-
-
-body.theme-dark #preview table tr:nth-child(2n), body.theme-dark .preview-content table tr:nth-child(2n) {
- background-color: #2d2d30;
-}
-
-body.theme-dark .status-bar {
- background: #2d2d30;
- border-top-color: #3e3e42;
- color: #969696;
-}
-
-/* Theme: Solarized */
-body.theme-solarized {
- background: #fdf6e3;
- color: #657b83;
-}
-
-body.theme-solarized .tab-bar {
- background: #eee8d5;
- border-bottom-color: #93a1a1;
-}
-
-body.theme-solarized .tab {
- background: #fdf6e3;
- border-color: #93a1a1;
- color: #657b83;
-}
-
-body.theme-solarized .tab.active {
- background: #fdf6e3;
- border-color: #859900;
-}
-
-body.theme-solarized .tab-close {
- color: #657b83;
-}
-
-body.theme-solarized .tab-close:hover {
- background: #93a1a1;
- color: #dc322f;
-}
-
-body.theme-solarized .new-tab-button {
- border-color: #93a1a1;
- color: #657b83;
-}
-
-body.theme-solarized .new-tab-button:hover {
- background: #eee8d5;
-}
-
-body.theme-solarized .toolbar {
- background: #eee8d5;
- border-bottom-color: #93a1a1;
-}
-
-body.theme-solarized .toolbar button {
- color: #586e75;
-}
-
-body.theme-solarized .toolbar button:hover {
- background: #fdf6e3;
- border-color: #93a1a1;
-}
-
-body.theme-solarized #editor {
- background: #fdf6e3;
- color: #657b83;
-}
-
-body.theme-solarized #preview, body.theme-solarized .preview-content {
- color: #586e75;
-}
-
-body.theme-solarized #preview code, body.theme-solarized .preview-content code {
- background-color: #eee8d5;
-}
-
-body.theme-solarized #preview pre, body.theme-solarized .preview-content pre {
- background-color: #eee8d5;
-}
-
-body.theme-solarized #preview a, body.theme-solarized .preview-content a {
- color: #268bd2;
-}
-
-/* Theme: Monokai */
-body.theme-monokai {
- background: #272822;
- color: #f8f8f2;
-}
-
-body.theme-monokai .tab-bar {
- background: #3e3d32;
- border-bottom-color: #75715e;
-}
-
-body.theme-monokai .tab {
- background: #49483e;
- border-color: #75715e;
- color: #f8f8f2;
-}
-
-body.theme-monokai .tab.active {
- background: #272822;
- border-color: #a6e22e;
-}
-
-body.theme-monokai .tab-close {
- color: #f8f8f2;
-}
-
-body.theme-monokai .tab-close:hover {
- background: #75715e;
- color: #f92672;
-}
-
-body.theme-monokai .new-tab-button {
- border-color: #75715e;
- color: #f8f8f2;
-}
-
-body.theme-monokai .new-tab-button:hover {
- background: #49483e;
-}
-
-body.theme-monokai .toolbar {
- background: #3e3d32;
- border-bottom-color: #75715e;
-}
-
-body.theme-monokai .toolbar button {
- color: #f8f8f2;
-}
-
-body.theme-monokai .toolbar button:hover {
- background: #49483e;
- border-color: #75715e;
-}
-
-body.theme-monokai #editor {
- background: #272822;
- color: #f8f8f2;
-}
-
-body.theme-monokai .editor-textarea {
- background: #272822;
- color: #f8f8f2;
-}
-
-body.theme-monokai #preview-pane {
- background: #272822;
-}
-
-body.theme-monokai #preview, body.theme-monokai .preview-content {
- color: #f8f8f2;
-}
-
-body.theme-monokai #preview h1, body.theme-monokai #preview h2,
-body.theme-monokai .preview-content h1, body.theme-monokai .preview-content h2 {
- border-bottom-color: #75715e;
-}
-
-body.theme-monokai #preview code, body.theme-monokai .preview-content code {
- background-color: #3e3d32;
-}
-
-body.theme-monokai #preview pre, body.theme-monokai .preview-content pre {
- background-color: #3e3d32;
-}
-
-body.theme-monokai #preview blockquote, body.theme-monokai .preview-content blockquote {
- color: #75715e;
- border-left-color: #75715e;
-}
-
-body.theme-monokai #preview a, body.theme-monokai .preview-content a {
- color: #66d9ef;
-}
-
-body.theme-monokai .status-bar {
- background: #3e3d32;
- border-top-color: #75715e;
- color: #75715e;
-}
-
-/* Theme: GitHub */
-body.theme-github {
- background: #fff;
- color: #24292e;
-}
-
-body.theme-github .tab-bar {
- background: #fafbfc;
- border-bottom-color: #e1e4e8;
-}
-
-body.theme-github .tab {
- background: #f6f8fa;
- border-color: #e1e4e8;
- color: #24292e;
-}
-
-body.theme-github .tab.active {
- background: #fff;
- border-color: #0366d6;
-}
-
-body.theme-github .tab-close {
- color: #586069;
-}
-
-body.theme-github .tab-close:hover {
- background: #e1e4e8;
- color: #cb2431;
-}
-
-body.theme-github .new-tab-button {
- border-color: #e1e4e8;
- color: #586069;
-}
-
-body.theme-github .new-tab-button:hover {
- background: #f6f8fa;
-}
-
-body.theme-github .toolbar {
- background: #fafbfc;
- border-bottom-color: #e1e4e8;
-}
-
-body.theme-github .toolbar button {
- color: #586069;
-}
-
-body.theme-github .toolbar button:hover {
- background: #f6f8fa;
- border-color: #e1e4e8;
-}
-
-body.theme-github #editor {
- background: #fff;
- color: #24292e;
-}
-
-body.theme-github #preview, body.theme-github .preview-content {
- color: #24292e;
-}
-
-body.theme-github #preview h1, body.theme-github #preview h2,
-body.theme-github .preview-content h1, body.theme-github .preview-content h2 {
- border-bottom-color: #eaecef;
-}
-
-body.theme-github #preview code, body.theme-github .preview-content code {
- background-color: rgba(27,31,35,0.05);
-}
-
-body.theme-github #preview pre, body.theme-github .preview-content pre {
- background-color: #f6f8fa;
-}
-
-body.theme-github #preview blockquote, body.theme-github .preview-content blockquote {
- color: #6a737d;
- border-left-color: #dfe2e5;
-}
-
-body.theme-github #preview a, body.theme-github .preview-content a {
- color: #0366d6;
-}
-
-body.theme-github .status-bar {
- background: #fafbfc;
- border-top-color: #e1e4e8;
- color: #586069;
-}
-
-/* Hide preview pane by default */
-.pane.hidden {
- display: none;
-}
-
-.pane.full-width {
- border-right: none;
-}
-
-/* Legacy support */
-#preview-pane.hidden {
- display: none;
-}
-
-#editor-pane.full-width {
- border-right: none;
-}
-
-/* Find & Replace Dialog */
-.find-dialog {
- position: absolute;
- top: 60px;
- right: 20px;
- background: #fff;
- border: 1px solid #ddd;
- border-radius: 6px;
- box-shadow: 0 4px 12px rgba(0,0,0,0.15);
- z-index: 1000;
- min-width: 400px;
- padding: 12px;
-}
-
-.find-dialog.hidden {
- display: none;
-}
-
-.find-controls {
- display: flex;
- align-items: center;
- gap: 6px;
- margin-bottom: 8px;
-}
-
-.find-controls input {
- flex: 1;
- padding: 6px 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 13px;
-}
-
-.find-controls button {
- padding: 6px 10px;
- border: 1px solid #ddd;
- background: #f5f5f5;
- border-radius: 4px;
- cursor: pointer;
- font-size: 12px;
- white-space: nowrap;
-}
-
-.find-controls button:hover {
- background: #e5e5e5;
-}
-
-.find-info {
- font-size: 12px;
- color: #666;
- text-align: right;
-}
-
-/* Editor Wrapper with Line Numbers */
-.editor-wrapper {
- position: relative;
- display: flex;
- height: 100%;
-}
-
-.line-numbers {
- min-width: 40px;
- padding: 8px 4px;
- background: #f8f8f8;
- border-right: 1px solid #ddd;
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
- font-size: 13px;
- line-height: 1.4;
- color: #666;
- text-align: right;
- user-select: none;
- overflow: hidden;
-}
-
-.line-numbers.hidden {
- display: none;
-}
-
-.line-numbers .line-number {
- display: block;
- white-space: nowrap;
-}
-
-/* Adjust editor when line numbers are shown */
-.editor-wrapper #editor {
- flex: 1;
-}
-
-/* Export Options Dialog */
-.export-dialog {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.5);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
-}
-
-.export-dialog.hidden {
- display: none;
-}
-
-.export-dialog-content {
- background: #fff;
- border-radius: 6px;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
- width: 85%;
- max-width: 450px;
- max-height: 80vh;
- overflow-y: auto;
- position: relative;
- font-size: 12px;
-}
-
-.export-dialog-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 16px;
- border-bottom: 1px solid #eee;
-}
-
-.export-dialog-header h3 {
- margin: 0;
- font-size: 14px;
- font-weight: 600;
-}
-
-.export-dialog-body {
- padding: 14px 16px;
-}
-
-.export-section {
- margin-bottom: 14px;
-}
-
-.export-section label {
- display: block;
- font-weight: 500;
- margin-bottom: 4px;
- color: #333;
- font-size: 12px;
-}
-
-.export-section label.checkbox-inline {
- display: flex;
- align-items: center;
- gap: 6px;
- cursor: pointer;
- font-weight: 400;
-}
-
-.export-section label.checkbox-inline input[type="checkbox"] {
- width: auto;
- margin: 0;
-}
-
-/* PDF Editor buttons */
-#add-merge-file {
- padding: 5px 10px;
- font-size: 12px;
- background: #4a90d9;
- color: #fff;
- border: none;
- border-radius: 4px;
- cursor: pointer;
-}
-
-#add-merge-file:hover {
- background: #357abd;
-}
-
-.export-section select,
-.export-section input[type="text"],
-.export-section input[type="number"] {
- width: 100%;
- padding: 5px 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 12px;
-}
-
-.export-section select:focus,
-.export-section input:focus {
- outline: none;
- border-color: #007acc;
- box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1);
-}
-
-.metadata-container {
- border: 1px solid #eee;
- border-radius: 4px;
- padding: 12px;
- margin-bottom: 8px;
-}
-
-.metadata-field {
- display: flex;
- gap: 8px;
- margin-bottom: 8px;
-}
-
-.metadata-field:last-child {
- margin-bottom: 0;
-}
-
-.metadata-key {
- flex: 0 0 120px;
- font-weight: 600;
-}
-
-.metadata-value {
- flex: 1;
-}
-
-.checkbox-group {
- display: flex;
- flex-direction: column;
- gap: 8px;
- margin-bottom: 12px;
-}
-
-.checkbox-group label {
- display: flex;
- align-items: center;
- gap: 8px;
- font-weight: normal;
- margin-bottom: 0;
-}
-
-.checkbox-group input[type="checkbox"] {
- margin: 0;
-}
-
-.form-row {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 8px;
-}
-
-.form-row label {
- flex: 0 0 120px;
- margin-bottom: 0;
-}
-
-.form-row input,
-.form-row select {
- flex: 1;
-}
-
-.form-row button {
- flex: 0 0 auto;
- padding: 8px 16px;
- background: #f5f5f5;
- border: 1px solid #ddd;
- border-radius: 4px;
- cursor: pointer;
- font-size: 14px;
-}
-
-.form-row button:hover {
- background: #e8e8e8;
-}
-
-.pdf-only {
- display: none;
-}
-
-.export-dialog[data-format="pdf"] .pdf-only {
- display: block;
-}
-
-.export-dialog-footer {
- display: flex;
- justify-content: flex-end;
- gap: 12px;
- padding: 16px 20px;
- border-top: 1px solid #eee;
- background: #f8f9fa;
- border-radius: 0 0 8px 8px;
-}
-
-.export-dialog-footer button {
- padding: 10px 20px;
- border: 1px solid #ddd;
- border-radius: 4px;
- cursor: pointer;
- font-size: 14px;
- font-weight: 500;
-}
-
-.export-dialog-footer button.primary {
- background: #007acc;
- color: white;
- border-color: #007acc;
-}
-
-.export-dialog-footer button.primary:hover {
- background: #005fa3;
- border-color: #005fa3;
-}
-
-.export-dialog-footer button:not(.primary) {
- background: #f5f5f5;
-}
-
-.export-dialog-footer button:not(.primary):hover {
- background: #e8e8e8;
-}
-
-#export-dialog-close {
- background: none;
- border: none;
- font-size: 20px;
- cursor: pointer;
- padding: 0;
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 4px;
-}
-
-#export-dialog-close:hover {
- background: #f0f0f0;
-}
-
-#add-metadata-field {
- padding: 6px 12px;
- background: #f8f9fa;
- border: 1px solid #ddd;
- border-radius: 4px;
- cursor: pointer;
- font-size: 13px;
- color: #666;
-}
-
-#add-metadata-field:hover {
- background: #e9ecef;
-}
-
-/* Theme support for export dialog */
-body.theme-dark .export-dialog-content {
- background: #2d2d2d;
- color: #f0f0f0;
-}
-
-body.theme-dark .export-dialog-header {
- border-color: #444;
-}
-
-body.theme-dark .export-dialog-footer {
- background: #333;
- border-color: #444;
-}
-
-body.theme-dark .export-section label {
- color: #f0f0f0;
-}
-
-body.theme-dark .export-section select,
-body.theme-dark .export-section input {
- background: #1a1a1a;
- border-color: #555;
- color: #f0f0f0;
-}
-
-body.theme-dark .metadata-container {
- border-color: #444;
- background: #1a1a1a;
-}
-
-body.theme-dark .form-row button,
-body.theme-dark #add-metadata-field {
- background: #1a1a1a;
- border-color: #555;
- color: #f0f0f0;
-}
-
-/* PDF Editor Specific Styles */
-.pdf-editor-content {
- max-width: 450px !important;
- max-height: 75vh;
- overflow-y: auto;
- font-size: 12px;
-}
-
-.pdf-editor-body {
- min-height: 200px;
- max-height: calc(85vh - 150px);
- overflow-y: auto;
-}
-
-.pdf-operation-section {
- animation: fadeIn 0.3s ease-in;
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(-10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
-
-.pdf-operation-section.hidden {
- display: none !important;
-}
-
-/* Make PDF Editor sections more compact */
-.pdf-operation-section .export-section {
- margin-bottom: 18px;
-}
-
-.pdf-operation-section .export-section:last-child {
- margin-bottom: 0;
-}
-
-/* File list styling for merge operation */
-.file-list {
- border: 1px solid #ddd;
- border-radius: 4px;
- padding: 10px;
- margin-bottom: 10px;
- min-height: 100px;
- max-height: 200px;
- overflow-y: auto;
- background: #fafafa;
-}
-
-.file-entry {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 8px;
- margin-bottom: 6px;
- background: white;
- border: 1px solid #e0e0e0;
- border-radius: 4px;
-}
-
-.file-entry:last-child {
- margin-bottom: 0;
-}
-
-.file-name {
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- margin-right: 10px;
- font-size: 13px;
-}
-
-.remove-file {
- padding: 4px 10px;
- background: #dc3545;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 12px;
-}
-
-.remove-file:hover {
- background: #c82333;
-}
-
-/* Theme support for PDF Editor */
-body.theme-dark .file-list {
- background: #1a1a1a;
- border-color: #555;
-}
-
-body.theme-dark .file-entry {
- background: #2d2d2d;
- border-color: #444;
- color: #f0f0f0;
-}
-
-body.theme-dark .pdf-editor-content {
- background: #2d2d2d;
-}
-
-body.theme-dark .pdf-editor-body {
- background: #2d2d2d;
-}
-
-body.theme-dark .form-row button:hover,
-body.theme-dark #add-metadata-field:hover {
- background: #333;
-}
-
-body.theme-dark #export-dialog-close:hover {
- background: #444;
-}
-
-/* Batch Conversion Dialog */
-.batch-dialog {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.5);
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1000;
-}
-
-.batch-dialog.hidden {
- display: none;
-}
-
-.batch-dialog-content {
- background: #fff;
- border-radius: 6px;
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
- width: 85%;
- max-width: 450px;
- max-height: 75vh;
- overflow-y: auto;
- font-size: 12px;
-}
-
-.batch-dialog-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 16px 20px;
- border-bottom: 1px solid #eee;
-}
-
-.batch-dialog-header h3 {
- margin: 0;
- font-size: 18px;
- font-weight: 600;
-}
-
-.batch-dialog-body {
- padding: 20px;
-}
-
-.batch-section {
- margin-bottom: 20px;
-}
-
-.batch-section label {
- display: block;
- font-weight: 600;
- margin-bottom: 8px;
- color: #333;
-}
-
-.batch-section select,
-.batch-section input[type="text"] {
- width: 100%;
- padding: 8px 12px;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 14px;
-}
-
-.folder-input-group {
- display: flex;
- gap: 8px;
-}
-
-.folder-input-group input {
- flex: 1;
-}
-
-.folder-input-group button {
- padding: 8px 16px;
- background: #f5f5f5;
- border: 1px solid #ddd;
- border-radius: 4px;
- cursor: pointer;
- font-size: 14px;
- white-space: nowrap;
-}
-
-.folder-input-group button:hover {
- background: #e8e8e8;
-}
-
-.batch-section label input[type="checkbox"] {
- margin-right: 8px;
-}
-
-#batch-show-options {
- padding: 8px 16px;
- background: #f8f9fa;
- border: 1px solid #ddd;
- border-radius: 4px;
- cursor: pointer;
- font-size: 14px;
- color: #666;
-}
-
-#batch-show-options:hover {
- background: #e9ecef;
-}
-
-.batch-progress {
- border: 1px solid #ddd;
- border-radius: 4px;
- padding: 16px;
- background: #f8f9fa;
-}
-
-.progress-bar {
- width: 100%;
- height: 8px;
- background: #e0e0e0;
- border-radius: 4px;
- overflow: hidden;
- margin-bottom: 8px;
-}
-
-.progress-fill {
- height: 100%;
- background: #007acc;
- transition: width 0.3s ease;
- width: 0%;
-}
-
-.progress-text {
- display: flex;
- justify-content: space-between;
- font-size: 14px;
- color: #666;
-}
-
-.batch-dialog-footer {
- display: flex;
- justify-content: flex-end;
- gap: 12px;
- padding: 16px 20px;
- border-top: 1px solid #eee;
- background: #f8f9fa;
- border-radius: 0 0 8px 8px;
-}
-
-.batch-dialog-footer button {
- padding: 10px 20px;
- border: 1px solid #ddd;
- border-radius: 4px;
- cursor: pointer;
- font-size: 14px;
- font-weight: 500;
-}
-
-.batch-dialog-footer button.primary {
- background: #007acc;
- color: white;
- border-color: #007acc;
-}
-
-.batch-dialog-footer button.primary:hover:not(:disabled) {
- background: #005fa3;
- border-color: #005fa3;
-}
-
-.batch-dialog-footer button.primary:disabled {
- background: #ccc;
- border-color: #ccc;
- cursor: not-allowed;
-}
-
-.batch-dialog-footer button:not(.primary) {
- background: #f5f5f5;
-}
-
-.batch-dialog-footer button:not(.primary):hover {
- background: #e8e8e8;
-}
-
-#batch-dialog-close {
- background: none;
- border: none;
- font-size: 20px;
- cursor: pointer;
- padding: 0;
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 4px;
-}
-
-#batch-dialog-close:hover {
- background: #f0f0f0;
-}
-
-/* Theme support for batch dialog */
-body.theme-dark .batch-dialog-content {
- background: #2d2d2d;
- color: #f0f0f0;
-}
-
-body.theme-dark .batch-dialog-header {
- border-color: #444;
-}
-
-body.theme-dark .batch-dialog-footer {
- background: #333;
- border-color: #444;
-}
-
-body.theme-dark .batch-section label {
- color: #f0f0f0;
-}
-
-body.theme-dark .batch-section select,
-body.theme-dark .batch-section input {
- background: #1a1a1a;
- border-color: #555;
- color: #f0f0f0;
-}
-
-body.theme-dark .folder-input-group button,
-body.theme-dark #batch-show-options {
- background: #1a1a1a;
- border-color: #555;
- color: #f0f0f0;
-}
-
-body.theme-dark .folder-input-group button:hover,
-body.theme-dark #batch-show-options:hover {
- background: #333;
-}
-
-body.theme-dark .batch-progress {
- background: #1a1a1a;
- border-color: #444;
-}
-
-body.theme-dark .progress-text {
- color: #ccc;
-}
-
-body.theme-dark #batch-dialog-close:hover {
- background: #444;
-}
-
-/* Theme support for find dialog */
-body.theme-dark .find-dialog {
- background: #2d2d2d;
- border-color: #555;
- color: #f0f0f0;
-}
-
-body.theme-dark .find-controls input {
- background: #333;
- border-color: #555;
- color: #f0f0f0;
-}
-
-body.theme-dark .find-controls button {
- background: #404040;
- border-color: #555;
- color: #f0f0f0;
-}
-
-body.theme-dark .find-controls button:hover {
- background: #4a4a4a;
-}
-
-body.theme-dark .line-numbers {
- background: #2a2a2a;
- border-right-color: #555;
- color: #888;
-}
-
-/* Additional theme support for line numbers */
-body.theme-solarized .line-numbers {
- background: #fdf6e3;
- border-right-color: #eee8d5;
- color: #93a1a1;
-}
-
-body.theme-monokai .line-numbers {
- background: #2f2f2f;
- border-right-color: #555;
- color: #75715e;
-}
-
-body.theme-github .line-numbers {
- background: #fafbfc;
- border-right-color: #e1e4e8;
- color: #586069;
-}
-
-/* Export Profiles Styles */
-.export-profiles {
- border-bottom: 1px solid #ddd;
- padding-bottom: 15px;
- margin-bottom: 15px;
-}
-
-.profile-controls {
- display: flex;
- gap: 8px;
- align-items: center;
- margin-top: 8px;
-}
-
-.profile-controls select {
- flex: 1;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 14px;
-}
-
-.profile-controls button {
- padding: 8px 12px;
- border: 1px solid #ddd;
- border-radius: 4px;
- background: #f5f5f5;
- cursor: pointer;
- font-size: 13px;
- transition: all 0.2s;
-}
-
-.profile-controls button:hover {
- background: #e8e8e8;
-}
-
-/* Advanced Export Toggle Styles */
-.export-mode-toggle {
- border-bottom: 1px solid #ddd;
- padding-bottom: 15px;
- margin-bottom: 20px;
-}
-
-.checkbox-label {
- display: flex;
- align-items: center;
- cursor: pointer;
- font-weight: 500;
- margin-bottom: 5px;
-}
-
-.checkbox-label input[type="checkbox"] {
- margin-right: 10px;
- transform: scale(1.2);
-}
-
-.export-help {
- color: #666;
- font-size: 12px;
- font-style: italic;
- margin-left: 25px;
-}
-
-.advanced-options {
- transition: all 0.3s ease;
- overflow: visible;
- position: relative;
- z-index: 10;
-}
-
-.advanced-options.hidden {
- display: none;
-}
-
-.basic-options {
- background: #f8f9fa;
- border: 1px solid #e9ecef;
- border-radius: 6px;
- padding: 15px;
- margin-top: 10px;
-}
-
-.basic-options label {
- font-weight: normal;
- margin-bottom: 8px;
-}
-
-/* Theme support for advanced export toggle */
-body.theme-dark .export-mode-toggle {
- border-color: #444;
-}
-
-body.theme-dark .export-help {
- color: #999;
-}
-
-body.theme-dark .basic-options {
- background: #1a1a1a;
- border-color: #444;
-}
-
-body.theme-dark .checkbox-label {
- color: #f0f0f0;
-}
-
-body.theme-solarized .export-mode-toggle {
- border-color: #eee8d5;
-}
-
-body.theme-solarized .export-help {
- color: #586e75;
-}
-
-body.theme-solarized .basic-options {
- background: #fdf6e3;
- border-color: #eee8d5;
-}
-
-body.theme-monokai .export-mode-toggle {
- border-color: #49483e;
-}
-
-body.theme-monokai .export-help {
- color: #75715e;
-}
-
-body.theme-monokai .basic-options {
- background: #2f2f2f;
- border-color: #49483e;
-}
-
-body.theme-github .export-mode-toggle {
- border-color: #e1e4e8;
-}
-
-body.theme-github .export-help {
- color: #586069;
-}
-
-body.theme-github .basic-options {
- background: #f6f8fa;
- border-color: #e1e4e8;
-}
-
-/* Enhanced Statistics Styles */
-.enhanced-stats {
- font-size: 11px;
- color: #666;
- padding: 2px 0;
- border-top: 1px solid #ddd;
- margin-top: 2px;
- font-family: monospace;
-}
-
-/* Theme support for enhanced stats */
-body.theme-dark .enhanced-stats {
- color: #999;
- border-color: #444;
-}
-
-body.theme-solarized .enhanced-stats {
- color: #586e75;
- border-color: #eee8d5;
-}
-
-body.theme-monokai .enhanced-stats {
- color: #75715e;
- border-color: #49483e;
-}
-
-body.theme-github .enhanced-stats {
- color: #586069;
- border-color: #e1e4e8;
-}
-
-/* Auto-save indicator */
-.auto-save-indicator {
- position: fixed;
- top: 20px;
- right: 20px;
- background: #28a745;
- color: white;
- padding: 8px 16px;
- border-radius: 4px;
- font-size: 12px;
- font-weight: 500;
- z-index: 10000;
- box-shadow: 0 2px 8px rgba(0,0,0,0.2);
- animation: slideInRight 0.3s ease-out;
-}
-
-.auto-save-indicator.fade-out {
- animation: fadeOut 0.3s ease-out forwards;
-}
-
-@keyframes slideInRight {
- from {
- transform: translateX(100%);
- opacity: 0;
- }
- to {
- transform: translateX(0);
- opacity: 1;
- }
-}
-
-@keyframes fadeOut {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
-}
-
-/* Theme: Dracula */
-body.theme-dracula {
- background: #282a36;
- color: #f8f8f2;
-}
-
-body.theme-dracula .tab-bar {
- background: #343746;
- border-bottom-color: #44475a;
-}
-
-body.theme-dracula .tab {
- background: #44475a;
- border-color: #6272a4;
- color: #f8f8f2;
-}
-
-body.theme-dracula .tab.active {
- background: #282a36;
- border-color: #bd93f9;
-}
-
-body.theme-dracula .toolbar {
- background: #343746;
- border-bottom-color: #44475a;
-}
-
-body.theme-dracula .toolbar button {
- color: #f8f8f2;
-}
-
-body.theme-dracula .toolbar button:hover {
- background: #44475a;
- border-color: #6272a4;
-}
-
-body.theme-dracula .editor-textarea {
- background: #282a36;
- color: #f8f8f2;
-}
-
-body.theme-dracula .pane:last-child {
- background: #282a36;
-}
-
-body.theme-dracula .preview-content {
- color: #f8f8f2;
-}
-
-body.theme-dracula .preview-content h1,
-body.theme-dracula .preview-content h2 {
- border-bottom-color: #44475a;
- color: #bd93f9;
-}
-
-body.theme-dracula .preview-content code {
- background-color: #44475a;
-}
-
-body.theme-dracula .preview-content pre {
- background-color: #44475a;
-}
-
-body.theme-dracula .preview-content a {
- color: #8be9fd;
-}
-
-body.theme-dracula .status-bar {
- background: #343746;
- border-top-color: #44475a;
- color: #f8f8f2;
-}
-
-/* Theme: Nord */
-body.theme-nord {
- background: #2e3440;
- color: #d8dee9;
-}
-
-body.theme-nord .tab-bar {
- background: #3b4252;
- border-bottom-color: #4c566a;
-}
-
-body.theme-nord .tab {
- background: #434c5e;
- border-color: #4c566a;
- color: #d8dee9;
-}
-
-body.theme-nord .tab.active {
- background: #2e3440;
- border-color: #88c0d0;
-}
-
-body.theme-nord .toolbar {
- background: #3b4252;
- border-bottom-color: #4c566a;
-}
-
-body.theme-nord .toolbar button {
- color: #d8dee9;
-}
-
-body.theme-nord .toolbar button:hover {
- background: #434c5e;
- border-color: #4c566a;
-}
-
-body.theme-nord .editor-textarea {
- background: #2e3440;
- color: #d8dee9;
-}
-
-body.theme-nord .pane:last-child {
- background: #2e3440;
-}
-
-body.theme-nord .preview-content {
- color: #d8dee9;
-}
-
-body.theme-nord .preview-content h1,
-body.theme-nord .preview-content h2 {
- border-bottom-color: #4c566a;
- color: #88c0d0;
-}
-
-body.theme-nord .preview-content code {
- background-color: #3b4252;
-}
-
-body.theme-nord .preview-content pre {
- background-color: #3b4252;
-}
-
-body.theme-nord .preview-content a {
- color: #81a1c1;
-}
-
-body.theme-nord .status-bar {
- background: #3b4252;
- border-top-color: #4c566a;
- color: #d8dee9;
-}
-
-/* Theme: One Dark */
-body.theme-onedark {
- background: #282c34;
- color: #abb2bf;
-}
-
-body.theme-onedark .tab-bar {
- background: #21252b;
- border-bottom-color: #181a1f;
-}
-
-body.theme-onedark .tab {
- background: #2c313a;
- border-color: #3e4451;
- color: #abb2bf;
-}
-
-body.theme-onedark .tab.active {
- background: #282c34;
- border-color: #61afef;
-}
-
-body.theme-onedark .toolbar {
- background: #21252b;
- border-bottom-color: #181a1f;
-}
-
-body.theme-onedark .toolbar button {
- color: #abb2bf;
-}
-
-body.theme-onedark .toolbar button:hover {
- background: #2c313a;
- border-color: #3e4451;
-}
-
-body.theme-onedark .editor-textarea {
- background: #282c34;
- color: #abb2bf;
-}
-
-body.theme-onedark .pane:last-child {
- background: #282c34;
-}
-
-body.theme-onedark .preview-content {
- color: #abb2bf;
-}
-
-body.theme-onedark .preview-content h1,
-body.theme-onedark .preview-content h2 {
- border-bottom-color: #3e4451;
- color: #61afef;
-}
-
-body.theme-onedark .preview-content code {
- background-color: #21252b;
-}
-
-body.theme-onedark .preview-content pre {
- background-color: #21252b;
-}
-
-body.theme-onedark .preview-content a {
- color: #56b6c2;
-}
-
-body.theme-onedark .status-bar {
- background: #21252b;
- border-top-color: #181a1f;
- color: #abb2bf;
-}
-
-/* Theme: Atom One Light */
-body.theme-atomonelight {
- background: #fafafa;
- color: #383a42;
-}
-
-body.theme-atomonelight .tab-bar {
- background: #f0f0f0;
- border-bottom-color: #e0e0e0;
-}
-
-body.theme-atomonelight .tab {
- background: #e5e5e6;
- border-color: #d0d0d0;
- color: #383a42;
-}
-
-body.theme-atomonelight .tab.active {
- background: #fafafa;
- border-color: #4078f2;
-}
-
-body.theme-atomonelight .toolbar {
- background: #f0f0f0;
- border-bottom-color: #e0e0e0;
-}
-
-body.theme-atomonelight .toolbar button {
- color: #383a42;
-}
-
-body.theme-atomonelight .toolbar button:hover {
- background: #e5e5e6;
- border-color: #d0d0d0;
-}
-
-body.theme-atomonelight .editor-textarea {
- background: #fafafa;
- color: #383a42;
-}
-
-body.theme-atomonelight .pane:last-child {
- background: #fafafa;
-}
-
-body.theme-atomonelight .preview-content {
- color: #383a42;
-}
-
-body.theme-atomonelight .preview-content h1,
-body.theme-atomonelight .preview-content h2 {
- border-bottom-color: #e0e0e0;
- color: #4078f2;
-}
-
-body.theme-atomonelight .preview-content code {
- background-color: #f0f0f0;
-}
-
-body.theme-atomonelight .preview-content pre {
- background-color: #f0f0f0;
-}
-
-body.theme-atomonelight .preview-content a {
- color: #0184bc;
-}
-
-body.theme-atomonelight .status-bar {
- background: #f0f0f0;
- border-top-color: #e0e0e0;
- color: #383a42;
-}
-
-/* Theme: Material */
-body.theme-material {
- background: #263238;
- color: #eeffff;
-}
-
-body.theme-material .tab-bar {
- background: #2e3c43;
- border-bottom-color: #37474f;
-}
-
-body.theme-material .tab {
- background: #37474f;
- border-color: #546e7a;
- color: #eeffff;
-}
-
-body.theme-material .tab.active {
- background: #263238;
- border-color: #82aaff;
-}
-
-body.theme-material .toolbar {
- background: #2e3c43;
- border-bottom-color: #37474f;
-}
-
-body.theme-material .toolbar button {
- color: #eeffff;
-}
-
-body.theme-material .toolbar button:hover {
- background: #37474f;
- border-color: #546e7a;
-}
-
-body.theme-material .editor-textarea {
- background: #263238;
- color: #eeffff;
-}
-
-body.theme-material .pane:last-child {
- background: #263238;
-}
-
-body.theme-material .preview-content {
- color: #eeffff;
-}
-
-body.theme-material .preview-content h1,
-body.theme-material .preview-content h2 {
- border-bottom-color: #37474f;
- color: #82aaff;
-}
-
-body.theme-material .preview-content code {
- background-color: #2e3c43;
-}
-
-body.theme-material .preview-content pre {
- background-color: #2e3c43;
-}
-
-body.theme-material .preview-content a {
- color: #80cbc4;
-}
-
-body.theme-material .status-bar {
- background: #2e3c43;
- border-top-color: #37474f;
- color: #eeffff;
-}
-
-/* Theme: Gruvbox Dark */
-body.theme-gruvbox-dark {
- background: #282828;
- color: #ebdbb2;
-}
-
-body.theme-gruvbox-dark .tab-bar {
- background: #3c3836;
- border-bottom-color: #504945;
-}
-
-body.theme-gruvbox-dark .tab {
- background: #504945;
- border-color: #665c54;
- color: #ebdbb2;
-}
-
-body.theme-gruvbox-dark .tab.active {
- background: #282828;
- border-color: #fabd2f;
-}
-
-body.theme-gruvbox-dark .toolbar {
- background: #3c3836;
- border-bottom-color: #504945;
-}
-
-body.theme-gruvbox-dark .toolbar button {
- color: #ebdbb2;
-}
-
-body.theme-gruvbox-dark .toolbar button:hover {
- background: #504945;
- border-color: #665c54;
-}
-
-body.theme-gruvbox-dark .editor-textarea {
- background: #282828;
- color: #ebdbb2;
-}
-
-body.theme-gruvbox-dark .pane:last-child {
- background: #282828;
-}
-
-body.theme-gruvbox-dark .preview-content {
- color: #ebdbb2;
-}
-
-body.theme-gruvbox-dark .preview-content h1,
-body.theme-gruvbox-dark .preview-content h2 {
- border-bottom-color: #504945;
- color: #fabd2f;
-}
-
-body.theme-gruvbox-dark .preview-content code {
- background-color: #3c3836;
-}
-
-body.theme-gruvbox-dark .preview-content pre {
- background-color: #3c3836;
-}
-
-body.theme-gruvbox-dark .preview-content a {
- color: #83a598;
-}
-
-body.theme-gruvbox-dark .status-bar {
- background: #3c3836;
- border-top-color: #504945;
- color: #ebdbb2;
-}
-
-/* Theme: Gruvbox Light */
-body.theme-gruvbox-light {
- background: #fbf1c7;
- color: #3c3836;
-}
-
-body.theme-gruvbox-light .tab-bar {
- background: #ebdbb2;
- border-bottom-color: #d5c4a1;
-}
-
-body.theme-gruvbox-light .tab {
- background: #d5c4a1;
- border-color: #bdae93;
- color: #3c3836;
-}
-
-body.theme-gruvbox-light .tab.active {
- background: #fbf1c7;
- border-color: #b57614;
-}
-
-body.theme-gruvbox-light .toolbar {
- background: #ebdbb2;
- border-bottom-color: #d5c4a1;
-}
-
-body.theme-gruvbox-light .toolbar button {
- color: #3c3836;
-}
-
-body.theme-gruvbox-light .toolbar button:hover {
- background: #d5c4a1;
- border-color: #bdae93;
-}
-
-body.theme-gruvbox-light .editor-textarea {
- background: #fbf1c7;
- color: #3c3836;
-}
-
-body.theme-gruvbox-light .pane:last-child {
- background: #fbf1c7;
-}
-
-body.theme-gruvbox-light .preview-content {
- color: #3c3836;
-}
-
-body.theme-gruvbox-light .preview-content h1,
-body.theme-gruvbox-light .preview-content h2 {
- border-bottom-color: #d5c4a1;
- color: #b57614;
-}
-
-body.theme-gruvbox-light .preview-content code {
- background-color: #ebdbb2;
-}
-
-body.theme-gruvbox-light .preview-content pre {
- background-color: #ebdbb2;
-}
-
-body.theme-gruvbox-light .preview-content a {
- color: #076678;
-}
-
-body.theme-gruvbox-light .status-bar {
- background: #ebdbb2;
- border-top-color: #d5c4a1;
- color: #3c3836;
-}
-
-/* Theme: Tokyo Night */
-body.theme-tokyonight {
- background: #1a1b26;
- color: #c0caf5;
-}
-
-body.theme-tokyonight .tab-bar {
- background: #16161e;
- border-bottom-color: #24283b;
-}
-
-body.theme-tokyonight .tab {
- background: #24283b;
- border-color: #414868;
- color: #c0caf5;
-}
-
-body.theme-tokyonight .tab.active {
- background: #1a1b26;
- border-color: #7aa2f7;
-}
-
-body.theme-tokyonight .toolbar {
- background: #16161e;
- border-bottom-color: #24283b;
-}
-
-body.theme-tokyonight .toolbar button {
- color: #c0caf5;
-}
-
-body.theme-tokyonight .toolbar button:hover {
- background: #24283b;
- border-color: #414868;
-}
-
-body.theme-tokyonight .editor-textarea {
- background: #1a1b26;
- color: #c0caf5;
-}
-
-body.theme-tokyonight .pane:last-child {
- background: #1a1b26;
-}
-
-body.theme-tokyonight .preview-content {
- color: #c0caf5;
-}
-
-body.theme-tokyonight .preview-content h1,
-body.theme-tokyonight .preview-content h2 {
- border-bottom-color: #24283b;
- color: #7aa2f7;
-}
-
-body.theme-tokyonight .preview-content code {
- background-color: #24283b;
-}
-
-body.theme-tokyonight .preview-content pre {
- background-color: #24283b;
-}
-
-body.theme-tokyonight .preview-content a {
- color: #7dcfff;
-}
-
-body.theme-tokyonight .status-bar {
- background: #16161e;
- border-top-color: #24283b;
- color: #c0caf5;
-}
-
-/* Theme: Palenight */
-body.theme-palenight {
- background: #292d3e;
- color: #a6accd;
-}
-
-body.theme-palenight .tab-bar {
- background: #32374d;
- border-bottom-color: #444267;
-}
-
-body.theme-palenight .tab {
- background: #444267;
- border-color: #676e95;
- color: #a6accd;
-}
-
-body.theme-palenight .tab.active {
- background: #292d3e;
- border-color: #82aaff;
-}
-
-body.theme-palenight .toolbar {
- background: #32374d;
- border-bottom-color: #444267;
-}
-
-body.theme-palenight .toolbar button {
- color: #a6accd;
-}
-
-body.theme-palenight .toolbar button:hover {
- background: #444267;
- border-color: #676e95;
-}
-
-body.theme-palenight .editor-textarea {
- background: #292d3e;
- color: #a6accd;
-}
-
-body.theme-palenight .pane:last-child {
- background: #292d3e;
-}
-
-body.theme-palenight .preview-content {
- color: #a6accd;
-}
-
-body.theme-palenight .preview-content h1,
-body.theme-palenight .preview-content h2 {
- border-bottom-color: #444267;
- color: #82aaff;
-}
-
-body.theme-palenight .preview-content code {
- background-color: #32374d;
-}
-
-body.theme-palenight .preview-content pre {
- background-color: #32374d;
-}
-
-body.theme-palenight .preview-content a {
- color: #89ddff;
-}
-
-body.theme-palenight .status-bar {
- background: #32374d;
- border-top-color: #444267;
- color: #a6accd;
-}
-
-/* Theme: Ayu Dark */
-body.theme-ayu-dark {
- background: #0a0e14;
- color: #b3b1ad;
-}
-
-body.theme-ayu-dark .tab-bar {
- background: #0d1016;
- border-bottom-color: #1f2430;
-}
-
-body.theme-ayu-dark .tab {
- background: #1f2430;
- border-color: #3d424d;
- color: #b3b1ad;
-}
-
-body.theme-ayu-dark .tab.active {
- background: #0a0e14;
- border-color: #ffaa33;
-}
-
-body.theme-ayu-dark .toolbar {
- background: #0d1016;
- border-bottom-color: #1f2430;
-}
-
-body.theme-ayu-dark .toolbar button {
- color: #b3b1ad;
-}
-
-body.theme-ayu-dark .toolbar button:hover {
- background: #1f2430;
- border-color: #3d424d;
-}
-
-body.theme-ayu-dark .editor-textarea {
- background: #0a0e14;
- color: #b3b1ad;
-}
-
-body.theme-ayu-dark .pane:last-child {
- background: #0a0e14;
-}
-
-body.theme-ayu-dark .preview-content {
- color: #b3b1ad;
-}
-
-body.theme-ayu-dark .preview-content h1,
-body.theme-ayu-dark .preview-content h2 {
- border-bottom-color: #1f2430;
- color: #ffaa33;
-}
-
-body.theme-ayu-dark .preview-content code {
- background-color: #0d1016;
-}
-
-body.theme-ayu-dark .preview-content pre {
- background-color: #0d1016;
-}
-
-body.theme-ayu-dark .preview-content a {
- color: #39bae6;
-}
-
-body.theme-ayu-dark .status-bar {
- background: #0d1016;
- border-top-color: #1f2430;
- color: #b3b1ad;
-}
-
-/* Theme: Ayu Light */
-body.theme-ayu-light {
- background: #fafafa;
- color: #5c6166;
-}
-
-body.theme-ayu-light .tab-bar {
- background: #f3f4f5;
- border-bottom-color: #e7e8e9;
-}
-
-body.theme-ayu-light .tab {
- background: #e7e8e9;
- border-color: #d9dadb;
- color: #5c6166;
-}
-
-body.theme-ayu-light .tab.active {
- background: #fafafa;
- border-color: #ff6a00;
-}
-
-body.theme-ayu-light .toolbar {
- background: #f3f4f5;
- border-bottom-color: #e7e8e9;
-}
-
-body.theme-ayu-light .toolbar button {
- color: #5c6166;
-}
-
-body.theme-ayu-light .toolbar button:hover {
- background: #e7e8e9;
- border-color: #d9dadb;
-}
-
-body.theme-ayu-light .editor-textarea {
- background: #fafafa;
- color: #5c6166;
-}
-
-body.theme-ayu-light .pane:last-child {
- background: #fafafa;
-}
-
-body.theme-ayu-light .preview-content {
- color: #5c6166;
-}
-
-body.theme-ayu-light .preview-content h1,
-body.theme-ayu-light .preview-content h2 {
- border-bottom-color: #e7e8e9;
- color: #ff6a00;
-}
-
-body.theme-ayu-light .preview-content code {
- background-color: #f3f4f5;
-}
-
-body.theme-ayu-light .preview-content pre {
- background-color: #f3f4f5;
-}
-
-body.theme-ayu-light .preview-content a {
- color: #399ee6;
-}
-
-body.theme-ayu-light .status-bar {
- background: #f3f4f5;
- border-top-color: #e7e8e9;
- color: #5c6166;
-}
-
-/* Theme: Ayu Mirage */
-body.theme-ayu-mirage {
- background: #1f2430;
- color: #cbccc6;
-}
-
-body.theme-ayu-mirage .tab-bar {
- background: #232834;
- border-bottom-color: #343d4b;
-}
-
-body.theme-ayu-mirage .tab {
- background: #343d4b;
- border-color: #465268;
- color: #cbccc6;
-}
-
-body.theme-ayu-mirage .tab.active {
- background: #1f2430;
- border-color: #ffa759;
-}
-
-body.theme-ayu-mirage .toolbar {
- background: #232834;
- border-bottom-color: #343d4b;
-}
-
-body.theme-ayu-mirage .toolbar button {
- color: #cbccc6;
-}
-
-body.theme-ayu-mirage .toolbar button:hover {
- background: #343d4b;
- border-color: #465268;
-}
-
-body.theme-ayu-mirage .editor-textarea {
- background: #1f2430;
- color: #cbccc6;
-}
-
-body.theme-ayu-mirage .pane:last-child {
- background: #1f2430;
-}
-
-body.theme-ayu-mirage .preview-content {
- color: #cbccc6;
-}
-
-body.theme-ayu-mirage .preview-content h1,
-body.theme-ayu-mirage .preview-content h2 {
- border-bottom-color: #343d4b;
- color: #ffa759;
-}
-
-body.theme-ayu-mirage .preview-content code {
- background-color: #232834;
-}
-
-body.theme-ayu-mirage .preview-content pre {
- background-color: #232834;
-}
-
-body.theme-ayu-mirage .preview-content a {
- color: #5ccfe6;
-}
-
-body.theme-ayu-mirage .status-bar {
- background: #232834;
- border-top-color: #343d4b;
- color: #cbccc6;
-}
-
-/* Theme: Oceanic Next */
-body.theme-oceanic-next {
- background: #1b2b34;
- color: #cdd3de;
-}
-
-body.theme-oceanic-next .tab-bar {
- background: #20353f;
- border-bottom-color: #343d46;
-}
-
-body.theme-oceanic-next .tab {
- background: #343d46;
- border-color: #4f5b66;
- color: #cdd3de;
-}
-
-body.theme-oceanic-next .tab.active {
- background: #1b2b34;
- border-color: #6699cc;
-}
-
-body.theme-oceanic-next .toolbar {
- background: #20353f;
- border-bottom-color: #343d46;
-}
-
-body.theme-oceanic-next .toolbar button {
- color: #cdd3de;
-}
-
-body.theme-oceanic-next .toolbar button:hover {
- background: #343d46;
- border-color: #4f5b66;
-}
-
-body.theme-oceanic-next .editor-textarea {
- background: #1b2b34;
- color: #cdd3de;
-}
-
-body.theme-oceanic-next .pane:last-child {
- background: #1b2b34;
-}
-
-body.theme-oceanic-next .preview-content {
- color: #cdd3de;
-}
-
-body.theme-oceanic-next .preview-content h1,
-body.theme-oceanic-next .preview-content h2 {
- border-bottom-color: #343d46;
- color: #6699cc;
-}
-
-body.theme-oceanic-next .preview-content code {
- background-color: #20353f;
-}
-
-body.theme-oceanic-next .preview-content pre {
- background-color: #20353f;
-}
-
-body.theme-oceanic-next .preview-content a {
- color: #5fb3b3;
-}
-
-body.theme-oceanic-next .status-bar {
- background: #20353f;
- border-top-color: #343d46;
- color: #cdd3de;
-}
-
-/* Theme: Cobalt2 */
-body.theme-cobalt2 {
- background: #193549;
- color: #ffffff;
-}
-
-body.theme-cobalt2 .tab-bar {
- background: #15232d;
- border-bottom-color: #2a4a5d;
-}
-
-body.theme-cobalt2 .tab {
- background: #0d3a58;
- border-color: #2a4a5d;
- color: #ffffff;
-}
-
-body.theme-cobalt2 .tab.active {
- background: #193549;
- border-color: #ffc600;
-}
-
-body.theme-cobalt2 .toolbar {
- background: #15232d;
- border-bottom-color: #2a4a5d;
-}
-
-body.theme-cobalt2 .toolbar button {
- color: #ffffff;
-}
-
-body.theme-cobalt2 .toolbar button:hover {
- background: #0d3a58;
- border-color: #2a4a5d;
-}
-
-body.theme-cobalt2 .editor-textarea {
- background: #193549;
- color: #ffffff;
-}
-
-body.theme-cobalt2 .pane:last-child {
- background: #193549;
-}
-
-body.theme-cobalt2 .preview-content {
- color: #ffffff;
-}
-
-body.theme-cobalt2 .preview-content h1,
-body.theme-cobalt2 .preview-content h2 {
- border-bottom-color: #2a4a5d;
- color: #ffc600;
-}
-
-body.theme-cobalt2 .preview-content code {
- background-color: #0d3a58;
-}
-
-body.theme-cobalt2 .preview-content pre {
- background-color: #0d3a58;
-}
-
-body.theme-cobalt2 .preview-content a {
- color: #3ad900;
-}
-
-body.theme-cobalt2 .status-bar {
- background: #15232d;
- border-top-color: #2a4a5d;
- color: #ffffff;
-}
-
-/* Theme: Concrete Dark - ConcreteInfo branded dark theme */
-body.theme-concrete-dark {
- background: #0d0b09;
- color: #e3e3e3;
-}
-
-body.theme-concrete-dark .tab-bar {
- background: #1a1816;
- border-bottom-color: #464646;
-}
-
-body.theme-concrete-dark .tab {
- background: #464646;
- border-color: #9a9696;
- color: #e3e3e3;
-}
-
-body.theme-concrete-dark .tab.active {
- background: #0d0b09;
- border-color: #e5461f;
-}
-
-body.theme-concrete-dark .toolbar {
- background: #1a1816;
- border-bottom-color: #464646;
-}
-
-body.theme-concrete-dark .toolbar button {
- color: #e3e3e3;
-}
-
-body.theme-concrete-dark .toolbar button:hover {
- background: #464646;
- border-color: #e5461f;
-}
-
-body.theme-concrete-dark .editor-textarea {
- background: #0d0b09;
- color: #e3e3e3;
-}
-
-body.theme-concrete-dark .pane:last-child {
- background: #0d0b09;
-}
-
-body.theme-concrete-dark .preview-content {
- color: #e3e3e3;
-}
-
-body.theme-concrete-dark .preview-content h1,
-body.theme-concrete-dark .preview-content h2 {
- border-bottom-color: #464646;
- color: #e5461f;
-}
-
-body.theme-concrete-dark .preview-content code {
- background-color: #464646;
-}
-
-body.theme-concrete-dark .preview-content pre {
- background-color: #464646;
-}
-
-body.theme-concrete-dark .preview-content a {
- color: #e5461f;
-}
-
-body.theme-concrete-dark .status-bar {
- background: #1a1816;
- border-top-color: #464646;
- color: #9a9696;
-}
-
-/* Theme: Concrete Light - ConcreteInfo branded light theme */
-body.theme-concrete-light {
- background: #fafafa;
- color: #0d0b09;
-}
-
-body.theme-concrete-light .tab-bar {
- background: #e3e3e3;
- border-bottom-color: #9a9696;
-}
-
-body.theme-concrete-light .tab {
- background: #e3e3e3;
- border-color: #9a9696;
- color: #0d0b09;
-}
-
-body.theme-concrete-light .tab.active {
- background: #fafafa;
- border-color: #e5461f;
-}
-
-body.theme-concrete-light .toolbar {
- background: #e3e3e3;
- border-bottom-color: #9a9696;
-}
-
-body.theme-concrete-light .toolbar button {
- color: #0d0b09;
-}
-
-body.theme-concrete-light .toolbar button:hover {
- background: #9a9696;
- border-color: #e5461f;
-}
-
-body.theme-concrete-light .editor-textarea {
- background: #fafafa;
- color: #0d0b09;
-}
-
-body.theme-concrete-light .pane:last-child {
- background: #fafafa;
-}
-
-body.theme-concrete-light .preview-content {
- color: #0d0b09;
-}
-
-body.theme-concrete-light .preview-content h1,
-body.theme-concrete-light .preview-content h2 {
- border-bottom-color: #9a9696;
- color: #e5461f;
-}
-
-body.theme-concrete-light .preview-content code {
- background-color: #e3e3e3;
-}
-
-body.theme-concrete-light .preview-content pre {
- background-color: #e3e3e3;
-}
-
-body.theme-concrete-light .preview-content a {
- color: #e5461f;
-}
-
-body.theme-concrete-light .status-bar {
- background: #e3e3e3;
- border-top-color: #9a9696;
- color: #464646;
-}
-
-/* Theme: Concrete Warm - ConcreteInfo branded warm theme */
-body.theme-concrete-warm {
- background: #464646;
- color: #e3e3e3;
-}
-
-body.theme-concrete-warm .tab-bar {
- background: #3a3836;
- border-bottom-color: #9a9696;
-}
-
-body.theme-concrete-warm .tab {
- background: #9a9696;
- border-color: #e3e3e3;
- color: #0d0b09;
-}
-
-body.theme-concrete-warm .tab.active {
- background: #464646;
- border-color: #e5461f;
-}
-
-body.theme-concrete-warm .toolbar {
- background: #3a3836;
- border-bottom-color: #9a9696;
-}
-
-body.theme-concrete-warm .toolbar button {
- color: #e3e3e3;
-}
-
-body.theme-concrete-warm .toolbar button:hover {
- background: #9a9696;
- border-color: #e5461f;
-}
-
-body.theme-concrete-warm .editor-textarea {
- background: #464646;
- color: #e3e3e3;
-}
-
-body.theme-concrete-warm .pane:last-child {
- background: #464646;
-}
-
-body.theme-concrete-warm .preview-content {
- color: #e3e3e3;
-}
-
-body.theme-concrete-warm .preview-content h1,
-body.theme-concrete-warm .preview-content h2 {
- border-bottom-color: #9a9696;
- color: #e5461f;
-}
-
-body.theme-concrete-warm .preview-content code {
- background-color: #3a3836;
-}
-
-body.theme-concrete-warm .preview-content pre {
- background-color: #3a3836;
-}
-
-body.theme-concrete-warm .preview-content a {
- color: #e5461f;
-}
-
-body.theme-concrete-warm .status-bar {
- background: #3a3836;
- border-top-color: #9a9696;
- color: #e3e3e3;
-}
-
-/* ========================================
- Sepia Theme - Warm reading theme
- ======================================== */
-body.theme-sepia {
- background: #f4ecd8;
- color: #5b4636;
-}
-
-body.theme-sepia .tab-bar {
- background: #e8dcc8;
- border-bottom-color: #d4c4a8;
-}
-
-body.theme-sepia .tab {
- background: #e8dcc8;
- border-color: #d4c4a8;
- color: #5b4636;
-}
-
-body.theme-sepia .tab.active {
- background: #f4ecd8;
- border-bottom-color: #8b7355;
-}
-
-body.theme-sepia .toolbar {
- background: #e8dcc8;
- border-bottom-color: #d4c4a8;
-}
-
-body.theme-sepia .toolbar button {
- color: #5b4636;
-}
-
-body.theme-sepia .toolbar button:hover {
- background: #d4c4a8;
-}
-
-body.theme-sepia .editor-textarea {
- background: #f4ecd8;
- color: #5b4636;
-}
-
-body.theme-sepia .pane:last-child {
- background: #f4ecd8;
-}
-
-body.theme-sepia .preview-content {
- color: #5b4636;
-}
-
-body.theme-sepia .preview-content h1,
-body.theme-sepia .preview-content h2 {
- color: #3d2914;
- border-bottom-color: #d4c4a8;
-}
-
-body.theme-sepia .preview-content code {
- background: #e8dcc8;
- color: #8b4513;
-}
-
-body.theme-sepia .preview-content pre {
- background: #e8dcc8;
- border-color: #d4c4a8;
-}
-
-body.theme-sepia .preview-content a {
- color: #8b4513;
-}
-
-body.theme-sepia .preview-content blockquote {
- border-left-color: #8b7355;
- background: #e8dcc8;
-}
-
-body.theme-sepia .status-bar {
- background: #e8dcc8;
- border-top-color: #d4c4a8;
- color: #5b4636;
-}
-
-/* ========================================
- Paper Theme - Clean white paper
- ======================================== */
-body.theme-paper {
- background: #ffffff;
- color: #1a1a1a;
-}
-
-body.theme-paper .tab-bar {
- background: #f8f8f8;
- border-bottom-color: #e0e0e0;
-}
-
-body.theme-paper .tab {
- background: #f0f0f0;
- border-color: #e0e0e0;
- color: #333;
-}
-
-body.theme-paper .tab.active {
- background: #ffffff;
- border-bottom-color: #1a1a1a;
-}
-
-body.theme-paper .toolbar {
- background: #f8f8f8;
- border-bottom-color: #e0e0e0;
-}
-
-body.theme-paper .toolbar button {
- color: #333;
-}
-
-body.theme-paper .toolbar button:hover {
- background: #e8e8e8;
-}
-
-body.theme-paper .editor-textarea {
- background: #ffffff;
- color: #1a1a1a;
-}
-
-body.theme-paper .pane:last-child {
- background: #ffffff;
-}
-
-body.theme-paper .preview-content {
- color: #1a1a1a;
-}
-
-body.theme-paper .preview-content h1,
-body.theme-paper .preview-content h2 {
- color: #000;
- border-bottom-color: #e0e0e0;
-}
-
-body.theme-paper .preview-content code {
- background: #f5f5f5;
- color: #c41a16;
-}
-
-body.theme-paper .preview-content pre {
- background: #f5f5f5;
- border-color: #e0e0e0;
-}
-
-body.theme-paper .preview-content a {
- color: #0366d6;
-}
-
-body.theme-paper .preview-content blockquote {
- border-left-color: #ddd;
- background: #f9f9f9;
-}
-
-body.theme-paper .status-bar {
- background: #f8f8f8;
- border-top-color: #e0e0e0;
- color: #333;
-}
-
-/* ========================================
- Rose Pine Dawn - Warm rose-tinted light
- ======================================== */
-body.theme-rosepine-dawn {
- background: #faf4ed;
- color: #575279;
-}
-
-body.theme-rosepine-dawn .tab-bar {
- background: #f2e9e1;
- border-bottom-color: #dfdad9;
-}
-
-body.theme-rosepine-dawn .tab {
- background: #f2e9e1;
- border-color: #dfdad9;
- color: #575279;
-}
-
-body.theme-rosepine-dawn .tab.active {
- background: #faf4ed;
- border-bottom-color: #907aa9;
-}
-
-body.theme-rosepine-dawn .toolbar {
- background: #f2e9e1;
- border-bottom-color: #dfdad9;
-}
-
-body.theme-rosepine-dawn .toolbar button {
- color: #575279;
-}
-
-body.theme-rosepine-dawn .toolbar button:hover {
- background: #dfdad9;
-}
-
-body.theme-rosepine-dawn .editor-textarea {
- background: #faf4ed;
- color: #575279;
-}
-
-body.theme-rosepine-dawn .pane:last-child {
- background: #faf4ed;
-}
-
-body.theme-rosepine-dawn .preview-content {
- color: #575279;
-}
-
-body.theme-rosepine-dawn .preview-content h1,
-body.theme-rosepine-dawn .preview-content h2 {
- color: #286983;
- border-bottom-color: #dfdad9;
-}
-
-body.theme-rosepine-dawn .preview-content code {
- background: #f2e9e1;
- color: #b4637a;
-}
-
-body.theme-rosepine-dawn .preview-content pre {
- background: #f2e9e1;
- border-color: #dfdad9;
-}
-
-body.theme-rosepine-dawn .preview-content a {
- color: #56949f;
-}
-
-body.theme-rosepine-dawn .preview-content blockquote {
- border-left-color: #907aa9;
- background: #f2e9e1;
- color: #797593;
-}
-
-body.theme-rosepine-dawn .status-bar {
- background: #f2e9e1;
- border-top-color: #dfdad9;
- color: #575279;
-}
-
-/* Print Styles */
-@media print {
- /* Hide UI elements for clean print output */
- #toolbar,
- #tab-bar,
- #editor-container,
- .editor-container,
- #status-bar,
- .status-bar,
- .toolbar,
- .tab-bar,
- .editor-pane,
- [id^="editor-pane-"],
- .dialog,
- .modal-overlay,
- .export-dialog {
- display: none !important;
- }
-
- /* Ensure body and html take full width */
- html, body {
- width: 100% !important;
- height: auto !important;
- margin: 0 !important;
- padding: 0 !important;
- overflow: visible !important;
- }
-
- /* Show preview in full width */
- #preview,
- .preview,
- .preview-content,
- [id^="preview-"],
- [id^="preview-pane-"],
- .tab-content,
- .pane {
- display: block !important;
- width: 100% !important;
- max-width: 100% !important;
- height: auto !important;
- margin: 0 !important;
- padding: 20px !important;
- overflow: visible !important;
- position: static !important;
- left: auto !important;
- right: auto !important;
- top: auto !important;
- bottom: auto !important;
- }
-
- /* Optimize preview content for printing */
- .preview-content,
- [id^="preview-"] {
- line-height: 1.6;
- font-size: 12pt;
- color: #000 !important;
- background: white !important;
- }
-
- /* No-styles mode for printing without theme colors */
- body.printing-no-styles .preview-content,
- body.printing-no-styles [id^="preview-"] {
- color: #000 !important;
- background: #fff !important;
- }
-
- /* Text formatting */
- .preview-content h1,
- .preview-content h2,
- .preview-content h3,
- .preview-content h4,
- .preview-content h5,
- .preview-content h6 {
- page-break-after: avoid;
- margin-top: 1em;
- margin-bottom: 0.5em;
- }
-
- .preview-content p {
- margin-bottom: 0.5em;
- page-break-inside: avoid;
- }
-
- /* Code blocks */
- .preview-content pre {
- background: #f5f5f5 !important;
- border: 1px solid #ddd !important;
- page-break-inside: avoid;
- padding: 10px;
- font-size: 10pt;
- }
-
- .preview-content code {
- background: #f5f5f5 !important;
- color: #000 !important;
- font-size: 10pt;
- }
-
- /* Lists */
- .preview-content ul,
- .preview-content ol {
- margin-left: 20px;
- page-break-inside: avoid;
- }
-
- .preview-content li {
- page-break-inside: avoid;
- margin-bottom: 0.3em;
- }
-
- /* Tables */
- .preview-content table {
- width: 100%;
- border-collapse: collapse;
- page-break-inside: avoid;
- margin-bottom: 1em;
- }
-
- .preview-content th,
- .preview-content td {
- border: 1px solid #999 !important;
- padding: 8px !important;
- text-align: left;
- }
-
- .preview-content th {
- background: #f0f0f0 !important;
- font-weight: bold;
- }
-
- /* Links - remove underline for print */
- .preview-content a {
- color: #000 !important;
- text-decoration: none;
- }
-
- /* Blockquotes */
- .preview-content blockquote {
- border-left: 3px solid #ccc;
- padding-left: 15px;
- margin-left: 0;
- color: #333 !important;
- }
-
- /* Images */
- .preview-content img {
- max-width: 100%;
- height: auto;
- page-break-inside: avoid;
- }
-
- /* Horizontal rules */
- .preview-content hr {
- border: none;
- border-top: 1px solid #999;
- margin: 1em 0;
- }
-}
-
-/* Print mode classes */
-.print-mode {
- display: block !important;
- width: 100% !important;
- max-width: 100% !important;
- position: fixed !important;
- top: 0 !important;
- left: 0 !important;
- z-index: 9999 !important;
- background: white !important;
- padding: 20px !important;
-}
-
-/* Ensure preview panes are visible in print mode */
-#preview-pane-1, #preview-pane-2, #preview-pane-3, #preview-pane-4, #preview-pane-5 {
- display: block !important;
-}
-
-/* No-styles printing mode */
-body.printing-no-styles .preview-content,
-body.printing-no-styles [id^="preview-"],
-.print-no-styles .preview-content {
- color: #000 !important;
- background: white !important;
-}
-
-body.printing-no-styles .preview-content h1,
-body.printing-no-styles .preview-content h2,
-body.printing-no-styles .preview-content h3,
-body.printing-no-styles .preview-content h4,
-body.printing-no-styles .preview-content h5,
-body.printing-no-styles .preview-content h6,
-.print-no-styles .preview-content h1,
-.print-no-styles .preview-content h2,
-.print-no-styles .preview-content h3,
-.print-no-styles .preview-content h4,
-.print-no-styles .preview-content h5,
-.print-no-styles .preview-content h6 {
- color: #000 !important;
- border-color: #999 !important;
-}
-
-body.printing-no-styles .preview-content code,
-.print-no-styles .preview-content code {
- background: #f5f5f5 !important;
- color: #000 !important;
-}
-
-body.printing-no-styles .preview-content pre,
-.print-no-styles .preview-content pre {
- background: #f5f5f5 !important;
- color: #000 !important;
- border-color: #999 !important;
-}
-
-.print-no-styles .preview-content a {
- color: #000 !important;
-}
-
-.print-no-styles .preview-content blockquote {
- color: #333 !important;
- border-color: #999 !important;
-}
-
-/* ================================
- Header & Footer Dialog Styles
- ================================ */
-
-.hf-enable-section {
- margin-bottom: 20px;
- padding: 15px;
- background: var(--bg-secondary, #f5f5f5);
- border-radius: 5px;
-}
-
-.hf-enable-section label {
- display: flex;
- align-items: center;
- font-weight: 600;
- cursor: pointer;
-}
-
-.hf-enable-section input[type="checkbox"] {
- margin-right: 10px;
- width: 18px;
- height: 18px;
- cursor: pointer;
-}
-
-#hf-config-content {
- transition: opacity 0.3s ease;
-}
-
-#hf-config-content.disabled {
- opacity: 0.5;
- pointer-events: none;
-}
-
-.hf-section {
- margin-bottom: 25px;
- padding: 20px;
- background: var(--bg-tertiary, #fafafa);
- border-radius: 8px;
- border: 1px solid var(--border-color, #e0e0e0);
-}
-
-.hf-section h4 {
- margin: 0 0 15px 0;
- color: var(--text-primary, #333);
- font-size: 16px;
- border-bottom: 2px solid var(--accent-color, #007bff);
- padding-bottom: 8px;
-}
-
-.hf-row {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 15px;
- margin-bottom: 15px;
-}
-
-.hf-column {
- display: flex;
- flex-direction: column;
- position: relative;
-}
-
-.hf-column label {
- font-weight: 600;
- margin-bottom: 5px;
- color: var(--text-secondary, #666);
- font-size: 13px;
-}
-
-.hf-column input[type="text"] {
- padding: 8px 35px 8px 10px;
- border: 1px solid var(--border-color, #ccc);
- border-radius: 4px;
- font-size: 14px;
- background: var(--input-bg, white);
- color: var(--text-primary, #333);
- transition: border-color 0.2s ease;
-}
-
-.hf-column input[type="text"]:focus {
- outline: none;
- border-color: var(--accent-color, #007bff);
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
-}
-
-.field-insert-btn {
- position: absolute;
- right: 5px;
- bottom: 5px;
- width: 28px;
- height: 28px;
- padding: 0;
- background: var(--accent-color, #007bff);
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 18px;
- line-height: 1;
- transition: all 0.2s ease;
-}
-
-.field-insert-btn:hover {
- background: var(--accent-hover, #0056b3);
- transform: scale(1.05);
-}
-
-.field-insert-btn:active {
- transform: scale(0.95);
-}
-
-.hf-logo-row {
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 15px;
- background: var(--bg-secondary, #f5f5f5);
- border-radius: 6px;
- margin-top: 10px;
-}
-
-.hf-logo-row label {
- font-weight: 600;
- color: var(--text-secondary, #666);
- min-width: 120px;
-}
-
-.hf-logo-row input[type="file"] {
- flex: 1;
- padding: 6px 10px;
- border: 1px solid var(--border-color, #ccc);
- border-radius: 4px;
- background: var(--input-bg, white);
- color: var(--text-primary, #333);
- font-size: 13px;
- cursor: pointer;
-}
-
-.hf-logo-row input[type="file"]::-webkit-file-upload-button {
- padding: 5px 12px;
- background: var(--button-bg, #6c757d);
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- margin-right: 10px;
-}
-
-.hf-logo-row input[type="file"]::-webkit-file-upload-button:hover {
- background: var(--button-hover, #5a6268);
-}
-
-.browse-btn {
- padding: 6px 12px;
- background: var(--accent-color, #007bff);
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 13px;
- transition: background 0.2s ease;
- margin-right: 8px;
-}
-
-.browse-btn:hover {
- background: var(--accent-hover, #0056b3);
-}
-
-.clear-btn {
- padding: 6px 12px;
- background: var(--danger-color, #dc3545);
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- font-size: 13px;
- transition: background 0.2s ease;
-}
-
-.clear-btn:hover {
- background: var(--danger-hover, #c82333);
-}
-
-.logo-preview {
- font-size: 12px;
- color: var(--text-secondary, #666);
- max-width: 150px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.hf-help {
- margin-top: 20px;
- padding: 15px;
- background: var(--info-bg, #e7f3ff);
- border-left: 4px solid var(--info-color, #007bff);
- border-radius: 4px;
-}
-
-.hf-help p {
- margin: 0 0 10px 0;
- font-weight: 600;
- color: var(--text-primary, #333);
-}
-
-.hf-help ul {
- margin: 0;
- padding-left: 20px;
- list-style-type: none;
-}
-
-.hf-help li {
- margin-bottom: 6px;
- color: var(--text-secondary, #555);
- font-size: 13px;
-}
-
-.hf-help code {
- background: rgba(0, 123, 255, 0.1);
- padding: 2px 6px;
- border-radius: 3px;
- font-family: 'Courier New', monospace;
- color: var(--accent-color, #007bff);
- font-weight: 600;
-}
-
-/* Field Picker Dialog */
-.field-picker-list {
- display: grid;
- grid-template-columns: 1fr;
- gap: 8px;
-}
-
-.field-option {
- padding: 12px 16px;
- background: var(--bg-secondary, #f5f5f5);
- border: 1px solid var(--border-color, #ddd);
- border-radius: 6px;
- text-align: left;
- cursor: pointer;
- font-size: 14px;
- color: var(--text-primary, #333);
- transition: all 0.2s ease;
-}
-
-.field-option:hover {
- background: var(--accent-color, #007bff);
- color: white;
- border-color: var(--accent-color, #007bff);
- transform: translateX(5px);
-}
-
-/* Dark Theme Support for Header/Footer Dialog */
-body[data-theme="dark"] .hf-enable-section,
-body[data-theme="dark"] .hf-logo-row {
- background: #2d2d2d;
-}
-
-body[data-theme="dark"] .hf-section {
- background: #252525;
- border-color: #404040;
-}
-
-body[data-theme="dark"] .hf-column input[type="text"],
-body[data-theme="dark"] .hf-logo-row input[type="file"] {
- background: #2d2d2d;
- color: #e0e0e0;
- border-color: #404040;
-}
-
-body[data-theme="dark"] .hf-help {
- background: rgba(0, 123, 255, 0.15);
- border-left-color: #0d6efd;
-}
-
-body[data-theme="dark"] .field-option {
- background: #2d2d2d;
- border-color: #404040;
- color: #e0e0e0;
-}
-
-body[data-theme="dark"] .field-option:hover {
- background: #0d6efd;
- color: white;
-}
-/* Mermaid Diagram Styles */
-.mermaid {
- background: #f9f9f9;
- padding: 20px;
- border-radius: 8px;
- margin: 20px 0;
- text-align: center;
- border: 1px solid #e0e0e0;
-}
-
-.mermaid svg {
- max-width: 100%;
- height: auto;
-}
-
-body.theme-dark .mermaid {
- background: #2d2d2d;
- border-color: #444;
-}
-
-body.theme-solarized .mermaid {
- background: #fdf6e3;
- border-color: #eee8d5;
-}
-
-body.theme-monokai .mermaid {
- background: #2f2f2f;
- border-color: #49483e;
-}
-
-body.theme-github .mermaid {
- background: #f6f8fa;
- border-color: #e1e4e8;
-}
-
-/* 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;
-}
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+ overflow: hidden;
+ height: 100vh;
+}
+
+.hidden {
+ display: none !important;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+
+/* Tab Bar */
+.tab-bar {
+ display: flex;
+ align-items: center;
+ background: #f0f0f0;
+ border-bottom: 1px solid #ddd;
+ padding: 0 8px;
+ min-height: 36px;
+}
+
+.tab {
+ display: flex;
+ align-items: center;
+ padding: 6px 12px;
+ background: #e8e8e8;
+ border: 1px solid #ccc;
+ border-bottom: none;
+ border-radius: 6px 6px 0 0;
+ margin-right: 2px;
+ cursor: pointer;
+ user-select: none;
+ max-width: 200px;
+ min-width: 120px;
+}
+
+.tab.active {
+ background: #fff;
+ border-color: #999;
+ z-index: 1;
+}
+
+.tab-title {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 13px;
+}
+
+.tab-close {
+ background: none;
+ border: none;
+ font-size: 16px;
+ font-weight: bold;
+ cursor: pointer;
+ padding: 0;
+ margin-left: 8px;
+ width: 16px;
+ height: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 3px;
+ color: #666;
+}
+
+.tab-close:hover {
+ background: #ddd;
+ color: #000;
+}
+
+.new-tab-button {
+ background: none;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 4px 8px;
+ cursor: pointer;
+ font-size: 14px;
+ margin-left: 8px;
+ color: #666;
+}
+
+.new-tab-button:hover {
+ background: #e8e8e8;
+}
+
+/* Tab Content */
+.tab-content {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+}
+
+.tab-content:not(.active) {
+ display: none;
+}
+
+/* Toolbar */
+.toolbar {
+ display: flex;
+ align-items: center;
+ padding: 8px 12px;
+ background: #f5f5f5;
+ border-bottom: 1px solid #ddd;
+ gap: 4px;
+}
+
+.toolbar button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: 1px solid transparent;
+ background: transparent;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.toolbar button:hover {
+ background: #e0e0e0;
+ border-color: #ccc;
+}
+
+.toolbar button:active {
+ background: #d0d0d0;
+}
+
+.toolbar-separator {
+ width: 1px;
+ height: 24px;
+ background: #ccc;
+ margin: 0 8px;
+}
+
+/* Editor Container */
+.editor-container {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+}
+
+.pane {
+ flex: 1;
+ overflow: auto;
+ min-width: 0;
+}
+
+.pane:first-child {
+ border-right: none;
+}
+
+/* Pane Resizer */
+.pane-resizer {
+ width: 6px;
+ background: #e0e0e0;
+ cursor: col-resize;
+ position: relative;
+ flex-shrink: 0;
+ transition: background 0.2s;
+}
+
+.pane-resizer:hover {
+ background: #999;
+}
+
+.pane-resizer:active {
+ 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%;
+ height: 100%;
+ padding: 20px;
+ font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+ font-size: 15px;
+ line-height: 1.6;
+ border: none;
+ outline: none;
+ resize: none;
+}
+
+.pane:last-child {
+ padding: 0;
+ background: #fff;
+}
+
+.preview-content {
+ max-width: none;
+ margin: 0;
+ padding: 20px 24px 24px 24px;
+ line-height: 1.6;
+ font-size: 15px;
+ font-size: 14px;
+}
+
+/* Legacy support for old selectors */
+#editor-pane {
+ border-right: 1px solid #ddd;
+}
+
+#editor {
+ width: 100%;
+ height: 100%;
+ padding: 20px;
+ font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+ font-size: 15px;
+ line-height: 1.6;
+ border: none;
+ outline: none;
+ resize: none;
+}
+
+#preview-pane {
+ padding: 20px;
+ background: #fff;
+}
+
+/* GitHub Light Theme for Preview (Default) */
+#preview, [id^="preview-"], .preview-content {
+ max-width: 800px;
+ margin: 0 auto;
+ font-size: 15px;
+ padding: 20px;
+ background: #ffffff;
+ color: #24292f;
+ line-height: 1.6;
+}
+
+/* Status Bar */
+.status-bar {
+ display: flex;
+ justify-content: space-between;
+ padding: 4px 12px;
+ background: #f5f5f5;
+ border-top: 1px solid #ddd;
+ font-size: 12px;
+ color: #666;
+}
+
+/* Preview Styles */
+#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6,
+.preview-content h1, .preview-content h2, .preview-content h3, .preview-content h4, .preview-content h5, .preview-content h6 {
+ margin-top: 24px;
+ margin-bottom: 16px;
+ font-weight: 600;
+ line-height: 1.25;
+}
+
+#preview h1, .preview-content h1 {
+ font-size: 2em;
+ border-bottom: 1px solid #eaecef;
+ padding-bottom: 0.3em;
+ margin-top: 0;
+}
+
+#preview h2, .preview-content h2 {
+ font-size: 1.5em;
+ border-bottom: 1px solid #eaecef;
+ padding-bottom: 0.3em;
+}
+
+#preview p, .preview-content p {
+ margin-bottom: 16px;
+ line-height: 1.6;
+}
+
+#preview code, .preview-content code, [id^="preview-"] code {
+ padding: 0.2em 0.4em;
+ margin: 0;
+ font-size: 85%;
+ background-color: #f6f8fa;
+ border: 1px solid #d0d7de;
+ border-radius: 6px;
+ font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+ color: #24292f;
+}
+
+#preview pre, .preview-content pre, [id^="preview-"] pre {
+ padding: 16px;
+ overflow: auto;
+ font-size: 85%;
+ line-height: 1.45;
+ background-color: #f6f8fa;
+ border: 1px solid #d0d7de;
+ border-radius: 6px;
+ margin-bottom: 16px;
+}
+
+#preview pre code, .preview-content pre code {
+ display: inline;
+ max-width: auto;
+ padding: 0;
+ margin: 0;
+ overflow: visible;
+ line-height: inherit;
+ word-wrap: normal;
+ background-color: transparent;
+ border: 0;
+}
+
+#preview blockquote, .preview-content blockquote {
+ padding: 0 1em;
+ color: #6a737d;
+ border-left: 0.25em solid #dfe2e5;
+ margin-bottom: 16px;
+}
+
+/* GitHub Dark Theme for Preview */
+body.theme-dark #preview,
+body.theme-dark [id^="preview-"],
+body.theme-dark .preview-content {
+ background: #0d1117;
+ color: #c9d1d9;
+}
+
+body.theme-dark #preview h1,
+body.theme-dark [id^="preview-"] h1,
+body.theme-dark .preview-content h1 {
+ color: #c9d1d9;
+ border-bottom-color: #21262d;
+}
+
+body.theme-dark #preview h2,
+body.theme-dark [id^="preview-"] h2,
+body.theme-dark .preview-content h2 {
+ color: #c9d1d9;
+ border-bottom-color: #21262d;
+}
+
+body.theme-dark #preview h3,
+body.theme-dark #preview h4,
+body.theme-dark #preview h5,
+body.theme-dark #preview h6,
+body.theme-dark [id^="preview-"] h3,
+body.theme-dark [id^="preview-"] h4,
+body.theme-dark [id^="preview-"] h5,
+body.theme-dark [id^="preview-"] h6,
+body.theme-dark .preview-content h3,
+body.theme-dark .preview-content h4,
+body.theme-dark .preview-content h5,
+body.theme-dark .preview-content h6 {
+ color: #c9d1d9;
+}
+
+body.theme-dark #preview p,
+body.theme-dark [id^="preview-"] p,
+body.theme-dark .preview-content p {
+ color: #c9d1d9;
+}
+
+body.theme-dark #preview code,
+body.theme-dark [id^="preview-"] code,
+body.theme-dark .preview-content code {
+ background-color: #161b22;
+ border-color: #30363d;
+ color: #c9d1d9;
+}
+
+body.theme-dark #preview pre,
+body.theme-dark [id^="preview-"] pre,
+body.theme-dark .preview-content pre {
+ background-color: #161b22;
+ border-color: #30363d;
+}
+
+body.theme-dark #preview blockquote,
+body.theme-dark [id^="preview-"] blockquote,
+body.theme-dark .preview-content blockquote {
+ color: #8b949e;
+ border-left-color: #3b434b;
+}
+
+body.theme-dark #preview a,
+body.theme-dark [id^="preview-"] a,
+body.theme-dark .preview-content a {
+ color: #58a6ff;
+}
+
+body.theme-dark #preview a:hover,
+body.theme-dark [id^="preview-"] a:hover,
+body.theme-dark .preview-content a:hover {
+ color: #79c0ff;
+}
+
+body.theme-dark #preview table,
+body.theme-dark [id^="preview-"] table,
+body.theme-dark .preview-content table {
+ border-color: #30363d;
+}
+
+body.theme-dark #preview table th,
+body.theme-dark [id^="preview-"] table th,
+body.theme-dark .preview-content table th {
+ background-color: #161b22;
+ color: #c9d1d9;
+ border-color: #30363d;
+}
+
+body.theme-dark #preview table td,
+body.theme-dark [id^="preview-"] table td,
+body.theme-dark .preview-content table td {
+ border-color: #30363d;
+ color: #c9d1d9;
+}
+
+body.theme-dark #preview hr,
+body.theme-dark [id^="preview-"] hr,
+body.theme-dark .preview-content hr {
+ background-color: #21262d;
+ border-color: #21262d;
+}
+
+body.theme-dark #preview ul,
+body.theme-dark #preview ol,
+body.theme-dark [id^="preview-"] ul,
+body.theme-dark [id^="preview-"] ol,
+body.theme-dark .preview-content ul,
+body.theme-dark .preview-content ol {
+ color: #c9d1d9;
+}
+
+body.theme-dark #preview li,
+body.theme-dark [id^="preview-"] li,
+body.theme-dark .preview-content li {
+ color: #c9d1d9;
+}
+
+#preview ul, #preview ol, .preview-content ul, .preview-content ol {
+ padding-left: 2em;
+ margin-bottom: 16px;
+}
+
+#preview li, .preview-content li {
+ margin-bottom: 4px;
+}
+
+#preview a, .preview-content a {
+ color: #0366d6;
+ text-decoration: none;
+}
+
+#preview a:hover, .preview-content a:hover {
+ text-decoration: underline;
+}
+
+#preview img, .preview-content img {
+ max-width: 100%;
+ height: auto;
+}
+
+#preview table, .preview-content table {
+ border-collapse: collapse;
+ margin-bottom: 16px;
+ width: 100%;
+}
+
+#preview table th, #preview table td,
+.preview-content table th, .preview-content table td {
+ padding: 6px 13px;
+ border: 1px solid #dfe2e5;
+}
+
+#preview table th, .preview-content table th {
+ font-weight: 600;
+ background-color: #f6f8fa;
+}
+
+#preview table tr:nth-child(2n), .preview-content table tr:nth-child(2n) {
+ background-color: #ffffff;
+}
+
+/* Theme: Dark */
+body.theme-dark {
+ background: #1e1e1e;
+ color: #d4d4d4;
+}
+
+body.theme-dark .tab-bar {
+ background: #2d2d30;
+ border-bottom-color: #3e3e42;
+}
+
+body.theme-dark .tab {
+ background: #3c3c3c;
+ border-color: #555;
+ color: #d4d4d4;
+}
+
+body.theme-dark .tab.active {
+ background: #1e1e1e;
+ border-color: #666;
+}
+
+body.theme-dark .tab-close {
+ color: #ccc;
+}
+
+body.theme-dark .tab-close:hover {
+ background: #555;
+ color: #fff;
+}
+
+body.theme-dark .new-tab-button {
+ border-color: #555;
+ color: #ccc;
+}
+
+body.theme-dark .new-tab-button:hover {
+ background: #3c3c3c;
+}
+
+body.theme-dark .toolbar {
+ background: #2d2d30;
+ border-bottom-color: #3e3e42;
+}
+
+body.theme-dark .toolbar button {
+ color: #cccccc;
+}
+
+body.theme-dark .toolbar button:hover {
+ background: #3e3e42;
+ border-color: #464647;
+}
+
+body.theme-dark .toolbar-separator {
+ background: #3e3e42;
+}
+
+body.theme-dark .pane:first-child {
+ border-right-color: #3e3e42;
+}
+
+body.theme-dark .editor-textarea {
+ background: #1e1e1e;
+ color: #d4d4d4;
+}
+
+body.theme-dark .pane:last-child {
+ background: #1e1e1e;
+}
+
+/* Legacy support */
+body.theme-dark #editor-pane {
+ border-right-color: #3e3e42;
+}
+
+body.theme-dark #editor {
+ background: #1e1e1e;
+ color: #d4d4d4;
+}
+
+body.theme-dark #preview-pane {
+ background: #252526;
+}
+
+body.theme-dark #preview, body.theme-dark .preview-content {
+ color: #d4d4d4;
+}
+
+body.theme-dark #preview h1, body.theme-dark #preview h2,
+body.theme-dark .preview-content h1, body.theme-dark .preview-content h2 {
+ border-bottom-color: #3e3e42;
+}
+
+body.theme-dark #preview code, body.theme-dark .preview-content code {
+ background-color: rgba(255,255,255,0.1);
+}
+
+body.theme-dark #preview pre, body.theme-dark .preview-content pre {
+ background-color: #2d2d30;
+}
+
+body.theme-dark #preview blockquote, body.theme-dark .preview-content blockquote {
+ color: #808080;
+ border-left-color: #3e3e42;
+}
+
+body.theme-dark #preview a, body.theme-dark .preview-content a {
+ color: #569cd6;
+}
+
+body.theme-dark #preview table th, body.theme-dark #preview table td,
+body.theme-dark .preview-content table th, body.theme-dark .preview-content table td {
+ border-color: #3e3e42;
+}
+
+
+body.theme-dark #preview table tr:nth-child(2n), body.theme-dark .preview-content table tr:nth-child(2n) {
+ background-color: #2d2d30;
+}
+
+body.theme-dark .status-bar {
+ background: #2d2d30;
+ border-top-color: #3e3e42;
+ color: #969696;
+}
+
+/* Theme: Solarized */
+body.theme-solarized {
+ background: #fdf6e3;
+ color: #657b83;
+}
+
+body.theme-solarized .tab-bar {
+ background: #eee8d5;
+ border-bottom-color: #93a1a1;
+}
+
+body.theme-solarized .tab {
+ background: #fdf6e3;
+ border-color: #93a1a1;
+ color: #657b83;
+}
+
+body.theme-solarized .tab.active {
+ background: #fdf6e3;
+ border-color: #859900;
+}
+
+body.theme-solarized .tab-close {
+ color: #657b83;
+}
+
+body.theme-solarized .tab-close:hover {
+ background: #93a1a1;
+ color: #dc322f;
+}
+
+body.theme-solarized .new-tab-button {
+ border-color: #93a1a1;
+ color: #657b83;
+}
+
+body.theme-solarized .new-tab-button:hover {
+ background: #eee8d5;
+}
+
+body.theme-solarized .toolbar {
+ background: #eee8d5;
+ border-bottom-color: #93a1a1;
+}
+
+body.theme-solarized .toolbar button {
+ color: #586e75;
+}
+
+body.theme-solarized .toolbar button:hover {
+ background: #fdf6e3;
+ border-color: #93a1a1;
+}
+
+body.theme-solarized #editor {
+ background: #fdf6e3;
+ color: #657b83;
+}
+
+body.theme-solarized #preview, body.theme-solarized .preview-content {
+ color: #586e75;
+}
+
+body.theme-solarized #preview code, body.theme-solarized .preview-content code {
+ background-color: #eee8d5;
+}
+
+body.theme-solarized #preview pre, body.theme-solarized .preview-content pre {
+ background-color: #eee8d5;
+}
+
+body.theme-solarized #preview a, body.theme-solarized .preview-content a {
+ color: #268bd2;
+}
+
+/* Theme: Monokai */
+body.theme-monokai {
+ background: #272822;
+ color: #f8f8f2;
+}
+
+body.theme-monokai .tab-bar {
+ background: #3e3d32;
+ border-bottom-color: #75715e;
+}
+
+body.theme-monokai .tab {
+ background: #49483e;
+ border-color: #75715e;
+ color: #f8f8f2;
+}
+
+body.theme-monokai .tab.active {
+ background: #272822;
+ border-color: #a6e22e;
+}
+
+body.theme-monokai .tab-close {
+ color: #f8f8f2;
+}
+
+body.theme-monokai .tab-close:hover {
+ background: #75715e;
+ color: #f92672;
+}
+
+body.theme-monokai .new-tab-button {
+ border-color: #75715e;
+ color: #f8f8f2;
+}
+
+body.theme-monokai .new-tab-button:hover {
+ background: #49483e;
+}
+
+body.theme-monokai .toolbar {
+ background: #3e3d32;
+ border-bottom-color: #75715e;
+}
+
+body.theme-monokai .toolbar button {
+ color: #f8f8f2;
+}
+
+body.theme-monokai .toolbar button:hover {
+ background: #49483e;
+ border-color: #75715e;
+}
+
+body.theme-monokai #editor {
+ background: #272822;
+ color: #f8f8f2;
+}
+
+body.theme-monokai .editor-textarea {
+ background: #272822;
+ color: #f8f8f2;
+}
+
+body.theme-monokai #preview-pane {
+ background: #272822;
+}
+
+body.theme-monokai #preview, body.theme-monokai .preview-content {
+ color: #f8f8f2;
+}
+
+body.theme-monokai #preview h1, body.theme-monokai #preview h2,
+body.theme-monokai .preview-content h1, body.theme-monokai .preview-content h2 {
+ border-bottom-color: #75715e;
+}
+
+body.theme-monokai #preview code, body.theme-monokai .preview-content code {
+ background-color: #3e3d32;
+}
+
+body.theme-monokai #preview pre, body.theme-monokai .preview-content pre {
+ background-color: #3e3d32;
+}
+
+body.theme-monokai #preview blockquote, body.theme-monokai .preview-content blockquote {
+ color: #75715e;
+ border-left-color: #75715e;
+}
+
+body.theme-monokai #preview a, body.theme-monokai .preview-content a {
+ color: #66d9ef;
+}
+
+body.theme-monokai .status-bar {
+ background: #3e3d32;
+ border-top-color: #75715e;
+ color: #75715e;
+}
+
+/* Theme: GitHub */
+body.theme-github {
+ background: #fff;
+ color: #24292e;
+}
+
+body.theme-github .tab-bar {
+ background: #fafbfc;
+ border-bottom-color: #e1e4e8;
+}
+
+body.theme-github .tab {
+ background: #f6f8fa;
+ border-color: #e1e4e8;
+ color: #24292e;
+}
+
+body.theme-github .tab.active {
+ background: #fff;
+ border-color: #0366d6;
+}
+
+body.theme-github .tab-close {
+ color: #586069;
+}
+
+body.theme-github .tab-close:hover {
+ background: #e1e4e8;
+ color: #cb2431;
+}
+
+body.theme-github .new-tab-button {
+ border-color: #e1e4e8;
+ color: #586069;
+}
+
+body.theme-github .new-tab-button:hover {
+ background: #f6f8fa;
+}
+
+body.theme-github .toolbar {
+ background: #fafbfc;
+ border-bottom-color: #e1e4e8;
+}
+
+body.theme-github .toolbar button {
+ color: #586069;
+}
+
+body.theme-github .toolbar button:hover {
+ background: #f6f8fa;
+ border-color: #e1e4e8;
+}
+
+body.theme-github #editor {
+ background: #fff;
+ color: #24292e;
+}
+
+body.theme-github #preview, body.theme-github .preview-content {
+ color: #24292e;
+}
+
+body.theme-github #preview h1, body.theme-github #preview h2,
+body.theme-github .preview-content h1, body.theme-github .preview-content h2 {
+ border-bottom-color: #eaecef;
+}
+
+body.theme-github #preview code, body.theme-github .preview-content code {
+ background-color: rgba(27,31,35,0.05);
+}
+
+body.theme-github #preview pre, body.theme-github .preview-content pre {
+ background-color: #f6f8fa;
+}
+
+body.theme-github #preview blockquote, body.theme-github .preview-content blockquote {
+ color: #6a737d;
+ border-left-color: #dfe2e5;
+}
+
+body.theme-github #preview a, body.theme-github .preview-content a {
+ color: #0366d6;
+}
+
+body.theme-github .status-bar {
+ background: #fafbfc;
+ border-top-color: #e1e4e8;
+ color: #586069;
+}
+
+/* Hide preview pane by default */
+.pane.hidden {
+ display: none;
+}
+
+.pane.full-width {
+ border-right: none;
+}
+
+/* Legacy support */
+#preview-pane.hidden {
+ display: none;
+}
+
+#editor-pane.full-width {
+ border-right: none;
+}
+
+/* Find & Replace Dialog */
+.find-dialog {
+ position: absolute;
+ top: 60px;
+ right: 20px;
+ background: #fff;
+ border: 1px solid #ddd;
+ border-radius: 6px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ z-index: 1000;
+ min-width: 400px;
+ padding: 12px;
+}
+
+.find-dialog.hidden {
+ display: none;
+}
+
+.find-controls {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ margin-bottom: 8px;
+}
+
+.find-controls input {
+ flex: 1;
+ padding: 6px 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 13px;
+}
+
+.find-controls button {
+ padding: 6px 10px;
+ border: 1px solid #ddd;
+ background: #f5f5f5;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 12px;
+ white-space: nowrap;
+}
+
+.find-controls button:hover {
+ background: #e5e5e5;
+}
+
+.find-info {
+ font-size: 12px;
+ color: #666;
+ text-align: right;
+}
+
+/* Editor Wrapper with Line Numbers */
+.editor-wrapper {
+ position: relative;
+ display: flex;
+ height: 100%;
+}
+
+.line-numbers {
+ min-width: 40px;
+ padding: 8px 4px;
+ background: #f8f8f8;
+ border-right: 1px solid #ddd;
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+ font-size: 13px;
+ line-height: 1.4;
+ color: #666;
+ text-align: right;
+ user-select: none;
+ overflow: hidden;
+}
+
+.line-numbers.hidden {
+ display: none;
+}
+
+.line-numbers .line-number {
+ display: block;
+ white-space: nowrap;
+}
+
+/* Adjust editor when line numbers are shown */
+.editor-wrapper #editor {
+ flex: 1;
+}
+
+/* Export Options Dialog */
+.export-dialog {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.export-dialog.hidden {
+ display: none;
+}
+
+.export-dialog-content {
+ background: #fff;
+ border-radius: 6px;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+ width: 85%;
+ max-width: 450px;
+ max-height: 80vh;
+ overflow-y: auto;
+ position: relative;
+ font-size: 12px;
+}
+
+.export-dialog-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 16px;
+ border-bottom: 1px solid #eee;
+}
+
+.export-dialog-header h3 {
+ margin: 0;
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.export-dialog-body {
+ padding: 14px 16px;
+}
+
+.export-section {
+ margin-bottom: 14px;
+}
+
+.export-section label {
+ display: block;
+ font-weight: 500;
+ margin-bottom: 4px;
+ color: #333;
+ font-size: 12px;
+}
+
+.export-section label.checkbox-inline {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ font-weight: 400;
+}
+
+.export-section label.checkbox-inline input[type="checkbox"] {
+ width: auto;
+ margin: 0;
+}
+
+/* PDF Editor buttons */
+#add-merge-file {
+ padding: 5px 10px;
+ font-size: 12px;
+ background: #4a90d9;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+#add-merge-file:hover {
+ background: #357abd;
+}
+
+.export-section select,
+.export-section input[type="text"],
+.export-section input[type="number"] {
+ width: 100%;
+ padding: 5px 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 12px;
+}
+
+.export-section select:focus,
+.export-section input:focus {
+ outline: none;
+ border-color: #007acc;
+ box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.1);
+}
+
+.metadata-container {
+ border: 1px solid #eee;
+ border-radius: 4px;
+ padding: 12px;
+ margin-bottom: 8px;
+}
+
+.metadata-field {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 8px;
+}
+
+.metadata-field:last-child {
+ margin-bottom: 0;
+}
+
+.metadata-key {
+ flex: 0 0 120px;
+ font-weight: 600;
+}
+
+.metadata-value {
+ flex: 1;
+}
+
+.checkbox-group {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-bottom: 12px;
+}
+
+.checkbox-group label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-weight: normal;
+ margin-bottom: 0;
+}
+
+.checkbox-group input[type="checkbox"] {
+ margin: 0;
+}
+
+.form-row {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ margin-bottom: 8px;
+}
+
+.form-row label {
+ flex: 0 0 120px;
+ margin-bottom: 0;
+}
+
+.form-row input,
+.form-row select {
+ flex: 1;
+}
+
+.form-row button {
+ flex: 0 0 auto;
+ padding: 8px 16px;
+ background: #f5f5f5;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+.form-row button:hover {
+ background: #e8e8e8;
+}
+
+.pdf-only {
+ display: none;
+}
+
+.export-dialog[data-format="pdf"] .pdf-only {
+ display: block;
+}
+
+.export-dialog-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 12px;
+ padding: 16px 20px;
+ border-top: 1px solid #eee;
+ background: #f8f9fa;
+ border-radius: 0 0 8px 8px;
+}
+
+.export-dialog-footer button {
+ padding: 10px 20px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.export-dialog-footer button.primary {
+ background: #007acc;
+ color: white;
+ border-color: #007acc;
+}
+
+.export-dialog-footer button.primary:hover {
+ background: #005fa3;
+ border-color: #005fa3;
+}
+
+.export-dialog-footer button:not(.primary) {
+ background: #f5f5f5;
+}
+
+.export-dialog-footer button:not(.primary):hover {
+ background: #e8e8e8;
+}
+
+#export-dialog-close {
+ background: none;
+ border: none;
+ font-size: 20px;
+ cursor: pointer;
+ padding: 0;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+}
+
+#export-dialog-close:hover {
+ background: #f0f0f0;
+}
+
+#add-metadata-field {
+ padding: 6px 12px;
+ background: #f8f9fa;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 13px;
+ color: #666;
+}
+
+#add-metadata-field:hover {
+ background: #e9ecef;
+}
+
+/* Theme support for export dialog */
+body.theme-dark .export-dialog-content {
+ background: #2d2d2d;
+ color: #f0f0f0;
+}
+
+body.theme-dark .export-dialog-header {
+ border-color: #444;
+}
+
+body.theme-dark .export-dialog-footer {
+ background: #333;
+ border-color: #444;
+}
+
+body.theme-dark .export-section label {
+ color: #f0f0f0;
+}
+
+body.theme-dark .export-section select,
+body.theme-dark .export-section input {
+ background: #1a1a1a;
+ border-color: #555;
+ color: #f0f0f0;
+}
+
+body.theme-dark .metadata-container {
+ border-color: #444;
+ background: #1a1a1a;
+}
+
+body.theme-dark .form-row button,
+body.theme-dark #add-metadata-field {
+ background: #1a1a1a;
+ border-color: #555;
+ color: #f0f0f0;
+}
+
+/* PDF Editor Specific Styles */
+.pdf-editor-content {
+ max-width: 450px !important;
+ max-height: 75vh;
+ overflow-y: auto;
+ font-size: 12px;
+}
+
+.pdf-editor-body {
+ min-height: 200px;
+ max-height: calc(85vh - 150px);
+ overflow-y: auto;
+}
+
+.pdf-operation-section {
+ animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.pdf-operation-section.hidden {
+ display: none !important;
+}
+
+/* Make PDF Editor sections more compact */
+.pdf-operation-section .export-section {
+ margin-bottom: 18px;
+}
+
+.pdf-operation-section .export-section:last-child {
+ margin-bottom: 0;
+}
+
+/* File list styling for merge operation */
+.file-list {
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 10px;
+ margin-bottom: 10px;
+ min-height: 100px;
+ max-height: 200px;
+ overflow-y: auto;
+ background: #fafafa;
+}
+
+.file-entry {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 8px;
+ margin-bottom: 6px;
+ background: white;
+ border: 1px solid #e0e0e0;
+ border-radius: 4px;
+}
+
+.file-entry:last-child {
+ margin-bottom: 0;
+}
+
+.file-name {
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-right: 10px;
+ font-size: 13px;
+}
+
+.remove-file {
+ padding: 4px 10px;
+ background: #dc3545;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 12px;
+}
+
+.remove-file:hover {
+ background: #c82333;
+}
+
+/* Theme support for PDF Editor */
+body.theme-dark .file-list {
+ background: #1a1a1a;
+ border-color: #555;
+}
+
+body.theme-dark .file-entry {
+ background: #2d2d2d;
+ border-color: #444;
+ color: #f0f0f0;
+}
+
+body.theme-dark .pdf-editor-content {
+ background: #2d2d2d;
+}
+
+body.theme-dark .pdf-editor-body {
+ background: #2d2d2d;
+}
+
+body.theme-dark .form-row button:hover,
+body.theme-dark #add-metadata-field:hover {
+ background: #333;
+}
+
+body.theme-dark #export-dialog-close:hover {
+ background: #444;
+}
+
+/* Batch Conversion Dialog */
+.batch-dialog {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1000;
+}
+
+.batch-dialog.hidden {
+ display: none;
+}
+
+.batch-dialog-content {
+ background: #fff;
+ border-radius: 6px;
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+ width: 85%;
+ max-width: 450px;
+ max-height: 75vh;
+ overflow-y: auto;
+ font-size: 12px;
+}
+
+.batch-dialog-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 20px;
+ border-bottom: 1px solid #eee;
+}
+
+.batch-dialog-header h3 {
+ margin: 0;
+ font-size: 18px;
+ font-weight: 600;
+}
+
+.batch-dialog-body {
+ padding: 20px;
+}
+
+.batch-section {
+ margin-bottom: 20px;
+}
+
+.batch-section label {
+ display: block;
+ font-weight: 600;
+ margin-bottom: 8px;
+ color: #333;
+}
+
+.batch-section select,
+.batch-section input[type="text"] {
+ width: 100%;
+ padding: 8px 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+}
+
+.folder-input-group {
+ display: flex;
+ gap: 8px;
+}
+
+.folder-input-group input {
+ flex: 1;
+}
+
+.folder-input-group button {
+ padding: 8px 16px;
+ background: #f5f5f5;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ white-space: nowrap;
+}
+
+.folder-input-group button:hover {
+ background: #e8e8e8;
+}
+
+.batch-section label input[type="checkbox"] {
+ margin-right: 8px;
+}
+
+#batch-show-options {
+ padding: 8px 16px;
+ background: #f8f9fa;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ color: #666;
+}
+
+#batch-show-options:hover {
+ background: #e9ecef;
+}
+
+.batch-progress {
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 16px;
+ background: #f8f9fa;
+}
+
+.progress-bar {
+ width: 100%;
+ height: 8px;
+ background: #e0e0e0;
+ border-radius: 4px;
+ overflow: hidden;
+ margin-bottom: 8px;
+}
+
+.progress-fill {
+ height: 100%;
+ background: #007acc;
+ transition: width 0.3s ease;
+ width: 0%;
+}
+
+.progress-text {
+ display: flex;
+ justify-content: space-between;
+ font-size: 14px;
+ color: #666;
+}
+
+.batch-dialog-footer {
+ display: flex;
+ justify-content: flex-end;
+ gap: 12px;
+ padding: 16px 20px;
+ border-top: 1px solid #eee;
+ background: #f8f9fa;
+ border-radius: 0 0 8px 8px;
+}
+
+.batch-dialog-footer button {
+ padding: 10px 20px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.batch-dialog-footer button.primary {
+ background: #007acc;
+ color: white;
+ border-color: #007acc;
+}
+
+.batch-dialog-footer button.primary:hover:not(:disabled) {
+ background: #005fa3;
+ border-color: #005fa3;
+}
+
+.batch-dialog-footer button.primary:disabled {
+ background: #ccc;
+ border-color: #ccc;
+ cursor: not-allowed;
+}
+
+.batch-dialog-footer button:not(.primary) {
+ background: #f5f5f5;
+}
+
+.batch-dialog-footer button:not(.primary):hover {
+ background: #e8e8e8;
+}
+
+#batch-dialog-close {
+ background: none;
+ border: none;
+ font-size: 20px;
+ cursor: pointer;
+ padding: 0;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+}
+
+#batch-dialog-close:hover {
+ background: #f0f0f0;
+}
+
+/* Theme support for batch dialog */
+body.theme-dark .batch-dialog-content {
+ background: #2d2d2d;
+ color: #f0f0f0;
+}
+
+body.theme-dark .batch-dialog-header {
+ border-color: #444;
+}
+
+body.theme-dark .batch-dialog-footer {
+ background: #333;
+ border-color: #444;
+}
+
+body.theme-dark .batch-section label {
+ color: #f0f0f0;
+}
+
+body.theme-dark .batch-section select,
+body.theme-dark .batch-section input {
+ background: #1a1a1a;
+ border-color: #555;
+ color: #f0f0f0;
+}
+
+body.theme-dark .folder-input-group button,
+body.theme-dark #batch-show-options {
+ background: #1a1a1a;
+ border-color: #555;
+ color: #f0f0f0;
+}
+
+body.theme-dark .folder-input-group button:hover,
+body.theme-dark #batch-show-options:hover {
+ background: #333;
+}
+
+body.theme-dark .batch-progress {
+ background: #1a1a1a;
+ border-color: #444;
+}
+
+body.theme-dark .progress-text {
+ color: #ccc;
+}
+
+body.theme-dark #batch-dialog-close:hover {
+ background: #444;
+}
+
+/* Theme support for find dialog */
+body.theme-dark .find-dialog {
+ background: #2d2d2d;
+ border-color: #555;
+ color: #f0f0f0;
+}
+
+body.theme-dark .find-controls input {
+ background: #333;
+ border-color: #555;
+ color: #f0f0f0;
+}
+
+body.theme-dark .find-controls button {
+ background: #404040;
+ border-color: #555;
+ color: #f0f0f0;
+}
+
+body.theme-dark .find-controls button:hover {
+ background: #4a4a4a;
+}
+
+body.theme-dark .line-numbers {
+ background: #2a2a2a;
+ border-right-color: #555;
+ color: #888;
+}
+
+/* Additional theme support for line numbers */
+body.theme-solarized .line-numbers {
+ background: #fdf6e3;
+ border-right-color: #eee8d5;
+ color: #93a1a1;
+}
+
+body.theme-monokai .line-numbers {
+ background: #2f2f2f;
+ border-right-color: #555;
+ color: #75715e;
+}
+
+body.theme-github .line-numbers {
+ background: #fafbfc;
+ border-right-color: #e1e4e8;
+ color: #586069;
+}
+
+/* Export Profiles Styles */
+.export-profiles {
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 15px;
+ margin-bottom: 15px;
+}
+
+.profile-controls {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ margin-top: 8px;
+}
+
+.profile-controls select {
+ flex: 1;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+}
+
+.profile-controls button {
+ padding: 8px 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ background: #f5f5f5;
+ cursor: pointer;
+ font-size: 13px;
+ transition: all 0.2s;
+}
+
+.profile-controls button:hover {
+ background: #e8e8e8;
+}
+
+/* Advanced Export Toggle Styles */
+.export-mode-toggle {
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 15px;
+ margin-bottom: 20px;
+}
+
+.checkbox-label {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ font-weight: 500;
+ margin-bottom: 5px;
+}
+
+.checkbox-label input[type="checkbox"] {
+ margin-right: 10px;
+ transform: scale(1.2);
+}
+
+.export-help {
+ color: #666;
+ font-size: 12px;
+ font-style: italic;
+ margin-left: 25px;
+}
+
+.advanced-options {
+ transition: all 0.3s ease;
+ overflow: visible;
+ position: relative;
+ z-index: 10;
+}
+
+.advanced-options.hidden {
+ display: none;
+}
+
+.basic-options {
+ background: #f8f9fa;
+ border: 1px solid #e9ecef;
+ border-radius: 6px;
+ padding: 15px;
+ margin-top: 10px;
+}
+
+.basic-options label {
+ font-weight: normal;
+ margin-bottom: 8px;
+}
+
+/* Theme support for advanced export toggle */
+body.theme-dark .export-mode-toggle {
+ border-color: #444;
+}
+
+body.theme-dark .export-help {
+ color: #999;
+}
+
+body.theme-dark .basic-options {
+ background: #1a1a1a;
+ border-color: #444;
+}
+
+body.theme-dark .checkbox-label {
+ color: #f0f0f0;
+}
+
+body.theme-solarized .export-mode-toggle {
+ border-color: #eee8d5;
+}
+
+body.theme-solarized .export-help {
+ color: #586e75;
+}
+
+body.theme-solarized .basic-options {
+ background: #fdf6e3;
+ border-color: #eee8d5;
+}
+
+body.theme-monokai .export-mode-toggle {
+ border-color: #49483e;
+}
+
+body.theme-monokai .export-help {
+ color: #75715e;
+}
+
+body.theme-monokai .basic-options {
+ background: #2f2f2f;
+ border-color: #49483e;
+}
+
+body.theme-github .export-mode-toggle {
+ border-color: #e1e4e8;
+}
+
+body.theme-github .export-help {
+ color: #586069;
+}
+
+body.theme-github .basic-options {
+ background: #f6f8fa;
+ border-color: #e1e4e8;
+}
+
+/* Enhanced Statistics Styles */
+.enhanced-stats {
+ font-size: 11px;
+ color: #666;
+ padding: 2px 0;
+ border-top: 1px solid #ddd;
+ margin-top: 2px;
+ font-family: monospace;
+}
+
+/* Theme support for enhanced stats */
+body.theme-dark .enhanced-stats {
+ color: #999;
+ border-color: #444;
+}
+
+body.theme-solarized .enhanced-stats {
+ color: #586e75;
+ border-color: #eee8d5;
+}
+
+body.theme-monokai .enhanced-stats {
+ color: #75715e;
+ border-color: #49483e;
+}
+
+body.theme-github .enhanced-stats {
+ color: #586069;
+ border-color: #e1e4e8;
+}
+
+/* Auto-save indicator */
+.auto-save-indicator {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ background: #28a745;
+ color: white;
+ padding: 8px 16px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ z-index: 10000;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+ animation: slideInRight 0.3s ease-out;
+}
+
+.auto-save-indicator.fade-out {
+ animation: fadeOut 0.3s ease-out forwards;
+}
+
+@keyframes slideInRight {
+ from {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+/* Theme: Dracula */
+body.theme-dracula {
+ background: #282a36;
+ color: #f8f8f2;
+}
+
+body.theme-dracula .tab-bar {
+ background: #343746;
+ border-bottom-color: #44475a;
+}
+
+body.theme-dracula .tab {
+ background: #44475a;
+ border-color: #6272a4;
+ color: #f8f8f2;
+}
+
+body.theme-dracula .tab.active {
+ background: #282a36;
+ border-color: #bd93f9;
+}
+
+body.theme-dracula .toolbar {
+ background: #343746;
+ border-bottom-color: #44475a;
+}
+
+body.theme-dracula .toolbar button {
+ color: #f8f8f2;
+}
+
+body.theme-dracula .toolbar button:hover {
+ background: #44475a;
+ border-color: #6272a4;
+}
+
+body.theme-dracula .editor-textarea {
+ background: #282a36;
+ color: #f8f8f2;
+}
+
+body.theme-dracula .pane:last-child {
+ background: #282a36;
+}
+
+body.theme-dracula .preview-content {
+ color: #f8f8f2;
+}
+
+body.theme-dracula .preview-content h1,
+body.theme-dracula .preview-content h2 {
+ border-bottom-color: #44475a;
+ color: #bd93f9;
+}
+
+body.theme-dracula .preview-content code {
+ background-color: #44475a;
+}
+
+body.theme-dracula .preview-content pre {
+ background-color: #44475a;
+}
+
+body.theme-dracula .preview-content a {
+ color: #8be9fd;
+}
+
+body.theme-dracula .status-bar {
+ background: #343746;
+ border-top-color: #44475a;
+ color: #f8f8f2;
+}
+
+/* Theme: Nord */
+body.theme-nord {
+ background: #2e3440;
+ color: #d8dee9;
+}
+
+body.theme-nord .tab-bar {
+ background: #3b4252;
+ border-bottom-color: #4c566a;
+}
+
+body.theme-nord .tab {
+ background: #434c5e;
+ border-color: #4c566a;
+ color: #d8dee9;
+}
+
+body.theme-nord .tab.active {
+ background: #2e3440;
+ border-color: #88c0d0;
+}
+
+body.theme-nord .toolbar {
+ background: #3b4252;
+ border-bottom-color: #4c566a;
+}
+
+body.theme-nord .toolbar button {
+ color: #d8dee9;
+}
+
+body.theme-nord .toolbar button:hover {
+ background: #434c5e;
+ border-color: #4c566a;
+}
+
+body.theme-nord .editor-textarea {
+ background: #2e3440;
+ color: #d8dee9;
+}
+
+body.theme-nord .pane:last-child {
+ background: #2e3440;
+}
+
+body.theme-nord .preview-content {
+ color: #d8dee9;
+}
+
+body.theme-nord .preview-content h1,
+body.theme-nord .preview-content h2 {
+ border-bottom-color: #4c566a;
+ color: #88c0d0;
+}
+
+body.theme-nord .preview-content code {
+ background-color: #3b4252;
+}
+
+body.theme-nord .preview-content pre {
+ background-color: #3b4252;
+}
+
+body.theme-nord .preview-content a {
+ color: #81a1c1;
+}
+
+body.theme-nord .status-bar {
+ background: #3b4252;
+ border-top-color: #4c566a;
+ color: #d8dee9;
+}
+
+/* Theme: One Dark */
+body.theme-onedark {
+ background: #282c34;
+ color: #abb2bf;
+}
+
+body.theme-onedark .tab-bar {
+ background: #21252b;
+ border-bottom-color: #181a1f;
+}
+
+body.theme-onedark .tab {
+ background: #2c313a;
+ border-color: #3e4451;
+ color: #abb2bf;
+}
+
+body.theme-onedark .tab.active {
+ background: #282c34;
+ border-color: #61afef;
+}
+
+body.theme-onedark .toolbar {
+ background: #21252b;
+ border-bottom-color: #181a1f;
+}
+
+body.theme-onedark .toolbar button {
+ color: #abb2bf;
+}
+
+body.theme-onedark .toolbar button:hover {
+ background: #2c313a;
+ border-color: #3e4451;
+}
+
+body.theme-onedark .editor-textarea {
+ background: #282c34;
+ color: #abb2bf;
+}
+
+body.theme-onedark .pane:last-child {
+ background: #282c34;
+}
+
+body.theme-onedark .preview-content {
+ color: #abb2bf;
+}
+
+body.theme-onedark .preview-content h1,
+body.theme-onedark .preview-content h2 {
+ border-bottom-color: #3e4451;
+ color: #61afef;
+}
+
+body.theme-onedark .preview-content code {
+ background-color: #21252b;
+}
+
+body.theme-onedark .preview-content pre {
+ background-color: #21252b;
+}
+
+body.theme-onedark .preview-content a {
+ color: #56b6c2;
+}
+
+body.theme-onedark .status-bar {
+ background: #21252b;
+ border-top-color: #181a1f;
+ color: #abb2bf;
+}
+
+/* Theme: Atom One Light */
+body.theme-atomonelight {
+ background: #fafafa;
+ color: #383a42;
+}
+
+body.theme-atomonelight .tab-bar {
+ background: #f0f0f0;
+ border-bottom-color: #e0e0e0;
+}
+
+body.theme-atomonelight .tab {
+ background: #e5e5e6;
+ border-color: #d0d0d0;
+ color: #383a42;
+}
+
+body.theme-atomonelight .tab.active {
+ background: #fafafa;
+ border-color: #4078f2;
+}
+
+body.theme-atomonelight .toolbar {
+ background: #f0f0f0;
+ border-bottom-color: #e0e0e0;
+}
+
+body.theme-atomonelight .toolbar button {
+ color: #383a42;
+}
+
+body.theme-atomonelight .toolbar button:hover {
+ background: #e5e5e6;
+ border-color: #d0d0d0;
+}
+
+body.theme-atomonelight .editor-textarea {
+ background: #fafafa;
+ color: #383a42;
+}
+
+body.theme-atomonelight .pane:last-child {
+ background: #fafafa;
+}
+
+body.theme-atomonelight .preview-content {
+ color: #383a42;
+}
+
+body.theme-atomonelight .preview-content h1,
+body.theme-atomonelight .preview-content h2 {
+ border-bottom-color: #e0e0e0;
+ color: #4078f2;
+}
+
+body.theme-atomonelight .preview-content code {
+ background-color: #f0f0f0;
+}
+
+body.theme-atomonelight .preview-content pre {
+ background-color: #f0f0f0;
+}
+
+body.theme-atomonelight .preview-content a {
+ color: #0184bc;
+}
+
+body.theme-atomonelight .status-bar {
+ background: #f0f0f0;
+ border-top-color: #e0e0e0;
+ color: #383a42;
+}
+
+/* Theme: Material */
+body.theme-material {
+ background: #263238;
+ color: #eeffff;
+}
+
+body.theme-material .tab-bar {
+ background: #2e3c43;
+ border-bottom-color: #37474f;
+}
+
+body.theme-material .tab {
+ background: #37474f;
+ border-color: #546e7a;
+ color: #eeffff;
+}
+
+body.theme-material .tab.active {
+ background: #263238;
+ border-color: #82aaff;
+}
+
+body.theme-material .toolbar {
+ background: #2e3c43;
+ border-bottom-color: #37474f;
+}
+
+body.theme-material .toolbar button {
+ color: #eeffff;
+}
+
+body.theme-material .toolbar button:hover {
+ background: #37474f;
+ border-color: #546e7a;
+}
+
+body.theme-material .editor-textarea {
+ background: #263238;
+ color: #eeffff;
+}
+
+body.theme-material .pane:last-child {
+ background: #263238;
+}
+
+body.theme-material .preview-content {
+ color: #eeffff;
+}
+
+body.theme-material .preview-content h1,
+body.theme-material .preview-content h2 {
+ border-bottom-color: #37474f;
+ color: #82aaff;
+}
+
+body.theme-material .preview-content code {
+ background-color: #2e3c43;
+}
+
+body.theme-material .preview-content pre {
+ background-color: #2e3c43;
+}
+
+body.theme-material .preview-content a {
+ color: #80cbc4;
+}
+
+body.theme-material .status-bar {
+ background: #2e3c43;
+ border-top-color: #37474f;
+ color: #eeffff;
+}
+
+/* Theme: Gruvbox Dark */
+body.theme-gruvbox-dark {
+ background: #282828;
+ color: #ebdbb2;
+}
+
+body.theme-gruvbox-dark .tab-bar {
+ background: #3c3836;
+ border-bottom-color: #504945;
+}
+
+body.theme-gruvbox-dark .tab {
+ background: #504945;
+ border-color: #665c54;
+ color: #ebdbb2;
+}
+
+body.theme-gruvbox-dark .tab.active {
+ background: #282828;
+ border-color: #fabd2f;
+}
+
+body.theme-gruvbox-dark .toolbar {
+ background: #3c3836;
+ border-bottom-color: #504945;
+}
+
+body.theme-gruvbox-dark .toolbar button {
+ color: #ebdbb2;
+}
+
+body.theme-gruvbox-dark .toolbar button:hover {
+ background: #504945;
+ border-color: #665c54;
+}
+
+body.theme-gruvbox-dark .editor-textarea {
+ background: #282828;
+ color: #ebdbb2;
+}
+
+body.theme-gruvbox-dark .pane:last-child {
+ background: #282828;
+}
+
+body.theme-gruvbox-dark .preview-content {
+ color: #ebdbb2;
+}
+
+body.theme-gruvbox-dark .preview-content h1,
+body.theme-gruvbox-dark .preview-content h2 {
+ border-bottom-color: #504945;
+ color: #fabd2f;
+}
+
+body.theme-gruvbox-dark .preview-content code {
+ background-color: #3c3836;
+}
+
+body.theme-gruvbox-dark .preview-content pre {
+ background-color: #3c3836;
+}
+
+body.theme-gruvbox-dark .preview-content a {
+ color: #83a598;
+}
+
+body.theme-gruvbox-dark .status-bar {
+ background: #3c3836;
+ border-top-color: #504945;
+ color: #ebdbb2;
+}
+
+/* Theme: Gruvbox Light */
+body.theme-gruvbox-light {
+ background: #fbf1c7;
+ color: #3c3836;
+}
+
+body.theme-gruvbox-light .tab-bar {
+ background: #ebdbb2;
+ border-bottom-color: #d5c4a1;
+}
+
+body.theme-gruvbox-light .tab {
+ background: #d5c4a1;
+ border-color: #bdae93;
+ color: #3c3836;
+}
+
+body.theme-gruvbox-light .tab.active {
+ background: #fbf1c7;
+ border-color: #b57614;
+}
+
+body.theme-gruvbox-light .toolbar {
+ background: #ebdbb2;
+ border-bottom-color: #d5c4a1;
+}
+
+body.theme-gruvbox-light .toolbar button {
+ color: #3c3836;
+}
+
+body.theme-gruvbox-light .toolbar button:hover {
+ background: #d5c4a1;
+ border-color: #bdae93;
+}
+
+body.theme-gruvbox-light .editor-textarea {
+ background: #fbf1c7;
+ color: #3c3836;
+}
+
+body.theme-gruvbox-light .pane:last-child {
+ background: #fbf1c7;
+}
+
+body.theme-gruvbox-light .preview-content {
+ color: #3c3836;
+}
+
+body.theme-gruvbox-light .preview-content h1,
+body.theme-gruvbox-light .preview-content h2 {
+ border-bottom-color: #d5c4a1;
+ color: #b57614;
+}
+
+body.theme-gruvbox-light .preview-content code {
+ background-color: #ebdbb2;
+}
+
+body.theme-gruvbox-light .preview-content pre {
+ background-color: #ebdbb2;
+}
+
+body.theme-gruvbox-light .preview-content a {
+ color: #076678;
+}
+
+body.theme-gruvbox-light .status-bar {
+ background: #ebdbb2;
+ border-top-color: #d5c4a1;
+ color: #3c3836;
+}
+
+/* Theme: Tokyo Night */
+body.theme-tokyonight {
+ background: #1a1b26;
+ color: #c0caf5;
+}
+
+body.theme-tokyonight .tab-bar {
+ background: #16161e;
+ border-bottom-color: #24283b;
+}
+
+body.theme-tokyonight .tab {
+ background: #24283b;
+ border-color: #414868;
+ color: #c0caf5;
+}
+
+body.theme-tokyonight .tab.active {
+ background: #1a1b26;
+ border-color: #7aa2f7;
+}
+
+body.theme-tokyonight .toolbar {
+ background: #16161e;
+ border-bottom-color: #24283b;
+}
+
+body.theme-tokyonight .toolbar button {
+ color: #c0caf5;
+}
+
+body.theme-tokyonight .toolbar button:hover {
+ background: #24283b;
+ border-color: #414868;
+}
+
+body.theme-tokyonight .editor-textarea {
+ background: #1a1b26;
+ color: #c0caf5;
+}
+
+body.theme-tokyonight .pane:last-child {
+ background: #1a1b26;
+}
+
+body.theme-tokyonight .preview-content {
+ color: #c0caf5;
+}
+
+body.theme-tokyonight .preview-content h1,
+body.theme-tokyonight .preview-content h2 {
+ border-bottom-color: #24283b;
+ color: #7aa2f7;
+}
+
+body.theme-tokyonight .preview-content code {
+ background-color: #24283b;
+}
+
+body.theme-tokyonight .preview-content pre {
+ background-color: #24283b;
+}
+
+body.theme-tokyonight .preview-content a {
+ color: #7dcfff;
+}
+
+body.theme-tokyonight .status-bar {
+ background: #16161e;
+ border-top-color: #24283b;
+ color: #c0caf5;
+}
+
+/* Theme: Palenight */
+body.theme-palenight {
+ background: #292d3e;
+ color: #a6accd;
+}
+
+body.theme-palenight .tab-bar {
+ background: #32374d;
+ border-bottom-color: #444267;
+}
+
+body.theme-palenight .tab {
+ background: #444267;
+ border-color: #676e95;
+ color: #a6accd;
+}
+
+body.theme-palenight .tab.active {
+ background: #292d3e;
+ border-color: #82aaff;
+}
+
+body.theme-palenight .toolbar {
+ background: #32374d;
+ border-bottom-color: #444267;
+}
+
+body.theme-palenight .toolbar button {
+ color: #a6accd;
+}
+
+body.theme-palenight .toolbar button:hover {
+ background: #444267;
+ border-color: #676e95;
+}
+
+body.theme-palenight .editor-textarea {
+ background: #292d3e;
+ color: #a6accd;
+}
+
+body.theme-palenight .pane:last-child {
+ background: #292d3e;
+}
+
+body.theme-palenight .preview-content {
+ color: #a6accd;
+}
+
+body.theme-palenight .preview-content h1,
+body.theme-palenight .preview-content h2 {
+ border-bottom-color: #444267;
+ color: #82aaff;
+}
+
+body.theme-palenight .preview-content code {
+ background-color: #32374d;
+}
+
+body.theme-palenight .preview-content pre {
+ background-color: #32374d;
+}
+
+body.theme-palenight .preview-content a {
+ color: #89ddff;
+}
+
+body.theme-palenight .status-bar {
+ background: #32374d;
+ border-top-color: #444267;
+ color: #a6accd;
+}
+
+/* Theme: Ayu Dark */
+body.theme-ayu-dark {
+ background: #0a0e14;
+ color: #b3b1ad;
+}
+
+body.theme-ayu-dark .tab-bar {
+ background: #0d1016;
+ border-bottom-color: #1f2430;
+}
+
+body.theme-ayu-dark .tab {
+ background: #1f2430;
+ border-color: #3d424d;
+ color: #b3b1ad;
+}
+
+body.theme-ayu-dark .tab.active {
+ background: #0a0e14;
+ border-color: #ffaa33;
+}
+
+body.theme-ayu-dark .toolbar {
+ background: #0d1016;
+ border-bottom-color: #1f2430;
+}
+
+body.theme-ayu-dark .toolbar button {
+ color: #b3b1ad;
+}
+
+body.theme-ayu-dark .toolbar button:hover {
+ background: #1f2430;
+ border-color: #3d424d;
+}
+
+body.theme-ayu-dark .editor-textarea {
+ background: #0a0e14;
+ color: #b3b1ad;
+}
+
+body.theme-ayu-dark .pane:last-child {
+ background: #0a0e14;
+}
+
+body.theme-ayu-dark .preview-content {
+ color: #b3b1ad;
+}
+
+body.theme-ayu-dark .preview-content h1,
+body.theme-ayu-dark .preview-content h2 {
+ border-bottom-color: #1f2430;
+ color: #ffaa33;
+}
+
+body.theme-ayu-dark .preview-content code {
+ background-color: #0d1016;
+}
+
+body.theme-ayu-dark .preview-content pre {
+ background-color: #0d1016;
+}
+
+body.theme-ayu-dark .preview-content a {
+ color: #39bae6;
+}
+
+body.theme-ayu-dark .status-bar {
+ background: #0d1016;
+ border-top-color: #1f2430;
+ color: #b3b1ad;
+}
+
+/* Theme: Ayu Light */
+body.theme-ayu-light {
+ background: #fafafa;
+ color: #5c6166;
+}
+
+body.theme-ayu-light .tab-bar {
+ background: #f3f4f5;
+ border-bottom-color: #e7e8e9;
+}
+
+body.theme-ayu-light .tab {
+ background: #e7e8e9;
+ border-color: #d9dadb;
+ color: #5c6166;
+}
+
+body.theme-ayu-light .tab.active {
+ background: #fafafa;
+ border-color: #ff6a00;
+}
+
+body.theme-ayu-light .toolbar {
+ background: #f3f4f5;
+ border-bottom-color: #e7e8e9;
+}
+
+body.theme-ayu-light .toolbar button {
+ color: #5c6166;
+}
+
+body.theme-ayu-light .toolbar button:hover {
+ background: #e7e8e9;
+ border-color: #d9dadb;
+}
+
+body.theme-ayu-light .editor-textarea {
+ background: #fafafa;
+ color: #5c6166;
+}
+
+body.theme-ayu-light .pane:last-child {
+ background: #fafafa;
+}
+
+body.theme-ayu-light .preview-content {
+ color: #5c6166;
+}
+
+body.theme-ayu-light .preview-content h1,
+body.theme-ayu-light .preview-content h2 {
+ border-bottom-color: #e7e8e9;
+ color: #ff6a00;
+}
+
+body.theme-ayu-light .preview-content code {
+ background-color: #f3f4f5;
+}
+
+body.theme-ayu-light .preview-content pre {
+ background-color: #f3f4f5;
+}
+
+body.theme-ayu-light .preview-content a {
+ color: #399ee6;
+}
+
+body.theme-ayu-light .status-bar {
+ background: #f3f4f5;
+ border-top-color: #e7e8e9;
+ color: #5c6166;
+}
+
+/* Theme: Ayu Mirage */
+body.theme-ayu-mirage {
+ background: #1f2430;
+ color: #cbccc6;
+}
+
+body.theme-ayu-mirage .tab-bar {
+ background: #232834;
+ border-bottom-color: #343d4b;
+}
+
+body.theme-ayu-mirage .tab {
+ background: #343d4b;
+ border-color: #465268;
+ color: #cbccc6;
+}
+
+body.theme-ayu-mirage .tab.active {
+ background: #1f2430;
+ border-color: #ffa759;
+}
+
+body.theme-ayu-mirage .toolbar {
+ background: #232834;
+ border-bottom-color: #343d4b;
+}
+
+body.theme-ayu-mirage .toolbar button {
+ color: #cbccc6;
+}
+
+body.theme-ayu-mirage .toolbar button:hover {
+ background: #343d4b;
+ border-color: #465268;
+}
+
+body.theme-ayu-mirage .editor-textarea {
+ background: #1f2430;
+ color: #cbccc6;
+}
+
+body.theme-ayu-mirage .pane:last-child {
+ background: #1f2430;
+}
+
+body.theme-ayu-mirage .preview-content {
+ color: #cbccc6;
+}
+
+body.theme-ayu-mirage .preview-content h1,
+body.theme-ayu-mirage .preview-content h2 {
+ border-bottom-color: #343d4b;
+ color: #ffa759;
+}
+
+body.theme-ayu-mirage .preview-content code {
+ background-color: #232834;
+}
+
+body.theme-ayu-mirage .preview-content pre {
+ background-color: #232834;
+}
+
+body.theme-ayu-mirage .preview-content a {
+ color: #5ccfe6;
+}
+
+body.theme-ayu-mirage .status-bar {
+ background: #232834;
+ border-top-color: #343d4b;
+ color: #cbccc6;
+}
+
+/* Theme: Oceanic Next */
+body.theme-oceanic-next {
+ background: #1b2b34;
+ color: #cdd3de;
+}
+
+body.theme-oceanic-next .tab-bar {
+ background: #20353f;
+ border-bottom-color: #343d46;
+}
+
+body.theme-oceanic-next .tab {
+ background: #343d46;
+ border-color: #4f5b66;
+ color: #cdd3de;
+}
+
+body.theme-oceanic-next .tab.active {
+ background: #1b2b34;
+ border-color: #6699cc;
+}
+
+body.theme-oceanic-next .toolbar {
+ background: #20353f;
+ border-bottom-color: #343d46;
+}
+
+body.theme-oceanic-next .toolbar button {
+ color: #cdd3de;
+}
+
+body.theme-oceanic-next .toolbar button:hover {
+ background: #343d46;
+ border-color: #4f5b66;
+}
+
+body.theme-oceanic-next .editor-textarea {
+ background: #1b2b34;
+ color: #cdd3de;
+}
+
+body.theme-oceanic-next .pane:last-child {
+ background: #1b2b34;
+}
+
+body.theme-oceanic-next .preview-content {
+ color: #cdd3de;
+}
+
+body.theme-oceanic-next .preview-content h1,
+body.theme-oceanic-next .preview-content h2 {
+ border-bottom-color: #343d46;
+ color: #6699cc;
+}
+
+body.theme-oceanic-next .preview-content code {
+ background-color: #20353f;
+}
+
+body.theme-oceanic-next .preview-content pre {
+ background-color: #20353f;
+}
+
+body.theme-oceanic-next .preview-content a {
+ color: #5fb3b3;
+}
+
+body.theme-oceanic-next .status-bar {
+ background: #20353f;
+ border-top-color: #343d46;
+ color: #cdd3de;
+}
+
+/* Theme: Cobalt2 */
+body.theme-cobalt2 {
+ background: #193549;
+ color: #ffffff;
+}
+
+body.theme-cobalt2 .tab-bar {
+ background: #15232d;
+ border-bottom-color: #2a4a5d;
+}
+
+body.theme-cobalt2 .tab {
+ background: #0d3a58;
+ border-color: #2a4a5d;
+ color: #ffffff;
+}
+
+body.theme-cobalt2 .tab.active {
+ background: #193549;
+ border-color: #ffc600;
+}
+
+body.theme-cobalt2 .toolbar {
+ background: #15232d;
+ border-bottom-color: #2a4a5d;
+}
+
+body.theme-cobalt2 .toolbar button {
+ color: #ffffff;
+}
+
+body.theme-cobalt2 .toolbar button:hover {
+ background: #0d3a58;
+ border-color: #2a4a5d;
+}
+
+body.theme-cobalt2 .editor-textarea {
+ background: #193549;
+ color: #ffffff;
+}
+
+body.theme-cobalt2 .pane:last-child {
+ background: #193549;
+}
+
+body.theme-cobalt2 .preview-content {
+ color: #ffffff;
+}
+
+body.theme-cobalt2 .preview-content h1,
+body.theme-cobalt2 .preview-content h2 {
+ border-bottom-color: #2a4a5d;
+ color: #ffc600;
+}
+
+body.theme-cobalt2 .preview-content code {
+ background-color: #0d3a58;
+}
+
+body.theme-cobalt2 .preview-content pre {
+ background-color: #0d3a58;
+}
+
+body.theme-cobalt2 .preview-content a {
+ color: #3ad900;
+}
+
+body.theme-cobalt2 .status-bar {
+ background: #15232d;
+ border-top-color: #2a4a5d;
+ color: #ffffff;
+}
+
+/* Theme: Concrete Dark - ConcreteInfo branded dark theme */
+body.theme-concrete-dark {
+ background: #0d0b09;
+ color: #e3e3e3;
+}
+
+body.theme-concrete-dark .tab-bar {
+ background: #1a1816;
+ border-bottom-color: #464646;
+}
+
+body.theme-concrete-dark .tab {
+ background: #464646;
+ border-color: #9a9696;
+ color: #e3e3e3;
+}
+
+body.theme-concrete-dark .tab.active {
+ background: #0d0b09;
+ border-color: #e5461f;
+}
+
+body.theme-concrete-dark .toolbar {
+ background: #1a1816;
+ border-bottom-color: #464646;
+}
+
+body.theme-concrete-dark .toolbar button {
+ color: #e3e3e3;
+}
+
+body.theme-concrete-dark .toolbar button:hover {
+ background: #464646;
+ border-color: #e5461f;
+}
+
+body.theme-concrete-dark .editor-textarea {
+ background: #0d0b09;
+ color: #e3e3e3;
+}
+
+body.theme-concrete-dark .pane:last-child {
+ background: #0d0b09;
+}
+
+body.theme-concrete-dark .preview-content {
+ color: #e3e3e3;
+}
+
+body.theme-concrete-dark .preview-content h1,
+body.theme-concrete-dark .preview-content h2 {
+ border-bottom-color: #464646;
+ color: #e5461f;
+}
+
+body.theme-concrete-dark .preview-content code {
+ background-color: #464646;
+}
+
+body.theme-concrete-dark .preview-content pre {
+ background-color: #464646;
+}
+
+body.theme-concrete-dark .preview-content a {
+ color: #e5461f;
+}
+
+body.theme-concrete-dark .status-bar {
+ background: #1a1816;
+ border-top-color: #464646;
+ color: #9a9696;
+}
+
+/* Theme: Concrete Light - ConcreteInfo branded light theme */
+body.theme-concrete-light {
+ background: #fafafa;
+ color: #0d0b09;
+}
+
+body.theme-concrete-light .tab-bar {
+ background: #e3e3e3;
+ border-bottom-color: #9a9696;
+}
+
+body.theme-concrete-light .tab {
+ background: #e3e3e3;
+ border-color: #9a9696;
+ color: #0d0b09;
+}
+
+body.theme-concrete-light .tab.active {
+ background: #fafafa;
+ border-color: #e5461f;
+}
+
+body.theme-concrete-light .toolbar {
+ background: #e3e3e3;
+ border-bottom-color: #9a9696;
+}
+
+body.theme-concrete-light .toolbar button {
+ color: #0d0b09;
+}
+
+body.theme-concrete-light .toolbar button:hover {
+ background: #9a9696;
+ border-color: #e5461f;
+}
+
+body.theme-concrete-light .editor-textarea {
+ background: #fafafa;
+ color: #0d0b09;
+}
+
+body.theme-concrete-light .pane:last-child {
+ background: #fafafa;
+}
+
+body.theme-concrete-light .preview-content {
+ color: #0d0b09;
+}
+
+body.theme-concrete-light .preview-content h1,
+body.theme-concrete-light .preview-content h2 {
+ border-bottom-color: #9a9696;
+ color: #e5461f;
+}
+
+body.theme-concrete-light .preview-content code {
+ background-color: #e3e3e3;
+}
+
+body.theme-concrete-light .preview-content pre {
+ background-color: #e3e3e3;
+}
+
+body.theme-concrete-light .preview-content a {
+ color: #e5461f;
+}
+
+body.theme-concrete-light .status-bar {
+ background: #e3e3e3;
+ border-top-color: #9a9696;
+ color: #464646;
+}
+
+/* Theme: Concrete Warm - ConcreteInfo branded warm theme */
+body.theme-concrete-warm {
+ background: #464646;
+ color: #e3e3e3;
+}
+
+body.theme-concrete-warm .tab-bar {
+ background: #3a3836;
+ border-bottom-color: #9a9696;
+}
+
+body.theme-concrete-warm .tab {
+ background: #9a9696;
+ border-color: #e3e3e3;
+ color: #0d0b09;
+}
+
+body.theme-concrete-warm .tab.active {
+ background: #464646;
+ border-color: #e5461f;
+}
+
+body.theme-concrete-warm .toolbar {
+ background: #3a3836;
+ border-bottom-color: #9a9696;
+}
+
+body.theme-concrete-warm .toolbar button {
+ color: #e3e3e3;
+}
+
+body.theme-concrete-warm .toolbar button:hover {
+ background: #9a9696;
+ border-color: #e5461f;
+}
+
+body.theme-concrete-warm .editor-textarea {
+ background: #464646;
+ color: #e3e3e3;
+}
+
+body.theme-concrete-warm .pane:last-child {
+ background: #464646;
+}
+
+body.theme-concrete-warm .preview-content {
+ color: #e3e3e3;
+}
+
+body.theme-concrete-warm .preview-content h1,
+body.theme-concrete-warm .preview-content h2 {
+ border-bottom-color: #9a9696;
+ color: #e5461f;
+}
+
+body.theme-concrete-warm .preview-content code {
+ background-color: #3a3836;
+}
+
+body.theme-concrete-warm .preview-content pre {
+ background-color: #3a3836;
+}
+
+body.theme-concrete-warm .preview-content a {
+ color: #e5461f;
+}
+
+body.theme-concrete-warm .status-bar {
+ background: #3a3836;
+ border-top-color: #9a9696;
+ color: #e3e3e3;
+}
+
+/* ========================================
+ Sepia Theme - Warm reading theme
+ ======================================== */
+body.theme-sepia {
+ background: #f4ecd8;
+ color: #5b4636;
+}
+
+body.theme-sepia .tab-bar {
+ background: #e8dcc8;
+ border-bottom-color: #d4c4a8;
+}
+
+body.theme-sepia .tab {
+ background: #e8dcc8;
+ border-color: #d4c4a8;
+ color: #5b4636;
+}
+
+body.theme-sepia .tab.active {
+ background: #f4ecd8;
+ border-bottom-color: #8b7355;
+}
+
+body.theme-sepia .toolbar {
+ background: #e8dcc8;
+ border-bottom-color: #d4c4a8;
+}
+
+body.theme-sepia .toolbar button {
+ color: #5b4636;
+}
+
+body.theme-sepia .toolbar button:hover {
+ background: #d4c4a8;
+}
+
+body.theme-sepia .editor-textarea {
+ background: #f4ecd8;
+ color: #5b4636;
+}
+
+body.theme-sepia .pane:last-child {
+ background: #f4ecd8;
+}
+
+body.theme-sepia .preview-content {
+ color: #5b4636;
+}
+
+body.theme-sepia .preview-content h1,
+body.theme-sepia .preview-content h2 {
+ color: #3d2914;
+ border-bottom-color: #d4c4a8;
+}
+
+body.theme-sepia .preview-content code {
+ background: #e8dcc8;
+ color: #8b4513;
+}
+
+body.theme-sepia .preview-content pre {
+ background: #e8dcc8;
+ border-color: #d4c4a8;
+}
+
+body.theme-sepia .preview-content a {
+ color: #8b4513;
+}
+
+body.theme-sepia .preview-content blockquote {
+ border-left-color: #8b7355;
+ background: #e8dcc8;
+}
+
+body.theme-sepia .status-bar {
+ background: #e8dcc8;
+ border-top-color: #d4c4a8;
+ color: #5b4636;
+}
+
+/* ========================================
+ Paper Theme - Clean white paper
+ ======================================== */
+body.theme-paper {
+ background: #ffffff;
+ color: #1a1a1a;
+}
+
+body.theme-paper .tab-bar {
+ background: #f8f8f8;
+ border-bottom-color: #e0e0e0;
+}
+
+body.theme-paper .tab {
+ background: #f0f0f0;
+ border-color: #e0e0e0;
+ color: #333;
+}
+
+body.theme-paper .tab.active {
+ background: #ffffff;
+ border-bottom-color: #1a1a1a;
+}
+
+body.theme-paper .toolbar {
+ background: #f8f8f8;
+ border-bottom-color: #e0e0e0;
+}
+
+body.theme-paper .toolbar button {
+ color: #333;
+}
+
+body.theme-paper .toolbar button:hover {
+ background: #e8e8e8;
+}
+
+body.theme-paper .editor-textarea {
+ background: #ffffff;
+ color: #1a1a1a;
+}
+
+body.theme-paper .pane:last-child {
+ background: #ffffff;
+}
+
+body.theme-paper .preview-content {
+ color: #1a1a1a;
+}
+
+body.theme-paper .preview-content h1,
+body.theme-paper .preview-content h2 {
+ color: #000;
+ border-bottom-color: #e0e0e0;
+}
+
+body.theme-paper .preview-content code {
+ background: #f5f5f5;
+ color: #c41a16;
+}
+
+body.theme-paper .preview-content pre {
+ background: #f5f5f5;
+ border-color: #e0e0e0;
+}
+
+body.theme-paper .preview-content a {
+ color: #0366d6;
+}
+
+body.theme-paper .preview-content blockquote {
+ border-left-color: #ddd;
+ background: #f9f9f9;
+}
+
+body.theme-paper .status-bar {
+ background: #f8f8f8;
+ border-top-color: #e0e0e0;
+ color: #333;
+}
+
+/* ========================================
+ Rose Pine Dawn - Warm rose-tinted light
+ ======================================== */
+body.theme-rosepine-dawn {
+ background: #faf4ed;
+ color: #575279;
+}
+
+body.theme-rosepine-dawn .tab-bar {
+ background: #f2e9e1;
+ border-bottom-color: #dfdad9;
+}
+
+body.theme-rosepine-dawn .tab {
+ background: #f2e9e1;
+ border-color: #dfdad9;
+ color: #575279;
+}
+
+body.theme-rosepine-dawn .tab.active {
+ background: #faf4ed;
+ border-bottom-color: #907aa9;
+}
+
+body.theme-rosepine-dawn .toolbar {
+ background: #f2e9e1;
+ border-bottom-color: #dfdad9;
+}
+
+body.theme-rosepine-dawn .toolbar button {
+ color: #575279;
+}
+
+body.theme-rosepine-dawn .toolbar button:hover {
+ background: #dfdad9;
+}
+
+body.theme-rosepine-dawn .editor-textarea {
+ background: #faf4ed;
+ color: #575279;
+}
+
+body.theme-rosepine-dawn .pane:last-child {
+ background: #faf4ed;
+}
+
+body.theme-rosepine-dawn .preview-content {
+ color: #575279;
+}
+
+body.theme-rosepine-dawn .preview-content h1,
+body.theme-rosepine-dawn .preview-content h2 {
+ color: #286983;
+ border-bottom-color: #dfdad9;
+}
+
+body.theme-rosepine-dawn .preview-content code {
+ background: #f2e9e1;
+ color: #b4637a;
+}
+
+body.theme-rosepine-dawn .preview-content pre {
+ background: #f2e9e1;
+ border-color: #dfdad9;
+}
+
+body.theme-rosepine-dawn .preview-content a {
+ color: #56949f;
+}
+
+body.theme-rosepine-dawn .preview-content blockquote {
+ border-left-color: #907aa9;
+ background: #f2e9e1;
+ color: #797593;
+}
+
+body.theme-rosepine-dawn .status-bar {
+ background: #f2e9e1;
+ border-top-color: #dfdad9;
+ color: #575279;
+}
+
+/* Print Styles */
+@media print {
+ /* Hide UI elements for clean print output */
+ #toolbar,
+ #tab-bar,
+ #editor-container,
+ .editor-container,
+ #status-bar,
+ .status-bar,
+ .toolbar,
+ .tab-bar,
+ .editor-pane,
+ [id^="editor-pane-"],
+ .dialog,
+ .modal-overlay,
+ .export-dialog {
+ display: none !important;
+ }
+
+ /* Ensure body and html take full width */
+ html, body {
+ width: 100% !important;
+ height: auto !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ overflow: visible !important;
+ }
+
+ /* Show preview in full width */
+ #preview,
+ .preview,
+ .preview-content,
+ [id^="preview-"],
+ [id^="preview-pane-"],
+ .tab-content,
+ .pane {
+ display: block !important;
+ width: 100% !important;
+ max-width: 100% !important;
+ height: auto !important;
+ margin: 0 !important;
+ padding: 20px !important;
+ overflow: visible !important;
+ position: static !important;
+ left: auto !important;
+ right: auto !important;
+ top: auto !important;
+ bottom: auto !important;
+ }
+
+ /* Optimize preview content for printing */
+ .preview-content,
+ [id^="preview-"] {
+ line-height: 1.6;
+ font-size: 12pt;
+ color: #000 !important;
+ background: white !important;
+ }
+
+ /* No-styles mode for printing without theme colors */
+ body.printing-no-styles .preview-content,
+ body.printing-no-styles [id^="preview-"] {
+ color: #000 !important;
+ background: #fff !important;
+ }
+
+ /* Text formatting */
+ .preview-content h1,
+ .preview-content h2,
+ .preview-content h3,
+ .preview-content h4,
+ .preview-content h5,
+ .preview-content h6 {
+ page-break-after: avoid;
+ margin-top: 1em;
+ margin-bottom: 0.5em;
+ }
+
+ .preview-content p {
+ margin-bottom: 0.5em;
+ page-break-inside: avoid;
+ }
+
+ /* Code blocks */
+ .preview-content pre {
+ background: #f5f5f5 !important;
+ border: 1px solid #ddd !important;
+ page-break-inside: avoid;
+ padding: 10px;
+ font-size: 10pt;
+ }
+
+ .preview-content code {
+ background: #f5f5f5 !important;
+ color: #000 !important;
+ font-size: 10pt;
+ }
+
+ /* Lists */
+ .preview-content ul,
+ .preview-content ol {
+ margin-left: 20px;
+ page-break-inside: avoid;
+ }
+
+ .preview-content li {
+ page-break-inside: avoid;
+ margin-bottom: 0.3em;
+ }
+
+ /* Tables */
+ .preview-content table {
+ width: 100%;
+ border-collapse: collapse;
+ page-break-inside: avoid;
+ margin-bottom: 1em;
+ }
+
+ .preview-content th,
+ .preview-content td {
+ border: 1px solid #999 !important;
+ padding: 8px !important;
+ text-align: left;
+ }
+
+ .preview-content th {
+ background: #f0f0f0 !important;
+ font-weight: bold;
+ }
+
+ /* Links - remove underline for print */
+ .preview-content a {
+ color: #000 !important;
+ text-decoration: none;
+ }
+
+ /* Blockquotes */
+ .preview-content blockquote {
+ border-left: 3px solid #ccc;
+ padding-left: 15px;
+ margin-left: 0;
+ color: #333 !important;
+ }
+
+ /* Images */
+ .preview-content img {
+ max-width: 100%;
+ height: auto;
+ page-break-inside: avoid;
+ }
+
+ /* Horizontal rules */
+ .preview-content hr {
+ border: none;
+ border-top: 1px solid #999;
+ margin: 1em 0;
+ }
+}
+
+/* Print mode classes */
+.print-mode {
+ display: block !important;
+ width: 100% !important;
+ max-width: 100% !important;
+ position: fixed !important;
+ top: 0 !important;
+ left: 0 !important;
+ z-index: 9999 !important;
+ background: white !important;
+ padding: 20px !important;
+}
+
+/* Ensure preview panes are visible in print mode */
+#preview-pane-1, #preview-pane-2, #preview-pane-3, #preview-pane-4, #preview-pane-5 {
+ display: block !important;
+}
+
+/* No-styles printing mode */
+body.printing-no-styles .preview-content,
+body.printing-no-styles [id^="preview-"],
+.print-no-styles .preview-content {
+ color: #000 !important;
+ background: white !important;
+}
+
+body.printing-no-styles .preview-content h1,
+body.printing-no-styles .preview-content h2,
+body.printing-no-styles .preview-content h3,
+body.printing-no-styles .preview-content h4,
+body.printing-no-styles .preview-content h5,
+body.printing-no-styles .preview-content h6,
+.print-no-styles .preview-content h1,
+.print-no-styles .preview-content h2,
+.print-no-styles .preview-content h3,
+.print-no-styles .preview-content h4,
+.print-no-styles .preview-content h5,
+.print-no-styles .preview-content h6 {
+ color: #000 !important;
+ border-color: #999 !important;
+}
+
+body.printing-no-styles .preview-content code,
+.print-no-styles .preview-content code {
+ background: #f5f5f5 !important;
+ color: #000 !important;
+}
+
+body.printing-no-styles .preview-content pre,
+.print-no-styles .preview-content pre {
+ background: #f5f5f5 !important;
+ color: #000 !important;
+ border-color: #999 !important;
+}
+
+.print-no-styles .preview-content a {
+ color: #000 !important;
+}
+
+.print-no-styles .preview-content blockquote {
+ color: #333 !important;
+ border-color: #999 !important;
+}
+
+/* ================================
+ Header & Footer Dialog Styles
+ ================================ */
+
+.hf-enable-section {
+ margin-bottom: 20px;
+ padding: 15px;
+ background: var(--bg-secondary, #f5f5f5);
+ border-radius: 5px;
+}
+
+.hf-enable-section label {
+ display: flex;
+ align-items: center;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+.hf-enable-section input[type="checkbox"] {
+ margin-right: 10px;
+ width: 18px;
+ height: 18px;
+ cursor: pointer;
+}
+
+#hf-config-content {
+ transition: opacity 0.3s ease;
+}
+
+#hf-config-content.disabled {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+.hf-section {
+ margin-bottom: 25px;
+ padding: 20px;
+ background: var(--bg-tertiary, #fafafa);
+ border-radius: 8px;
+ border: 1px solid var(--border-color, #e0e0e0);
+}
+
+.hf-section h4 {
+ margin: 0 0 15px 0;
+ color: var(--text-primary, #333);
+ font-size: 16px;
+ border-bottom: 2px solid var(--accent-color, #007bff);
+ padding-bottom: 8px;
+}
+
+.hf-row {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 15px;
+ margin-bottom: 15px;
+}
+
+.hf-column {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+}
+
+.hf-column label {
+ font-weight: 600;
+ margin-bottom: 5px;
+ color: var(--text-secondary, #666);
+ font-size: 13px;
+}
+
+.hf-column input[type="text"] {
+ padding: 8px 35px 8px 10px;
+ border: 1px solid var(--border-color, #ccc);
+ border-radius: 4px;
+ font-size: 14px;
+ background: var(--input-bg, white);
+ color: var(--text-primary, #333);
+ transition: border-color 0.2s ease;
+}
+
+.hf-column input[type="text"]:focus {
+ outline: none;
+ border-color: var(--accent-color, #007bff);
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+}
+
+.field-insert-btn {
+ position: absolute;
+ right: 5px;
+ bottom: 5px;
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ background: var(--accent-color, #007bff);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 18px;
+ line-height: 1;
+ transition: all 0.2s ease;
+}
+
+.field-insert-btn:hover {
+ background: var(--accent-hover, #0056b3);
+ transform: scale(1.05);
+}
+
+.field-insert-btn:active {
+ transform: scale(0.95);
+}
+
+.hf-logo-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 15px;
+ background: var(--bg-secondary, #f5f5f5);
+ border-radius: 6px;
+ margin-top: 10px;
+}
+
+.hf-logo-row label {
+ font-weight: 600;
+ color: var(--text-secondary, #666);
+ min-width: 120px;
+}
+
+.hf-logo-row input[type="file"] {
+ flex: 1;
+ padding: 6px 10px;
+ border: 1px solid var(--border-color, #ccc);
+ border-radius: 4px;
+ background: var(--input-bg, white);
+ color: var(--text-primary, #333);
+ font-size: 13px;
+ cursor: pointer;
+}
+
+.hf-logo-row input[type="file"]::-webkit-file-upload-button {
+ padding: 5px 12px;
+ background: var(--button-bg, #6c757d);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-right: 10px;
+}
+
+.hf-logo-row input[type="file"]::-webkit-file-upload-button:hover {
+ background: var(--button-hover, #5a6268);
+}
+
+.browse-btn {
+ padding: 6px 12px;
+ background: var(--accent-color, #007bff);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 13px;
+ transition: background 0.2s ease;
+ margin-right: 8px;
+}
+
+.browse-btn:hover {
+ background: var(--accent-hover, #0056b3);
+}
+
+.clear-btn {
+ padding: 6px 12px;
+ background: var(--danger-color, #dc3545);
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 13px;
+ transition: background 0.2s ease;
+}
+
+.clear-btn:hover {
+ background: var(--danger-hover, #c82333);
+}
+
+.logo-preview {
+ font-size: 12px;
+ color: var(--text-secondary, #666);
+ max-width: 150px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.hf-help {
+ margin-top: 20px;
+ padding: 15px;
+ background: var(--info-bg, #e7f3ff);
+ border-left: 4px solid var(--info-color, #007bff);
+ border-radius: 4px;
+}
+
+.hf-help p {
+ margin: 0 0 10px 0;
+ font-weight: 600;
+ color: var(--text-primary, #333);
+}
+
+.hf-help ul {
+ margin: 0;
+ padding-left: 20px;
+ list-style-type: none;
+}
+
+.hf-help li {
+ margin-bottom: 6px;
+ color: var(--text-secondary, #555);
+ font-size: 13px;
+}
+
+.hf-help code {
+ background: rgba(0, 123, 255, 0.1);
+ padding: 2px 6px;
+ border-radius: 3px;
+ font-family: 'Courier New', monospace;
+ color: var(--accent-color, #007bff);
+ font-weight: 600;
+}
+
+/* Field Picker Dialog */
+.field-picker-list {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 8px;
+}
+
+.field-option {
+ padding: 12px 16px;
+ background: var(--bg-secondary, #f5f5f5);
+ border: 1px solid var(--border-color, #ddd);
+ border-radius: 6px;
+ text-align: left;
+ cursor: pointer;
+ font-size: 14px;
+ color: var(--text-primary, #333);
+ transition: all 0.2s ease;
+}
+
+.field-option:hover {
+ background: var(--accent-color, #007bff);
+ color: white;
+ border-color: var(--accent-color, #007bff);
+ transform: translateX(5px);
+}
+
+/* Dark Theme Support for Header/Footer Dialog */
+body[data-theme="dark"] .hf-enable-section,
+body[data-theme="dark"] .hf-logo-row {
+ background: #2d2d2d;
+}
+
+body[data-theme="dark"] .hf-section {
+ background: #252525;
+ border-color: #404040;
+}
+
+body[data-theme="dark"] .hf-column input[type="text"],
+body[data-theme="dark"] .hf-logo-row input[type="file"] {
+ background: #2d2d2d;
+ color: #e0e0e0;
+ border-color: #404040;
+}
+
+body[data-theme="dark"] .hf-help {
+ background: rgba(0, 123, 255, 0.15);
+ border-left-color: #0d6efd;
+}
+
+body[data-theme="dark"] .field-option {
+ background: #2d2d2d;
+ border-color: #404040;
+ color: #e0e0e0;
+}
+
+body[data-theme="dark"] .field-option:hover {
+ background: #0d6efd;
+ color: white;
+}
+/* Mermaid Diagram Styles */
+.mermaid {
+ background: #f9f9f9;
+ padding: 20px;
+ border-radius: 8px;
+ margin: 20px 0;
+ text-align: center;
+ border: 1px solid #e0e0e0;
+}
+
+.mermaid svg {
+ max-width: 100%;
+ height: auto;
+}
+
+body.theme-dark .mermaid {
+ background: #2d2d2d;
+ border-color: #444;
+}
+
+body.theme-solarized .mermaid {
+ background: #fdf6e3;
+ border-color: #eee8d5;
+}
+
+body.theme-monokai .mermaid {
+ background: #2f2f2f;
+ border-color: #49483e;
+}
+
+body.theme-github .mermaid {
+ background: #f6f8fa;
+ border-color: #e1e4e8;
+}
+
+/* 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;
+}
diff --git a/src/table-generator.html b/src/table-generator.html
index 4ee64e6..e94a7d3 100644
--- a/src/table-generator.html
+++ b/src/table-generator.html
@@ -1,545 +1,545 @@
-
-
-
-
-
-
-
-
- Table Generator
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
- Table Settings
-
-
-
- Rows
-
-
-
- Columns
-
-
-
- Alignment
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Edit Table Content
-
-
-
-
-
-
-
- Markdown Preview
-
-
-
-
+
+
+ Table Generator
+
+
+
+
+
+
+
+
diff --git a/src/wordTemplateExporter.js b/src/wordTemplateExporter.js
index 534d6e2..827c2f6 100644
--- a/src/wordTemplateExporter.js
+++ b/src/wordTemplateExporter.js
@@ -1,743 +1,743 @@
-/**
- * Word Template Exporter
- * Loads word_template.docx, preserves first 2 pages (cover + TOC),
- * and adds markdown content starting from page 3 using template styles
- */
-
-const fs = require('fs');
-const path = require('path');
-const PizZip = require('pizzip');
-const Docx = require('docx4js').default;
-
-class WordTemplateExporter {
- constructor(templatePath, startPage = 3, pageSettings = null) {
- this.templatePath = templatePath || path.join(__dirname, '../word_template.docx');
- this.startPage = startPage; // Which page to start inserting content
- this.pageSettings = pageSettings; // Page size and orientation settings
- }
-
- /**
- * Convert markdown to Word document using template
- */
- async convert(markdownContent, outputPath) {
- try {
- // Load template
- const templateBuffer = fs.readFileSync(this.templatePath);
- const zip = new PizZip(templateBuffer);
-
- // Extract document.xml
- let documentXml = zip.file('word/document.xml').asText();
-
- // Set page size if settings provided
- if (this.pageSettings) {
- documentXml = this.setPageSize(documentXml);
- }
-
- // Parse markdown and generate Word XML
- const newContentXml = this.markdownToWordXml(markdownContent);
-
- // Insert new content after the specified start page
- const modifiedXml = this.insertContentAfterPage(documentXml, newContentXml, this.startPage);
-
- // Update the zip with modified XML
- zip.file('word/document.xml', modifiedXml);
-
- // Generate and save the new document
- const newDocBuffer = zip.generate({ type: 'nodebuffer' });
- fs.writeFileSync(outputPath, newDocBuffer);
-
- return outputPath;
- } catch (error) {
- console.error('Error in Word export:', error);
- throw error;
- }
- }
-
- /**
- * Set page size in document XML
- */
- setPageSize(documentXml) {
- // Import PAGE_SIZES from main process (need to pass as parameter)
- const PAGE_SIZES = {
- a4: { width: 11906, height: 16838 },
- a3: { width: 16838, height: 23811 },
- a5: { width: 8391, height: 11906 },
- b4: { width: 14170, height: 20015 },
- b5: { width: 9979, height: 14170 },
- letter: { width: 12240, height: 15840 },
- legal: { width: 12240, height: 20160 },
- tabloid: { width: 15840, height: 24480 }
- };
-
- let width, height;
- const pageSize = PAGE_SIZES[this.pageSettings.size];
-
- if (pageSize) {
- width = pageSize.width;
- height = pageSize.height;
- } else {
- // Default to A4
- width = 11906;
- height = 16838;
- }
-
- // Swap dimensions for landscape
- if (this.pageSettings.orientation === 'landscape') {
- [width, height] = [height, width];
- }
-
- // Update all
+
+
+ Table Settings
+
+
+
+ Rows
+
+
+
+ Columns
+
+
+
+ Alignment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Edit Table Content
+
+
+
+
+
+
+
+ Markdown Preview
+
+
+
+ ${text}
`), - setOptions: jest.fn() -}; - -// Mock DOMPurify -global.window.DOMPurify = { - sanitize: jest.fn((html) => html) -}; - -// Mock highlight.js -global.window.hljs = { - highlight: jest.fn((code, options) => ({ value: code })), - highlightAuto: jest.fn((code) => ({ value: code })), - getLanguage: jest.fn(() => true) -}; - -// Mock localStorage -const localStorageMock = { - getItem: jest.fn(), - setItem: jest.fn(), - removeItem: jest.fn(), - clear: jest.fn() -}; -global.localStorage = localStorageMock; - -// Console spy to catch unintended console logs in tests -const originalConsoleError = console.error; -console.error = (...args) => { - // Allow certain expected errors - const message = args[0]?.toString() || ''; - if (message.includes('Warning:') || message.includes('React')) { - return; - } - originalConsoleError.apply(console, args); -}; - -// Cleanup after each test -afterEach(() => { - jest.clearAllMocks(); -}); +/** + * Jest Test Setup + * Provides mocks and utilities for PanConverter tests + */ + +// Mock window.electronAPI for renderer tests +global.window = global.window || {}; +global.window.electronAPI = { + send: jest.fn(), + on: jest.fn(() => jest.fn()), // Returns cleanup function + once: jest.fn(), + invoke: jest.fn(() => Promise.resolve(null)), + removeAllListeners: jest.fn(), + file: { + save: jest.fn(), + saveCurrent: jest.fn(), + setCurrent: jest.fn(), + saveRecent: jest.fn(), + clearRecent: jest.fn(), + rendererReady: jest.fn() + }, + theme: { + get: jest.fn() + }, + print: { + doPrint: jest.fn() + }, + export: { + withOptions: jest.fn(), + spreadsheet: jest.fn() + }, + batch: { + convert: jest.fn(), + selectFolder: jest.fn() + }, + converter: { + convert: jest.fn(), + convertBatch: jest.fn() + }, + headerFooter: { + getSettings: jest.fn(), + saveSettings: jest.fn(), + browseLogo: jest.fn(), + saveLogo: jest.fn(), + clearLogo: jest.fn() + }, + page: { + getSettings: jest.fn(), + updateSettings: jest.fn(), + setCustomStartPage: jest.fn() + }, + pdf: { + processOperation: jest.fn(), + getPageCount: jest.fn(), + selectFolder: jest.fn() + } +}; + +// Mock marked library +global.window.marked = { + parse: jest.fn((text) => `${text}
`), + setOptions: jest.fn() +}; + +// Mock DOMPurify +global.window.DOMPurify = { + sanitize: jest.fn((html) => html) +}; + +// Mock highlight.js +global.window.hljs = { + highlight: jest.fn((code, options) => ({ value: code })), + highlightAuto: jest.fn((code) => ({ value: code })), + getLanguage: jest.fn(() => true) +}; + +// Mock localStorage +const localStorageMock = { + getItem: jest.fn(), + setItem: jest.fn(), + removeItem: jest.fn(), + clear: jest.fn() +}; +global.localStorage = localStorageMock; + +// Console spy to catch unintended console logs in tests +const originalConsoleError = console.error; +console.error = (...args) => { + // Allow certain expected errors + const message = args[0]?.toString() || ''; + if (message.includes('Warning:') || message.includes('React')) { + return; + } + originalConsoleError.apply(console, args); +}; + +// Cleanup after each test +afterEach(() => { + jest.clearAllMocks(); +}); diff --git a/tests/utils.test.js b/tests/utils.test.js index 1bdc7df..c0c53a7 100644 --- a/tests/utils.test.js +++ b/tests/utils.test.js @@ -1,137 +1,137 @@ -/** - * Tests for Utility Functions - * Tests helper functions that can be extracted and tested - */ - -describe('Utility Functions', () => { - describe('parseCommand', () => { - // This function parses command strings into command and args - function parseCommand(cmdString) { - const parts = []; - let current = ''; - let inQuotes = false; - let quoteChar = ''; - - for (let i = 0; i < cmdString.length; i++) { - const char = cmdString[i]; - if ((char === '"' || char === "'") && !inQuotes) { - inQuotes = true; - quoteChar = char; - } else if (char === quoteChar && inQuotes) { - inQuotes = false; - quoteChar = ''; - } else if (char === ' ' && !inQuotes) { - if (current) { - parts.push(current); - current = ''; - } - } else { - current += char; - } - } - if (current) { - parts.push(current); - } - - return { - command: parts[0], - args: parts.slice(1) - }; - } - - test('should parse simple command', () => { - const result = parseCommand('pandoc input.md -o output.pdf'); - expect(result.command).toBe('pandoc'); - expect(result.args).toEqual(['input.md', '-o', 'output.pdf']); - }); - - test('should handle double-quoted paths', () => { - const result = parseCommand('pandoc "C:/path with spaces/file.md" -o output.pdf'); - expect(result.command).toBe('pandoc'); - expect(result.args).toEqual(['C:/path with spaces/file.md', '-o', 'output.pdf']); - }); - - test('should handle single-quoted paths', () => { - const result = parseCommand("pandoc 'file name.md' -o output.pdf"); - expect(result.command).toBe('pandoc'); - expect(result.args).toEqual(['file name.md', '-o', 'output.pdf']); - }); - - test('should handle multiple options', () => { - const result = parseCommand('pandoc input.md --pdf-engine=xelatex -V geometry:margin=1in -o output.pdf'); - expect(result.command).toBe('pandoc'); - expect(result.args).toContain('--pdf-engine=xelatex'); - expect(result.args).toContain('-V'); - }); - - test('should handle empty command', () => { - const result = parseCommand(''); - expect(result.command).toBeUndefined(); - expect(result.args).toEqual([]); - }); - }); - - describe('hexToRgb', () => { - // This function converts hex colors to RGB - function hexToRgb(hex) { - const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); - return result ? { - r: parseInt(result[1], 16) / 255, - g: parseInt(result[2], 16) / 255, - b: parseInt(result[3], 16) / 255 - } : null; - } - - test('should convert black hex to RGB', () => { - const result = hexToRgb('#000000'); - expect(result).toEqual({ r: 0, g: 0, b: 0 }); - }); - - test('should convert white hex to RGB', () => { - const result = hexToRgb('#ffffff'); - expect(result).toEqual({ r: 1, g: 1, b: 1 }); - }); - - test('should convert red hex to RGB', () => { - const result = hexToRgb('#ff0000'); - expect(result.r).toBeCloseTo(1); - expect(result.g).toBeCloseTo(0); - expect(result.b).toBeCloseTo(0); - }); - - test('should handle hex without hash', () => { - const result = hexToRgb('00ff00'); - expect(result.r).toBeCloseTo(0); - expect(result.g).toBeCloseTo(1); - expect(result.b).toBeCloseTo(0); - }); - - test('should return null for invalid hex', () => { - expect(hexToRgb('invalid')).toBeNull(); - expect(hexToRgb('#xyz')).toBeNull(); - }); - }); - - describe('File Path Utilities', () => { - test('should extract file extension', () => { - const getExtension = (filepath) => { - const match = filepath.match(/\.([^/.]+)$/); - return match ? match[1].toLowerCase() : ''; - }; - - expect(getExtension('file.md')).toBe('md'); - expect(getExtension('document.PDF')).toBe('pdf'); - expect(getExtension('path/to/file.docx')).toBe('docx'); - expect(getExtension('noextension')).toBe(''); - }); - - test('should replace file extension', () => { - const replaceExtension = (filepath, newExt) => { - return filepath.replace(/\.[^/.]+$/, `.${newExt}`); - }; - - expect(replaceExtension('file.md', 'pdf')).toBe('file.pdf'); - expect(replaceExtension('path/to/doc.docx', 'html')).toBe('path/to/doc.html'); - }); - }); -}); +/** + * Tests for Utility Functions + * Tests helper functions that can be extracted and tested + */ + +describe('Utility Functions', () => { + describe('parseCommand', () => { + // This function parses command strings into command and args + function parseCommand(cmdString) { + const parts = []; + let current = ''; + let inQuotes = false; + let quoteChar = ''; + + for (let i = 0; i < cmdString.length; i++) { + const char = cmdString[i]; + if ((char === '"' || char === "'") && !inQuotes) { + inQuotes = true; + quoteChar = char; + } else if (char === quoteChar && inQuotes) { + inQuotes = false; + quoteChar = ''; + } else if (char === ' ' && !inQuotes) { + if (current) { + parts.push(current); + current = ''; + } + } else { + current += char; + } + } + if (current) { + parts.push(current); + } + + return { + command: parts[0], + args: parts.slice(1) + }; + } + + test('should parse simple command', () => { + const result = parseCommand('pandoc input.md -o output.pdf'); + expect(result.command).toBe('pandoc'); + expect(result.args).toEqual(['input.md', '-o', 'output.pdf']); + }); + + test('should handle double-quoted paths', () => { + const result = parseCommand('pandoc "C:/path with spaces/file.md" -o output.pdf'); + expect(result.command).toBe('pandoc'); + expect(result.args).toEqual(['C:/path with spaces/file.md', '-o', 'output.pdf']); + }); + + test('should handle single-quoted paths', () => { + const result = parseCommand("pandoc 'file name.md' -o output.pdf"); + expect(result.command).toBe('pandoc'); + expect(result.args).toEqual(['file name.md', '-o', 'output.pdf']); + }); + + test('should handle multiple options', () => { + const result = parseCommand('pandoc input.md --pdf-engine=xelatex -V geometry:margin=1in -o output.pdf'); + expect(result.command).toBe('pandoc'); + expect(result.args).toContain('--pdf-engine=xelatex'); + expect(result.args).toContain('-V'); + }); + + test('should handle empty command', () => { + const result = parseCommand(''); + expect(result.command).toBeUndefined(); + expect(result.args).toEqual([]); + }); + }); + + describe('hexToRgb', () => { + // This function converts hex colors to RGB + function hexToRgb(hex) { + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16) / 255, + g: parseInt(result[2], 16) / 255, + b: parseInt(result[3], 16) / 255 + } : null; + } + + test('should convert black hex to RGB', () => { + const result = hexToRgb('#000000'); + expect(result).toEqual({ r: 0, g: 0, b: 0 }); + }); + + test('should convert white hex to RGB', () => { + const result = hexToRgb('#ffffff'); + expect(result).toEqual({ r: 1, g: 1, b: 1 }); + }); + + test('should convert red hex to RGB', () => { + const result = hexToRgb('#ff0000'); + expect(result.r).toBeCloseTo(1); + expect(result.g).toBeCloseTo(0); + expect(result.b).toBeCloseTo(0); + }); + + test('should handle hex without hash', () => { + const result = hexToRgb('00ff00'); + expect(result.r).toBeCloseTo(0); + expect(result.g).toBeCloseTo(1); + expect(result.b).toBeCloseTo(0); + }); + + test('should return null for invalid hex', () => { + expect(hexToRgb('invalid')).toBeNull(); + expect(hexToRgb('#xyz')).toBeNull(); + }); + }); + + describe('File Path Utilities', () => { + test('should extract file extension', () => { + const getExtension = (filepath) => { + const match = filepath.match(/\.([^/.]+)$/); + return match ? match[1].toLowerCase() : ''; + }; + + expect(getExtension('file.md')).toBe('md'); + expect(getExtension('document.PDF')).toBe('pdf'); + expect(getExtension('path/to/file.docx')).toBe('docx'); + expect(getExtension('noextension')).toBe(''); + }); + + test('should replace file extension', () => { + const replaceExtension = (filepath, newExt) => { + return filepath.replace(/\.[^/.]+$/, `.${newExt}`); + }; + + expect(replaceExtension('file.md', 'pdf')).toBe('file.pdf'); + expect(replaceExtension('path/to/doc.docx', 'html')).toBe('path/to/doc.html'); + }); + }); +});