cx-viewer 1.0.3 → 1.0.4

package/src/hooks/useMarkdownExport.js

@@ -0,0 +1,146 @@
+import { useRef, useCallback } from 'react';
+import { message } from 'antd';
+import { apiUrl } from '../utils/apiUrl';
+import { t } from '../i18n';
+
+// 共享 markdown 导出动作：4 个 handler（save-as .md / copy / save-as image / save-to-project）
+// 调用者通过 getter 函数传参（每次触发时读最新值，避免闭包陈旧）：
+//   getText()           — 需要导出的 markdown 源文本
+//   getSnapshotTarget() — save-as-image 的 DOM 快照目标，返回 Element
+//   onDone?()           — 每次 handler 完成后调用（通常用于关闭下拉菜单）
+export function useMarkdownExport({ getText, getSnapshotTarget, onDone }) {
+  const savingRef = useRef(false);
+
+  const handleCopy = useCallback((e) => {
+    e?.stopPropagation();
+    const text = getText();
+    if (text == null) return;
+    navigator.clipboard.writeText(text)
+      .then(() => message.success(t('ui.copySuccess')))
+      .catch(() => {});
+    onDone?.();
+  }, [getText, onDone]);
+
+  const handleSaveAs = useCallback(async (e) => {
+    e?.stopPropagation();
+    onDone?.();
+    const text = getText();
+    if (text == null) return;
+    const blob = new Blob([text], { type: 'text/markdown;charset=utf-8' });
+    const defaultName = `content-${new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-')}.md`;
+    if (window.showSaveFilePicker) {
+      try {
+        const handle = await window.showSaveFilePicker({
+          suggestedName: defaultName,
+          types: [{ description: 'Markdown', accept: { 'text/markdown': ['.md'] } }],
+        });
+        const writable = await handle.createWritable();
+        await writable.write(blob);
+        await writable.close();
+        return;
+      } catch (err) {
+        if (err.name === 'AbortError') return;
+      }
+    }
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = defaultName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [getText, onDone]);
+
+  const handleSaveAsImage = useCallback((e) => {
+    e?.stopPropagation();
+    onDone?.();
+    if (savingRef.current) return;
+    const target = getSnapshotTarget?.();
+    if (!target) return;
+    savingRef.current = true;
+
+    // 目标元素可能是 overflow-y:auto 的滚动容器（FileContentView 的 .markdownPreview
+    // 就是典型场景），html2canvas 读 DOM 时会受 CSS overflow/height 裁剪，只抓得到
+    // 视口范围内的内容。这里临时把 height 撑到 scrollHeight、overflow 解到 visible，
+    // 截图完再恢复；scrollTop 先归零保证从头开始，restore 时再写回。
+    // 扩张→截→恢复整条路径都同步；html2canvas 内部虽然是 Promise，但读 DOM 是一次
+    // 性 snapshot（Promise 之前完成），所以等它 resolve/reject 再还原即可。
+    const prev = {
+      height: target.style.height,
+      maxHeight: target.style.maxHeight,
+      overflow: target.style.overflow,
+      overflowY: target.style.overflowY,
+      scrollTop: target.scrollTop,
+    };
+    const needsExpand = target.scrollHeight > target.clientHeight;
+    if (needsExpand) {
+      target.scrollTop = 0;
+      target.style.height = target.scrollHeight + 'px';
+      target.style.maxHeight = 'none';
+      target.style.overflow = 'visible';
+      target.style.overflowY = 'visible';
+    }
+    const restore = () => {
+      if (needsExpand) {
+        target.style.height = prev.height;
+        target.style.maxHeight = prev.maxHeight;
+        target.style.overflow = prev.overflow;
+        target.style.overflowY = prev.overflowY;
+        target.scrollTop = prev.scrollTop;
+      }
+    };
+
+    const isDark = document.documentElement.getAttribute('data-theme') !== 'light';
+    import('html2canvas').then(({ default: html2canvas }) => {
+      html2canvas(target, {
+        backgroundColor: isDark ? '#0a0a0a' : '#ffffff',
+        scale: 2,
+        useCORS: true,
+      }).then(canvas => {
+        restore();
+        canvas.toBlob(blob => {
+          if (!blob) { savingRef.current = false; return; }
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = `content-${new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-')}.png`;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          canvas.width = 0;
+          canvas.height = 0;
+          savingRef.current = false;
+        }, 'image/png');
+      }).catch((err) => { restore(); console.warn('html2canvas render failed:', err); savingRef.current = false; });
+    }).catch((err) => { restore(); console.warn('html2canvas load failed:', err); savingRef.current = false; });
+  }, [getSnapshotTarget, onDone]);
+
+  const handleSaveToProject = useCallback(async (e) => {
+    e?.stopPropagation();
+    onDone?.();
+    const text = getText();
+    if (text == null) return;
+    const defaultName = `content-${new Date().toISOString().slice(0, 19).replace(/[:.]/g, '-')}.md`;
+    const fileName = window.prompt(t('ui.saveToProject.prompt'), defaultName);
+    if (!fileName) return;
+    try {
+      const res = await fetch(apiUrl('/api/file-content'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: fileName, content: text }),
+      });
+      if (res.ok) {
+        message.success(t('ui.saveToProject.success', { name: fileName }));
+      } else {
+        const data = await res.json().catch(() => ({}));
+        message.error(data.error || t('ui.saveFailed'));
+      }
+    } catch (err) {
+      message.error(err.message || t('ui.saveFailed'));
+    }
+  }, [getText, onDone]);
+
+  return { handleCopy, handleSaveAs, handleSaveAsImage, handleSaveToProject };
+}

package/src/hooks/useMermaidRender.js

@@ -0,0 +1,193 @@
+/**
+ * Auto-render Mermaid diagrams via MutationObserver.
+ * Lazily loads mermaid.js on first encounter of a `code.language-mermaid` block.
+ * Call `setupMermaidAutoRender()` once at app init — no per-component changes needed.
+ * Call `reinitializeMermaid()` on theme change to re-render with new colors.
+ */
+import DOMPurify from 'dompurify';
+
+let _mermaidPromise = null;
+let _mermaidInstance = null;
+let _observerStarted = false;
+let _scanTimer = null;
+let _pendingNodes = new Set();
+
+const THEME_DARK = {
+  theme: 'dark',
+  darkMode: true,
+  themeVariables: {
+    darkMode: true,
+    background: '#0d1117',
+    primaryColor: '#1a3a5c',
+    primaryTextColor: '#c9d1d9',
+    primaryBorderColor: '#30363d',
+    lineColor: '#58a6ff',
+    secondaryColor: '#161b22',
+    tertiaryColor: '#0d1117',
+    nodeTextColor: '#c9d1d9',
+    edgeLabelBackground: '#0d1117',
+  },
+};
+
+const THEME_LIGHT = {
+  theme: 'default',
+  darkMode: false,
+  themeVariables: {
+    darkMode: false,
+    background: '#FFFFFF',
+    primaryColor: '#dce8f5',
+    primaryTextColor: '#1a1a1a',
+    primaryBorderColor: '#E0E0E0',
+    lineColor: '#0969DA',
+    secondaryColor: '#F0F0F0',
+    tertiaryColor: '#F5F5F5',
+    nodeTextColor: '#1a1a1a',
+    edgeLabelBackground: '#FFFFFF',
+  },
+};
+
+function getCurrentThemeConfig() {
+  const attr = document.documentElement.getAttribute('data-theme');
+  return attr === 'light' ? THEME_LIGHT : THEME_DARK;
+}
+
+function loadMermaid() {
+  if (_mermaidPromise) return _mermaidPromise;
+  _mermaidPromise = import('mermaid').then(mod => {
+    const m = mod.default;
+    const cfg = getCurrentThemeConfig();
+    m.initialize({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      // mermaid 默认会在 render() 失败时把 "Syntax error" SVG 节点硬塞进 document.body
+      // （见 mermaid-js/mermaid #4358 / #786），专坑 React 应用。开此官方开关后，render 失败
+      // 改为调 removeTempElements() 清临时节点并 re-throw，绝不向 DOM 注入错误图。
+      suppressErrorRendering: true,
+      flowchart: { useMaxWidth: true },
+      ...cfg,
+    });
+    _mermaidInstance = m;
+    return m;
+  }).catch(() => { _mermaidPromise = null; return null; });
+  return _mermaidPromise;
+}
+
+/**
+ * Scan a container for unrendered mermaid code blocks and replace with SVG.
+ * SVG output is sanitized via DOMPurify for defense-in-depth.
+ */
+async function renderMermaidIn(container) {
+  if (!container) return;
+  const codeEls = container.querySelectorAll('code.language-mermaid');
+  if (codeEls.length === 0) return;
+
+  const m = await loadMermaid();
+  if (!m) return;
+
+  for (const code of codeEls) {
+    const pre = code.parentElement;
+    if (!pre || pre.dataset.mermaidRendered) continue;
+    const src = code.textContent;
+    const id = 'mmd-' + Math.random().toString(36).slice(2, 9);
+
+    // 渲染前先校验：parse(suppressErrors) 对非法/半截语法只返回 false，不碰 DOM、不注入任何
+    // 错误节点。非法 → 保留原 <pre> 文本、且不打 rendered 标记，让流式补全后的完整块能重试。
+    // 这是杜绝 mermaid 把 "Syntax error" 错误图写进 document.body 的关键：render() 失败会把
+    // 测量/错误节点遗留在 body 里，而 parse() 不会。
+    let valid = false;
+    try {
+      valid = (await m.parse(src, { suppressErrors: true })) !== false;
+    } catch { valid = false; }
+    if (!valid) continue;
+
+    // 校验通过才真正渲染。先打标避免同一 <pre> 被并发的扫描重复 render。
+    pre.dataset.mermaidRendered = '1';
+    try {
+      const { svg } = await m.render(id, src);
+      const wrapper = document.createElement('div');
+      wrapper.className = 'mermaid-diagram';
+      wrapper.dataset.mermaidSrc = src;
+      wrapper.innerHTML = DOMPurify.sanitize(svg, {
+        USE_PROFILES: { svg: true, svgFilters: true },
+        ADD_TAGS: ['style', 'foreignObject'],
+      });
+      pre.replaceWith(wrapper);
+    } catch {
+      // 校验通过却仍渲染失败（罕见，如 mermaid 不支持的特性）：撤销 rendered 标记以便重试，
+      // 并兜底清掉 mermaid 可能已 append 到 <body> 的孤儿节点（id 或 'd'+id 两种历史写法）。
+      delete pre.dataset.mermaidRendered;
+      document.getElementById(id)?.remove();
+      document.getElementById('d' + id)?.remove();
+    }
+  }
+}
+
+function scheduleScan() {
+  if (_scanTimer) return;
+  _scanTimer = requestAnimationFrame(() => {
+    _scanTimer = null;
+    const nodes = _pendingNodes;
+    _pendingNodes = new Set();
+    for (const node of nodes) {
+      if (node.isConnected) renderMermaidIn(node);
+    }
+  });
+}
+
+/**
+ * Start a global MutationObserver that auto-renders mermaid blocks
+ * whenever new DOM nodes are inserted (e.g. via dangerouslySetInnerHTML).
+ */
+export function setupMermaidAutoRender() {
+  if (_observerStarted || typeof document === 'undefined') return;
+  _observerStarted = true;
+
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.nodeType === 1 && node.querySelector?.('code.language-mermaid')) {
+          _pendingNodes.add(node);
+          scheduleScan();
+          return;
+        }
+      }
+    }
+  });
+
+  const start = () => observer.observe(document.body, { childList: true, subtree: true });
+  if (document.body) start();
+  else document.addEventListener('DOMContentLoaded', start);
+}
+
+/**
+ * Re-initialize mermaid with current theme and re-render all existing diagrams.
+ * Call this from handleThemeColorChange.
+ */
+export async function reinitializeMermaid() {
+  if (!_mermaidInstance) return;
+  const cfg = getCurrentThemeConfig();
+  _mermaidInstance.initialize({
+    startOnLoad: false,
+    securityLevel: 'strict',
+    suppressErrorRendering: true, // 见 loadMermaid 注释：禁止 render 失败时向 DOM 注入错误图
+    flowchart: { useMaxWidth: true },
+    ...cfg,
+  });
+
+  const diagrams = document.querySelectorAll('.mermaid-diagram[data-mermaid-src]');
+  for (const wrapper of diagrams) {
+    const src = wrapper.dataset.mermaidSrc;
+    const id = 'mmd-' + Math.random().toString(36).slice(2, 9);
+    try {
+      const { svg } = await _mermaidInstance.render(id, src);
+      wrapper.innerHTML = DOMPurify.sanitize(svg, {
+        USE_PROFILES: { svg: true, svgFilters: true },
+        ADD_TAGS: ['style', 'foreignObject'],
+      });
+    } catch {
+      // 保留既有 SVG；同时清掉 render 失败可能遗留在 <body> 的孤儿错误节点
+      document.getElementById(id)?.remove();
+      document.getElementById('d' + id)?.remove();
+    }
+  }
+}

package/src/hooks/useProjectAlias.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { getProjectAlias, subscribeToAlias } from '../utils/projectAlias.js';
+
+// React hook for reading + auto-syncing a project's alias.
+//
+// Usage:
+//   const alias = useProjectAlias(projectName); // '' if none / blank projectName
+//
+// Re-reads localStorage and re-subscribes whenever `projectName` changes
+// (cross-project switch). Cross-tab sync via the `storage` event and same-tab
+// sync via projectAlias module's internal EventTarget — both wired in
+// subscribeToAlias.
+//
+// Why a hook (not duplicating the wiring in AppHeader / Mobile / AppBase): the
+// effect logic is identical and prone to drift if copy-pasted; class
+// components can host this via a tiny functional sub-component if they need to.
+export function useProjectAlias(projectName) {
+  const [alias, setAlias] = useState(() => getProjectAlias(projectName));
+
+  useEffect(() => {
+    // Initial read on mount AND on projectName change — covers project switch.
+    setAlias(getProjectAlias(projectName));
+    if (!projectName) return undefined;
+    const off = subscribeToAlias(projectName, (next) => setAlias(next || ''));
+    return off;
+  }, [projectName]);
+
+  return alias;
+}

package/src/hooks/useSessionStoragePersistedSet.js

@@ -0,0 +1,41 @@
+import { useState, useEffect, useRef } from 'react';
+
+// 三处持久化样板（FileExplorer 展开 / MobileFileExplorer 展开 / GitChanges 折叠）此前
+// 各自手写 lazy useState + useEffect persist + firstMountRef + （后补）prevProjectNameRef，
+// GitChanges 修了 "空 → 非空 projectName 异步到达不覆盖" 的 race 但前两处没回流。
+// 抽这个 hook 把三件套统一，新增 caller 自动拿到所有防御。
+//
+// 设计要点：
+// - load(projectName) → Set<string>；save(projectName, set) → void。两个回调由 caller 传
+//   模块级稳定引用（loadExpandedPaths / saveExpandedPaths 之类），避免 effect deps 抖。
+// - **关键不变量**：projectName 从 '' → 非空（API 异步到达）这一跳跳过 rehydrate，保留用户
+//   在 projectName 拿到前的内存操作；save effect 会用新 projectName 自然落盘。真正的
+//   workspace 切换（非空 → 非空 / 非空 → 空）才丢旧 set 重 hydrate。
+// - firstMountRef 跳首跑：lazy useState 已读过 storage，effect 再跑一次 setState 会触发
+//   一次额外 render。
+//
+// 返回 [set, setSet] 跟 useState 同形。class 组件不能用 hook，ChatView 等 class 调用方
+// 需在 componentDidUpdate 内手抄同款守卫逻辑（参见 ChatView.componentDidUpdate）。
+
+export function useSessionStoragePersistedSet({ projectName, load, save }) {
+  const [setVal, setSetVal] = useState(() => load(projectName));
+  const firstMountRef = useRef(true);
+  const prevProjectNameRef = useRef(projectName);
+
+  useEffect(() => {
+    const prev = prevProjectNameRef.current;
+    prevProjectNameRef.current = projectName;
+    if (firstMountRef.current) {
+      firstMountRef.current = false;
+      return;
+    }
+    if (!prev && projectName) return;
+    setSetVal(load(projectName));
+  }, [projectName, load]);
+
+  useEffect(() => {
+    save(projectName, setVal);
+  }, [setVal, projectName, save]);
+
+  return [setVal, setSetVal];
+}