@filipc77/cowrite 0.6.20 → 0.6.21

package/dist/bin/cowrite.js

@@ -1197,7 +1197,7 @@ function createPreviewServer(store, projectDir, port, initialFile) {
 // bin/cowrite.ts
 import updateNotifier from "update-notifier";
 import "module";
-var version = true ? "0.6.19" : createRequire(import.meta.url)("../package.json").version;
+var version = true ? "0.6.20" : createRequire(import.meta.url)("../package.json").version;
 var USAGE = `
 cowrite \u2014 Live commenting plugin for coding agent sessions
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipc77/cowrite",
-  "version": "0.6.20",
+  "version": "0.6.21",
   "description": "Live commenting and inline editing plugin for coding agent sessions",
   "type": "module",
   "bin": {

package/ui/modules/markdown-sync.js

@@ -24,38 +24,85 @@ function cancelDebouncedSubmit() {
 }
 
 /**
- * Render mermaid diagrams in the plain-text container (non-markdown files).
- * NEVER modifies ProseMirror DOM — injecting elements there corrupts the
- * doc model and produces "mermaidCopy" artifacts in the serialized markdown.
+ * Render mermaid diagrams.
+ * - Plain-text container: modifies DOM directly (safe, not tracked by ProseMirror).
+ * - ProseMirror (markdown): renders into an overlay container OUTSIDE the editor
+ *   to avoid corrupting the doc model. Original code blocks are hidden via CSS.
  */
 async function renderMermaidDiagrams() {
   if (!window.__mermaid) return;
   const fileContentEl = $('#fileContent');
-  // Only process plain-text container — never touch ProseMirror DOM
-  const container = fileContentEl.querySelector('.plain-text-container');
-  if (!container) return;
-  const blocks = container.querySelectorAll('pre code.language-mermaid');
-  if (blocks.length === 0) return;
 
-  const containers = [];
-  for (const code of blocks) {
+  // --- Plain-text container (non-markdown files) ---
+  const plainContainer = fileContentEl.querySelector('.plain-text-container');
+  if (plainContainer) {
+    const blocks = plainContainer.querySelectorAll('pre code.language-mermaid');
+    const containers = [];
+    for (const code of blocks) {
+      const pre = code.parentElement;
+      if (!pre) continue;
+      if (!pre.parentElement?.classList.contains('mermaid-container')) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'mermaid-container';
+        pre.parentElement.insertBefore(wrapper, pre);
+        wrapper.appendChild(pre);
+      }
+      pre.classList.add('mermaid');
+      containers.push(pre);
+    }
+    if (containers.length > 0) {
+      try { await window.__mermaid.run({ nodes: containers }); }
+      catch (err) { console.error('Mermaid rendering failed:', err); }
+    }
+    return;
+  }
+
+  // --- ProseMirror (markdown files) ---
+  // Render into an overlay container OUTSIDE ProseMirror to avoid DOM corruption.
+  const proseMirror = fileContentEl.querySelector('.ProseMirror');
+  if (!proseMirror) return;
+
+  // Remove old overlay
+  const oldOverlay = fileContentEl.querySelector('.mermaid-overlay');
+  if (oldOverlay) oldOverlay.remove();
+
+  const codeBlocks = proseMirror.querySelectorAll('pre code.language-mermaid');
+  if (codeBlocks.length === 0) {
+    fileContentEl.classList.remove('has-mermaid-overlays');
+    return;
+  }
+
+  // Create overlay container as sibling of ProseMirror (not inside it)
+  const overlay = document.createElement('div');
+  overlay.className = 'mermaid-overlay';
+  fileContentEl.appendChild(overlay);
+  fileContentEl.classList.add('has-mermaid-overlays');
+
+  const renderTargets = [];
+  for (const code of codeBlocks) {
     const pre = code.parentElement;
     if (!pre) continue;
-    if (!pre.parentElement?.classList.contains('mermaid-container')) {
-      const wrapper = document.createElement('div');
-      wrapper.className = 'mermaid-container';
-      pre.parentElement.insertBefore(wrapper, pre);
-      wrapper.appendChild(pre);
-    }
-    pre.classList.add('mermaid');
-    containers.push(pre);
+
+    // Get position of the code block relative to fileContent
+    const preRect = pre.getBoundingClientRect();
+    const parentRect = fileContentEl.getBoundingClientRect();
+    const top = preRect.top - parentRect.top + fileContentEl.scrollTop;
+    const left = preRect.left - parentRect.left;
+
+    const renderDiv = document.createElement('div');
+    renderDiv.className = 'mermaid mermaid-overlay-item';
+    renderDiv.textContent = code.textContent;
+    renderDiv.style.position = 'absolute';
+    renderDiv.style.top = `${top}px`;
+    renderDiv.style.left = `${left}px`;
+    renderDiv.style.width = `${preRect.width}px`;
+    overlay.appendChild(renderDiv);
+    renderTargets.push(renderDiv);
   }
-  if (containers.length === 0) return;
 
-  try {
-    await window.__mermaid.run({ nodes: containers });
-  } catch (err) {
-    console.error('Mermaid rendering failed:', err);
+  if (renderTargets.length > 0) {
+    try { await window.__mermaid.run({ nodes: renderTargets }); }
+    catch (err) { console.error('Mermaid rendering failed:', err); }
   }
 }
 

package/ui/styles.css

@@ -1160,6 +1160,36 @@ body.sidebar-resizing {
   height: auto;
 }
 
+/* Mermaid overlay for ProseMirror (renders outside editor to avoid DOM corruption) */
+.mermaid-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.mermaid-overlay-item {
+  pointer-events: auto;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.mermaid-overlay-item svg {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Hide original mermaid code blocks when overlays are rendered */
+.has-mermaid-overlays .ProseMirror pre:has(code.language-mermaid) {
+  visibility: hidden;
+}
+
 /* ---- Highlight popover ---- */
 .highlight-popover {
   position: fixed;