@bagelink/vue 1.16.0 → 1.17.6

package/src/components/form/inputs/RichText/utils/table.ts

@@ -1,234 +1,896 @@
 import type { EditorState } from '../richTextTypes'
 
+export interface GridSlot {
+	cell: HTMLTableCellElement
+	originRow: number
+	originCol: number
+	isOrigin: boolean
+}
+
+export interface TableGridMap {
+	table: HTMLTableElement
+	rows: HTMLTableRowElement[]
+	grid: (GridSlot | undefined)[][]
+	rowCount: number
+	colCount: number
+}
+
+export function resolveCellFromNode(node: Node | null | undefined): HTMLTableCellElement | null {
+	if (!node) { return null }
+	const element = node.nodeType === Node.ELEMENT_NODE
+		? node as Element
+		: node.parentElement
+	return (element?.closest('td, th') as HTMLTableCellElement | null) ?? null
+}
+
+export function resolveActiveCell(range: Range | null | undefined, fallbackCell?: HTMLTableCellElement | null): HTMLTableCellElement | null {
+	if (fallbackCell && fallbackCell.isConnected) {
+		return fallbackCell
+	}
+	if (!range) { return null }
+	return resolveCellFromNode(range.startContainer)
+		|| resolveCellFromNode(range.commonAncestorContainer)
+}
+
+export function buildTableGrid(table: HTMLTableElement): TableGridMap {
+	const rows = Array.from(table.rows)
+	const grid: (GridSlot | undefined)[][] = rows.map(() => [])
+	let maxCols = 0
+
+	for (let r = 0; r < rows.length; r++) {
+		const row = rows[r]
+		let c = 0
+		for (let i = 0; i < row.cells.length; i++) {
+			const cell = row.cells[i]
+			while (grid[r][c] !== undefined) {
+				c++
+			}
+			const rowspan = Math.max(1, Number.parseInt(cell.getAttribute('rowspan') || '1', 10) || 1)
+			const colspan = Math.max(1, Number.parseInt(cell.getAttribute('colspan') || '1', 10) || 1)
+
+			for (let dr = 0; dr < rowspan; dr++) {
+				const targetRow = r + dr
+				if (!grid[targetRow]) {
+					grid[targetRow] = []
+				}
+				for (let dc = 0; dc < colspan; dc++) {
+					const targetCol = c + dc
+					grid[targetRow][targetCol] = {
+						cell,
+						originRow: r,
+						originCol: c,
+						isOrigin: dr === 0 && dc === 0
+					}
+					if (targetCol + 1 > maxCols) {
+						maxCols = targetCol + 1
+					}
+				}
+			}
+			c += colspan
+		}
+	}
+
+	return {
+		table,
+		rows,
+		grid,
+		rowCount: rows.length,
+		colCount: maxCols
+	}
+}
+
+export function findCellCoords(map: TableGridMap, targetCell: HTMLTableCellElement): {
+	row: number
+	col: number
+	rowspan: number
+	colspan: number
+} | null {
+	for (let r = 0; r < map.rowCount; r++) {
+		for (let c = 0; c < map.colCount; c++) {
+			const slot = map.grid[r]?.[c]
+			if (slot && slot.cell === targetCell && slot.isOrigin) {
+				const rowspan = Math.max(1, Number.parseInt(targetCell.getAttribute('rowspan') || '1', 10) || 1)
+				const colspan = Math.max(1, Number.parseInt(targetCell.getAttribute('colspan') || '1', 10) || 1)
+				return { row: r, col: c, rowspan, colspan }
+			}
+		}
+	}
+	return null
+}
+
+export function syncTableColgroup(table: HTMLTableElement, targetCols?: number) {
+	const doc = table.ownerDocument
+	const map = buildTableGrid(table)
+	const colCount = targetCols ?? map.colCount
+	if (colCount <= 0) { return }
+
+	const colgroup = Array.from(table.children).find(el => el.tagName === 'COLGROUP') as HTMLElement | undefined
+	const equalWidth = Number((100 / colCount).toFixed(2))
+	const widths = Array.from({ length: colCount }, (_, idx) =>
+		idx === colCount - 1
+			? Number((100 - equalWidth * (colCount - 1)).toFixed(2))
+			: equalWidth
+	)
+
+	if (colgroup) {
+		colgroup.replaceChildren(...widths.map((w) => {
+			const col = doc.createElement('col')
+			col.style.width = `${w}%`
+			return col
+		}))
+	}
+
+	const isFixed = table.style.tableLayout === 'fixed'
+	if (isFixed) {
+		for (let r = 0; r < map.rowCount; r++) {
+			for (let c = 0; c < map.colCount; c++) {
+				const slot = map.grid[r]?.[c]
+				if (slot?.isOrigin) {
+					const colspan = Math.max(1, Number.parseInt(slot.cell.getAttribute('colspan') || '1', 10) || 1)
+					const spanWidth = widths.slice(c, c + colspan).reduce((acc, v) => acc + v, 0)
+					slot.cell.style.width = `${Number(spanWidth.toFixed(2))}%`
+				}
+			}
+		}
+	}
+}
+
+function copyCellBaseStyle(source: HTMLElement | null | undefined, target: HTMLElement) {
+	if (source) {
+		target.style.padding = source.style.padding || '8px'
+		target.style.border = source.style.border || '1px solid var(--bgl-border-color, #ddd)'
+		if (source.style.backgroundColor) {
+			target.style.backgroundColor = source.style.backgroundColor
+		}
+		if (source.style.color) {
+			target.style.color = source.style.color
+		}
+		if (source.style.textAlign) {
+			target.style.textAlign = source.style.textAlign
+		}
+	} else {
+		target.style.padding = '8px'
+		target.style.border = '1px solid var(--bgl-border-color, #ddd)'
+	}
+}
+
+function recordAndSyncTableMutation(doc: Document) {
+	const state = (doc as any).editorState as EditorState | undefined
+	if (!state) { return }
+	const newContent = doc.body.innerHTML
+	if (newContent !== state.content) {
+		state.undoStack.push(state.content)
+		state.redoStack = []
+		if (state.undoStack.length > 50) {
+			state.undoStack.shift()
+		}
+		state.content = newContent
+	}
+}
+
+export function removeTableElement(table: HTMLTableElement) {
+	const doc = table.ownerDocument
+	const wrapper = table.closest('.table-wrapper')
+	if (wrapper) {
+		wrapper.remove()
+	} else {
+		table.remove()
+	}
+	if (!doc.body.children.length) {
+		const p = doc.createElement('p')
+		p.dir = doc.body.dir || 'ltr'
+		p.innerHTML = '<br>'
+		doc.body.appendChild(p)
+	}
+	recordAndSyncTableMutation(doc)
+}
+
+export function focusTableCell(cell: HTMLTableCellElement, collapseToStart = true) {
+	const doc = cell.ownerDocument
+	const selection = doc.getSelection()
+	if (!selection) { return }
+
+	const range = doc.createRange()
+	range.selectNodeContents(cell)
+	range.collapse(collapseToStart)
+	selection.removeAllRanges()
+	selection.addRange(range)
+
+	const state = (doc as any).editorState as EditorState | undefined
+	if (state) {
+		state.selection = selection
+		state.range = range.cloneRange()
+		state.rangeCount = selection.rangeCount
+	}
+}
+
 export function insertTable(rows: number, cols: number, state: EditorState) {
 	if (!state.doc) { return }
-	const table = state.doc.createElement('table')
+	const doc = state.doc
+	const table = doc.createElement('table')
 	table.style.width = '100%'
 	table.style.borderCollapse = 'collapse'
 	table.style.marginBottom = '1rem'
+	table.style.tableLayout = 'fixed'
+	table.dir = doc.body.dir || 'ltr'
+
+	const colgroup = doc.createElement('colgroup')
+	const colWidth = Number((100 / cols).toFixed(2))
+	for (let j = 0; j < cols; j++) {
+		const col = doc.createElement('col')
+		const w = j === cols - 1 ? Number((100 - colWidth * (cols - 1)).toFixed(2)) : colWidth
+		col.style.width = `${w}%`
+		colgroup.appendChild(col)
+	}
+	table.appendChild(colgroup)
 
 	// Add a header row
-	const thead = state.doc.createElement('thead')
+	const thead = doc.createElement('thead')
 	const headerRow = thead.insertRow()
 	for (let j = 0; j < cols; j++) {
-		const th = state.doc.createElement('th')
-		th.innerHTML = `Header ${j + 1}`
+		const th = doc.createElement('th')
+		th.textContent = `Header ${j + 1}`
 		th.style.padding = '8px'
 		th.style.border = '1px solid var(--bgl-border-color, #ddd)'
 		th.style.backgroundColor = 'var(--bgl-gray-light, #f4f4f4)'
+		th.style.width = `${colWidth}%`
 		headerRow.appendChild(th)
 	}
 	table.appendChild(thead)
 
 	// Add body rows
-	const tbody = state.doc.createElement('tbody')
+	const tbody = doc.createElement('tbody')
 	for (let i = 0; i < rows; i++) {
 		const row = tbody.insertRow()
 		for (let j = 0; j < cols; j++) {
 			const cell = row.insertCell()
-			cell.innerHTML = '&nbsp;'
+			cell.innerHTML = '<br>'
 			cell.style.padding = '8px'
 			cell.style.border = '1px solid var(--bgl-border-color, #ddd)'
+			cell.style.width = `${colWidth}%`
 		}
 	}
 	table.appendChild(tbody)
 
-	// Insert the table at the current selection
-	const { range } = state
-	if (range) {
-		range.insertNode(table)
-
-		// Move cursor inside first cell for convenience
-		if (state.doc.getSelection()) {
-			const firstCell = table.querySelector('td')
-			if (firstCell) {
-				range.selectNodeContents(firstCell)
-				range.collapse(true)
-				const selection = state.doc.getSelection()
-				if (selection) {
-					selection.removeAllRanges()
-					selection.addRange(range)
-				}
-			}
+	const selection = doc.getSelection()
+	const activeRange = selection?.rangeCount ? selection.getRangeAt(0) : state.range
+	if (activeRange) {
+		const hostBlock = (activeRange.startContainer.nodeType === Node.ELEMENT_NODE
+			? activeRange.startContainer as Element
+			: activeRange.startContainer.parentElement)?.closest('p,h1,h2,h3,h4,h5,h6')
+		if (hostBlock && hostBlock.parentElement === doc.body && !(hostBlock.textContent || '').trim()) {
+			hostBlock.replaceWith(table)
+		} else if (hostBlock && hostBlock.parentElement === doc.body) {
+			hostBlock.insertAdjacentElement('afterend', table)
+		} else {
+			activeRange.insertNode(table)
 		}
 	} else {
-		state.doc.body.appendChild(table)
+		doc.body.appendChild(table)
 	}
-	state.content = state.doc.body.innerHTML
-}
 
-export function mergeCells(range: Range, doc: Document) {
-	const cells = Array.from(range.cloneContents().querySelectorAll('td'))
-	if (cells.length < 2) { return }
-
-	const firstCell = range.startContainer.parentElement?.closest('td')
-	if (!firstCell) { return }
-
-	firstCell.colSpan = cells.length
-	firstCell.innerHTML = cells.map(cell => cell.innerHTML).join(' ')
+	// Ensure a trailing paragraph exists after the table so the user can always click/arrow below it
+	if (!table.nextElementSibling) {
+		const trailingP = doc.createElement('p')
+		trailingP.dir = doc.body.dir || 'ltr'
+		trailingP.innerHTML = '<br>'
+		table.insertAdjacentElement('afterend', trailingP)
+	}
 
-	cells.slice(1).forEach((cell) => {
-		const actualCell = doc.getElementById(cell.id)
-		actualCell?.remove()
-	})
+	const addButtons = (doc as any).__addEditButtonsToTables as (() => void) | undefined
+	addButtons?.()
 
-	// Update state content
-	const state = (doc as any).editorState as EditorState
-	if (state) {
-		state.content = doc.body.innerHTML
+	const firstCell = table.querySelector('tbody td, td, th') as HTMLTableCellElement | null
+	if (firstCell) {
+		focusTableCell(firstCell, true)
 	}
+
+	recordAndSyncTableMutation(doc)
 }
 
-export function splitCell(range: Range, doc: Document) {
-	const cell = range.startContainer.parentElement?.closest('td')
-	if (!cell || !cell.colSpan || cell.colSpan === 1) { return }
+export function addRow(
+	position: 'before' | 'after',
+	range: Range | null,
+	doc: Document,
+	targetCellOverride?: HTMLTableCellElement | null
+): HTMLTableRowElement | null {
+	const cell = resolveActiveCell(range, targetCellOverride)
+	if (!cell) { return null }
+
+	const row = cell.closest('tr') as HTMLTableRowElement | null
+	const table = cell.closest('table') as HTMLTableElement | null
+	if (!row || !table) { return null }
+
+	const map = buildTableGrid(table)
+	const coords = findCellCoords(map, cell)
+	if (!coords) { return null }
+
+	const isHeaderRow = row.parentElement?.tagName === 'THEAD'
+	const insertRowIdx = position === 'before' ? coords.row : coords.row + coords.rowspan - 1
+	const referenceRow = map.rows[insertRowIdx] || row
+
+	const newRow = doc.createElement('tr')
+	const templateCell = (table.querySelector('tbody td') || cell) as HTMLTableCellElement
+
+	for (let c = 0; c < map.colCount; c++) {
+		const slotAtBoundary = map.grid[insertRowIdx]?.[c]
+		// If a cell spans across the insertion boundary, increment its rowspan instead of adding a cell
+		if (slotAtBoundary) {
+			const spanCell = slotAtBoundary.cell
+			const spanRows = Math.max(1, Number.parseInt(spanCell.getAttribute('rowspan') || '1', 10) || 1)
+			const spanEnd = slotAtBoundary.originRow + spanRows - 1
+			const crossesBoundary = position === 'before'
+				? (slotAtBoundary.originRow < insertRowIdx && spanEnd >= insertRowIdx)
+				: (slotAtBoundary.originRow <= insertRowIdx && spanEnd > insertRowIdx)
+
+			if (crossesBoundary) {
+				if (slotAtBoundary.originCol === c) {
+					spanCell.setAttribute('rowspan', String(spanRows + 1))
+				}
+				continue
+			}
+		}
 
-	const newCells = new Array(cell.colSpan - 1).fill(0).map(() => {
 		const newCell = doc.createElement('td')
-		newCell.style.border = '1px solid var(--bgl-border-color)'
-		newCell.style.padding = '8px'
-		newCell.innerHTML = '&nbsp;'
-		return newCell
-	})
-
-	cell.colSpan = 1
-	cell.insertAdjacentElement('afterend', newCells[0])
-	newCells.slice(1).forEach((newCell) => {
-		newCells[0].insertAdjacentElement('afterend', newCell)
-	})
+		newCell.innerHTML = '<br>'
+		const refSlot = map.grid[coords.row]?.[c]
+		copyCellBaseStyle(refSlot?.cell.tagName === 'TD' ? refSlot.cell : templateCell, newCell)
+		newRow.appendChild(newCell)
+	}
 
-	// Update state content
-	const state = (doc as any).editorState as EditorState
-	if (state) {
-		state.content = doc.body.innerHTML
+	// If inserting after a header row in <thead>, place the new row at the start of <tbody>
+	if (isHeaderRow) {
+		let tbody = table.querySelector('tbody')
+		if (!tbody) {
+			tbody = doc.createElement('tbody')
+			table.appendChild(tbody)
+		}
+		if (position === 'after') {
+			tbody.insertBefore(newRow, tbody.firstChild)
+		} else {
+			tbody.insertBefore(newRow, tbody.firstChild)
+		}
+	} else {
+		referenceRow.insertAdjacentElement(position === 'before' ? 'beforebegin' : 'afterend', newRow)
 	}
+
+	syncTableColgroup(table)
+	recordAndSyncTableMutation(doc)
+	return newRow
 }
 
-export function addRow(position: 'before' | 'after', range: Range, doc: Document) {
-	const cell = range.startContainer.parentElement?.closest('td')
+export function deleteRow(range: Range | null, targetCellOverride?: HTMLTableCellElement | null) {
+	const cell = resolveActiveCell(range, targetCellOverride)
 	if (!cell) { return }
 
-	const row = cell.parentElement
-	const table = row?.parentElement
+	const row = cell.closest('tr') as HTMLTableRowElement | null
+	const table = cell.closest('table') as HTMLTableElement | null
 	if (!row || !table) { return }
 
-	const newRow = row.cloneNode(true) as HTMLTableRowElement
-	Array.from(newRow.cells).forEach(cell => cell.innerHTML = '&nbsp;')
+	const doc = table.ownerDocument
+	const map = buildTableGrid(table)
+	const coords = findCellCoords(map, cell)
+	if (!coords) { return }
+
+	// If deleting the last remaining row of the table, remove the table
+	if (map.rowCount <= 1) {
+		removeTableElement(table)
+		return
+	}
 
-	row.insertAdjacentElement(position === 'before' ? 'beforebegin' : 'afterend', newRow)
+	const rowIndex = coords.row
+	const handledCells = new Set<HTMLTableCellElement>()
+
+	for (let c = 0; c < map.colCount; c++) {
+		const slot = map.grid[rowIndex]?.[c]
+		if (!slot || handledCells.has(slot.cell)) { continue }
+		handledCells.add(slot.cell)
+
+		const rowspan = Math.max(1, Number.parseInt(slot.cell.getAttribute('rowspan') || '1', 10) || 1)
+		if (rowspan > 1) {
+			if (slot.originRow === rowIndex) {
+				// Cell starts in the deleted row and spans down: move it into the next row
+				const nextRow = map.rows[rowIndex + 1]
+				if (nextRow) {
+					const clone = slot.cell.cloneNode(true) as HTMLTableCellElement
+					if (rowspan - 1 > 1) {
+						clone.setAttribute('rowspan', String(rowspan - 1))
+					} else {
+						clone.removeAttribute('rowspan')
+					}
+					// Find insertion position in nextRow based on grid column
+					let inserted = false
+					for (let nextCol = c + 1; nextCol < map.colCount; nextCol++) {
+						const nextSlot = map.grid[rowIndex + 1]?.[nextCol]
+						if (nextSlot && nextSlot.originRow === rowIndex + 1 && nextSlot.cell.parentElement === nextRow) {
+							nextRow.insertBefore(clone, nextSlot.cell)
+							inserted = true
+							break
+						}
+					}
+					if (!inserted) {
+						nextRow.appendChild(clone)
+					}
+				}
+			} else {
+				// Cell starts in an earlier row and spans through this row
+				if (rowspan - 1 > 1) {
+					slot.cell.setAttribute('rowspan', String(rowspan - 1))
+				} else {
+					slot.cell.removeAttribute('rowspan')
+				}
+			}
+		}
+	}
 
-	// Update state content
-	const state = (doc as any).editorState as EditorState
-	if (state) {
-		state.content = doc.body.innerHTML
+	const section = row.parentElement as HTMLTableSectionElement | null
+	const nextFocusRow = map.rows[rowIndex + 1] || map.rows[rowIndex - 1]
+	row.remove()
+
+	if (section && section.tagName === 'THEAD' && section.rows.length === 0) {
+		section.remove()
+	}
+
+	if (table.rows.length === 0) {
+		removeTableElement(table)
+		return
+	}
+
+	if (nextFocusRow && nextFocusRow.cells.length > 0) {
+		const targetFocusCell = nextFocusRow.cells[Math.min(coords.col, nextFocusRow.cells.length - 1)]
+		if (targetFocusCell) {
+			focusTableCell(targetFocusCell, true)
+		}
 	}
+
+	syncTableColgroup(table)
+	recordAndSyncTableMutation(doc)
 }
 
-export function deleteRow(range: Range) {
-	const cell = range.startContainer.parentElement?.closest('td')
+export function deleteTable(range: Range | null, targetCellOverride?: HTMLTableCellElement | null) {
+	const cell = resolveActiveCell(range, targetCellOverride)
 	if (!cell) { return }
 
-	const row = cell.parentElement
-	if (!row) { return }
-
-	const doc = row.ownerDocument
-	row.remove()
+	const table = cell.closest('table') as HTMLTableElement | null
+	if (!table) { return }
 
-	// Update state content
-	const state = (doc as any).editorState as EditorState
-	if (state) {
-		state.content = doc.body.innerHTML
-	}
+	removeTableElement(table)
 }
 
-export function deleteTable(range: Range) {
-	const cell = range.startContainer.parentElement?.closest('td')
+export function insertColumn(
+	position: 'before' | 'after',
+	range: Range | null,
+	targetCellOverride?: HTMLTableCellElement | null
+) {
+	const cell = resolveActiveCell(range, targetCellOverride)
 	if (!cell) { return }
 
-	const table = cell.closest('table')
+	const table = cell.closest('table') as HTMLTableElement | null
 	if (!table) { return }
 
 	const doc = table.ownerDocument
-	table.remove()
+	const map = buildTableGrid(table)
+	const coords = findCellCoords(map, cell)
+	if (!coords) { return }
+
+	const targetCol = position === 'before' ? coords.col : coords.col + coords.colspan - 1
+	const handledSpanCells = new Set<HTMLTableCellElement>()
+
+	for (let r = 0; r < map.rowCount; r++) {
+		const row = map.rows[r]
+		const slot = map.grid[r]?.[targetCol]
+
+		if (slot) {
+			const colspan = Math.max(1, Number.parseInt(slot.cell.getAttribute('colspan') || '1', 10) || 1)
+			const spanEnd = slot.originCol + colspan - 1
+			const crossesBoundary = position === 'before'
+				? (slot.originCol < targetCol && spanEnd >= targetCol)
+				: (slot.originCol <= targetCol && spanEnd > targetCol)
+
+			if (crossesBoundary) {
+				if (!handledSpanCells.has(slot.cell)) {
+					handledSpanCells.add(slot.cell)
+					slot.cell.setAttribute('colspan', String(colspan + 1))
+				}
+				continue
+			}
 
-	// Update state content
-	const state = (doc as any).editorState as EditorState
-	if (state) {
-		state.content = doc.body.innerHTML
+			// If this row is covered by a rowspan from an earlier row at the insertion column, skip creating a cell here
+			if (slot.originRow < r && (
+				(position === 'before' && slot.originCol === targetCol)
+				|| (position === 'after' && spanEnd === targetCol)
+			)) {
+				// Only insert if the neighbor isn't also spanning; fall through to insert a regular cell in this row
+			}
+		}
+
+		const isHeader = row.parentElement?.tagName === 'THEAD'
+		const newCell = doc.createElement(isHeader ? 'th' : 'td')
+		if (isHeader) {
+			newCell.textContent = `Header ${map.colCount + 1}`
+		} else {
+			newCell.appendChild(doc.createElement('br'))
+		}
+		copyCellBaseStyle(slot?.cell || row.cells[0], newCell)
+
+		// Find reference cell in this row to insert before/after
+		let refCell: HTMLTableCellElement | null = null
+		for (let c = position === 'before' ? targetCol : targetCol + 1; c < map.colCount; c++) {
+			const candidate = map.grid[r]?.[c]
+			if (candidate && candidate.originRow === r && candidate.cell.parentElement === row) {
+				refCell = candidate.cell
+				break
+			}
+		}
+
+		if (refCell) {
+			row.insertBefore(newCell, refCell)
+		} else {
+			row.appendChild(newCell)
+		}
 	}
+
+	syncTableColgroup(table, map.colCount + 1)
+	recordAndSyncTableMutation(doc)
 }
 
-export function insertColumn(position: 'before' | 'after', range: Range) {
-	const cell = range.startContainer.parentElement?.closest('td')
+export function deleteColumn(range: Range | null, targetCellOverride?: HTMLTableCellElement | null) {
+	const cell = resolveActiveCell(range, targetCellOverride)
 	if (!cell) { return }
 
-	const table = cell.closest('table')
+	const table = cell.closest('table') as HTMLTableElement | null
 	if (!table) { return }
 
-	const columnIndex = cell.cellIndex
-	const { rows } = table
+	const doc = table.ownerDocument
+	const map = buildTableGrid(table)
+	const coords = findCellCoords(map, cell)
+	if (!coords) { return }
 
-	for (let i = 0; i < rows.length; i++) {
-		const newCell = rows[i].insertCell(position === 'after' ? columnIndex + 1 : columnIndex)
-		newCell.innerHTML = '&nbsp;'
-		newCell.style.border = '1px solid var(--bgl-border-color)'
-		newCell.style.padding = '8px'
+	if (map.colCount <= 1) {
+		removeTableElement(table)
+		return
 	}
 
-	// Update state content
-	const state = (table.ownerDocument as any).editorState as EditorState
-	if (state) {
-		state.content = table.ownerDocument.body.innerHTML
+	const colIndex = coords.col
+	const handledCells = new Set<HTMLTableCellElement>()
+
+	for (let r = 0; r < map.rowCount; r++) {
+		const slot = map.grid[r]?.[colIndex]
+		if (!slot || handledCells.has(slot.cell)) { continue }
+		handledCells.add(slot.cell)
+
+		const colspan = Math.max(1, Number.parseInt(slot.cell.getAttribute('colspan') || '1', 10) || 1)
+		if (colspan > 1) {
+			if (colspan - 1 > 1) {
+				slot.cell.setAttribute('colspan', String(colspan - 1))
+			} else {
+				slot.cell.removeAttribute('colspan')
+			}
+		} else {
+			slot.cell.remove()
+		}
 	}
+
+	// Clean up any empty rows
+	Array.from(table.rows).forEach((row) => {
+		if (row.cells.length === 0) {
+			row.remove()
+		}
+	})
+
+	if (table.rows.length === 0 || (table.rows[0]?.cells.length ?? 0) === 0) {
+		removeTableElement(table)
+		return
+	}
+
+	syncTableColgroup(table, map.colCount - 1)
+	recordAndSyncTableMutation(doc)
 }
 
-export function deleteColumn(range: Range) {
-	const cell = range.startContainer.parentElement?.closest('td')
-	if (!cell) { return }
+export function mergeCells(
+	range: Range | null,
+	doc: Document,
+	targetCellOverride?: HTMLTableCellElement | null,
+	direction: 'right' | 'down' | 'selection' = 'selection'
+) {
+	const activeCell = resolveActiveCell(range, targetCellOverride)
+	if (!activeCell) { return }
 
-	const table = cell.closest('table')
+	const table = activeCell.closest('table') as HTMLTableElement | null
 	if (!table) { return }
 
-	const columnIndex = cell.cellIndex
-	const { rows } = table
-	const doc = table.ownerDocument
+	const map = buildTableGrid(table)
+	const coords = findCellCoords(map, activeCell)
+	if (!coords) { return }
+
+	const isRTL = table.dir === 'rtl'
+
+	if (direction === 'right') {
+		const targetCol = isRTL ? coords.col - 1 : coords.col + coords.colspan
+		const neighborSlot = map.grid[coords.row]?.[targetCol]
+		if (!neighborSlot || neighborSlot.cell === activeCell) { return }
+
+		const neighborCell = neighborSlot.cell
+		if (neighborCell.parentElement !== activeCell.parentElement) { return }
 
-	for (let i = 0; i < rows.length; i++) {
-		rows[i].deleteCell(columnIndex)
+		const neighborRowspan = Math.max(1, Number.parseInt(neighborCell.getAttribute('rowspan') || '1', 10) || 1)
+		if (neighborRowspan !== coords.rowspan) { return }
+
+		const neighborColspan = Math.max(1, Number.parseInt(neighborCell.getAttribute('colspan') || '1', 10) || 1)
+		const hasActiveContent = Boolean(activeCell.textContent?.trim() || activeCell.querySelector('img, video, iframe'))
+		const hasNeighborContent = Boolean(neighborCell.textContent?.trim() || neighborCell.querySelector('img, video, iframe'))
+
+		if (!hasActiveContent) {
+			activeCell.replaceChildren()
+		}
+		if (hasNeighborContent) {
+			if (hasActiveContent) {
+				activeCell.appendChild(doc.createTextNode(' '))
+			}
+			while (neighborCell.firstChild) {
+				activeCell.appendChild(neighborCell.firstChild)
+			}
+		} else if (!hasActiveContent) {
+			activeCell.appendChild(doc.createElement('br'))
+		}
+		activeCell.setAttribute('colspan', String(coords.colspan + neighborColspan))
+		neighborCell.remove()
+		syncTableColgroup(table)
+		recordAndSyncTableMutation(doc)
+		return
 	}
 
-	// If no columns left, remove the table
-	if (rows[0].cells.length === 0) {
-		table.remove()
+	if (direction === 'down') {
+		const targetRow = coords.row + coords.rowspan
+		const neighborSlot = map.grid[targetRow]?.[coords.col]
+		if (!neighborSlot || neighborSlot.cell === activeCell) { return }
+
+		const neighborCell = neighborSlot.cell
+		// Do not merge across <thead> and <tbody>
+		if (neighborCell.parentElement?.parentElement !== activeCell.parentElement?.parentElement) {
+			return
+		}
+
+		const neighborColspan = Math.max(1, Number.parseInt(neighborCell.getAttribute('colspan') || '1', 10) || 1)
+		if (neighborSlot.originCol !== coords.col || neighborColspan !== coords.colspan) { return }
+
+		const neighborRowspan = Math.max(1, Number.parseInt(neighborCell.getAttribute('rowspan') || '1', 10) || 1)
+		const hasActiveContent = Boolean(activeCell.textContent?.trim() || activeCell.querySelector('img, video, iframe'))
+		const hasNeighborContent = Boolean(neighborCell.textContent?.trim() || neighborCell.querySelector('img, video, iframe'))
+
+		if (!hasActiveContent) {
+			activeCell.replaceChildren()
+		}
+		if (hasNeighborContent) {
+			if (hasActiveContent) {
+				activeCell.appendChild(doc.createElement('br'))
+			}
+			while (neighborCell.firstChild) {
+				activeCell.appendChild(neighborCell.firstChild)
+			}
+		} else if (!hasActiveContent) {
+			activeCell.appendChild(doc.createElement('br'))
+		}
+		activeCell.setAttribute('rowspan', String(coords.rowspan + neighborRowspan))
+		neighborCell.remove()
+		syncTableColgroup(table)
+		recordAndSyncTableMutation(doc)
+		return
 	}
 
-	// Update state content
-	const state = (doc as any).editorState as EditorState
-	if (state) {
-		state.content = doc.body.innerHTML
+	// Selection-based or toolbar merge: find all cells intersecting the range, or fall back to merging right
+	const selectedCells = Array.from(table.querySelectorAll<HTMLTableCellElement>('td, th')).filter(
+		c => c.classList.contains('table-cell-selected') || (range && !range.collapsed && range.intersectsNode(c))
+	)
+
+	if (selectedCells.length < 2) {
+		mergeCells(range, doc, activeCell, 'right')
+		return
+	}
+
+	let minRow = Infinity
+	let maxRow = -1
+	let minCol = Infinity
+	let maxCol = -1
+
+	for (const cell of selectedCells) {
+		const cellCoords = findCellCoords(map, cell)
+		if (!cellCoords) { continue }
+		minRow = Math.min(minRow, cellCoords.row)
+		maxRow = Math.max(maxRow, cellCoords.row + cellCoords.rowspan - 1)
+		minCol = Math.min(minCol, cellCoords.col)
+		maxCol = Math.max(maxCol, cellCoords.col + cellCoords.colspan - 1)
+	}
+
+	if (minRow > maxRow || minCol > maxCol) { return }
+
+	const originSlot = map.grid[minRow]?.[minCol]
+	if (!originSlot) { return }
+	const primaryCell = originSlot.cell
+	const primarySection = primaryCell.parentElement?.parentElement
+
+	const cellsToMerge = new Set<HTMLTableCellElement>()
+	for (let r = minRow; r <= maxRow; r++) {
+		for (let c = minCol; c <= maxCol; c++) {
+			const slot = map.grid[r]?.[c]
+			if (!slot) { continue }
+			// Do not merge across thead/tbody boundaries
+			if (slot.cell.parentElement?.parentElement !== primarySection) { return }
+			cellsToMerge.add(slot.cell)
+		}
+	}
+
+	if (cellsToMerge.size < 2) { return }
+
+	const mergedFragment = doc.createDocumentFragment()
+	let hasAnyMergedContent = false
+	cellsToMerge.forEach((cell) => {
+		const hasContent = Boolean(cell.textContent?.trim() || cell.querySelector('img, video, iframe'))
+		if (hasContent) {
+			if (hasAnyMergedContent) {
+				mergedFragment.appendChild(doc.createTextNode(' '))
+			}
+			while (cell.firstChild) {
+				mergedFragment.appendChild(cell.firstChild)
+			}
+			hasAnyMergedContent = true
+		}
+		if (cell !== primaryCell) {
+			cell.remove()
+		}
+	})
+
+	if (hasAnyMergedContent) {
+		primaryCell.replaceChildren(mergedFragment)
+	} else {
+		primaryCell.replaceChildren(doc.createElement('br'))
+	}
+	const totalRows = maxRow - minRow + 1
+	const totalCols = maxCol - minCol + 1
+	if (totalRows > 1) {
+		primaryCell.setAttribute('rowspan', String(totalRows))
+	} else {
+		primaryCell.removeAttribute('rowspan')
+	}
+	if (totalCols > 1) {
+		primaryCell.setAttribute('colspan', String(totalCols))
+	} else {
+		primaryCell.removeAttribute('colspan')
 	}
+
+	focusTableCell(primaryCell, false)
+	syncTableColgroup(table)
+	recordAndSyncTableMutation(doc)
 }
 
-export function alignColumn(range: Range, alignment: 'start' | 'center' | 'end' | 'justify') {
-	const cell = range.startContainer.parentElement?.closest('td')
+export function splitCell(
+	range: Range | null,
+	doc: Document,
+	targetCellOverride?: HTMLTableCellElement | null
+) {
+	const cell = resolveActiveCell(range, targetCellOverride)
 	if (!cell) { return }
 
-	const table = cell.closest('table')
+	const table = cell.closest('table') as HTMLTableElement | null
 	if (!table) { return }
 
-	const columnIndex = cell.cellIndex
-	const { rows } = table
+	const map = buildTableGrid(table)
+	const coords = findCellCoords(map, cell)
+	if (!coords) { return }
+
+	const { row: startRow, col: startCol, rowspan, colspan } = coords
+	if (rowspan <= 1 && colspan <= 1) { return }
+
+	cell.removeAttribute('colspan')
+	cell.removeAttribute('rowspan')
+
+	const tagName = cell.tagName.toLowerCase() as 'td' | 'th'
+
+	for (let dr = 0; dr < rowspan; dr++) {
+		const targetRowIdx = startRow + dr
+		const targetRow = map.rows[targetRowIdx]
+		if (!targetRow) { continue }
+
+		for (let dc = 0; dc < colspan; dc++) {
+			if (dr === 0 && dc === 0) { continue }
+
+			const newCell = doc.createElement(tagName)
+			newCell.innerHTML = '<br>'
+			copyCellBaseStyle(cell, newCell)
+
+			// Find the next cell in targetRow whose grid column is > startCol + dc
+			let refCell: HTMLTableCellElement | null = null
+			for (let c = startCol + colspan; c < map.colCount; c++) {
+				const slot = map.grid[targetRowIdx]?.[c]
+				if (slot && slot.originRow === targetRowIdx && slot.cell.parentElement === targetRow) {
+					refCell = slot.cell
+					break
+				}
+			}
 
-	for (let i = 0; i < rows.length; i++) {
-		const cell = rows[i].cells[columnIndex]
-		if (cell) {
-			cell.style.textAlign = alignment
+			if (refCell) {
+				targetRow.insertBefore(newCell, refCell)
+			} else {
+				targetRow.appendChild(newCell)
+			}
 		}
 	}
 
-	// Update state content
-	const state = (table.ownerDocument as any).editorState as EditorState
-	if (state) {
-		state.content = table.ownerDocument.body.innerHTML
+	syncTableColgroup(table)
+	recordAndSyncTableMutation(doc)
+}
+
+export function alignColumn(
+	range: Range | null,
+	alignment: 'start' | 'center' | 'end' | 'justify',
+	targetCellOverride?: HTMLTableCellElement | null
+) {
+	const cell = resolveActiveCell(range, targetCellOverride)
+	if (!cell) { return }
+
+	const table = cell.closest('table') as HTMLTableElement | null
+	if (!table) { return }
+
+	const map = buildTableGrid(table)
+	const coords = findCellCoords(map, cell)
+	if (!coords) { return }
+
+	for (let r = 0; r < map.rowCount; r++) {
+		const slot = map.grid[r]?.[coords.col]
+		if (slot?.cell) {
+			slot.cell.style.textAlign = alignment
+		}
 	}
+
+	recordAndSyncTableMutation(table.ownerDocument)
+}
+
+export function moveColumn(table: HTMLTableElement, fromCol: number, toCol: number): boolean {
+	const map = buildTableGrid(table)
+	if (fromCol === toCol || fromCol < 0 || toCol < 0 || fromCol >= map.colCount || toCol >= map.colCount) {
+		return false
+	}
+
+	// Only move when cells in the source and target columns don't have multi-column spans crossing boundaries
+	for (let r = 0; r < map.rowCount; r++) {
+		const fromSlot = map.grid[r]?.[fromCol]
+		const toSlot = map.grid[r]?.[toCol]
+		if (!fromSlot || !toSlot) { return false }
+		const fromSpan = Math.max(1, Number.parseInt(fromSlot.cell.getAttribute('colspan') || '1', 10) || 1)
+		const toSpan = Math.max(1, Number.parseInt(toSlot.cell.getAttribute('colspan') || '1', 10) || 1)
+		if (fromSpan > 1 || toSpan > 1 || fromSlot.originRow !== r || toSlot.originRow !== r) {
+			return false
+		}
+	}
+
+	// Move cells in each row
+	for (let r = 0; r < map.rowCount; r++) {
+		const row = map.rows[r]
+		const sourceCell = map.grid[r]?.[fromCol]?.cell
+		const targetCell = map.grid[r]?.[toCol]?.cell
+		if (!sourceCell || !targetCell || sourceCell === targetCell) { continue }
+
+		if (fromCol < toCol) {
+			targetCell.insertAdjacentElement('afterend', sourceCell)
+		} else {
+			row.insertBefore(sourceCell, targetCell)
+		}
+	}
+
+	// Move corresponding <col> in <colgroup> if present
+	const colgroup = Array.from(table.children).find(el => el.tagName === 'COLGROUP') as HTMLElement | undefined
+	if (colgroup && colgroup.children.length === map.colCount) {
+		const sourceColEl = colgroup.children[fromCol]
+		const targetColEl = colgroup.children[toCol]
+		if (sourceColEl && targetColEl && sourceColEl !== targetColEl) {
+			if (fromCol < toCol) {
+				targetColEl.insertAdjacentElement('afterend', sourceColEl)
+			} else {
+				colgroup.insertBefore(sourceColEl, targetColEl)
+			}
+		}
+	}
+
+	recordAndSyncTableMutation(table.ownerDocument)
+	return true
 }