diff --git a/src/main.js b/src/main.js
index db8e8b2..e95ea56 100644
--- a/src/main.js
+++ b/src/main.js
@@ -52,6 +52,23 @@ 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
+ }
+};
+
// 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
@@ -262,6 +279,14 @@ function createMenu() {
label: 'Template Settings...',
click: showTemplateSettings
},
+ {
+ label: 'Header & Footer Settings...',
+ click: () => {
+ if (mainWindow) {
+ mainWindow.webContents.send('open-header-footer-dialog');
+ }
+ }
+ },
{ type: 'separator' },
{
label: 'Quit',
@@ -481,7 +506,7 @@ function createMenu() {
type: 'info',
title: 'About PanConverter',
message: 'PanConverter',
- detail: 'A cross-platform Markdown editor and converter using Pandoc.\n\nVersion: 1.8.3\nAuthor: Amit Haridas\nEmail: amit.wh@gmail.com\nLicense: MIT\n\nFeatures:\n• Modern glassmorphism UI with gradient backgrounds\n• Enhanced PDF export via Word template with configurable start page\n• Configurable template settings (start page selection)\n• Streamlined PDF Editor UI (merge, split, compress, rotate, watermark, encrypt)\n• Universal File Converter (LibreOffice, ImageMagick, FFmpeg, Pandoc)\n• Windows Explorer context menu integration\n• Tabbed interface for multiple files\n• Advanced markdown editing with live preview\n• Real-time preview updates while typing\n• Full toolbar markdown editing functions\n• Enhanced PDF export with built-in Electron fallback\n• Enhanced Word export with template support (single file & batch)\n• File association support for .md files\n• Command-line interface for batch conversion\n• Advanced export options with templates and metadata\n• Batch file conversion with progress tracking\n• Improved preview typography and spacing\n• Adjustable font sizes via menu (Ctrl+Shift+Plus/Minus)\n• Complete theme support including Monokai fixes\n• Find & replace with match highlighting\n• Line numbers and auto-indentation\n• Export to multiple formats via Pandoc\n• PowerPoint & presentation export\n• Export tables to Excel/ODS spreadsheets\n• Document import & conversion\n• Table creation helper\n• 22 beautiful themes (including Dracula, Nord, Tokyo Night, Gruvbox, Ayu, Concrete, and more)\n• Undo/redo functionality\n• Live word count and statistics',
+ detail: 'A cross-platform Markdown editor and converter using Pandoc.\n\nVersion: 1.9.0\nAuthor: Amit Haridas\nEmail: amit.wh@gmail.com\nLicense: MIT\n\nFeatures:\n• Custom Headers & Footers for PDF, DOCX, ODT, and PowerPoint exports\n• Dynamic field support: $PAGE$, $TOTAL$, $DATE$, $TIME$, $TITLE$, $AUTHOR$, $FILENAME$\n• Logo/image embedding in headers and footers\n• Modern glassmorphism UI with gradient backgrounds\n• Enhanced PDF export via Word template with configurable start page\n• Configurable template settings (start page selection)\n• Streamlined PDF Editor UI (merge, split, compress, rotate, watermark, encrypt)\n• Universal File Converter (LibreOffice, ImageMagick, FFmpeg, Pandoc)\n• Windows Explorer context menu integration\n• Tabbed interface for multiple files\n• Advanced markdown editing with live preview\n• Real-time preview updates while typing\n• Full toolbar markdown editing functions\n• Enhanced PDF export with built-in Electron fallback\n• Enhanced Word export with template support (single file & batch)\n• File association support for .md files\n• Command-line interface for batch conversion\n• Advanced export options with templates and metadata\n• Batch file conversion with progress tracking\n• Improved preview typography and spacing\n• Adjustable font sizes via menu (Ctrl+Shift+Plus/Minus)\n• Complete theme support including Monokai fixes\n• Find & replace with match highlighting\n• Line numbers and auto-indentation\n• Export to multiple formats via Pandoc\n• PowerPoint & presentation export\n• Export tables to Excel/ODS spreadsheets\n• Document import & conversion\n• Table creation helper\n• 22 beautiful themes (including Dracula, Nord, Tokyo Night, Gruvbox, Ayu, Concrete, and more)\n• Undo/redo functionality\n• Live word count and statistics',
buttons: ['OK']
});
}
@@ -618,6 +643,215 @@ ipcMain.on('set-custom-start-page', (event, pageNumber) => {
}
});
+// 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']
+ });
+});
+
+// Save header/footer logo image
+ipcMain.on('save-header-footer-logo', async (event, { position, filePath }) => {
+ try {
+ // 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) {
+ 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
+async function addHeaderFooterToDocx(docxPath, metadata = {}) {
+ if (!headerFooterSettings.enabled) return;
+
+ try {
+ const PizZip = require('pizzip');
+
+ // Read the DOCX file
+ const docxBuffer = fs.readFileSync(docxPath);
+ const zip = new PizZip(docxBuffer);
+
+ // Process dynamic fields
+ const headerLeft = processDynamicFields(headerFooterSettings.header.left, metadata);
+ const headerCenter = processDynamicFields(headerFooterSettings.header.center, metadata);
+ const headerRight = processDynamicFields(headerFooterSettings.header.right, metadata);
+ const footerLeft = processDynamicFields(headerFooterSettings.footer.left, metadata);
+ const footerCenter = processDynamicFields(headerFooterSettings.footer.center, metadata);
+ const footerRight = processDynamicFields(headerFooterSettings.footer.right, metadata);
+
+ // Create header XML
+ if (headerLeft || headerCenter || headerRight) {
+ const headerXml = `
+
+
+
+ ${headerLeft || ''}
+
+
+
+ ${headerCenter || ''}
+
+
+
+ ${headerRight || ''}
+
+`;
+ zip.file('word/header1.xml', headerXml);
+ }
+
+ // Create footer XML with page numbers
+ if (footerLeft || footerCenter || footerRight) {
+ let footerCenterXml = '';
+ if (footerCenter) {
+ // Handle $PAGE$ and $TOTAL$ in footer
+ if (footerCenter.includes('$PAGE$') || footerCenter.includes('$TOTAL$')) {
+ const parts = footerCenter.split(/(\$PAGE\$|\$TOTAL\$)/);
+ footerCenterXml = parts.map(part => {
+ if (part === '$PAGE$') {
+ return '';
+ } else if (part === '$TOTAL$') {
+ return '';
+ } else {
+ return `${part}`;
+ }
+ }).join('');
+ } else {
+ footerCenterXml = `${footerCenter}`;
+ }
+ }
+
+ const footerXml = `
+
+
+
+ ${footerLeft || ''}
+
+
+
+ ${footerCenterXml}
+
+
+
+ ${footerRight || ''}
+
+`;
+ zip.file('word/footer1.xml', footerXml);
+ }
+
+ // Update document.xml.rels to reference header/footer
+ let relsXml = zip.file('word/_rels/document.xml.rels').asText();
+
+ // Add header relationship if not exists
+ if ((headerLeft || headerCenter || headerRight) && !relsXml.includes('header1.xml')) {
+ const headerId = 'rId100';
+ const headerRel = ``;
+ relsXml = relsXml.replace('', headerRel + '');
+ }
+
+ // Add footer relationship if not exists
+ if ((footerLeft || footerCenter || footerRight) && !relsXml.includes('footer1.xml')) {
+ const footerId = 'rId101';
+ const footerRel = ``;
+ relsXml = relsXml.replace('', footerRel + '');
+ }
+
+ zip.file('word/_rels/document.xml.rels', relsXml);
+
+ // Update document.xml to use header/footer in sections
+ let documentXml = zip.file('word/document.xml').asText();
+ if ((headerLeft || headerCenter || headerRight || footerLeft || footerCenter || footerRight)) {
+ // Find all section properties and add header/footer references
+ const sectPrRegex = /]*>[\s\S]*?<\/w:sectPr>/g;
+ documentXml = documentXml.replace(sectPrRegex, (match) => {
+ let updated = match;
+ if ((headerLeft || headerCenter || headerRight) && !match.includes('headerReference')) {
+ updated = updated.replace('', '');
+ }
+ if ((footerLeft || footerCenter || footerRight) && !match.includes('footerReference')) {
+ updated = updated.replace('', '');
+ }
+ return updated;
+ });
+ }
+
+ zip.file('word/document.xml', documentXml);
+
+ // Write modified DOCX
+ const newDocxBuffer = zip.generate({ type: 'nodebuffer' });
+ fs.writeFileSync(docxPath, newDocxBuffer);
+
+ } catch (error) {
+ console.error('Failed to add headers/footers to DOCX:', error);
+ // Don't fail the export, just log the error
+ }
+}
+
// Enhanced Word Export with Template Support
async function exportWordWithTemplate() {
if (!currentFile) {
@@ -1033,16 +1267,16 @@ function showExportSuccess(outputFile) {
// Helper function to export with pandoc (general)
function exportWithPandoc(pandocCmd, outputFile, format) {
console.log(`Executing Pandoc command: ${pandocCmd}`);
-
- exec(pandocCmd, (error, stdout, stderr) => {
+
+ exec(pandocCmd, async (error, stdout, stderr) => {
if (error) {
console.error(`Pandoc error for ${format}:`, error);
console.error(`Pandoc stderr:`, stderr);
console.error(`Pandoc stdout:`, stdout);
-
+
// Provide more specific error messages
let errorMessage = `Failed to export to ${format.toUpperCase()}`;
-
+
if (error.message.includes('not found') || error.message.includes('not recognized')) {
errorMessage += '\n\nPandoc is not installed or not found in PATH.';
errorMessage += '\nPlease install Pandoc from: https://pandoc.org/installing.html';
@@ -1051,9 +1285,9 @@ function exportWithPandoc(pandocCmd, outputFile, format) {
} else {
errorMessage += `\n\nError details: ${error.message}`;
}
-
+
errorMessage += `\n\nCommand used: ${pandocCmd}`;
-
+
dialog.showErrorBox('Export Error', errorMessage);
} else {
console.log(`Successfully exported to ${format}:`, outputFile);
@@ -1061,6 +1295,30 @@ function exportWithPandoc(pandocCmd, outputFile, format) {
if (stderr) {
console.warn(`Pandoc stderr (non-fatal):`, stderr);
}
+
+ // Add headers/footers to DOCX if enabled
+ if (format === 'docx' && headerFooterSettings.enabled) {
+ try {
+ const filename = currentFile ? path.basename(currentFile, path.extname(currentFile)) : 'document';
+ const metadata = {
+ filename: filename,
+ title: filename,
+ author: ''
+ };
+ await addHeaderFooterToDocx(outputFile, metadata);
+ console.log('Headers/footers added to DOCX');
+ } catch (hfError) {
+ console.error('Error adding headers/footers to DOCX:', hfError);
+ // Continue with success message even if header/footer fails
+ }
+ }
+
+ // Add headers/footers to ODT if enabled
+ if (format === 'odt' && headerFooterSettings.enabled) {
+ // ODT format is similar to DOCX in structure, we could implement this
+ console.log('ODT header/footer support not yet implemented');
+ }
+
showExportSuccess(outputFile);
}
});
@@ -1734,16 +1992,71 @@ function performBatchConversion(inputFolder, outputFolder, format, options) {
if (options.bibliography) pandocCmd += ` --bibliography="${options.bibliography}"`;
if (options.csl) pandocCmd += ` --csl="${options.csl}"`;
- // Add PDF-specific options
+ // Add PDF-specific options with header/footer support
if (format === 'pdf') {
const pdfEngine = options.pdfEngine || 'xelatex';
pandocCmd += ` --pdf-engine="${pdfEngine}"`;
if (options.geometry) pandocCmd += ` -V geometry:"${options.geometry}"`;
+
+ // Add header/footer if enabled
+ if (headerFooterSettings.enabled) {
+ const filename = path.basename(inputFile, path.extname(inputFile));
+ const metadata = { filename, title: filename, author: '' };
+
+ const headerLeft = processDynamicFields(headerFooterSettings.header.left, metadata);
+ const headerCenter = processDynamicFields(headerFooterSettings.header.center, metadata);
+ const headerRight = processDynamicFields(headerFooterSettings.header.right, metadata);
+ const footerLeft = processDynamicFields(headerFooterSettings.footer.left, metadata);
+ const footerCenter = processDynamicFields(headerFooterSettings.footer.center, metadata);
+ const footerRight = processDynamicFields(headerFooterSettings.footer.right, metadata);
+
+ // Create LaTeX header
+ const latexHeader = `
+\\usepackage{fancyhdr}
+\\pagestyle{fancy}
+\\fancyhf{}
+\\lhead{${headerLeft.replace(/\\/g, '\\\\')}}
+\\chead{${headerCenter.replace(/\\/g, '\\\\')}}
+\\rhead{${headerRight.replace(/\\/g, '\\\\')}}
+\\lfoot{${footerLeft.replace(/\\/g, '\\\\')}}
+\\cfoot{${footerCenter.replace(/[$]PAGE[$]/g, '\\\\thepage').replace(/[$]TOTAL[$]/g, '\\\\pageref{LastPage}').replace(/\\/g, '\\\\')}}
+\\rfoot{${footerRight.replace(/\\/g, '\\\\')}}
+\\renewcommand{\\headrulewidth}{0.4pt}
+\\renewcommand{\\footrulewidth}{0.4pt}
+`;
+ const headerFile = path.join(require('os').tmpdir(), `header_batch_${Date.now()}.tex`);
+ fs.writeFileSync(headerFile, latexHeader, 'utf-8');
+ pandocCmd += ` --include-in-header="${headerFile}"`;
+ pandocCmd += ' --variable header-includes="\\\\usepackage{lastpage}"';
+ }
+ }
+
+ // Add DOCX-specific handling
+ if (format === 'docx') {
+ pandocCmd += ' -t docx';
+ }
+
+ // Add PowerPoint footer if enabled
+ if (format === 'pptx' && headerFooterSettings.enabled && headerFooterSettings.footer.center) {
+ const filename = path.basename(inputFile, path.extname(inputFile));
+ const metadata = { filename, title: filename, author: '' };
+ const footerText = processDynamicFields(headerFooterSettings.footer.center, metadata);
+ pandocCmd += ` --variable footer="${footerText}"`;
}
// Execute conversion
- exec(pandocCmd, (error, stdout, stderr) => {
+ exec(pandocCmd, async (error, stdout, stderr) => {
if (!error) {
+ // Add headers/footers to DOCX if enabled
+ if (format === 'docx' && headerFooterSettings.enabled) {
+ try {
+ const filename = path.basename(inputFile, path.extname(inputFile));
+ const metadata = { filename, title: filename, author: '' };
+ await addHeaderFooterToDocx(outputFile, metadata);
+ } catch (hfError) {
+ console.error('Batch: Error adding headers/footers to DOCX:', hfError);
+ }
+ }
completedCount++;
}
@@ -1877,27 +2190,91 @@ function performCLIConversion(inputPath, format) {
function buildPandocCommand(content, format, outputPath) {
const inputFile = path.join(require('os').tmpdir(), `panconverter_temp_${Date.now()}.md`);
fs.writeFileSync(inputFile, content, 'utf-8');
-
+
let command = `pandoc "${inputFile}" -o "${outputPath}"`;
-
+
+ // Get metadata for dynamic fields
+ const filename = currentFile ? path.basename(currentFile, path.extname(currentFile)) : 'document';
+ const metadata = {
+ filename: filename,
+ title: filename,
+ author: '',
+ };
+
switch (format) {
case 'pdf':
command += ' --pdf-engine=xelatex --variable geometry:margin=1in';
+
+ // Add header/footer if enabled
+ if (headerFooterSettings.enabled) {
+ // Process dynamic fields
+ const headerLeft = processDynamicFields(headerFooterSettings.header.left, metadata);
+ const headerCenter = processDynamicFields(headerFooterSettings.header.center, metadata);
+ const headerRight = processDynamicFields(headerFooterSettings.header.right, metadata);
+ const footerLeft = processDynamicFields(headerFooterSettings.footer.left, metadata);
+ const footerCenter = processDynamicFields(headerFooterSettings.footer.center, metadata);
+ const footerRight = processDynamicFields(headerFooterSettings.footer.right, metadata);
+
+ // Add Pandoc variables for fancyhdr package
+ if (headerLeft) command += ` --variable header-left="${headerLeft}"`;
+ if (headerCenter) command += ` --variable header-center="${headerCenter}"`;
+ if (headerRight) command += ` --variable header-right="${headerRight}"`;
+ if (footerLeft) command += ` --variable footer-left="${footerLeft}"`;
+ if (footerCenter) command += ` --variable footer-center="${footerCenter}"`;
+ if (footerRight) command += ` --variable footer-right="${footerRight}"`;
+
+ // Create custom LaTeX header with fancyhdr
+ const latexHeader = `
+\\usepackage{fancyhdr}
+\\pagestyle{fancy}
+\\fancyhf{}
+\\lhead{${headerLeft.replace(/\\/g, '\\\\')}}
+\\chead{${headerCenter.replace(/\\/g, '\\\\')}}
+\\rhead{${headerRight.replace(/\\/g, '\\\\')}}
+\\lfoot{${footerLeft.replace(/\\/g, '\\\\')}}
+\\cfoot{${footerCenter.replace(/[$]PAGE[$]/g, '\\\\thepage').replace(/[$]TOTAL[$]/g, '\\\\pageref{LastPage}').replace(/\\/g, '\\\\')}}
+\\rfoot{${footerRight.replace(/\\/g, '\\\\')}}
+\\renewcommand{\\headrulewidth}{0.4pt}
+\\renewcommand{\\footrulewidth}{0.4pt}
+`;
+ const headerFile = path.join(require('os').tmpdir(), `header_${Date.now()}.tex`);
+ fs.writeFileSync(headerFile, latexHeader, 'utf-8');
+ command += ` --include-in-header="${headerFile}"`;
+
+ // Add lastpage package for $TOTAL$ support
+ command += ' --variable header-includes="\\\\usepackage{lastpage}"';
+ }
break;
+
case 'html':
command += ' --self-contained --css';
break;
+
case 'docx':
command += ' --reference-doc';
+
+ // For DOCX, header/footer are handled via reference document or separate processing
+ // We'll add a note that DOCX headers/footers require reference doc or post-processing
break;
+
+ case 'odt':
+ // ODT headers/footers are handled via reference document
+ break;
+
case 'latex':
command += ' --standalone';
break;
+
case 'pptx':
command += ' --slide-level=2';
+ // PowerPoint footer can be added with --variable
+ if (headerFooterSettings.enabled && headerFooterSettings.footer.center) {
+ const footerText = processDynamicFields(headerFooterSettings.footer.center, metadata);
+ command += ` --variable footer="${footerText}"`;
+ }
break;
}
-
+
return command;
}
@@ -1906,6 +2283,12 @@ app.whenReady().then(() => {
wordTemplatePath = store.get('wordTemplatePath', null);
templateStartPage = store.get('templateStartPage', 3);
+ // Load header/footer settings
+ const savedHFSettings = store.get('headerFooterSettings', null);
+ if (savedHFSettings) {
+ headerFooterSettings = savedHFSettings;
+ }
+
// Check for command line conversion requests
const args = process.argv.slice(2);
if (args.length >= 2 && (args[0] === '--convert' || args[0] === '--convert-to')) {
diff --git a/src/renderer.js b/src/renderer.js
index 91a06d4..fbe0dd7 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -2555,4 +2555,193 @@ function initMathSupport() {
}
// Initialize math support on load
-initMathSupport();
\ No newline at end of file
+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 file selection
+function handleLogoSelection(position) {
+ const input = document.getElementById(`${position}-logo`);
+
+ if (input.files && input.files[0]) {
+ const filePath = input.files[0].path;
+
+ // Send to main process to save
+ ipcRenderer.send('save-header-footer-logo', { position, filePath });
+ }
+}
+
+// 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`).value = '';
+ 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 file inputs
+document.getElementById('header-logo').addEventListener('change', () => handleLogoSelection('header'));
+document.getElementById('footer-logo').addEventListener('change', () => handleLogoSelection('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();
+});
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 494bf6d..b12ef61 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3157,4 +3157,276 @@ body.printing-no-styles .preview-content pre,
.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);
+}
+
+.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;
}
\ No newline at end of file