@mce/table 0.24.4

package/dist/index.js

@@ -0,0 +1,1227 @@
+import { TextEditor, definePlugin, useEditor } from "mce";
+import { normalizeTextContent, textContentToString } from "modern-idoc";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeMount, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, vShow, watch, withDirectives, withModifiers } from "vue";
+//#region src/table.ts
+var DEFAULT_COL_WIDTH = 100;
+var DEFAULT_ROW_HEIGHT = 40;
+/** White cell fill so the canvas renders a solid table (not a transparent grid). */
+var CELL_BACKGROUND = "#ffffff";
+/** 1px gridline drawn by the canvas on each cell. */
+var CELL_BORDER_STYLE = {
+	borderColor: "#e5e7eb",
+	borderWidth: 1,
+	borderStyle: "solid",
+	boxSizing: "border-box"
+};
+function clone(value) {
+	return JSON.parse(JSON.stringify(value ?? null));
+}
+function defaultTextStyle(header = false) {
+	return {
+		fontSize: 13,
+		color: "#333333",
+		textAlign: "center",
+		verticalAlign: "middle",
+		fontWeight: header ? 700 : 400
+	};
+}
+/**
+* Build a fresh cell child. The text element is given a `width`/`height` to fill
+* its cell at render time (see {@link modelToTable}) so `verticalAlign` centers
+* the text — the canvas has no flex/percent path that does this otherwise.
+*/
+function createCellChild(text = "", refStyle) {
+	return {
+		style: refStyle ? clone(refStyle) : defaultTextStyle(),
+		text: { content: normalizeTextContent(text) },
+		meta: { inCanvasIs: "Element2D" }
+	};
+}
+function createCell(row, col, ref) {
+	return {
+		row,
+		col,
+		background: ref?.background ?? "#ffffff",
+		style: ref?.style ? clone(ref.style) : { ...CELL_BORDER_STYLE },
+		children: [createCellChild("", ref?.children?.[0]?.style)]
+	};
+}
+/** Deep-clone a live (normalized) table into an editable model. */
+function cloneTableModel(table) {
+	return {
+		columns: (table.columns ?? []).map((c) => ({ width: c.width ?? DEFAULT_COL_WIDTH })),
+		rows: (table.rows ?? []).map((r) => ({ height: r.height ?? DEFAULT_ROW_HEIGHT })),
+		cells: clone(table.cells ?? [])
+	};
+}
+/**
+* Serialise the model into the shape `Element2DTable.setProperties` accepts,
+* sizing each cell's text child to its (possibly merged) cell rect so the
+* canvas vertically/horizontally centers the text.
+*/
+function modelToTable(model) {
+	const cells = clone(model.cells).map((cell) => {
+		const rect = getCellRect(model, cell);
+		const child = cell.children?.[0];
+		if (child) child.style = {
+			...child.style,
+			width: rect.width,
+			height: rect.height
+		};
+		return cell;
+	});
+	return {
+		columns: model.columns.map((c) => ({ width: c.width })),
+		rows: model.rows.map((r) => ({ height: r.height })),
+		cells
+	};
+}
+function gridWidth(model) {
+	return model.columns.reduce((sum, c) => sum + (c.width || 0), 0);
+}
+function gridHeight(model) {
+	return model.rows.reduce((sum, r) => sum + (r.height || 0), 0);
+}
+function colLeft(model, col) {
+	let x = 0;
+	for (let i = 0; i < col && i < model.columns.length; i++) x += model.columns[i].width || 0;
+	return x;
+}
+function rowTop(model, row) {
+	let y = 0;
+	for (let i = 0; i < row && i < model.rows.length; i++) y += model.rows[i].height || 0;
+	return y;
+}
+function cellRowSpan(cell) {
+	return Math.max(1, cell.rowSpan ?? 1);
+}
+function cellColSpan(cell) {
+	return Math.max(1, cell.colSpan ?? 1);
+}
+/** Pixel rect (relative to the table's top-left) for an anchor cell. */
+function getCellRect(model, cell) {
+	const left = colLeft(model, cell.col);
+	const top = rowTop(model, cell.row);
+	let width = 0;
+	for (let c = cell.col; c < cell.col + cellColSpan(cell) && c < model.columns.length; c++) width += model.columns[c].width || 0;
+	let height = 0;
+	for (let r = cell.row; r < cell.row + cellRowSpan(cell) && r < model.rows.length; r++) height += model.rows[r].height || 0;
+	return {
+		left,
+		top,
+		width,
+		height
+	};
+}
+function cellRange(cell) {
+	return {
+		minRow: cell.row,
+		minCol: cell.col,
+		maxRow: cell.row + cellRowSpan(cell) - 1,
+		maxCol: cell.col + cellColSpan(cell) - 1
+	};
+}
+/** Map every covered grid position `"row:col"` to its anchor cell. */
+function buildCoverage(model) {
+	const map = /* @__PURE__ */ new Map();
+	for (const cell of model.cells) for (let r = cell.row; r < cell.row + cellRowSpan(cell); r++) for (let c = cell.col; c < cell.col + cellColSpan(cell); c++) map.set(`${r}:${c}`, cell);
+	return map;
+}
+function getCellAt(model, row, col) {
+	return buildCoverage(model).get(`${row}:${col}`);
+}
+function getCellText(cell) {
+	const content = cell?.children?.[0]?.text?.content;
+	return content ? textContentToString(content) : "";
+}
+function setCellText(cell, text) {
+	if (!cell.children?.length) {
+		cell.children = [createCellChild(text)];
+		return;
+	}
+	const child = cell.children[0];
+	if (!child.text) child.text = {};
+	child.text.content = normalizeTextContent(text);
+}
+/**
+* Expand a raw selection so it never cuts through a merged cell — any cell
+* whose span overlaps the range pulls the range out to cover it fully.
+*/
+function normalizeRange(model, range) {
+	const result = { ...range };
+	let changed = true;
+	while (changed) {
+		changed = false;
+		for (const cell of model.cells) {
+			const cr = cellRange(cell);
+			if (!(cr.minRow <= result.maxRow && cr.maxRow >= result.minRow && cr.minCol <= result.maxCol && cr.maxCol >= result.minCol)) continue;
+			if (cr.minRow < result.minRow) {
+				result.minRow = cr.minRow;
+				changed = true;
+			}
+			if (cr.minCol < result.minCol) {
+				result.minCol = cr.minCol;
+				changed = true;
+			}
+			if (cr.maxRow > result.maxRow) {
+				result.maxRow = cr.maxRow;
+				changed = true;
+			}
+			if (cr.maxCol > result.maxCol) {
+				result.maxCol = cr.maxCol;
+				changed = true;
+			}
+		}
+	}
+	return result;
+}
+/** Fill any uncovered grid position with a fresh 1×1 cell; clamp out-of-range spans. */
+function repairModel(model) {
+	const numRows = model.rows.length;
+	const numCols = model.columns.length;
+	model.cells = model.cells.filter((cell) => cell.row < numRows && cell.col < numCols && cell.row >= 0 && cell.col >= 0);
+	for (const cell of model.cells) {
+		cell.rowSpan = Math.min(cellRowSpan(cell), numRows - cell.row);
+		cell.colSpan = Math.min(cellColSpan(cell), numCols - cell.col);
+		if (cell.rowSpan <= 1) delete cell.rowSpan;
+		if (cell.colSpan <= 1) delete cell.colSpan;
+	}
+	const claimed = /* @__PURE__ */ new Map();
+	model.cells = model.cells.filter((cell) => {
+		if (claimed.has(`${cell.row}:${cell.col}`)) return false;
+		claimed.set(`${cell.row}:${cell.col}`, cell);
+		return true;
+	});
+	const coverage = buildCoverage(model);
+	for (let r = 0; r < numRows; r++) for (let c = 0; c < numCols; c++) if (!coverage.get(`${r}:${c}`)) {
+		const cell = createCell(r, c);
+		model.cells.push(cell);
+		coverage.set(`${r}:${c}`, cell);
+	}
+	model.cells.sort((a, b) => a.row - b.row || a.col - b.col);
+}
+function insertRow(model, index) {
+	const numCols = model.columns.length;
+	const refHeight = model.rows[Math.min(index, model.rows.length - 1)]?.height ?? DEFAULT_ROW_HEIGHT;
+	model.rows.splice(index, 0, { height: refHeight });
+	for (const cell of model.cells) {
+		const span = cellRowSpan(cell);
+		if (index <= cell.row) cell.row += 1;
+		else if (index < cell.row + span) cell.rowSpan = span + 1;
+	}
+	const coverage = buildCoverage(model);
+	for (let c = 0; c < numCols; c++) if (!coverage.get(`${index}:${c}`)) {
+		const above = coverage.get(`${index - 1}:${c}`) ?? coverage.get(`${index + 1}:${c}`);
+		model.cells.push(createCell(index, c, above));
+	}
+	repairModel(model);
+}
+function insertColumn(model, index) {
+	const numRows = model.rows.length;
+	const refWidth = model.columns[Math.min(index, model.columns.length - 1)]?.width ?? DEFAULT_COL_WIDTH;
+	model.columns.splice(index, 0, { width: refWidth });
+	for (const cell of model.cells) {
+		const span = cellColSpan(cell);
+		if (index <= cell.col) cell.col += 1;
+		else if (index < cell.col + span) cell.colSpan = span + 1;
+	}
+	const coverage = buildCoverage(model);
+	for (let r = 0; r < numRows; r++) if (!coverage.get(`${r}:${index}`)) {
+		const before = coverage.get(`${r}:${index - 1}`) ?? coverage.get(`${r}:${index + 1}`);
+		model.cells.push(createCell(r, index, before));
+	}
+	repairModel(model);
+}
+function removeRow(model, index) {
+	if (model.rows.length <= 1) return;
+	model.rows.splice(index, 1);
+	const next = [];
+	for (const cell of model.cells) {
+		const span = cellRowSpan(cell);
+		const last = cell.row + span - 1;
+		if (index < cell.row) {
+			cell.row -= 1;
+			next.push(cell);
+		} else if (index > last) next.push(cell);
+		else {
+			if (span <= 1) continue;
+			cell.rowSpan = span - 1;
+			next.push(cell);
+		}
+	}
+	model.cells = next;
+	repairModel(model);
+}
+function removeColumn(model, index) {
+	if (model.columns.length <= 1) return;
+	model.columns.splice(index, 1);
+	const next = [];
+	for (const cell of model.cells) {
+		const span = cellColSpan(cell);
+		const last = cell.col + span - 1;
+		if (index < cell.col) {
+			cell.col -= 1;
+			next.push(cell);
+		} else if (index > last) next.push(cell);
+		else {
+			if (span <= 1) continue;
+			cell.colSpan = span - 1;
+			next.push(cell);
+		}
+	}
+	model.cells = next;
+	repairModel(model);
+}
+/** Merge a (normalized) range into its top-left cell, dropping the rest. */
+function mergeRange(model, range) {
+	const r = normalizeRange(model, range);
+	if (r.minRow === r.maxRow && r.minCol === r.maxCol) return void 0;
+	const anchor = getCellAt(model, r.minRow, r.minCol);
+	if (!anchor) return void 0;
+	anchor.row = r.minRow;
+	anchor.col = r.minCol;
+	anchor.rowSpan = r.maxRow - r.minRow + 1;
+	anchor.colSpan = r.maxCol - r.minCol + 1;
+	model.cells = model.cells.filter((cell) => {
+		if (cell === anchor) return true;
+		return cell.row < r.minRow || cell.row > r.maxRow || cell.col < r.minCol || cell.col > r.maxCol;
+	});
+	if (anchor.rowSpan <= 1) delete anchor.rowSpan;
+	if (anchor.colSpan <= 1) delete anchor.colSpan;
+	model.cells.sort((a, b) => a.row - b.row || a.col - b.col);
+	return anchor;
+}
+/** Reset a merged cell back to 1×1, re-filling the freed positions. */
+function splitCell(model, cell) {
+	if (cellRowSpan(cell) <= 1 && cellColSpan(cell) <= 1) return;
+	delete cell.rowSpan;
+	delete cell.colSpan;
+	repairModel(model);
+}
+function isMergedCell(cell) {
+	return cellRowSpan(cell) > 1 || cellColSpan(cell) > 1;
+}
+//#endregion
+//#region src/create.ts
+/** A grid table backed by the native `table` element property; first row is a header. */
+function createTableElement(rows = 3, cols = 3, options = {}) {
+	const { width = 360, height = 160 } = options;
+	const colWidth = width / cols;
+	const rowHeight = height / rows;
+	const cells = [];
+	for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) cells.push({
+		row: r,
+		col: c,
+		background: CELL_BACKGROUND,
+		style: { ...CELL_BORDER_STYLE },
+		children: [{
+			style: {
+				...defaultTextStyle(r === 0),
+				width: colWidth,
+				height: rowHeight
+			},
+			text: { content: normalizeTextContent(r === 0 ? `列 ${c + 1}` : "") },
+			meta: { inCanvasIs: "Element2D" }
+		}]
+	});
+	return {
+		style: {
+			width,
+			height
+		},
+		table: {
+			columns: Array.from({ length: cols }, () => ({ width: colWidth })),
+			rows: Array.from({ length: rows }, () => ({ height: rowHeight })),
+			cells
+		},
+		meta: {
+			inPptIs: "Shape",
+			inCanvasIs: "Element2D",
+			inEditorIs: "Table"
+		}
+	};
+}
+//#endregion
+//#region src/TableEditor.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-table-editor__bar-name" };
+var _hoisted_2 = { class: "m-table-editor__bar-content" };
+var _hoisted_3 = ["onPointerdown"];
+var _hoisted_4 = ["onPointerdown"];
+var _hoisted_5 = ["onPointerdown"];
+var _hoisted_6 = ["onPointerdown"];
+var _hoisted_7 = [
+	"onPointerdown",
+	"onPointerenter",
+	"onDblclick",
+	"onContextmenu"
+];
+var _hoisted_8 = ["disabled"];
+var _hoisted_9 = ["disabled"];
+var COL_H = 22;
+var ROW_W = 28;
+var BAR_H = 26;
+//#endregion
+//#region src/TableEditor.vue
+var TableEditor_default = /* @__PURE__ */ defineComponent({
+	__name: "TableEditor",
+	setup(__props) {
+		const { elementSelection, state, getObb, camera, t } = useEditor();
+		function colLabel(index) {
+			let s = "";
+			let n = index;
+			do {
+				s = String.fromCharCode(65 + n % 26) + s;
+				n = Math.floor(n / 26) - 1;
+			} while (n >= 0);
+			return s;
+		}
+		const editingEl = ref();
+		const model = ref();
+		const anchor = ref({
+			row: 0,
+			col: 0
+		});
+		const focus = ref({
+			row: 0,
+			col: 0
+		});
+		const editingPos = ref(null);
+		const selecting = ref(false);
+		const menu = ref(null);
+		const textHost = ref();
+		let textEditorEl;
+		const editingChild = ref();
+		let clipboard = null;
+		const active = computed(() => state.value === "tableEditing" && !!model.value);
+		const mainStyleWithScale = computed(() => {
+			const { zoom, position } = camera.value;
+			return {
+				transformOrigin: "left top",
+				transform: `translate(${-position.x}px, ${-position.y}px) scale(${zoom.x}, ${zoom.y})`
+			};
+		});
+		const tableBoxStyle = computed(() => {
+			const el = editingEl.value;
+			if (!el) return {};
+			const obb = getObb(el);
+			return {
+				left: `${obb.left}px`,
+				top: `${obb.top}px`,
+				width: `${gridWidth(model.value)}px`,
+				height: `${gridHeight(model.value)}px`,
+				transform: obb.rotationDegrees ? `rotate(${obb.rotationDegrees}deg)` : void 0,
+				transformOrigin: "center center"
+			};
+		});
+		const renderCells = computed(() => {
+			const m = model.value;
+			if (!m) return [];
+			return m.cells.map((cell) => ({
+				cell,
+				rect: getCellRect(m, cell)
+			}));
+		});
+		const colBoundaries = computed(() => {
+			const m = model.value;
+			if (!m) return [];
+			return m.columns.map((_, i) => colLeft(m, i + 1));
+		});
+		const rowBoundaries = computed(() => {
+			const m = model.value;
+			if (!m) return [];
+			return m.rows.map((_, i) => rowTop(m, i + 1));
+		});
+		const selectionRange = computed(() => {
+			const m = model.value;
+			if (!m) return {
+				minRow: 0,
+				minCol: 0,
+				maxRow: 0,
+				maxCol: 0
+			};
+			return normalizeRange(m, {
+				minRow: Math.min(anchor.value.row, focus.value.row),
+				minCol: Math.min(anchor.value.col, focus.value.col),
+				maxRow: Math.max(anchor.value.row, focus.value.row),
+				maxCol: Math.max(anchor.value.col, focus.value.col)
+			});
+		});
+		const selectionRectStyle = computed(() => {
+			const m = model.value;
+			if (!m) return {};
+			const r = selectionRange.value;
+			const left = colLeft(m, r.minCol);
+			const top = rowTop(m, r.minRow);
+			let width = 0;
+			for (let c = r.minCol; c <= r.maxCol; c++) width += m.columns[c]?.width || 0;
+			let height = 0;
+			for (let row = r.minRow; row <= r.maxRow; row++) height += m.rows[row]?.height || 0;
+			return {
+				left: `${left}px`,
+				top: `${top}px`,
+				width: `${width}px`,
+				height: `${height}px`
+			};
+		});
+		const isSingleSelection = computed(() => {
+			const r = selectionRange.value;
+			return r.minRow === r.maxRow && r.minCol === r.maxCol;
+		});
+		const activeCellRef = computed(() => `${colLabel(focus.value.col)}${focus.value.row + 1}`);
+		const activeCellText = computed(() => getCellText(model.value ? getCellAt(model.value, focus.value.row, focus.value.col) : void 0));
+		function isColActive(ci) {
+			const r = selectionRange.value;
+			return ci >= r.minCol && ci <= r.maxCol;
+		}
+		function isRowActive(ri) {
+			const r = selectionRange.value;
+			return ri >= r.minRow && ri <= r.maxRow;
+		}
+		const selectedAnchorMerged = computed(() => {
+			const m = model.value;
+			if (!m) return false;
+			const cell = getCellAt(m, selectionRange.value.minRow, selectionRange.value.minCol);
+			return cell ? isMergedCell(cell) : false;
+		});
+		const editingChildStyle = computed(() => {
+			const child = editingChild.value;
+			if (!child) return { display: "none" };
+			const obb = getObb(child);
+			const textBox = child.text?.base?.boundingBox;
+			if (textBox) {
+				obb.left += textBox.left;
+				obb.top += textBox.top;
+			}
+			return obb.toCssStyle();
+		});
+		function flush() {
+			const el = editingEl.value;
+			const m = model.value;
+			if (!el || !m) return;
+			el.style.width = gridWidth(m);
+			el.style.height = gridHeight(m);
+			el.table.setProperties(modelToTable(m));
+		}
+		function enter(el) {
+			editingEl.value = el;
+			model.value = cloneTableModel(el.table);
+			anchor.value = {
+				row: 0,
+				col: 0
+			};
+			focus.value = {
+				row: 0,
+				col: 0
+			};
+			editingPos.value = null;
+			menu.value = null;
+		}
+		function exit() {
+			commitEdit();
+			flush();
+			editingEl.value = void 0;
+			model.value = void 0;
+			editingPos.value = null;
+			selecting.value = false;
+			menu.value = null;
+		}
+		watch(() => state.value, (now, prev) => {
+			if (now === "tableEditing" && prev !== "tableEditing") {
+				const el = elementSelection.value[0];
+				if (el?.table.isValid()) enter(el);
+				else state.value = void 0;
+			} else if (prev === "tableEditing" && now !== "tableEditing") exit();
+		});
+		function selectCell(pos, extend = false) {
+			closeMenu();
+			if (!extend) anchor.value = { ...pos };
+			focus.value = { ...pos };
+		}
+		function onCellPointerdown(e, cell) {
+			if (e.button === 2) return;
+			if (editingPos.value && editingPos.value.row === cell.row && editingPos.value.col === cell.col) return;
+			e.stopPropagation();
+			commitEdit();
+			const pos = {
+				row: cell.row,
+				col: cell.col
+			};
+			if (e.shiftKey) selectCell(pos, true);
+			else {
+				selectCell(pos);
+				selecting.value = true;
+			}
+		}
+		function onCellPointerenter(cell) {
+			if (selecting.value) focus.value = {
+				row: cell.row,
+				col: cell.col
+			};
+		}
+		function onCellDblclick(e, cell) {
+			e.stopPropagation();
+			startEdit({
+				row: cell.row,
+				col: cell.col
+			});
+		}
+		function onWindowPointerup() {
+			selecting.value = false;
+		}
+		function selectColumn(col) {
+			closeMenu();
+			commitEdit();
+			const m = model.value;
+			anchor.value = {
+				row: 0,
+				col
+			};
+			focus.value = {
+				row: m.rows.length - 1,
+				col
+			};
+		}
+		function selectRow(row) {
+			closeMenu();
+			commitEdit();
+			const m = model.value;
+			anchor.value = {
+				row,
+				col: 0
+			};
+			focus.value = {
+				row,
+				col: m.columns.length - 1
+			};
+		}
+		function selectAll() {
+			closeMenu();
+			commitEdit();
+			const m = model.value;
+			anchor.value = {
+				row: 0,
+				col: 0
+			};
+			focus.value = {
+				row: m.rows.length - 1,
+				col: m.columns.length - 1
+			};
+		}
+		function startEdit(pos) {
+			const m = model.value;
+			const el = editingEl.value;
+			const cell = getCellAt(m, pos.row, pos.col);
+			if (!cell || !el) return;
+			anchor.value = {
+				row: cell.row,
+				col: cell.col
+			};
+			focus.value = {
+				row: cell.row,
+				col: cell.col
+			};
+			const child = (el.table._cellNodes?.get(`${cell.row}:${cell.col}`))?.children?.[0];
+			if (!child) return;
+			const isEmpty = !getCellText(cell);
+			editingChild.value = child;
+			editingPos.value = {
+				row: cell.row,
+				col: cell.col
+			};
+			nextTick(() => {
+				const editor = textEditorEl;
+				if (!editor || editingChild.value !== child) return;
+				if (isEmpty) child.text.setContent(" ");
+				child.text.update();
+				editor.set(child.text.base);
+				editor.selectAll();
+				requestAnimationFrame(() => {
+					if (editingChild.value === child) editor.selectAll();
+				});
+			});
+		}
+		function commitEdit() {
+			const pos = editingPos.value;
+			const child = editingChild.value;
+			const m = model.value;
+			editingPos.value = null;
+			editingChild.value = void 0;
+			if (!pos || !child || !m) return;
+			const cell = getCellAt(m, pos.row, pos.col);
+			if (cell) {
+				const content = (child.text?.base)?.content;
+				if ((Array.isArray(content) ? content.flatMap((p) => (p.fragments ?? []).map((f) => f.content)).join("") : "").trim() === "") setCellText(cell, "");
+				else if (content) {
+					if (!cell.children?.length) cell.children = [{
+						text: {},
+						meta: { inCanvasIs: "Element2D" }
+					}];
+					if (!cell.children[0].text) cell.children[0].text = {};
+					cell.children[0].text.content = JSON.parse(JSON.stringify(content));
+				}
+				flush();
+			}
+		}
+		function cancelEdit() {
+			const child = editingChild.value;
+			const pos = editingPos.value;
+			const m = model.value;
+			editingPos.value = null;
+			editingChild.value = void 0;
+			if (child && pos && m) {
+				const content = getCellAt(m, pos.row, pos.col)?.children?.[0]?.text?.content;
+				child.text.base.content = content ? JSON.parse(JSON.stringify(content)) : [];
+				child.text.update();
+				editingEl.value?.requestRender?.();
+			}
+		}
+		function onTextUpdate() {
+			editingEl.value?.requestRender?.();
+		}
+		function withMutation(fn) {
+			commitEdit();
+			closeMenu();
+			fn();
+			flush();
+		}
+		function doInsertRow(offset) {
+			withMutation(() => insertRow(model.value, selectionRange.value.minRow + offset));
+		}
+		function doInsertColumn(offset) {
+			withMutation(() => insertColumn(model.value, selectionRange.value.minCol + offset));
+		}
+		function doRemoveRows() {
+			withMutation(() => {
+				const r = selectionRange.value;
+				for (let row = r.maxRow; row >= r.minRow; row--) removeRow(model.value, row);
+				clampSelection();
+			});
+		}
+		function doRemoveColumns() {
+			withMutation(() => {
+				const r = selectionRange.value;
+				for (let col = r.maxCol; col >= r.minCol; col--) removeColumn(model.value, col);
+				clampSelection();
+			});
+		}
+		function doMerge() {
+			withMutation(() => {
+				const cell = mergeRange(model.value, selectionRange.value);
+				if (cell) {
+					anchor.value = {
+						row: cell.row,
+						col: cell.col
+					};
+					focus.value = {
+						row: cell.row,
+						col: cell.col
+					};
+				}
+			});
+		}
+		function doSplit() {
+			withMutation(() => {
+				const cell = getCellAt(model.value, selectionRange.value.minRow, selectionRange.value.minCol);
+				if (cell) splitCell(model.value, cell);
+			});
+		}
+		function clampSelection() {
+			const m = model.value;
+			const maxRow = m.rows.length - 1;
+			const maxCol = m.columns.length - 1;
+			anchor.value = {
+				row: Math.min(anchor.value.row, maxRow),
+				col: Math.min(anchor.value.col, maxCol)
+			};
+			focus.value = {
+				row: Math.min(focus.value.row, maxRow),
+				col: Math.min(focus.value.col, maxCol)
+			};
+		}
+		function onColResizeDown(e, col) {
+			e.stopPropagation();
+			e.preventDefault();
+			const m = model.value;
+			const startX = e.clientX;
+			const startWidth = m.columns[col].width;
+			const target = e.currentTarget;
+			target.setPointerCapture(e.pointerId);
+			const move = (ev) => {
+				const delta = (ev.clientX - startX) / camera.value.zoom.x;
+				m.columns[col].width = Math.max(20, Math.round(startWidth + delta));
+				flush();
+			};
+			const up = (ev) => {
+				target.releasePointerCapture?.(ev.pointerId);
+				target.removeEventListener("pointermove", move);
+				target.removeEventListener("pointerup", up);
+			};
+			target.addEventListener("pointermove", move);
+			target.addEventListener("pointerup", up);
+		}
+		function onRowResizeDown(e, row) {
+			e.stopPropagation();
+			e.preventDefault();
+			const m = model.value;
+			const startY = e.clientY;
+			const startHeight = m.rows[row].height;
+			const target = e.currentTarget;
+			target.setPointerCapture(e.pointerId);
+			const move = (ev) => {
+				const delta = (ev.clientY - startY) / camera.value.zoom.y;
+				m.rows[row].height = Math.max(20, Math.round(startHeight + delta));
+				flush();
+			};
+			const up = (ev) => {
+				target.releasePointerCapture?.(ev.pointerId);
+				target.removeEventListener("pointermove", move);
+				target.removeEventListener("pointerup", up);
+			};
+			target.addEventListener("pointermove", move);
+			target.addEventListener("pointerup", up);
+		}
+		function onCellContextmenu(e, cell) {
+			e.preventDefault();
+			e.stopPropagation();
+			const r = selectionRange.value;
+			if (!(cell.row >= r.minRow && cell.row <= r.maxRow && cell.col >= r.minCol && cell.col <= r.maxCol)) selectCell({
+				row: cell.row,
+				col: cell.col
+			});
+			menu.value = {
+				x: e.clientX,
+				y: e.clientY
+			};
+		}
+		function closeMenu() {
+			menu.value = null;
+		}
+		function copySelection(cut = false) {
+			const m = model.value;
+			const r = selectionRange.value;
+			const texts = [];
+			for (let row = r.minRow; row <= r.maxRow; row++) {
+				const line = [];
+				for (let col = r.minCol; col <= r.maxCol; col++) {
+					const cell = getCellAt(m, row, col);
+					line.push(cell && cell.row === row && cell.col === col ? getCellText(cell) : "");
+				}
+				texts.push(line);
+			}
+			clipboard = {
+				rows: r.maxRow - r.minRow + 1,
+				cols: r.maxCol - r.minCol + 1,
+				texts
+			};
+			try {
+				navigator.clipboard?.writeText(texts.map((line) => line.join("	")).join("\n"));
+			} catch {}
+			if (cut) clearSelection();
+		}
+		function pasteClipboard() {
+			if (!clipboard) return;
+			const m = model.value;
+			const r = selectionRange.value;
+			for (let i = 0; i < clipboard.rows; i++) for (let j = 0; j < clipboard.cols; j++) {
+				const cell = getCellAt(m, r.minRow + i, r.minCol + j);
+				if (cell && cell.row === r.minRow + i && cell.col === r.minCol + j) setCellText(cell, clipboard.texts[i][j]);
+			}
+			flush();
+		}
+		function clearSelection() {
+			const m = model.value;
+			const r = selectionRange.value;
+			for (const cell of m.cells) {
+				const cr = cellRange(cell);
+				if (cr.minRow >= r.minRow && cr.maxRow <= r.maxRow && cr.minCol >= r.minCol && cr.maxCol <= r.maxCol) setCellText(cell, "");
+			}
+			flush();
+		}
+		function moveFocus(dRow, dCol, extend = false) {
+			const m = model.value;
+			selectCell({
+				row: Math.max(0, Math.min(m.rows.length - 1, focus.value.row + dRow)),
+				col: Math.max(0, Math.min(m.columns.length - 1, focus.value.col + dCol))
+			}, extend);
+		}
+		function onKeydown(e) {
+			if (!active.value) return;
+			if (editingPos.value) {
+				if (e.key === "Enter" && !e.shiftKey) {
+					e.preventDefault();
+					e.stopPropagation();
+					commitEdit();
+					moveFocus(1, 0);
+				} else if (e.key === "Escape") {
+					e.preventDefault();
+					e.stopPropagation();
+					cancelEdit();
+				} else if (e.key === "Tab") {
+					e.preventDefault();
+					e.stopPropagation();
+					commitEdit();
+					moveFocus(0, e.shiftKey ? -1 : 1);
+				}
+				return;
+			}
+			if (e.ctrlKey || e.metaKey) {
+				switch (e.key.toLowerCase()) {
+					case "a":
+						e.preventDefault();
+						selectAll();
+						return;
+					case "c":
+						e.preventDefault();
+						copySelection();
+						return;
+					case "x":
+						e.preventDefault();
+						copySelection(true);
+						return;
+					case "v":
+						e.preventDefault();
+						pasteClipboard();
+						return;
+				}
+				return;
+			}
+			switch (e.key) {
+				case "Escape":
+					e.preventDefault();
+					state.value = void 0;
+					break;
+				case "Enter":
+				case "F2":
+					e.preventDefault();
+					startEdit(focus.value);
+					break;
+				case "Delete":
+				case "Backspace":
+					e.preventDefault();
+					clearSelection();
+					break;
+				case "Tab":
+					e.preventDefault();
+					moveFocus(0, e.shiftKey ? -1 : 1);
+					break;
+				case "ArrowUp":
+					e.preventDefault();
+					moveFocus(-1, 0, e.shiftKey);
+					break;
+				case "ArrowDown":
+					e.preventDefault();
+					moveFocus(1, 0, e.shiftKey);
+					break;
+				case "ArrowLeft":
+					e.preventDefault();
+					moveFocus(0, -1, e.shiftKey);
+					break;
+				case "ArrowRight":
+					e.preventDefault();
+					moveFocus(0, 1, e.shiftKey);
+					break;
+			}
+		}
+		onBeforeMount(() => {
+			TextEditor.register();
+		});
+		onMounted(() => {
+			const el = document.createElement("text-editor");
+			el.className = "m-table-editor__text-editor";
+			el.style.setProperty("--color", "var(--m-theme-primary)");
+			el.addEventListener("update", onTextUpdate);
+			el.addEventListener("submit", () => commitEdit());
+			textHost.value?.appendChild(el);
+			textEditorEl = el;
+			window.addEventListener("keydown", onKeydown, true);
+			window.addEventListener("pointerup", onWindowPointerup);
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("keydown", onKeydown, true);
+			window.removeEventListener("pointerup", onWindowPointerup);
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", {
+				class: "m-table-editor",
+				style: normalizeStyle(mainStyleWithScale.value),
+				onContextmenu: _cache[13] || (_cache[13] = withModifiers(() => {}, ["prevent"]))
+			}, [
+				model.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "m-table-editor__box",
+					style: normalizeStyle(tableBoxStyle.value),
+					onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+				}, [
+					createElementVNode("div", {
+						class: "m-table-editor__bar",
+						style: normalizeStyle({
+							left: `-28px`,
+							top: `-48px`,
+							width: `${ROW_W + unref(gridWidth)(model.value)}px`,
+							height: `${BAR_H}px`
+						})
+					}, [createElementVNode("div", _hoisted_1, toDisplayString(activeCellRef.value), 1), createElementVNode("div", _hoisted_2, toDisplayString(activeCellText.value), 1)], 4),
+					createElementVNode("div", {
+						class: "m-table-editor__corner",
+						style: normalizeStyle({
+							left: `-28px`,
+							top: `-22px`,
+							width: `${ROW_W}px`,
+							height: `${COL_H}px`
+						}),
+						onPointerdown: withModifiers(selectAll, ["stop"])
+					}, null, 36),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(model.value.columns, (col, ci) => {
+						return openBlock(), createElementBlock("div", {
+							key: `ch-${ci}`,
+							class: normalizeClass(["m-table-editor__col-header", { "m-table-editor__col-header--active": isColActive(ci) }]),
+							style: normalizeStyle({
+								left: `${unref(colLeft)(model.value, ci)}px`,
+								top: `-22px`,
+								width: `${col.width}px`,
+								height: `${COL_H}px`
+							}),
+							onPointerdown: withModifiers(($event) => selectColumn(ci), ["stop"])
+						}, toDisplayString(colLabel(ci)), 47, _hoisted_3);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(colBoundaries.value, (x, ci) => {
+						return openBlock(), createElementBlock("div", {
+							key: `cr-${ci}`,
+							class: "m-table-editor__col-resizer",
+							style: normalizeStyle({
+								left: `${x}px`,
+								top: `-22px`,
+								height: `${COL_H}px`
+							}),
+							onPointerdown: ($event) => onColResizeDown($event, ci)
+						}, null, 44, _hoisted_4);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(model.value.rows, (row, ri) => {
+						return openBlock(), createElementBlock("div", {
+							key: `rh-${ri}`,
+							class: normalizeClass(["m-table-editor__row-header", { "m-table-editor__row-header--active": isRowActive(ri) }]),
+							style: normalizeStyle({
+								left: `-28px`,
+								top: `${unref(rowTop)(model.value, ri)}px`,
+								width: `${ROW_W}px`,
+								height: `${row.height}px`
+							}),
+							onPointerdown: withModifiers(($event) => selectRow(ri), ["stop"])
+						}, toDisplayString(ri + 1), 47, _hoisted_5);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(rowBoundaries.value, (y, ri) => {
+						return openBlock(), createElementBlock("div", {
+							key: `rr-${ri}`,
+							class: "m-table-editor__row-resizer",
+							style: normalizeStyle({
+								left: `-28px`,
+								top: `${y}px`,
+								width: `${ROW_W}px`
+							}),
+							onPointerdown: ($event) => onRowResizeDown($event, ri)
+						}, null, 44, _hoisted_6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(renderCells.value, ({ cell, rect }) => {
+						return openBlock(), createElementBlock("div", {
+							key: `${cell.row}:${cell.col}`,
+							class: "m-table-editor__cell",
+							style: normalizeStyle({
+								left: `${rect.left}px`,
+								top: `${rect.top}px`,
+								width: `${rect.width}px`,
+								height: `${rect.height}px`
+							}),
+							onPointerdown: ($event) => onCellPointerdown($event, cell),
+							onPointerenter: ($event) => onCellPointerenter(cell),
+							onDblclick: ($event) => onCellDblclick($event, cell),
+							onContextmenu: ($event) => onCellContextmenu($event, cell)
+						}, null, 44, _hoisted_7);
+					}), 128)),
+					createElementVNode("div", {
+						class: normalizeClass(["m-table-editor__selection", { "m-table-editor__selection--range": !isSingleSelection.value }]),
+						style: normalizeStyle(selectionRectStyle.value)
+					}, null, 6)
+				], 36)) : createCommentVNode("", true),
+				withDirectives(createElementVNode("div", {
+					ref_key: "textHost",
+					ref: textHost,
+					class: "m-table-editor__text",
+					style: normalizeStyle(editingChildStyle.value),
+					onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
+					onDblclick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"]))
+				}, null, 36), [[vShow, editingChild.value]]),
+				(openBlock(), createBlock(Teleport, { to: "body" }, [menu.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "m-table-editor__menu",
+					style: normalizeStyle({
+						left: `${menu.value.x}px`,
+						top: `${menu.value.y}px`
+					}),
+					onPointerdown: _cache[11] || (_cache[11] = withModifiers(() => {}, ["stop"])),
+					onContextmenu: _cache[12] || (_cache[12] = withModifiers(() => {}, ["prevent"]))
+				}, [
+					createElementVNode("button", {
+						class: "m-table-editor__menu-item",
+						onClick: _cache[3] || (_cache[3] = ($event) => doInsertRow(0))
+					}, toDisplayString(unref(t)("table:insertRowAbove")), 1),
+					createElementVNode("button", {
+						class: "m-table-editor__menu-item",
+						onClick: _cache[4] || (_cache[4] = ($event) => doInsertRow(1))
+					}, toDisplayString(unref(t)("table:insertRowBelow")), 1),
+					createElementVNode("button", {
+						class: "m-table-editor__menu-item",
+						onClick: _cache[5] || (_cache[5] = ($event) => doInsertColumn(0))
+					}, toDisplayString(unref(t)("table:insertColLeft")), 1),
+					createElementVNode("button", {
+						class: "m-table-editor__menu-item",
+						onClick: _cache[6] || (_cache[6] = ($event) => doInsertColumn(1))
+					}, toDisplayString(unref(t)("table:insertColRight")), 1),
+					_cache[14] || (_cache[14] = createElementVNode("div", { class: "m-table-editor__menu-sep" }, null, -1)),
+					createElementVNode("button", {
+						class: "m-table-editor__menu-item",
+						onClick: _cache[7] || (_cache[7] = ($event) => doRemoveRows())
+					}, toDisplayString(unref(t)("table:deleteRow")), 1),
+					createElementVNode("button", {
+						class: "m-table-editor__menu-item",
+						onClick: _cache[8] || (_cache[8] = ($event) => doRemoveColumns())
+					}, toDisplayString(unref(t)("table:deleteCol")), 1),
+					_cache[15] || (_cache[15] = createElementVNode("div", { class: "m-table-editor__menu-sep" }, null, -1)),
+					createElementVNode("button", {
+						class: "m-table-editor__menu-item",
+						disabled: isSingleSelection.value,
+						onClick: _cache[9] || (_cache[9] = ($event) => doMerge())
+					}, toDisplayString(unref(t)("table:mergeCells")), 9, _hoisted_8),
+					createElementVNode("button", {
+						class: "m-table-editor__menu-item",
+						disabled: !selectedAnchorMerged.value,
+						onClick: _cache[10] || (_cache[10] = ($event) => doSplit())
+					}, toDisplayString(unref(t)("table:splitCell")), 9, _hoisted_9)
+				], 36)) : createCommentVNode("", true)]))
+			], 36)), [[vShow, active.value]]);
+		};
+	}
+});
+//#endregion
+//#region src/plugin.ts
+function plugin() {
+	return definePlugin((editor) => {
+		const { elementSelection, isElement, addElement, activateTool, registerSelectionRedirect, registerResizeOverride, registerEnterHandler, registerEditingState, registerToolbeltShapeItem, registerIcon } = editor;
+		registerIcon("table", "M4,3H20A2,2 0 0,1 22,5V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V5A2,2 0 0,1 4,3M4,7V11H8V7H4M10,7V11H14V7H10M16,7V11H20V7H16M4,13V17H8V13H4M10,13V17H14V13H10M16,13V17H20V13H16Z");
+		registerSelectionRedirect((node) => {
+			return node.findAncestor((n) => isElement(n) && Boolean(n.table?.isValid?.())) ?? node;
+		});
+		registerResizeOverride((el, { scaleX, scaleY, newWidth, newHeight, options }) => {
+			if (!el.table.isValid()) return false;
+			const scaleFont = options.textFontSizeToFit ? scaleX : 1;
+			const columns = el.table.columns.map((c) => ({
+				...c,
+				width: (c.width || 0) * scaleX
+			}));
+			const rows = el.table.rows.map((r) => ({
+				...r,
+				height: (r.height || 0) * scaleY
+			}));
+			const cells = JSON.parse(JSON.stringify(el.table.cells)).map((cell) => {
+				const cs = cell.children?.[0]?.style;
+				if (cs) {
+					if (cs.width) cs.width *= scaleX;
+					if (cs.height) cs.height *= scaleY;
+					if (scaleFont !== 1 && cs.fontSize) cs.fontSize *= scaleFont;
+				}
+				return cell;
+			});
+			el.style.width = newWidth;
+			el.style.height = newHeight;
+			el.table.setProperties({
+				columns,
+				rows,
+				cells
+			});
+			return true;
+		});
+		registerEnterHandler((el, ed) => {
+			if (el.table.isValid()) {
+				ed.state.value = "tableEditing";
+				return true;
+			}
+			return false;
+		});
+		registerEditingState("tableEditing");
+		registerToolbeltShapeItem("table");
+		/** 改写某单元格并整体回写 table 以触发重渲。 */
+		function patchCell(row, col, mutate, node) {
+			const el = node ?? elementSelection.value[0];
+			if (!el?.table) return;
+			const data = el.table.toJSON?.() ?? el.table;
+			const cell = data.cells?.find((c) => c.row === row && c.col === col);
+			if (!cell) return;
+			mutate(cell);
+			el.table = data;
+			el.requestDraw?.();
+		}
+		function setTableCellStyle(row, col, style, node) {
+			patchCell(row, col, (cell) => cell.style = {
+				...cell.style ?? {},
+				...style
+			}, node);
+		}
+		function setTableCellBackground(row, col, background, node) {
+			patchCell(row, col, (cell) => cell.background = background, node);
+		}
+		return {
+			name: "mce:table",
+			commands: [{
+				command: "setTableCellStyle",
+				handle: setTableCellStyle
+			}, {
+				command: "setTableCellBackground",
+				handle: setTableCellBackground
+			}],
+			tools: [{
+				name: "table",
+				handle: (start) => {
+					addElement(createTableElement(), {
+						position: start,
+						active: true
+					});
+					return { end: () => activateTool(void 0) };
+				}
+			}],
+			messages: {
+				en: {
+					"table": "Table",
+					"tableEditing": "Editing table",
+					"table:insertRowAbove": "Insert row above",
+					"table:insertRowBelow": "Insert row below",
+					"table:insertColLeft": "Insert column left",
+					"table:insertColRight": "Insert column right",
+					"table:deleteRow": "Delete rows",
+					"table:deleteCol": "Delete columns",
+					"table:mergeCells": "Merge cells",
+					"table:splitCell": "Split cell"
+				},
+				zhHans: {
+					"table": "表格",
+					"tableEditing": "编辑表格...",
+					"table:insertRowAbove": "上方插入行",
+					"table:insertRowBelow": "下方插入行",
+					"table:insertColLeft": "左侧插入列",
+					"table:insertColRight": "右侧插入列",
+					"table:deleteRow": "删除行",
+					"table:deleteCol": "删除列",
+					"table:mergeCells": "合并单元格",
+					"table:splitCell": "拆分单元格"
+				}
+			},
+			components: [{
+				type: "overlay",
+				component: TableEditor_default
+			}]
+		};
+	});
+}
+//#endregion
+//#region src/index.ts
+var src_default = plugin;
+//#endregion
+export { CELL_BACKGROUND, CELL_BORDER_STYLE, buildCoverage, cellColSpan, cellRange, cellRowSpan, cloneTableModel, colLeft, createCellChild, createTableElement, src_default as default, defaultTextStyle, getCellAt, getCellRect, getCellText, gridHeight, gridWidth, insertColumn, insertRow, isMergedCell, mergeRange, modelToTable, normalizeRange, plugin, removeColumn, removeRow, rowTop, setCellText, splitCell };