noteconnection 1.7.0 → 1.8.0

package/dist/src/frontend/reader.js

@@ -9,6 +9,7 @@ class Reader {
         this.contentBox = document.getElementById('reading-content-box');
         this.body = document.getElementById('reading-body');
         this.title = document.getElementById('reading-title');
+        this._touchZoomBoundBody = null;
         
         this.isLocked = true;
         this.currentZoom = 0.5;
@@ -51,14 +52,50 @@ class Reader {
         }
         
         // Touch Gestures (Pinch to Zoom)
-        this.initTouchZoom();
+        this.bindTouchZoomSurface();
     }
-    
-    initTouchZoom() {
+
+    refreshDomRefs() {
+        this.window = document.getElementById('reading-window');
+        this.contentBox = document.getElementById('reading-content-box');
+        this.body = document.getElementById('reading-body');
+        this.title = document.getElementById('reading-title');
+    }
+
+    ensureReaderStructure() {
+        this.refreshDomRefs();
+        if (!this.window || !this.contentBox || !this.title) {
+            throw new Error('Reader shell structure is unavailable in the current document.');
+        }
+
+        const existingBody = document.getElementById('reading-body');
+        const bodyDetached = !!(existingBody && !this.contentBox.contains(existingBody));
+        if (!existingBody || bodyDetached) {
+            const replacementBody = document.createElement('div');
+            replacementBody.id = 'reading-body';
+            replacementBody.className = `reading-body ${this.isLocked ? 'locked' : 'unlocked'}`;
+            replacementBody.style.fontSize = `${this.currentZoom}rem`;
+            this.contentBox.appendChild(replacementBody);
+            this.body = replacementBody;
+        } else {
+            this.body = existingBody;
+        }
+
+        this.bindTouchZoomSurface();
+        return this.body;
+    }
+
+    bindTouchZoomSurface() {
+        const body = this.ensureReaderStructureBodyOnly();
+        if (!body || this._touchZoomBoundBody === body) {
+            return;
+        }
+        this._touchZoomBoundBody = body;
+
         let initialDistance = 0;
         let initialZoom = 1.0;
-        
-        this.body.addEventListener('touchstart', (e) => {
+
+        body.addEventListener('touchstart', (e) => {
             if (e.touches.length === 2) {
                 initialDistance = Math.hypot(
                     e.touches[0].pageX - e.touches[1].pageX,
@@ -69,7 +106,7 @@ class Reader {
             }
         }, { passive: false });
 
-        this.body.addEventListener('touchmove', (e) => {
+        body.addEventListener('touchmove', (e) => {
             if (e.touches.length === 2) {
                 const currentDistance = Math.hypot(
                     e.touches[0].pageX - e.touches[1].pageX,
@@ -89,14 +126,158 @@ class Reader {
             }
         }, { passive: false });
 
-        this.body.addEventListener('touchend', (e) => {
+        body.addEventListener('touchend', (e) => {
             if (e.touches.length < 2) {
                 initialDistance = 0;
             }
         });
     }
 
+    ensureReaderStructureBodyOnly() {
+        this.refreshDomRefs();
+        return this.body || null;
+    }
+
+    isMermaidErrorArtifactText(text) {
+        const normalized = String(text || '').toLowerCase();
+        if (!normalized) {
+            return false;
+        }
+        return (
+            normalized.includes('syntax error in text') ||
+            normalized.includes('lexical error on line') ||
+            normalized.includes('parse error on line') ||
+            normalized.includes('mermaid version') ||
+            normalized.includes('diagram syntax error')
+        );
+    }
+
+    resolveMermaidErrorArtifactHost(node) {
+        if (!node || typeof node.closest !== 'function') {
+            return node;
+        }
+        return (
+            node.closest('.mermaid-render-host-offscreen') ||
+            node.closest('.mermaid') ||
+            node.closest('.mermaid-render-failed') ||
+            node.closest('.reader-block') ||
+            node.closest('svg') ||
+            node
+        );
+    }
+
+    isProtectedMermaidSuppressionHost(host) {
+        if (!host || host.nodeType !== Node.ELEMENT_NODE) {
+            return true;
+        }
+        return (
+            host === document.body ||
+            host === document.documentElement ||
+            host === document.head ||
+            host.id === 'graph-wrapper' ||
+            host.id === 'path-container' ||
+            host.id === 'reading-window' ||
+            host.id === 'reading-content-box' ||
+            host.id === 'reading-body'
+        );
+    }
+
+    collectMermaidErrorArtifactHosts(root) {
+        const hosts = [];
+        const hostSet = new Set();
+        const candidates = [];
+        if (!root) {
+            return hosts;
+        }
+        if (
+            root.nodeType === Node.ELEMENT_NODE &&
+            root !== document.body &&
+            root !== document.documentElement &&
+            root !== document.head
+        ) {
+            candidates.push(root);
+        }
+        if (typeof root.querySelectorAll === 'function') {
+            root.querySelectorAll('svg, .mermaid, div, section, article, aside, img, foreignObject').forEach((node) => {
+                candidates.push(node);
+            });
+        }
+        candidates.forEach((candidate) => {
+            if (!candidate || candidate.nodeType !== Node.ELEMENT_NODE) {
+                return;
+            }
+            const text = String(
+                candidate.textContent ||
+                candidate.getAttribute?.('alt') ||
+                candidate.getAttribute?.('aria-label') ||
+                ''
+            ).trim();
+            const hasErrorClass = Boolean(
+                candidate.classList?.contains('error-icon') ||
+                candidate.querySelector?.('.error-icon')
+            );
+            if (!hasErrorClass && !this.isMermaidErrorArtifactText(text)) {
+                return;
+            }
+            const host = this.resolveMermaidErrorArtifactHost(candidate);
+            if (!host || hostSet.has(host) || this.isProtectedMermaidSuppressionHost(host)) {
+                return;
+            }
+            hostSet.add(host);
+            hosts.push(host);
+        });
+        return hosts;
+    }
+
+    suppressLeakedMermaidErrorArtifacts(options = {}) {
+        const root = options.root || document.body;
+        const preserveNode = options.preserveNode || null;
+        const hosts = this.collectMermaidErrorArtifactHosts(root);
+        hosts.forEach((host) => {
+            if (!host || host.closest?.('.mermaid-render-failed')) {
+                return;
+            }
+            if (preserveNode && (host === preserveNode || preserveNode.contains(host) || host.contains(preserveNode))) {
+                return;
+            }
+            if (host.parentNode) {
+                host.parentNode.removeChild(host);
+            } else if (host.style) {
+                host.style.display = 'none';
+            }
+        });
+        return hosts.length;
+    }
+
+    createOffscreenMermaidRenderHost(widthHint) {
+        const hostWidth = Math.max(480, Number(widthHint) || 960);
+        const host = document.createElement('div');
+        host.className = 'mermaid-render-host-offscreen';
+        host.style.position = 'fixed';
+        host.style.left = '-20000px';
+        host.style.top = '0';
+        host.style.width = String(hostWidth) + 'px';
+        host.style.minWidth = String(hostWidth) + 'px';
+        host.style.height = 'auto';
+        host.style.overflow = 'visible';
+        host.style.opacity = '0';
+        host.style.pointerEvents = 'none';
+        host.style.background = 'transparent';
+        host.style.fontFamily = '"Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", sans-serif';
+        const mountRoot = (
+            (this.window && this.window.ownerDocument && this.window.ownerDocument.body) ||
+            document.body ||
+            document.documentElement
+        );
+        if (!mountRoot || typeof mountRoot.appendChild !== 'function') {
+            throw new Error('Reader Mermaid offscreen host mount root is unavailable.');
+        }
+        mountRoot.appendChild(host);
+        return host;
+    }
+
     async open(node) {
+        this.ensureReaderStructure();
         const nodeLike = this.normalizeNodeInput(node);
         this.title.innerText = nodeLike.label;
 
@@ -125,6 +306,13 @@ class Reader {
         let rendered = false;
         if (filePath) {
             rendered = await this.tryRenderViaMarkdownProtocol(nodeLike, filePath, resolvedTarget, sessionId);
+            if (rendered && this.isReaderBodyVisiblyEmpty()) {
+                console.warn('[Reader] Markdown protocol path completed without visible content. Falling back to raw markdown render.', {
+                    nodeId: nodeLike.id,
+                    filePath,
+                });
+                rendered = false;
+            }
         }
         if (!rendered) {
             const rawContent = await this.loadRawContentFallback(nodeLike);
@@ -140,7 +328,7 @@ class Reader {
 
     normalizeNodeInput(nodeLike) {
         if (typeof nodeLike === 'string') {
-            return {
+            nodeLike = {
                 id: nodeLike,
                 label: nodeLike,
                 content: '',
@@ -149,15 +337,41 @@ class Reader {
         }
         const safeNode = (nodeLike && typeof nodeLike === 'object') ? nodeLike : {};
         const nodeId = String(safeNode.id || safeNode.label || 'unknown-node');
+        const hydratedNode = this.lookupNodeDataById(nodeId);
+        const hydratedMetadata = (hydratedNode && hydratedNode.metadata && typeof hydratedNode.metadata === 'object')
+            ? hydratedNode.metadata
+            : {};
+        const safeMetadata = (safeNode.metadata && typeof safeNode.metadata === 'object') ? safeNode.metadata : {};
         return {
+            ...(hydratedNode && typeof hydratedNode === 'object' ? hydratedNode : {}),
             ...safeNode,
             id: nodeId,
-            label: String(safeNode.label || nodeId),
+            label: String(safeNode.label || hydratedNode?.label || nodeId),
             content: typeof safeNode.content === 'string' ? safeNode.content : '',
-            metadata: (safeNode.metadata && typeof safeNode.metadata === 'object') ? safeNode.metadata : {},
+            metadata: {
+                ...hydratedMetadata,
+                ...safeMetadata,
+            },
         };
     }
 
+    lookupNodeDataById(nodeId) {
+        const normalizedNodeId = String(nodeId || '').trim();
+        if (!normalizedNodeId) {
+            return null;
+        }
+        const sourceData = (typeof graphData !== 'undefined') ? graphData : window.graphData;
+        if (!sourceData || !Array.isArray(sourceData.nodes)) {
+            return null;
+        }
+        const matchedNode = sourceData.nodes.find((item) => (
+            item &&
+            (String(item.id || '').trim() === normalizedNodeId ||
+             String(item.label || '').trim() === normalizedNodeId)
+        ));
+        return matchedNode && typeof matchedNode === 'object' ? matchedNode : null;
+    }
+
     extractNodeFilePath(nodeLike) {
         if (!nodeLike || typeof nodeLike !== 'object') return '';
         const metadata = (nodeLike.metadata && typeof nodeLike.metadata === 'object') ? nodeLike.metadata : {};
@@ -166,6 +380,16 @@ class Reader {
         return String(nodeLike.filepath || nodeLike.filePath || '').trim();
     }
 
+    isReaderBodyVisiblyEmpty() {
+        if (!this.body) {
+            return true;
+        }
+        return (
+            this.body.children.length === 0 &&
+            String(this.body.textContent || '').trim().length === 0
+        );
+    }
+
     getRuntimeBaseUrl() {
         if (window.NoteConnectionRuntime && typeof window.NoteConnectionRuntime.getBaseUrl === 'function') {
             return window.NoteConnectionRuntime.getBaseUrl();
@@ -231,6 +455,89 @@ class Reader {
         });
     }
 
+    normalizeMermaidDefinition(source) {
+        if (window.pathModules && window.pathModules.utils && typeof window.pathModules.utils.normalizeBridgeMermaidDefinition === 'function') {
+            return window.pathModules.utils.normalizeBridgeMermaidDefinition(source);
+        }
+        return String(source || '').trim();
+    }
+
+    getMermaidDefinitionCandidates(source) {
+        const candidates = [];
+        const normalized = this.normalizeMermaidDefinition(source);
+        const raw = String(source || '').replace(/\r\n?/g, '\n').trim();
+        [normalized, raw].forEach((candidate) => {
+            const next = String(candidate || '').trim();
+            if (!next || candidates.includes(next)) {
+                return;
+            }
+            candidates.push(next);
+        });
+        return candidates;
+    }
+
+    async canParseMermaidDefinition(definition) {
+        if (!window.mermaid || typeof mermaid.parse !== 'function') {
+            return true;
+        }
+        try {
+            await mermaid.parse(definition);
+            return true;
+        } catch (_error) {
+            return false;
+        }
+    }
+
+    isMermaidErrorSvgMarkup(markup) {
+        const text = String(markup || '').toLowerCase();
+        if (!text) {
+            return false;
+        }
+        return (
+            text.includes('syntax error in text') ||
+            text.includes('lexical error on line') ||
+            text.includes('parse error on line') ||
+            text.includes('mermaid version') ||
+            text.includes('class="error-icon"') ||
+            text.includes('id="error-icon"')
+        );
+    }
+
+    renderCompactMermaidFailure(wrapper, error, source) {
+        wrapper.classList.add('mermaid-render-failed');
+        wrapper.innerHTML = '';
+
+        const notice = document.createElement('div');
+        notice.className = 'mermaid-render-notice';
+
+        const title = document.createElement('div');
+        title.className = 'mermaid-render-notice-title';
+        title.textContent = 'Mermaid diagram unavailable.';
+        notice.appendChild(title);
+
+        const summary = document.createElement('div');
+        summary.className = 'mermaid-render-notice-summary';
+        summary.textContent = 'Rendering failed in the current runtime. Details are available on demand.';
+        notice.appendChild(summary);
+
+        const details = document.createElement('details');
+        details.className = 'mermaid-render-notice-details';
+
+        const detailsSummary = document.createElement('summary');
+        detailsSummary.textContent = 'Render details';
+        details.appendChild(detailsSummary);
+
+        const detailText = document.createElement('pre');
+        detailText.className = 'mermaid-render-notice-code';
+        const errorMessage = String(error && error.message ? error.message : error || 'Unknown error').trim();
+        const sourceSnippet = String(source || '').trim().slice(0, 320);
+        detailText.textContent = errorMessage + (sourceSnippet ? `\n\n${sourceSnippet}` : '');
+        details.appendChild(detailText);
+
+        notice.appendChild(details);
+        wrapper.appendChild(notice);
+    }
+
     async tryRenderViaMarkdownProtocol(nodeLike, filePath, resolvedTarget, sessionId) {
         const config = this.getReadingProtocolConfig();
         if (String(config.markdownEngine || 'auto').toLowerCase() === 'legacy') {
@@ -312,13 +619,14 @@ class Reader {
 
     cleanupProtocolState() {
         this._protocolRenderState = null;
-        if (this._protocolScrollHandler) {
+        if (this._protocolScrollHandler && this.body) {
             this.body.removeEventListener('scroll', this._protocolScrollHandler);
             this._protocolScrollHandler = null;
         }
     }
 
     async renderProtocolBlocks(blocks, position, currentFilePath, sessionId) {
+        this.ensureReaderStructure();
         if (!Array.isArray(blocks) || blocks.length === 0) {
             return;
         }
@@ -731,6 +1039,7 @@ class Reader {
     }
 
     async renderRawMarkdown(rawContent, currentFilePath, sessionId) {
+        this.ensureReaderStructure();
         const sanitizedMarkdown = this.autoFixInlineMermaidFenceAfterBlockMath(
             String(rawContent || '*No content available.*')
         );
@@ -767,6 +1076,8 @@ class Reader {
             this._mermaidInitialized = true;
         }
 
+        this.suppressLeakedMermaidErrorArtifacts({ root: document.body });
+
         let mermaidBlocks = Array.from(container.querySelectorAll('pre code.language-mermaid, pre code.lang-mermaid'));
         if (mermaidBlocks.length === 0 && container.dataset && container.dataset.codeLanguage === 'mermaid') {
             const fallbackBlock = container.querySelector('pre code');
@@ -778,7 +1089,8 @@ class Reader {
         for (const block of mermaidBlocks) {
             const txt = document.createElement('textarea');
             txt.innerHTML = block.innerHTML;
-            const graphDefinition = txt.value;
+            const candidateDefinitions = this.getMermaidDefinitionCandidates(txt.value);
+            const graphDefinition = candidateDefinitions[0] || '';
             const parentPre = block.parentElement;
             if (!parentPre || !parentPre.parentNode) continue;
 
@@ -794,36 +1106,72 @@ class Reader {
             const blockId = section && section.dataset ? String(section.dataset.blockId || '').trim() : '';
 
             if (hasFrontendMermaid) {
-                try {
-                    const renderedResult = await mermaid.render(renderId, graphDefinition);
-                    if (renderedResult && typeof renderedResult.svg === 'string' && renderedResult.svg.trim()) {
-                        wrapper.innerHTML = renderedResult.svg;
-                        rendered = true;
-                        renderSource = 'frontend-render';
-                        this._mermaidRenderStats.frontendRender += 1;
+                for (let candidateIndex = 0; candidateIndex < candidateDefinitions.length; candidateIndex += 1) {
+                    const candidate = candidateDefinitions[candidateIndex];
+                    const offscreenHost = this.createOffscreenMermaidRenderHost(
+                        wrapper.clientWidth || parentPre.clientWidth || container.clientWidth || 960
+                    );
+                    try {
+                        wrapper.innerHTML = '';
+                        const renderedResult = await mermaid.render(`${renderId}-${candidateIndex}`, candidate, offscreenHost);
+                        if (renderedResult && typeof renderedResult.svg === 'string' && renderedResult.svg.trim()) {
+                            if (this.isMermaidErrorSvgMarkup(renderedResult.svg)) {
+                                throw new Error('Mermaid frontend renderer returned an error SVG instead of a diagram.');
+                            }
+                            wrapper.innerHTML = renderedResult.svg;
+                        }
+                        if (/<svg[\s>]/i.test(String(wrapper.innerHTML || ''))) {
+                            rendered = true;
+                            renderSource = 'frontend-render';
+                            this._mermaidRenderStats.frontendRender += 1;
+                            break;
+                        }
+                    } catch (error) {
+                        renderErrors.push(error);
+                        wrapper.innerHTML = '';
+                        this.suppressLeakedMermaidErrorArtifacts({
+                            root: document.body,
+                            preserveNode: wrapper,
+                        });
+                    } finally {
+                        offscreenHost.remove();
                     }
-                } catch (error) {
-                    renderErrors.push(error);
                 }
             } else {
                 renderErrors.push(new Error('Mermaid runtime is unavailable in current webview.'));
             }
 
             if (!rendered && hasFrontendMermaid) {
-                try {
-                    wrapper.textContent = graphDefinition;
-                    await mermaid.run({ nodes: [wrapper] });
-                    rendered = /<svg[\s>]/i.test(String(wrapper.innerHTML || ''));
-                    if (rendered) {
-                        renderSource = 'frontend-run';
-                        this._mermaidRenderStats.frontendRun += 1;
+                for (let candidateIndex = 0; candidateIndex < candidateDefinitions.length; candidateIndex += 1) {
+                    const candidate = candidateDefinitions[candidateIndex];
+                    const canParse = await this.canParseMermaidDefinition(candidate);
+                    if (!canParse) {
+                        continue;
+                    }
+                    try {
+                        wrapper.innerHTML = '';
+                        wrapper.textContent = candidate;
+                        await mermaid.run({ nodes: [wrapper] });
+                        rendered = /<svg[\s>]/i.test(String(wrapper.innerHTML || '')) &&
+                            !this.isMermaidErrorSvgMarkup(String(wrapper.innerHTML || ''));
+                        if (rendered) {
+                            renderSource = 'frontend-run';
+                            this._mermaidRenderStats.frontendRun += 1;
+                            break;
+                        }
+                    } catch (error) {
+                        renderErrors.push(error);
+                        wrapper.innerHTML = '';
+                        this.suppressLeakedMermaidErrorArtifacts({
+                            root: document.body,
+                            preserveNode: wrapper,
+                        });
                     }
-                } catch (error) {
-                    renderErrors.push(error);
                 }
             }
 
             if (!rendered) {
+                wrapper.innerHTML = '';
                 const backendRendered = await this.renderMermaidViaBackend(graphDefinition);
                 if (backendRendered && backendRendered.pngBase64) {
                     const altRenderer = backendRendered.renderer ? ` (${backendRendered.renderer})` : '';
@@ -836,7 +1184,7 @@ class Reader {
 
             if (!rendered) {
                 const lastError = renderErrors.length > 0 ? renderErrors[renderErrors.length - 1] : null;
-                wrapper.innerText = `Mermaid render error: ${String(lastError && lastError.message ? lastError.message : 'Unknown error')}`;
+                this.renderCompactMermaidFailure(wrapper, lastError, graphDefinition);
                 if (lastError) {
                     console.error('Mermaid error:', lastError);
                 }
@@ -844,6 +1192,11 @@ class Reader {
                 this._mermaidRenderStats.failed += 1;
             }
 
+            this.suppressLeakedMermaidErrorArtifacts({
+                root: document.body,
+                preserveNode: wrapper,
+            });
+
             if (renderSource) {
                 wrapper.dataset.renderSource = renderSource;
                 const blockSuffix = blockId ? ` block=${blockId}` : '';
@@ -859,7 +1212,7 @@ class Reader {
     }
 
     async renderMermaidViaBackend(graphDefinition) {
-        const source = String(graphDefinition || '').trim();
+        const source = this.normalizeMermaidDefinition(graphDefinition || '');
         if (!source) {
             return null;
         }
@@ -892,6 +1245,9 @@ class Reader {
     }
 
     initMermaidZoom() {
+        if (!this.body) {
+            return;
+        }
         const mermaidDivs = this.body.querySelectorAll('.mermaid');
         mermaidDivs.forEach(div => {
             if (div.dataset && div.dataset.readerZoomBound === '1') {
@@ -1066,7 +1422,9 @@ class Reader {
         if (!this._sessionId) this._sessionId = 0;
         this._sessionId += 1;
         this.cleanupProtocolState();
-        this.window.style.display = 'none';
+        if (this.window) {
+            this.window.style.display = 'none';
+        }
     }
 
     toggleLock() {
@@ -1075,6 +1433,7 @@ class Reader {
     }
 
     updateLockState() {
+        this.ensureReaderStructure();
         const btn = document.getElementById('btn-reader-lock');
         const zoomBtns = document.querySelectorAll('#btn-reader-zoom-in, #btn-reader-zoom-out');
         
@@ -1100,6 +1459,7 @@ class Reader {
     }
 
     updateZoom() {
+        this.ensureReaderStructure();
         this.body.style.fontSize = `${this.currentZoom}rem`;
         // Scale images if needed, but CSS 'resize' handles explicit image resizing in unlocked mode.
         // Font size scaling handles text content scaling.