wendang-react 0.6.2 → 0.6.3

package/dist/bindings/yjs.js

@@ -1,5 +1,5 @@
 "use client";
-import { C } from "../chunks/extensions-DMQedgOl.js";
+import { C } from "../chunks/extensions-ByORRoRa.js";
 export {
   C as COLLAB_FIELD
 };

package/dist/chunks/{AnchoredPanel-CSXrveAT.js → AnchoredPanel-Cv4RURwF.js}

@@ -4,7 +4,7 @@ import { useRef, useState, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { a as useContentContext } from "./host-C-V688Rq.js";
 import { p as placeAnchoredPopover } from "./popover-placement-D3xVYdkt.js";
-import { u as useLayer, L as LayerProvider, p as placePanel } from "./index-CqaMYb3A.js";
+import { u as useLayer, L as LayerProvider, p as placePanel } from "./index-DdfMnva8.js";
 function AnchoredPanel({ anchor, onClose, align = "start", prefer = "below", gap = 8, label, role = "dialog", className = "", portal: portalOverride, children, onKeyDown }) {
   const context = useContentContext();
   const portal = typeof portalOverride === "function" ? portalOverride() : portalOverride !== void 0 ? portalOverride : context.portal;

package/dist/chunks/{DocumentExportMenu-DgDXDChd.js → DocumentExportMenu-BrGipZ59.js}

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { b as useContentHost } from "./host-C-V688Rq.js";
-import { W as WSelect } from "./index-CqaMYb3A.js";
+import { W as WSelect } from "./index-DdfMnva8.js";
 const options = [
   { value: "pdf", label: "PDF (.pdf)" },
   { value: "docx", label: "Word (.docx)" },

package/dist/chunks/{MindMapCanvas-I5M1SIyX.js → MindMapCanvas-tkFBBs4g.js}

@@ -11,9 +11,9 @@ import { m as mindCanvasShortcut, s as selectMindTopic } from "./mind-map-input-
 import { b as useContentHost, a as useContentContext } from "./host-C-V688Rq.js";
 import { createPortal } from "react-dom";
 import { u as useLatest } from "./hooks-C53Dp0pr.js";
-import { a as WButton, c as WDialog, W as WSelect, d as WAlert } from "./index-CqaMYb3A.js";
-import { T as TopicLabel, A as AttachmentImage } from "./mind-topic-text-DYQR2Dzf.js";
-import { A as AnchoredPanel } from "./AnchoredPanel-CSXrveAT.js";
+import { a as WButton, c as WDialog, W as WSelect, d as WAlert } from "./index-DdfMnva8.js";
+import { T as TopicLabel, A as AttachmentImage } from "./mind-topic-text-DSyb95vL.js";
+import { A as AnchoredPanel } from "./AnchoredPanel-Cv4RURwF.js";
 function mindMapDrop(model, drawing, id, point, allowSide = true) {
   const source = drawing.nodes.find((t) => t.id === id), root = drawing.nodes.find((t) => t.id === model.rootId);
   if (!source || !root || id === model.rootId) return null;

package/dist/chunks/{MindMapViewer-Nu3nEVHQ.js → MindMapViewer-DJrryb2Y.js}

@@ -4,9 +4,9 @@ import { useState, useEffect, Suspense, useRef, lazy } from "react";
 import { readMindMap, mindMapOutline, MIND_MAP_PALETTE, layoutMindMap, mindRelationPaths } from "wendang/mindmap";
 import { MIND_TOPIC_FONT, mindTopicLineHeight, readableTextColor } from "wendang/shared";
 import { b as useContentHost } from "./host-C-V688Rq.js";
-import { a as WButton } from "./index-CqaMYb3A.js";
-import { T as TopicLabel, A as AttachmentImage } from "./mind-topic-text-DYQR2Dzf.js";
-const Canvas = lazy(() => import("./MindMapCanvas-I5M1SIyX.js").then((module) => ({ default: module.MindMapCanvas })));
+import { a as WButton } from "./index-DdfMnva8.js";
+import { T as TopicLabel, A as AttachmentImage } from "./mind-topic-text-DSyb95vL.js";
+const Canvas = lazy(() => import("./MindMapCanvas-tkFBBs4g.js").then((module) => ({ default: module.MindMapCanvas })));
 function MindMapViewer({ value, modelValue, height, fetchAttachment }) {
   var _a;
   const model = value ?? modelValue;

package/dist/chunks/{SpreadsheetViewer-CLDlnWyM.js → SpreadsheetViewer-DxCxIUx_.js}

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { validateWorkbook } from "wendang/spreadsheet";
 import { p as previewAxes, a as previewMerges, c as columnName, b as cellStyleData, d as cellDisplay, s as safeColor } from "./worksheet-preview-DsDVWxIM.js";
-import { a as WButton } from "./index-CqaMYb3A.js";
+import { a as WButton } from "./index-DdfMnva8.js";
 import { b as useContentHost } from "./host-C-V688Rq.js";
 function SpreadsheetViewer({ value, modelValue, allowExport = false, standalone = false, exportSnapshot, pageId }) {
   const host = useContentHost();

package/dist/chunks/{comment-hint-Coq1laiR.js → comment-hint-B9qcrqvn.js}

@@ -2,8 +2,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { codeLanguageLabel, CODE_LANGUAGES, isKnownCodeLanguage } from "wendang/shared";
-import { a as WButton, W as WSelect, b as WIcon } from "./index-CqaMYb3A.js";
-import { A as AnchoredPanel } from "./AnchoredPanel-CSXrveAT.js";
+import { a as WButton, W as WSelect, b as WIcon } from "./index-DdfMnva8.js";
+import { A as AnchoredPanel } from "./AnchoredPanel-Cv4RURwF.js";
 import { b as useContentHost } from "./host-C-V688Rq.js";
 import { CODE_THEMES, codeLineCount } from "wendang/internal/code-block";
 function CodeToolbar({ text, language, editable, canCopy, display, onLanguage, onDisplay }) {

package/dist/chunks/{extensions-DMQedgOl.js → extensions-ByORRoRa.js}

@@ -22,9 +22,9 @@ import { calloutDOMAttributes, effectiveCallout, CALLOUT_COLORS, CALLOUT_FILLS,
 import { closeHistory } from "@tiptap/pm/history";
 import { yUndoPluginKey, yCursorPlugin } from "@tiptap/y-tiptap";
 import { validCalloutAttrs } from "wendang/internal/callout";
-import { A as AnchoredPanel } from "./AnchoredPanel-CSXrveAT.js";
-import { a as WButton, b as WIcon } from "./index-CqaMYb3A.js";
-import { C as CodeToolbar, s as showCommentHint, h as hideCommentHint } from "./comment-hint-Coq1laiR.js";
+import { A as AnchoredPanel } from "./AnchoredPanel-Cv4RURwF.js";
+import { a as WButton, b as WIcon } from "./index-DdfMnva8.js";
+import { C as CodeToolbar, s as showCommentHint, h as hideCommentHint } from "./comment-hint-B9qcrqvn.js";
 import CodeBlock from "@tiptap/extension-code-block";
 import { codeBlockDisplay, codeLineNumbers, codeBlockClass } from "wendang/internal/code-block";
 import { Node as Node$1, mergeAttributes, Extension } from "@tiptap/core";

package/dist/chunks/{index-CqaMYb3A.js → index-DdfMnva8.js}

@@ -283,6 +283,12 @@ const ICONS = {
     ["path", { d: "m9 11-6 6v3h9l3-3" }],
     ["path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" }]
   ] },
+  "cell-fill": { els: [
+    ["path", { d: "M4 11 11 4l8 8-7 7a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8Z" }],
+    ["path", { d: "m8 3 4 4" }],
+    ["path", { d: "M5 11h13" }],
+    ["path", { d: "M21 14s2 2.2 2 3.5a2 2 0 0 1-4 0C19 16.2 21 14 21 14Z" }]
+  ] },
   // ---------------------------------------------------------------- 表格
   "table-row-plus": { els: [
     ["rect", { x: 3, y: 3, width: 18, height: 9, rx: 2 }],

package/dist/chunks/{mind-topic-text-DYQR2Dzf.js → mind-topic-text-DSyb95vL.js}

@@ -6,7 +6,7 @@ import { a as useContentContext, b as useContentHost, f as formatBytes, c as att
 import { safeHref, documentColorAttributes } from "wendang/shared";
 import { normalizeVideoEmbed, videoSourceUrl, VIDEO_PROVIDER_LABELS, videoPlayerUrl } from "wendang/internal/video-embed";
 import { createPortal } from "react-dom";
-import { l as lockScroll, t as trapTab } from "./index-CqaMYb3A.js";
+import { l as lockScroll, t as trapTab } from "./index-DdfMnva8.js";
 import { setMindTextMeasureFactory, MIND_TOPIC_FONT } from "wendang/internal/mind-topic-text";
 const ROW_SELECTOR = ".ywiki-image-gallery, .doc-image-gallery";
 function previewItemsFrom(image, fallbackLabel = "图片预览") {

package/dist/document/viewer.js

@@ -5,13 +5,13 @@ import { resolveInlineComments, splitTextByMarks, safeHref, documentColorAttribu
 import { readMindMap } from "wendang/mindmap";
 import { isWorkbookDocument } from "wendang/spreadsheet";
 import { b as useContentHost } from "../chunks/host-C-V688Rq.js";
-import { M as MathView, V as VideoView, F as FileView, A as AttachmentImage } from "../chunks/mind-topic-text-DYQR2Dzf.js";
-import { M as MindMapBlock } from "../chunks/MindMapViewer-Nu3nEVHQ.js";
-import { S as SpreadsheetViewer } from "../chunks/SpreadsheetViewer-CLDlnWyM.js";
+import { M as MathView, V as VideoView, F as FileView, A as AttachmentImage } from "../chunks/mind-topic-text-DSyb95vL.js";
+import { M as MindMapBlock } from "../chunks/MindMapViewer-DJrryb2Y.js";
+import { S as SpreadsheetViewer } from "../chunks/SpreadsheetViewer-DxCxIUx_.js";
 import { e as ensureCodeHighlight, c as codeTokens } from "../chunks/code-highlight-BmaqTe1m.js";
-import { h as hideCommentHint, s as showCommentHint, C as CodeToolbar } from "../chunks/comment-hint-Coq1laiR.js";
+import { h as hideCommentHint, s as showCommentHint, C as CodeToolbar } from "../chunks/comment-hint-B9qcrqvn.js";
 import { codeBlockDisplay, codeLineNumbers, codeBlockClass } from "wendang/internal/code-block";
-import { D } from "../chunks/DocumentExportMenu-DgDXDChd.js";
+import { D } from "../chunks/DocumentExportMenu-BrGipZ59.js";
 function CommentText({ marks, activeId, onMarkClick, children }) {
   return /* @__PURE__ */ jsx(
     "span",

package/dist/document.js

@@ -6,14 +6,14 @@ import { createPortal } from "react-dom";
 import { useRef, useState, useLayoutEffect, useEffect, useMemo, useId, forwardRef, useCallback, useImperativeHandle } from "react";
 import { ContentSchemaService, requiredSchemaVersion, SCHEMA_VERSION } from "wendang/schema";
 import { safeHref, TEXT_COLORS, HIGHLIGHT_COLORS, documentColorAttributes, parseVideoUrl } from "wendang/shared";
-import { b as buildColumnsJson, d as dismissSlash, u as unwrapCallout, h as highlightMenuBlock, T as TEXT_ALIGNS, c as currentTableCellPosition, r as readTableGeometry, t as tableHeaderActive, a as tablePositionAtCell, s as selectTableAxis, i as insertTableBoundary, e as CELL_ALIGNS, f as cellPositionAtDOM, g as selectTableCell, j as clippedTableSelection, k as tableSelectionMarkActive, l as setTableSelectionMark, m as setTableHeaderBackground, n as currentCellRect, o as setColumnWidth, p as autoFitColumn, q as distributeTableColumns, v as getSelectedBlocks, B as BlockRangeSelection, w as setBlockRangeSelection, x as setImageRangeSelection, y as pastedImageFiles, z as pastedRemoteImageUrls, A as coreExtensions, D as refreshInlineComments, E as addUploadPlaceholder, F as currentPlaceholderPos, G as insertUploadedBlock, H as removeUploadPlaceholder, I as replacePlaceholderWithNode } from "./chunks/extensions-DMQedgOl.js";
-import { C } from "./chunks/extensions-DMQedgOl.js";
+import { b as buildColumnsJson, d as dismissSlash, u as unwrapCallout, h as highlightMenuBlock, T as TEXT_ALIGNS, c as currentTableCellPosition, r as readTableGeometry, t as tableHeaderActive, a as tablePositionAtCell, s as selectTableAxis, i as insertTableBoundary, e as CELL_ALIGNS, f as cellPositionAtDOM, g as selectTableCell, j as clippedTableSelection, k as tableSelectionMarkActive, l as setTableSelectionMark, m as setTableHeaderBackground, n as currentCellRect, o as setColumnWidth, p as autoFitColumn, q as distributeTableColumns, v as getSelectedBlocks, B as BlockRangeSelection, w as setBlockRangeSelection, x as setImageRangeSelection, y as pastedImageFiles, z as pastedRemoteImageUrls, A as coreExtensions, D as refreshInlineComments, E as addUploadPlaceholder, F as currentPlaceholderPos, G as insertUploadedBlock, H as removeUploadPlaceholder, I as replacePlaceholderWithNode } from "./chunks/extensions-ByORRoRa.js";
+import { C } from "./chunks/extensions-ByORRoRa.js";
 import { a as useContentContext, p as primeAttachment, u as unavailableAttachment } from "./chunks/host-C-V688Rq.js";
 import { c as createMindMapController } from "./chunks/mind-map-controller-B6SxK3GZ.js";
-import { M as MindMapBlock } from "./chunks/MindMapViewer-Nu3nEVHQ.js";
-import { p as previewItemsFrom, I as ImagePreview, V as VideoView } from "./chunks/mind-topic-text-DYQR2Dzf.js";
+import { M as MindMapBlock } from "./chunks/MindMapViewer-DJrryb2Y.js";
+import { p as previewItemsFrom, I as ImagePreview, V as VideoView } from "./chunks/mind-topic-text-DSyb95vL.js";
 import { u as useLatest, a as useReady, b as asError } from "./chunks/hooks-C53Dp0pr.js";
-import { a as WButton, b as WIcon, l as lockScroll, t as trapTab, c as WDialog } from "./chunks/index-CqaMYb3A.js";
+import { a as WButton, b as WIcon, p as placePanel, l as lockScroll, t as trapTab, c as WDialog } from "./chunks/index-DdfMnva8.js";
 import { p as placeAnchoredPopover } from "./chunks/popover-placement-D3xVYdkt.js";
 import { A, a, b } from "./chunks/popover-placement-D3xVYdkt.js";
 import { isSafeHref } from "wendang/internal/safe-href";
@@ -28,7 +28,7 @@ import { CellSelection, TableMap } from "@tiptap/pm/tables";
 import { CELL_BACKGROUNDS } from "wendang/internal/table-cell-format";
 import { r as rankPages } from "./chunks/fuzzy-match-DYQR-4w2.js";
 import { inspectVideoUrl, VIDEO_PROVIDER_LABELS, videoSourceUrl } from "wendang/internal/video-embed";
-import { D } from "./chunks/DocumentExportMenu-DgDXDChd.js";
+import { D } from "./chunks/DocumentExportMenu-BrGipZ59.js";
 function linkHrefProblem(value) {
   const href = value.trim();
   if (!href) return "请输入链接地址。";
@@ -1496,6 +1496,110 @@ function placeTableMenu(anchor, menu, viewport) {
     maxHeight
   };
 }
+function attachOverlayScrollbar(host, viewport, content) {
+  const track = document.createElement("div"), thumb = document.createElement("div");
+  track.className = "w-overlay-scrollbar__track";
+  thumb.className = "w-overlay-scrollbar__thumb";
+  const originalId = viewport.id;
+  if (!viewport.id) viewport.id = `wd-scroll-${crypto.randomUUID()}`;
+  thumb.tabIndex = 0;
+  thumb.setAttribute("role", "scrollbar");
+  thumb.setAttribute("aria-label", "菜单滚动条");
+  thumb.setAttribute("aria-orientation", "vertical");
+  thumb.setAttribute("aria-controls", viewport.id);
+  thumb.setAttribute("aria-valuemin", "0");
+  track.append(thumb);
+  host.append(track);
+  let timer;
+  let drag;
+  let thumbHeight = 0;
+  const events = new AbortController();
+  function active() {
+    host.classList.add("is-scrolling");
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (!drag) host.classList.remove("is-scrolling");
+    }, 700);
+  }
+  function update() {
+    const maximum = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+    track.hidden = maximum <= 1;
+    const height = track.clientHeight;
+    thumbHeight = Math.min(height, Math.max(28, height * viewport.clientHeight / Math.max(1, viewport.scrollHeight)));
+    thumb.style.height = `${thumbHeight}px`;
+    thumb.style.transform = `translateY(${maximum ? (height - thumbHeight) * viewport.scrollTop / maximum : 0}px)`;
+    thumb.setAttribute("aria-valuemax", String(Math.round(maximum)));
+    thumb.setAttribute("aria-valuenow", String(Math.round(viewport.scrollTop)));
+  }
+  viewport.addEventListener("scroll", () => {
+    update();
+    active();
+  }, { passive: true, signal: events.signal });
+  thumb.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    thumb.focus({ preventScroll: true });
+    drag = {
+      y: event.clientY,
+      top: viewport.scrollTop,
+      maximum: viewport.scrollHeight - viewport.clientHeight,
+      travel: Math.max(1, track.clientHeight - thumbHeight)
+    };
+    host.classList.add("is-dragging-scrollbar");
+    active();
+  }, { signal: events.signal });
+  window.addEventListener("pointermove", (event) => {
+    if (!drag) return;
+    event.preventDefault();
+    viewport.scrollTop = Math.max(0, Math.min(drag.maximum, drag.top + (event.clientY - drag.y) * drag.maximum / drag.travel));
+    update();
+  }, { signal: events.signal });
+  function finish() {
+    if (!drag) return;
+    drag = void 0;
+    host.classList.remove("is-dragging-scrollbar");
+    active();
+  }
+  window.addEventListener("pointerup", finish, { signal: events.signal });
+  window.addEventListener("pointercancel", finish, { signal: events.signal });
+  window.addEventListener("blur", finish, { signal: events.signal });
+  track.addEventListener("pointerdown", (event) => {
+    if (event.target !== track || event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const top = track.getBoundingClientRect().top;
+    viewport.scrollTop = (event.clientY - top - thumbHeight / 2) / Math.max(1, track.clientHeight - thumbHeight) * (viewport.scrollHeight - viewport.clientHeight);
+    update();
+    active();
+  }, { signal: events.signal });
+  thumb.addEventListener("keydown", (event) => {
+    const deltas = { ArrowDown: 32, ArrowUp: -32, PageDown: viewport.clientHeight * 0.8, PageUp: -viewport.clientHeight * 0.8 };
+    const delta = deltas[event.key];
+    if (delta === void 0 && event.key !== "Home" && event.key !== "End") return;
+    event.preventDefault();
+    event.stopPropagation();
+    viewport.scrollTop = event.key === "Home" ? 0 : event.key === "End" ? viewport.scrollHeight : viewport.scrollTop + delta;
+    update();
+    active();
+  }, { signal: events.signal });
+  const resize = new ResizeObserver(update);
+  resize.observe(viewport);
+  resize.observe(content);
+  resize.observe(host);
+  update();
+  return {
+    update,
+    destroy() {
+      events.abort();
+      resize.disconnect();
+      clearTimeout(timer);
+      track.remove();
+      host.classList.remove("is-scrolling", "is-dragging-scrollbar");
+      if (!originalId) viewport.removeAttribute("id");
+    }
+  };
+}
 const CORNER_W = 44, CORNER_H = 26, GUTTER_GAP = 8;
 const anchorOf = (event) => {
   const rect = event.currentTarget.getBoundingClientRect();
@@ -1506,24 +1610,72 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
   const { portal } = useContentContext(), axisCleanup = useRef(null);
   const [dismissed, setDismissed] = useState(false), [panel, setPanel] = useState("none");
   const [menuOpen, setMenuOpen] = useState(false), [menuScope, setMenuScope] = useState("table");
+  const [menuFromToolbar, setMenuFromToolbar] = useState(false);
   const [showStyle, setShowStyle] = useState(false), [widthOpen, setWidthOpen] = useState(false), [width, setWidth] = useState(""), [busy, setBusy] = useState(false);
   const [toolbarSize, setToolbarSize] = useState({ width: 0, height: 0 });
+  const [, setViewportRevision] = useState(0);
   const [menuAnchor, setMenuAnchor] = useState(null), [panelAnchor, setPanelAnchor] = useState(null);
   const menuRef = useRef(null), panelRef = useRef(null);
+  const menuViewport = useRef(null), menuContent = useRef(null);
+  const menuTrigger = useRef(null), panelTrigger = useRef(null);
   const [menuPlace, setMenuPlace] = useState({ left: 0, top: 0, maxHeight: 480 }), [panelPlace, setPanelPlace] = useState({ left: 0, top: 0 });
-  useEffect(() => {
+  useLayoutEffect(() => {
+    var _a2;
     if (!menuOpen || !menuAnchor) return;
     const element = menuRef.current;
     if (!element) return;
-    setMenuPlace(placeTableMenu(menuAnchor, { width: element.offsetWidth, height: element.offsetHeight }, { width: innerWidth, height: innerHeight, topInset: 12 }));
+    setMenuPlace(placeTableMenu(menuAnchor, { width: element.offsetWidth, height: (((_a2 = menuViewport.current) == null ? void 0 : _a2.scrollHeight) ?? element.scrollHeight) + 2 }, { width: innerWidth, height: innerHeight, topInset: 12 }));
   }, [menuOpen, menuAnchor, widthOpen, showStyle, menuScope]);
   useEffect(() => {
+    var _a2;
+    if (!menuOpen || !menuRef.current || !menuViewport.current || !menuContent.current) return;
+    const scrollbar = attachOverlayScrollbar(menuRef.current, menuViewport.current, menuContent.current);
+    (_a2 = menuRef.current.querySelector('[role="menuitem"]')) == null ? void 0 : _a2.focus({ preventScroll: true });
+    return () => scrollbar.destroy();
+  }, [menuOpen, portal]);
+  useLayoutEffect(() => {
     if (panel === "none" || !panelAnchor) return;
-    const element = panelRef.current;
-    const card = { width: (element == null ? void 0 : element.offsetWidth) ?? 320, height: (element == null ? void 0 : element.offsetHeight) ?? 260 };
-    const placement = placeTableToolbar(panelAnchor, card, { width: innerWidth, height: innerHeight, topInset: 12 });
-    setPanelPlace({ left: placement.left, top: placement.top });
-  }, [panel, panelAnchor]);
+    const measure = () => {
+      var _a2;
+      const element = panelRef.current, trigger = (_a2 = panelTrigger.current) == null ? void 0 : _a2.getBoundingClientRect();
+      if (!element || !trigger) return;
+      const placement = placePanel({
+        trigger,
+        panel: { width: element.offsetWidth, height: element.offsetHeight },
+        position: "bl",
+        gap: 6,
+        viewport: { width: innerWidth, height: innerHeight }
+      });
+      setPanelPlace((previous) => previous.left === placement.left && previous.top === placement.top ? previous : { left: placement.left, top: placement.top });
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    if (panelRef.current) observer.observe(panelRef.current);
+    let frame = 0;
+    const scroll = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    };
+    window.addEventListener("scroll", scroll, true);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", scroll, true);
+    };
+  });
+  useEffect(() => {
+    const update = (event) => {
+      var _a2, _b2;
+      if (event.target instanceof Node && (((_a2 = menuRef.current) == null ? void 0 : _a2.contains(event.target)) || ((_b2 = panelRef.current) == null ? void 0 : _b2.contains(event.target)))) return;
+      setViewportRevision((value) => value + 1);
+    };
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, []);
   const selectionRef = useRef(editor.state.selection), docRef = useRef(editor.state.doc);
   useEffect(() => {
     if (!selectionRef.current.eq(editor.state.selection) || docRef.current !== editor.state.doc) {
@@ -1559,6 +1711,8 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
       selectTableCell(editor.view, pos);
       setPanel("none");
       setMenuScope("cell");
+      setMenuFromToolbar(false);
+      menuTrigger.current = null;
       setShowStyle(false);
       setMenuAnchor({ left: event.clientX, right: event.clientX, top: event.clientY, bottom: event.clientY });
       setMenuOpen(true);
@@ -1582,11 +1736,18 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
       setMenuOpen(false);
       setPanel("none");
     };
+    const scroll = (event) => {
+      var _a2, _b2;
+      if (event.target instanceof Node && (((_a2 = menuRef.current) == null ? void 0 : _a2.contains(event.target)) || ((_b2 = panelRef.current) == null ? void 0 : _b2.contains(event.target)))) return;
+      setMenuOpen(false);
+    };
     document.addEventListener("pointerdown", close, true);
     window.addEventListener("resize", resize);
+    window.addEventListener("scroll", scroll, true);
     return () => {
       document.removeEventListener("pointerdown", close, true);
       window.removeEventListener("resize", resize);
+      window.removeEventListener("scroll", scroll, true);
     };
   }, [menuOpen, panel]);
   function axisDown(axis, index, event) {
@@ -1644,13 +1805,16 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
   }
   useEffect(() => {
     const escape = (event) => {
+      var _a2, _b2;
       if (event.key !== "Escape" || event.isComposing) return;
       if (panel !== "none") {
         event.preventDefault();
         setPanel("none");
+        (_a2 = panelTrigger.current) == null ? void 0 : _a2.focus({ preventScroll: true });
       } else if (menuOpen) {
         event.preventDefault();
         setMenuOpen(false);
+        (_b2 = menuTrigger.current) == null ? void 0 : _b2.focus({ preventScroll: true });
       } else if (cellSelection) {
         event.preventDefault();
         setDismissed(true);
@@ -1698,12 +1862,22 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
     } else setColor(panel === "color" ? "textStyle" : "highlight", value);
   }
   function showContext(event, scope = "table") {
+    var _a2;
     if (!event) return;
+    const trigger = event.currentTarget;
+    if (menuOpen && menuTrigger.current === trigger) {
+      setMenuOpen(false);
+      return;
+    }
+    menuTrigger.current = trigger;
+    const bar = (_a2 = trigger.closest(".tbl-cellbar")) == null ? void 0 : _a2.getBoundingClientRect();
     if (scope === "table" && geometry) selectTableAxis(editor.view, geometry.cellPos, "table");
+    const anchor = anchorOf(event);
     setPanel("none");
     setShowStyle(false);
     setMenuScope(scope);
-    setMenuAnchor(anchorOf(event));
+    setMenuFromToolbar(!!bar);
+    setMenuAnchor({ ...anchor, top: (bar == null ? void 0 : bar.top) ?? anchor.top, bottom: (bar == null ? void 0 : bar.bottom) ?? anchor.bottom });
     setMenuOpen(true);
   }
   async function copyTable(cut) {
@@ -1738,6 +1912,8 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
       setPanel("none");
       return;
     }
+    panelTrigger.current = event.currentTarget;
+    setMenuOpen(false);
     setPanelAnchor(anchorOf(event));
     setPanel(name);
   }
@@ -1798,7 +1974,7 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
         if (!disabled) onClick();
       },
       children: [
-        /* @__PURE__ */ jsx(WIcon, { name: icon, size: 18 }),
+        /* @__PURE__ */ jsx(WIcon, { name: icon, size: ["bold", "italic", "strike", "underline"].includes(icon) ? 20 : 18 }),
         extra
       ]
     }
@@ -1822,6 +1998,7 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
                 if (pos !== null) onBlockDrag == null ? void 0 : onBlockDrag(pos, event.nativeEvent, () => {
                   selectTableAxis(editor.view, geometry.cellPos, "table");
                   setMenuScope("table");
+                  setMenuFromToolbar(false);
                   setShowStyle(false);
                   setMenuAnchor(anchor);
                   setMenuOpen(true);
@@ -1895,7 +2072,7 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
       ] }),
       selection && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "tbl-selection", style: { left: selection.left, top: selection.top, width: selection.width, height: selection.height } }),
-        !menuOpen && /* @__PURE__ */ jsx(
+        (!menuOpen || menuFromToolbar) && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -1915,7 +2092,7 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
             children: "···"
           }
         ),
-        cellSelection && !dismissed && !menuOpen && /* @__PURE__ */ jsx(
+        cellSelection && !dismissed && (!menuOpen || menuFromToolbar) && /* @__PURE__ */ jsx(
           "div",
           {
             className: "tbl-cellbar",
@@ -1959,7 +2136,7 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
                     item.key === "color" ? /* @__PURE__ */ jsxs(Fragment, { children: [
                       "A",
                       /* @__PURE__ */ jsx(WIcon, { name: "chevron-down", size: 12 })
-                    ] }) : item.key === "highlight" ? /* @__PURE__ */ jsx(WIcon, { name: "marker", size: 17 }) : /* @__PURE__ */ jsx("span", { className: "fill-icon" }),
+                    ] }) : /* @__PURE__ */ jsx(WIcon, { name: item.key === "highlight" ? "marker" : "cell-fill", size: 20 }),
                     /* @__PURE__ */ jsx("span", { className: "color-bar", style: { background: item.current ?? "transparent" }, "aria-hidden": "true" })
                   ]
                 },
@@ -2014,13 +2191,25 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
         "div",
         {
           ref: menuRef,
-          className: "tbl-ctx",
-          style: { position: "fixed", left: menuPlace.left, top: menuPlace.top, maxHeight: menuPlace.maxHeight, overflow: "auto", width: 216 },
+          className: "tbl-ctx w-overlay-scrollbar",
+          style: { position: "fixed", left: menuPlace.left, top: menuPlace.top, maxHeight: menuPlace.maxHeight, width: 216 },
           role: "menu",
           "aria-label": "表格操作菜单",
-          onMouseDown: (event) => event.preventDefault(),
+          onMouseDown: (event) => {
+            if (!(event.target instanceof HTMLInputElement)) event.preventDefault();
+          },
           onContextMenu: (event) => event.preventDefault(),
-          children: menuScope === "table" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          onKeyDown: (event) => {
+            var _a2;
+            if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key) || event.target instanceof HTMLInputElement) return;
+            const buttons = [...((_a2 = menuRef.current) == null ? void 0 : _a2.querySelectorAll('[role^="menuitem"]:not(:disabled)')) ?? []];
+            if (!buttons.length) return;
+            event.preventDefault();
+            const current = buttons.indexOf(document.activeElement);
+            const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (current + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length;
+            buttons[next].focus();
+          },
+          children: /* @__PURE__ */ jsx("div", { ref: menuViewport, className: "w-overlay-scrollbar__viewport", style: { maxHeight: Math.max(0, menuPlace.maxHeight - 2) }, children: /* @__PURE__ */ jsx("div", { ref: menuContent, children: menuScope === "table" ? /* @__PURE__ */ jsxs(Fragment, { children: [
             menuItem("columns", "均分列宽", distribute),
             menuItem("palette", "表格样式", () => setShowStyle(!showStyle), { expanded: showStyle }),
             showStyle && /* @__PURE__ */ jsxs("div", { className: "ctx-styles", "aria-label": "表头样式", children: [
@@ -2158,7 +2347,7 @@ function TableControls({ editor, hover, revision, onNotice, onBlockDrag }) {
               chain().deleteTable().run();
               setMenuOpen(false);
             }, { danger: true })
-          ] })
+          ] }) }) })
         }
       )
     ] }), portal)

package/dist/mindmap/viewer.js

@@ -1,5 +1,5 @@
 "use client";
-import { M, a } from "../chunks/MindMapViewer-Nu3nEVHQ.js";
+import { M, a } from "../chunks/MindMapViewer-DJrryb2Y.js";
 export {
   M as MindMapBlock,
   a as MindMapViewer

package/dist/mindmap.js

@@ -8,7 +8,7 @@ import { T as TextStyle, H as Highlight, M as MindMap, a as MindMapTopic, b as M
 import { c as createMindMapController } from "./chunks/mind-map-controller-B6SxK3GZ.js";
 import { b as useContentHost, u as unavailableAttachment } from "./chunks/host-C-V688Rq.js";
 import { u as useLatest, a as useReady } from "./chunks/hooks-C53Dp0pr.js";
-import { MindMapCanvas } from "./chunks/MindMapCanvas-I5M1SIyX.js";
+import { MindMapCanvas } from "./chunks/MindMapCanvas-tkFBBs4g.js";
 const MindMapEditor = forwardRef(function MindMapEditor2(props, ref) {
   var _a, _b, _c;
   const latest = useLatest(props), host = useContentHost(), hostRef = useLatest(host), mount = useRef(null);

package/dist/spreadsheet/viewer.js

@@ -1,5 +1,5 @@
 "use client";
-import { S } from "../chunks/SpreadsheetViewer-CLDlnWyM.js";
+import { S } from "../chunks/SpreadsheetViewer-DxCxIUx_.js";
 export {
   S as SpreadsheetViewer
 };

package/dist/styles.css

@@ -1872,6 +1872,31 @@
   .wd-dialog__body { padding: 4px 18px 20px; }
   .wd-dialog__footer { padding: 0 18px 16px; }
 }
+.w-overlay-scrollbar { overflow: hidden; }
+.w-overlay-scrollbar__viewport {
+  overflow: auto; overscroll-behavior: contain; scrollbar-width: none; min-height: 0;
+  box-sizing: border-box; padding: 6px; overflow-anchor: none;
+}
+.w-overlay-scrollbar__viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
+.w-overlay-scrollbar__track {
+  position: absolute; top: 5px; right: 2px; bottom: 5px; z-index: 1; width: 10px;
+  opacity: 0; transition: opacity .15s; touch-action: none; cursor: default;
+}
+.w-overlay-scrollbar__track[hidden] { display: none; }
+.w-overlay-scrollbar:hover > .w-overlay-scrollbar__track,
+.w-overlay-scrollbar:focus-within > .w-overlay-scrollbar__track,
+.w-overlay-scrollbar.is-scrolling > .w-overlay-scrollbar__track { opacity: 1; }
+.w-overlay-scrollbar__thumb {
+  position: absolute; top: 0; right: 2px; width: 6px; border-radius: 999px; touch-action: none;
+  background: color-mix(in srgb, var(--color-text-muted) 42%, transparent); cursor: grab;
+}
+.w-overlay-scrollbar__thumb:hover,
+.w-overlay-scrollbar.is-dragging-scrollbar .w-overlay-scrollbar__thumb {
+  background: color-mix(in srgb, var(--color-text-muted) 66%, transparent);
+}
+.w-overlay-scrollbar.is-dragging-scrollbar .w-overlay-scrollbar__thumb { cursor: grabbing; }
+.w-overlay-scrollbar__thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
+@media (prefers-reduced-motion: reduce) { .w-overlay-scrollbar__track { transition: none; } }
 .mind-inline { height:100%; min-height:380px; }
 .mind-inline .mind-map-workspace { height:100%; padding:0; }
 .mind-canvas-title { display: inline-flex; align-items: center; gap: 14px; max-width: calc(100vw - 110px); }
@@ -2518,7 +2543,6 @@
 .tool:hover { background:var(--color-surface-subtle); }
 .tool.on { background:var(--color-accent-soft); color:var(--color-accent); }
 .tool[aria-disabled='true'] { opacity:.3; cursor:not-allowed; }
-.fill-icon { width:16px; height:16px; border:1px solid currentColor; border-radius:3px; background-color:transparent; }
 .color-tool { position:relative; padding-bottom:2px; }
 .color-bar { position:absolute; left:8px; right:8px; bottom:3px; height:2px; border-radius:1px; box-shadow:0 0 0 1px var(--color-surface); }
 .tool-sep { flex:0 0 1px; height:20px; background:var(--color-border); margin:0 4px; }
@@ -2537,7 +2561,7 @@
 .swatch .glyph { display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-size:15px; font-weight:500; line-height:1; border-radius:0; }
 .swatch:hover { border-color:var(--color-accent); }
 .swatch.selected { border-color:var(--color-accent); box-shadow:0 0 0 1px var(--color-accent); }
-.tbl-ctx { z-index:80; padding:4px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:var(--shadow-pop); }
+.tbl-ctx { z-index:80; padding:0; box-sizing:border-box; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; box-shadow:var(--shadow-pop); }
 /* 菜单项：与 Vue 的 TableContextMenu.vue 同尺寸与间距。 */
 .ctx-item { display:flex; align-items:center; gap:8px; width:100%; border:none; background:transparent; min-height:32px; padding:7px 10px; border-radius:6px; color:var(--color-text); cursor:pointer; text-align:left; font:inherit; font-size:13px; }
 .ctx-item:hover { background:var(--color-surface-subtle); }

package/dist/types/engine/wui/core/overlay-scrollbar.d.ts

@@ -0,0 +1,4 @@
+export declare function attachOverlayScrollbar(host: HTMLElement, viewport: HTMLElement, content: HTMLElement): {
+    update: () => void;
+    destroy(): void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wendang-react",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Wendang 原生 React 文档、工作表和思维导图编辑与展示组件。",
   "type": "module",
   "license": "MIT",