@aseity/idocs-preview 0.4.0 → 0.5.0

package/dist/view/workspace.js

@@ -15,12 +15,12 @@ const ICONS = {
     zoomIn: '<path d="M10 4.5v11M4.5 10h11" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
     fit: '<path d="M4.335 11a.665.665 0 0 1 1.33 0v3.335H9l.134.014a.665.665 0 0 1 0 1.302L9 15.665H5A.665.665 0 0 1 4.335 15zm10-2V5.665H11a.665.665 0 0 1 0-1.33h4l.134.014c.303.062.531.33.531.651v4a.665.665 0 1 1-1.33 0"/>',
     search: '<circle cx="8.8" cy="8.8" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M12.6 12.6l3.8 3.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>',
-    paragraph: '<path d="M3.5 5.5h13M3.5 10h13M3.5 14.5h9" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>',
-    heading: '<path d="M4.5 4.5v11M12.5 4.5v11M4.5 10h8M15.5 11.5v4M14 12.8l1.5-1.3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
-    table: '<rect x="3" y="4" width="14" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M3 8.5h14M3 12.5h14M8.5 8.5V16M13 8.5V16" fill="none" stroke="currentColor" stroke-width="1.3"/>',
-    callout: '<rect x="3" y="4" width="14" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="1.4"/><path d="M6.5 7.5v5M9.5 8.2h4.5M9.5 11.8h3.2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>',
-    image: '<rect x="3" y="4" width="14" height="12" rx="2" fill="none" stroke="currentColor" stroke-width="1.4"/><circle cx="7.2" cy="8" r="1.2" fill="currentColor"/><path d="M4.2 14l3.6-3.4 2.8 2.6 2.2-1.8 3 2.6" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>',
-    pageBreak: '<path d="M3.5 5h13M3.5 15h13M4.5 10h2.5M9 10h2M13 10h2.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>',
+    paragraph: '<path d="M6.75 4.75h10M3.25 8.25h13.5M3.25 11.75h13.5M3.25 15.25h8.5"/>',
+    heading: '<path d="M5 4v12M15 4v12M5 10h10"/>',
+    table: '<rect x="3" y="4" width="14" height="12" rx="2"/><path d="M3 8h14M3 12h14M10 8v8"/>',
+    callout: '<rect x="3" y="3.5" width="14" height="13" rx="2.25"/><path d="M7 7v3M10.5 8h3M10.5 12h3"/><circle cx="7" cy="12.75" r="0.75" fill="currentColor" stroke="none"/>',
+    image: '<rect x="3" y="3" width="14" height="14" rx="2.25"/><circle cx="12.75" cy="7.25" r="1.5"/><path d="m3 13 3.5-3.5a1.4 1.4 0 0 1 2 0l7.1 7.1"/>',
+    pageBreak: '<path d="M4 7V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2M4 13v2a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2M3 10h2m4 0h2m4 0h2"/>',
     chevronDown: '<path d="M15.78 7.404a.666.666 0 0 1 .94.942L10.766 14.3a1.08 1.08 0 0 1-1.53 0L3.28 8.346a.666.666 0 0 1 .942-.942L10 13.184z"/>',
     check: '<path d="M14.445 5.038a.665.665 0 0 1 1.1.748l-6.14 9.03a.815.815 0 0 1-1.25.117L4.528 11.3a.665.665 0 0 1 .942-.94l3.184 3.192z"/>',
     ask: '<path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.45" d="M10 16.83c4.004 0 7.25-3.058 7.25-6.83S14.004 3.17 10 3.17 2.75 6.228 2.75 10a6.55 6.55 0 0 0 1.484 4.141c-.147.781-.39 1.537-.678 2.287a13.5 13.5 0 0 0 2.877-.48A7.56 7.56 0 0 0 10 16.83Z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.45" d="M5.888 9C6.278 7.575 7.478 6.457 9 6.11"/>',
@@ -47,6 +47,72 @@ function el(tag, className, text) {
         node.textContent = text;
     return node;
 }
+function mountToolbarScroller(toolbar, history, zoom, onScrollOrResize) {
+    const center = el('div', 'idocs-ws-tb-center');
+    const viewport = el('div', 'idocs-ws-toolbar-viewport');
+    const strip = el('div', 'idocs-ws-toolbar-strip');
+    const content = el('div', 'idocs-ws-toolbar-content');
+    const scrollButton = (direction, label) => {
+        const button = el('button', 'idocs-ws-icon-btn idocs-ws-toolbar-arrow');
+        button.type = 'button';
+        button.hidden = true;
+        button.title = label;
+        button.setAttribute('aria-label', label);
+        button.append(makeSvgIcon(ICONS.chevronDown, 14));
+        button.addEventListener('mousedown', (event) => event.preventDefault());
+        button.addEventListener('click', () => {
+            viewport.scrollBy({
+                left: direction * viewport.clientWidth * 0.75,
+                behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth',
+            });
+        });
+        return button;
+    };
+    const left = scrollButton(-1, '向左滚动格式工具栏');
+    const right = scrollButton(1, '向右滚动格式工具栏');
+    strip.append(content);
+    viewport.append(strip);
+    center.append(left, viewport, right);
+    toolbar.append(history, center, zoom);
+    const syncEdges = () => {
+        left.disabled = viewport.scrollLeft <= 1;
+        right.disabled = viewport.scrollLeft + viewport.clientWidth >= viewport.scrollWidth - 1;
+        onScrollOrResize();
+    };
+    let compact = false;
+    const resize = new ResizeObserver(() => {
+        const { paddingLeft, paddingRight, columnGap } = getComputedStyle(toolbar);
+        const innerWidth = toolbar.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        const available = innerWidth - history.offsetWidth - zoom.offsetWidth - 2 * parseFloat(columnGap);
+        const nextCompact = available < Math.min(144, content.offsetWidth);
+        if (nextCompact !== compact) {
+            compact = nextCompact;
+            if (compact) {
+                strip.prepend(history);
+                strip.append(zoom);
+            }
+            else {
+                toolbar.prepend(history);
+                toolbar.append(zoom);
+            }
+        }
+        const overflow = strip.offsetWidth > center.clientWidth;
+        left.hidden = !overflow;
+        right.hidden = !overflow;
+        syncEdges();
+    });
+    for (const element of [toolbar, content, history, zoom])
+        resize.observe(element);
+    viewport.addEventListener('scroll', syncEdges, { passive: true });
+    return {
+        content,
+        viewport,
+        destroy() {
+            resize.disconnect();
+            viewport.removeEventListener('scroll', syncEdges);
+        },
+    };
+}
 function headingLevelFromStyle(style) {
     switch (style) {
         case 'heading1':
@@ -99,22 +165,6 @@ export function extractOutline(doc) {
     }
     return entries;
 }
-function readOnlyMeta(reason) {
-    switch (reason) {
-        case 'generated':
-            return { badge: '自动生成', message: '此处编号或目录由系统自动生成，无法直接修改' };
-        case 'aliasShared':
-            return { badge: '共享节点', message: '此内容与文档其他位置共享，暂不支持直接改写' };
-        case 'repeatedHeader':
-            return { badge: '重复表头', message: '此为跨页重复表头，请点击首页表格第一行进行编辑' };
-        case 'unsupportedStory':
-            return { badge: '页眉页脚', message: '当前仅支持编辑正文区域，页眉、页脚与脚注为只读' };
-        case 'protectedInline':
-            return { badge: '保护内容', message: '包含公式或交叉引用等保护元素，请在其前后输入' };
-        case 'unsupportedStructure':
-            return { badge: '只读结构', message: '此区域结构暂不支持直接编辑' };
-    }
-}
 export function isTableCellPath(path) {
     return /\.rows\.\d+\.cells\.\d+(?:\.|$)/.test(path);
 }
@@ -144,8 +194,7 @@ export function resolveToolbarContext(input) {
         };
     }
     if (input.readOnlyTarget) {
-        const meta = readOnlyMeta(input.readOnlyTarget.reason);
-        return { kind: 'readOnlyTarget', target: input.readOnlyTarget, ...meta };
+        return { kind: 'readOnlyTarget', target: input.readOnlyTarget };
     }
     if (input.selectedImage) {
         return { kind: 'image', target: input.selectedImage };
@@ -177,24 +226,14 @@ function sameImageList(a, b) {
     }
     return true;
 }
-function readOnlyQuoteText(doc, target) {
-    const page = doc?.pages[target.page];
-    if (!page)
-        return '';
-    const matching = page.lines
-        .filter((l) => (target.path ? l.path === target.path : l.story !== 'body'))
-        .map((l) => l.text.trim())
-        .filter(Boolean);
-    if (matching.length > 0)
-        return matching.join(' ');
-    return `第 ${target.page + 1} 页只读区域`;
-}
 function toolbarRenderKey(ctx, tableModePreferred) {
     switch (ctx.kind) {
         case 'readOnly':
             return `ro:${ctx.processing}:${ctx.label}`;
         case 'editable':
-            return `ed:${ctx.inTable}:${ctx.inTable && tableModePreferred}:${ctx.blockStyle ?? ''}:${ctx.align ?? ''}:${ctx.collapsed}`;
+            if (ctx.inTable && tableModePreferred)
+                return 'table';
+            return `ed:${ctx.inTable}:${ctx.blockStyle ?? ''}:${ctx.align ?? ''}:${ctx.collapsed}`;
         case 'empty':
             return 'empty';
         case 'readOnlyTarget':
@@ -213,8 +252,10 @@ export function mountEditorWorkspace(container, session, options = {}) {
     let lastToolbarKey = '';
     let lastOutlinePath;
     let activeDoc;
+    let renderedRailDoc;
+    let renderedRailTab;
     let thumbImages = [];
-    let lastThumbImages;
+    let lastThumbImages = [];
     let destroyed = false;
     const root = el('div', 'idocs-ws');
     root.classList.toggle('is-readonly', readOnly);
@@ -222,9 +263,42 @@ export function mountEditorWorkspace(container, session, options = {}) {
     const toolbar = el('nav', 'idocs-ws-toolbar');
     toolbar.setAttribute('aria-label', '文档格式工具栏');
     const tbLeft = el('div', 'idocs-ws-tb-left');
-    const tbCenter = el('div', 'idocs-ws-tb-center');
     const tbRight = el('div', 'idocs-ws-tb-right');
-    toolbar.append(tbLeft, tbCenter, tbRight);
+    let openToolbarMenu;
+    const closeToolbarMenu = () => {
+        if (!openToolbarMenu)
+            return;
+        openToolbarMenu.trigger.setAttribute('aria-expanded', 'false');
+        openToolbarMenu.menu.hidden = true;
+        openToolbarMenu = undefined;
+    };
+    const positionToolbarMenu = () => {
+        if (!openToolbarMenu)
+            return;
+        const { trigger, menu } = openToolbarMenu;
+        const anchor = trigger.getBoundingClientRect();
+        const visible = toolbarScroller.viewport.getBoundingClientRect();
+        if (anchor.right <= visible.left || anchor.left >= visible.right) {
+            closeToolbarMenu();
+            return;
+        }
+        const frame = toolbar.getBoundingClientRect();
+        const gutter = 4;
+        const anchorLeft = Math.max(anchor.left, visible.left) - frame.left;
+        menu.style.left = `${Math.max(gutter, Math.min(anchorLeft, toolbar.clientWidth - menu.offsetWidth - gutter))}px`;
+        menu.style.top = `${anchor.bottom - frame.top + 6}px`;
+    };
+    const toolbarScroller = mountToolbarScroller(toolbar, tbLeft, tbRight, positionToolbarMenu);
+    const tbContent = toolbarScroller.content;
+    const toggleToolbarMenu = (trigger, menu, open) => {
+        closeAllPopovers();
+        if (!open)
+            return;
+        trigger.setAttribute('aria-expanded', 'true');
+        menu.hidden = false;
+        openToolbarMenu = { trigger, menu };
+        positionToolbarMenu();
+    };
     const railToggleBtn = el('button', 'idocs-ws-icon-btn');
     railToggleBtn.type = 'button';
     const initialRailLabel = railOpen ? '收起页面列表' : '展开页面列表';
@@ -304,17 +378,33 @@ export function mountEditorWorkspace(container, session, options = {}) {
     const dock = el('nav', 'idocs-ws-dock');
     dock.setAttribute('aria-label', '插入内容');
     dock.hidden = readOnly;
-    const makeDockBtn = (icon, label) => {
-        const btn = el('button', 'idocs-ws-dock-btn');
-        btn.type = 'button';
-        btn.append(makeSvgIcon(icon), el('span', undefined, label));
-        return btn;
+    const insertButtons = [];
+    const makeDockButton = (icon, label, activate, popup) => {
+        const container = el('span');
+        const className = 'idocs-ws-dock-btn';
+        const svg = makeSvgIcon(icon, 20);
+        const bind = (button) => {
+            if (!button)
+                return;
+            if (popup)
+                button.setAttribute('aria-expanded', String(!popup.hidden));
+            button.append(svg);
+        };
+        if (options.mountInsertButtons) {
+            insertButtons.push({ container, label, className, activate, bind });
+        }
+        else {
+            const button = el('button', className);
+            button.type = 'button';
+            button.title = label;
+            button.setAttribute('aria-label', label);
+            button.addEventListener('click', activate);
+            bind(button);
+            container.append(button);
+        }
+        return container;
     };
-    const dockParaBtn = makeDockBtn(ICONS.paragraph, '段落');
-    const dockHeadingBtn = makeDockBtn(ICONS.heading, '标题');
     const tableAnchor = el('div', 'idocs-ws-popover-anchor');
-    const dockTableBtn = makeDockBtn(ICONS.table, '表格');
-    dockTableBtn.setAttribute('aria-expanded', 'false');
     const tablePopover = el('div', 'idocs-ws-popover is-up idocs-ws-table-popover');
     tablePopover.hidden = true;
     const tableGridHead = el('div', 'idocs-ws-table-grid-head', '3 × 3 表格');
@@ -334,14 +424,7 @@ export function mountEditorWorkspace(container, session, options = {}) {
         }
     }
     tablePopover.append(tableGridHead, tableGrid);
-    tableAnchor.append(dockTableBtn, tablePopover);
-    const dockCalloutBtn = makeDockBtn(ICONS.callout, '提示框');
-    const dockImageBtn = options.onPickImage ? makeDockBtn(ICONS.image, '图片') : null;
-    const dockPageBreakBtn = makeDockBtn(ICONS.pageBreak, '分页符');
-    dock.append(dockParaBtn, dockHeadingBtn, tableAnchor, dockCalloutBtn);
-    if (dockImageBtn)
-        dock.append(dockImageBtn);
-    dock.append(dockPageBreakBtn);
+    tableAnchor.append(tablePopover);
     stage.append(editorHost, selPill, dock);
     railSlot.append(rail);
     body.append(railSlot, stage);
@@ -358,15 +441,13 @@ export function mountEditorWorkspace(container, session, options = {}) {
         }
     };
     paintTableGrid(3, 3);
+    const setTablePopoverOpen = (open) => {
+        tablePopover.hidden = !open;
+        tableAnchor.querySelector('.idocs-ws-dock-btn')?.setAttribute('aria-expanded', String(open));
+    };
     const closeAllPopovers = () => {
-        tablePopover.hidden = true;
-        dockTableBtn.setAttribute('aria-expanded', 'false');
-        tbCenter.querySelectorAll('.idocs-ws-popover').forEach((menu) => {
-            menu.hidden = true;
-        });
-        tbCenter.querySelectorAll('[aria-expanded="true"]').forEach((trigger) => {
-            trigger.setAttribute('aria-expanded', 'false');
-        });
+        setTablePopoverOpen(false);
+        closeToolbarMenu();
     };
     let view;
     const syncZoom = () => {
@@ -377,9 +458,8 @@ export function mountEditorWorkspace(container, session, options = {}) {
             view?.dragging ||
             !sel ||
             !sel.clientRect ||
-            (sel.selection.range.start.flow === sel.selection.range.end.flow &&
-                sel.selection.range.start.offset === sel.selection.range.end.offset) ||
-            !pillQuoteBtn) {
+            !pillQuoteBtn ||
+            !sel.excerpt?.trim()) {
             selPill.hidden = true;
             return;
         }
@@ -408,7 +488,8 @@ export function mountEditorWorkspace(container, session, options = {}) {
             return;
         }
         lastToolbarKey = nextKey ?? '';
-        tbCenter.innerHTML = '';
+        closeToolbarMenu();
+        tbContent.replaceChildren();
         if (ctx.kind === 'readOnly') {
             if (ctx.processing) {
                 const status = el('span', 'idocs-ws-processing-indicator');
@@ -418,21 +499,22 @@ export function mountEditorWorkspace(container, session, options = {}) {
                 const ring = el('span', 'idocs-ws-spinner');
                 ring.setAttribute('aria-hidden', 'true');
                 status.append(ring);
-                tbCenter.append(status);
+                tbContent.append(status);
             }
             return;
         }
         if (ctx.kind === 'readOnlyTarget') {
-            const box = el('div', 'idocs-ws-ctx');
-            box.append(el('span', 'idocs-ws-badge is-warn', ctx.badge));
-            box.append(el('span', 'idocs-ws-note', ctx.message));
-            if (options.onQuoteSelection && activeDoc) {
+            const box = el('div', 'idocs-ws-ctx is-readonly-target');
+            box.append(el('span', 'idocs-ws-badge is-warn', '此内容暂不支持编辑'));
+            if (options.onQuoteSelection && ctx.target.excerpt?.trim()) {
                 const quoteBtn = el('button', 'idocs-ws-pill-btn');
                 quoteBtn.type = 'button';
                 quoteBtn.append(makeSvgIcon(ICONS.ask, 15), el('span', undefined, askLabel));
                 quoteBtn.addEventListener('click', () => {
-                    const text = readOnlyQuoteText(activeDoc, ctx.target);
-                    options.onQuoteSelection?.({ text, path: ctx.target.path ?? '', page: ctx.target.page });
+                    const target = view.readOnlyTarget();
+                    if (!target?.excerpt?.trim())
+                        return;
+                    options.onQuoteSelection?.({ text: target.excerpt, path: target.path, page: target.page });
                 });
                 box.append(quoteBtn);
             }
@@ -443,7 +525,7 @@ export function mountEditorWorkspace(container, session, options = {}) {
                 view.focus();
             });
             box.append(clearBtn);
-            tbCenter.append(box);
+            tbContent.append(box);
             return;
         }
         if (ctx.kind === 'image') {
@@ -485,12 +567,12 @@ export function mountEditorWorkspace(container, session, options = {}) {
             doneBtn.type = 'button';
             doneBtn.addEventListener('click', () => view.clearSelectedImage());
             box.append(doneBtn);
-            tbCenter.append(box);
+            tbContent.append(box);
             return;
         }
-        const box = el('div', 'idocs-ws-ctx');
         const inTable = ctx.kind === 'editable' && ctx.inTable;
         const showTable = inTable && tableModePreferred;
+        const box = el('div', showTable ? 'idocs-ws-ctx is-table' : 'idocs-ws-ctx');
         if (inTable) {
             const seg = el('div', 'idocs-ws-seg');
             const textTab = el('button', 'idocs-ws-seg-btn', '文字');
@@ -512,23 +594,25 @@ export function mountEditorWorkspace(container, session, options = {}) {
         }
         if (showTable) {
             const tableActions = [
-                ['insertRowAbove', '上插行'],
-                ['insertRowBelow', '下插行'],
-                ['insertColumnLeft', '左插列'],
-                ['insertColumnRight', '右插列'],
-                ['deleteRow', '删行', true],
-                ['deleteColumn', '删列', true],
-                ['toggleHeaderRow', '表头行'],
+                ['insertRowAbove', '上方插入行'],
+                ['insertRowBelow', '下方插入行'],
+                ['insertColumnLeft', '左侧插入列'],
+                ['insertColumnRight', '右侧插入列'],
+                ['deleteRow', '删除行', true],
+                ['deleteColumn', '删除列', true],
+                ['toggleHeaderRow', '重复表头'],
             ];
             for (const [action, label, danger] of tableActions) {
                 const btn = el('button', danger ? 'idocs-ws-pill-btn is-danger' : 'idocs-ws-pill-btn', label);
                 btn.type = 'button';
+                if (action === 'toggleHeaderRow')
+                    btn.title = '开启或关闭跨页重复表头';
                 btn.addEventListener('click', () => {
                     void view.editTable(action);
                 });
                 box.append(btn);
             }
-            tbCenter.append(box);
+            tbContent.append(box);
             return;
         }
         const styleOptions = [
@@ -540,7 +624,6 @@ export function mountEditorWorkspace(container, session, options = {}) {
         const activeStyle = ctx.kind === 'editable' ? ctx.blockStyle : undefined;
         const selectedStyle = activeStyle ?? 'body';
         const selectedLabel = styleOptions.find(([v]) => v === selectedStyle)?.[1] ?? '正文';
-        const styleAnchor = el('div', 'idocs-ws-popover-anchor');
         const styleTrigger = el('button', 'idocs-ws-select-trigger');
         styleTrigger.type = 'button';
         styleTrigger.setAttribute('role', 'combobox');
@@ -596,11 +679,9 @@ export function mountEditorWorkspace(container, session, options = {}) {
         const toggleStylePopover = (forceOpen) => {
             if (styleTrigger.disabled)
                 return;
-            const shouldOpen = forceOpen ?? stylePopover.hidden;
-            closeAllPopovers();
+            const shouldOpen = forceOpen ?? Boolean(stylePopover.hidden);
+            toggleToolbarMenu(styleTrigger, stylePopover, shouldOpen);
             if (shouldOpen) {
-                stylePopover.hidden = false;
-                styleTrigger.setAttribute('aria-expanded', 'true');
                 syncStyleHighlight(Math.max(0, styleOptions.findIndex(([v]) => v === selectedStyle)));
             }
         };
@@ -637,8 +718,7 @@ export function mountEditorWorkspace(container, session, options = {}) {
             }
         });
         stylePopover.addEventListener('click', (event) => event.stopPropagation());
-        styleAnchor.append(styleTrigger, stylePopover);
-        box.append(styleAnchor, el('span', 'idocs-ws-divider'));
+        box.append(styleTrigger, stylePopover, el('span', 'idocs-ws-divider'));
         const collapsed = ctx.kind !== 'editable' || ctx.collapsed;
         const marks = [
             ['bold', '粗体', ICONS.bold],
@@ -660,7 +740,6 @@ export function mountEditorWorkspace(container, session, options = {}) {
             box.append(btn);
         }
         box.append(el('span', 'idocs-ws-divider'));
-        const alignAnchor = el('div', 'idocs-ws-popover-anchor');
         const alignBtn = el('button', 'idocs-ws-icon-btn');
         alignBtn.type = 'button';
         alignBtn.title = '对齐方式';
@@ -702,18 +781,14 @@ export function mountEditorWorkspace(container, session, options = {}) {
         }
         alignBtn.addEventListener('click', (event) => {
             event.stopPropagation();
-            const nextHidden = !alignPopover.hidden;
-            closeAllPopovers();
-            alignPopover.hidden = nextHidden;
-            alignBtn.setAttribute('aria-expanded', String(!nextHidden));
+            toggleToolbarMenu(alignBtn, alignPopover, Boolean(alignPopover.hidden));
         });
         alignPopover.addEventListener('click', (event) => event.stopPropagation());
-        alignAnchor.append(alignBtn, alignPopover);
-        box.append(alignAnchor);
-        tbCenter.append(box);
+        box.append(alignBtn, alignPopover);
+        tbContent.append(box);
     };
     const paintThumbnails = () => {
-        if (!activeDoc || railTab !== 'pages')
+        if (!railOpen || !activeDoc || railTab !== 'pages')
             return;
         const canvases = railList.querySelectorAll('.idocs-ws-thumb-canvas');
         const dpr = Math.max(1, Math.min(2, globalThis.devicePixelRatio || 1));
@@ -755,12 +830,37 @@ export function mountEditorWorkspace(container, session, options = {}) {
         });
     };
     const renderRail = () => {
+        if (!railOpen || (renderedRailDoc === activeDoc && renderedRailTab === railTab))
+            return;
+        renderedRailDoc = activeDoc;
+        renderedRailTab = railTab;
         lastOutlinePath = undefined;
         pagesTabBtn.setAttribute('aria-selected', String(railTab === 'pages'));
         outlineTabBtn.setAttribute('aria-selected', String(railTab === 'outline'));
         railList.classList.toggle('is-outline', railTab === 'outline');
         railList.innerHTML = '';
         if (railTab === 'pages') {
+            if (!sameImageList(lastThumbImages, activeDoc?.images ?? [])) {
+                const nextImages = activeDoc?.images ?? [];
+                lastThumbImages = nextImages;
+                for (const image of thumbImages)
+                    image?.close();
+                thumbImages = [];
+                if (nextImages.length > 0) {
+                    void decodeImages(nextImages).then((decoded) => {
+                        if (destroyed || lastThumbImages !== nextImages) {
+                            for (const image of decoded)
+                                image?.close();
+                            return;
+                        }
+                        thumbImages = decoded;
+                        if (railOpen)
+                            paintThumbnails();
+                        else
+                            renderedRailDoc = undefined;
+                    });
+                }
+            }
             const pages = activeDoc?.pages ?? [];
             if (pages.length === 0) {
                 railList.append(el('div', 'idocs-ws-empty', '正在加载页面…'));
@@ -780,7 +880,7 @@ export function mountEditorWorkspace(container, session, options = {}) {
                 sheet.append(canvas);
                 const label = el('span', 'idocs-ws-thumb-label', String(idx + 1));
                 label.setAttribute('aria-hidden', 'true');
-                card.append(sheet, label);
+                card.append(label, sheet);
                 card.addEventListener('click', () => view.goToPage(idx, { behavior: 'smooth' }));
                 railList.append(card);
             });
@@ -813,25 +913,9 @@ export function mountEditorWorkspace(container, session, options = {}) {
         redoBtn.disabled = readOnly || !state.canRedo;
     };
     const syncDocument = (doc) => {
+        if (doc === activeDoc)
+            return;
         activeDoc = doc;
-        if (!sameImageList(lastThumbImages, doc.images)) {
-            lastThumbImages = doc.images;
-            for (const img of thumbImages)
-                img?.close();
-            thumbImages = [];
-            if (doc.images.length > 0) {
-                const expected = doc;
-                void decodeImages(doc.images).then((decoded) => {
-                    if (destroyed || activeDoc !== expected) {
-                        for (const img of decoded)
-                            img?.close();
-                        return;
-                    }
-                    thumbImages = decoded;
-                    paintThumbnails();
-                });
-            }
-        }
         renderRail();
         renderToolbarCenter();
     };
@@ -880,7 +964,10 @@ export function mountEditorWorkspace(container, session, options = {}) {
     const unsubscribe = session.subscribe(onSessionState);
     onSessionState(session.state());
     syncZoom();
-    const onDocClick = () => closeAllPopovers();
+    const onDocClick = (event) => {
+        if (!event.composedPath().includes(tableAnchor))
+            closeAllPopovers();
+    };
     const onDocKeydown = (event) => {
         if (event.key === 'Escape')
             closeAllPopovers();
@@ -897,6 +984,13 @@ export function mountEditorWorkspace(container, session, options = {}) {
         railToggleBtn.title = label;
         railToggleBtn.setAttribute('aria-label', label);
         railToggleBtn.setAttribute('aria-expanded', String(open));
+        if (open) {
+            renderRail();
+            if (railTab === 'pages')
+                updateRailHighlight(view.currentPage);
+            else
+                updateOutlineHighlight(view.selection()?.path);
+        }
     };
     editorHost
         .querySelector('.idocs-preview-scroller')
@@ -935,36 +1029,33 @@ export function mountEditorWorkspace(container, session, options = {}) {
     findBtn.addEventListener('click', () => view.find.open());
     pillQuoteBtn?.addEventListener('click', () => {
         const sel = view.selection();
-        if (!sel || !sel.text)
+        const text = sel?.excerpt;
+        if (!sel || !text?.trim())
             return;
-        options.onQuoteSelection?.({ text: sel.text, path: sel.path, page: sel.page });
-    });
-    dockParaBtn.addEventListener('click', () => {
-        void view.insertBlock({ kind: 'paragraph' });
-    });
-    dockHeadingBtn.addEventListener('click', () => {
-        void view.insertBlock({ kind: 'heading', level: 2 });
-    });
-    dockCalloutBtn.addEventListener('click', () => {
-        void view.insertBlock({ kind: 'callout' });
+        options.onQuoteSelection?.({ text, path: sel.path, page: sel.page });
     });
-    dockPageBreakBtn.addEventListener('click', () => {
-        void view.insertBlock({ kind: 'pageBreak' });
-    });
-    dockImageBtn?.addEventListener('click', async () => {
-        const picked = await options.onPickImage?.();
-        if (picked && !destroyed) {
-            await view.insertBlock({ kind: 'image', src: picked.src, alt: picked.alt });
-        }
-    });
-    dockTableBtn.addEventListener('click', (event) => {
-        event.stopPropagation();
-        const nextHidden = !tablePopover.hidden;
-        closeAllPopovers();
-        tablePopover.hidden = nextHidden;
-        dockTableBtn.setAttribute('aria-expanded', String(!nextHidden));
-    });
-    tablePopover.addEventListener('click', (event) => event.stopPropagation());
+    const insertAndFocus = async (block) => {
+        const active = document.activeElement;
+        const commit = await view.insertBlock(block);
+        if (commit?.selection && !destroyed && !readOnly && document.activeElement === active)
+            view.focus();
+    };
+    dock.append(makeDockButton(ICONS.paragraph, '段落', () => void insertAndFocus({ kind: 'paragraph' })), makeDockButton(ICONS.heading, '标题', () => void insertAndFocus({ kind: 'heading', level: 2 })));
+    tableAnchor.prepend(makeDockButton(ICONS.table, '表格', () => {
+        closeToolbarMenu();
+        setTablePopoverOpen(Boolean(tablePopover.hidden));
+    }, tablePopover));
+    dock.append(tableAnchor, makeDockButton(ICONS.callout, '提示框', () => void insertAndFocus({ kind: 'callout', colors: options.calloutColors })));
+    if (options.onPickImage) {
+        dock.append(makeDockButton(ICONS.image, '图片', async () => {
+            const picked = await options.onPickImage?.();
+            if (picked && !destroyed) {
+                await view.insertBlock({ kind: 'image', src: picked.src, alt: picked.alt });
+            }
+        }));
+    }
+    dock.append(makeDockButton(ICONS.pageBreak, '分页符', () => void view.insertBlock({ kind: 'pageBreak' })));
+    const detachInsertButtons = options.mountInsertButtons?.(insertButtons);
     tableGrid.addEventListener('mouseover', (event) => {
         const cell = event.target?.closest('.idocs-ws-table-cell');
         if (!cell)
@@ -1015,10 +1106,12 @@ export function mountEditorWorkspace(container, session, options = {}) {
             if (destroyed)
                 return;
             destroyed = true;
+            toolbarScroller.destroy();
             document.removeEventListener('click', onDocClick);
             document.removeEventListener('keydown', onDocKeydown);
             unsubscribe();
             view.destroy();
+            detachInsertButtons?.();
             for (const img of thumbImages)
                 img?.close();
             thumbImages = [];

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@aseity/idocs-preview",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Browser preview and editor for iDocs source documents, with DOCX preview and export, Web Worker layout, and Canvas rendering.",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ty026/idocs.git",
+    "directory": "web"
+  },
   "type": "module",
   "exports": {
     "./core": {
@@ -36,7 +41,7 @@
     "predev": "node scripts/build-wasm.mjs",
     "dev": "vite dev",
     "changeset": "changeset",
-    "release:version": "changeset version && npm install --package-lock-only",
+    "release:version": "changeset version && npm install --package-lock-only --ignore-scripts --no-audit --no-fund",
     "release:check": "node scripts/release-pack.mjs"
   },
   "engines": {