@bagelink/vue 1.16.0 → 1.17.6

package/src/components/form/inputs/RichText/index.vue

@@ -1,7 +1,8 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
 import type { CustomToolbarButton, RichTextExtension, RichTextToolbarApi, ToolbarConfig } from './richTextTypes'
-import { CodeEditor, copyText, Btn, Dialog, BglVideo, Icon, Card, ColorInput, pathKeyToURL } from '../../../../index'
+import type { DropdownItem } from '../../../../index'
+import { CodeEditor, copyText, Btn, ContextMenu, Dialog, Divider, BglVideo, Icon, Card, ColorInput, pathKeyToURL, usePointerSession } from '../../../../index'
 import { watch, onUnmounted, onBeforeUnmount, onMounted, ref, computed, useAttrs, inject } from 'vue'
 import CheckInput from '../CheckInput.vue'
 import NumberInput from '../NumberInput.vue'
@@ -11,8 +12,21 @@ import TextInput from '../TextInput.vue'
 import UploadInput from '../Upload/UploadInput.vue'
 import EditorToolbar from './components/EditorToolbar.vue'
 import { useCommands } from './composables/useCommands'
-import { useEditor } from './composables/useEditor'
+import { pushHistorySnapshot, useEditor } from './composables/useEditor'
 import { useEditorKeyboard } from './composables/useEditorKeyboard'
+import {
+	addRow as tableAddRow,
+	buildTableGrid,
+	deleteColumn as tableDeleteColumn,
+	deleteRow as tableDeleteRow,
+	findCellCoords,
+	insertColumn as tableInsertColumn,
+	mergeCells as tableMergeCells,
+	moveColumn as tableMoveColumn,
+	removeTableElement,
+	splitCell as tableSplitCell,
+	syncTableColgroup,
+} from './utils/table'
 import type { BagelInputShellProps } from '../bagelInputShell'
 import { useBagelInputShell } from '../bagelInputShell'
 import { RICH_TEXT_EXTENSION_REGISTRY_KEY } from './richTextExtensions'
@@ -452,63 +466,6 @@ let pendingTableData: {
 	existingTable: HTMLTableElement | null
 } | null = null
 
-// Computed property for table preview
-const tablePreviewHtml = computed(() => {
-	const form = tableForm.value
-
-	const tableStyle = `
-		width: ${form.width}%;
-		border-collapse: collapse;
-		margin-bottom: 1rem;
-		border: ${form.borderWidth}px solid ${form.borderColor};
-		table-layout: ${form.fixedLayout ? 'fixed' : 'auto'};
-	`
-
-	// For cell text alignment, we'll apply it to individual cells, not the table
-
-	let html = `<table style="${tableStyle}" dir="${form.direction}">`
-	html += `<colgroup>${form.columnWidths.slice(0, form.cols).map(width => `<col style="width: ${width}%;">`).join('')}</colgroup>`
-
-	// Add header row if enabled
-	if (form.showHeaders) {
-		html += '<thead><tr>'
-		for (let j = 0; j < form.cols; j++) {
-			const thStyle = `
-				padding: ${form.cellPadding}px;
-				border: ${form.borderWidth}px solid ${form.borderColor};
-				background-color: ${form.headerBgColor};
-				color: ${form.headerTextColor};
-				text-align: ${form.alignment};
-				${form.fixedLayout ? `width: ${form.columnWidths[j] ?? (100 / form.cols)}%;` : ''}
-			`
-			html += `<th style="${thStyle}">Header ${j + 1}</th>`
-		}
-		html += '</tr></thead>'
-	}
-
-	// Add body rows
-	html += '<tbody>'
-	for (let i = 0; i < form.rows; i++) {
-		html += '<tr>'
-		for (let j = 0; j < form.cols; j++) {
-			const tdStyle = `
-				padding: ${form.cellPadding}px;
-				border: ${form.borderWidth}px solid ${form.borderColor};
-				text-align: ${form.alignment};
-				${form.fixedLayout ? `width: ${form.columnWidths[j] ?? (100 / form.cols)}%;` : ''}
-				${form.alternateRows && i % 2 === 1
-					? `background-color: ${form.alternateRowBgColor}; color: ${form.alternateRowTextColor};`
-					: `background-color: ${form.cellBgColor}; color: ${form.cellTextColor};`}
-			`
-			html += `<td style="${tdStyle}">Cell ${i + 1},${j + 1}</td>`
-		}
-		html += '</tr>'
-	}
-	html += '</tbody></table>'
-
-	return html
-})
-
 // Initialize content from modelValue
 editor.state.content = normalizedModelValue.value
 
@@ -526,7 +483,9 @@ function getTextDirection(text: string, fallback: 'ltr' | 'rtl' = 'ltr'): 'ltr'
 
 function getBlockDirection(element: Element, fallback: 'ltr' | 'rtl', preserveExplicit = true): 'ltr' | 'rtl' {
 	const explicitDirection = element.getAttribute('dir')
-	if (preserveExplicit && (explicitDirection === 'rtl' || explicitDirection === 'ltr')) { return explicitDirection }
+	if ((preserveExplicit || element.hasAttribute('data-dir-explicit')) && (explicitDirection === 'rtl' || explicitDirection === 'ltr')) {
+		return explicitDirection
+	}
 	return getTextDirection(element.textContent || '', fallback)
 }
 
@@ -540,7 +499,7 @@ function detectAndSetDirection() {
 
 	doc.querySelectorAll('p,h1,h2,h3,h4,h5,h6,blockquote,li').forEach((block) => {
 		if (!block.classList.contains('placeholder')) {
-			block.setAttribute('dir', getBlockDirection(block, fallback, false))
+			block.setAttribute('dir', getBlockDirection(block, fallback, true))
 		}
 	})
 }
@@ -946,22 +905,27 @@ function submitImage() {
 		img.style.height = 'auto'
 	}
 
-	// Helper function to create figcaption with alt text and credit
+	// Helper function to create figcaption with alt text and credit (using safe DOM nodes)
 	function createFigcaption() {
 		const figcaption = doc!.createElement('figcaption')
-		let captionHTML = ''
 
-		// Add alt text only if figcaption checkbox is checked (with bold styling)
 		if (imageForm.value.figcaption && imageForm.value.alt) {
-			captionHTML = `<strong class="alt-text">${imageForm.value.alt}</strong>`
+			const altStrong = doc!.createElement('strong')
+			altStrong.className = 'alt-text'
+			altStrong.textContent = imageForm.value.alt
+			figcaption.appendChild(altStrong)
 		}
 
-		// Always add credit if it exists (with lighter styling)
 		if (imageForm.value.credit) {
-			captionHTML += `${captionHTML ? ' • ' : ''}<span class="photo-credit">${imageForm.value.credit}</span>`
+			if (figcaption.childNodes.length > 0) {
+				figcaption.appendChild(doc!.createTextNode(' • '))
+			}
+			const creditSpan = doc!.createElement('span')
+			creditSpan.className = 'photo-credit'
+			creditSpan.textContent = imageForm.value.credit
+			figcaption.appendChild(creditSpan)
 		}
 
-		figcaption.innerHTML = captionHTML
 		return figcaption
 	}
 
@@ -1461,38 +1425,62 @@ function deleteVideo() {
 // Function to open table editor
 // Function to detect table alignment from table or wrapper
 function detectTableAlignment(table: HTMLTableElement): 'left' | 'center' | 'right' {
-	// Check table margins to determine alignment
-	const { marginLeft } = table.style
-	const { marginRight } = table.style
+	const wrapper = table.closest('.table-wrapper') as HTMLElement | null
+	if (wrapper) {
+		const { alignItems } = wrapper.style
+		if (alignItems === 'center') { return 'center' }
+		if (alignItems === 'flex-end') { return 'right' }
+		if (alignItems === 'flex-start') { return 'left' }
+	}
 
+	const { marginLeft, marginRight } = table.style
 	if (marginLeft === 'auto' && marginRight === 'auto') {
 		return 'center'
-	} if (marginLeft === 'auto' && marginRight === '0') {
+	}
+	if (marginLeft === 'auto' && marginRight === '0') {
 		return 'right'
+	}
+	return 'left'
+}
+
+function applyTableAlignmentToDOM(table: HTMLTableElement, alignment: 'left' | 'center' | 'right') {
+	const wrapper = table.closest('.table-wrapper') as HTMLElement | null
+	if (wrapper) {
+		if (alignment === 'center') {
+			wrapper.style.alignItems = 'center'
+		} else if (alignment === 'right') {
+			wrapper.style.alignItems = 'flex-end'
+		} else {
+			wrapper.style.alignItems = 'flex-start'
+		}
+		table.style.marginLeft = '0'
+		table.style.marginRight = '0'
 	} else {
-		return 'left'
+		if (alignment === 'center') {
+			table.style.marginLeft = 'auto'
+			table.style.marginRight = 'auto'
+		} else if (alignment === 'right') {
+			table.style.marginLeft = 'auto'
+			table.style.marginRight = '0'
+		} else {
+			table.style.marginLeft = '0'
+			table.style.marginRight = 'auto'
+		}
 	}
 }
 
 function openTableEditor(existingTable: HTMLTableElement | null = null) {
-	console.log('[RichText table editor] open requested', {
-		hasTable: Boolean(existingTable),
-		isFullscreen: editor.state.isFullscreen,
-	})
 	const { doc } = editor.state
 	if (!doc) {
-		console.warn('[RichText table editor] aborted: editor document is unavailable')
 		return
 	}
 
-	// Get current selection for new tables
 	if (!existingTable) {
 		const selection = doc.getSelection()
 		if (!selection || !selection.rangeCount) { return }
 		const range = selection.getRangeAt(0)
 		pendingTableData = { selection, range, existingTable: null }
 	} else {
-		// For existing tables, set pendingTableData with the existing element
 		pendingTableData = {
 			selection: doc.getSelection()!,
 			range: doc.createRange(),
@@ -1501,13 +1489,11 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 	}
 
 	if (existingTable) {
-		// Populate form with existing table data
 		const tbody = existingTable.querySelector('tbody')
 		const thead = existingTable.querySelector('thead')
 		const editorWindow = existingTable.ownerDocument.defaultView
 		const getEditorStyle = (element: Element) => editorWindow?.getComputedStyle(element) ?? null
 
-		// Detect alternating rows by comparing background colors
 		let hasAlternatingRows = false
 		let alternateRowBg = '#f9f9f9'
 		let alternateRowTextColor = '#333333'
@@ -1523,7 +1509,6 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 				const firstBgColor = getEditorStyle(firstCell)?.backgroundColor || ''
 				const secondBgColor = getEditorStyle(secondCell)?.backgroundColor || ''
 
-				// Check if colors are different (indicating alternating rows)
 				if (firstBgColor !== secondBgColor) {
 					hasAlternatingRows = true
 					alternateRowBg = secondBgColor
@@ -1532,14 +1517,19 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 			}
 		}
 
+		const gridMap = buildTableGrid(existingTable)
+		const cols = gridMap.colCount || (tbody && tbody.rows.length > 0 ? tbody.rows[0].cells.length : 3)
+		const firstCellEl = existingTable.querySelector('td, th') as HTMLElement | null
+		const parsedPadding = firstCellEl ? Number.parseInt(firstCellEl.style.padding, 10) : Number.NaN
+
 		tableForm.value = {
-			rows: tbody ? tbody.rows.length : 3,
-			cols: tbody && tbody.rows.length > 0 ? tbody.rows[0].cells.length : 3,
-			width: Number.parseInt(existingTable.style.width) || 100,
-			borderWidth: Number.parseInt(existingTable.style.borderWidth) || 1,
+			rows: tbody ? tbody.rows.length : Math.max(1, existingTable.rows.length - (thead ? thead.rows.length : 0)),
+			cols,
+			width: Number.parseInt(existingTable.style.width, 10) || 100,
+			borderWidth: Number.isNaN(Number.parseInt(existingTable.style.borderWidth, 10)) ? 1 : Number.parseInt(existingTable.style.borderWidth, 10),
 			borderColor: existingTable.style.borderColor || '#dddddd',
-			cellPadding: 8, // default, hard to extract
-			showHeaders: !!thead,
+			cellPadding: Number.isNaN(parsedPadding) ? 8 : parsedPadding,
+			showHeaders: !!thead && thead.rows.length > 0,
 			headerBgColor: thead ? getEditorStyle(thead.querySelector('th') || thead)?.backgroundColor || '#f4f4f4' : '#f4f4f4',
 			headerTextColor: thead ? getEditorStyle(thead.querySelector('th') || thead)?.color || '#333333' : '#333333',
 			cellBgColor: tbody ? getEditorStyle(tbody.querySelector('td') || tbody)?.backgroundColor || '#ffffff' : '#ffffff',
@@ -1547,25 +1537,21 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 			alternateRows: hasAlternatingRows,
 			alternateRowBgColor: alternateRowBg,
 			alternateRowTextColor,
-			fixedLayout: existingTable.style.tableLayout === 'fixed' || true, // ברירת מחדל true
+			fixedLayout: existingTable.style.tableLayout ? existingTable.style.tableLayout === 'fixed' : true,
 			columnWidths: (() => {
-				const cols = tbody && tbody.rows.length > 0 ? tbody.rows[0].cells.length : 3
 				const columnElements = Array.from(existingTable.querySelectorAll(':scope > colgroup > col')) as HTMLElement[]
 				if (columnElements.length === cols) {
 					return columnElements.map((column, index) =>
 						Number.parseFloat(column.style.width)
 						|| Number.parseFloat((existingTable.rows[0]?.cells[index] as HTMLElement | undefined)?.style.width || '')
-						|| (100 / cols))
+						|| Number((100 / cols).toFixed(2)))
 				}
-				return Array.from({ length: cols }, (_, index) =>
-					Number.parseFloat((existingTable.rows[0]?.cells[index] as HTMLElement | undefined)?.style.width || '')
-					|| (100 / cols))
+				return equalColumnWidths(cols)
 			})(),
 			alignment: detectTableAlignment(existingTable),
-			direction: existingTable.dir || 'ltr'
+			direction: (existingTable.dir || doc.body.dir || 'ltr') as 'ltr' | 'rtl'
 		}
 	} else {
-		// Reset form for new table
 		tableForm.value = {
 			rows: 3,
 			cols: 3,
@@ -1584,14 +1570,10 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 			fixedLayout: true,
 			columnWidths: equalColumnWidths(3),
 			alignment: 'left',
-			direction: 'ltr'
+			direction: (doc.body.dir || 'ltr') as 'ltr' | 'rtl'
 		}
 	}
 	showTableEditor.value = true
-	console.log('[RichText table editor] dialog state opened', {
-		open: showTableEditor.value,
-		hasPendingTable: Boolean(pendingTableData?.existingTable),
-	})
 }
 
 function openExistingTableAdvancedSettings() {
@@ -1602,67 +1584,129 @@ function openExistingTableAdvancedSettings() {
 	showTableContextMenu.value = false
 }
 
-// Function to submit table changes
 function submitTable() {
 	if (!pendingTableData) { return }
 
 	const { doc } = editor.state
 	if (!doc) { return }
 
+	const targetRows = Math.max(1, Number(tableForm.value.rows) || 1)
+	const targetCols = Math.max(1, Number(tableForm.value.cols) || 1)
+
 	if (pendingTableData.existingTable) {
-		// Update existing table instead of creating new one
 		const table = pendingTableData.existingTable
 
-		// Update table styles
+		// 1. Reconcile header row (<thead>)
+		let thead = table.querySelector('thead')
+		if (tableForm.value.showHeaders) {
+			if (!thead) {
+				thead = doc.createElement('thead')
+				const headerRow = thead.insertRow()
+				for (let j = 0; j < targetCols; j++) {
+					const th = doc.createElement('th')
+					th.textContent = `Header ${j + 1}`
+					headerRow.appendChild(th)
+				}
+				const colgroupEl = table.querySelector(':scope > colgroup')
+				if (colgroupEl && colgroupEl.nextSibling) {
+					table.insertBefore(thead, colgroupEl.nextSibling)
+				} else {
+					table.insertBefore(thead, table.firstChild)
+				}
+			} else if (thead.rows.length === 0) {
+				const headerRow = thead.insertRow()
+				for (let j = 0; j < targetCols; j++) {
+					const th = doc.createElement('th')
+					th.textContent = `Header ${j + 1}`
+					headerRow.appendChild(th)
+				}
+			}
+		} else if (thead) {
+			thead.remove()
+			thead = null
+		}
+
+		// 2. Reconcile body rows (<tbody>)
+		let tbody = table.querySelector('tbody')
+		if (!tbody) {
+			tbody = doc.createElement('tbody')
+			Array.from(table.querySelectorAll(':scope > tr')).forEach(tr => tbody!.appendChild(tr))
+			table.appendChild(tbody)
+		}
+
+		while (tbody.rows.length < targetRows) {
+			const newRow = tbody.insertRow()
+			for (let j = 0; j < targetCols; j++) {
+				const td = newRow.insertCell()
+				td.innerHTML = '<br>'
+			}
+		}
+		while (tbody.rows.length > targetRows) {
+			tbody.deleteRow(tbody.rows.length - 1)
+		}
+
+		// 3. Reconcile column count across all rows (thead + tbody)
+		Array.from(table.rows).forEach((row) => {
+			const isHeader = row.parentElement?.tagName === 'THEAD'
+			const currentSpanCols = () => Array.from(row.cells).reduce(
+				(sum, c) => sum + (Math.max(1, Number.parseInt(c.getAttribute('colspan') || '1', 10) || 1)),
+				0
+			)
+			while (currentSpanCols() < targetCols) {
+				const cell = doc.createElement(isHeader ? 'th' : 'td')
+				cell.innerHTML = isHeader ? `Header ${row.cells.length + 1}` : '<br>'
+				row.appendChild(cell)
+			}
+			while (currentSpanCols() > targetCols && row.cells.length > 0) {
+				const lastCell = row.cells[row.cells.length - 1]
+				const span = Math.max(1, Number.parseInt(lastCell.getAttribute('colspan') || '1', 10) || 1)
+				const excess = currentSpanCols() - targetCols
+				if (span > excess) {
+					lastCell.setAttribute('colspan', String(span - excess))
+				} else {
+					lastCell.remove()
+				}
+			}
+		})
+
+		// 4. Update table-level styles, alignment, direction, and <colgroup>
 		table.style.width = `${tableForm.value.width}%`
 		table.style.borderCollapse = 'collapse'
-		table.style.marginBottom = '1rem'
 		table.style.border = `${tableForm.value.borderWidth}px solid ${tableForm.value.borderColor}`
+		table.style.tableLayout = tableForm.value.fixedLayout ? 'fixed' : 'auto'
+		table.dir = tableForm.value.direction
 
-		// Set table layout
-		if (tableForm.value.fixedLayout) {
-			table.style.tableLayout = 'fixed'
-		} else {
-			table.style.tableLayout = 'auto'
-		}
+		applyTableAlignmentToDOM(table, tableForm.value.alignment as 'left' | 'center' | 'right')
 
 		let colgroup = table.querySelector(':scope > colgroup')
 		if (!colgroup) {
 			colgroup = doc.createElement('colgroup')
 			table.insertBefore(colgroup, table.firstChild)
 		}
-		colgroup.replaceChildren(...tableForm.value.columnWidths.slice(0, tableForm.value.cols).map((width) => {
+		const widths = tableForm.value.columnWidths.length === targetCols
+			? tableForm.value.columnWidths
+			: equalColumnWidths(targetCols)
+		colgroup.replaceChildren(...widths.slice(0, targetCols).map((width) => {
 			const column = doc.createElement('col')
 			column.style.width = `${width}%`
 			return column
 		}))
 
-		// Don't force text alignment for all cells - let them inherit from table direction
-		// console.log('Setting cell text alignment:', tableForm.value.alignment)
-		// const allCells = table.querySelectorAll('td, th')
-		// allCells.forEach(cell => {
-		//	const cellEl = cell as HTMLElement
-		//	cellEl.style.textAlign = tableForm.value.alignment
-		// })
-
-		// Set table direction
-		table.dir = tableForm.value.direction
-
-		// Update border and padding for all cells
+		// 5. Update cell styles
 		const allCells = table.querySelectorAll('td, th')
 		allCells.forEach((cell) => {
-			const cellEl = cell as HTMLElement
+			const cellEl = cell as HTMLTableCellElement
 			cellEl.style.padding = `${tableForm.value.cellPadding}px`
 			cellEl.style.border = `${tableForm.value.borderWidth}px solid ${tableForm.value.borderColor}`
 
-			// Set fixed width for fixed layout
 			if (tableForm.value.fixedLayout) {
-				const cellIndex = (cellEl as HTMLTableCellElement).cellIndex
-				cellEl.style.width = `${tableForm.value.columnWidths[cellIndex] ?? (100 / tableForm.value.cols)}%`
+				const cellIndex = cellEl.cellIndex
+				cellEl.style.width = `${widths[cellIndex] ?? (100 / targetCols)}%`
+			} else {
+				cellEl.style.removeProperty('width')
 			}
 		})
 
-		// Update header styles if headers exist
 		const headers = table.querySelectorAll('th')
 		headers.forEach((th) => {
 			const thEl = th as HTMLElement
@@ -1670,8 +1714,6 @@ function submitTable() {
 			thEl.style.color = tableForm.value.headerTextColor
 		})
 
-		// Update body cell styles
-		const tbody = table.querySelector('tbody')
 		if (tbody) {
 			const rows = Array.from(tbody.querySelectorAll('tr'))
 			rows.forEach((row, i) => {
@@ -1679,11 +1721,9 @@ function submitTable() {
 				cells.forEach((cell) => {
 					const cellEl = cell as HTMLElement
 					if (tableForm.value.alternateRows && i % 2 === 1) {
-						// Alternate rows: use special colors
 						cellEl.style.backgroundColor = tableForm.value.alternateRowBgColor
 						cellEl.style.color = tableForm.value.alternateRowTextColor
 					} else {
-						// Regular rows: use cell colors
 						cellEl.style.backgroundColor = tableForm.value.cellBgColor
 						cellEl.style.color = tableForm.value.cellTextColor
 					}
@@ -1693,7 +1733,6 @@ function submitTable() {
 
 		updateContentWithHistory(doc)
 	} else {
-		// Create new table (existing logic)
 		createNewTable(doc)
 	}
 
@@ -1701,40 +1740,17 @@ function submitTable() {
 	pendingTableData = null
 }
 
-// Function to create new table (moved from submitTable)
 function createNewTable(doc: Document) {
 	if (!pendingTableData) { return }
 
-	// Create new table with current settings
 	const table = doc.createElement('table')
 	table.style.width = `${tableForm.value.width}%`
 	table.style.borderCollapse = 'collapse'
 	table.style.marginBottom = '1rem'
 	table.style.border = `${tableForm.value.borderWidth}px solid ${tableForm.value.borderColor}`
+	table.style.tableLayout = tableForm.value.fixedLayout ? 'fixed' : 'auto'
 
-	// Set table layout based on fixedLayout setting
-	if (tableForm.value.fixedLayout) {
-		table.style.tableLayout = 'fixed'
-	} else {
-		table.style.tableLayout = 'auto'
-	}
-
-	// Set table alignment (will be applied directly to table since no wrapper yet)
-	// Don't set textAlign on table - let it inherit from document direction
-	// table.style.textAlign = tableForm.value.alignment
-
-	if (tableForm.value.alignment === 'center') {
-		table.style.marginLeft = 'auto'
-		table.style.marginRight = 'auto'
-	} else if (tableForm.value.alignment === 'right') {
-		table.style.marginLeft = 'auto'
-		table.style.marginRight = '0'
-	} else {
-		table.style.marginLeft = '0'
-		table.style.marginRight = 'auto'
-	}
-
-	// Set table direction
+	applyTableAlignmentToDOM(table, tableForm.value.alignment as 'left' | 'center' | 'right')
 	table.dir = tableForm.value.direction
 
 	const colgroup = doc.createElement('colgroup')
@@ -1745,54 +1761,39 @@ function createNewTable(doc: Document) {
 	})
 	table.appendChild(colgroup)
 
-	// Add header if enabled
 	if (tableForm.value.showHeaders) {
 		const thead = doc.createElement('thead')
 		const headerRow = thead.insertRow()
 		for (let j = 0; j < tableForm.value.cols; j++) {
 			const th = doc.createElement('th')
-			th.innerHTML = `Header ${j + 1}`
+			th.textContent = `Header ${j + 1}`
 			th.style.padding = `${tableForm.value.cellPadding}px`
 			th.style.border = `${tableForm.value.borderWidth}px solid ${tableForm.value.borderColor}`
 			th.style.backgroundColor = tableForm.value.headerBgColor
 			th.style.color = tableForm.value.headerTextColor
-			// Don't set textAlign - let it inherit from table direction
-			// th.style.textAlign = tableForm.value.alignment
-
-			// Set fixed width for fixed layout
 			if (tableForm.value.fixedLayout) {
 				th.style.width = `${tableForm.value.columnWidths[j] ?? (100 / tableForm.value.cols)}%`
 			}
-
 			headerRow.appendChild(th)
 		}
 		table.appendChild(thead)
 	}
 
-	// Add body
 	const tbody = doc.createElement('tbody')
 	for (let i = 0; i < tableForm.value.rows; i++) {
 		const row = tbody.insertRow()
 		for (let j = 0; j < tableForm.value.cols; j++) {
 			const cell = row.insertCell()
-			cell.innerHTML = '&nbsp;'
+			cell.innerHTML = '<br>'
 			cell.style.padding = `${tableForm.value.cellPadding}px`
 			cell.style.border = `${tableForm.value.borderWidth}px solid ${tableForm.value.borderColor}`
-			// Don't set textAlign - let it inherit from table direction
-			// cell.style.textAlign = tableForm.value.alignment
-
-			// Set fixed width for fixed layout
 			if (tableForm.value.fixedLayout) {
 				cell.style.width = `${tableForm.value.columnWidths[j] ?? (100 / tableForm.value.cols)}%`
 			}
-
-			// Apply background and text colors
 			if (tableForm.value.alternateRows && i % 2 === 1) {
-				// Alternate rows: use special colors
 				cell.style.backgroundColor = tableForm.value.alternateRowBgColor
 				cell.style.color = tableForm.value.alternateRowTextColor
 			} else {
-				// Regular rows: use cell colors
 				cell.style.backgroundColor = tableForm.value.cellBgColor
 				cell.style.color = tableForm.value.cellTextColor
 			}
@@ -1800,9 +1801,14 @@ function createNewTable(doc: Document) {
 	}
 	table.appendChild(tbody)
 
-	// Insert new table
 	const { range } = pendingTableData
 	range.insertNode(table)
+	if (!table.nextElementSibling) {
+		const trailingP = doc.createElement('p')
+		trailingP.dir = doc.body.dir || 'ltr'
+		trailingP.innerHTML = '<br>'
+		table.insertAdjacentElement('afterend', trailingP)
+	}
 	range.setStartAfter(table)
 	range.collapse(true)
 	const selection = doc.getSelection()
@@ -1811,72 +1817,33 @@ function createNewTable(doc: Document) {
 		selection.addRange(range)
 	}
 
-	updateContentWithHistory(doc)
 	setupTableEditButtons(doc)
+	updateContentWithHistory(doc)
 }
 
-// Function to delete table
 function deleteTable() {
 	if (!pendingTableData?.existingTable) { return }
 
-	const { existingTable } = pendingTableData
-	existingTable.remove()
-
-	updateContentWithHistory(editor.state.doc!)
+	removeTableElement(pendingTableData.existingTable)
 	showTableEditor.value = false
 	pendingTableData = null
 }
 
-// Function to apply default table settings to externally created tables
 function applyDefaultTableSettings(table: HTMLTableElement) {
-	// Apply default styles from tableForm
-	const defaultSettings = {
-		fixedLayout: true,
-		alignment: 'start',
-		direction: 'ltr'
-	}
-
-	// Set table layout
-	if (defaultSettings.fixedLayout) {
+	const doc = table.ownerDocument
+	if (!table.style.tableLayout) {
 		table.style.tableLayout = 'fixed'
-
-		// Set equal width for all columns if not already set
-		const headers = table.querySelectorAll('th')
-		const cells = table.querySelectorAll('td')
-
-		if (headers.length > 0) {
-			const colWidth = `${100 / headers.length}%`
-			headers.forEach((th) => {
-				if (!(th as HTMLElement).style.width) {
-					(th as HTMLElement).style.width = colWidth
-				}
-			})
-		}
-
-		if (cells.length > 0 && headers.length === 0) {
-			// If no headers, use first row to determine column count
-			const firstRow = table.querySelector('tr')
-			if (firstRow) {
-				const colCount = firstRow.querySelectorAll('td').length
-				const colWidth = `${100 / colCount}%`
-				cells.forEach((td) => {
-					if (!(td as HTMLElement).style.width) {
-						(td as HTMLElement).style.width = colWidth
-					}
-				})
-			}
-		}
 	}
-
-	// Set cell text alignment
-	const allCells = table.querySelectorAll('td, th')
-	allCells.forEach((cell) => {
-		const cellEl = cell as HTMLElement
-		cellEl.style.textAlign = defaultSettings.alignment
-	})
-
-	// Set table direction
-	table.dir = defaultSettings.direction
+	if (!table.style.width) {
+		table.style.width = '100%'
+	}
+	if (!table.style.borderCollapse) {
+		table.style.borderCollapse = 'collapse'
+	}
+	if (!table.dir) {
+		table.dir = doc?.body?.dir || 'ltr'
+	}
+	syncTableColgroup(table)
 }
 
 // Function to delete image
@@ -1911,9 +1878,11 @@ function getCleanHTML(doc: Document | null): string {
 	const clone = doc.body.cloneNode(true) as HTMLElement
 
 	// Strip editor-UI elements that must never appear in output
-	clone.querySelectorAll('.table-edit-btn').forEach((btn) => { btn.remove() })
+	clone.querySelectorAll('.placeholder').forEach((el) => { el.remove() })
+	clone.querySelectorAll('.table-edit-btn, .table-inline-controls').forEach((btn) => { btn.remove() })
 	clone.querySelectorAll('.media-selected').forEach((el) => { el.classList.remove('media-selected') })
 	clone.querySelectorAll('.table-cell-selected').forEach((el) => { el.classList.remove('table-cell-selected') })
+	clone.querySelectorAll('[data-dir-explicit]').forEach((el) => { el.removeAttribute('data-dir-explicit') })
 
 	// Unwrap .table-wrapper divs: restore original table margin-based alignment
 	clone.querySelectorAll('.table-wrapper').forEach((wrapper) => {
@@ -2032,7 +2001,12 @@ function getCleanHTML(doc: Document | null): string {
 		if (fig.classList.length === 0) { fig.removeAttribute('class') }
 	})
 
-	return clone.innerHTML
+	const html = clone.innerHTML
+	if (!clone.textContent?.trim() && !clone.querySelector('img, video, iframe, table, hr, figure')) {
+		return ''
+	}
+
+	return html
 }
 
 // Expose openLinkModal to editor state
@@ -2045,336 +2019,135 @@ function getCleanHTML(doc: Document | null): string {
 ; (editor.state as any).openEmbedModal = openEmbedModal
 ; (editor.state as any).openVideoModal = openVideoModal
 
-// Table manipulation functions
+// Table manipulation functions (delegating to unified 2D grid table utilities)
 function mergeCellRight() {
 	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) { return }
-
-	const cell = contextMenuCell.value
-	const row = cell.parentElement as HTMLTableRowElement
-	const cellIndex = Array.from(row.cells).indexOf(cell)
-	const table = cell.closest('table') as HTMLTableElement
-	const isRTL = table?.dir === 'rtl'
-
-	// In RTL, "right" means the previous cell, in LTR it means the next cell
-	const targetIndex = isRTL ? cellIndex - 1 : cellIndex + 1
-	const targetCell = row.cells[targetIndex]
-
-	if (targetCell && targetIndex >= 0 && targetIndex < row.cells.length) {
-		// Combine content
-		if (targetCell.innerHTML.trim()) {
-			cell.innerHTML += ` ${targetCell.innerHTML}`
-		}
-
-		// Update colspan
-		const currentColspan = Number.parseInt(cell.getAttribute('colspan') || '1')
-		const targetColspan = Number.parseInt(targetCell.getAttribute('colspan') || '1')
-		cell.setAttribute('colspan', (currentColspan + targetColspan).toString())
-
-		// Remove the target cell
-		targetCell.remove()
-
-		updateContentWithHistory(doc)
-	}
+	tableMergeCells(editor.state.range, doc, contextMenuCell.value, 'right')
 }
 
 function mergeCellDown() {
 	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) { return }
-
-	const cell = contextMenuCell.value
-	const table = cell.closest('table') as HTMLTableElement
-	const row = cell.parentElement as HTMLTableRowElement
-	const cellIndex = Array.from(row.cells).indexOf(cell)
-
-	// Find the row below
-	const tbody = table.querySelector('tbody') || table
-	const rows = Array.from(tbody.querySelectorAll('tr'))
-	const currentRowIndex = rows.indexOf(row)
-	const nextRow = rows[currentRowIndex + 1]
-
-	if (nextRow) {
-		const targetCell = nextRow.cells[cellIndex]
-		if (targetCell) {
-			// Combine content
-			if (targetCell.innerHTML.trim()) {
-				cell.innerHTML += `<br>${targetCell.innerHTML}`
-			}
-
-			// Update rowspan
-			const currentRowspan = Number.parseInt(cell.getAttribute('rowspan') || '1')
-			const targetRowspan = Number.parseInt(targetCell.getAttribute('rowspan') || '1')
-			cell.setAttribute('rowspan', (currentRowspan + targetRowspan).toString())
-
-			// Remove the target cell
-			targetCell.remove()
-
-			updateContentWithHistory(doc)
-		}
-	}
+	tableMergeCells(editor.state.range, doc, contextMenuCell.value, 'down')
 }
 
 function splitCell() {
 	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) { return }
-
-	const cell = contextMenuCell.value
-	const table = cell.closest('table') as HTMLTableElement
-	const isRTL = table?.dir === 'rtl'
-	const colspan = Number.parseInt(cell.getAttribute('colspan') || '1')
-	const rowspan = Number.parseInt(cell.getAttribute('rowspan') || '1')
-
-	if (colspan > 1) {
-		// Split horizontally
-		cell.setAttribute('colspan', '1')
-		const row = cell.parentElement as HTMLTableRowElement
-
-		// Add new cells to the right (or left in RTL)
-		for (let i = 1; i < colspan; i++) {
-			const newCell = doc.createElement(cell.tagName.toLowerCase() as 'td' | 'th')
-			newCell.innerHTML = '&nbsp;'
-			newCell.style.cssText = cell.style.cssText
-
-			if (isRTL) {
-				row.insertBefore(newCell, cell)
-			} else {
-				if (cell.nextSibling) {
-					row.insertBefore(newCell, cell.nextSibling)
-				} else {
-					row.appendChild(newCell)
-				}
-			}
-		}
-	} else if (rowspan > 1) {
-		// Split vertically
-		cell.setAttribute('rowspan', '1')
-		const row = cell.parentElement as HTMLTableRowElement
-		const cellIndex = Array.from(row.cells).indexOf(cell)
-		const tbody = table.querySelector('tbody') || table
-		const rows = Array.from(tbody.querySelectorAll('tr'))
-		const currentRowIndex = rows.indexOf(row)
-
-		// Add new cells to rows below
-		for (let i = 1; i < rowspan; i++) {
-			const targetRow = rows[currentRowIndex + i]
-			if (targetRow) {
-				const newCell = doc.createElement(cell.tagName.toLowerCase() as 'td' | 'th')
-				newCell.innerHTML = '&nbsp;'
-				newCell.style.cssText = cell.style.cssText
-
-				// Insert at the correct position
-				if (cellIndex < targetRow.cells.length) {
-					targetRow.insertBefore(newCell, targetRow.cells[cellIndex])
-				} else {
-					targetRow.appendChild(newCell)
-				}
-			}
-		}
-	}
-
-	updateContentWithHistory(doc)
+	tableSplitCell(editor.state.range, doc, contextMenuCell.value)
 }
 
 function insertRowAbove() {
 	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) { return }
-
-	const cell = contextMenuCell.value
-	const row = cell.parentElement as HTMLTableRowElement
-
-	// Create new row with same number of columns
-	const newRow = doc.createElement('tr')
-	const columnCount = Array.from(row.cells).reduce((total, cell) => {
-		return total + Number.parseInt(cell.getAttribute('colspan') || '1')
-	}, 0)
-
-	for (let i = 0; i < columnCount; i++) {
-		const newCell = doc.createElement('td')
-		newCell.innerHTML = '&nbsp;'
-		newCell.style.padding = '8px'
-		newCell.style.border = '1px solid #ddd'
-		newRow.appendChild(newCell)
-	}
-
-	// Insert before current row
-	row.insertAdjacentElement('beforebegin', newRow)
-
-	updateContentWithHistory(doc)
+	tableAddRow('before', editor.state.range, doc, contextMenuCell.value)
 }
 
 function insertRowBelow() {
 	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) { return }
-
-	const cell = contextMenuCell.value
-	const row = cell.parentElement as HTMLTableRowElement
-
-	// Create new row with same number of columns
-	const newRow = doc.createElement('tr')
-	const columnCount = Array.from(row.cells).reduce((total, cell) => {
-		return total + Number.parseInt(cell.getAttribute('colspan') || '1')
-	}, 0)
-
-	for (let i = 0; i < columnCount; i++) {
-		const newCell = doc.createElement('td')
-		newCell.innerHTML = '&nbsp;'
-		newCell.style.padding = '8px'
-		newCell.style.border = '1px solid #ddd'
-		newRow.appendChild(newCell)
-	}
-
-	// Insert after current row
-	row.insertAdjacentElement('afterend', newRow)
-
-	updateContentWithHistory(doc)
+	tableAddRow('after', editor.state.range, doc, contextMenuCell.value)
 }
 
 function deleteRow() {
 	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) { return }
-
-	const cell = contextMenuCell.value
-	const row = cell.parentElement as HTMLTableRowElement
-	const table = cell.closest('table') as HTMLTableElement
-
-	// Don't delete if it's the only row
-	const tbody = table.querySelector('tbody') || table
-	const rows = tbody.querySelectorAll('tr')
-
-	if (rows.length <= 1) { return }
-
-	row.remove()
-	updateContentWithHistory(doc)
+	tableDeleteRow(editor.state.range, contextMenuCell.value)
 }
 
 function insertColumnLeft() {
 	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) { return }
-
-	const cell = contextMenuCell.value
-	const table = cell.closest('table') as HTMLTableElement
-	const cellIndex = Array.from((cell.parentElement as HTMLTableRowElement).cells).indexOf(cell)
-
-	// Add new cell to each row at the same index
-	const rows = table.querySelectorAll('tr')
-	rows.forEach((row) => {
-		const newCell = doc.createElement(row.parentElement?.tagName === 'THEAD' ? 'th' : 'td')
-		newCell.innerHTML = '&nbsp;'
-		newCell.style.padding = '8px'
-		newCell.style.border = '1px solid #ddd'
-
-		if (cellIndex < row.cells.length) {
-			row.insertBefore(newCell, row.cells[cellIndex])
-		} else {
-			row.appendChild(newCell)
-		}
-	})
-
-	updateContentWithHistory(doc)
+	tableInsertColumn('before', editor.state.range, contextMenuCell.value)
 }
 
 function insertColumnRight() {
 	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) { return }
-
-	const cell = contextMenuCell.value
-	const table = cell.closest('table') as HTMLTableElement
-	const cellIndex = Array.from((cell.parentElement as HTMLTableRowElement).cells).indexOf(cell)
-
-	// Add new cell to each row after the current index
-	const rows = table.querySelectorAll('tr')
-	rows.forEach((row) => {
-		const newCell = doc.createElement(row.parentElement?.tagName === 'THEAD' ? 'th' : 'td')
-		newCell.innerHTML = '&nbsp;'
-		newCell.style.padding = '8px'
-		newCell.style.border = '1px solid #ddd'
-
-		const targetIndex = cellIndex + 1
-		if (targetIndex < row.cells.length) {
-			row.insertBefore(newCell, row.cells[targetIndex])
-		} else {
-			row.appendChild(newCell)
-		}
-	})
-
-	updateContentWithHistory(doc)
+	tableInsertColumn('after', editor.state.range, contextMenuCell.value)
 }
 
 function deleteColumn() {
 	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) { return }
-
-	const cell = contextMenuCell.value
-	const table = cell.closest('table') as HTMLTableElement
-	const cellIndex = Array.from((cell.parentElement as HTMLTableRowElement).cells).indexOf(cell)
-
-	// Check if this is the only column
-	const firstRow = table.querySelector('tr')
-	if (firstRow && firstRow.cells.length <= 1) { return }
-
-	// Remove cell from each row at the same index
-	const rows = table.querySelectorAll('tr')
-	rows.forEach((row) => {
-		if (row.cells[cellIndex]) {
-			row.cells[cellIndex].remove()
-		}
-	})
-
-	updateContentWithHistory(doc)
+	tableDeleteColumn(editor.state.range, contextMenuCell.value)
 }
 
-// Table context menu functions
 const canMergeRight = computed(() => {
 	if (!contextMenuCell.value) { return false }
 	const cell = contextMenuCell.value
-	const row = cell.parentElement as HTMLTableRowElement
-	const cellIndex = Array.from(row.cells).indexOf(cell)
-	const table = cell.closest('table') as HTMLTableElement
-	const isRTL = table?.dir === 'rtl'
-	const targetIndex = isRTL ? cellIndex - 1 : cellIndex + 1
-	return targetIndex >= 0 && targetIndex < row.cells.length
+	const table = cell.closest('table') as HTMLTableElement | null
+	if (!table) { return false }
+	const map = buildTableGrid(table)
+	const coords = findCellCoords(map, cell)
+	if (!coords) { return false }
+	const isRTL = table.dir === 'rtl'
+	const targetCol = isRTL ? coords.col - 1 : coords.col + coords.colspan
+	const neighbor = map.grid[coords.row]?.[targetCol]
+	return Boolean(neighbor && neighbor.cell !== cell && neighbor.cell.parentElement === cell.parentElement)
 })
 
 const canMergeDown = computed(() => {
 	if (!contextMenuCell.value) { return false }
 	const cell = contextMenuCell.value
-	const table = cell.closest('table') as HTMLTableElement
-	const rows = Array.from(table.rows)
-	const currentRow = cell.parentElement as HTMLTableRowElement
-	const currentRowIndex = rows.indexOf(currentRow)
-	return currentRowIndex < rows.length - 1
+	const table = cell.closest('table') as HTMLTableElement | null
+	if (!table) { return false }
+	const map = buildTableGrid(table)
+	const coords = findCellCoords(map, cell)
+	if (!coords) { return false }
+	const targetRow = coords.row + coords.rowspan
+	const neighbor = map.grid[targetRow]?.[coords.col]
+	return Boolean(
+		neighbor
+		&& neighbor.cell !== cell
+		&& neighbor.cell.parentElement?.parentElement === cell.parentElement?.parentElement
+	)
 })
 
 const canSplit = computed(() => {
 	if (!contextMenuCell.value) { return false }
 	const cell = contextMenuCell.value
-	const colspan = Number.parseInt(cell.getAttribute('colspan') || '1')
-	const rowspan = Number.parseInt(cell.getAttribute('rowspan') || '1')
+	const colspan = Number.parseInt(cell.getAttribute('colspan') || '1', 10)
+	const rowspan = Number.parseInt(cell.getAttribute('rowspan') || '1', 10)
 	return colspan > 1 || rowspan > 1
 })
 
-function handleTableContextMenu(event: MouseEvent) {
-	const target = event.target as HTMLElement
-	const cell = target.closest('td, th') as HTMLTableCellElement
-
-	if (cell && cell.closest('table')) {
-		event.preventDefault()
-		contextMenuCell.value = cell
-		contextMenuPosition.value = { x: event.clientX, y: event.clientY }
-		showTableContextMenu.value = true
+const tableContextMenuItems = computed<DropdownItem[]>(() => {
+	const items: DropdownItem[] = [
+		{
+			label: 'Advanced Settings',
+			icon: 'settings',
+			action: openExistingTableAdvancedSettings,
+		},
+		{ divider: true },
+	]
+
+	if (canMergeRight.value) {
+		items.push({ label: 'Merge Right', icon: 'start', action: mergeCellRight })
+	}
+	if (canMergeDown.value) {
+		items.push({ label: 'Merge Down', icon: 'text_select_move_down', action: mergeCellDown })
+	}
+	if (canSplit.value) {
+		items.push({ label: 'Split Cell', icon: 'call_split', action: splitCell })
+	}
+	if (canMergeRight.value || canMergeDown.value || canSplit.value) {
+		items.push({ divider: true })
 	}
-}
 
-// Handle clicks outside context menu
-// function handleDocumentClick(event: MouseEvent) {
-// 	if (showTableContextMenu.value) {
-// 		const target = event.target as HTMLElement
-// 		const contextMenu = target.closest('.table-context-menu')
-// 		if (!contextMenu) {
-// 			closeTableContextMenu()
-// 		}
-// 	}
-// }
+	items.push(
+		{ label: 'Insert Row Above', icon: 'add_row_above', action: insertRowAbove },
+		{ label: 'Insert Row Below', icon: 'add_row_below', action: insertRowBelow },
+		{ label: 'Delete Row', icon: 'remove', danger: true, action: deleteRow },
+		{ divider: true },
+		{ label: 'Insert Column Left', icon: 'add_column_left', action: insertColumnLeft },
+		{ label: 'Insert Column Right', icon: 'add_column_right', action: insertColumnRight },
+		{ label: 'Delete Column', icon: 'delete', danger: true, action: deleteColumn },
+	)
+
+	return items
+})
 
 // Expose debug methods if debug mode is enabled
 const debugMethods = computed(() => editor.state.debug)
@@ -2398,87 +2171,473 @@ const editorHeight = computed(() => {
 	return '240px' // default height
 })
 
+let bodyMutationObserver: MutationObserver | null = null
+let activeResizeCleanup: (() => void) | null = null
+const tablePointerSession = usePointerSession()
+
 // Cleanup on component unmount
 onUnmounted(() => {
+	bodyMutationObserver?.disconnect()
+	bodyMutationObserver = null
+	tablePointerSession.cancel()
+	activeResizeCleanup?.()
+	activeResizeCleanup = null
 	editor.cleanup()
 })
 
-function setupTableEditButtons(doc: Document) {
-	const previousEditHandler = (doc as any).__tableEditPointerHandler as ((event: PointerEvent) => void) | undefined
-	if (previousEditHandler) {
-		doc.removeEventListener('pointerdown', previousEditHandler, true)
+function setupTableColumnResizing(doc: Document) {
+	if (activeResizeCleanup) {
+		activeResizeCleanup()
+		activeResizeCleanup = null
 	}
 
-	const tableEditPointerHandler = (event: PointerEvent) => {
-		const target = event.target as Element | null
-		const editButton = target?.closest('.table-edit-btn')
-		if (!editButton) { return }
+	const EDGE_THRESHOLD = 5
+	const ADD_TRIGGER_ZONE = 28
+	const DRAG_THRESHOLD = 5
+	let isSessionActive = false
 
-		const table = editButton.closest('.table-wrapper')?.querySelector('table') as HTMLTableElement | null
-		console.log('[RichText table editor] delegated pointerdown received', {
-			pointerType: event.pointerType,
-			hasTable: Boolean(table),
+	let activeHoverState: {
+		table: HTMLTableElement
+		cell: HTMLTableCellElement
+		insertPosition: 'before' | 'after'
+	} | null = null
+
+	const hideAllInlineControls = () => {
+		doc.querySelectorAll<HTMLElement>('.table-inline-controls').forEach((ctrl) => {
+			ctrl.classList.remove('is-visible', 'show-col-add', 'show-col-thumb', 'is-dragging-col')
 		})
-		if (!table) { return }
+	}
 
-		event.preventDefault()
-		event.stopPropagation()
-		event.stopImmediatePropagation()
-		globalThis.setTimeout(() => {
-			try {
-				openTableEditor(table)
-			} catch (error) {
-				console.error('[RichText table editor] delegated open failed', error)
-			}
-		}, 0)
+	const highlightTableColumn = (table: HTMLTableElement, colIndex: number) => {
+		const map = buildTableGrid(table)
+		doc.querySelectorAll('.table-cell-selected').forEach(c => c.classList.remove('table-cell-selected'))
+		for (let r = 0; r < map.rowCount; r++) {
+			map.grid[r]?.[colIndex]?.cell.classList.add('table-cell-selected')
+		}
 	}
 
-	;(doc as any).__tableEditPointerHandler = tableEditPointerHandler
-	doc.addEventListener('pointerdown', tableEditPointerHandler, true)
+	const applyColumnWidthsToDOM = (table: HTMLTableElement, widths: number[]) => {
+		let colgroup = table.querySelector(':scope > colgroup')
+		if (!colgroup) {
+			colgroup = doc.createElement('colgroup')
+			table.insertBefore(colgroup, table.firstChild)
+		}
+		colgroup.replaceChildren(...widths.map((w) => {
+			const col = doc.createElement('col')
+			col.style.width = `${w}%`
+			return col
+		}))
 
-	// Simple function to add edit buttons to all tables
-	function addEditButtonsToTables() {
-		const tables = doc.querySelectorAll<HTMLTableElement>('table:not([data-edit-button-added])')
+		table.style.tableLayout = 'fixed'
+		Array.from(table.rows).forEach((row) => {
+			Array.from(row.cells).forEach((c, idx) => {
+				if (widths[idx] !== undefined && (c.colSpan || 1) === 1) {
+					c.style.width = `${widths[idx]}%`
+				}
+			})
+		})
+	}
 
-		tables.forEach((table) => {
-			// Create edit button as a span element instead of button
-			const editBtn = doc.createElement('span')
-			editBtn.className = 'table-edit-btn'
-			editBtn.textContent = '✎'
-			editBtn.title = 'Edit Table'
-			editBtn.setAttribute('aria-label', 'Edit Table')
+	const getHoveredResizeCell = (e: PointerEvent): { cell: HTMLTableCellElement, table: HTMLTableElement } | null => {
+		const target = e.target as HTMLElement | null
+		if (target?.closest('.table-inline-controls, .table-edit-btn')) { return null }
+		const cell = target?.closest('td, th') as HTMLTableCellElement | null
+		if (!cell) { return null }
+		const table = cell.closest('table') as HTMLTableElement | null
+		if (!table) { return null }
+		const rect = cell.getBoundingClientRect()
+		const isRTL = table.dir === 'rtl'
+		const nearTrailingEdge = isRTL
+			? (e.clientX - rect.left <= EDGE_THRESHOLD)
+			: (rect.right - e.clientX <= EDGE_THRESHOLD)
+		if (!nearTrailingEdge) { return null }
+		return { cell, table }
+	}
 
-			// Prevent any content insertion into button
-			editBtn.setAttribute('contenteditable', 'false')
-			editBtn.setAttribute('tabindex', '-1')
-			editBtn.style.pointerEvents = 'auto'
-			editBtn.style.userSelect = 'none'
+	const updateInlineColumnControls = (e: PointerEvent) => {
+		const target = e.target as HTMLElement | null
+		if (!target) {
+			hideAllInlineControls()
+			return
+		}
 
-			editBtn.addEventListener('click', (e) => {
-				console.log('[RichText table editor] edit icon click received')
-				e.preventDefault()
-				e.stopPropagation()
-				e.stopImmediatePropagation()
-			})
+		// Keep current handle position locked while pointer is over the inline control buttons themselves
+		if (target.closest('.table-inline-controls')) {
+			return
+		}
 
-			// Prevent focus and content insertion
-			editBtn.addEventListener('focus', (e) => {
-				e.preventDefault()
-				e.stopPropagation()
-				editBtn.blur()
-			})
+		const cell = target.closest('td, th') as HTMLTableCellElement | null
+		const table = cell?.closest('table') as HTMLTableElement | null
+		const wrapper = table?.closest('.table-wrapper') as HTMLElement | null
+		if (!cell || !table || !wrapper) {
+			hideAllInlineControls()
+			return
+		}
 
-			editBtn.addEventListener('pointerdown', (e) => {
-				console.log('[RichText table editor] edit icon pointerdown received', {
-					pointerType: e.pointerType,
-					tableConnected: table.isConnected,
-				})
-				e.preventDefault()
-				e.stopPropagation()
-				e.stopImmediatePropagation()
-			})
+		const controls = wrapper.querySelector<HTMLElement>('.table-inline-controls')
+		const addBtn = controls?.querySelector<HTMLElement>('.table-col-add-btn')
+		const addLine = controls?.querySelector<HTMLElement>('.table-col-add-line')
+		const thumbBtn = controls?.querySelector<HTMLElement>('.table-col-thumb')
+		if (!controls || !addBtn || !addLine || !thumbBtn) { return }
+
+		doc.querySelectorAll<HTMLElement>('.table-inline-controls').forEach((other) => {
+			if (other !== controls) {
+				other.classList.remove('is-visible', 'show-col-add', 'show-col-thumb', 'is-dragging-col')
+			}
+		})
+
+		const wrapperRect = wrapper.getBoundingClientRect()
+		const tableRect = table.getBoundingClientRect()
+		const cellRect = cell.getBoundingClientRect()
+
+		const tableTop = tableRect.top - wrapperRect.top
+		const tableHeight = tableRect.height
+		const cellLeft = cellRect.left - wrapperRect.left
+		const cellRight = cellRect.right - wrapperRect.left
+		const cellCenter = cellLeft + cellRect.width / 2
+
+		const isRTL = table.dir === 'rtl'
+
+		const distLeft = Math.abs(e.clientX - cellRect.left)
+		const distRight = Math.abs(e.clientX - cellRect.right)
+		const nearLeft = distLeft <= distRight
+		const minEdgeDist = Math.min(distLeft, distRight)
+		const nearTopBand = (e.clientY - tableRect.top) <= 36
+
+		// In LTR: left edge inserts 'before', right edge inserts 'after'. In RTL: reversed.
+		const insertPosition: 'before' | 'after' = nearLeft
+			? (isRTL ? 'after' : 'before')
+			: (isRTL ? 'before' : 'after')
+		const boundaryX = nearLeft ? cellLeft : cellRight
+
+		activeHoverState = {
+			table,
+			cell,
+			insertPosition,
+		}
+
+		controls.classList.add('is-visible', 'show-col-thumb')
+		thumbBtn.style.left = `${cellCenter}px`
+		thumbBtn.style.top = `${tableTop}px`
+
+		// Show '+' between columns when near a column divider or near the top header band
+		if (minEdgeDist <= ADD_TRIGGER_ZONE || nearTopBand) {
+			addBtn.style.left = `${boundaryX}px`
+			addBtn.style.top = `${tableTop}px`
+			addLine.style.left = `${boundaryX}px`
+			addLine.style.top = `${tableTop}px`
+			addLine.style.height = `${tableHeight}px`
+			controls.classList.add('show-col-add')
+		} else {
+			controls.classList.remove('show-col-add')
+		}
+	}
+
+	const onHoverPointerMove = (e: PointerEvent) => {
+		if (isSessionActive) { return }
+		updateInlineColumnControls(e)
+
+		const hovered = getHoveredResizeCell(e)
+		if (hovered && hovered.cell.nextElementSibling) {
+			doc.body.style.cursor = 'col-resize'
+		} else if (doc.body.style.cursor === 'col-resize') {
+			doc.body.style.cursor = ''
+		}
+	}
+
+	const onPointerDown = (e: PointerEvent) => {
+		const target = e.target as HTMLElement | null
+
+		// 1. Handle native inline '+' (Add Column) click
+		const addColBtn = target?.closest('.table-col-add-btn') as HTMLElement | null
+		if (addColBtn) {
+			e.preventDefault()
+			e.stopPropagation()
+			e.stopImmediatePropagation()
+			const wrapper = addColBtn.closest('.table-wrapper')
+			const table = wrapper?.querySelector('table') as HTMLTableElement | null
+			const fallbackCell = table?.querySelector('th, td') as HTMLTableCellElement | null
+			const targetCell = (activeHoverState?.table === table && activeHoverState?.cell.isConnected)
+				? activeHoverState.cell
+				: (contextMenuCell.value?.closest('table') === table ? contextMenuCell.value : fallbackCell)
+			const pos = activeHoverState?.table === table
+				? activeHoverState.insertPosition
+				: ((addColBtn.getAttribute('data-insert-pos') as 'before' | 'after') || 'after')
+
+			if (targetCell) {
+				tableInsertColumn(pos, editor.state.range, targetCell)
+				updateContentWithHistory(doc)
+			}
+			return
+		}
+
+		// 2. Handle native inline '⋯' (Column Thumb: drag via usePointerSession to reorder, or click to open ContextMenu)
+		const thumbColBtn = target?.closest('.table-col-thumb') as HTMLElement | null
+		if (thumbColBtn) {
+			e.stopPropagation()
+			e.stopImmediatePropagation()
+			const wrapper = thumbColBtn.closest('.table-wrapper') as HTMLElement | null
+			const table = wrapper?.querySelector('table') as HTMLTableElement | null
+			const controls = wrapper?.querySelector('.table-inline-controls') as HTMLElement | null
+			const addLine = wrapper?.querySelector('.table-col-add-line') as HTMLElement | null
+			const fallbackCell = table?.querySelector('th, td') as HTMLTableCellElement | null
+			const targetCell = (activeHoverState?.table === table && activeHoverState?.cell.isConnected)
+				? activeHoverState.cell
+				: (contextMenuCell.value?.closest('table') === table ? contextMenuCell.value : fallbackCell)
+
+			if (table && wrapper && controls && addLine && targetCell) {
+				const map = buildTableGrid(table)
+				const coords = findCellCoords(map, targetCell)
+				const fromCol = coords?.col ?? 0
+				let toCol = fromCol
+				const initialThumbLeft = thumbColBtn.style.left
+
+				isSessionActive = true
+				tablePointerSession.start(e, {
+					target: thumbColBtn,
+					threshold: DRAG_THRESHOLD,
+					cursor: 'grabbing',
+					onThreshold: () => {
+						controls.classList.add('is-dragging-col')
+						controls.classList.remove('show-col-add')
+						highlightTableColumn(table, fromCol)
+					},
+					onMove: (moveEvent, { exceededThreshold }) => {
+						if (!exceededThreshold) { return }
+						const wrapperRect = wrapper.getBoundingClientRect()
+						const tableRect = table.getBoundingClientRect()
+						const clampedX = Math.max(tableRect.left, Math.min(tableRect.right, moveEvent.clientX))
+						thumbColBtn.style.left = `${clampedX - wrapperRect.left}px`
+
+						const firstRow = table.rows[0]
+						if (firstRow) {
+							let targetIdx = fromCol
+							let indicatorX = clampedX - wrapperRect.left
+							const cells = Array.from(firstRow.cells)
+							for (let i = 0; i < cells.length; i++) {
+								const r = cells[i].getBoundingClientRect()
+								if (clampedX >= r.left && clampedX <= r.right) {
+									targetIdx = i
+									const isRTL = table.dir === 'rtl'
+									const dropEdge = i > fromCol
+										? (isRTL ? r.left : r.right)
+										: (isRTL ? r.right : r.left)
+									indicatorX = dropEdge - wrapperRect.left
+									break
+								}
+							}
+							toCol = targetIdx
+							addLine.style.left = `${indicatorX}px`
+							addLine.style.top = `${tableRect.top - wrapperRect.top}px`
+							addLine.style.height = `${tableRect.height}px`
+						}
+					},
+					onEnd: (_endEvent, { exceededThreshold }) => {
+						isSessionActive = false
+						controls.classList.remove('is-dragging-col')
+
+						if (exceededThreshold) {
+							if (fromCol !== toCol) {
+								tableMoveColumn(table, fromCol, toCol)
+								highlightTableColumn(table, toCol)
+								updateContentWithHistory(doc)
+							} else {
+								thumbColBtn.style.left = initialThumbLeft
+							}
+						} else {
+							// Clicked without dragging: highlight column and open ContextMenu below the thumb
+							contextMenuCell.value = targetCell
+							highlightTableColumn(table, fromCol)
+							const iframeRect = iframe.value?.getBoundingClientRect()
+							const thumbRect = thumbColBtn.getBoundingClientRect()
+							if (iframeRect) {
+								contextMenuPosition.value = {
+									x: iframeRect.left + thumbRect.left,
+									y: iframeRect.top + thumbRect.bottom + 6,
+								}
+								showTableContextMenu.value = true
+							}
+						}
+					},
+					onCancel: () => {
+						isSessionActive = false
+						controls.classList.remove('is-dragging-col')
+						thumbColBtn.style.left = initialThumbLeft
+					},
+				})
+			}
+			return
+		}
+
+		// 3. Handle column border drag-resizing via usePointerSession (with Escape rollback)
+		const hovered = getHoveredResizeCell(e)
+		if (!hovered || !hovered.cell.nextElementSibling) { return }
+
+		const { cell, table } = hovered
+		const map = buildTableGrid(table)
+		const coords = findCellCoords(map, cell)
+		if (!coords) { return }
+		const colIndex = coords.col + coords.colspan - 1
+		if (colIndex >= map.colCount - 1) { return }
+
+		const tableRect = table.getBoundingClientRect()
+		const cols = Array.from(table.querySelectorAll<HTMLElement>(':scope > colgroup > col'))
+		const startWidths = cols.length === map.colCount
+			? cols.map(c => Number.parseFloat(c.style.width) || (100 / map.colCount))
+			: Array.from({ length: map.colCount }, () => Number((100 / map.colCount).toFixed(2)))
+
+		isSessionActive = true
+		hideAllInlineControls()
+		tablePointerSession.start(e, {
+			target: cell,
+			cursor: 'col-resize',
+			onMove: (_moveEvent, { dx }) => {
+				if (tableRect.width <= 0) { return }
+				const isRTL = table.dir === 'rtl'
+				const deltaPx = isRTL ? -dx : dx
+				const deltaPct = (deltaPx / tableRect.width) * 100
+
+				const nextIdx = colIndex + 1
+				if (nextIdx >= startWidths.length) { return }
+
+				const minPct = 5
+				const pairTotal = startWidths[colIndex] + startWidths[nextIdx]
+				const newCurrent = Math.max(minPct, Math.min(pairTotal - minPct, startWidths[colIndex] + deltaPct))
+				const newNext = pairTotal - newCurrent
+
+				const updatedWidths = [...startWidths]
+				updatedWidths[colIndex] = Number(newCurrent.toFixed(2))
+				updatedWidths[nextIdx] = Number(newNext.toFixed(2))
+				applyColumnWidthsToDOM(table, updatedWidths)
+			},
+			onEnd: () => {
+				isSessionActive = false
+				updateContentWithHistory(doc)
+			},
+			onCancel: () => {
+				isSessionActive = false
+				applyColumnWidthsToDOM(table, startWidths)
+			},
+		})
+	}
+
+	doc.addEventListener('pointermove', onHoverPointerMove)
+	doc.addEventListener('pointerdown', onPointerDown)
+
+	activeResizeCleanup = () => {
+		tablePointerSession.cancel()
+		doc.removeEventListener('pointermove', onHoverPointerMove)
+		doc.removeEventListener('pointerdown', onPointerDown)
+	}
+}
+
+function setupTableEditButtons(doc: Document) {
+	const previousEditHandler = (doc as any).__tableEditPointerHandler as ((event: PointerEvent) => void) | undefined
+	if (previousEditHandler) {
+		doc.removeEventListener('pointerdown', previousEditHandler, true)
+	}
+
+	const tableEditPointerHandler = (event: PointerEvent) => {
+		const target = event.target as Element | null
+		const editButton = target?.closest('.table-edit-btn')
+		if (!editButton) { return }
+
+		const table = editButton.closest('.table-wrapper')?.querySelector('table') as HTMLTableElement | null
+		if (!table) { return }
+
+		event.preventDefault()
+		event.stopPropagation()
+		event.stopImmediatePropagation()
+		globalThis.setTimeout(() => {
+			try {
+				openTableEditor(table)
+			} catch (error) {
+				console.error('[RichText table editor] delegated open failed', error)
+			}
+		}, 0)
+	}
+
+	;(doc as any).__tableEditPointerHandler = tableEditPointerHandler
+	doc.addEventListener('pointerdown', tableEditPointerHandler, true)
+	setupTableColumnResizing(doc)
+
+	function createInlineColumnControls(): HTMLElement {
+		const controls = doc.createElement('div')
+		controls.className = 'table-inline-controls'
+		controls.setAttribute('contenteditable', 'false')
+
+		const addLine = doc.createElement('span')
+		addLine.className = 'table-col-add-line'
+		addLine.setAttribute('contenteditable', 'false')
+
+		const addBtn = doc.createElement('span')
+		addBtn.className = 'table-col-add-btn'
+		addBtn.textContent = '+'
+		addBtn.title = 'Insert column here'
+		addBtn.setAttribute('aria-label', 'Insert column here')
+		addBtn.setAttribute('contenteditable', 'false')
+		addBtn.setAttribute('tabindex', '-1')
+
+		const thumbBtn = doc.createElement('span')
+		thumbBtn.className = 'table-col-thumb'
+		thumbBtn.textContent = '⋯'
+		thumbBtn.title = 'Click for column options • Drag to reorder column'
+		thumbBtn.setAttribute('aria-label', 'Column options')
+		thumbBtn.setAttribute('contenteditable', 'false')
+		thumbBtn.setAttribute('tabindex', '-1')
+
+		controls.appendChild(addLine)
+		controls.appendChild(addBtn)
+		controls.appendChild(thumbBtn)
+		return controls
+	}
+
+	// Simple function to add edit buttons to all tables
+	function addEditButtonsToTables() {
+		const tables = doc.querySelectorAll<HTMLTableElement>('table:not([data-edit-button-added])')
+
+		tables.forEach((table) => {
+			const editBtn = doc.createElement('span')
+			editBtn.className = 'table-edit-btn'
+			editBtn.textContent = '✎'
+			editBtn.title = 'Edit Table'
+			editBtn.setAttribute('aria-label', 'Edit Table')
+
+			editBtn.setAttribute('contenteditable', 'false')
+			editBtn.setAttribute('tabindex', '-1')
+			editBtn.style.pointerEvents = 'auto'
+			editBtn.style.userSelect = 'none'
+
+			editBtn.addEventListener('click', (e) => {
+				e.preventDefault()
+				e.stopPropagation()
+				e.stopImmediatePropagation()
+			})
+
+			editBtn.addEventListener('focus', (e) => {
+				e.preventDefault()
+				e.stopPropagation()
+				editBtn.blur()
+			})
+
+			editBtn.addEventListener('pointerdown', (e) => {
+				e.preventDefault()
+				e.stopPropagation()
+				e.stopImmediatePropagation()
+			})
+
+			const existingWrapper = table.closest('.table-wrapper') as HTMLElement | null
+			if (existingWrapper) {
+				if (!existingWrapper.querySelector('.table-edit-btn')) {
+					existingWrapper.appendChild(editBtn)
+				}
+				if (!existingWrapper.querySelector('.table-inline-controls')) {
+					existingWrapper.appendChild(createInlineColumnControls())
+				}
+				table.setAttribute('data-edit-button-added', 'true')
+				return
+			}
 
-			// Create a wrapper div to contain both table and button
 			const wrapper = doc.createElement('div')
 			wrapper.className = 'table-wrapper'
 			wrapper.style.position = 'relative'
@@ -2487,9 +2646,7 @@ function setupTableEditButtons(doc: Document) {
 			wrapper.style.width = '100%'
 			wrapper.style.marginBottom = '1rem'
 
-			// Copy table alignment to wrapper and convert to flex
 			if (table.style.marginLeft && table.style.marginRight) {
-				// Detect current alignment
 				let alignment = 'left'
 				if (table.style.marginLeft === 'auto' && table.style.marginRight === 'auto') {
 					alignment = 'center'
@@ -2497,7 +2654,6 @@ function setupTableEditButtons(doc: Document) {
 					alignment = 'right'
 				}
 
-				// Apply flex alignment to wrapper
 				if (alignment === 'center') {
 					wrapper.style.alignItems = 'center'
 				} else if (alignment === 'right') {
@@ -2506,42 +2662,38 @@ function setupTableEditButtons(doc: Document) {
 					wrapper.style.alignItems = 'flex-start'
 				}
 
-				// Reset table margins since wrapper handles alignment now
 				table.style.marginLeft = '0'
 				table.style.marginRight = '0'
 			} else {
-				// Default to left alignment
 				wrapper.style.alignItems = 'flex-start'
 			}
 
-			// Insert wrapper before table
 			table.parentNode?.insertBefore(wrapper, table)
-			// Move table into wrapper
 			wrapper.appendChild(table)
-			// Add button to wrapper (not to table)
 			wrapper.appendChild(editBtn)
+			wrapper.appendChild(createInlineColumnControls())
 
-			// Remove margin from table since wrapper handles it
 			table.style.marginBottom = '0'
-
 			table.setAttribute('data-edit-button-added', 'true')
 		})
 	}
 
-	// Store function for external access
-	; (doc as any).__addEditButtonsToTables = addEditButtonsToTables
-
-	// Add buttons immediately
+	;(doc as any).__addEditButtonsToTables = addEditButtonsToTables
 	addEditButtonsToTables()
 }
 
 function setupAutoWrapping(doc: Document) {
-	// Function to remove placeholder
+	function createPlaceholderElement(): HTMLParagraphElement {
+		const p = doc.createElement('p')
+		p.className = 'placeholder'
+		p.textContent = props.placeholder || ''
+		return p
+	}
+
 	function removePlaceholder() {
 		const placeholderElement = doc.querySelector('.placeholder')
 		if (placeholderElement) {
 			placeholderElement.remove()
-			// Add empty paragraph if body becomes empty
 			if (!doc.body.innerHTML.trim()) {
 				const direction = getCurrentDirection()
 				doc.body.innerHTML = `<p dir="${direction}"><br></p>`
@@ -2549,16 +2701,14 @@ function setupAutoWrapping(doc: Document) {
 		}
 	}
 
-	// Function to add placeholder if content is empty
 	function addPlaceholder() {
 		const direction = getCurrentDirection()
 		const emptyContent = `<p dir="${direction}"><br></p>`
 		if (props.placeholder && (!doc.body.innerHTML.trim() || doc.body.innerHTML === emptyContent)) {
-			doc.body.innerHTML = `<p class="placeholder">${props.placeholder}</p>`
+			doc.body.replaceChildren(createPlaceholderElement())
 		}
 	}
 
-	// Initialize editor with paragraph or placeholder
 	if (!doc.body.innerHTML.trim()) {
 		if (props.placeholder) {
 			addPlaceholder()
@@ -2568,34 +2718,27 @@ function setupAutoWrapping(doc: Document) {
 		}
 	}
 
-	// After any change, ensure proper structure
 	function normalizeContent() {
-		// Only proceed if the body exists
 		if (!doc.body) {
 			return
 		}
 
-		// If body is completely empty, add a paragraph and return
 		if (!doc.body.innerHTML.trim() || doc.body.innerHTML === '') {
 			const direction = getCurrentDirection()
 			doc.body.innerHTML = `<p dir="${direction}"><br></p>`
 			return
 		}
 
-		// Mark body as being normalized to prevent recursive processing
 		if (doc.body.dataset.normalizing === 'true') {
 			return
 		}
 		doc.body.dataset.normalizing = 'true'
 
 		try {
-			// Only wrap loose text nodes that are direct children of body
 			const walker = doc.createTreeWalker(
 				doc.body,
 				NodeFilter.SHOW_TEXT,
 				(node) => {
-					// Only accept text nodes that are direct children of body
-					// AND have meaningful content
 					const parent = node.parentNode as HTMLElement
 					return (parent === doc.body
 						&& node.textContent?.trim()
@@ -2611,30 +2754,22 @@ function setupAutoWrapping(doc: Document) {
 				textNodes.push(node as Text)
 			}
 
-			// Wrap loose text nodes very carefully, preserving existing structure
 			textNodes.forEach((textNode) => {
-				// Triple check the node is still valid and not corrupted
 				if (textNode.parentNode === doc.body
 					&& textNode.textContent?.trim()
 					&& textNode.nodeType === Node.TEXT_NODE) {
 					const p = doc.createElement('p')
 					p.dir = doc.body.dir || 'ltr'
+					p.textContent = textNode.textContent
 
-					// Clone the text content to avoid any reference issues
-					const { textContent } = textNode
-					p.textContent = textContent
-
-					// Replace the text node with the paragraph
 					try {
 						textNode.parentNode.replaceChild(p, textNode)
-					} catch (error) {
-						// If replacement fails, just remove the problematic text node
+					} catch {
 						textNode.parentNode.removeChild(textNode)
 					}
 				}
 			})
 
-			// Ensure empty body has a paragraph or placeholder
 			if (!doc.body.children.length || !doc.body.innerHTML.trim()) {
 				if (props.placeholder) {
 					addPlaceholder()
@@ -2644,39 +2779,36 @@ function setupAutoWrapping(doc: Document) {
 				}
 			}
 
-			// Clean up empty paragraphs more conservatively
-			const paras = Array.from(doc.body.querySelectorAll('p'))
+			const paras = Array.from(doc.body.querySelectorAll(':scope > p'))
 			for (let i = 0; i < paras.length; i++) {
 				const current = paras[i]
-				const isEmpty = !current.textContent?.trim() || current.innerHTML === '<br>'
+				const isEmpty = !current.textContent?.trim() && !current.querySelector('img, video, iframe')
 
 				if (isEmpty) {
-					// Only remove if we have consecutive empty paragraphs at the end
 					const isLastPara = i === paras.length - 1
 					const prevPara = i > 0 ? paras[i - 1] : null
-					const isPrevEmpty = prevPara && (!prevPara.textContent?.trim() || prevPara.innerHTML === '<br>')
+					const isPrevEmpty = prevPara && !prevPara.textContent?.trim() && !prevPara.querySelector('img, video, iframe')
 
-					// Keep at least one empty paragraph for cursor placement
 					if (isPrevEmpty && !isLastPara) {
 						current.remove()
 					}
 				}
 			}
 		} finally {
-			// Always clean up the processing flag
 			delete doc.body.dataset.normalizing
 		}
 	}
 
 	// Handle input events
 	doc.addEventListener('input', (e) => {
-		// Remove placeholder on first input
-		removePlaceholder()
+		const inputEvent = e as InputEvent
+		if (inputEvent.isComposing) {
+			return
+		}
 
-		// Detect direction based on content
+		removePlaceholder()
 		detectAndSetDirection()
 
-		// Handle complete content deletion immediately
 		if (!doc.body.innerHTML.trim() || doc.body.innerHTML === '') {
 			if (props.placeholder) {
 				addPlaceholder()
@@ -2686,175 +2818,146 @@ function setupAutoWrapping(doc: Document) {
 			}
 			updateContentWithHistory(doc)
 			return
-		} // Don't normalize during normal typing - only on paste/drop
-		const inputEvent = e as InputEvent
-		const normalizeInputTypes = ['insertFromPaste', 'insertFromDrop']
+		}
 
-		// Only normalize on paste/drop operations to avoid interfering with typing
+		const normalizeInputTypes = ['insertFromPaste', 'insertFromDrop']
 		if (inputEvent.inputType && normalizeInputTypes.includes(inputEvent.inputType)) {
-			// Add a delay to let the browser finish processing
 			setTimeout(() => {
 				normalizeContent()
-			}, 100)
+				setupTableEditButtons(doc)
+				updateContentWithHistory(doc)
+			}, 50)
+			return
 		}
 
-		// Always update content to keep state in sync
 		updateContentWithHistory(doc)
 	})
 
-	// Handle Enter key
+	// Handle Enter key safely across inline trees, selections, IME, and tables
 	doc.addEventListener('keydown', (e) => {
-		if (e.key === 'Enter') {
-			const selection = doc.getSelection()
-			if (!selection || !selection.rangeCount) { return }
-
-			const range = selection.getRangeAt(0)
-
-			// Check if we're in any list context - let browser handle lists
-			let currentElement = range.startContainer
-
-			// If it's a text node, get its parent
-			if (currentElement.nodeType === Node.TEXT_NODE) {
-				currentElement = currentElement.parentElement!
-			}
+		if (e.key !== 'Enter') { return }
+		if (e.isComposing || e.keyCode === 229 || e.shiftKey) { return }
 
-			// Check if we're in a list item or list container
-			const li = (currentElement as Element).closest('li')
-			const listContainer = (currentElement as Element).closest('ul, ol')
+		const selection = doc.getSelection()
+		if (!selection || !selection.rangeCount) { return }
 
-			if (li || listContainer) {
-				// We're in a list context - let browser handle everything
-				return
-			} // Find the paragraph we're in (only for confirmed non-list content)
-			let paragraph = range.startContainer
-			if (paragraph.nodeType === Node.TEXT_NODE) {
-				paragraph = paragraph.parentElement!
-			}
-			paragraph = (paragraph as Element).closest('p,h1,h2,h3,h4,h5,h6') as HTMLElement
+		const range = selection.getRangeAt(0)
 
-			if (!paragraph) { return }
+		let currentElement = range.startContainer
+		if (currentElement.nodeType === Node.TEXT_NODE) {
+			currentElement = currentElement.parentElement!
+		}
 
-			// Check if current paragraph is empty and previous paragraph is also empty
-			const currentIsEmpty = !paragraph.textContent?.trim()
-			const prevSibling = (paragraph as Element).previousElementSibling as HTMLElement
-			const prevIsEmpty = prevSibling
-				&& (prevSibling.tagName === 'P')
-				&& !prevSibling.textContent?.trim()
+		// Let browser handle lists and table cells natively
+		if ((currentElement as Element)?.closest('li, ul, ol, td, th')) {
+			return
+		}
 
-			// If both current and previous paragraphs are empty, don't create another empty paragraph
-			if (currentIsEmpty && prevIsEmpty) {
-				e.preventDefault()
-				return
-			}
+		const paragraph = (currentElement as Element)?.closest('p,h1,h2,h3,h4,h5,h6') as HTMLElement | null
+		if (!paragraph) { return }
 
-			// For RTL text, be more careful about splitting
-			const paragraphDirection = getTextDirection(
-				paragraph.textContent || '',
-				(doc.body.dir || 'ltr') as 'ltr' | 'rtl'
-			)
+		const currentIsEmpty = !paragraph.textContent?.trim() && !paragraph.querySelector('img, video, iframe')
+		const prevSibling = paragraph.previousElementSibling as HTMLElement | null
+		const prevIsEmpty = prevSibling
+			&& prevSibling.tagName === 'P'
+			&& !prevSibling.textContent?.trim()
+			&& !prevSibling.querySelector('img, video, iframe')
 
-			// Prevent default and handle manually to avoid browser inconsistencies
+		if (currentIsEmpty && prevIsEmpty) {
 			e.preventDefault()
-			e.stopPropagation()
-
-			// Get the text content before and after cursor
-			const textBeforeCursor = range.startContainer.textContent?.substring(0, range.startOffset) || ''
-			const textAfterCursor = range.startContainer.textContent?.substring(range.startOffset) || ''
+			return
+		}
 
-			// Debug logging to understand the issue
-			 
-			if (props.debug) { /* reserved for future debug output */ }
+		e.preventDefault()
+		e.stopPropagation()
 
-			// Create new paragraph with proper direction
-			const newParagraph = doc.createElement('p')
-			newParagraph.dir = paragraphDirection
+		// Delete selected content first if selection is not collapsed
+		if (!range.collapsed) {
+			range.deleteContents()
+		}
 
-			// If we're splitting text, handle it carefully
-			if (range.startContainer.nodeType === Node.TEXT_NODE && textAfterCursor.trim()) {
-				// We're in the middle of text - split properly
-				const textNode = range.startContainer as Text
+		const paragraphDirection = paragraph.getAttribute('dir') as 'ltr' | 'rtl'
+			|| getTextDirection(paragraph.textContent || '', (doc.body.dir || 'ltr') as 'ltr' | 'rtl')
 
-				// Store the original parent element for formatting preservation
-				const { parentElement } = textNode
+		const newParagraph = doc.createElement('p')
+		newParagraph.dir = paragraphDirection
+		if (paragraph.hasAttribute('data-dir-explicit')) {
+			newParagraph.setAttribute('data-dir-explicit', 'true')
+		}
+		if (paragraph.style.textAlign) {
+			newParagraph.style.textAlign = paragraph.style.textAlign
+		}
 
-				// Keep text before cursor in current paragraph
-				textNode.textContent = textBeforeCursor
+		// Extract all DOM nodes from the caret position to the end of `paragraph`
+		const tailRange = doc.createRange()
+		tailRange.setStart(range.startContainer, range.startOffset)
+		tailRange.setEnd(paragraph, paragraph.childNodes.length)
+		const trailingFragment = tailRange.extractContents()
 
-				// Put text after cursor in new paragraph
-				if (textAfterCursor.trim()) {
-					// Preserve any formatting from the parent element
-					if (parentElement && parentElement !== paragraph) {
-						const newFormattedElement = parentElement.cloneNode(false) as HTMLElement
-						newFormattedElement.textContent = textAfterCursor
-						newParagraph.appendChild(newFormattedElement)
-					} else {
-						newParagraph.textContent = textAfterCursor
-					}
-				} else {
-					newParagraph.innerHTML = '<br>'
-				}
-			} else {
-				// We're at the end of text or in empty space
-				newParagraph.innerHTML = '<br>'
+		// Strip empty inline wrappers left behind at the split boundary
+		Array.from(paragraph.querySelectorAll('b, i, u, strong, em, span, a')).forEach((el) => {
+			if (!el.textContent && !el.querySelector('img, br')) {
+				el.remove()
 			}
+		})
+		Array.from(trailingFragment.querySelectorAll('b, i, u, strong, em, span, a')).forEach((el) => {
+			if (!el.textContent && !el.querySelector('img, br')) {
+				el.remove()
+			}
+		})
 
-			// Insert the new paragraph
-			paragraph.parentNode?.insertBefore(newParagraph, paragraph.nextSibling)
-
-			// Set cursor at the beginning of the new paragraph
-			const newRange = doc.createRange()
-			newRange.selectNodeContents(newParagraph)
-			newRange.collapse(true)
-			selection.removeAllRanges()
-			selection.addRange(newRange)
+		if (!paragraph.textContent?.trim() && !paragraph.querySelector('img, br, video, iframe')) {
+			paragraph.innerHTML = '<br>'
+		}
 
-			// Update content immediately to reflect changes
-			updateContentWithHistory(doc)
+		if (trailingFragment.textContent?.trim() || trailingFragment.querySelector('img, video, iframe')) {
+			newParagraph.appendChild(trailingFragment)
+		} else {
+			newParagraph.innerHTML = '<br>'
 		}
+
+		paragraph.parentNode?.insertBefore(newParagraph, paragraph.nextSibling)
+
+		const newRange = doc.createRange()
+		newRange.selectNodeContents(newParagraph)
+		newRange.collapse(true)
+		selection.removeAllRanges()
+		selection.addRange(newRange)
+
+		updateContentWithHistory(doc)
 	})
 
-	// Handle paste
-	doc.addEventListener('paste', (e) => {
-		// Give the paste operation time to complete before normalizing
-		setTimeout(() => {
-			normalizeContent()
-			updateContentWithHistory(doc)
-		}, 150) // Longer timeout for reliable paste processing
-	})	// Add a MutationObserver to catch structural changes that might create loose text
-	const observer = new MutationObserver((mutations) => {
+	// Disconnect any previous observer before attaching a new one
+	bodyMutationObserver?.disconnect()
+	bodyMutationObserver = new MutationObserver((mutations) => {
 		for (const mutation of mutations) {
 			if (mutation.type === 'childList') {
-				// Check if any loose text nodes were added to body
 				Array.from(mutation.addedNodes).forEach((addedNode) => {
 					if (addedNode.nodeType === Node.TEXT_NODE
 						&& addedNode.parentNode === doc.body
 						&& addedNode.textContent?.trim()) {
-						// Wrap loose text node immediately
 						const p = doc.createElement('p')
 						p.dir = doc.body.dir || 'ltr'
 						p.textContent = addedNode.textContent
 						addedNode.parentNode.replaceChild(p, addedNode)
 						updateContentWithHistory(doc)
-					}
-					// Check if a table was added
-					else if (addedNode.nodeType === Node.ELEMENT_NODE) {
+					} else if (addedNode.nodeType === Node.ELEMENT_NODE) {
 						const element = addedNode as HTMLElement
-						if (element.tagName === 'TABLE') {
+						const tables = element.tagName === 'TABLE'
+							? [element as HTMLTableElement]
+							: Array.from(element.querySelectorAll<HTMLTableElement>('table'))
+						if (tables.length > 0) {
 							setTimeout(() => {
-								applyDefaultTableSettings(element as HTMLTableElement)
+								tables.forEach(t => applyDefaultTableSettings(t))
 								setupTableEditButtons(doc)
-							}, 100)
+							}, 20)
 						}
-						// Apply direction to blockquotes and lists
-						else if (['BLOCKQUOTE', 'UL', 'OL'].includes(element.tagName)) {
+						if (['BLOCKQUOTE', 'UL', 'OL'].includes(element.tagName)) {
 							if (!element.dir) {
 								element.dir = doc.body.dir || 'ltr'
 							}
-
-							// Also apply direction to list items if it's a list
 							if (element.tagName === 'UL' || element.tagName === 'OL') {
-								const listItems = element.querySelectorAll('li')
-								listItems.forEach((li) => {
+								element.querySelectorAll('li').forEach((li) => {
 									if (!li.dir) {
 										li.dir = element.dir
 									}
@@ -2867,17 +2970,11 @@ function setupAutoWrapping(doc: Document) {
 		}
 	})
 
-	// Start observing
-	observer.observe(doc.body, {
+	bodyMutationObserver.observe(doc.body, {
 		childList: true,
-		subtree: false // Only watch direct children of body
+		subtree: true
 	})
 
-	// Store observer for cleanup
-	if (!doc.body.dataset.observers) {
-		doc.body.dataset.observers = 'mutation'
-	}
-
 	// Handle clicks on links to open link modal
 	doc.addEventListener('click', (e) => {
 		const target = e.target as HTMLElement
@@ -3052,7 +3149,7 @@ async function initEditor() {
 			}
 			body {
 				margin: 0;
-				padding: 8px;
+				padding: 14px 8px 8px 8px;
 				min-height: 200px;
 				font-family: ${currentFontFamily.value};
 				line-height: 1.5;
@@ -3140,6 +3237,116 @@ async function initEditor() {
 			.table-edit-btn:active {
 				background: #1f1f1f;
 			}
+
+			/* Native inline column add (+) and draggable column thumb (⋯) handles */
+			.table-inline-controls {
+				position: absolute;
+				inset: 0;
+				pointer-events: none;
+				user-select: none;
+				z-index: 95;
+			}
+
+			.table-col-add-btn,
+			.table-col-thumb {
+				position: absolute;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-family: sans-serif;
+				font-weight: 600;
+				line-height: 1;
+				pointer-events: auto;
+				user-select: none;
+				opacity: 0;
+				visibility: hidden;
+				transform: translate(-50%, -50%) scale(0.9);
+				transition: opacity 0.14s ease, transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, visibility 0.14s ease;
+			}
+
+			.table-col-add-btn {
+				width: 20px;
+				height: 20px;
+				border-radius: 999px;
+				background: #007bff;
+				color: #fff !important;
+				border: 2px solid #fff;
+				font-size: 14px;
+				cursor: pointer;
+				box-shadow: 0 2px 6px rgba(0, 123, 255, 0.35);
+				z-index: 98;
+			}
+
+			.table-col-add-btn:hover {
+				background: #0056b3;
+				transform: translate(-50%, -50%) scale(1.08) !important;
+			}
+
+			.table-col-add-line {
+				position: absolute;
+				width: 2px;
+				background: #007bff;
+				pointer-events: none;
+				opacity: 0;
+				visibility: hidden;
+				transform: translateX(-50%);
+				transition: opacity 0.14s ease, visibility 0.14s ease;
+				z-index: 94;
+			}
+
+			.table-col-thumb {
+				width: 28px;
+				height: 14px;
+				border-radius: 999px;
+				background: #f3f4f6;
+				color: #4b5563 !important;
+				border: 1px solid #d1d5db;
+				font-size: 13px;
+				letter-spacing: -1px;
+				cursor: grab;
+				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+				z-index: 96;
+			}
+
+			.table-col-thumb:hover {
+				background: #007bff;
+				color: #fff !important;
+				border-color: #007bff;
+				transform: translate(-50%, -50%) scale(1.05) !important;
+			}
+
+			.table-col-thumb:active,
+			.table-inline-controls.is-dragging-col .table-col-thumb {
+				cursor: grabbing;
+				background: #0056b3;
+				color: #fff !important;
+				border-color: #0056b3;
+			}
+
+			.table-wrapper:hover .table-inline-controls.is-visible.show-col-add .table-col-add-btn {
+				opacity: 1;
+				visibility: visible;
+				transform: translate(-50%, -50%) scale(1);
+			}
+
+			.table-wrapper:hover .table-inline-controls.is-visible.show-col-add .table-col-add-line,
+			.table-inline-controls.is-dragging-col .table-col-add-line {
+				opacity: 0.45;
+				visibility: visible;
+			}
+
+			.table-wrapper:hover .table-inline-controls.is-visible.show-col-add:has(.table-col-add-btn:hover) .table-col-add-line,
+			.table-inline-controls.is-dragging-col .table-col-add-line {
+				opacity: 0.9;
+				visibility: visible;
+			}
+
+			.table-wrapper:hover .table-inline-controls.is-visible.show-col-thumb .table-col-thumb,
+			.table-inline-controls.is-dragging-col .table-col-thumb {
+				opacity: 1;
+				visibility: visible;
+				transform: translate(-50%, -50%) scale(1);
+			}
 				.richtext-editor-content blockquote {
 				padding: 8px !important;
 				background: #f4f4f4 !important;
@@ -3257,50 +3464,52 @@ async function initEditor() {
 				opacity: 1 !important;
 				background: #007bff !important;
 			}
+
+			.table-cell-selected {
+				background-color: rgba(0, 123, 255, 0.08) !important;
+				outline: 2px solid #007bff !important;
+				outline-offset: -2px !important;
+			}
+
+			.placeholder {
+				color: #9ca3af;
+				font-style: italic;
+				pointer-events: none;
+				user-select: none;
+			}
 		` // Create a complete HTML document with proper doctype and meta tags
-		const initialContent = normalizedModelValue.value || (props.placeholder ? `<p class="placeholder">${props.placeholder}</p>` : '')
 		const htmlContent = `
 			<!DOCTYPE html>
 			<html>
 			<head>
 				<meta charset="UTF-8">
 				<meta name="viewport" content="width=device-width, initial-scale=1.0">
-				<meta http-equiv="Content-Security-Policy" content="
-					default-src * data: blob: 'unsafe-inline' 'unsafe-eval';
-					img-src * data: blob:;
-					style-src * 'unsafe-inline';
-					script-src * 'unsafe-inline' 'unsafe-eval';
-					frame-src * data: blob:;
-					connect-src *;
-					media-src *;
-				">
 				<base target="_blank">
 				<style id="editor-styles">
-
 				${editorStylesContent}
-				.placeholder {
-					color: #9ca3af;
-					font-style: italic;
-					pointer-events: none;
-					user-select: none;
-				}
-			
 				</style>
 			</head>
-			<body class="richtext-editor-content">${initialContent}</body>
+			<body class="richtext-editor-content"></body>
 			</html>
 		`
 
-		// Write the complete HTML document to the iframe
+		// Write the HTML shell to the iframe, then populate body via DOM
 		const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document
 		if (!doc) { return }
 
-		// First write the content
 		doc.open()
-		// ! @deprecated — MDN Reference[https://developer.mozilla.org/en-US/docs/Web/API/Document/write]
 		doc.write(htmlContent)
 		doc.close()
 
+		if (normalizedModelValue.value) {
+			doc.body.innerHTML = normalizedModelValue.value
+		} else if (props.placeholder) {
+			const placeholderEl = doc.createElement('p')
+			placeholderEl.className = 'placeholder'
+			placeholderEl.textContent = props.placeholder
+			doc.body.appendChild(placeholderEl)
+		}
+
 		// Then make it editable after a short delay
 		await new Promise(resolve => setTimeout(resolve, 0))
 
@@ -3311,16 +3520,12 @@ async function initEditor() {
 		doc.body.dir = hasRTL.value ? 'rtl' : 'ltr'
 		doc.body.style.direction = doc.body.dir
 
-		// Resolve bidirectional text independently for each block. Using the
-		// first strong character keeps English fragments stable inside Hebrew
-		// text (and vice versa) without forcing one direction on the whole document.
 		doc.body.querySelectorAll('p,h1,h2,h3,h4,h5,h6,blockquote,li').forEach((block) => {
 			if (!block.classList.contains('placeholder')) {
 				block.setAttribute('dir', getBlockDirection(block, doc.body.dir as 'ltr' | 'rtl'))
 			}
 		})
 
-		// Apply direction to existing blockquotes and lists
 		const blockElements = doc.body.querySelectorAll('blockquote, ul, ol')
 		blockElements.forEach((element) => {
 			const htmlElement = element as HTMLElement
@@ -3328,7 +3533,6 @@ async function initEditor() {
 				htmlElement.dir = doc.body.dir || 'ltr'
 			}
 
-			// Also apply direction to list items
 			if (htmlElement.tagName === 'UL' || htmlElement.tagName === 'OL') {
 				const listItems = htmlElement.querySelectorAll('li')
 				listItems.forEach((li) => {
@@ -3340,40 +3544,33 @@ async function initEditor() {
 			}
 		})
 
+		// Auto clear format for basic mode (convert top-level blocks to plain <p> without nesting <p> inside <p>)
+		if (props.basic && normalizedModelValue.value) {
+			const lines = Array.from(doc.body.childNodes)
+				.map(node => (node.textContent || '').trim())
+				.filter(Boolean)
+			doc.body.innerHTML = ''
+			if (lines.length === 0) {
+				const p = doc.createElement('p')
+				p.dir = doc.body.dir || 'ltr'
+				p.innerHTML = '<br>'
+				doc.body.appendChild(p)
+			} else {
+				lines.forEach((line) => {
+					const p = doc.createElement('p')
+					p.dir = getTextDirection(line, (doc.body.dir || 'ltr') as 'ltr' | 'rtl')
+					p.textContent = line
+					doc.body.appendChild(p)
+				})
+			}
+		}
+
 		// Ensure editor.state.content is set to the current HTML content
 		editor.state.content = doc.body.innerHTML
 
 		editor.init(doc)
 		useEditorKeyboard(doc, commands)
 
-		// Auto clear format for basic mode
-		if (props.basic && normalizedModelValue.value) {
-			setTimeout(() => {
-				// Clear all formatting by removing styles and replacing with plain text
-				const elements = doc.body.querySelectorAll('*')
-				elements.forEach((el) => {
-					if (el.tagName !== 'P' && el.tagName !== 'BR') {
-						const textContent = el.textContent || ''
-						if (textContent.trim()) {
-							const p = doc.createElement('p')
-							p.textContent = textContent
-							el.parentNode?.replaceChild(p, el)
-						} else {
-							el.remove()
-						}
-					} else if (el.tagName === 'P') {
-						// Remove all attributes from paragraphs
-						Array.from(el.attributes).forEach((attr) => {
-							if (attr.name !== 'dir') {
-								el.removeAttribute(attr.name)
-							}
-						})
-					}
-				})
-				updateContentWithHistory(doc)
-			}, 100)
-		}
-
 		// Add inline toolbar selection listener
 		doc.addEventListener('selectionchange', () => {
 			editor.updateState.selection()
@@ -3386,17 +3583,61 @@ async function initEditor() {
 			setTimeout(() => { showInlineToolbarForSelection() }, 10)
 		})
 
-		// Hide inline toolbar when clicking outside or when selection is lost
+		// Hide inline toolbar & table context menu when clicking inside the iframe
 		doc.addEventListener('click', (e) => {
+			const target = e.target as HTMLElement
+			if (target.closest('.table-inline-controls')) {
+				return
+			}
+
+			showTableContextMenu.value = false
 			setTimeout(() => {
 				const selection = doc.getSelection()
 				if (!selection || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed) {
 					closeInlineToolbar()
 				}
 			}, 10)
+
+			const cell = target.closest('td, th') as HTMLTableCellElement | null
+
+			if (cell && cell.closest('table')) {
+				const table = cell.closest('table')!
+				if (e.shiftKey && contextMenuCell.value && contextMenuCell.value.closest('table') === table) {
+					// Rectangular Shift+Click cell selection
+					const map = buildTableGrid(table)
+					const anchorCoords = findCellCoords(map, contextMenuCell.value)
+					const targetCoords = findCellCoords(map, cell)
+					doc.querySelectorAll('.table-cell-selected').forEach(c => c.classList.remove('table-cell-selected'))
+					if (anchorCoords && targetCoords) {
+						const minR = Math.min(anchorCoords.row, targetCoords.row)
+						const maxR = Math.max(anchorCoords.row + anchorCoords.rowspan - 1, targetCoords.row + targetCoords.rowspan - 1)
+						const minC = Math.min(anchorCoords.col, targetCoords.col)
+						const maxC = Math.max(anchorCoords.col + anchorCoords.colspan - 1, targetCoords.col + targetCoords.colspan - 1)
+						for (let r = minR; r <= maxR; r++) {
+							for (let c = minC; c <= maxC; c++) {
+								map.grid[r]?.[c]?.cell.classList.add('table-cell-selected')
+							}
+						}
+					} else {
+						cell.classList.add('table-cell-selected')
+						contextMenuCell.value = cell
+					}
+				} else {
+					doc.querySelectorAll('.table-cell-selected').forEach(c => c.classList.remove('table-cell-selected'))
+					cell.classList.add('table-cell-selected')
+					contextMenuCell.value = cell
+				}
+			} else {
+				doc.querySelectorAll('.table-cell-selected').forEach(c => c.classList.remove('table-cell-selected'))
+			}
 		})
 
-		// Also hide when pressing keyboard arrows or escape
+		// Also hide inline toolbar on scroll or when pressing keyboard arrows or escape
+		doc.addEventListener('scroll', () => {
+			closeInlineToolbar()
+			showTableContextMenu.value = false
+		}, { passive: true })
+
 		doc.addEventListener('keydown', (e) => {
 			if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Escape'].includes(e.key)) {
 				setTimeout(() => {
@@ -3428,7 +3669,7 @@ async function initEditor() {
 			}
 		})
 
-		// Add table context menu listener
+		// Add table context menu listener with viewport boundary clamping
 		doc.addEventListener('contextmenu', (e) => {
 			const target = e.target as HTMLElement
 			const cell = target.closest('td, th') as HTMLTableCellElement
@@ -3437,49 +3678,35 @@ async function initEditor() {
 				e.preventDefault()
 				contextMenuCell.value = cell
 
-				// Get iframe position relative to viewport
 				const iframeRect = iframe.value!.getBoundingClientRect()
+				const menuWidth = 180
+				const menuHeight = 280
+				const rawX = iframeRect.left + e.clientX
+				const rawY = iframeRect.top + e.clientY
 				contextMenuPosition.value = {
-					x: iframeRect.left + e.clientX,
-					y: iframeRect.top + e.clientY
+					x: Math.max(8, Math.min(window.innerWidth - menuWidth - 8, rawX)),
+					y: Math.max(8, Math.min(window.innerHeight - menuHeight - 8, rawY))
 				}
 				showTableContextMenu.value = true
 			}
 		})
 
-		// Add click listener to highlight selected table cell
-		doc.addEventListener('click', (e) => {
-			// Remove previous highlights
-			doc.querySelectorAll('.table-cell-selected').forEach((cell) => {
-				cell.classList.remove('table-cell-selected')
-			})
-
-			const target = e.target as HTMLElement
-			const cell = target.closest('td, th') as HTMLTableCellElement
-
-			if (cell && cell.closest('table')) {
-				// Highlight the selected cell
-				cell.classList.add('table-cell-selected')
-				contextMenuCell.value = cell
-			}
-		})
-
 		// Setup auto-wrapping for typed content
 		setupAutoWrapping(doc)
 
 		// Setup table edit buttons
 		setupTableEditButtons(doc)
 
-		// Update state.content after cleanup
-		updateContentWithHistory(doc)
+		// Update state.content after cleanup (skip pushing initial setup into undoStack)
+		updateContentWithHistory(doc, true)
 
 		// If editor is empty, add an initial paragraph
-		if (!doc.body.innerHTML.trim() || !doc.body.querySelector('p,h1,h2,h3,h4,h5,h6,blockquote,ul,ol,table')) {
+		if (!doc.body.innerHTML.trim() || !doc.body.querySelector('p,h1,h2,h3,h4,h5,h6,blockquote,ul,ol,table,figure')) {
 			const p = doc.createElement('p')
 			p.dir = doc.body.dir
+			p.innerHTML = '<br>'
 			doc.body.appendChild(p)
 
-			// Set cursor in the new paragraph
 			const range = doc.createRange()
 			range.selectNodeContents(p)
 			range.collapse(true)
@@ -3489,7 +3716,7 @@ async function initEditor() {
 				selection.addRange(range)
 			}
 
-			updateContentWithHistory(doc)
+			updateContentWithHistory(doc, true)
 		}
 
 		// Only focus if autofocus is explicitly set to true
@@ -3555,29 +3782,55 @@ watch([currentInputColor, currentTextColor, currentFontFamily, effectiveContentS
 	}
 }, { flush: 'post' })
 
-// Reset initialization state when content changes significantly.
-// Compare incoming value against the CLEAN output (not raw DOM innerHTML) to avoid
-// false positives caused by editor chrome (table wrappers, edit buttons, etc.)
-watch(normalizedModelValue, (newValue, oldValue) => {
-	const cleanCurrent = editor.state.doc ? getCleanHTML(editor.state.doc ?? null) : ''
-	if (newValue !== cleanCurrent) {
-		if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
-			hasInitialized.value = false
-			editor.state.content = newValue
-			editor.updateState.content('html')
-			setTimeout(() => {
-				if (editor.state.doc) {
-					updateContentWithHistory(editor.state.doc)
-					setupTableEditButtons(editor.state.doc)
-				}
-			}, 100)
+// Synchronize external modelValue changes cleanly without hiding the iframe or dropping small (<50 char) updates
+watch(normalizedModelValue, (newValue) => {
+	const doc = editor.state.doc
+	if (!doc?.body) {
+		editor.state.content = newValue
+		return
+	}
+
+	const cleanCurrent = getCleanHTML(doc)
+	if (newValue === cleanCurrent) {
+		return
+	}
+
+	pushHistorySnapshot(editor.state, editor.state.content)
+	if (!newValue.trim()) {
+		if (props.placeholder) {
+			const placeholderEl = doc.createElement('p')
+			placeholderEl.className = 'placeholder'
+			placeholderEl.textContent = props.placeholder
+			doc.body.replaceChildren(placeholderEl)
 		} else {
-			setTimeout(() => {
-				if (editor.state.doc) {
-					setupTableEditButtons(editor.state.doc)
-				}
-			}, 50)
+			const direction = getCurrentDirection()
+			doc.body.innerHTML = `<p dir="${direction}"><br></p>`
+		}
+	} else {
+		doc.body.innerHTML = newValue
+	}
+
+	detectAndSetDirection()
+	setupTableEditButtons(doc)
+	editor.state.content = doc.body.innerHTML
+})
+
+// Clean HTML model for Split View (CodeEditor) so internal editor chrome is never exposed
+const splitViewHtml = computed({
+	get: () => {
+		void editor.state.content
+		return editor.state.doc ? getCleanHTML(editor.state.doc) : editor.state.content
+	},
+	set: (val: string) => {
+		const doc = editor.state.doc
+		if (!doc?.body) {
+			editor.state.content = val
+			return
 		}
+		pushHistorySnapshot(editor.state, editor.state.content)
+		doc.body.innerHTML = val
+		setupTableEditButtons(doc)
+		editor.state.content = doc.body.innerHTML
 	}
 })
 
@@ -3589,36 +3842,23 @@ watch(() => editor.state.content, () => {
 // Watch table alignment changes and update the table immediately
 watch(() => tableForm.value.alignment, (newAlignment) => {
 	if (pendingTableData?.existingTable) {
-		const table = pendingTableData.existingTable
-		if (newAlignment === 'center') {
-			table.style.marginLeft = 'auto'
-			table.style.marginRight = 'auto'
-		} else if (newAlignment === 'right') {
-			table.style.marginLeft = 'auto'
-			table.style.marginRight = '0'
-		} else {
-			table.style.marginLeft = '0'
-			table.style.marginRight = 'auto'
-		}
-
-		// Update content with history
+		applyTableAlignmentToDOM(pendingTableData.existingTable, newAlignment as 'left' | 'center' | 'right')
 		if (editor.state.doc) {
 			updateContentWithHistory(editor.state.doc)
 		}
 	}
 })
 
-// Close context menu when clicking outside
 function handleGlobalClick() {
 	showTableContextMenu.value = false
 }
 
-// Add event listener when component mounts
-if (typeof window !== 'undefined') {
-	window.addEventListener('click', handleGlobalClick)
-}
+onMounted(() => {
+	if (typeof window !== 'undefined') {
+		window.addEventListener('click', handleGlobalClick)
+	}
+})
 
-// Cleanup event listener
 onBeforeUnmount(() => {
 	if (typeof window !== 'undefined') {
 		window.removeEventListener('click', handleGlobalClick)
@@ -3693,14 +3933,13 @@ const imgTransform = computed({
 				>
 				<iframe
 					id="rich-text-iframe" ref="iframe" class="editableContent" :class="{ 'editor-ready': hasInitialized }" title="Editor" srcdoc=""
-						sandbox="allow-same-origin allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
-						@load="initEditor" @contextmenu="handleTableContextMenu"
-					/>
+					sandbox="allow-same-origin allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation"
+					@load="initEditor"
+				/>
 				</div>
 				<CodeEditor
-					v-if="editor.state.isSplitView" v-model="editor.state.content" language="html" wrap
+					v-if="editor.state.isSplitView" v-model="splitViewHtml" language="html" wrap
 					:height="editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight"
-					@update:modelValue="editor.updateState.content('html')"
 				/>
 			</div>
 			<div v-if="debug" class="flex pt-05">
@@ -3748,92 +3987,18 @@ const imgTransform = computed({
 					:class="{ active: editor.state.selectedStyles.has('underline') }"
 					@click="runInlineAction('underline')"
 				/>
-				<span class="separator">|</span>
+				<Divider vertical size="1.25rem" class="mx-0125" />
 				<Btn thin flat icon="add_link" @click="runInlineAction('link')" />
 			</div>
 		</div>
-		<!-- Table Context Menu -->
-		<div
-			v-if="showTableContextMenu" class="table-context-menu" :style="{
-				position: 'fixed',
-				top: `${contextMenuPosition.y}px`,
-				left: `${contextMenuPosition.x}px`,
-				zIndex: 1001,
-			}"
-		>
-			<div class="context-menu-content" @click.stop>
-				<div class="menu-header">
-					<span>Table Actions</span>
-					<button class="close-btn" @click="showTableContextMenu = false">
-						×
-					</button>
-				</div>
-				<div class="px-025">
-					<Btn
-						full-width align-txt="start" thin icon="settings"
-						class="context-menu-btn context-menu-btn--advanced" value="Advanced Settings"
-						@mousedown.stop @click.stop="openExistingTableAdvancedSettings"
-					/>
-					<div class="context-menu-separator" />
-					<Btn
-						v-if="canMergeRight" full-width align-txt="start" thin flat icon="start"
-						class="context-menu-btn" @click="mergeCellRight(); showTableContextMenu = false"
-					>
-						Merge Right
-					</Btn>
-					<Btn
-						v-if="canMergeDown" full-width align-txt="start" thin flat icon="text_select_move_down"
-						class="context-menu-btn" @click="mergeCellDown(); showTableContextMenu = false"
-					>
-						Merge Down
-					</Btn>
-					<Btn
-						v-if="canSplit" full-width align-txt="start" thin flat icon="call_split"
-						class="context-menu-btn" @click="splitCell(); showTableContextMenu = false"
-					>
-						Split Cell
-					</Btn>
-					<div v-if="canMergeRight || canMergeDown || canSplit" class="context-menu-separator" />
-					<Btn
-						full-width align-txt="start" thin flat icon="add_row_above" class="context-menu-btn"
-						@click="insertRowAbove(); showTableContextMenu = false"
-					>
-						Insert Row Above
-					</Btn>
-					<Btn
-						full-width align-txt="start" thin flat icon="add_row_below" class="context-menu-btn"
-						@click="insertRowBelow(); showTableContextMenu = false"
-					>
-						Insert Row Below
-					</Btn>
-					<Btn
-						full-width align-txt="start" thin flat icon="remove" class="context-menu-btn"
-						@click="deleteRow(); showTableContextMenu = false"
-					>
-						Delete Row
-					</Btn>
-					<div class="context-menu-separator" />
-					<Btn
-						full-width align-txt="start" thin flat icon="add_column_left" class="context-menu-btn"
-						@click="insertColumnLeft(); showTableContextMenu = false"
-					>
-						Insert Column Left
-					</Btn>
-					<Btn
-						full-width align-txt="start" thin flat icon="add_column_right" class="context-menu-btn"
-						@click="insertColumnRight(); showTableContextMenu = false"
-					>
-						Insert Column Right
-					</Btn>
-					<Btn
-						full-width align-txt="start" thin flat icon="remove" class="context-menu-btn"
-						@click="deleteColumn(); showTableContextMenu = false"
-					>
-						Delete Column
-					</Btn>
-				</div>
-			</div>
-		</div>
+		<!-- Table Context Menu (built on shared ContextMenu / Dropdown) -->
+		<ContextMenu
+			v-model:shown="showTableContextMenu"
+			:anchor-point="contextMenuPosition"
+			title="Table Actions"
+			:items="tableContextMenuItems"
+			popup-class="rich-text-light-theme"
+		/>
 	</div>
 	<!-- Link Modal -->
 	<Dialog
@@ -4045,13 +4210,7 @@ const imgTransform = computed({
 		<template #default>
 			<div class="grid grid-wrap-4 m_grid-wrap-2 gap-col-1 table-editor testMe1">
 				<!-- Structure Section -->
-				<div class="flex gap-05 white-space mt-0 grid-span-4 m_grid-span-2 pt-1 pb-05">
-					<div class="line" />
-					<p class="label grid-span-4 m_grid-span-2">
-						Table Structure
-					</p>
-					<div class="line" />
-				</div>
+				<Divider label="Table Structure" class="grid-span-4 m_grid-span-2 pt-05 pb-025" />
 				<NumberInput v-model="tableForm.rows" :min="1" :max="20" label="Rows" />
 				<NumberInput v-model="tableForm.cols" :min="1" :max="10" label="Columns" />
 				<div class="grid-span-4 m_grid-span-2">
@@ -4071,52 +4230,31 @@ const imgTransform = computed({
 					</p>
 				</div>
 				<!-- Cell Text Alignment -->
-				<div class="grid-span-1">
-					<label class="label">Cell Text Alignment</label>
-					<div
-						class="flex gap-025 mt-025 radius-1 p-05 w-fit"
-						style="height: var(--bgl-input-height); background: var(--bgl-input-bg);"
-					>
-						<Btn
-							:class="{ activeBtn: tableForm.alignment === 'left' }" flat thin icon="format_align_left"
-							title="Align Left" @click="tableForm.alignment = 'left'"
-						/>
-						<Btn
-							:class="{ activeBtn: tableForm.alignment === 'center' }" flat thin
-							icon="format_align_center" title="Align Center" @click="tableForm.alignment = 'center'"
-						/>
-						<Btn
-							:class="{ activeBtn: tableForm.alignment === 'right' }" flat thin icon="format_align_right"
-							title="Align Right" @click="tableForm.alignment = 'right'"
-						/>
-					</div>
-				</div>
+				<SelectBtn
+					v-model="tableForm.alignment"
+					label="Cell Text Alignment"
+					class="grid-span-1"
+					icon-only
+					:options="[
+						{ value: 'left', label: 'Align Left', icon: 'format_align_left' },
+						{ value: 'center', label: 'Align Center', icon: 'format_align_center' },
+						{ value: 'right', label: 'Align Right', icon: 'format_align_right' },
+					]"
+				/>
 
 				<!-- Text Direction -->
-				<div class="grid-span-1">
-					<label class="label">Text Direction</label>
-					<div
-						class="flex gap-025 mt-025 radius-1 p-025 w-fit"
-						style="height: var(--bgl-input-height); background: var(--bgl-input-bg);"
-					>
-						<Btn
-							:class="{ activeBtn: tableForm.direction === 'ltr' }" flat thin value="LTR"
-							title="Left to Right" @click="tableForm.direction = 'ltr'"
-						/>
-						<Btn
-							:class="{ activeBtn: tableForm.direction === 'rtl' }" flat thin value="RTL"
-							title="Right to Left" @click="tableForm.direction = 'rtl'"
-						/>
-					</div>
-				</div>
+				<SelectBtn
+					v-model="tableForm.direction"
+					label="Text Direction"
+					class="grid-span-1"
+					:options="[
+						{ value: 'ltr', label: 'LTR' },
+						{ value: 'rtl', label: 'RTL' },
+					]"
+				/>
+
 				<!-- Style Section -->
-				<div class="flex gap-05 white-space mt-0 grid-span-4 m_grid-span-2 pt-1 pb-05">
-					<div class="line" />
-					<p class="label grid-span-4 m_grid-span-2">
-						Table Style
-					</p>
-					<div class="line" />
-				</div>
+				<Divider label="Table Style" class="grid-span-4 m_grid-span-2 pt-05 pb-025" />
 				<NumberInput v-model="tableForm.width" label="Width (%)" :min="25" :max="100" />
 				<NumberInput v-model="tableForm.cellPadding" label="Cell Padding (px)" :min="2" :max="20" />
 				<NumberInput v-model="tableForm.borderWidth" label="Border Width (px)" :min="0" :max="5" />
@@ -4127,26 +4265,14 @@ const imgTransform = computed({
 				/>
 
 				<!-- Cell Colors -->
-				<div class="flex gap-05 white-space mt-0 grid-span-4 m_grid-span-2 pt-1 pb-05">
-					<div class="line" />
-					<p class="label grid-span-4 m_grid-span-2">
-						Cell Colors:
-					</p>
-					<div class="line" />
-				</div>
+				<Divider label="Cell Colors" class="grid-span-4 m_grid-span-2 pt-05 pb-025" />
 				<ColorInput
 					v-model="tableForm.cellBgColor" class="grid-span-2 m_grid-span-1"
 					label="Background Color"
 				/>
 				<ColorInput v-model="tableForm.cellTextColor" class="grid-span-2 m_grid-span-1" label="Text Color" />
 				<!-- Alternating Rows -->
-				<div class="flex gap-05 white-space mt-0 grid-span-4 m_grid-span-2 pt-1 pb-05">
-					<div class="line" />
-					<p class="label grid-span-4 m_grid-span-2">
-						Row Styles:
-					</p>
-					<div class="line" />
-				</div>
+				<Divider label="Row Styles" class="grid-span-4 m_grid-span-2 pt-05 pb-025" />
 				<CheckInput v-model="tableForm.showHeaders" label="Show header row" class="grid-span-4 m_grid-span-2" />
 				<!-- Header Colors -->
 				<div
@@ -4181,14 +4307,63 @@ const imgTransform = computed({
 				</div>
 			</div>
 			<!-- Table Preview -->
-			<div class="flex gap-05 white-space mt-0 grid-span-4 m_grid-span-2 pt-1 pb-05">
-				<div class="line" />
-				<p class="label grid-span-4 m_grid-span-2">
-					Preview
-				</p>
-				<div class="line" />
+			<Divider label="Preview" class="grid-span-4 m_grid-span-2 pt-05 pb-025" />
+			<div style="zoom: 0.8;" class="opacity-7 user-select-none pointer-events-none">
+				<table
+					:dir="tableForm.direction"
+					:style="{
+						width: `${tableForm.width}%`,
+						borderCollapse: 'collapse',
+						marginBottom: '1rem',
+						border: `${tableForm.borderWidth}px solid ${tableForm.borderColor}`,
+						tableLayout: tableForm.fixedLayout ? 'fixed' : 'auto',
+					}"
+				>
+					<colgroup>
+						<col
+							v-for="(colWidth, colIdx) in tableForm.columnWidths.slice(0, tableForm.cols)"
+							:key="`col-${colIdx}`"
+							:style="{ width: `${colWidth}%` }"
+						>
+					</colgroup>
+					<thead v-if="tableForm.showHeaders">
+						<tr>
+							<th
+								v-for="colIdx in tableForm.cols"
+								:key="`th-${colIdx}`"
+								:style="{
+									padding: `${tableForm.cellPadding}px`,
+									border: `${tableForm.borderWidth}px solid ${tableForm.borderColor}`,
+									backgroundColor: tableForm.headerBgColor,
+									color: tableForm.headerTextColor,
+									textAlign: tableForm.alignment as any,
+									width: tableForm.fixedLayout ? `${tableForm.columnWidths[colIdx - 1] ?? (100 / tableForm.cols)}%` : undefined,
+								}"
+							>
+								Header {{ colIdx }}
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr v-for="rowIdx in tableForm.rows" :key="`tr-${rowIdx}`">
+							<td
+								v-for="colIdx in tableForm.cols"
+								:key="`td-${rowIdx}-${colIdx}`"
+								:style="{
+									padding: `${tableForm.cellPadding}px`,
+									border: `${tableForm.borderWidth}px solid ${tableForm.borderColor}`,
+									textAlign: tableForm.alignment as any,
+									width: tableForm.fixedLayout ? `${tableForm.columnWidths[colIdx - 1] ?? (100 / tableForm.cols)}%` : undefined,
+									backgroundColor: tableForm.alternateRows && (rowIdx - 1) % 2 === 1 ? tableForm.alternateRowBgColor : tableForm.cellBgColor,
+									color: tableForm.alternateRows && (rowIdx - 1) % 2 === 1 ? tableForm.alternateRowTextColor : tableForm.cellTextColor,
+								}"
+							>
+								Cell {{ rowIdx }},{{ colIdx }}
+							</td>
+						</tr>
+					</tbody>
+				</table>
 			</div>
-			<div style="zoom: 0.8;" class="opacity-7 user-select-none pointer-events-none" v-html="tablePreviewHtml" />
 		</template>
 
 		<template #footer>
@@ -4460,196 +4635,6 @@ background: var(--bgl-primary);
 color: white;
 }
 
-.inline-toolbar-content .separator {
-color: var(--bgl-border-color, #dddddd);
-margin: 0 0.25rem;
-opacity: 0.5;
-}
-
-/* Table Context Menu */
-.table-context-menu {
-pointer-events: auto;
-}
-
-.context-menu-content {
-background: var(--bgl-popup-bg, white);
-color: var(--bgl-popup-text);
-border: 1px solid var(--bgl-border-color, #dddddd);
-border-radius: var(--bgl-btn-border-radius) !important;
-box-shadow: 0 2px 8px var(--bgl-shadow, rgba(0, 0, 0, 0.15));
-padding: 0;
-min-width: 140px;
-max-width: 180px;
-overflow: hidden;
---bgl-input-font-size: 12px;
-}
-
-.menu-header {
-display: flex;
-justify-content: space-between;
-align-items: center;
-padding: 8px 12px;
-background-color: var(--bg-light, #f8f9fa);
-border-bottom: 1px solid var(--bgl-border-color, #dddddd);
-font-size: 12px;
-font-weight: 500;
-color: var(--text-secondary, #666);
-margin-bottom: 5px;
-}
-
-.close-btn {
-background: none;
-border: none;
-font-size: 16px;
-cursor: pointer;
-padding: 0;
-width: 20px;
-height: 20px;
-display: flex;
-align-items: center;
-justify-content: center;
-border-radius: 3px;
-color: var(--text-secondary, #666);
-transition: all 0.2s;
-}
-
-.close-btn:hover {
-background-color: var(--hover-bg, #e9ecef);
-color: var(--text-primary, #333);
-}
-
-.context-menu-content>.btn {
-margin: 2px 4px;
-}
-
-.context-menu-item {
-padding: 8px 16px;
-cursor: pointer;
-transition: background-color 0.2s;
-font-size: 14px;
-}
-
-.context-menu-item:hover {
-background-color: var(--hover-bg, #f5f5f5);
-}
-
-.context-menu-separator {
-height: 1px;
-background-color: var(--bgl-border-color, #dddddd);
-margin: 4px 0;
-}
-
-.context-menu-btn:hover {
-background-color: var(--hover-bg, #f5f5f5) !important;
-}
-
-.context-menu-btn--advanced,
-.context-menu-btn--advanced:hover,
-.context-menu-btn--advanced:focus-visible {
-background: #000 !important;
-border: 1px solid #fff !important;
-color: #fff !important;
-}
-
-.context-menu-btn--advanced:hover,
-.context-menu-btn--advanced:focus-visible {
-background: #1f1f1f !important;
-}
-
-/* Table Cell Selection */
-.table-cell-selected {
-background-color: rgba(0, 123, 255, 0.1) !important;
-border: 2px solid #007bff !important;
-position: relative;
-}
-
-.table-cell-selected::after {
-content: '';
-position: absolute;
-top: -2px;
-left: -2px;
-right: -2px;
-bottom: -2px;
-border: 2px solid #007bff;
-pointer-events: none;
-z-index: 1;
-}
-
-/* Table Modal Button Active States */
-.activeBtn {
-background: var(--bgl-primary) !important;
-color: white !important;
-border-color: var(--bgl-primary) !important;
-}
-
-/* Table Edit Button Protection */
-.table-edit-btn {
-position: absolute !important;
-top: 5px !important;
-right: 5px !important;
-background: rgba(0, 0, 0, 0.7) !important;
-color: white !important;
--webkit-text-fill-color: white !important;
-padding: 0 !important;
-border: 1px solid white !important;
-border-radius: 4px !important;
-font-size: 12px !important;
-cursor: pointer !important;
-opacity: 0 !important;
-visibility: hidden !important;
-z-index: 100 !important;
-pointer-events: auto !important;
-user-select: none !important;
--webkit-user-select: none !important;
--moz-user-select: none !important;
--ms-user-select: none !important;
-outline: none !important;
-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
-white-space: nowrap !important;
-overflow: hidden !important;
-text-overflow: clip !important;
-min-width: unset !important;
-max-width: unset !important;
-width: 28px !important;
-height: 28px !important;
-line-height: 26px !important;
-font-family: inherit !important;
-font-weight: normal !important;
-text-align: center !important;
-vertical-align: baseline !important;
-text-decoration: none !important;
-text-transform: none !important;
-letter-spacing: normal !important;
-word-spacing: normal !important;
-text-indent: 0 !important;
-text-shadow: none !important;
-direction: ltr !important;
-unicode-bidi: normal !important;
-transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease !important;
-}
-
-.table-wrapper:hover > .table-edit-btn,
-.table-wrapper:focus-within > .table-edit-btn,
-.table-edit-btn:hover,
-.table-edit-btn:focus {
-opacity: 1 !important;
-visibility: visible !important;
-}
-
-.table-edit-btn:hover {
-background: rgba(0, 0, 0, 0.9) !important;
-}
-
-/* Prevent any content insertion into table edit buttons */
-.table-edit-btn * {
-display: none !important;
-}
-
-.table-edit-btn::before,
-.table-edit-btn::after {
-content: none !important;
-}
-
 /* Editor Tooltip */
 .editor-tooltip {
 position: fixed;