shanxia2.0/docs/superpowers/plans/2026-10-29-tinymce-table-edge-resize.md

富文本表格边缘拖拽 Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 在 TinyMCE 里只通过第一行右边界调列宽、第一列下边界调行高，拖宽一列时整张表变宽。

Architecture: 列宽、行高的数值变化放在纯函数里。编辑器里另挂一层短句柄，只在鼠标靠近对应边界时出现；松手才记入撤销。打开编辑器时不改表格 HTML。

Tech Stack: Vue 3、TinyMCE、Node node:test。

---

Task 1: 列宽与行高纯函数

Files:

• Create: web-admin/src/utils/tinymce-table-edge-resize.ts

• Test: web-admin/src/utils/tinymce-table-edge-resize.test.ts

• Step 1: 写出失败测试

applyColumnWidthDelta([100, 36, 46], 1, 20) 得到宽度 [100, 56, 46]、表宽 202。位移 -100 时该列停在 28。applyRowHeightDelta(30, -40) 得到 20。

• Step 2: 运行测试确认失败

Run: node --experimental-strip-types --test src/utils/tinymce-table-edge-resize.test.ts
Expected: FAIL，模块尚不存在。

• Step 3: 实现纯函数并通过测试

列宽下限 28，行高下限 20。只改目标列，表宽等于各列之和。

• Step 4: 再跑测试

Expected: PASS。

Task 2: 编辑器短句柄

Files:

• Modify: web-admin/src/utils/tinymce-table-edge-resize.ts

• Modify: web-admin/src/components/TinyMceEditor/index.vue

• Modify: 合同弹窗、合同详情、报价弹窗里的编辑提示

• Step 1: setupTableEdgeResize

只读不挂句柄。句柄带 data-mce-bogus="all"，保存内容时不带上。第一行且 colspan === 1 的格子右边界调列宽；该行从第 1 列起始的格子下边界调行高。拖列时写入 col、表头单元格、表宽和同样的 max-width。拖行时只写该行高度。

• Step 2: 在 TinyMceEditor 的 setup 中调用

原生 table_resize_bars 保持 false。

• Step 3: 提示文案改为「表头右边界调列宽，每行最左格下边界调行高」