@bagelink/vue 1.15.515 → 1.15.521

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

@@ -358,10 +358,31 @@ const tableForm = ref({
 	alternateRowBgColor: '#f9f9f9',
 	alternateRowTextColor: '#333333',
 	fixedLayout: true, // תאים ברוחב קבוע
+	columnWidths: [33.34, 33.33, 33.33] as number[],
 	alignment: 'left', // left, center, right
 	direction: 'ltr' // ltr, rtl
 })
 
+const columnWidthsTotal = computed(() => tableForm.value.columnWidths
+	.slice(0, tableForm.value.cols)
+	.reduce((total, width) => total + (Number(width) || 0), 0))
+
+function equalColumnWidths(cols: number): number[] {
+	if (cols <= 0) { return [] }
+	const base = Number((100 / cols).toFixed(2))
+	const widths = Array.from({ length: cols }, () => base)
+	widths[cols - 1] = Number((100 - base * (cols - 1)).toFixed(2))
+	return widths
+}
+
+function syncColumnWidths(cols: number) {
+	const current = tableForm.value.columnWidths
+	if (current.length === cols) { return }
+	tableForm.value.columnWidths = equalColumnWidths(cols)
+}
+
+watch(() => tableForm.value.cols, syncColumnWidths)
+
 // Table context menu state
 const showTableContextMenu = ref(false)
 const contextMenuPosition = ref({ x: 0, y: 0 })
@@ -388,6 +409,7 @@ const tablePreviewHtml = computed(() => {
 	// 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) {
@@ -399,7 +421,7 @@ const tablePreviewHtml = computed(() => {
 				background-color: ${form.headerBgColor};
 				color: ${form.headerTextColor};
 				text-align: ${form.alignment};
-				${form.fixedLayout ? `width: ${100 / form.cols}%;` : ''}
+				${form.fixedLayout ? `width: ${form.columnWidths[j] ?? (100 / form.cols)}%;` : ''}
 			`
 			html += `<th style="${thStyle}">Header ${j + 1}</th>`
 		}
@@ -415,7 +437,7 @@ const tablePreviewHtml = computed(() => {
 				padding: ${form.cellPadding}px;
 				border: ${form.borderWidth}px solid ${form.borderColor};
 				text-align: ${form.alignment};
-				${form.fixedLayout ? `width: ${100 / form.cols}%;` : ''}
+				${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};`}
@@ -434,38 +456,57 @@ editor.state.content = props.modelValue
 
 // Matches Hebrew, Arabic, Syriac, Thaana, Arabic Supplement, Arabic Presentation Forms
 const RTL_REGEX = /[\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\uFB1D-\uFDFD\uFE70-\uFEFC]/
+const LTR_REGEX = /[A-Za-z\u00C0-\u02AF\u0370-\u058F]/
+
+function getTextDirection(text: string, fallback: 'ltr' | 'rtl' = 'ltr'): 'ltr' | 'rtl' {
+	for (const char of text) {
+		if (RTL_REGEX.test(char)) { return 'rtl' }
+		if (LTR_REGEX.test(char)) { return 'ltr' }
+	}
+	return fallback
+}
+
+function getBlockDirection(element: Element, fallback: 'ltr' | 'rtl', preserveExplicit = true): 'ltr' | 'rtl' {
+	const explicitDirection = element.getAttribute('dir')
+	if (preserveExplicit && (explicitDirection === 'rtl' || explicitDirection === 'ltr')) { return explicitDirection }
+	return getTextDirection(element.textContent || '', fallback)
+}
 
 function detectAndSetDirection() {
 	const { doc } = editor.state
 	if (!doc?.body) { return }
 
-	const allText = doc.body.textContent || ''
-	const firstChars = allText.trim().substring(0, 20)
-	const currentDir = doc.body.dir || 'ltr'
-	const newDirection = RTL_REGEX.test(firstChars) ? 'rtl' : 'ltr'
-
-	if (newDirection !== currentDir) {
-		doc.body.dir = newDirection
-		doc.body.style.direction = newDirection
-		doc.querySelectorAll('p').forEach((p) => {
-			if (!p.classList.contains('placeholder')) {
-				p.setAttribute('dir', newDirection)
-			}
-		})
-	}
+	const fallback = getTextDirection(doc.body.textContent || '', (doc.body.dir || 'ltr') as 'ltr' | 'rtl')
+	doc.body.dir = fallback
+	doc.body.style.direction = fallback
+
+	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))
+		}
+	})
 }
 
 function getCurrentDirection() {
 	const { doc } = editor.state
 	if (!doc?.body) { return 'ltr' }
-	const firstChars = (doc.body.textContent || '').trim().substring(0, 20)
-	return RTL_REGEX.test(firstChars) ? 'rtl' : 'ltr'
+	const selection = doc.getSelection()
+	const selectedNode = selection?.rangeCount ? selection.getRangeAt(0).startContainer : null
+	const selectedElement = selectedNode?.nodeType === Node.ELEMENT_NODE
+		? selectedNode as Element
+		: selectedNode?.parentElement
+	const block = selectedElement?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li')
+	const fallback = getTextDirection(doc.body.textContent || '', (doc.body.dir || 'ltr') as 'ltr' | 'rtl')
+	return block ? getBlockDirection(block, fallback) : fallback
 }
 
 // Helper function to update content with history tracking
 function updateContentWithHistory(doc: Document, skipHistory = false) {
 	if (!doc) { return }
 
+	if (doc === editor.state.doc) {
+		detectAndSetDirection()
+	}
 	const newContent = doc.body.innerHTML
 	if (newContent !== editor.state.content) {
 		if (!skipHistory) {
@@ -479,11 +520,6 @@ function updateContentWithHistory(doc: Document, skipHistory = false) {
 			}
 		}
 		editor.state.content = newContent
-
-		// Check direction after content update
-		if (doc === editor.state.doc) {
-			detectAndSetDirection()
-		}
 	}
 }
 
@@ -1372,8 +1408,15 @@ function detectTableAlignment(table: HTMLTableElement): 'left' | 'center' | 'rig
 }
 
 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) { return }
+	if (!doc) {
+		console.warn('[RichText table editor] aborted: editor document is unavailable')
+		return
+	}
 
 	// Get current selection for new tables
 	if (!existingTable) {
@@ -1394,6 +1437,8 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 		// 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
@@ -1408,14 +1453,14 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 				const firstCell = firstRow.cells[0] as HTMLElement
 				const secondCell = secondRow.cells[0] as HTMLElement
 
-				const firstBgColor = getComputedStyle(firstCell).backgroundColor
-				const secondBgColor = getComputedStyle(secondCell).backgroundColor
+				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
-					alternateRowTextColor = getComputedStyle(secondCell).color
+					alternateRowTextColor = getEditorStyle(secondCell)?.color || '#333333'
 				}
 			}
 		}
@@ -1428,14 +1473,27 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 			borderColor: existingTable.style.borderColor || '#dddddd',
 			cellPadding: 8, // default, hard to extract
 			showHeaders: !!thead,
-			headerBgColor: thead ? getComputedStyle(thead.querySelector('th') || thead).backgroundColor || '#f4f4f4' : '#f4f4f4',
-			headerTextColor: thead ? getComputedStyle(thead.querySelector('th') || thead).color || '#333333' : '#333333',
-			cellBgColor: tbody ? getComputedStyle(tbody.querySelector('td') || tbody).backgroundColor || '#ffffff' : '#ffffff',
-			cellTextColor: tbody ? getComputedStyle(tbody.querySelector('td') || tbody).color || '#333333' : '#333333',
+			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',
+			cellTextColor: tbody ? getEditorStyle(tbody.querySelector('td') || tbody)?.color || '#333333' : '#333333',
 			alternateRows: hasAlternatingRows,
 			alternateRowBgColor: alternateRowBg,
 			alternateRowTextColor,
 			fixedLayout: existingTable.style.tableLayout === 'fixed' || true, // ברירת מחדל 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))
+				}
+				return Array.from({ length: cols }, (_, index) =>
+					Number.parseFloat((existingTable.rows[0]?.cells[index] as HTMLElement | undefined)?.style.width || '')
+					|| (100 / cols))
+			})(),
 			alignment: detectTableAlignment(existingTable),
 			direction: existingTable.dir || 'ltr'
 		}
@@ -1457,10 +1515,24 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 			alternateRowBgColor: '#f9f9f9',
 			alternateRowTextColor: '#333333',
 			fixedLayout: true,
+			columnWidths: equalColumnWidths(3),
 			alignment: 'left',
 			direction: 'ltr'
 		}
-	} showTableEditor.value = true
+	}
+	showTableEditor.value = true
+	console.log('[RichText table editor] dialog state opened', {
+		open: showTableEditor.value,
+		hasPendingTable: Boolean(pendingTableData?.existingTable),
+	})
+}
+
+function openExistingTableAdvancedSettings() {
+	const table = contextMenuCell.value?.closest('table') as HTMLTableElement | null
+	if (!table) { return }
+
+	openTableEditor(table)
+	showTableContextMenu.value = false
 }
 
 // Function to submit table changes
@@ -1487,6 +1559,17 @@ function submitTable() {
 			table.style.tableLayout = 'auto'
 		}
 
+		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 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')
@@ -1507,8 +1590,8 @@ function submitTable() {
 
 			// Set fixed width for fixed layout
 			if (tableForm.value.fixedLayout) {
-				const colCount = table.querySelector('tr')?.querySelectorAll('td, th').length || tableForm.value.cols
-				cellEl.style.width = `${100 / colCount}%`
+				const cellIndex = (cellEl as HTMLTableCellElement).cellIndex
+				cellEl.style.width = `${tableForm.value.columnWidths[cellIndex] ?? (100 / tableForm.value.cols)}%`
 			}
 		})
 
@@ -1587,6 +1670,14 @@ function createNewTable(doc: Document) {
 	// Set table direction
 	table.dir = tableForm.value.direction
 
+	const colgroup = doc.createElement('colgroup')
+	tableForm.value.columnWidths.slice(0, tableForm.value.cols).forEach((width) => {
+		const column = doc.createElement('col')
+		column.style.width = `${width}%`
+		colgroup.appendChild(column)
+	})
+	table.appendChild(colgroup)
+
 	// Add header if enabled
 	if (tableForm.value.showHeaders) {
 		const thead = doc.createElement('thead')
@@ -1603,7 +1694,7 @@ function createNewTable(doc: Document) {
 
 			// Set fixed width for fixed layout
 			if (tableForm.value.fixedLayout) {
-				th.style.width = `${100 / tableForm.value.cols}%`
+				th.style.width = `${tableForm.value.columnWidths[j] ?? (100 / tableForm.value.cols)}%`
 			}
 
 			headerRow.appendChild(th)
@@ -1625,7 +1716,7 @@ function createNewTable(doc: Document) {
 
 			// Set fixed width for fixed layout
 			if (tableForm.value.fixedLayout) {
-				cell.style.width = `${100 / tableForm.value.cols}%`
+				cell.style.width = `${tableForm.value.columnWidths[j] ?? (100 / tableForm.value.cols)}%`
 			}
 
 			// Apply background and text colors
@@ -2220,7 +2311,10 @@ function handleTableContextMenu(event: MouseEvent) {
 
 // Expose debug methods if debug mode is enabled
 const debugMethods = computed(() => editor.state.debug)
-const hasRTL = computed(() => RTL_REGEX.test(props.modelValue))
+const hasRTL = computed(() => getTextDirection(
+	props.modelValue.replace(/<[^>]*>/g, ''),
+	'ltr'
+) === 'rtl')
 
 // Computed property to handle height prop
 const editorHeight = computed(() => {
@@ -2243,16 +2337,49 @@ onUnmounted(() => {
 })
 
 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
+		console.log('[RichText table editor] delegated pointerdown received', {
+			pointerType: event.pointerType,
+			hasTable: Boolean(table),
+		})
+		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)
+
 	// 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, index) => {
+		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 = '✎ Edit'
+			editBtn.textContent = '✎'
 			editBtn.title = 'Edit Table'
+			editBtn.setAttribute('aria-label', 'Edit Table')
 
 			// Prevent any content insertion into button
 			editBtn.setAttribute('contenteditable', 'false')
@@ -2261,10 +2388,10 @@ function setupTableEditButtons(doc: Document) {
 			editBtn.style.userSelect = 'none'
 
 			editBtn.addEventListener('click', (e) => {
+				console.log('[RichText table editor] edit icon click received')
 				e.preventDefault()
 				e.stopPropagation()
 				e.stopImmediatePropagation()
-				openTableEditor(table)
 			})
 
 			// Prevent focus and content insertion
@@ -2274,9 +2401,14 @@ function setupTableEditButtons(doc: Document) {
 				editBtn.blur()
 			})
 
-			editBtn.addEventListener('mousedown', (e) => {
+			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()
 			})
 
 			// Create a wrapper div to contain both table and button
@@ -2549,7 +2681,10 @@ function setupAutoWrapping(doc: Document) {
 			}
 
 			// For RTL text, be more careful about splitting
-			const isRTLContent = RTL_REGEX.test(paragraph.textContent || '')
+			const paragraphDirection = getTextDirection(
+				paragraph.textContent || '',
+				(doc.body.dir || 'ltr') as 'ltr' | 'rtl'
+			)
 
 			// Prevent default and handle manually to avoid browser inconsistencies
 			e.preventDefault()
@@ -2565,7 +2700,7 @@ function setupAutoWrapping(doc: Document) {
 
 			// Create new paragraph with proper direction
 			const newParagraph = doc.createElement('p')
-			newParagraph.dir = isRTLContent ? 'rtl' : doc.body.dir || 'ltr'
+			newParagraph.dir = paragraphDirection
 
 			// If we're splitting text, handle it carefully
 			if (range.startContainer.nodeType === Node.TEXT_NODE && textAfterCursor.trim()) {
@@ -2857,10 +2992,15 @@ async function initEditor() {
 				background: transparent;
 				max-width: 860px;
 				margin: 0 auto;
+				unicode-bidi: plaintext;
+			}
+
+			p, h1, h2, h3, h4, h5, h6, blockquote, li {
+				unicode-bidi: plaintext;
 			}
 			
 			/* Ensure all text elements inherit the theme color */
-			p, h1, h2, h3, h4, h5, h6, div, span, li, td, th {
+			p, h1, h2, h3, h4, h5, h6, div, span, li {
 				color: inherit !important;
 			}
 			table {
@@ -2885,37 +3025,52 @@ async function initEditor() {
 				position: absolute;
 				top: -8px;
 				right: -8px;
-				background: #007bff;
-				color: white;
-				border: none;
+				background: #000;
+				color: #fff !important;
+				border: 1px solid #fff;
 				border-radius: 4px;
 				padding: 4px 8px;
 				font-size: 12px;
 				cursor: pointer;
-				opacity: 1;
+				opacity: 0;
+				visibility: hidden;
 				z-index: 99;
 				font-family: sans-serif;
 				pointer-events: auto;
 				user-select: none;
 				display: block;
 				line-height: 1;
+				width: 28px;
+				height: 28px;
+				padding: 0;
+				text-align: center;
+				align-content: center;
 				/* Prevent content insertion */
 				contenteditable: false !important;
 				outline: none !important;
+				transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease;
+			}
+
+			.table-wrapper:hover > .table-edit-btn,
+			.table-wrapper:focus-within > .table-edit-btn,
+			.table-edit-btn:hover,
+			.table-edit-btn:focus {
+				opacity: 1;
+				visibility: visible;
 			}
 
 			.table-edit-btn:hover {
-				background: #0056b3;
+				background: #1f1f1f;
 			}
 			
 			/* Prevent any focus or content insertion */
 			.table-edit-btn:focus {
 				outline: none !important;
-				background: #007bff;
+				background: #000;
 			}
 			
 			.table-edit-btn:active {
-				background: #0056b3;
+				background: #1f1f1f;
 			}
 				.richtext-editor-content blockquote {
 				padding: 8px !important;
@@ -3086,6 +3241,16 @@ async function initEditor() {
 
 		// Set default direction based on content
 		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')
@@ -3303,7 +3468,7 @@ function updateIframeColors() {
 		}
 		
 		/* Ensure all text elements inherit the color and font size */
-		p, h1, h2, h3, h4, h5, h6, div, span, li, td, th {
+		p, h1, h2, h3, h4, h5, h6, div, span, li {
 			color: inherit !important;
 			font-size: inherit !important;
 		}
@@ -3348,9 +3513,6 @@ watch(() => props.modelValue, (newValue, oldValue) => {
 
 // Always emit clean, vanilla HTML — never the editor's internal DOM format
 watch(() => editor.state.content, () => {
-	if (editor.state.doc?.body) {
-		editor.state.doc.body.dir = hasRTL.value ? 'rtl' : 'ltr'
-	}
 	emit('update:modelValue', getCleanHTML(editor.state.doc ?? null))
 })
 
@@ -3536,6 +3698,12 @@ const imgTransform = computed({
 					</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"
@@ -3790,11 +3958,12 @@ const imgTransform = computed({
 		</template>
 	</Dialog>
 
-	<!-- Table Editor Modal -->
-	<Dialog
-		:open="showTableEditor" :title="pendingTableData?.existingTable ? 'Edit Table' : 'Insert Table'"
-		width="l" @update:open="showTableEditor = $event"
-	>
+	<!-- Keep the table editor in the document top layer, including while the rich-text editor is fullscreen. -->
+	<Teleport to="body">
+		<Dialog
+			:open="showTableEditor" :title="pendingTableData?.existingTable ? 'Edit Table' : 'Insert Table'"
+			width="l" @update:open="showTableEditor = $event"
+		>
 		<template #default>
 			<div class="grid grid-wrap-4 m_grid-wrap-2 gap-col-1 table-editor testMe1">
 				<!-- Structure Section -->
@@ -3807,6 +3976,22 @@ const imgTransform = computed({
 				</div>
 				<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">
+					<label class="label">Column Widths (%)</label>
+					<div class="grid grid-wrap-4 m_grid-wrap-2 gap-col-1 mt-025">
+						<NumberInput
+							v-for="(_, index) in tableForm.columnWidths.slice(0, tableForm.cols)"
+							:key="index"
+							v-model="tableForm.columnWidths[index]"
+							:min="1"
+							:max="100"
+							:label="`Column ${index + 1}`"
+						/>
+					</div>
+					<p class="txt12 mt-025 mb-0" :class="{ 'color-red': Math.abs(columnWidthsTotal - 100) > 0.01 }">
+						Total: {{ Number(columnWidthsTotal.toFixed(2)) }}%
+					</p>
+				</div>
 				<!-- Cell Text Alignment -->
 				<div class="grid-span-1">
 					<label class="label">Cell Text Alignment</label>
@@ -3939,7 +4124,8 @@ const imgTransform = computed({
 				@click="submitTable"
 			/>
 		</template>
-	</Dialog>
+		</Dialog>
+	</Teleport>
 </template>
 
 <style>
@@ -4250,6 +4436,19 @@ margin: 4px 0;
 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;
@@ -4283,10 +4482,14 @@ top: 5px !important;
 right: 5px !important;
 background: rgba(0, 0, 0, 0.7) !important;
 color: white !important;
-padding: 4px 8px !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;
@@ -4294,16 +4497,15 @@ user-select: none !important;
 -moz-user-select: none !important;
 -ms-user-select: none !important;
 outline: none !important;
-border: 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: auto !important;
-height: auto !important;
-line-height: normal !important;
+width: 28px !important;
+height: 28px !important;
+line-height: 26px !important;
 font-family: inherit !important;
 font-weight: normal !important;
 text-align: center !important;
@@ -4316,6 +4518,15 @@ 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 {