projview 1.1.1 → 1.2.0

package/public/main.js

@@ -8,9 +8,11 @@ import { connectEvents } from './live.js';
 // side-effect modules: each attaches its own listeners on import
 import './links.js';
 import './toc.js';
-import './mermaid.js';
+import { runMermaid } from './mermaid.js';
+import { onThemeChange } from './theme.js';
 import './search.js';
 import './comments.js';
+import './editor.js';
 
 // browser back / forward
 window.addEventListener('hashchange', () => {
@@ -18,6 +20,10 @@ window.addEventListener('hashchange', () => {
   if (p && p !== state.currentPath) openFile(p);   // guard prevents self-trigger loop
 });
 
+// light/dark flip: CSS follows on its own; diagrams are baked SVG, so redraw them
+// in place (no re-fetch, no scroll jump, an open editor is left alone)
+onThemeChange(() => runMermaid({ rerender: true }));
+
 async function boot() {
   await loadTree();
   const hash = decodeURIComponent(location.hash.slice(1));

package/public/mermaid.js

@@ -1,6 +1,7 @@
 /* mermaid rendering (per-diagram, with error cards) + zoom overlay */
 
 import { $, esc } from './dom.js';
+import { currentTheme } from './theme.js';
 
 const mermaid = window.mermaid;   // UMD global, loaded via classic <script> before this module
 const contentEl = $('content');
@@ -9,27 +10,33 @@ const zoomInnerEl = $('zoom-inner');
 
 let mermaidSeq = 0;               // unique id source for mermaid.render
 
-mermaid.initialize({
-  startOnLoad: false,
-  theme: 'dark',
-  securityLevel: 'loose',
-  suppressErrorRendering: true   // we render our own error card; don't inject the default bomb
-});
-
 // Render each .mermaid block individually so one bad diagram can't kill the rest.
-export async function runMermaid() {
+// A block keeps its source in data-src, so it can be re-rendered in place (theme
+// flip) - otherwise blocks that are already rendered are left alone.
+export async function runMermaid({ rerender = false } = {}) {
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: currentTheme() === 'light' ? 'neutral' : 'dark',   // read per render: themes can flip mid-session
+    securityLevel: 'loose',
+    suppressErrorRendering: true   // we render our own error card; don't inject the default bomb
+  });
   const nodes = [...contentEl.querySelectorAll('.mermaid')];
   for (const node of nodes) {
-    const src = node.textContent.trim();
+    if (!node.dataset.src) node.dataset.src = node.textContent.trim();
+    else if (!rerender) continue;
+    const src = node.dataset.src;
+    node.classList.remove('rendered', 'mermaid-error');
     try {
       const { svg, bindFunctions } = await mermaid.render(`pv-mmd-${++mermaidSeq}`, src);
       node.innerHTML = svg;
       bindFunctions?.(node);
       node.classList.add('rendered');
       node.title = 'click to zoom';
-      node.addEventListener('click', () => openZoom(node.querySelector('svg')?.outerHTML || ''));
+      node.onclick = () => openZoom(node.querySelector('svg')?.outerHTML || '');
     } catch (err) {
       node.classList.add('mermaid-error');
+      node.onclick = null;
+      node.title = '';
       node.innerHTML =
         `<div class="diagram-error"><strong>⚠ diagram failed to render</strong>` +
         `<pre class="err-msg">${esc(String(err && err.message ? err.message : err))}</pre>` +

package/public/store.js

@@ -5,5 +5,7 @@ export const state = {
   expanded: new Set(),      // dir paths the user has opened
   treeData: [],             // last tree payload from the server
   rootName: 'projview',     // indexed root's display name
-  writable: false           // can this client create/edit comments? (loopback only)
+  writable: false,          // can this client create/edit comments + files? (loopback only)
+  view: 'rendered',         // md / mmd: 'rendered' or 'raw' - sticks while browsing
+  persistent: false         // does the store keep comments + versions across runs?
 };