From 2d71ed33aef2a778f673bd401fbd997d7805e1be Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Tue, 1 Sep 2026 17:55:13 +0530 Subject: [PATCH 01/11] fix(export): render diagrams without theme flashing --- desktop-app/resources/index.html | 87 ++-- desktop-app/resources/js/script.js | 616 ++++++++--------------------- desktop-app/resources/styles.css | 120 +++++- index.html | 87 ++-- script.js | 616 ++++++++--------------------- styles.css | 120 +++++- tests/e2e/export.spec.js | 208 ++++++++++ tests/helpers/app.js | 21 + 8 files changed, 901 insertions(+), 974 deletions(-) diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html index da1acfb3..7372803b 100644 --- a/desktop-app/resources/index.html +++ b/desktop-app/resources/index.html @@ -719,18 +719,23 @@

Explorer

-
Appearance
-
- - +
+
+ Appearance + Remembered +
+
+ + +
@@ -751,18 +756,23 @@

Explorer

-
Appearance
-
- - +
+
+ Appearance + Remembered +
+
+ + +
@@ -783,18 +793,23 @@

Explorer

-
Appearance
-
- - +
+
+ Appearance + Remembered +
+
+ + +
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js index e57b02ad..06333482 100644 --- a/desktop-app/resources/js/script.js +++ b/desktop-app/resources/js/script.js @@ -2189,9 +2189,9 @@ document.addEventListener("DOMContentLoaded", async function () { let _lastMermaidTheme = null; let _mermaidThemeReinitTimeout = null; let _themeTransitionTimeout = null; - const initMermaid = (forceReinit) => { + const initMermaid = (forceReinit, themeOverride) => { if (typeof mermaid === 'undefined') return; // PERF-002: Not loaded yet - const currentTheme = document.documentElement.getAttribute("data-theme"); + const currentTheme = themeOverride || document.documentElement.getAttribute("data-theme"); const mermaidTheme = currentTheme === "dark" ? "dark" : "default"; // Skip re-initialization if theme hasn't changed (PERF-005) @@ -4001,25 +4001,26 @@ document.addEventListener("DOMContentLoaded", async function () { ['.kroki-diagram', null] ]; const renderAdapterTargets = function() { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return Promise.resolve([]); + const renderPromises = []; adapterTargets.forEach(([selector, fixedEngine]) => { queryPreviewRoots(roots, selector).forEach(node => { const engine = fixedEngine || node.closest('[data-diagram-engine]')?.dataset.diagramEngine; if (engine && REMOTE_DIAGRAM_ENGINES[engine]) { - renderRemoteDiagramNode(node, engine, context); + renderPromises.push(renderRemoteDiagramNode(node, engine, context)); } }); }); + return Promise.all(renderPromises); }; if (typeof pako === 'undefined') { - loadDiagramLibrary(CDN.pako).then(renderAdapterTargets).catch(error => { + return loadDiagramLibrary(CDN.pako).then(renderAdapterTargets).catch(error => { console.warn('Failed to load diagram encoder; POST fallbacks remain available', error); - renderAdapterTargets(); + return renderAdapterTargets(); }); - } else { - renderAdapterTargets(); } + return renderAdapterTargets(); } function typesetMathJaxTargets(mathTargets, context) { @@ -13327,7 +13328,7 @@ document.addEventListener("DOMContentLoaded", async function () { const renderLoadedNodes = function(forceInit) { if (!isPreviewRenderContextCurrent(context)) return Promise.resolve([]); - initMermaid(forceInit); + initMermaid(forceInit, context && context.theme); return renderMermaidNodeList(nodes, context, toolbarRoot) .catch(function(error) { if (!isPreviewRenderContextCurrent(context)) return []; @@ -13436,22 +13437,21 @@ document.addEventListener("DOMContentLoaded", async function () { function renderAbcNodes(roots, context) { const abcNodes = queryPreviewRoots(roots, '.abc-notation'); - if (abcNodes.length === 0) return; + if (abcNodes.length === 0) return Promise.resolve([]); const renderNodes = function() { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; abcNodes.forEach(function(node) { - setTimeout(function() { - renderAbcNotationNode(node, context); - }, 0); + renderAbcNotationNode(node, context); }); + return abcNodes; }; const loadAndRender = function() { - loadDiagramLibrary(CDN.abcjs).then(function() { - if (!isPreviewRenderContextCurrent(context)) return; - renderNodes(); + return loadDiagramLibrary(CDN.abcjs).then(function() { + if (!isPreviewRenderContextCurrent(context)) return []; + return renderNodes(); }).catch(function(error) { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; console.warn('Failed to load abcjs:', error); abcNodes.forEach(function(node) { const container = node.closest('.abc-container'); @@ -13464,14 +13464,14 @@ document.addEventListener("DOMContentLoaded", async function () { ); } }); + return []; }); }; if (typeof ABCJS === 'undefined') { - loadAndRender(); - } else { - renderNodes(); + return loadAndRender(); } + return Promise.resolve(renderNodes()); } function disposeStlView(viewId) { @@ -13493,7 +13493,7 @@ document.addEventListener("DOMContentLoaded", async function () { if (view.controls) { view.controls.dispose(); } - if (view.scene) { + if (view.scene && typeof view.scene.traverse === 'function') { view.scene.traverse(node => { if (node.geometry) { node.geometry.dispose(); @@ -13598,7 +13598,7 @@ document.addEventListener("DOMContentLoaded", async function () { node._leafletMap = map; observeMapNodeSize(node, map); - const currentTheme = document.documentElement.getAttribute("data-theme") || 'light'; + const currentTheme = (context && context.theme) || document.documentElement.getAttribute("data-theme") || 'light'; let tileUrl; let tileAttribution = '© OpenStreetMap contributors'; @@ -13612,7 +13612,8 @@ document.addEventListener("DOMContentLoaded", async function () { L.tileLayer(tileUrl, { attribution: tileAttribution, - maxZoom: 19 + maxZoom: 19, + crossOrigin: context && context.exportCapture ? true : false }).addTo(map); const geojsonLayer = L.geoJSON(geojsonData, { @@ -13656,12 +13657,13 @@ document.addEventListener("DOMContentLoaded", async function () { function renderMapNodes(roots, context) { const geojsonNodes = queryPreviewRoots(roots, '.geojson-map'); const topojsonNodes = queryPreviewRoots(roots, '.topojson-map'); - if (geojsonNodes.length === 0 && topojsonNodes.length === 0) return; + if (geojsonNodes.length === 0 && topojsonNodes.length === 0) return Promise.resolve([]); const renderAll = function() { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; geojsonNodes.forEach(function(node) { renderMapNode(node, false, context); }); topojsonNodes.forEach(function(node) { renderMapNode(node, true, context); }); + return geojsonNodes.concat(topojsonNodes); }; const loadPromises = []; if (typeof L === 'undefined') { @@ -13677,18 +13679,18 @@ document.addEventListener("DOMContentLoaded", async function () { } if (loadPromises.length === 0) { - renderAll(); - return; + return Promise.resolve(renderAll()); } - Promise.all(loadPromises).then(function() { - renderAll(); + return Promise.all(loadPromises).then(function() { + return renderAll(); }).catch(function(error) { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; console.warn('Failed to load map libraries:', error); geojsonNodes.concat(topojsonNodes).forEach(function(node) { const container = node.closest('.geojson-container') || node.closest('.topojson-container'); if (container) container.classList.remove('is-loading'); }); + return []; }); } @@ -13723,7 +13725,7 @@ document.addEventListener("DOMContentLoaded", async function () { } } - function renderStlInContainer(container, code, viewId) { + function renderStlInContainer(container, code, viewId, themeOverride) { validateStlSource(code); const width = container.clientWidth || 400; const height = container.clientHeight || 400; @@ -13787,7 +13789,7 @@ document.addEventListener("DOMContentLoaded", async function () { const maxDim = Math.max(size.x, size.y, size.z); // Add grid helper (underneath the model, matching the theme) - const currentTheme = document.documentElement.getAttribute("data-theme") || 'light'; + const currentTheme = themeOverride || document.documentElement.getAttribute("data-theme") || 'light'; const gridColorCenter = currentTheme === 'dark' ? 0x888888 : 0xaaaaaa; const gridColor = currentTheme === 'dark' ? 0x333742 : 0xcccccc; @@ -14061,7 +14063,7 @@ document.addEventListener("DOMContentLoaded", async function () { try { node.innerHTML = ''; - const view = renderStlInContainer(node, decodedCode, nodeId); + const view = renderStlInContainer(node, decodedCode, nodeId, context && context.theme); if (container) container.classList.remove('is-loading'); @@ -14076,11 +14078,12 @@ document.addEventListener("DOMContentLoaded", async function () { function renderStlNodes(roots, context) { const stlNodes = queryPreviewRoots(roots, '.stl-viewer'); - if (stlNodes.length === 0) return; + if (stlNodes.length === 0) return Promise.resolve([]); const renderAll = function() { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; stlNodes.forEach(function(node) { renderStlNode(node, context); }); + return stlNodes; }; const loadLoaderAndControls = function() { if (!isPreviewRenderContextCurrent(context)) return Promise.resolve(); @@ -14097,18 +14100,19 @@ document.addEventListener("DOMContentLoaded", async function () { ? loadScript(CDN.three) : Promise.resolve(); - threeReady.then(function() { + return threeReady.then(function() { if (!isPreviewRenderContextCurrent(context)) return null; return loadLoaderAndControls(); }).then(function() { - renderAll(); + return renderAll(); }).catch(function(error) { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; console.warn('Failed to load Three.js libraries:', error); stlNodes.forEach(function(node) { const container = node.closest('.stl-container'); if (container) container.classList.remove('is-loading'); }); + return []; }); } @@ -14346,23 +14350,22 @@ ${selector} .arrowheadPath { async function prepareBrowserPrintExport(exportTheme = 'light') { const root = document.documentElement; - const previousTheme = root.getAttribute('data-theme') || initialTheme || 'light'; const previousPrintExport = root.getAttribute('data-browser-print-export'); - const targetTheme = exportTheme === 'dark' ? 'dark' : 'light'; - const shouldChangeTheme = previousTheme !== targetTheme; - - root.setAttribute('data-browser-print-export', targetTheme); - if (shouldChangeTheme) { - root.setAttribute('data-theme', targetTheme); - } + const targetTheme = getExportTheme(exportTheme); + let printSnapshot = null; - await renderThemeSensitivePreviewContentForPrint(); - - if (document.fonts && document.fonts.ready) { - await withBrowserPrintTimeout(document.fonts.ready.catch(() => null), 1500); + try { + printSnapshot = await createExportRenderElement(markdownEditor.value, targetTheme, 'print'); + printSnapshot.classList.add('browser-print-export-snapshot'); + printSnapshot.setAttribute('aria-hidden', 'true'); + root.setAttribute('data-browser-print-export', targetTheme); + await waitForBrowserPrintFrame(); + } catch (error) { + if (printSnapshot) disposeExportRenderElement(printSnapshot); + if (previousPrintExport === null) root.removeAttribute('data-browser-print-export'); + else root.setAttribute('data-browser-print-export', previousPrintExport); + throw error; } - await withBrowserPrintTimeout(waitForAllImages(markdownPreview), 2500); - await waitForBrowserPrintFrame(); return function restoreBrowserPrintExport() { if (previousPrintExport === null) { @@ -14370,13 +14373,7 @@ ${selector} .arrowheadPath { } else { root.setAttribute('data-browser-print-export', previousPrintExport); } - - if (shouldChangeTheme) { - root.setAttribute('data-theme', previousTheme); - renderThemeSensitivePreviewContentForPrint().catch(function(error) { - console.warn('Preview theme restoration after print failed:', error); - }); - } + disposeExportRenderElement(printSnapshot); }; } @@ -24164,7 +24161,7 @@ ${selector} .arrowheadPath { window.auditedTempElement = state.tempElement; console.log("Skipped tempElement removal for audit"); } else { - state.tempElement.parentNode.removeChild(state.tempElement); + disposeExportRenderElement(state.tempElement); } } if (state.overlay && state.overlay.parentNode) { @@ -24986,6 +24983,119 @@ ${selector} .arrowheadPath { return Promise.all(promises); } + function getExportTheme(theme) { + return theme === 'dark' ? 'dark' : 'light'; + } + + function buildExportHtml(markdown) { + const { frontmatter, body } = parseFrontmatter(markdown); + const tableHtml = frontmatter ? renderFrontmatterTable(frontmatter) : ''; + const referenceData = extractReferenceDefinitions(body); + const html = tableHtml + marked.parse(referenceData.cleanedMarkdown); + return { + html: DOMPurify.sanitize(html, { + ADD_TAGS: ['mjx-container', 'svg', 'path', 'g', 'marker', 'defs', 'pattern', 'clipPath', 'input', 'video', 'source'], + ADD_ATTR: ['id', 'class', 'style', 'align', 'viewBox', 'd', 'fill', 'stroke', 'transform', 'marker-end', 'marker-start', 'type', 'checked', 'disabled', 'data-original-code', 'aria-label', 'controls', 'preload', 'playsinline'], + ALLOWED_URI_REGEXP: SAFE_MARKDOWN_URI_REGEXP + }), + referenceData + }; + } + + function removeExportOnlyControls(root) { + root.querySelectorAll( + '.diagram-status, .diagram-toolbar, .mermaid-toolbar, .abc-toolbar, ' + + '.plantuml-toolbar, .d2-toolbar, .graphviz-toolbar, .stl-toolbar, .review-target-actions' + ).forEach(element => element.remove()); + root.querySelectorAll('.is-loading').forEach(element => element.classList.remove('is-loading')); + } + + function disposeExportRenderElement(root) { + if (!root) return; + root.querySelectorAll('.geojson-map, .topojson-map').forEach(disposeMapNode); + root.querySelectorAll('.stl-viewer[id]').forEach(node => disposeStlView(node.id)); + clearMathJaxPreviewState(root); + if (root.parentNode) root.parentNode.removeChild(root); + } + + async function waitForExportWork(state, promise) { + return state ? runPdfAbortable(state, promise) : promise; + } + + async function renderExportRichContent(root, markdown, exportTheme, state) { + const theme = getExportTheme(exportTheme); + const context = { + theme, + exportCapture: true, + isCurrent() { + return root.isConnected && !(state && state.signal.aborted); + } + }; + + const mermaidNodes = Array.from(root.querySelectorAll('.mermaid')); + if (mermaidNodes.length > 0) { + await waitForExportWork(state, renderMermaidNodes(mermaidNodes, context, root)); + } + + await waitForExportWork(state, Promise.all([ + renderAbcNodes([root], context), + renderMapNodes([root], context), + renderStlNodes([root], context), + renderRemoteDiagramNodes([root], context) + ])); + + if (markdownLikelyContainsMath(markdown)) { + await waitForExportWork(state, ensureMathJaxReady()); + if (window.MathJax && typeof MathJax.typesetPromise === 'function') { + await waitForExportWork(state, MathJax.typesetPromise([root])); + } + } + + root.querySelectorAll('mjx-assistive-mml, script[type*="math"], script[type*="tex"]').forEach(element => element.remove()); + removeExportOnlyControls(root); + + await waitForExportWork(state, Promise.all([ + waitForAllImages(root), + document.fonts ? document.fonts.ready : Promise.resolve() + ])); + await waitForBrowserPrintFrame(); + } + + async function createExportRenderElement(markdown, exportTheme, mode, state) { + const theme = getExportTheme(exportTheme); + const { html, referenceData } = buildExportHtml(markdown); + const root = document.createElement('article'); + root.className = `markdown-body pdf-export theme-${theme} export-render-root`; + root.setAttribute('data-theme', theme); + root.setAttribute('data-export-render-mode', mode); + root.innerHTML = html; + root.style.boxSizing = 'border-box'; + root.style.position = 'fixed'; + root.style.left = '-12000px'; + root.style.top = '0'; + root.style.margin = '0'; + root.style.width = mode === 'pdf' ? '210mm' : '1000px'; + root.style.padding = mode === 'image' ? '40px' : mode === 'print' ? '45px' : '0'; + root.style.fontSize = mode === 'pdf' ? '14px' : '16px'; + root.style.backgroundColor = theme === 'dark' ? '#0d1117' : '#ffffff'; + root.style.color = theme === 'dark' ? '#c9d1d9' : '#24292e'; + document.body.appendChild(root); + if (state) state.tempElement = root; + + applyReferencePreviewLinks(root, referenceData.definitions); + enhanceGitHubAlerts(root); + + try { + await renderExportRichContent(root, markdown, theme, state); + return root; + } catch (error) { + if (!state || !window.keepTempElementForAudit) { + disposeExportRenderElement(root); + } + throw error; + } + } + // ============================================ // End Oversized Graphics Scaling Functions // ============================================ @@ -25093,220 +25203,14 @@ ${selector} .arrowheadPath { updatePdfProgress(progressState, 15, "Parsing markdown"); await waitForPdfFrame(progressState); const markdown = markdownEditor.value; - const html = marked.parse(markdown); - const sanitizedHtml = DOMPurify.sanitize(html, { - ADD_TAGS: ['mjx-container', 'svg', 'path', 'g', 'marker', 'defs', 'pattern', 'clipPath', 'input', 'video', 'source'], - ADD_ATTR: ['id', 'class', 'style', 'align', 'viewBox', 'd', 'fill', 'stroke', 'transform', 'marker-end', 'marker-start', 'type', 'checked', 'disabled', 'data-original-code', 'aria-label', 'controls', 'preload', 'playsinline'], - ALLOWED_URI_REGEXP: SAFE_MARKDOWN_URI_REGEXP - }); throwIfPdfExportAborted(progressState.signal); - updatePdfProgress(progressState, 24, "Preparing document"); + updatePdfProgress(progressState, 24, "Rendering document content"); await waitForPdfFrame(progressState); - const tempElement = document.createElement("div"); - progressState.tempElement = tempElement; const isDarkTheme = selectedTheme === "dark"; - tempElement.className = "markdown-body pdf-export " + (isDarkTheme ? "theme-dark" : "theme-light"); - tempElement.setAttribute('data-theme', isDarkTheme ? "dark" : "light"); - tempElement.innerHTML = sanitizedHtml; - enhanceGitHubAlerts(tempElement); - tempElement.style.padding = "0px"; - tempElement.style.width = "210mm"; - tempElement.style.margin = "0 auto"; - tempElement.style.fontSize = "14px"; - tempElement.style.position = "fixed"; - tempElement.style.left = "-9999px"; - tempElement.style.top = "0"; - - tempElement.style.backgroundColor = isDarkTheme ? "#0d1117" : "#ffffff"; - tempElement.style.color = isDarkTheme ? "#c9d1d9" : "#24292e"; - - document.body.appendChild(tempElement); + const tempElement = await createExportRenderElement(markdown, selectedTheme, 'pdf', progressState); await waitForPdfFrame(progressState); - const mermaidNodes = tempElement.querySelectorAll('.mermaid'); - if (mermaidNodes.length > 0) { - updatePdfProgress(progressState, 34, "Rendering diagrams"); - try { - if (typeof mermaid === 'undefined') { - await runPdfAbortable(progressState, loadScript(CDN.mermaid)); - } - throwIfPdfExportAborted(progressState.signal); - - mermaidNodes.forEach(node => { - const rawCode = node.getAttribute('data-original-code'); - if (rawCode) { - try { node.textContent = decodeURIComponent(rawCode); } - catch (_) { node.textContent = rawCode; } - } - node.removeAttribute('data-processed'); - }); - - if (typeof mermaid !== 'undefined') { - mermaid.initialize({ - startOnLoad: false, - theme: isDarkTheme ? 'dark' : 'default', - securityLevel: 'strict', - flowchart: { useMaxWidth: true, htmlLabels: true }, - fontSize: 16, - gantt: { useWidth: 1200 } - }); - } - await runPdfAbortable(progressState, mermaid.init(undefined, mermaidNodes)); - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar').forEach(el => el.remove()); - tempElement.querySelectorAll('.mermaid-container.is-loading, .diagram-viewer.is-loading').forEach(container => { - container.classList.remove('is-loading'); - }); - - // Convert all rendered Mermaid SVGs inside tempElement to tags with data URI sources - const compiledMermaids = tempElement.querySelectorAll('.mermaid-container, .diagram-viewer[data-diagram-engine="mermaid"]'); - compiledMermaids.forEach(container => { - const svgElement = container.querySelector('svg'); - if (svgElement) { - const rect = svgElement.getBoundingClientRect(); - const width = rect.width || svgElement.clientWidth || parseFloat(svgElement.getAttribute('width')) || 600; - const height = rect.height || svgElement.clientHeight || parseFloat(svgElement.getAttribute('height')) || 400; - - const clonedSvg = svgElement.cloneNode(true); - clonedSvg.setAttribute('width', width); - clonedSvg.setAttribute('height', height); - if (!clonedSvg.getAttribute('viewBox')) { - clonedSvg.setAttribute('viewBox', `0 0 ${width} ${height}`); - } - clonedSvg.style.width = `${width}px`; - clonedSvg.style.height = `${height}px`; - - const svgString = new XMLSerializer().serializeToString(clonedSvg); - const svgBase64 = btoa(unescape(encodeURIComponent(svgString))); - - const img = document.createElement('img'); - img.className = 'mermaid-img'; - if (svgElement.id) img.id = svgElement.id + '-img'; - img.src = 'data:image/svg+xml;base64,' + svgBase64; - - img.style.width = `${width}px`; - img.style.height = `${height}px`; - img.style.maxWidth = '100%'; - img.style.display = 'block'; - img.style.margin = '0 auto'; - - img.dataset.originalWidth = String(width); - img.dataset.originalHeight = String(height); - - container.innerHTML = ''; - container.appendChild(img); - } - }); - } catch (mermaidError) { - if (mermaidError instanceof PdfExportCancelledError) throw mermaidError; - console.warn("Mermaid rendering issue:", mermaidError); - tempElement.querySelectorAll('.mermaid-container.is-loading, .diagram-viewer.is-loading').forEach(container => { - container.classList.remove('is-loading'); - }); - } - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar').forEach(el => el.remove()); - throwIfPdfExportAborted(progressState.signal); - await waitForPdfFrame(progressState); - } - - const abcNodes = tempElement.querySelectorAll('.abc-notation'); - if (abcNodes.length > 0) { - updatePdfProgress(progressState, 40, "Rendering music notation"); - try { - if (typeof ABCJS === 'undefined') { - await runPdfAbortable(progressState, loadScript(CDN.abcjs)); - } - throwIfPdfExportAborted(progressState.signal); - - abcNodes.forEach(node => { - const abcCode = decodeURIComponent(node.getAttribute('data-original-code') || ''); - if (abcCode) { - ABCJS.renderAbc(node.id, abcCode, { responsive: 'resize' }); - } - }); - - tempElement.querySelectorAll('.abc-container.is-loading').forEach(container => { - container.classList.remove('is-loading'); - }); - - // Convert all rendered ABC SVGs inside tempElement to tags with data URI sources - const compiledAbcs = tempElement.querySelectorAll('.abc-container'); - compiledAbcs.forEach(container => { - const svgElement = container.querySelector('svg'); - if (svgElement) { - const rect = svgElement.getBoundingClientRect(); - const width = rect.width || svgElement.clientWidth || parseFloat(svgElement.getAttribute('width')) || 600; - const height = rect.height || svgElement.clientHeight || parseFloat(svgElement.getAttribute('height')) || 400; - - const clonedSvg = svgElement.cloneNode(true); - clonedSvg.setAttribute('width', width); - clonedSvg.setAttribute('height', height); - if (!clonedSvg.getAttribute('viewBox')) { - clonedSvg.setAttribute('viewBox', `0 0 ${width} ${height}`); - } - clonedSvg.style.width = `${width}px`; - clonedSvg.style.height = `${height}px`; - - const svgString = new XMLSerializer().serializeToString(clonedSvg); - const svgBase64 = btoa(unescape(encodeURIComponent(svgString))); - - const img = document.createElement('img'); - img.className = 'abc-img'; - img.src = 'data:image/svg+xml;base64,' + svgBase64; - - img.style.width = `${width}px`; - img.style.height = `${height}px`; - img.style.maxWidth = '100%'; - img.style.display = 'block'; - img.style.margin = '0 auto'; - - img.dataset.originalWidth = String(width); - img.dataset.originalHeight = String(height); - - container.innerHTML = ''; - container.appendChild(img); - } - }); - } catch (abcError) { - if (abcError instanceof PdfExportCancelledError) throw abcError; - console.warn("ABC rendering issue:", abcError); - tempElement.querySelectorAll('.abc-container.is-loading').forEach(container => { - container.classList.remove('is-loading'); - }); - } - throwIfPdfExportAborted(progressState.signal); - await waitForPdfFrame(progressState); - } - - if (window.MathJax && markdownLikelyContainsMath(markdown)) { - updatePdfProgress(progressState, 44, "Rendering math"); - try { - await runPdfAbortable(progressState, MathJax.typesetPromise([tempElement])); - } catch (mathJaxError) { - if (mathJaxError instanceof PdfExportCancelledError) throw mathJaxError; - console.warn("MathJax rendering issue:", mathJaxError); - } - throwIfPdfExportAborted(progressState.signal); - - // Hide MathJax assistive elements that cause duplicate text in PDF - // These are screen reader elements that html2canvas captures as visible - // Use multiple CSS properties to ensure html2canvas doesn't render them - const assistiveElements = tempElement.querySelectorAll('mjx-assistive-mml'); - assistiveElements.forEach(el => { - el.style.display = 'none'; - el.style.visibility = 'hidden'; - el.style.position = 'absolute'; - el.style.width = '0'; - el.style.height = '0'; - el.style.overflow = 'hidden'; - el.remove(); // Remove entirely from DOM - }); - - // Also hide any MathJax script elements that might contain source - const mathScripts = tempElement.querySelectorAll('script[type*="math"], script[type*="tex"]'); - mathScripts.forEach(el => el.remove()); - } - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar, .abc-toolbar').forEach(el => el.remove()); await waitForPdfFrame(progressState); fitExportElementToContent(tempElement); @@ -25498,184 +25402,14 @@ ${selector} .arrowheadPath { updatePdfProgress(progressState, 25, "Parsing markdown"); await waitForPdfFrame(progressState); const markdown = markdownEditor.value; - const html = marked.parse(markdown); - const sanitizedHtml = DOMPurify.sanitize(html, { - ADD_TAGS: ['mjx-container', 'svg', 'path', 'g', 'marker', 'defs', 'pattern', 'clipPath', 'input', 'video', 'source'], - ADD_ATTR: ['id', 'class', 'style', 'align', 'viewBox', 'd', 'fill', 'stroke', 'transform', 'marker-end', 'marker-start', 'type', 'checked', 'disabled', 'data-original-code', 'aria-label', 'controls', 'preload', 'playsinline'], - ALLOWED_URI_REGEXP: SAFE_MARKDOWN_URI_REGEXP - }); throwIfPdfExportAborted(progressState.signal); - updatePdfProgress(progressState, 40, "Preparing document"); + updatePdfProgress(progressState, 40, "Rendering document content"); await waitForPdfFrame(progressState); - const tempElement = document.createElement("div"); - progressState.tempElement = tempElement; const isDarkTheme = exportTheme === "dark"; - tempElement.className = "markdown-body pdf-export " + (isDarkTheme ? "theme-dark" : "theme-light"); - tempElement.setAttribute('data-theme', isDarkTheme ? "dark" : "light"); - tempElement.innerHTML = sanitizedHtml; - enhanceGitHubAlerts(tempElement); - tempElement.style.padding = "40px"; // Give some padding for PNG - tempElement.style.width = "1000px"; - tempElement.style.margin = "0 auto"; - tempElement.style.fontSize = "16px"; - tempElement.style.position = "fixed"; - tempElement.style.left = "-9999px"; - tempElement.style.top = "0"; - - tempElement.style.backgroundColor = isDarkTheme ? "#0d1117" : "#ffffff"; - tempElement.style.color = isDarkTheme ? "#c9d1d9" : "#24292e"; - - document.body.appendChild(tempElement); + const tempElement = await createExportRenderElement(markdown, exportTheme, 'image', progressState); await waitForPdfFrame(progressState); - const mermaidNodes = tempElement.querySelectorAll('.mermaid'); - if (mermaidNodes.length > 0) { - updatePdfProgress(progressState, 50, "Rendering diagrams"); - try { - if (typeof mermaid === 'undefined') { - await runPdfAbortable(progressState, loadScript(CDN.mermaid)); - } - throwIfPdfExportAborted(progressState.signal); - - mermaidNodes.forEach(node => { - const rawCode = node.getAttribute('data-original-code'); - if (rawCode) { - try { node.textContent = decodeURIComponent(rawCode); } - catch (_) { node.textContent = rawCode; } - } - node.removeAttribute('data-processed'); - }); - - if (typeof mermaid !== 'undefined') { - mermaid.initialize({ - startOnLoad: false, - theme: isDarkTheme ? 'dark' : 'default', - securityLevel: 'strict', - flowchart: { useMaxWidth: true, htmlLabels: true }, - fontSize: 16, - gantt: { useWidth: 1200 } - }); - } - await runPdfAbortable(progressState, mermaid.init(undefined, mermaidNodes)); - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar').forEach(el => el.remove()); - tempElement.querySelectorAll('.mermaid-container.is-loading, .diagram-viewer.is-loading').forEach(container => container.classList.remove('is-loading')); - - const compiledMermaids = tempElement.querySelectorAll('.mermaid-container, .diagram-viewer[data-diagram-engine="mermaid"]'); - compiledMermaids.forEach(container => { - const svgElement = container.querySelector('svg'); - if (svgElement) { - const rect = svgElement.getBoundingClientRect(); - const width = rect.width || svgElement.clientWidth || parseFloat(svgElement.getAttribute('width')) || 600; - const height = rect.height || svgElement.clientHeight || parseFloat(svgElement.getAttribute('height')) || 400; - const clonedSvg = svgElement.cloneNode(true); - clonedSvg.setAttribute('width', width); - clonedSvg.setAttribute('height', height); - if (!clonedSvg.getAttribute('viewBox')) { - clonedSvg.setAttribute('viewBox', `0 0 ${width} ${height}`); - } - clonedSvg.style.width = `${width}px`; - clonedSvg.style.height = `${height}px`; - const svgString = new XMLSerializer().serializeToString(clonedSvg); - const svgBase64 = btoa(unescape(encodeURIComponent(svgString))); - const img = document.createElement('img'); - img.className = 'mermaid-img'; - if (svgElement.id) img.id = svgElement.id + '-img'; - img.src = 'data:image/svg+xml;base64,' + svgBase64; - img.style.width = `${width}px`; - img.style.height = `${height}px`; - img.style.maxWidth = '100%'; - img.style.display = 'block'; - img.style.margin = '0 auto'; - container.innerHTML = ''; - container.appendChild(img); - } - }); - } catch (e) { - if (e instanceof PdfExportCancelledError) throw e; - console.warn("Mermaid issue:", e); - tempElement.querySelectorAll('.mermaid-container.is-loading, .diagram-viewer.is-loading').forEach(container => container.classList.remove('is-loading')); - } - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar').forEach(el => el.remove()); - throwIfPdfExportAborted(progressState.signal); - await waitForPdfFrame(progressState); - } - - const abcNodes = tempElement.querySelectorAll('.abc-notation'); - if (abcNodes.length > 0) { - updatePdfProgress(progressState, 60, "Rendering music notation"); - try { - if (typeof ABCJS === 'undefined') { - await runPdfAbortable(progressState, loadScript(CDN.abcjs)); - } - throwIfPdfExportAborted(progressState.signal); - abcNodes.forEach(node => { - const abcCode = decodeURIComponent(node.getAttribute('data-original-code') || ''); - if (abcCode) ABCJS.renderAbc(node.id, abcCode, { responsive: 'resize' }); - }); - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .abc-toolbar').forEach(el => el.remove()); - tempElement.querySelectorAll('.abc-container.is-loading, .diagram-viewer.is-loading').forEach(container => container.classList.remove('is-loading')); - - const compiledAbcs = tempElement.querySelectorAll('.abc-container, .diagram-viewer[data-diagram-engine="abc"]'); - compiledAbcs.forEach(container => { - const svgElement = container.querySelector('svg'); - if (svgElement) { - const rect = svgElement.getBoundingClientRect(); - const width = rect.width || svgElement.clientWidth || parseFloat(svgElement.getAttribute('width')) || 600; - const height = rect.height || svgElement.clientHeight || parseFloat(svgElement.getAttribute('height')) || 400; - const clonedSvg = svgElement.cloneNode(true); - clonedSvg.setAttribute('width', width); - clonedSvg.setAttribute('height', height); - if (!clonedSvg.getAttribute('viewBox')) { - clonedSvg.setAttribute('viewBox', `0 0 ${width} ${height}`); - } - const svgString = new XMLSerializer().serializeToString(clonedSvg); - const svgBase64 = btoa(unescape(encodeURIComponent(svgString))); - const img = document.createElement('img'); - img.className = 'abc-img'; - if (svgElement.id) img.id = svgElement.id + '-img'; - img.src = 'data:image/svg+xml;base64,' + svgBase64; - img.style.width = `${width}px`; - img.style.height = `${height}px`; - img.style.maxWidth = '100%'; - img.style.display = 'block'; - img.style.margin = '0 auto'; - container.innerHTML = ''; - container.appendChild(img); - } - }); - } catch (e) { - if (e instanceof PdfExportCancelledError) throw e; - console.warn("ABC rendering issue:", e); - } - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .abc-toolbar').forEach(el => el.remove()); - throwIfPdfExportAborted(progressState.signal); - await waitForPdfFrame(progressState); - } - - if (window.MathJax && markdownLikelyContainsMath(markdown)) { - updatePdfProgress(progressState, 70, "Rendering math"); - try { - await runPdfAbortable(progressState, MathJax.typesetPromise([tempElement])); - } catch (e) { - if (e instanceof PdfExportCancelledError) throw e; - console.warn("MathJax rendering issue:", e); - } - throwIfPdfExportAborted(progressState.signal); - const assistiveElements = tempElement.querySelectorAll('mjx-assistive-mml'); - assistiveElements.forEach(el => { - el.style.display = 'none'; - el.style.visibility = 'hidden'; - el.style.position = 'absolute'; - el.style.width = '0'; - el.style.height = '0'; - el.style.overflow = 'hidden'; - el.remove(); - }); - const mathScripts = tempElement.querySelectorAll('script[type*="math"], script[type*="tex"]'); - mathScripts.forEach(el => el.remove()); - } - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar, .abc-toolbar').forEach(el => el.remove()); await waitForPdfFrame(progressState); fitExportElementToContent(tempElement); diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css index 4edb7249..43b06ed9 100644 --- a/desktop-app/resources/styles.css +++ b/desktop-app/resources/styles.css @@ -4949,6 +4949,54 @@ a:focus { --color-border-muted: #21262d !important; } +/* Keep exported SVG diagrams readable in the chosen export theme, independent + of the theme currently used by the application shell. */ +.pdf-export.theme-light .plantuml-diagram > svg, +.pdf-export.theme-light .graphviz-diagram > svg, +.pdf-export.theme-light .d2-diagram > svg, +.pdf-export.theme-light .kroki-diagram > svg, +.pdf-export.theme-light .abc-notation > svg, +.pdf-export.theme-light .diagram-surface > img { + filter: none !important; +} + +.pdf-export.theme-dark .plantuml-diagram > svg, +.pdf-export.theme-dark .graphviz-diagram > svg, +.pdf-export.theme-dark .d2-diagram > svg:not([data-diagram-native-dark="true"]), +.pdf-export.theme-dark .kroki-diagram > svg { + filter: invert(0.88) hue-rotate(180deg) !important; +} + +.pdf-export.theme-dark .d2-diagram > svg[data-diagram-native-dark="true"], +.pdf-export.theme-dark .markmap-diagram > svg { + filter: none !important; +} + +.pdf-export .abc-notation svg { + color: var(--color-fg-default) !important; + background: transparent !important; +} + +.pdf-export .abc-notation svg path, +.pdf-export .abc-notation svg text { + fill: currentColor !important; +} + +.pdf-export .abc-notation svg text { + stroke: none !important; +} + +.pdf-export .abc-notation svg .abcjs-staff, +.pdf-export .abc-notation svg .abcjs-staff-extra, +.pdf-export .abc-notation svg .abcjs-bar, +.pdf-export .abc-notation svg .abcjs-ledger, +.pdf-export .abc-notation svg .abcjs-stem, +.pdf-export .abc-notation svg .abcjs-beam, +.pdf-export .abc-notation svg .abcjs-slur, +.pdf-export .abc-notation svg .abcjs-tie { + stroke: currentColor !important; +} + /* Hide toolbar and status indicators in export captures */ .pdf-export .diagram-status, .pdf-export .diagram-toolbar, @@ -8147,15 +8195,49 @@ a:focus { } /* Compact Modern Export Theme Selector */ +.export-appearance-setting { + display: grid; + gap: 8px; + margin-top: 18px; +} + +.export-appearance-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.export-appearance-title { + color: var(--text-color); + font-size: 12px; + font-weight: 650; + letter-spacing: 0.01em; +} + +.export-appearance-saved { + display: inline-flex; + align-items: center; + gap: 4px; + color: var(--text-secondary); + font-size: 11px; + line-height: 1; +} + +.export-appearance-saved i { + color: var(--accent-color); + font-size: 11px; +} + .export-theme-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 3px; - padding: 3px; + gap: 4px; + padding: 4px; border: 1px solid var(--border-color); - border-radius: 6px; + border-radius: 10px; background: var(--button-bg); - box-shadow: inset 0 1px 1px rgba(31, 35, 40, 0.03); + box-shadow: inset 0 1px 2px rgba(31, 35, 40, 0.04); } .export-theme-option { @@ -8163,14 +8245,14 @@ a:focus { align-items: center; justify-content: center; gap: 6px; - min-height: 32px; - padding: 6px 12px; + min-height: 38px; + padding: 8px 12px; border: 1px solid transparent; - border-radius: 4px; + border-radius: 7px; background: transparent; color: var(--text-secondary); cursor: pointer; - font-size: 12px; + font-size: 13px; font-weight: 500; line-height: 1.2; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; @@ -8193,10 +8275,11 @@ a:focus { .export-theme-option.is-active, .export-theme-option.is-selected { background: var(--bg-color); - color: var(--text-color); + color: var(--accent-color); font-weight: 600; border-color: var(--border-color); - box-shadow: 0 1px 2px rgba(31, 35, 40, 0.12); + border-color: color-mix(in srgb, var(--accent-color) 32%, var(--border-color)); + box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12); } .export-theme-option i { @@ -12985,6 +13068,23 @@ html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch { max-width: 100% !important; } + html[data-browser-print-export] .app-container { + display: none !important; + } + + html[data-browser-print-export] .browser-print-export-snapshot { + display: block !important; + position: static !important; + inset: auto !important; + width: 100% !important; + min-height: 100vh !important; + max-width: 100% !important; + margin: 0 !important; + padding: 15mm 20mm !important; + overflow: visible !important; + box-sizing: border-box !important; + } + html:not([data-browser-print-export="dark"]), html:not([data-browser-print-export="dark"]) body, html:not([data-browser-print-export="dark"]) .preview-pane { diff --git a/index.html b/index.html index e540255e..f300c5f6 100644 --- a/index.html +++ b/index.html @@ -816,18 +816,23 @@

Explorer

-
Appearance
-
- - +
+
+ Appearance + Remembered +
+
+ + +
@@ -848,18 +853,23 @@

Explorer

-
Appearance
-
- - +
+
+ Appearance + Remembered +
+
+ + +
@@ -880,18 +890,23 @@

Explorer

-
Appearance
-
- - +
+
+ Appearance + Remembered +
+
+ + +
diff --git a/script.js b/script.js index e57b02ad..06333482 100644 --- a/script.js +++ b/script.js @@ -2189,9 +2189,9 @@ document.addEventListener("DOMContentLoaded", async function () { let _lastMermaidTheme = null; let _mermaidThemeReinitTimeout = null; let _themeTransitionTimeout = null; - const initMermaid = (forceReinit) => { + const initMermaid = (forceReinit, themeOverride) => { if (typeof mermaid === 'undefined') return; // PERF-002: Not loaded yet - const currentTheme = document.documentElement.getAttribute("data-theme"); + const currentTheme = themeOverride || document.documentElement.getAttribute("data-theme"); const mermaidTheme = currentTheme === "dark" ? "dark" : "default"; // Skip re-initialization if theme hasn't changed (PERF-005) @@ -4001,25 +4001,26 @@ document.addEventListener("DOMContentLoaded", async function () { ['.kroki-diagram', null] ]; const renderAdapterTargets = function() { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return Promise.resolve([]); + const renderPromises = []; adapterTargets.forEach(([selector, fixedEngine]) => { queryPreviewRoots(roots, selector).forEach(node => { const engine = fixedEngine || node.closest('[data-diagram-engine]')?.dataset.diagramEngine; if (engine && REMOTE_DIAGRAM_ENGINES[engine]) { - renderRemoteDiagramNode(node, engine, context); + renderPromises.push(renderRemoteDiagramNode(node, engine, context)); } }); }); + return Promise.all(renderPromises); }; if (typeof pako === 'undefined') { - loadDiagramLibrary(CDN.pako).then(renderAdapterTargets).catch(error => { + return loadDiagramLibrary(CDN.pako).then(renderAdapterTargets).catch(error => { console.warn('Failed to load diagram encoder; POST fallbacks remain available', error); - renderAdapterTargets(); + return renderAdapterTargets(); }); - } else { - renderAdapterTargets(); } + return renderAdapterTargets(); } function typesetMathJaxTargets(mathTargets, context) { @@ -13327,7 +13328,7 @@ document.addEventListener("DOMContentLoaded", async function () { const renderLoadedNodes = function(forceInit) { if (!isPreviewRenderContextCurrent(context)) return Promise.resolve([]); - initMermaid(forceInit); + initMermaid(forceInit, context && context.theme); return renderMermaidNodeList(nodes, context, toolbarRoot) .catch(function(error) { if (!isPreviewRenderContextCurrent(context)) return []; @@ -13436,22 +13437,21 @@ document.addEventListener("DOMContentLoaded", async function () { function renderAbcNodes(roots, context) { const abcNodes = queryPreviewRoots(roots, '.abc-notation'); - if (abcNodes.length === 0) return; + if (abcNodes.length === 0) return Promise.resolve([]); const renderNodes = function() { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; abcNodes.forEach(function(node) { - setTimeout(function() { - renderAbcNotationNode(node, context); - }, 0); + renderAbcNotationNode(node, context); }); + return abcNodes; }; const loadAndRender = function() { - loadDiagramLibrary(CDN.abcjs).then(function() { - if (!isPreviewRenderContextCurrent(context)) return; - renderNodes(); + return loadDiagramLibrary(CDN.abcjs).then(function() { + if (!isPreviewRenderContextCurrent(context)) return []; + return renderNodes(); }).catch(function(error) { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; console.warn('Failed to load abcjs:', error); abcNodes.forEach(function(node) { const container = node.closest('.abc-container'); @@ -13464,14 +13464,14 @@ document.addEventListener("DOMContentLoaded", async function () { ); } }); + return []; }); }; if (typeof ABCJS === 'undefined') { - loadAndRender(); - } else { - renderNodes(); + return loadAndRender(); } + return Promise.resolve(renderNodes()); } function disposeStlView(viewId) { @@ -13493,7 +13493,7 @@ document.addEventListener("DOMContentLoaded", async function () { if (view.controls) { view.controls.dispose(); } - if (view.scene) { + if (view.scene && typeof view.scene.traverse === 'function') { view.scene.traverse(node => { if (node.geometry) { node.geometry.dispose(); @@ -13598,7 +13598,7 @@ document.addEventListener("DOMContentLoaded", async function () { node._leafletMap = map; observeMapNodeSize(node, map); - const currentTheme = document.documentElement.getAttribute("data-theme") || 'light'; + const currentTheme = (context && context.theme) || document.documentElement.getAttribute("data-theme") || 'light'; let tileUrl; let tileAttribution = '© OpenStreetMap contributors'; @@ -13612,7 +13612,8 @@ document.addEventListener("DOMContentLoaded", async function () { L.tileLayer(tileUrl, { attribution: tileAttribution, - maxZoom: 19 + maxZoom: 19, + crossOrigin: context && context.exportCapture ? true : false }).addTo(map); const geojsonLayer = L.geoJSON(geojsonData, { @@ -13656,12 +13657,13 @@ document.addEventListener("DOMContentLoaded", async function () { function renderMapNodes(roots, context) { const geojsonNodes = queryPreviewRoots(roots, '.geojson-map'); const topojsonNodes = queryPreviewRoots(roots, '.topojson-map'); - if (geojsonNodes.length === 0 && topojsonNodes.length === 0) return; + if (geojsonNodes.length === 0 && topojsonNodes.length === 0) return Promise.resolve([]); const renderAll = function() { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; geojsonNodes.forEach(function(node) { renderMapNode(node, false, context); }); topojsonNodes.forEach(function(node) { renderMapNode(node, true, context); }); + return geojsonNodes.concat(topojsonNodes); }; const loadPromises = []; if (typeof L === 'undefined') { @@ -13677,18 +13679,18 @@ document.addEventListener("DOMContentLoaded", async function () { } if (loadPromises.length === 0) { - renderAll(); - return; + return Promise.resolve(renderAll()); } - Promise.all(loadPromises).then(function() { - renderAll(); + return Promise.all(loadPromises).then(function() { + return renderAll(); }).catch(function(error) { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; console.warn('Failed to load map libraries:', error); geojsonNodes.concat(topojsonNodes).forEach(function(node) { const container = node.closest('.geojson-container') || node.closest('.topojson-container'); if (container) container.classList.remove('is-loading'); }); + return []; }); } @@ -13723,7 +13725,7 @@ document.addEventListener("DOMContentLoaded", async function () { } } - function renderStlInContainer(container, code, viewId) { + function renderStlInContainer(container, code, viewId, themeOverride) { validateStlSource(code); const width = container.clientWidth || 400; const height = container.clientHeight || 400; @@ -13787,7 +13789,7 @@ document.addEventListener("DOMContentLoaded", async function () { const maxDim = Math.max(size.x, size.y, size.z); // Add grid helper (underneath the model, matching the theme) - const currentTheme = document.documentElement.getAttribute("data-theme") || 'light'; + const currentTheme = themeOverride || document.documentElement.getAttribute("data-theme") || 'light'; const gridColorCenter = currentTheme === 'dark' ? 0x888888 : 0xaaaaaa; const gridColor = currentTheme === 'dark' ? 0x333742 : 0xcccccc; @@ -14061,7 +14063,7 @@ document.addEventListener("DOMContentLoaded", async function () { try { node.innerHTML = ''; - const view = renderStlInContainer(node, decodedCode, nodeId); + const view = renderStlInContainer(node, decodedCode, nodeId, context && context.theme); if (container) container.classList.remove('is-loading'); @@ -14076,11 +14078,12 @@ document.addEventListener("DOMContentLoaded", async function () { function renderStlNodes(roots, context) { const stlNodes = queryPreviewRoots(roots, '.stl-viewer'); - if (stlNodes.length === 0) return; + if (stlNodes.length === 0) return Promise.resolve([]); const renderAll = function() { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; stlNodes.forEach(function(node) { renderStlNode(node, context); }); + return stlNodes; }; const loadLoaderAndControls = function() { if (!isPreviewRenderContextCurrent(context)) return Promise.resolve(); @@ -14097,18 +14100,19 @@ document.addEventListener("DOMContentLoaded", async function () { ? loadScript(CDN.three) : Promise.resolve(); - threeReady.then(function() { + return threeReady.then(function() { if (!isPreviewRenderContextCurrent(context)) return null; return loadLoaderAndControls(); }).then(function() { - renderAll(); + return renderAll(); }).catch(function(error) { - if (!isPreviewRenderContextCurrent(context)) return; + if (!isPreviewRenderContextCurrent(context)) return []; console.warn('Failed to load Three.js libraries:', error); stlNodes.forEach(function(node) { const container = node.closest('.stl-container'); if (container) container.classList.remove('is-loading'); }); + return []; }); } @@ -14346,23 +14350,22 @@ ${selector} .arrowheadPath { async function prepareBrowserPrintExport(exportTheme = 'light') { const root = document.documentElement; - const previousTheme = root.getAttribute('data-theme') || initialTheme || 'light'; const previousPrintExport = root.getAttribute('data-browser-print-export'); - const targetTheme = exportTheme === 'dark' ? 'dark' : 'light'; - const shouldChangeTheme = previousTheme !== targetTheme; - - root.setAttribute('data-browser-print-export', targetTheme); - if (shouldChangeTheme) { - root.setAttribute('data-theme', targetTheme); - } + const targetTheme = getExportTheme(exportTheme); + let printSnapshot = null; - await renderThemeSensitivePreviewContentForPrint(); - - if (document.fonts && document.fonts.ready) { - await withBrowserPrintTimeout(document.fonts.ready.catch(() => null), 1500); + try { + printSnapshot = await createExportRenderElement(markdownEditor.value, targetTheme, 'print'); + printSnapshot.classList.add('browser-print-export-snapshot'); + printSnapshot.setAttribute('aria-hidden', 'true'); + root.setAttribute('data-browser-print-export', targetTheme); + await waitForBrowserPrintFrame(); + } catch (error) { + if (printSnapshot) disposeExportRenderElement(printSnapshot); + if (previousPrintExport === null) root.removeAttribute('data-browser-print-export'); + else root.setAttribute('data-browser-print-export', previousPrintExport); + throw error; } - await withBrowserPrintTimeout(waitForAllImages(markdownPreview), 2500); - await waitForBrowserPrintFrame(); return function restoreBrowserPrintExport() { if (previousPrintExport === null) { @@ -14370,13 +14373,7 @@ ${selector} .arrowheadPath { } else { root.setAttribute('data-browser-print-export', previousPrintExport); } - - if (shouldChangeTheme) { - root.setAttribute('data-theme', previousTheme); - renderThemeSensitivePreviewContentForPrint().catch(function(error) { - console.warn('Preview theme restoration after print failed:', error); - }); - } + disposeExportRenderElement(printSnapshot); }; } @@ -24164,7 +24161,7 @@ ${selector} .arrowheadPath { window.auditedTempElement = state.tempElement; console.log("Skipped tempElement removal for audit"); } else { - state.tempElement.parentNode.removeChild(state.tempElement); + disposeExportRenderElement(state.tempElement); } } if (state.overlay && state.overlay.parentNode) { @@ -24986,6 +24983,119 @@ ${selector} .arrowheadPath { return Promise.all(promises); } + function getExportTheme(theme) { + return theme === 'dark' ? 'dark' : 'light'; + } + + function buildExportHtml(markdown) { + const { frontmatter, body } = parseFrontmatter(markdown); + const tableHtml = frontmatter ? renderFrontmatterTable(frontmatter) : ''; + const referenceData = extractReferenceDefinitions(body); + const html = tableHtml + marked.parse(referenceData.cleanedMarkdown); + return { + html: DOMPurify.sanitize(html, { + ADD_TAGS: ['mjx-container', 'svg', 'path', 'g', 'marker', 'defs', 'pattern', 'clipPath', 'input', 'video', 'source'], + ADD_ATTR: ['id', 'class', 'style', 'align', 'viewBox', 'd', 'fill', 'stroke', 'transform', 'marker-end', 'marker-start', 'type', 'checked', 'disabled', 'data-original-code', 'aria-label', 'controls', 'preload', 'playsinline'], + ALLOWED_URI_REGEXP: SAFE_MARKDOWN_URI_REGEXP + }), + referenceData + }; + } + + function removeExportOnlyControls(root) { + root.querySelectorAll( + '.diagram-status, .diagram-toolbar, .mermaid-toolbar, .abc-toolbar, ' + + '.plantuml-toolbar, .d2-toolbar, .graphviz-toolbar, .stl-toolbar, .review-target-actions' + ).forEach(element => element.remove()); + root.querySelectorAll('.is-loading').forEach(element => element.classList.remove('is-loading')); + } + + function disposeExportRenderElement(root) { + if (!root) return; + root.querySelectorAll('.geojson-map, .topojson-map').forEach(disposeMapNode); + root.querySelectorAll('.stl-viewer[id]').forEach(node => disposeStlView(node.id)); + clearMathJaxPreviewState(root); + if (root.parentNode) root.parentNode.removeChild(root); + } + + async function waitForExportWork(state, promise) { + return state ? runPdfAbortable(state, promise) : promise; + } + + async function renderExportRichContent(root, markdown, exportTheme, state) { + const theme = getExportTheme(exportTheme); + const context = { + theme, + exportCapture: true, + isCurrent() { + return root.isConnected && !(state && state.signal.aborted); + } + }; + + const mermaidNodes = Array.from(root.querySelectorAll('.mermaid')); + if (mermaidNodes.length > 0) { + await waitForExportWork(state, renderMermaidNodes(mermaidNodes, context, root)); + } + + await waitForExportWork(state, Promise.all([ + renderAbcNodes([root], context), + renderMapNodes([root], context), + renderStlNodes([root], context), + renderRemoteDiagramNodes([root], context) + ])); + + if (markdownLikelyContainsMath(markdown)) { + await waitForExportWork(state, ensureMathJaxReady()); + if (window.MathJax && typeof MathJax.typesetPromise === 'function') { + await waitForExportWork(state, MathJax.typesetPromise([root])); + } + } + + root.querySelectorAll('mjx-assistive-mml, script[type*="math"], script[type*="tex"]').forEach(element => element.remove()); + removeExportOnlyControls(root); + + await waitForExportWork(state, Promise.all([ + waitForAllImages(root), + document.fonts ? document.fonts.ready : Promise.resolve() + ])); + await waitForBrowserPrintFrame(); + } + + async function createExportRenderElement(markdown, exportTheme, mode, state) { + const theme = getExportTheme(exportTheme); + const { html, referenceData } = buildExportHtml(markdown); + const root = document.createElement('article'); + root.className = `markdown-body pdf-export theme-${theme} export-render-root`; + root.setAttribute('data-theme', theme); + root.setAttribute('data-export-render-mode', mode); + root.innerHTML = html; + root.style.boxSizing = 'border-box'; + root.style.position = 'fixed'; + root.style.left = '-12000px'; + root.style.top = '0'; + root.style.margin = '0'; + root.style.width = mode === 'pdf' ? '210mm' : '1000px'; + root.style.padding = mode === 'image' ? '40px' : mode === 'print' ? '45px' : '0'; + root.style.fontSize = mode === 'pdf' ? '14px' : '16px'; + root.style.backgroundColor = theme === 'dark' ? '#0d1117' : '#ffffff'; + root.style.color = theme === 'dark' ? '#c9d1d9' : '#24292e'; + document.body.appendChild(root); + if (state) state.tempElement = root; + + applyReferencePreviewLinks(root, referenceData.definitions); + enhanceGitHubAlerts(root); + + try { + await renderExportRichContent(root, markdown, theme, state); + return root; + } catch (error) { + if (!state || !window.keepTempElementForAudit) { + disposeExportRenderElement(root); + } + throw error; + } + } + // ============================================ // End Oversized Graphics Scaling Functions // ============================================ @@ -25093,220 +25203,14 @@ ${selector} .arrowheadPath { updatePdfProgress(progressState, 15, "Parsing markdown"); await waitForPdfFrame(progressState); const markdown = markdownEditor.value; - const html = marked.parse(markdown); - const sanitizedHtml = DOMPurify.sanitize(html, { - ADD_TAGS: ['mjx-container', 'svg', 'path', 'g', 'marker', 'defs', 'pattern', 'clipPath', 'input', 'video', 'source'], - ADD_ATTR: ['id', 'class', 'style', 'align', 'viewBox', 'd', 'fill', 'stroke', 'transform', 'marker-end', 'marker-start', 'type', 'checked', 'disabled', 'data-original-code', 'aria-label', 'controls', 'preload', 'playsinline'], - ALLOWED_URI_REGEXP: SAFE_MARKDOWN_URI_REGEXP - }); throwIfPdfExportAborted(progressState.signal); - updatePdfProgress(progressState, 24, "Preparing document"); + updatePdfProgress(progressState, 24, "Rendering document content"); await waitForPdfFrame(progressState); - const tempElement = document.createElement("div"); - progressState.tempElement = tempElement; const isDarkTheme = selectedTheme === "dark"; - tempElement.className = "markdown-body pdf-export " + (isDarkTheme ? "theme-dark" : "theme-light"); - tempElement.setAttribute('data-theme', isDarkTheme ? "dark" : "light"); - tempElement.innerHTML = sanitizedHtml; - enhanceGitHubAlerts(tempElement); - tempElement.style.padding = "0px"; - tempElement.style.width = "210mm"; - tempElement.style.margin = "0 auto"; - tempElement.style.fontSize = "14px"; - tempElement.style.position = "fixed"; - tempElement.style.left = "-9999px"; - tempElement.style.top = "0"; - - tempElement.style.backgroundColor = isDarkTheme ? "#0d1117" : "#ffffff"; - tempElement.style.color = isDarkTheme ? "#c9d1d9" : "#24292e"; - - document.body.appendChild(tempElement); + const tempElement = await createExportRenderElement(markdown, selectedTheme, 'pdf', progressState); await waitForPdfFrame(progressState); - const mermaidNodes = tempElement.querySelectorAll('.mermaid'); - if (mermaidNodes.length > 0) { - updatePdfProgress(progressState, 34, "Rendering diagrams"); - try { - if (typeof mermaid === 'undefined') { - await runPdfAbortable(progressState, loadScript(CDN.mermaid)); - } - throwIfPdfExportAborted(progressState.signal); - - mermaidNodes.forEach(node => { - const rawCode = node.getAttribute('data-original-code'); - if (rawCode) { - try { node.textContent = decodeURIComponent(rawCode); } - catch (_) { node.textContent = rawCode; } - } - node.removeAttribute('data-processed'); - }); - - if (typeof mermaid !== 'undefined') { - mermaid.initialize({ - startOnLoad: false, - theme: isDarkTheme ? 'dark' : 'default', - securityLevel: 'strict', - flowchart: { useMaxWidth: true, htmlLabels: true }, - fontSize: 16, - gantt: { useWidth: 1200 } - }); - } - await runPdfAbortable(progressState, mermaid.init(undefined, mermaidNodes)); - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar').forEach(el => el.remove()); - tempElement.querySelectorAll('.mermaid-container.is-loading, .diagram-viewer.is-loading').forEach(container => { - container.classList.remove('is-loading'); - }); - - // Convert all rendered Mermaid SVGs inside tempElement to tags with data URI sources - const compiledMermaids = tempElement.querySelectorAll('.mermaid-container, .diagram-viewer[data-diagram-engine="mermaid"]'); - compiledMermaids.forEach(container => { - const svgElement = container.querySelector('svg'); - if (svgElement) { - const rect = svgElement.getBoundingClientRect(); - const width = rect.width || svgElement.clientWidth || parseFloat(svgElement.getAttribute('width')) || 600; - const height = rect.height || svgElement.clientHeight || parseFloat(svgElement.getAttribute('height')) || 400; - - const clonedSvg = svgElement.cloneNode(true); - clonedSvg.setAttribute('width', width); - clonedSvg.setAttribute('height', height); - if (!clonedSvg.getAttribute('viewBox')) { - clonedSvg.setAttribute('viewBox', `0 0 ${width} ${height}`); - } - clonedSvg.style.width = `${width}px`; - clonedSvg.style.height = `${height}px`; - - const svgString = new XMLSerializer().serializeToString(clonedSvg); - const svgBase64 = btoa(unescape(encodeURIComponent(svgString))); - - const img = document.createElement('img'); - img.className = 'mermaid-img'; - if (svgElement.id) img.id = svgElement.id + '-img'; - img.src = 'data:image/svg+xml;base64,' + svgBase64; - - img.style.width = `${width}px`; - img.style.height = `${height}px`; - img.style.maxWidth = '100%'; - img.style.display = 'block'; - img.style.margin = '0 auto'; - - img.dataset.originalWidth = String(width); - img.dataset.originalHeight = String(height); - - container.innerHTML = ''; - container.appendChild(img); - } - }); - } catch (mermaidError) { - if (mermaidError instanceof PdfExportCancelledError) throw mermaidError; - console.warn("Mermaid rendering issue:", mermaidError); - tempElement.querySelectorAll('.mermaid-container.is-loading, .diagram-viewer.is-loading').forEach(container => { - container.classList.remove('is-loading'); - }); - } - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar').forEach(el => el.remove()); - throwIfPdfExportAborted(progressState.signal); - await waitForPdfFrame(progressState); - } - - const abcNodes = tempElement.querySelectorAll('.abc-notation'); - if (abcNodes.length > 0) { - updatePdfProgress(progressState, 40, "Rendering music notation"); - try { - if (typeof ABCJS === 'undefined') { - await runPdfAbortable(progressState, loadScript(CDN.abcjs)); - } - throwIfPdfExportAborted(progressState.signal); - - abcNodes.forEach(node => { - const abcCode = decodeURIComponent(node.getAttribute('data-original-code') || ''); - if (abcCode) { - ABCJS.renderAbc(node.id, abcCode, { responsive: 'resize' }); - } - }); - - tempElement.querySelectorAll('.abc-container.is-loading').forEach(container => { - container.classList.remove('is-loading'); - }); - - // Convert all rendered ABC SVGs inside tempElement to tags with data URI sources - const compiledAbcs = tempElement.querySelectorAll('.abc-container'); - compiledAbcs.forEach(container => { - const svgElement = container.querySelector('svg'); - if (svgElement) { - const rect = svgElement.getBoundingClientRect(); - const width = rect.width || svgElement.clientWidth || parseFloat(svgElement.getAttribute('width')) || 600; - const height = rect.height || svgElement.clientHeight || parseFloat(svgElement.getAttribute('height')) || 400; - - const clonedSvg = svgElement.cloneNode(true); - clonedSvg.setAttribute('width', width); - clonedSvg.setAttribute('height', height); - if (!clonedSvg.getAttribute('viewBox')) { - clonedSvg.setAttribute('viewBox', `0 0 ${width} ${height}`); - } - clonedSvg.style.width = `${width}px`; - clonedSvg.style.height = `${height}px`; - - const svgString = new XMLSerializer().serializeToString(clonedSvg); - const svgBase64 = btoa(unescape(encodeURIComponent(svgString))); - - const img = document.createElement('img'); - img.className = 'abc-img'; - img.src = 'data:image/svg+xml;base64,' + svgBase64; - - img.style.width = `${width}px`; - img.style.height = `${height}px`; - img.style.maxWidth = '100%'; - img.style.display = 'block'; - img.style.margin = '0 auto'; - - img.dataset.originalWidth = String(width); - img.dataset.originalHeight = String(height); - - container.innerHTML = ''; - container.appendChild(img); - } - }); - } catch (abcError) { - if (abcError instanceof PdfExportCancelledError) throw abcError; - console.warn("ABC rendering issue:", abcError); - tempElement.querySelectorAll('.abc-container.is-loading').forEach(container => { - container.classList.remove('is-loading'); - }); - } - throwIfPdfExportAborted(progressState.signal); - await waitForPdfFrame(progressState); - } - - if (window.MathJax && markdownLikelyContainsMath(markdown)) { - updatePdfProgress(progressState, 44, "Rendering math"); - try { - await runPdfAbortable(progressState, MathJax.typesetPromise([tempElement])); - } catch (mathJaxError) { - if (mathJaxError instanceof PdfExportCancelledError) throw mathJaxError; - console.warn("MathJax rendering issue:", mathJaxError); - } - throwIfPdfExportAborted(progressState.signal); - - // Hide MathJax assistive elements that cause duplicate text in PDF - // These are screen reader elements that html2canvas captures as visible - // Use multiple CSS properties to ensure html2canvas doesn't render them - const assistiveElements = tempElement.querySelectorAll('mjx-assistive-mml'); - assistiveElements.forEach(el => { - el.style.display = 'none'; - el.style.visibility = 'hidden'; - el.style.position = 'absolute'; - el.style.width = '0'; - el.style.height = '0'; - el.style.overflow = 'hidden'; - el.remove(); // Remove entirely from DOM - }); - - // Also hide any MathJax script elements that might contain source - const mathScripts = tempElement.querySelectorAll('script[type*="math"], script[type*="tex"]'); - mathScripts.forEach(el => el.remove()); - } - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar, .abc-toolbar').forEach(el => el.remove()); await waitForPdfFrame(progressState); fitExportElementToContent(tempElement); @@ -25498,184 +25402,14 @@ ${selector} .arrowheadPath { updatePdfProgress(progressState, 25, "Parsing markdown"); await waitForPdfFrame(progressState); const markdown = markdownEditor.value; - const html = marked.parse(markdown); - const sanitizedHtml = DOMPurify.sanitize(html, { - ADD_TAGS: ['mjx-container', 'svg', 'path', 'g', 'marker', 'defs', 'pattern', 'clipPath', 'input', 'video', 'source'], - ADD_ATTR: ['id', 'class', 'style', 'align', 'viewBox', 'd', 'fill', 'stroke', 'transform', 'marker-end', 'marker-start', 'type', 'checked', 'disabled', 'data-original-code', 'aria-label', 'controls', 'preload', 'playsinline'], - ALLOWED_URI_REGEXP: SAFE_MARKDOWN_URI_REGEXP - }); throwIfPdfExportAborted(progressState.signal); - updatePdfProgress(progressState, 40, "Preparing document"); + updatePdfProgress(progressState, 40, "Rendering document content"); await waitForPdfFrame(progressState); - const tempElement = document.createElement("div"); - progressState.tempElement = tempElement; const isDarkTheme = exportTheme === "dark"; - tempElement.className = "markdown-body pdf-export " + (isDarkTheme ? "theme-dark" : "theme-light"); - tempElement.setAttribute('data-theme', isDarkTheme ? "dark" : "light"); - tempElement.innerHTML = sanitizedHtml; - enhanceGitHubAlerts(tempElement); - tempElement.style.padding = "40px"; // Give some padding for PNG - tempElement.style.width = "1000px"; - tempElement.style.margin = "0 auto"; - tempElement.style.fontSize = "16px"; - tempElement.style.position = "fixed"; - tempElement.style.left = "-9999px"; - tempElement.style.top = "0"; - - tempElement.style.backgroundColor = isDarkTheme ? "#0d1117" : "#ffffff"; - tempElement.style.color = isDarkTheme ? "#c9d1d9" : "#24292e"; - - document.body.appendChild(tempElement); + const tempElement = await createExportRenderElement(markdown, exportTheme, 'image', progressState); await waitForPdfFrame(progressState); - const mermaidNodes = tempElement.querySelectorAll('.mermaid'); - if (mermaidNodes.length > 0) { - updatePdfProgress(progressState, 50, "Rendering diagrams"); - try { - if (typeof mermaid === 'undefined') { - await runPdfAbortable(progressState, loadScript(CDN.mermaid)); - } - throwIfPdfExportAborted(progressState.signal); - - mermaidNodes.forEach(node => { - const rawCode = node.getAttribute('data-original-code'); - if (rawCode) { - try { node.textContent = decodeURIComponent(rawCode); } - catch (_) { node.textContent = rawCode; } - } - node.removeAttribute('data-processed'); - }); - - if (typeof mermaid !== 'undefined') { - mermaid.initialize({ - startOnLoad: false, - theme: isDarkTheme ? 'dark' : 'default', - securityLevel: 'strict', - flowchart: { useMaxWidth: true, htmlLabels: true }, - fontSize: 16, - gantt: { useWidth: 1200 } - }); - } - await runPdfAbortable(progressState, mermaid.init(undefined, mermaidNodes)); - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar').forEach(el => el.remove()); - tempElement.querySelectorAll('.mermaid-container.is-loading, .diagram-viewer.is-loading').forEach(container => container.classList.remove('is-loading')); - - const compiledMermaids = tempElement.querySelectorAll('.mermaid-container, .diagram-viewer[data-diagram-engine="mermaid"]'); - compiledMermaids.forEach(container => { - const svgElement = container.querySelector('svg'); - if (svgElement) { - const rect = svgElement.getBoundingClientRect(); - const width = rect.width || svgElement.clientWidth || parseFloat(svgElement.getAttribute('width')) || 600; - const height = rect.height || svgElement.clientHeight || parseFloat(svgElement.getAttribute('height')) || 400; - const clonedSvg = svgElement.cloneNode(true); - clonedSvg.setAttribute('width', width); - clonedSvg.setAttribute('height', height); - if (!clonedSvg.getAttribute('viewBox')) { - clonedSvg.setAttribute('viewBox', `0 0 ${width} ${height}`); - } - clonedSvg.style.width = `${width}px`; - clonedSvg.style.height = `${height}px`; - const svgString = new XMLSerializer().serializeToString(clonedSvg); - const svgBase64 = btoa(unescape(encodeURIComponent(svgString))); - const img = document.createElement('img'); - img.className = 'mermaid-img'; - if (svgElement.id) img.id = svgElement.id + '-img'; - img.src = 'data:image/svg+xml;base64,' + svgBase64; - img.style.width = `${width}px`; - img.style.height = `${height}px`; - img.style.maxWidth = '100%'; - img.style.display = 'block'; - img.style.margin = '0 auto'; - container.innerHTML = ''; - container.appendChild(img); - } - }); - } catch (e) { - if (e instanceof PdfExportCancelledError) throw e; - console.warn("Mermaid issue:", e); - tempElement.querySelectorAll('.mermaid-container.is-loading, .diagram-viewer.is-loading').forEach(container => container.classList.remove('is-loading')); - } - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar').forEach(el => el.remove()); - throwIfPdfExportAborted(progressState.signal); - await waitForPdfFrame(progressState); - } - - const abcNodes = tempElement.querySelectorAll('.abc-notation'); - if (abcNodes.length > 0) { - updatePdfProgress(progressState, 60, "Rendering music notation"); - try { - if (typeof ABCJS === 'undefined') { - await runPdfAbortable(progressState, loadScript(CDN.abcjs)); - } - throwIfPdfExportAborted(progressState.signal); - abcNodes.forEach(node => { - const abcCode = decodeURIComponent(node.getAttribute('data-original-code') || ''); - if (abcCode) ABCJS.renderAbc(node.id, abcCode, { responsive: 'resize' }); - }); - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .abc-toolbar').forEach(el => el.remove()); - tempElement.querySelectorAll('.abc-container.is-loading, .diagram-viewer.is-loading').forEach(container => container.classList.remove('is-loading')); - - const compiledAbcs = tempElement.querySelectorAll('.abc-container, .diagram-viewer[data-diagram-engine="abc"]'); - compiledAbcs.forEach(container => { - const svgElement = container.querySelector('svg'); - if (svgElement) { - const rect = svgElement.getBoundingClientRect(); - const width = rect.width || svgElement.clientWidth || parseFloat(svgElement.getAttribute('width')) || 600; - const height = rect.height || svgElement.clientHeight || parseFloat(svgElement.getAttribute('height')) || 400; - const clonedSvg = svgElement.cloneNode(true); - clonedSvg.setAttribute('width', width); - clonedSvg.setAttribute('height', height); - if (!clonedSvg.getAttribute('viewBox')) { - clonedSvg.setAttribute('viewBox', `0 0 ${width} ${height}`); - } - const svgString = new XMLSerializer().serializeToString(clonedSvg); - const svgBase64 = btoa(unescape(encodeURIComponent(svgString))); - const img = document.createElement('img'); - img.className = 'abc-img'; - if (svgElement.id) img.id = svgElement.id + '-img'; - img.src = 'data:image/svg+xml;base64,' + svgBase64; - img.style.width = `${width}px`; - img.style.height = `${height}px`; - img.style.maxWidth = '100%'; - img.style.display = 'block'; - img.style.margin = '0 auto'; - container.innerHTML = ''; - container.appendChild(img); - } - }); - } catch (e) { - if (e instanceof PdfExportCancelledError) throw e; - console.warn("ABC rendering issue:", e); - } - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .abc-toolbar').forEach(el => el.remove()); - throwIfPdfExportAborted(progressState.signal); - await waitForPdfFrame(progressState); - } - - if (window.MathJax && markdownLikelyContainsMath(markdown)) { - updatePdfProgress(progressState, 70, "Rendering math"); - try { - await runPdfAbortable(progressState, MathJax.typesetPromise([tempElement])); - } catch (e) { - if (e instanceof PdfExportCancelledError) throw e; - console.warn("MathJax rendering issue:", e); - } - throwIfPdfExportAborted(progressState.signal); - const assistiveElements = tempElement.querySelectorAll('mjx-assistive-mml'); - assistiveElements.forEach(el => { - el.style.display = 'none'; - el.style.visibility = 'hidden'; - el.style.position = 'absolute'; - el.style.width = '0'; - el.style.height = '0'; - el.style.overflow = 'hidden'; - el.remove(); - }); - const mathScripts = tempElement.querySelectorAll('script[type*="math"], script[type*="tex"]'); - mathScripts.forEach(el => el.remove()); - } - tempElement.querySelectorAll('.diagram-status, .diagram-toolbar, .mermaid-toolbar, .abc-toolbar').forEach(el => el.remove()); await waitForPdfFrame(progressState); fitExportElementToContent(tempElement); diff --git a/styles.css b/styles.css index 4edb7249..43b06ed9 100644 --- a/styles.css +++ b/styles.css @@ -4949,6 +4949,54 @@ a:focus { --color-border-muted: #21262d !important; } +/* Keep exported SVG diagrams readable in the chosen export theme, independent + of the theme currently used by the application shell. */ +.pdf-export.theme-light .plantuml-diagram > svg, +.pdf-export.theme-light .graphviz-diagram > svg, +.pdf-export.theme-light .d2-diagram > svg, +.pdf-export.theme-light .kroki-diagram > svg, +.pdf-export.theme-light .abc-notation > svg, +.pdf-export.theme-light .diagram-surface > img { + filter: none !important; +} + +.pdf-export.theme-dark .plantuml-diagram > svg, +.pdf-export.theme-dark .graphviz-diagram > svg, +.pdf-export.theme-dark .d2-diagram > svg:not([data-diagram-native-dark="true"]), +.pdf-export.theme-dark .kroki-diagram > svg { + filter: invert(0.88) hue-rotate(180deg) !important; +} + +.pdf-export.theme-dark .d2-diagram > svg[data-diagram-native-dark="true"], +.pdf-export.theme-dark .markmap-diagram > svg { + filter: none !important; +} + +.pdf-export .abc-notation svg { + color: var(--color-fg-default) !important; + background: transparent !important; +} + +.pdf-export .abc-notation svg path, +.pdf-export .abc-notation svg text { + fill: currentColor !important; +} + +.pdf-export .abc-notation svg text { + stroke: none !important; +} + +.pdf-export .abc-notation svg .abcjs-staff, +.pdf-export .abc-notation svg .abcjs-staff-extra, +.pdf-export .abc-notation svg .abcjs-bar, +.pdf-export .abc-notation svg .abcjs-ledger, +.pdf-export .abc-notation svg .abcjs-stem, +.pdf-export .abc-notation svg .abcjs-beam, +.pdf-export .abc-notation svg .abcjs-slur, +.pdf-export .abc-notation svg .abcjs-tie { + stroke: currentColor !important; +} + /* Hide toolbar and status indicators in export captures */ .pdf-export .diagram-status, .pdf-export .diagram-toolbar, @@ -8147,15 +8195,49 @@ a:focus { } /* Compact Modern Export Theme Selector */ +.export-appearance-setting { + display: grid; + gap: 8px; + margin-top: 18px; +} + +.export-appearance-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.export-appearance-title { + color: var(--text-color); + font-size: 12px; + font-weight: 650; + letter-spacing: 0.01em; +} + +.export-appearance-saved { + display: inline-flex; + align-items: center; + gap: 4px; + color: var(--text-secondary); + font-size: 11px; + line-height: 1; +} + +.export-appearance-saved i { + color: var(--accent-color); + font-size: 11px; +} + .export-theme-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 3px; - padding: 3px; + gap: 4px; + padding: 4px; border: 1px solid var(--border-color); - border-radius: 6px; + border-radius: 10px; background: var(--button-bg); - box-shadow: inset 0 1px 1px rgba(31, 35, 40, 0.03); + box-shadow: inset 0 1px 2px rgba(31, 35, 40, 0.04); } .export-theme-option { @@ -8163,14 +8245,14 @@ a:focus { align-items: center; justify-content: center; gap: 6px; - min-height: 32px; - padding: 6px 12px; + min-height: 38px; + padding: 8px 12px; border: 1px solid transparent; - border-radius: 4px; + border-radius: 7px; background: transparent; color: var(--text-secondary); cursor: pointer; - font-size: 12px; + font-size: 13px; font-weight: 500; line-height: 1.2; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; @@ -8193,10 +8275,11 @@ a:focus { .export-theme-option.is-active, .export-theme-option.is-selected { background: var(--bg-color); - color: var(--text-color); + color: var(--accent-color); font-weight: 600; border-color: var(--border-color); - box-shadow: 0 1px 2px rgba(31, 35, 40, 0.12); + border-color: color-mix(in srgb, var(--accent-color) 32%, var(--border-color)); + box-shadow: 0 1px 3px rgba(31, 35, 40, 0.12); } .export-theme-option i { @@ -12985,6 +13068,23 @@ html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch { max-width: 100% !important; } + html[data-browser-print-export] .app-container { + display: none !important; + } + + html[data-browser-print-export] .browser-print-export-snapshot { + display: block !important; + position: static !important; + inset: auto !important; + width: 100% !important; + min-height: 100vh !important; + max-width: 100% !important; + margin: 0 !important; + padding: 15mm 20mm !important; + overflow: visible !important; + box-sizing: border-box !important; + } + html:not([data-browser-print-export="dark"]), html:not([data-browser-print-export="dark"]) body, html:not([data-browser-print-export="dark"]) .preview-pane { diff --git a/tests/e2e/export.spec.js b/tests/e2e/export.spec.js index a0bee044..10a09d27 100644 --- a/tests/e2e/export.spec.js +++ b/tests/e2e/export.spec.js @@ -3,10 +3,14 @@ const { fixture, openApp, setEditorContent, + stubRemoteDiagramServices, + stubLazyRendererLibraries, stubExportLibraries } = require('../helpers/app'); test.beforeEach(async ({ page }) => { + await stubRemoteDiagramServices(page); + await stubLazyRendererLibraries(page); await stubExportLibraries(page); await openApp(page); await setEditorContent(page, await fixture('export.md')); @@ -22,6 +26,118 @@ test.beforeEach(async ({ page }) => { }); }); +const allDiagramMarkdown = `# Exported diagrams + +\`\`\`mermaid +flowchart LR + A --> B +\`\`\` + +\`\`\`abc +X:1 +T:Export score +M:4/4 +K:C +CDEF GABc| +\`\`\` + +\`\`\`plantuml +@startuml +Alice -> Bob: Hello +@enduml +\`\`\` + +\`\`\`d2 +client -> server +\`\`\` + +\`\`\`graphviz +digraph G { A -> B } +\`\`\` + +\`\`\`vega-lite +{"mark":"bar","data":{"values":[{"x":"A","y":1}]},"encoding":{"x":{"field":"x"},"y":{"field":"y"}}} +\`\`\` + +\`\`\`wavedrom +{"signal":[{"name":"clk","wave":"p..."}]} +\`\`\` + +\`\`\`markmap +# Root +## Branch +\`\`\` + +\`\`\`geojson +{"type":"FeatureCollection","features":[]} +\`\`\` + +\`\`\`topojson +{"type":"Topology","objects":{"sample":{}},"arcs":[]} +\`\`\` + +\`\`\`stl +solid triangle +facet normal 0 0 1 +outer loop +vertex 0 0 0 +vertex 1 0 0 +vertex 0 1 0 +endloop +endfacet +endsolid triangle +\`\`\``; + +async function installMapStubs(page) { + await page.evaluate(() => { + window.L = { + map(node) { + const pane = document.createElement('div'); + pane.className = 'leaflet-map-pane'; + pane.textContent = 'Rendered map'; + node.appendChild(pane); + return { + remove() { pane.remove(); }, + fitBounds() {}, + setView() {}, + invalidateSize() {}, + eachLayer() {}, + attributionControl: { + addAttribution() {}, + removeAttribution() {} + } + }; + }, + tileLayer() { return { addTo() { return this; } }; }, + geoJSON() { + return { + addTo() { return this; }, + getBounds() { return { isValid() { return false; } }; } + }; + } + }; + window.topojson = { + feature() { return { type: 'FeatureCollection', features: [] }; } + }; + }); +} + +const renderedDiagramExpectation = { + theme: 'dark', + mermaid: true, + abc: true, + plantuml: true, + d2: true, + graphviz: true, + vegalite: true, + wavedrom: true, + markmap: true, + geojson: true, + topojson: true, + stl: true, + loadingCount: 0 +}; + test('exports Markdown as a download', async ({ page }) => { await page.locator('#export-md').dispatchEvent('click'); @@ -51,6 +167,53 @@ test('browser PDF export opens options and triggers window.print for vector mode await expect.poll(() => page.evaluate(() => window.__printCalled)).toBeGreaterThan(0); }); +test('vector PDF renders every diagram off-screen without changing the app theme', async ({ page }) => { + await installMapStubs(page); + await setEditorContent(page, allDiagramMarkdown); + await page.evaluate(() => { + document.documentElement.setAttribute('data-theme', 'light'); + window.__vectorExportState = null; + window.print = () => { + const root = document.querySelector('.browser-print-export-snapshot'); + window.__vectorExportState = { + appTheme: document.documentElement.getAttribute('data-theme'), + exportTheme: document.documentElement.getAttribute('data-browser-print-export'), + snapshot: { + theme: root?.getAttribute('data-theme'), + mermaid: Boolean(root?.querySelector('.mermaid svg')), + abc: Boolean(root?.querySelector('.abc-notation svg')), + plantuml: Boolean(root?.querySelector('.plantuml-diagram svg')), + d2: Boolean(root?.querySelector('.d2-diagram svg')), + graphviz: Boolean(root?.querySelector('.graphviz-diagram svg')), + vegalite: Boolean(root?.querySelector('[data-diagram-engine="vegalite"] svg')), + wavedrom: Boolean(root?.querySelector('[data-diagram-engine="wavedrom"] svg')), + markmap: Boolean(root?.querySelector('.markmap-diagram svg')), + geojson: Boolean(root?.querySelector('.geojson-map .leaflet-map-pane')), + topojson: Boolean(root?.querySelector('.topojson-map .leaflet-map-pane')), + stl: Boolean(root?.querySelector('.stl-viewer canvas')), + loadingCount: root?.querySelectorAll('.is-loading, .diagram-status').length + } + }; + window.dispatchEvent(new Event('afterprint')); + }; + }); + + await page.locator('#export-pdf').dispatchEvent('click'); + await page.locator('#pdf-export-theme-card-dark').click(); + await page.locator('#pdf-export-confirm').click(); + + await expect.poll(() => page.evaluate(() => window.__vectorExportState), { timeout: 20_000 }).toMatchObject({ + appTheme: 'light', + exportTheme: 'dark', + snapshot: renderedDiagramExpectation + }); + await expect.poll(() => page.evaluate(() => ({ + appTheme: document.documentElement.getAttribute('data-theme'), + exportTheme: document.documentElement.getAttribute('data-browser-print-export'), + snapshots: document.querySelectorAll('.browser-print-export-snapshot').length + }))).toEqual({ appTheme: 'light', exportTheme: null, snapshots: 0 }); +}); + test('PNG export produces an image download with a mocked local canvas renderer', async ({ page }) => { await page.locator('#export-png').dispatchEvent('click'); await expect(page.locator('#png-export-modal')).toHaveClass(/is-visible/); @@ -62,6 +225,51 @@ test('PNG export produces an image download with a mocked local canvas renderer' }); }); +test('PNG and raster PDF captures contain every rendered diagram', async ({ page }) => { + await installMapStubs(page); + await setEditorContent(page, allDiagramMarkdown); + await page.evaluate(() => { + window.__diagramCaptureStates = []; + window.html2canvas = async root => { + window.__diagramCaptureStates.push({ + theme: root.getAttribute('data-theme'), + mermaid: Boolean(root.querySelector('.mermaid svg')), + abc: Boolean(root.querySelector('.abc-notation svg')), + plantuml: Boolean(root.querySelector('.plantuml-diagram svg')), + d2: Boolean(root.querySelector('.d2-diagram svg')), + graphviz: Boolean(root.querySelector('.graphviz-diagram svg')), + vegalite: Boolean(root.querySelector('[data-diagram-engine="vegalite"] svg')), + wavedrom: Boolean(root.querySelector('[data-diagram-engine="wavedrom"] svg')), + markmap: Boolean(root.querySelector('.markmap-diagram svg')), + geojson: Boolean(root.querySelector('.geojson-map .leaflet-map-pane')), + topojson: Boolean(root.querySelector('.topojson-map .leaflet-map-pane')), + stl: Boolean(root.querySelector('.stl-viewer canvas')), + loadingCount: root.querySelectorAll('.is-loading, .diagram-status').length + }); + const canvas = document.createElement('canvas'); + canvas.width = 1200; + canvas.height = 900; + return canvas; + }; + }); + + await page.locator('#export-png').dispatchEvent('click'); + await page.locator('#png-export-theme-card-dark').click(); + await page.locator('#png-export-confirm').click(); + await expect.poll(() => page.evaluate(() => window.__savedFiles.some(file => file.name.endsWith('.png'))), { timeout: 20_000 }).toBe(true); + + await page.locator('#export-pdf').dispatchEvent('click'); + await page.locator('#pdf-export-card-raster').click(); + await page.locator('#pdf-export-theme-card-dark').click(); + await page.locator('#pdf-export-confirm').click(); + await expect.poll(() => page.evaluate(() => window.__savedFiles.some(file => file.name.endsWith('.pdf'))), { timeout: 20_000 }).toBe(true); + + await expect.poll(() => page.evaluate(() => window.__diagramCaptureStates), { timeout: 20_000 }).toEqual([ + renderedDiagramExpectation, + renderedDiagramExpectation + ]); +}); + test('export modals use compact segmented theme toggles and restore previous selections', async ({ page }) => { // Test HTML Export Modal await page.locator('#export-html').dispatchEvent('click'); diff --git a/tests/helpers/app.js b/tests/helpers/app.js index 07d67c15..3653ac3a 100644 --- a/tests/helpers/app.js +++ b/tests/helpers/app.js @@ -523,6 +523,27 @@ async function stubExportLibraries(page) { ctx.fillText('PNG export test', 20, 40); return canvas; }; + window.jspdf = { + jsPDF: class { + constructor() { + this.internal = { + pageSize: { + getWidth() { return 210; }, + getHeight() { return 297; } + } + }; + } + addPage() {} + setFillColor() {} + rect() {} + addImage() {} + save(name) { + if (Array.isArray(window.__savedFiles)) { + window.__savedFiles.push({ name, type: 'application/pdf', size: 1 }); + } + } + } + }; }); } From 218f407b0c281697406e89f86a1fb21819e01cb9 Mon Sep 17 00:00:00 2001 From: Baivab Sarkar Date: Tue, 1 Sep 2026 18:14:54 +0530 Subject: [PATCH 02/11] fix(export): preserve dark colors in print output --- desktop-app/resources/index.html | 15 +-- desktop-app/resources/styles.css | 194 ++++++++++++++----------------- index.html | 15 +-- styles.css | 194 ++++++++++++++----------------- tests/e2e/export.spec.js | 67 +++++++++++ tests/helpers/app.js | 16 ++- 6 files changed, 261 insertions(+), 240 deletions(-) diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html index 7372803b..5f93bfc0 100644 --- a/desktop-app/resources/index.html +++ b/desktop-app/resources/index.html @@ -720,10 +720,7 @@

Explorer

-
- Appearance - Remembered -
+ Appearance