@dou-ui/editor 0.0.0-stage → 0.1.0-alpha.1

package/dist/extensions/table/table-controls.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,698 @@
+import { createId } from "../../core/model.js";
+import { useEditor } from "../../editor.js";
+import { useMenuEscape } from "../../components/menu-escape.js";
+import { fitColumns } from "./schema.js";
+import { alignColumns, band, boundaries, clearCells, deleteColumns, deleteRows, inMergedCell, insertColumn, insertRow, mergeCells, moveLines, moveLinesTo, selectLines, splitMergedCell, tableAt, toggleHeader } from "./commands.js";
+import { DouDropdown, DouDropdownItem, DouDropdownSub } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, resolveDynamicComponent, shallowRef, toDisplayString, unref, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { TextSelection } from "prosemirror-state";
+import { ArrowDownFromLineIcon, ArrowDownIcon, ArrowLeftIcon, ArrowLeftToLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpIcon, ArrowUpToLineIcon, CheckIcon, EraserIcon, GripHorizontalIcon, GripVerticalIcon, LayoutColumnsIcon, LayoutRowsIcon, MergeIcon, PlusIcon, SplitIcon, TextAlignCenterIcon, TextAlignLeftIcon, TextAlignRightIcon, TrashIcon } from "@dou-ui/icons";
+import { CellSelection, TableMap, addColumn, addRow } from "prosemirror-tables";
+// src/extensions/table/table-controls.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "title"];
+var _hoisted_2 = ["aria-label", "title"];
+var _hoisted_3 = ["aria-label", "title"];
+var _hoisted_4 = ["aria-label", "title"];
+var _hoisted_5 = ["disabled"];
+var _hoisted_6 = ["aria-label", "title"];
+var table_controls_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "table-controls",
+	setup(__props) {
+		const { view, state, root, messages } = useEditor();
+		/** The table and the cell the controls are about: the hovered one, or the selection's. */
+		const hovered = shallowRef(null);
+		const columnMenu = shallowRef(false);
+		const rowMenu = shallowRef(false);
+		const menuOpen = computed(() => columnMenu.value || rowMenu.value);
+		useMenuEscape(menuOpen, () => {
+			columnMenu.value = false;
+			rowMenu.value = false;
+		});
+		const barShown = computed(() => !!layout.value?.bar && !menuOpen.value && !dragging.value);
+		const handlesHidden = computed(() => barShown.value && hasCellSelection.value);
+		function targetOf(cell) {
+			const current = view.value;
+			if (!current || !current.dom.contains(cell)) return null;
+			const $pos = current.state.doc.resolve(current.posAtDOM(cell, 0));
+			const found = tableAt($pos);
+			if (!found) return null;
+			for (let depth = $pos.depth; depth > 0; depth--) {
+				const role = $pos.node(depth).type.spec.tableRole;
+				if (role === "cell" || role === "header_cell") {
+					const cellPos = $pos.before(depth) - found.pos - 1;
+					return {
+						pos: found.pos,
+						rect: found.map.findCell(cellPos)
+					};
+				}
+			}
+			return null;
+		}
+		/** The selection's cell when the pointer is elsewhere. */
+		const selected = computed(() => {
+			const current = state.value;
+			if (!current) return null;
+			const selection = current.selection;
+			const $cell = selection instanceof CellSelection ? selection.$headCell : null;
+			const found = tableAt(selection.$head);
+			if (!found) return null;
+			const start = found.pos + 1;
+			if ($cell) return {
+				pos: found.pos,
+				rect: found.map.findCell($cell.pos - start)
+			};
+			for (let depth = selection.$head.depth; depth > 0; depth--) {
+				const role = selection.$head.node(depth).type.spec.tableRole;
+				if (role === "cell" || role === "header_cell") return {
+					pos: found.pos,
+					rect: found.map.findCell(selection.$head.before(depth) - start)
+				};
+			}
+			return null;
+		});
+		const target = computed(() => hovered.value ?? selected.value);
+		const layout = shallowRef(null);
+		function cellElement(tablePos, row, col) {
+			const current = view.value;
+			const table = current?.state.doc.nodeAt(tablePos);
+			if (!current || !table) return null;
+			const map = TableMap.get(table);
+			if (row >= map.height || col >= map.width) return null;
+			const pos = tablePos + 1 + map.map[row * map.width + col];
+			return current.nodeDOM(pos);
+		}
+		function measure() {
+			const current = view.value;
+			const host = root.value;
+			const at = target.value;
+			if (!current || !host || !at) return layout.value = null;
+			const tableNode = current.state.doc.nodeAt(at.pos);
+			const frameElement = current.nodeDOM(at.pos);
+			const tableElement = frameElement?.querySelector("table");
+			if (!tableNode || !frameElement || !tableElement) return layout.value = null;
+			const box = host.getBoundingClientRect();
+			const tableBox = tableElement.getBoundingClientRect();
+			const frameBox = frameElement.getBoundingClientRect();
+			const first = cellElement(at.pos, at.rect.top, at.rect.left)?.getBoundingClientRect();
+			if (!first) return layout.value = null;
+			let bar = null;
+			const boxes = barCells(current).map((pos) => current.nodeDOM(pos).getBoundingClientRect());
+			if (boxes.length) {
+				const left = Math.max(Math.min(...boxes.map((item) => item.left)), frameBox.left);
+				const right = Math.min(Math.max(...boxes.map((item) => item.right)), frameBox.right);
+				const below = !(current.state.selection instanceof CellSelection);
+				bar = {
+					top: below ? Math.max(...boxes.map((item) => item.bottom)) - box.top : Math.min(...boxes.map((item) => item.top)) - box.top,
+					left: (left + right) / 2 - box.left,
+					below
+				};
+			}
+			layout.value = {
+				table: {
+					top: tableBox.top - box.top,
+					left: tableBox.left - box.left,
+					width: tableBox.width,
+					height: tableBox.height
+				},
+				frame: {
+					left: frameBox.left - box.left,
+					right: frameBox.right - box.left
+				},
+				column: {
+					left: first.left - box.left,
+					width: first.width
+				},
+				row: {
+					top: first.top - box.top,
+					height: first.height
+				},
+				bar
+			};
+		}
+		/** The cells the toolbar is about: a cell selection's corners, or the merged cell with the cursor. */
+		function barCells(current) {
+			const selection = current.state.selection;
+			if (selection instanceof CellSelection) return selection.$anchorCell.pos === selection.$headCell.pos ? [] : [selection.$anchorCell.pos, selection.$headCell.pos];
+			if (!inMergedCell(current.state)) return [];
+			const $head = selection.$head;
+			for (let depth = $head.depth; depth > 0; depth--) {
+				const role = $head.node(depth).type.spec.tableRole;
+				if (role === "cell" || role === "header_cell") return [$head.before(depth)];
+			}
+			return [];
+		}
+		let frame = 0;
+		let lastTarget = null;
+		function schedule() {
+			if (frame) return;
+			frame = requestAnimationFrame(() => {
+				frame = 0;
+				if (!menuOpen.value && !dragging.value) {
+					const element = lastTarget instanceof Element ? lastTarget : null;
+					const cell = element?.closest(".dou-editor-table td, .dou-editor-table th");
+					const inControls = element?.closest(".dou-editor-table-controls");
+					if (cell) hovered.value = targetOf(cell);
+					else if (!inControls) hovered.value = null;
+				}
+				measure();
+			});
+		}
+		function track(event) {
+			if (event.pointerType === "touch") return;
+			lastTarget = event.target;
+			schedule();
+		}
+		function leave() {
+			if (menuOpen.value || dragging.value) return;
+			lastTarget = null;
+			hovered.value = null;
+			schedule();
+		}
+		const onScroll = () => schedule();
+		onMounted(() => {
+			root.value?.addEventListener("pointermove", track);
+			root.value?.addEventListener("pointerleave", leave);
+			window.addEventListener("scroll", onScroll, true);
+			window.addEventListener("resize", onScroll);
+		});
+		onBeforeUnmount(() => {
+			root.value?.removeEventListener("pointermove", track);
+			root.value?.removeEventListener("pointerleave", leave);
+			window.removeEventListener("scroll", onScroll, true);
+			window.removeEventListener("resize", onScroll);
+			if (frame) cancelAnimationFrame(frame);
+			endDrag(false);
+		});
+		watch([state, target], () => schedule());
+		function run(command) {
+			const current = view.value;
+			if (!current) return;
+			command(current.state, current.dispatch);
+			current.focus();
+		}
+		function openMenu(axis, pressed) {
+			const current = view.value;
+			if (!current) return;
+			current.dispatch(selectLines(current.state.tr, pressed.tablePos, axis, pressed.start, pressed.end));
+			rowMenu.value = axis === "row";
+			columnMenu.value = axis === "column";
+		}
+		/**
+		* Whole lines are selected to show what a menu or a drag is about; after
+		* it, the cursor goes into their first cell so the handles come back.
+		*/
+		function collapseLines() {
+			const current = view.value;
+			const selection = current?.state.selection;
+			if (!current || !(selection instanceof CellSelection)) return;
+			if (!selection.isRowSelection() && !selection.isColSelection()) return;
+			const $cell = current.state.doc.resolve(selection.$anchorCell.pos + 1);
+			current.dispatch(current.state.tr.setSelection(TextSelection.near($cell)));
+		}
+		watch(menuOpen, (open) => {
+			if (open) return;
+			collapseLines();
+			schedule();
+		});
+		const can = (command) => {
+			const current = state.value;
+			return !!current && command(current);
+		};
+		const tableNode = computed(() => {
+			const at = target.value;
+			return at ? state.value?.doc.nodeAt(at.pos) ?? null : null;
+		});
+		const columnAlign = computed(() => {
+			const node = tableNode.value;
+			const at = target.value;
+			if (!node || !at) return "left";
+			return fitColumns(node.attrs.columns, TableMap.get(node).width)[at.rect.left]?.align ?? "left";
+		});
+		const aligns = [
+			{
+				value: "left",
+				icon: TextAlignLeftIcon,
+				label: () => messages.value.table.alignLeft
+			},
+			{
+				value: "center",
+				icon: TextAlignCenterIcon,
+				label: () => messages.value.table.alignCenter
+			},
+			{
+				value: "right",
+				icon: TextAlignRightIcon,
+				label: () => messages.value.table.alignRight
+			}
+		];
+		/** The + bars: a column at the right end, a row at the bottom. */
+		function addAtEnd(axis) {
+			const current = view.value;
+			const at = target.value;
+			if (!current || !at) return;
+			const table = current.state.doc.nodeAt(at.pos);
+			const map = TableMap.get(table);
+			const rect = {
+				left: 0,
+				top: 0,
+				right: map.width,
+				bottom: map.height,
+				map,
+				table,
+				tableStart: at.pos + 1
+			};
+			let tr = current.state.tr;
+			if (axis === "row") tr = addRow(tr, rect, map.height);
+			else {
+				const columns = fitColumns(table.attrs.columns, map.width);
+				columns.push({ id: createId() });
+				tr = addColumn(tr, rect, map.width).setNodeAttribute(at.pos, "columns", columns);
+			}
+			current.dispatch(tr);
+		}
+		let drag = null;
+		const dragging = shallowRef(false);
+		const drop = shallowRef(null);
+		/** A copy of the dragged lines that follows the pointer. */
+		let ghost = null;
+		function onHandleDown(axis, event) {
+			const current = view.value;
+			const at = target.value;
+			if (event.button !== 0 || !current || !at || !current.editable) return;
+			const map = TableMap.get(current.state.doc.nodeAt(at.pos));
+			const [from, to] = axis === "row" ? [at.rect.top, at.rect.bottom] : [at.rect.left, at.rect.right];
+			const lines = band(map, axis, from, to);
+			drag = {
+				axis,
+				tablePos: at.pos,
+				...lines,
+				x: event.clientX,
+				y: event.clientY,
+				to: null
+			};
+			window.addEventListener("pointermove", onDragMove);
+			window.addEventListener("pointerup", onDragUp);
+			window.addEventListener("pointercancel", onDragCancel);
+		}
+		/** Each boundary a run can go to, and where it is (relative to the editor). */
+		function cutPlaces(moving) {
+			const current = view.value;
+			const host = root.value;
+			const table = current?.state.doc.nodeAt(moving.tablePos);
+			const element = (current?.nodeDOM(moving.tablePos))?.querySelector("table");
+			if (!current || !host || !table || !element) return [];
+			const box = host.getBoundingClientRect();
+			const tableBox = element.getBoundingClientRect();
+			const map = TableMap.get(table);
+			const places = [];
+			if (moving.axis === "row") {
+				const tops = [];
+				table.forEach((_row, offset) => {
+					const row = current.nodeDOM(moving.tablePos + 1 + offset);
+					tops.push((row?.getBoundingClientRect().top ?? tableBox.top) - box.top);
+				});
+				for (const cut of boundaries(map, "row")) places.push({
+					cut,
+					at: cut < map.height ? tops[cut] : tableBox.bottom - box.top
+				});
+				return places;
+			}
+			for (const cut of boundaries(map, "column")) {
+				if (cut === map.width) {
+					places.push({
+						cut,
+						at: tableBox.right - box.left
+					});
+					continue;
+				}
+				let row = 0;
+				while (row < map.height && map.findCell(map.map[row * map.width + cut]).left !== cut) row++;
+				const cell = cellElement(moving.tablePos, row, cut);
+				if (cell) places.push({
+					cut,
+					at: cell.getBoundingClientRect().left - box.left
+				});
+			}
+			return places;
+		}
+		function showGhost(moving) {
+			const current = view.value;
+			const host = root.value;
+			const table = current?.state.doc.nodeAt(moving.tablePos);
+			const element = (current?.nodeDOM(moving.tablePos))?.querySelector("table");
+			if (!current || !host || !table || !element) return;
+			const map = TableMap.get(table);
+			const copy = document.createElement("table");
+			copy.className = "dou-editor-table";
+			const body = document.createElement("tbody");
+			copy.append(body);
+			let width = 0;
+			const [rows, cols] = moving.axis === "row" ? [[moving.start, moving.end], [0, map.width]] : [[0, map.height], [moving.start, moving.end]];
+			for (let row = rows[0]; row < rows[1]; row++) {
+				const line = document.createElement("tr");
+				let lineWidth = 0;
+				for (let col = cols[0]; col < cols[1]; col++) {
+					const rect = map.findCell(map.map[row * map.width + col]);
+					if (rect.top !== row || rect.left !== col) continue;
+					const cell = cellElement(moving.tablePos, row, col);
+					if (!cell) continue;
+					const clone = cell.cloneNode(true);
+					clone.classList.remove("selectedCell");
+					clone.style.width = `${cell.getBoundingClientRect().width}px`;
+					lineWidth += cell.getBoundingClientRect().width;
+					line.append(clone);
+				}
+				width = Math.max(width, lineWidth);
+				body.append(line);
+			}
+			ghost = document.createElement("div");
+			ghost.className = "dou-editor__surface dou-editor__ghost dou-editor-table__ghost";
+			ghost.setAttribute("aria-hidden", "true");
+			ghost.style.width = `${Math.min(width, 360) + 2}px`;
+			ghost.append(copy);
+			host.append(ghost);
+		}
+		function onDragMove(event) {
+			const moving = drag;
+			if (!moving) return;
+			if (!dragging.value) {
+				if (Math.hypot(event.clientX - moving.x, event.clientY - moving.y) < 4) return;
+				dragging.value = true;
+				columnMenu.value = false;
+				rowMenu.value = false;
+				const current = view.value;
+				if (current) current.dispatch(selectLines(current.state.tr, moving.tablePos, moving.axis, moving.start, moving.end));
+				showGhost(moving);
+			}
+			if (ghost) ghost.style.transform = `translate(${event.clientX + 12}px, ${event.clientY + 12}px)`;
+			const host = root.value;
+			if (!host) return;
+			const box = host.getBoundingClientRect();
+			const pointer = moving.axis === "row" ? event.clientY - box.top : event.clientX - box.left;
+			let best = null;
+			for (const place of cutPlaces(moving)) if (!best || Math.abs(place.at - pointer) < Math.abs(best.at - pointer)) best = place;
+			if (!best || best.cut >= moving.start && best.cut <= moving.end) {
+				moving.to = null;
+				drop.value = null;
+				return;
+			}
+			moving.to = best.cut;
+			drop.value = {
+				axis: moving.axis,
+				at: best.at
+			};
+		}
+		function onDragUp() {
+			endDrag(true);
+		}
+		function onDragCancel() {
+			endDrag(false);
+		}
+		function endDrag(apply) {
+			window.removeEventListener("pointermove", onDragMove);
+			window.removeEventListener("pointerup", onDragUp);
+			window.removeEventListener("pointercancel", onDragCancel);
+			const moving = drag;
+			drag = null;
+			ghost?.remove();
+			ghost = null;
+			drop.value = null;
+			if (!dragging.value) {
+				if (apply && moving) openMenu(moving.axis, moving);
+				return;
+			}
+			dragging.value = false;
+			if (apply && moving?.to !== null && moving) run(moveLinesTo(moving.tablePos, moving.axis, moving.start, moving.end, moving.to));
+			collapseLines();
+			schedule();
+		}
+		const hasCellSelection = computed(() => {
+			const selection = state.value?.selection;
+			return selection instanceof CellSelection && selection.$anchorCell.pos !== selection.$headCell.pos;
+		});
+		const visible = computed(() => !!layout.value && !!target.value);
+		return (_ctx, _cache) => {
+			return visible.value && layout.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "dou-editor-table-controls",
+				onMousedown: _cache[23] || (_cache[23] = withModifiers(() => {}, ["prevent"]))
+			}, [
+				createVNode(unref(DouDropdown), {
+					open: columnMenu.value,
+					"onUpdate:open": _cache[8] || (_cache[8] = ($event) => columnMenu.value = $event),
+					trigger: "manual",
+					placement: "bottom-start",
+					class: "dou-editor-menu"
+				}, {
+					menu: withCtx(() => [
+						createVNode(unref(DouDropdownItem), { onClick: _cache[1] || (_cache[1] = ($event) => run(unref(insertColumn)("before"))) }, {
+							prefix: withCtx(() => [createVNode(unref(ArrowLeftToLineIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.insertLeft), 1)]),
+							_: 1
+						}),
+						createVNode(unref(DouDropdownItem), { onClick: _cache[2] || (_cache[2] = ($event) => run(unref(insertColumn)("after"))) }, {
+							prefix: withCtx(() => [createVNode(unref(ArrowRightToLineIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.insertRight), 1)]),
+							_: 1
+						}),
+						createVNode(unref(DouDropdownItem), {
+							divided: "",
+							disabled: !can(unref(moveLines)("column", -1)),
+							onClick: _cache[3] || (_cache[3] = ($event) => run(unref(moveLines)("column", -1)))
+						}, {
+							prefix: withCtx(() => [createVNode(unref(ArrowLeftIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.moveLeft), 1)]),
+							_: 1
+						}, 8, ["disabled"]),
+						createVNode(unref(DouDropdownItem), {
+							disabled: !can(unref(moveLines)("column", 1)),
+							onClick: _cache[4] || (_cache[4] = ($event) => run(unref(moveLines)("column", 1)))
+						}, {
+							prefix: withCtx(() => [createVNode(unref(ArrowRightIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.moveRight), 1)]),
+							_: 1
+						}, 8, ["disabled"]),
+						createVNode(unref(DouDropdownSub), {
+							divided: "",
+							title: aligns.find((item) => item.value === columnAlign.value).label()
+						}, {
+							prefix: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(aligns.find((item) => item.value === columnAlign.value).icon)))]),
+							default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(aligns, (item) => {
+								return createVNode(unref(DouDropdownItem), {
+									key: item.value,
+									onClick: ($event) => run(unref(alignColumns)(item.value))
+								}, createSlots({
+									prefix: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(item.icon)))]),
+									default: withCtx(() => [createTextVNode(" " + toDisplayString(item.label()) + " ", 1)]),
+									_: 2
+								}, [item.value === columnAlign.value ? {
+									name: "suffix",
+									fn: withCtx(() => [createVNode(unref(CheckIcon))]),
+									key: "0"
+								} : void 0]), 1032, ["onClick"]);
+							}), 64))]),
+							_: 1
+						}, 8, ["title"]),
+						target.value?.rect.left === 0 ? (openBlock(), createBlock(unref(DouDropdownItem), {
+							key: 0,
+							onClick: _cache[5] || (_cache[5] = ($event) => run(unref(toggleHeader)("headerColumn")))
+						}, createSlots({
+							prefix: withCtx(() => [createVNode(unref(LayoutColumnsIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.headerColumn) + " ", 1)]),
+							_: 2
+						}, [tableNode.value?.attrs.headerColumn ? {
+							name: "suffix",
+							fn: withCtx(() => [createVNode(unref(CheckIcon))]),
+							key: "0"
+						} : void 0]), 1024)) : createCommentVNode("", true),
+						createVNode(unref(DouDropdownItem), {
+							divided: "",
+							onClick: _cache[6] || (_cache[6] = ($event) => run(unref(clearCells)))
+						}, {
+							prefix: withCtx(() => [createVNode(unref(EraserIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.clear), 1)]),
+							_: 1
+						}),
+						createVNode(unref(DouDropdownItem), {
+							tone: "danger",
+							disabled: !can(unref(deleteColumns)),
+							onClick: _cache[7] || (_cache[7] = ($event) => run(unref(deleteColumns)))
+						}, {
+							prefix: withCtx(() => [createVNode(unref(TrashIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.deleteColumn), 1)]),
+							_: 1
+						}, 8, ["disabled"])
+					]),
+					default: withCtx(() => [withDirectives(createElementVNode("button", {
+						type: "button",
+						tabindex: "-1",
+						class: normalizeClass(["dou-editor-table__handle is-column", { "is-active": columnMenu.value }]),
+						style: normalizeStyle({
+							top: `${layout.value.table.top}px`,
+							left: `${Math.min(Math.max(layout.value.column.left + layout.value.column.width / 2, layout.value.frame.left + 12), layout.value.frame.right - 12)}px`
+						}),
+						"aria-label": unref(messages).table.column,
+						title: unref(messages).table.column,
+						onPointerdown: _cache[0] || (_cache[0] = ($event) => onHandleDown("column", $event))
+					}, [createVNode(unref(GripHorizontalIcon))], 46, _hoisted_1), [[vShow, !handlesHidden.value]])]),
+					_: 1
+				}, 8, ["open"]),
+				createVNode(unref(DouDropdown), {
+					open: rowMenu.value,
+					"onUpdate:open": _cache[17] || (_cache[17] = ($event) => rowMenu.value = $event),
+					trigger: "manual",
+					placement: "right-start",
+					class: "dou-editor-menu"
+				}, {
+					menu: withCtx(() => [
+						createVNode(unref(DouDropdownItem), { onClick: _cache[10] || (_cache[10] = ($event) => run(unref(insertRow)("before"))) }, {
+							prefix: withCtx(() => [createVNode(unref(ArrowUpToLineIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.insertAbove), 1)]),
+							_: 1
+						}),
+						createVNode(unref(DouDropdownItem), { onClick: _cache[11] || (_cache[11] = ($event) => run(unref(insertRow)("after"))) }, {
+							prefix: withCtx(() => [createVNode(unref(ArrowDownFromLineIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.insertBelow), 1)]),
+							_: 1
+						}),
+						createVNode(unref(DouDropdownItem), {
+							divided: "",
+							disabled: !can(unref(moveLines)("row", -1)),
+							onClick: _cache[12] || (_cache[12] = ($event) => run(unref(moveLines)("row", -1)))
+						}, {
+							prefix: withCtx(() => [createVNode(unref(ArrowUpIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.moveUp), 1)]),
+							_: 1
+						}, 8, ["disabled"]),
+						createVNode(unref(DouDropdownItem), {
+							disabled: !can(unref(moveLines)("row", 1)),
+							onClick: _cache[13] || (_cache[13] = ($event) => run(unref(moveLines)("row", 1)))
+						}, {
+							prefix: withCtx(() => [createVNode(unref(ArrowDownIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.moveDown), 1)]),
+							_: 1
+						}, 8, ["disabled"]),
+						target.value?.rect.top === 0 ? (openBlock(), createBlock(unref(DouDropdownItem), {
+							key: 0,
+							divided: "",
+							onClick: _cache[14] || (_cache[14] = ($event) => run(unref(toggleHeader)("headerRow")))
+						}, createSlots({
+							prefix: withCtx(() => [createVNode(unref(LayoutRowsIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.headerRow) + " ", 1)]),
+							_: 2
+						}, [tableNode.value?.attrs.headerRow ? {
+							name: "suffix",
+							fn: withCtx(() => [createVNode(unref(CheckIcon))]),
+							key: "0"
+						} : void 0]), 1024)) : createCommentVNode("", true),
+						createVNode(unref(DouDropdownItem), {
+							divided: "",
+							onClick: _cache[15] || (_cache[15] = ($event) => run(unref(clearCells)))
+						}, {
+							prefix: withCtx(() => [createVNode(unref(EraserIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.clear), 1)]),
+							_: 1
+						}),
+						createVNode(unref(DouDropdownItem), {
+							tone: "danger",
+							disabled: !can(unref(deleteRows)),
+							onClick: _cache[16] || (_cache[16] = ($event) => run(unref(deleteRows)))
+						}, {
+							prefix: withCtx(() => [createVNode(unref(TrashIcon))]),
+							default: withCtx(() => [createTextVNode(" " + toDisplayString(unref(messages).table.deleteRow), 1)]),
+							_: 1
+						}, 8, ["disabled"])
+					]),
+					default: withCtx(() => [withDirectives(createElementVNode("button", {
+						type: "button",
+						tabindex: "-1",
+						class: normalizeClass(["dou-editor-table__handle is-row", { "is-active": rowMenu.value }]),
+						style: normalizeStyle({
+							top: `${layout.value.row.top + layout.value.row.height / 2}px`,
+							left: `${layout.value.frame.left}px`
+						}),
+						"aria-label": unref(messages).table.row,
+						title: unref(messages).table.row,
+						onPointerdown: _cache[9] || (_cache[9] = ($event) => onHandleDown("row", $event))
+					}, [createVNode(unref(GripVerticalIcon))], 46, _hoisted_2), [[vShow, !handlesHidden.value]])]),
+					_: 1
+				}, 8, ["open"]),
+				createElementVNode("button", {
+					type: "button",
+					tabindex: "-1",
+					class: "dou-editor-table__add is-column",
+					style: normalizeStyle({
+						top: `${layout.value.table.top}px`,
+						left: `${Math.min(layout.value.table.left + layout.value.table.width, layout.value.frame.right)}px`,
+						height: `${layout.value.table.height}px`
+					}),
+					"aria-label": unref(messages).table.addColumn,
+					title: unref(messages).table.addColumn,
+					onClick: _cache[18] || (_cache[18] = ($event) => addAtEnd("column"))
+				}, [createVNode(unref(PlusIcon))], 12, _hoisted_3),
+				createElementVNode("button", {
+					type: "button",
+					tabindex: "-1",
+					class: "dou-editor-table__add is-row",
+					style: normalizeStyle({
+						top: `${layout.value.table.top + layout.value.table.height}px`,
+						left: `${layout.value.frame.left}px`,
+						width: `${Math.min(layout.value.table.left + layout.value.table.width, layout.value.frame.right) - layout.value.frame.left}px`
+					}),
+					"aria-label": unref(messages).table.addRow,
+					title: unref(messages).table.addRow,
+					onClick: _cache[19] || (_cache[19] = ($event) => addAtEnd("row"))
+				}, [createVNode(unref(PlusIcon))], 12, _hoisted_4),
+				drop.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["dou-editor__drop", { "is-vertical": drop.value.axis === "column" }]),
+					style: normalizeStyle(drop.value.axis === "row" ? {
+						top: `${drop.value.at}px`,
+						left: `${layout.value.frame.left}px`,
+						width: `${Math.min(layout.value.table.left + layout.value.table.width, layout.value.frame.right) - layout.value.frame.left}px`
+					} : {
+						top: `${layout.value.table.top}px`,
+						left: `${drop.value.at}px`,
+						height: `${layout.value.table.height}px`
+					})
+				}, null, 6)) : createCommentVNode("", true),
+				barShown.value && layout.value.bar && !dragging.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(["dou-editor-table__cells", { "is-below": layout.value.bar.below }]),
+					style: normalizeStyle({
+						top: `${layout.value.bar.top}px`,
+						left: `${layout.value.bar.left}px`
+					})
+				}, [
+					hasCellSelection.value ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						tabindex: "-1",
+						class: "dou-editor-table__cells-button",
+						disabled: !can(unref(mergeCells)),
+						onClick: _cache[20] || (_cache[20] = ($event) => run(unref(mergeCells)))
+					}, [createVNode(unref(MergeIcon)), createTextVNode(toDisplayString(unref(messages).table.merge), 1)], 8, _hoisted_5)) : createCommentVNode("", true),
+					can(unref(splitMergedCell)) ? (openBlock(), createElementBlock("button", {
+						key: 1,
+						type: "button",
+						tabindex: "-1",
+						class: "dou-editor-table__cells-button",
+						onClick: _cache[21] || (_cache[21] = ($event) => run(unref(splitMergedCell)))
+					}, [createVNode(unref(SplitIcon)), createTextVNode(toDisplayString(unref(messages).table.split), 1)])) : createCommentVNode("", true),
+					hasCellSelection.value ? (openBlock(), createElementBlock("button", {
+						key: 2,
+						type: "button",
+						tabindex: "-1",
+						class: "dou-editor-table__cells-button",
+						"aria-label": unref(messages).table.clear,
+						title: unref(messages).table.clear,
+						onClick: _cache[22] || (_cache[22] = ($event) => run(unref(clearCells)))
+					}, [createVNode(unref(EraserIcon))], 8, _hoisted_6)) : createCommentVNode("", true)
+				], 6)) : createCommentVNode("", true)
+			], 32)) : createCommentVNode("", true);
+		};
+	}
+});
+export { table_controls_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=table-controls.vue_vue_type_script_setup_true_lang.js.map