Skip to content

Commit 533e03b

Browse files
ThisIs-DeveloperThisIs-Developer
committed
perf(theme): restore original main branch instant theme changing code with raw source preservation
1 parent 2257f22 commit 533e03b

4 files changed

Lines changed: 76 additions & 140 deletions

File tree

‎desktop-app/resources/js/script.js‎

Lines changed: 38 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5530,66 +5530,47 @@ document.addEventListener("DOMContentLoaded", function () {
55305530
// CSS custom properties handle all other theme transitions automatically.
55315531
// PERF-002: Guard mermaid re-render — skip if not loaded yet
55325532
if (typeof mermaid !== 'undefined') {
5533-
const mermaidNodes = markdownPreview.querySelectorAll('.mermaid');
5534-
if (mermaidNodes.length > 0) {
5535-
// Smoothly fade out all diagrams before starting the re-render process
5536-
mermaidNodes.forEach(function(node) {
5537-
const container = node.closest('.mermaid-container');
5538-
if (container) {
5539-
container.classList.add('theme-switching');
5540-
}
5541-
});
5542-
}
5543-
5544-
if (_mermaidThemeReinitTimeout) {
5545-
clearTimeout(_mermaidThemeReinitTimeout);
5546-
}
5547-
5548-
// Wait 200ms for the fade-out animation to complete, then re-render in the background
5549-
_mermaidThemeReinitTimeout = setTimeout(function() {
5550-
initMermaid(true); // Force re-init with new theme
5551-
try {
5552-
if (mermaidNodes.length > 0) {
5533+
initMermaid(true); // Force re-init with new theme
5534+
try {
5535+
const mermaidNodes = markdownPreview.querySelectorAll('.mermaid');
5536+
if (mermaidNodes.length > 0) {
5537+
// Clear existing rendered Mermaid SVGs and re-render with new theme
5538+
mermaidNodes.forEach(function(node) {
55535539
// Restore original diagram code to prevent parsing already-rendered SVG as source
5554-
mermaidNodes.forEach(function(node) {
5555-
const originalCode = node.getAttribute('data-original-code');
5556-
if (originalCode) {
5557-
const decodedCode = decodeURIComponent(originalCode);
5558-
const escapedCode = decodedCode
5559-
.replace(/&/g, "&")
5560-
.replace(/</g, "&lt;")
5561-
.replace(/>/g, "&gt;");
5562-
node.innerHTML = escapedCode;
5563-
}
5564-
node.removeAttribute('data-processed');
5565-
const container = node.closest('.mermaid-container');
5566-
if (container) {
5567-
const oldToolbar = container.querySelector('.mermaid-toolbar');
5568-
if (oldToolbar) oldToolbar.remove();
5569-
}
5570-
});
5571-
Promise.resolve(mermaid.init(undefined, mermaidNodes))
5572-
.then(function() {
5573-
// Smoothly fade the new diagrams back in
5574-
markdownPreview.querySelectorAll('.mermaid-container.theme-switching').forEach(function(c) {
5575-
c.classList.remove('theme-switching');
5576-
});
5577-
addMermaidToolbars();
5578-
})
5579-
.catch(function(e) {
5580-
console.warn('Mermaid theme re-render failed:', e);
5581-
markdownPreview.querySelectorAll('.mermaid-container.theme-switching').forEach(function(c) {
5582-
c.classList.remove('theme-switching');
5583-
});
5584-
});
5585-
}
5586-
} catch (e) {
5587-
console.warn('Mermaid theme re-render failed:', e);
5588-
markdownPreview.querySelectorAll('.mermaid-container.theme-switching').forEach(function(c) {
5589-
c.classList.remove('theme-switching');
5540+
const originalCode = node.getAttribute('data-original-code');
5541+
if (originalCode) {
5542+
const decodedCode = decodeURIComponent(originalCode);
5543+
const escapedCode = decodedCode
5544+
.replace(/&/g, "&amp;")
5545+
.replace(/</g, "&lt;")
5546+
.replace(/>/g, "&gt;");
5547+
node.innerHTML = escapedCode;
5548+
}
5549+
node.removeAttribute('data-processed');
5550+
const container = node.closest('.mermaid-container');
5551+
if (container) {
5552+
container.classList.add('is-loading');
5553+
const oldToolbar = container.querySelector('.mermaid-toolbar');
5554+
if (oldToolbar) oldToolbar.remove();
5555+
}
55905556
});
5557+
Promise.resolve(mermaid.init(undefined, mermaidNodes))
5558+
.then(function() {
5559+
markdownPreview.querySelectorAll('.mermaid-container.is-loading').forEach(function(c) {
5560+
c.classList.remove('is-loading');
5561+
});
5562+
addMermaidToolbars();
5563+
})
5564+
.catch(function(e) {
5565+
console.warn('Mermaid theme re-render failed:', e);
5566+
markdownPreview.querySelectorAll('.mermaid-container.is-loading').forEach(function(c) {
5567+
c.classList.remove('is-loading');
5568+
});
5569+
});
55915570
}
5592-
}, 200); // 200ms delay perfectly aligns with our CSS fade transition!
5571+
} catch (e) {
5572+
console.warn('Mermaid theme re-render failed:', e);
5573+
}
55935574
}
55945575
});
55955576

‎desktop-app/resources/styles.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3633,21 +3633,8 @@ html[lang="ko"] .markdown-body h1, html[lang="ko"] .markdown-body h2, html[lang=
36333633
animation: skeleton-shimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
36343634
}
36353635

3636-
/* Smooth fade transitions for Mermaid theme switching */
3637-
.mermaid-container .mermaid {
3638-
transition: opacity 0.2s ease-in-out;
3639-
opacity: 1;
3640-
}
3641-
3642-
.mermaid-container.theme-switching .mermaid {
3643-
opacity: 0 !important;
3644-
}
3645-
36463636
/* Accessibility: respect user's motion preferences */
36473637
@media (prefers-reduced-motion: reduce) {
3648-
.mermaid-container .mermaid {
3649-
transition: none;
3650-
}
36513638
.skeleton-placeholder,
36523639
.skeleton-placeholder::after,
36533640
.mermaid-container.is-loading,

‎script.js‎

Lines changed: 38 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5530,66 +5530,47 @@ document.addEventListener("DOMContentLoaded", function () {
55305530
// CSS custom properties handle all other theme transitions automatically.
55315531
// PERF-002: Guard mermaid re-render — skip if not loaded yet
55325532
if (typeof mermaid !== 'undefined') {
5533-
const mermaidNodes = markdownPreview.querySelectorAll('.mermaid');
5534-
if (mermaidNodes.length > 0) {
5535-
// Smoothly fade out all diagrams before starting the re-render process
5536-
mermaidNodes.forEach(function(node) {
5537-
const container = node.closest('.mermaid-container');
5538-
if (container) {
5539-
container.classList.add('theme-switching');
5540-
}
5541-
});
5542-
}
5543-
5544-
if (_mermaidThemeReinitTimeout) {
5545-
clearTimeout(_mermaidThemeReinitTimeout);
5546-
}
5547-
5548-
// Wait 200ms for the fade-out animation to complete, then re-render in the background
5549-
_mermaidThemeReinitTimeout = setTimeout(function() {
5550-
initMermaid(true); // Force re-init with new theme
5551-
try {
5552-
if (mermaidNodes.length > 0) {
5533+
initMermaid(true); // Force re-init with new theme
5534+
try {
5535+
const mermaidNodes = markdownPreview.querySelectorAll('.mermaid');
5536+
if (mermaidNodes.length > 0) {
5537+
// Clear existing rendered Mermaid SVGs and re-render with new theme
5538+
mermaidNodes.forEach(function(node) {
55535539
// Restore original diagram code to prevent parsing already-rendered SVG as source
5554-
mermaidNodes.forEach(function(node) {
5555-
const originalCode = node.getAttribute('data-original-code');
5556-
if (originalCode) {
5557-
const decodedCode = decodeURIComponent(originalCode);
5558-
const escapedCode = decodedCode
5559-
.replace(/&/g, "&amp;")
5560-
.replace(/</g, "&lt;")
5561-
.replace(/>/g, "&gt;");
5562-
node.innerHTML = escapedCode;
5563-
}
5564-
node.removeAttribute('data-processed');
5565-
const container = node.closest('.mermaid-container');
5566-
if (container) {
5567-
const oldToolbar = container.querySelector('.mermaid-toolbar');
5568-
if (oldToolbar) oldToolbar.remove();
5569-
}
5570-
});
5571-
Promise.resolve(mermaid.init(undefined, mermaidNodes))
5572-
.then(function() {
5573-
// Smoothly fade the new diagrams back in
5574-
markdownPreview.querySelectorAll('.mermaid-container.theme-switching').forEach(function(c) {
5575-
c.classList.remove('theme-switching');
5576-
});
5577-
addMermaidToolbars();
5578-
})
5579-
.catch(function(e) {
5580-
console.warn('Mermaid theme re-render failed:', e);
5581-
markdownPreview.querySelectorAll('.mermaid-container.theme-switching').forEach(function(c) {
5582-
c.classList.remove('theme-switching');
5583-
});
5584-
});
5585-
}
5586-
} catch (e) {
5587-
console.warn('Mermaid theme re-render failed:', e);
5588-
markdownPreview.querySelectorAll('.mermaid-container.theme-switching').forEach(function(c) {
5589-
c.classList.remove('theme-switching');
5540+
const originalCode = node.getAttribute('data-original-code');
5541+
if (originalCode) {
5542+
const decodedCode = decodeURIComponent(originalCode);
5543+
const escapedCode = decodedCode
5544+
.replace(/&/g, "&amp;")
5545+
.replace(/</g, "&lt;")
5546+
.replace(/>/g, "&gt;");
5547+
node.innerHTML = escapedCode;
5548+
}
5549+
node.removeAttribute('data-processed');
5550+
const container = node.closest('.mermaid-container');
5551+
if (container) {
5552+
container.classList.add('is-loading');
5553+
const oldToolbar = container.querySelector('.mermaid-toolbar');
5554+
if (oldToolbar) oldToolbar.remove();
5555+
}
55905556
});
5557+
Promise.resolve(mermaid.init(undefined, mermaidNodes))
5558+
.then(function() {
5559+
markdownPreview.querySelectorAll('.mermaid-container.is-loading').forEach(function(c) {
5560+
c.classList.remove('is-loading');
5561+
});
5562+
addMermaidToolbars();
5563+
})
5564+
.catch(function(e) {
5565+
console.warn('Mermaid theme re-render failed:', e);
5566+
markdownPreview.querySelectorAll('.mermaid-container.is-loading').forEach(function(c) {
5567+
c.classList.remove('is-loading');
5568+
});
5569+
});
55915570
}
5592-
}, 200); // 200ms delay perfectly aligns with our CSS fade transition!
5571+
} catch (e) {
5572+
console.warn('Mermaid theme re-render failed:', e);
5573+
}
55935574
}
55945575
});
55955576

‎styles.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3633,21 +3633,8 @@ html[lang="ko"] .markdown-body h1, html[lang="ko"] .markdown-body h2, html[lang=
36333633
animation: skeleton-shimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
36343634
}
36353635

3636-
/* Smooth fade transitions for Mermaid theme switching */
3637-
.mermaid-container .mermaid {
3638-
transition: opacity 0.2s ease-in-out;
3639-
opacity: 1;
3640-
}
3641-
3642-
.mermaid-container.theme-switching .mermaid {
3643-
opacity: 0 !important;
3644-
}
3645-
36463636
/* Accessibility: respect user's motion preferences */
36473637
@media (prefers-reduced-motion: reduce) {
3648-
.mermaid-container .mermaid {
3649-
transition: none;
3650-
}
36513638
.skeleton-placeholder,
36523639
.skeleton-placeholder::after,
36533640
.mermaid-container.is-loading,

0 commit comments

Comments
 (0)