@bagelink/vue 1.4.149 → 1.4.153

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

@@ -2,53 +2,54 @@
 import type { ToolbarConfig } from './richTextTypes'
 import { CodeEditor, copyText, Btn, Modal, BglVideo, Icon, Card, ColorInput } from '@bagelink/vue'
 import { watch, onUnmounted, onBeforeUnmount, ref, computed, useAttrs } from 'vue'
+import CheckInput from '../CheckInput.vue'
+import NumberInput from '../NumberInput.vue'
+import SelectInput from '../SelectInput.vue'
+import TextInput from '../TextInput.vue'
 import EditorToolbar from './components/EditorToolbar.vue'
 import { useCommands } from './composables/useCommands'
 import { useEditor } from './composables/useEditor'
 import { useEditorKeyboard } from './composables/useEditorKeyboard'
-import TextInput from '../TextInput.vue'
-import CheckInput from '../CheckInput.vue'
-import SelectInput from '../SelectInput.vue'
-import NumberInput from '../NumberInput.vue'
 
 // Disable automatic inheritance of non-prop attributes
 defineOptions({
 	inheritAttrs: false
 })
 
-const attrs = useAttrs()
-
 const props = defineProps<{
-	modelValue: string,
-	toolbarConfig?: ToolbarConfig,
-	debug?: boolean,
-	label?: string,
-	height?: number | string,
-	basic?: boolean,
-	simple?: boolean,
-	placeholder?: string,
+	modelValue: string
+	toolbarConfig?: ToolbarConfig
+	debug?: boolean
+	label?: string
+	height?: number | string
+	basic?: boolean
+	simple?: boolean
+	placeholder?: string
 	// Manual hide options
-	hideToolbar?: boolean,
-	hideInlineToolbar?: boolean,
-	hideImages?: boolean,
-	hideVideos?: boolean,
-	hideEmbed?: boolean,
-	hideTables?: boolean,
-	hideAlignment?: boolean,
-	hideDirections?: boolean,
-	hideH5H6?: boolean,
+	hideToolbar?: boolean
+	hideInlineToolbar?: boolean
+	hideImages?: boolean
+	hideVideos?: boolean
+	hideEmbed?: boolean
+	hideTables?: boolean
+	hideAlignment?: boolean
+	hideDirections?: boolean
+	hideH5H6?: boolean
 	// Simple array-based hide option
-	hide?: string[],
+	hide?: string[]
 	// Control autofocus behavior
 	autofocus?: boolean
 }>()
+
 const emit = defineEmits(['update:modelValue'])
 
+const attrs = useAttrs()
+
 const iframe = ref<HTMLIFrameElement>()
 const editor = useEditor()
 const isInitializing = ref(false)
 const hasInitialized = ref(false)
-
+const commands = useCommands(editor.state, editor.state.debug)
 // Computed properties for UI control
 const shouldShowToolbar = computed(() => {
 	if (props.hideToolbar) return false
@@ -73,7 +74,7 @@ const effectiveHideArray = computed(() => {
 	// If simple mode is enabled, add the simple mode hide items
 	if (props.simple) {
 		const simpleHideItems = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'image', 'video', 'embed', 'ul', 'ol', 'blockquote', 'direction', 'table', 'alignment']
-		simpleHideItems.forEach(item => {
+		simpleHideItems.forEach((item) => {
 			if (!hideArray.includes(item)) {
 				hideArray.push(item)
 			}
@@ -90,7 +91,7 @@ const linkForm = ref({
 	openInNewTab: true
 })
 
-// Tooltip state  
+// Tooltip state
 const showTooltip = ref(false)
 const tooltipData = ref({
 	message: '',
@@ -99,8 +100,8 @@ const tooltipData = ref({
 })
 
 let pendingLinkData: {
-	selection: Selection,
-	range: Range,
+	selection: Selection
+	range: Range
 	existingLink: HTMLAnchorElement | null
 } | null = null
 
@@ -115,8 +116,8 @@ const imageForm = ref({
 	figcaption: false
 })
 let pendingImageData: {
-	selection: Selection,
-	range: Range,
+	selection: Selection
+	range: Range
 	existingImage: HTMLElement | null
 } | null = null
 
@@ -129,8 +130,8 @@ const embedForm = ref({
 	alt: ''
 })
 let pendingEmbedData: {
-	selection: Selection,
-	range: Range,
+	selection: Selection
+	range: Range
 	existingEmbed: HTMLElement | null
 } | null = null
 
@@ -155,8 +156,8 @@ const videoForm = ref({
 	showCaption: false
 })
 let pendingVideoData: {
-	selection: Selection,
-	range: Range,
+	selection: Selection
+	range: Range
 	existingVideo: HTMLElement | null
 } | null = null
 
@@ -188,8 +189,8 @@ const contextMenuPosition = ref({ x: 0, y: 0 })
 const contextMenuCell = ref<HTMLTableCellElement | null>(null)
 
 let pendingTableData: {
-	selection: Selection,
-	range: Range,
+	selection: Selection
+	range: Range
 	existingTable: HTMLTableElement | null
 } | null = null
 
@@ -197,7 +198,7 @@ let pendingTableData: {
 const tablePreviewHtml = computed(() => {
 	const form = tableForm.value
 
-	let tableStyle = `
+	const tableStyle = `
 		width: ${form.width}%;
 		border-collapse: collapse;
 		margin-bottom: 1rem;
@@ -236,9 +237,9 @@ const tablePreviewHtml = computed(() => {
 				border: ${form.borderWidth}px solid ${form.borderColor};
 				text-align: ${form.alignment};
 				${form.fixedLayout ? `width: ${100 / form.cols}%;` : ''}
-				${form.alternateRows && i % 2 === 1 ?
-				`background-color: ${form.alternateRowBgColor}; color: ${form.alternateRowTextColor};` :
-				`background-color: ${form.cellBgColor}; color: ${form.cellTextColor};`}
+				${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>`
 		}
@@ -254,7 +255,7 @@ editor.state.content = props.modelValue
 
 // Function to detect Hebrew text and set direction
 function detectAndSetDirection() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc?.body) {
 		console.log('No doc.body found')
 		return
@@ -285,7 +286,7 @@ function detectAndSetDirection() {
 
 		// Update all paragraphs to match the new direction
 		const paragraphs = doc.querySelectorAll('p')
-		paragraphs.forEach(p => {
+		paragraphs.forEach((p) => {
 			if (!p.classList.contains('placeholder')) {
 				p.setAttribute('dir', newDirection)
 			}
@@ -297,7 +298,7 @@ function detectAndSetDirection() {
 
 // Function to get current direction based on content
 function getCurrentDirection() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc?.body) return 'ltr'
 
 	const allText = doc.body.textContent || ''
@@ -334,7 +335,7 @@ function updateContentWithHistory(doc: Document, skipHistory = false) {
 
 // Debug function to show current content
 function debugShowContent() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (doc) {
 		console.log('=== Current Editor Content ===')
 		console.log('HTML:', doc.body.innerHTML)
@@ -370,7 +371,7 @@ function showInlineToolbarForSelection() {
 		return
 	}
 
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc) return
 
 	const selection = doc.getSelection()
@@ -413,8 +414,8 @@ function showInlineToolbarForSelection() {
 		const rangeClone = range.cloneRange()
 		inlineToolbarSelection.value = selection
 
-			// Store the cloned range for later use
-			; (inlineToolbarSelection.value as any)._storedRange = rangeClone
+		// Store the cloned range for later use
+		; (inlineToolbarSelection.value as any)._storedRange = rangeClone
 
 		showInlineToolbar.value = true
 	}
@@ -430,7 +431,7 @@ function hideInlineToolbar() {
 function runInlineAction(actionName: string) {
 	if (!inlineToolbarSelection.value) return
 
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc) return
 
 	// Get the stored range
@@ -518,7 +519,7 @@ function submitLink() {
 
 	const { selection, range, existingLink } = pendingLinkData
 	const { url, openInNewTab } = linkForm.value
-	const doc = editor.state.doc
+	const { doc } = editor.state
 
 	if (!doc) return
 
@@ -573,7 +574,7 @@ function visitLink() {
 
 	// Add https:// if no protocol is specified
 	if (!url.match(/^https?:\/\//)) {
-		url = 'https://' + url
+		url = `https://${url}`
 	}
 
 	if (linkForm.value.openInNewTab) {
@@ -588,12 +589,12 @@ function isValidUrl(url: string): boolean {
 	if (!url || url.trim() === '') return false
 
 	try {
-		new URL(url)
+		URL.canParse(url)
 		return true
 	} catch {
 		// Try with https:// prefix if it's missing
 		try {
-			new URL('https://' + url)
+			URL.canParse(`https://${url}`)
 			return true
 		} catch {
 			return false
@@ -603,7 +604,7 @@ function isValidUrl(url: string): boolean {
 
 // Function to open image modal
 function openImageModal(existingImage: HTMLElement | null = null) {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc) return
 
 	// Get current selection for new images
@@ -633,7 +634,7 @@ function openImageModal(existingImage: HTMLElement | null = null) {
 			alt: img?.alt || '',
 			width: img?.getAttribute('data-width') || img?.style.width || '',
 			height: img?.getAttribute('data-height') || img?.style.height || '',
-			credit: credit,
+			credit,
 			figcaption: !!figcaption
 		}
 	} else {
@@ -655,7 +656,7 @@ function openImageModal(existingImage: HTMLElement | null = null) {
 function submitImage() {
 	if (!imageForm.value.src || !pendingImageData) return
 
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc) return
 
 	const { existingImage } = pendingImageData
@@ -671,7 +672,7 @@ function submitImage() {
 		if (imageForm.value.width.includes('%') || imageForm.value.width.includes('px') || imageForm.value.width.includes('vw') || imageForm.value.width.includes('rem') || imageForm.value.width.includes('em')) {
 			img.style.width = imageForm.value.width
 		} else {
-			img.style.width = imageForm.value.width + 'px'
+			img.style.width = `${imageForm.value.width}px`
 		}
 	} else {
 		img.style.width = '100%'
@@ -682,7 +683,7 @@ function submitImage() {
 		if (imageForm.value.height.includes('%') || imageForm.value.height.includes('px') || imageForm.value.height.includes('vh') || imageForm.value.height.includes('rem') || imageForm.value.height.includes('em') || imageForm.value.height === 'auto') {
 			img.style.height = imageForm.value.height
 		} else {
-			img.style.height = imageForm.value.height + 'px'
+			img.style.height = `${imageForm.value.height}px`
 		}
 	} else {
 		img.style.height = 'auto'
@@ -700,7 +701,7 @@ function submitImage() {
 
 		// Always add credit if it exists (with lighter styling)
 		if (imageForm.value.credit) {
-			captionHTML += (captionHTML ? ' • ' : '') + `<span class="photo-credit">${imageForm.value.credit}</span>`
+			captionHTML += `${captionHTML ? ' • ' : ''}<span class="photo-credit">${imageForm.value.credit}</span>`
 		}
 
 		figcaption.innerHTML = captionHTML
@@ -774,7 +775,7 @@ function submitImage() {
 
 // Function to open embed modal
 function openEmbedModal(existingEmbed: HTMLElement | null = null) {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc) return
 
 	// Get current selection for new embeds
@@ -836,7 +837,7 @@ function extractEmbedUrl(input: string): string {
 function submitEmbed() {
 	if (!embedForm.value.src || !pendingEmbedData) return
 
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc) return
 
 	const { existingEmbed } = pendingEmbedData
@@ -853,7 +854,7 @@ function submitEmbed() {
 	// Debug: Log the iframe details
 	console.log('Creating embed iframe:', {
 		originalSrc: embedForm.value.src,
-		cleanUrl: cleanUrl,
+		cleanUrl,
 		width: embedForm.value.width,
 		height: embedForm.value.height
 	})
@@ -861,8 +862,8 @@ function submitEmbed() {
 	// Set width and height - always set them
 	iframe.width = embedForm.value.width || '560'
 	iframe.height = embedForm.value.height || '315'
-	iframe.style.width = (embedForm.value.width || '560') + 'px'
-	iframe.style.height = (embedForm.value.height || '315') + 'px'
+	iframe.style.width = `${embedForm.value.width || '560'}px`
+	iframe.style.height = `${embedForm.value.height || '315'}px`
 
 	// Create or update figure
 	let figure: HTMLElement
@@ -913,7 +914,7 @@ function submitEmbed() {
 
 // Function to open video modal
 function openVideoModal(existingVideo: HTMLElement | null = null) {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc) return
 
 	// Get current selection for new videos
@@ -998,7 +999,7 @@ function isValidVideoUrl(url: string): boolean {
 		}
 
 		// Basic URL validation
-		new URL(url)
+		URL.canParse(url)
 		return true
 	} catch {
 		return false
@@ -1007,13 +1008,13 @@ function isValidVideoUrl(url: string): boolean {
 function submitVideo() {
 	if (!videoForm.value.src || !pendingVideoData) return
 
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc) return
 
 	const { existingVideo } = pendingVideoData
 
 	// Calculate aspect ratio
-	let aspectRatio = videoForm.value.aspectRatio
+	let { aspectRatio } = videoForm.value
 	const isCustom = videoForm.value.aspectRatio === 'custom'
 	if (isCustom && videoForm.value.customWidth && videoForm.value.customHeight) {
 		aspectRatio = `${videoForm.value.customWidth}:${videoForm.value.customHeight}`
@@ -1045,7 +1046,7 @@ function submitVideo() {
 	if (videoForm.value.width) {
 		videoContainer.style.width = videoForm.value.width.includes('%') || videoForm.value.width.includes('px')
 			? videoForm.value.width
-			: videoForm.value.width + 'px'
+			: `${videoForm.value.width}px`
 	}
 
 	// Create the video placeholder/thumbnail instead of actual video
@@ -1173,8 +1174,8 @@ function deleteVideo() {
 // 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.marginLeft
-	const marginRight = table.style.marginRight
+	const { marginLeft } = table.style
+	const { marginRight } = table.style
 
 	console.log('Table margins:', { marginLeft, marginRight })
 
@@ -1188,7 +1189,7 @@ function detectTableAlignment(table: HTMLTableElement): 'left' | 'center' | 'rig
 }
 
 function openTableEditor(existingTable: HTMLTableElement | null = null) {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc) return
 
 	// Get current selection for new tables
@@ -1239,8 +1240,8 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 		tableForm.value = {
 			rows: tbody ? tbody.rows.length : 3,
 			cols: tbody && tbody.rows.length > 0 ? tbody.rows[0].cells.length : 3,
-			width: parseInt(existingTable.style.width) || 100,
-			borderWidth: parseInt(existingTable.style.borderWidth) || 1,
+			width: Number.parseInt(existingTable.style.width) || 100,
+			borderWidth: Number.parseInt(existingTable.style.borderWidth) || 1,
 			borderColor: existingTable.style.borderColor || '#dddddd',
 			cellPadding: 8, // default, hard to extract
 			showHeaders: !!thead,
@@ -1250,7 +1251,7 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 			cellTextColor: tbody ? getComputedStyle(tbody.querySelector('td') || tbody).color || '#333333' : '#333333',
 			alternateRows: hasAlternatingRows,
 			alternateRowBgColor: alternateRowBg,
-			alternateRowTextColor: alternateRowTextColor,
+			alternateRowTextColor,
 			fixedLayout: existingTable.style.tableLayout === 'fixed' || true, // ברירת מחדל true
 			alignment: detectTableAlignment(existingTable),
 			direction: existingTable.dir || 'ltr'
@@ -1283,7 +1284,7 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 function submitTable() {
 	if (!pendingTableData) return
 
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc) return
 
 	if (pendingTableData.existingTable) {
@@ -1316,7 +1317,7 @@ function submitTable() {
 
 		// Update border and padding for all cells
 		const allCells = table.querySelectorAll('td, th')
-		allCells.forEach(cell => {
+		allCells.forEach((cell) => {
 			const cellEl = cell as HTMLElement
 			cellEl.style.padding = `${tableForm.value.cellPadding}px`
 			cellEl.style.border = `${tableForm.value.borderWidth}px solid ${tableForm.value.borderColor}`
@@ -1330,7 +1331,7 @@ function submitTable() {
 
 		// Update header styles if headers exist
 		const headers = table.querySelectorAll('th')
-		headers.forEach(th => {
+		headers.forEach((th) => {
 			const thEl = th as HTMLElement
 			thEl.style.backgroundColor = tableForm.value.headerBgColor
 			thEl.style.color = tableForm.value.headerTextColor
@@ -1342,7 +1343,7 @@ function submitTable() {
 			const rows = Array.from(tbody.querySelectorAll('tr'))
 			rows.forEach((row, i) => {
 				const cells = row.querySelectorAll('td')
-				cells.forEach(cell => {
+				cells.forEach((cell) => {
 					const cellEl = cell as HTMLElement
 					if (tableForm.value.alternateRows && i % 2 === 1) {
 						// Alternate rows: use special colors
@@ -1479,7 +1480,7 @@ function createNewTable(doc: Document) {
 		console.log('Trying to add edit button to new table...')
 		if (doc && (doc as any).__addEditButtonsToTables) {
 			console.log('Calling __addEditButtonsToTables...')
-				; (doc as any).__addEditButtonsToTables()
+			; (doc as any).__addEditButtonsToTables()
 		} else {
 			console.log('__addEditButtonsToTables not found, calling setupTableEditButtons...')
 			setupTableEditButtons(doc)
@@ -1520,7 +1521,7 @@ function applyDefaultTableSettings(table: HTMLTableElement) {
 
 		if (headers.length > 0) {
 			const colWidth = `${100 / headers.length}%`
-			headers.forEach(th => {
+			headers.forEach((th) => {
 				if (!(th as HTMLElement).style.width) {
 					(th as HTMLElement).style.width = colWidth
 				}
@@ -1533,7 +1534,7 @@ function applyDefaultTableSettings(table: HTMLTableElement) {
 			if (firstRow) {
 				const colCount = firstRow.querySelectorAll('td').length
 				const colWidth = `${100 / colCount}%`
-				cells.forEach(td => {
+				cells.forEach((td) => {
 					if (!(td as HTMLElement).style.width) {
 						(td as HTMLElement).style.width = colWidth
 					}
@@ -1544,7 +1545,7 @@ function applyDefaultTableSettings(table: HTMLTableElement) {
 
 	// Set cell text alignment
 	const allCells = table.querySelectorAll('td, th')
-	allCells.forEach(cell => {
+	allCells.forEach((cell) => {
 		const cellEl = cell as HTMLElement
 		cellEl.style.textAlign = defaultSettings.alignment
 	})
@@ -1581,17 +1582,17 @@ function deleteEmbed() {
 
 // Expose openLinkModal to editor state
 ; (editor.state as any).openLinkModal = openLinkModal
-	; (editor.state as any).showTooltipMessage = showTooltipMessage
+; (editor.state as any).showTooltipMessage = showTooltipMessage
 
-	// Expose openTableEditor to editor state
-	; (editor.state as any).openTableEditor = openTableEditor
-	; (editor.state as any).openImageModal = openImageModal
-	; (editor.state as any).openEmbedModal = openEmbedModal
-	; (editor.state as any).openVideoModal = openVideoModal
+// Expose openTableEditor to editor state
+; (editor.state as any).openTableEditor = openTableEditor
+; (editor.state as any).openImageModal = openImageModal
+; (editor.state as any).openEmbedModal = openEmbedModal
+; (editor.state as any).openVideoModal = openVideoModal
 
 // Table manipulation functions
 function mergeCellRight() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) return
 
 	const cell = contextMenuCell.value
@@ -1607,12 +1608,12 @@ function mergeCellRight() {
 	if (targetCell && targetIndex >= 0 && targetIndex < row.cells.length) {
 		// Combine content
 		if (targetCell.innerHTML.trim()) {
-			cell.innerHTML += ' ' + targetCell.innerHTML
+			cell.innerHTML += ` ${targetCell.innerHTML}`
 		}
 
 		// Update colspan
-		const currentColspan = parseInt(cell.getAttribute('colspan') || '1')
-		const targetColspan = parseInt(targetCell.getAttribute('colspan') || '1')
+		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
@@ -1623,7 +1624,7 @@ function mergeCellRight() {
 }
 
 function mergeCellDown() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) return
 
 	const cell = contextMenuCell.value
@@ -1642,12 +1643,12 @@ function mergeCellDown() {
 		if (targetCell) {
 			// Combine content
 			if (targetCell.innerHTML.trim()) {
-				cell.innerHTML += '<br>' + targetCell.innerHTML
+				cell.innerHTML += `<br>${targetCell.innerHTML}`
 			}
 
 			// Update rowspan
-			const currentRowspan = parseInt(cell.getAttribute('rowspan') || '1')
-			const targetRowspan = parseInt(targetCell.getAttribute('rowspan') || '1')
+			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
@@ -1659,20 +1660,19 @@ function mergeCellDown() {
 }
 
 function splitCell() {
-	const doc = editor.state.doc
+	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 = parseInt(cell.getAttribute('colspan') || '1')
-	const rowspan = parseInt(cell.getAttribute('rowspan') || '1')
+	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
-		const cellIndex = Array.from(row.cells).indexOf(cell)
 
 		// Add new cells to the right (or left in RTL)
 		for (let i = 1; i < colspan; i++) {
@@ -1721,7 +1721,7 @@ function splitCell() {
 }
 
 function insertRowAbove() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) return
 
 	const cell = contextMenuCell.value
@@ -1730,7 +1730,7 @@ function insertRowAbove() {
 	// Create new row with same number of columns
 	const newRow = doc.createElement('tr')
 	const columnCount = Array.from(row.cells).reduce((total, cell) => {
-		return total + parseInt(cell.getAttribute('colspan') || '1')
+		return total + Number.parseInt(cell.getAttribute('colspan') || '1')
 	}, 0)
 
 	for (let i = 0; i < columnCount; i++) {
@@ -1748,7 +1748,7 @@ function insertRowAbove() {
 }
 
 function insertRowBelow() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) return
 
 	const cell = contextMenuCell.value
@@ -1757,7 +1757,7 @@ function insertRowBelow() {
 	// Create new row with same number of columns
 	const newRow = doc.createElement('tr')
 	const columnCount = Array.from(row.cells).reduce((total, cell) => {
-		return total + parseInt(cell.getAttribute('colspan') || '1')
+		return total + Number.parseInt(cell.getAttribute('colspan') || '1')
 	}, 0)
 
 	for (let i = 0; i < columnCount; i++) {
@@ -1775,7 +1775,7 @@ function insertRowBelow() {
 }
 
 function deleteRow() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) return
 
 	const cell = contextMenuCell.value
@@ -1796,7 +1796,7 @@ function deleteRow() {
 }
 
 function insertColumnLeft() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) return
 
 	const cell = contextMenuCell.value
@@ -1805,7 +1805,7 @@ function insertColumnLeft() {
 
 	// Add new cell to each row at the same index
 	const rows = table.querySelectorAll('tr')
-	rows.forEach(row => {
+	rows.forEach((row) => {
 		const newCell = doc.createElement(row.parentElement?.tagName === 'THEAD' ? 'th' : 'td')
 		newCell.innerHTML = '&nbsp;'
 		newCell.style.padding = '8px'
@@ -1822,7 +1822,7 @@ function insertColumnLeft() {
 }
 
 function insertColumnRight() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) return
 
 	const cell = contextMenuCell.value
@@ -1831,7 +1831,7 @@ function insertColumnRight() {
 
 	// Add new cell to each row after the current index
 	const rows = table.querySelectorAll('tr')
-	rows.forEach(row => {
+	rows.forEach((row) => {
 		const newCell = doc.createElement(row.parentElement?.tagName === 'THEAD' ? 'th' : 'td')
 		newCell.innerHTML = '&nbsp;'
 		newCell.style.padding = '8px'
@@ -1849,7 +1849,7 @@ function insertColumnRight() {
 }
 
 function deleteColumn() {
-	const doc = editor.state.doc
+	const { doc } = editor.state
 	if (!doc || !contextMenuCell.value) return
 
 	const cell = contextMenuCell.value
@@ -1865,7 +1865,7 @@ function deleteColumn() {
 
 	// Remove cell from each row at the same index
 	const rows = table.querySelectorAll('tr')
-	rows.forEach(row => {
+	rows.forEach((row) => {
 		if (row.cells[cellIndex]) {
 			row.cells[cellIndex].remove()
 		}
@@ -1899,8 +1899,8 @@ const canMergeDown = computed(() => {
 const canSplit = computed(() => {
 	if (!contextMenuCell.value) return false
 	const cell = contextMenuCell.value
-	const colspan = parseInt(cell.getAttribute('colspan') || '1')
-	const rowspan = parseInt(cell.getAttribute('rowspan') || '1')
+	const colspan = Number.parseInt(cell.getAttribute('colspan') || '1')
+	const rowspan = Number.parseInt(cell.getAttribute('rowspan') || '1')
 	return colspan > 1 || rowspan > 1
 })
 
@@ -1923,17 +1923,15 @@ function closeTableContextMenu() {
 }
 
 // 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()
-		}
-	}
-}
-
-const commands = useCommands(editor.state, editor.state.debug)
+// function handleDocumentClick(event: MouseEvent) {
+// 	if (showTableContextMenu.value) {
+// 		const target = event.target as HTMLElement
+// 		const contextMenu = target.closest('.table-context-menu')
+// 		if (!contextMenu) {
+// 			closeTableContextMenu()
+// 		}
+// 	}
+// }
 
 // Expose debug methods if debug mode is enabled
 const debugMethods = $computed(() => editor.state.debug)
@@ -2115,14 +2113,15 @@ function setupAutoWrapping(doc: Document) {
 			const walker = doc.createTreeWalker(
 				doc.body,
 				NodeFilter.SHOW_TEXT,
-				node => {
+				(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() &&
-						node.textContent.trim().length > 0) ?
-						NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
+					return (parent === doc.body
+						&& node.textContent?.trim()
+						&& node.textContent.trim().length > 0)
+						? NodeFilter.FILTER_ACCEPT
+						: NodeFilter.FILTER_REJECT
 				}
 			)
 
@@ -2133,17 +2132,16 @@ function setupAutoWrapping(doc: Document) {
 			}
 
 			// Wrap loose text nodes very carefully, preserving existing structure
-			textNodes.forEach(textNode => {
+			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) {
-
+				if (textNode.parentNode === doc.body
+					&& textNode.textContent?.trim()
+					&& textNode.nodeType === Node.TEXT_NODE) {
 					const p = doc.createElement('p')
 					p.dir = doc.body.dir || 'ltr'
 
 					// Clone the text content to avoid any reference issues
-					const textContent = textNode.textContent
+					const { textContent } = textNode
 					p.textContent = textContent
 
 					// Replace the text node with the paragraph
@@ -2184,7 +2182,6 @@ function setupAutoWrapping(doc: Document) {
 					}
 				}
 			}
-
 		} finally {
 			// Always clean up the processing flag
 			delete doc.body.dataset.normalizing
@@ -2209,7 +2206,7 @@ function setupAutoWrapping(doc: Document) {
 			}
 			updateContentWithHistory(doc)
 			return
-		}		// Don't normalize during normal typing - only on paste/drop
+		} // Don't normalize during normal typing - only on paste/drop
 		const inputEvent = e as InputEvent
 		const normalizeInputTypes = ['insertFromPaste', 'insertFromDrop']
 
@@ -2248,7 +2245,7 @@ function setupAutoWrapping(doc: Document) {
 			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)
+			} // 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!
@@ -2260,9 +2257,9 @@ function setupAutoWrapping(doc: Document) {
 			// 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()
+			const prevIsEmpty = prevSibling
+				&& (prevSibling.tagName === 'P')
+				&& !prevSibling.textContent?.trim()
 
 			// If both current and previous paragraphs are empty, don't create another empty paragraph
 			if (currentIsEmpty && prevIsEmpty) {
@@ -2303,7 +2300,7 @@ function setupAutoWrapping(doc: Document) {
 				const textNode = range.startContainer as Text
 
 				// Store the original parent element for formatting preservation
-				const parentElement = textNode.parentElement
+				const { parentElement } = textNode
 
 				// Keep text before cursor in current paragraph
 				textNode.textContent = textBeforeCursor
@@ -2353,10 +2350,10 @@ function setupAutoWrapping(doc: Document) {
 		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()) {
+				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'
@@ -2387,7 +2384,7 @@ function setupAutoWrapping(doc: Document) {
 							// 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 => {
+								listItems.forEach((li) => {
 									if (!li.dir) {
 										li.dir = element.dir
 										console.log('Applied direction to new list item:', li.dir)
@@ -2508,7 +2505,7 @@ function setupAutoWrapping(doc: Document) {
 	})
 }
 
-const initEditor = async () => {
+async function initEditor() {
 	if (isInitializing.value || !iframe.value || hasInitialized.value) {
 		return
 	}
@@ -2517,7 +2514,7 @@ const initEditor = async () => {
 
 	try {
 		// Use basic embedded styles for better compatibility
-		let editorStylesContent = `
+		const editorStylesContent = `
 			body {
 				margin: 0;
 				padding: 8px;
@@ -2585,7 +2582,7 @@ const initEditor = async () => {
     background: #f4f4f4 !important;
 	border-inline-start: 4px solid #ccc !important;
 }
-		`		// Create a complete HTML document with proper doctype and meta tags
+		` // Create a complete HTML document with proper doctype and meta tags
 		const initialContent = props.modelValue || (props.placeholder ? `<p class="placeholder">${props.placeholder}</p>` : '')
 		const htmlContent = `
 			<!DOCTYPE html>
@@ -2639,7 +2636,7 @@ const initEditor = async () => {
 		// Apply direction to existing blockquotes and lists
 		const blockElements = doc.body.querySelectorAll('blockquote, ul, ol')
 		console.log('Found existing block elements:', blockElements.length)
-		blockElements.forEach(element => {
+		blockElements.forEach((element) => {
 			const htmlElement = element as HTMLElement
 			console.log('Processing element:', htmlElement.tagName, 'current dir:', htmlElement.dir)
 			if (!htmlElement.dir) {
@@ -2650,7 +2647,7 @@ const initEditor = async () => {
 			// Also apply direction to list items
 			if (htmlElement.tagName === 'UL' || htmlElement.tagName === 'OL') {
 				const listItems = htmlElement.querySelectorAll('li')
-				listItems.forEach(li => {
+				listItems.forEach((li) => {
 					const listItem = li as HTMLElement
 					if (!listItem.dir) {
 						listItem.dir = htmlElement.dir
@@ -2671,7 +2668,7 @@ const initEditor = async () => {
 			setTimeout(() => {
 				// Clear all formatting by removing styles and replacing with plain text
 				const elements = doc.body.querySelectorAll('*')
-				elements.forEach(el => {
+				elements.forEach((el) => {
 					if (el.tagName !== 'P' && el.tagName !== 'BR') {
 						const textContent = el.textContent || ''
 						if (textContent.trim()) {
@@ -2683,7 +2680,7 @@ const initEditor = async () => {
 						}
 					} else if (el.tagName === 'P') {
 						// Remove all attributes from paragraphs
-						Array.from(el.attributes).forEach(attr => {
+						Array.from(el.attributes).forEach((attr) => {
 							if (attr.name !== 'dir') {
 								el.removeAttribute(attr.name)
 							}
@@ -2696,12 +2693,12 @@ const initEditor = async () => {
 
 		// Add inline toolbar selection listener
 		doc.addEventListener('selectionchange', () => {
-			setTimeout(() => showInlineToolbarForSelection(), 10)
+			setTimeout(() => { showInlineToolbarForSelection() }, 10)
 		})
 
 		// Also listen for mouseup to handle manual selections
 		doc.addEventListener('mouseup', () => {
-			setTimeout(() => showInlineToolbarForSelection(), 10)
+			setTimeout(() => { showInlineToolbarForSelection() }, 10)
 		})
 
 		// Hide inline toolbar when clicking outside or when selection is lost
@@ -2768,7 +2765,7 @@ const initEditor = async () => {
 		// Add click listener to highlight selected table cell
 		doc.addEventListener('click', (e) => {
 			// Remove previous highlights
-			doc.querySelectorAll('.table-cell-selected').forEach(cell => {
+			doc.querySelectorAll('.table-cell-selected').forEach((cell) => {
 				cell.classList.remove('table-cell-selected')
 			})
 
@@ -2884,7 +2881,7 @@ watch(() => tableForm.value.alignment, (newAlignment) => {
 })
 
 // Close context menu when clicking outside
-const handleGlobalClick = () => {
+function handleGlobalClick() {
 	showTableContextMenu.value = false
 }
 
@@ -2908,301 +2905,489 @@ defineExpose({
 </script>
 
 <template>
-<div class="bagel-input" v-bind="attrs">
-	<label v-if="label">{{ label }}</label>
-
-	<div :class="[
-		{
-			'rich-text-editor pt-05 px-05 pb-075': !basic,
-			'rich-text-editor--basic': basic,
-			'fullscreen-mode': editor.state.isFullscreen
-		},
-		'rounded'
-	]">
-		<EditorToolbar v-if="editor.state.hasInit && shouldShowToolbar" :config="effectiveToolbarConfig" :selectedStyles="editor.state.selectedStyles" :hide-images="hideImages"
-			:hide-videos="hideVideos" :hide-embeds="hideEmbed" :hide-tables="hideTables" :hide-alignment="hideAlignment" :hide-directions="hideDirections" :hide-h5-h6="hideH5H6"
-			:hide="effectiveHideArray" @action="commands.execute" />
-		<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView, }">
-			<div class="content-area radius-1" :style="{ height: editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight }">
-				<iframe id="rich-text-iframe" ref="iframe" class="editableContent" 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" />
-			</div>
-			<CodeEditor v-if="editor.state.isSplitView" v-model="editor.state.content" language="html" :height="editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight"
-				@update:modelValue="editor.updateState.content('html')" />
-		</div>
-		<div v-if="debug" class="flex pt-05">
-			<p class="txt12 txt-gray mb-0 p-0">
-				Debug
-			</p>
-			<Btn thin color="gray" icon="visibility" @click="debugShowContent">
-				Show Content
-			</Btn>
-			<Btn thin color="gray" icon="delete" @click="debugMethods?.clearSession">
-				Clear Session
-			</Btn>
-			<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
-				Download Log
-			</Btn>
-			<Btn thin color="gray" icon="content_copy" @click="copyText(debugMethods?.exportDebugWithPrompt() || '')">
-				Copy Log
-			</Btn>
-		</div>
-	</div>
-
-	<!-- Inline Toolbar -->
-	<div v-if="showInlineToolbar" class="inline-toolbar" :style="{
-		position: 'fixed',
-		top: inlineToolbarPosition.top + 'px',
-		left: inlineToolbarPosition.left + 'px',
-		zIndex: 99,
-	}">
-		<div class="inline-toolbar-content">
-			<Btn thin flat icon="format_bold" @click="runInlineAction('bold')" :class="{ active: editor.state.selectedStyles.has('bold') }" />
-			<Btn thin flat icon="format_italic" @click="runInlineAction('italic')" :class="{ active: editor.state.selectedStyles.has('italic') }" />
-			<Btn thin flat icon="format_underlined" @click="runInlineAction('underline')" :class="{ active: editor.state.selectedStyles.has('underline') }" />
-			<span class="separator">|</span>
-			<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 class="bagel-input" v-bind="attrs">
+		<label v-if="label">{{ label }}</label>
+
+		<div
+			class="rounded" :class="[
+				{
+					'rich-text-editor pt-05 px-05 pb-075': !basic,
+					'rich-text-editor--basic': basic,
+					'fullscreen-mode': editor.state.isFullscreen,
+				},
+			]"
+		>
+			<EditorToolbar
+				v-if="editor.state.hasInit && shouldShowToolbar" :config="effectiveToolbarConfig"
+				:selectedStyles="editor.state.selectedStyles" :hide-images="hideImages" :hide-videos="hideVideos"
+				:hide-embeds="hideEmbed" :hide-tables="hideTables" :hide-alignment="hideAlignment"
+				:hide-directions="hideDirections" :hide-h5-h6="hideH5H6" :hide="effectiveHideArray"
+				@action="commands.execute"
+			/>
+			<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
+				<div
+					class="content-area radius-1"
+					:style="{ height: editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight }"
+				>
+					<iframe
+						id="rich-text-iframe" ref="iframe" class="editableContent" 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"
+					/>
+				</div>
+				<CodeEditor
+					v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
+					:height="editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight"
+					@update:modelValue="editor.updateState.content('html')"
+				/>
 			</div>
-			<div class="px-025">
-				<Btn v-if="canMergeRight" full-width align-txt="start" thin flat icon="start" @click="mergeCellRight(); showTableContextMenu = false" class="context-menu-btn">
-					Merge Right
-				</Btn>
-				<Btn v-if="canMergeDown" full-width align-txt="start" thin flat icon="text_select_move_down" @click="mergeCellDown(); showTableContextMenu = false" class="context-menu-btn">
-					Merge Down
-				</Btn>
-				<Btn v-if="canSplit" full-width align-txt="start" thin flat icon="call_split" @click="splitCell(); showTableContextMenu = false" class="context-menu-btn">
-					Split Cell
-				</Btn>
-				<div class="context-menu-separator" v-if="canMergeRight || canMergeDown || canSplit"></div>
-				<Btn full-width align-txt="start" thin flat icon="add_row_above" @click="insertRowAbove(); showTableContextMenu = false" class="context-menu-btn">
-					Insert Row Above
-				</Btn>
-				<Btn full-width align-txt="start" thin flat icon="add_row_below" @click="insertRowBelow(); showTableContextMenu = false" class="context-menu-btn">
-					Insert Row Below
+			<div v-if="debug" class="flex pt-05">
+				<p class="txt12 txt-gray mb-0 p-0">
+					Debug
+				</p>
+				<Btn thin color="gray" icon="visibility" @click="debugShowContent">
+					Show Content
 				</Btn>
-				<Btn full-width align-txt="start" thin flat icon="remove" @click="deleteRow(); showTableContextMenu = false" class="context-menu-btn">
-					Delete Row
+				<Btn thin color="gray" icon="delete" @click="debugMethods?.clearSession">
+					Clear Session
 				</Btn>
-				<div class="context-menu-separator"></div>
-				<Btn full-width align-txt="start" thin flat icon="add_column_left" @click="insertColumnLeft(); showTableContextMenu = false" class="context-menu-btn">
-					Insert Column Left
+				<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
+					Download Log
 				</Btn>
-				<Btn full-width align-txt="start" thin flat icon="add_column_right" @click="insertColumnRight(); showTableContextMenu = false" class="context-menu-btn">
-					Insert Column Right
-				</Btn>
-				<Btn full-width align-txt="start" thin flat icon="remove" @click="deleteColumn(); showTableContextMenu = false" class="context-menu-btn">
-					Delete Column
+				<Btn
+					thin color="gray" icon="content_copy"
+					@click="copyText(debugMethods?.exportDebugWithPrompt() || '')"
+				>
+					Copy Log
 				</Btn>
 			</div>
 		</div>
-	</div>
-</div>
-<!-- Link Modal -->
-<Modal v-model:visible="showLinkModal" title="Add Link" width="400">
-	<div class="flex gap-05 align-items-end">
-		<TextInput label="URL" v-model="linkForm.url" type="url" placeholder="https://example.com" @keydown.enter="submitLink" />
-		<Btn @click="visitLink" icon="open_in_new" class="mb-05 radius-1" flat :disabled="!isValidUrl(linkForm.url)" />
-	</div>
-	<CheckInput label="Open in new tab" v-model="linkForm.openInNewTab" type="checkbox" class="mb-2 mt-05" />
-	<template #footer>
-		<Btn @click="showLinkModal = false" value="Cancel" flat thin />
-		<Btn @click="submitLink" value="Add Link" :disabled="!isValidUrl(linkForm.url)" />
-	</template>
-</Modal>
-
-<!-- Tooltip -->
-<div v-if="showTooltip" class="editor-tooltip" :style="{ left: tooltipData.x + 'px', top: tooltipData.y + 'px' }">
-	{{ tooltipData.message }}
-</div>
-
-<!-- Image Modal -->
-<Modal v-model:visible="showImageModal" :title="pendingImageData?.existingImage ? 'Edit Image' : 'Insert Image'" width="500">
-	<TextInput label="Image URL" v-model="imageForm.src" type="url" placeholder="https://example.com/image.jpg" @keydown.enter="submitImage" />
-	<TextInput label="Alt Text" v-model="imageForm.alt" placeholder="Describe the image" />
-	<div class="flex gap-1">
-		<TextInput label="Width" v-model="imageForm.width" placeholder="100% or 500px or auto" help="Examples: 100%, 500px, auto" />
-		<TextInput label="Height" v-model="imageForm.height" placeholder="auto or 300px" help="Examples: auto, 300px" />
-	</div>
-	<TextInput label="Photo Credit" v-model="imageForm.credit" placeholder="Photographer name (optional)" />
-	<CheckInput label="Show alt text as caption" v-model="imageForm.figcaption" help="Photo credit will always be shown if provided" />
-	<template #footer>
-		<div class="flex gap-05 w-100 ">
-			<Btn @click="showImageModal = false" value="Cancel" flat thin />
-			<Btn v-if="pendingImageData?.existingImage" @click="deleteImage" value="Delete Image" color="red" flat thin icon="delete" />
-			<Btn class="ms-auto" @click="submitImage" :value="pendingImageData?.existingImage ? 'Save Changes' : 'Insert Image'" :disabled="!imageForm.src" />
-		</div>
-	</template>
-</Modal>
-
-<!-- Embed Modal -->
-<Modal v-model:visible="showEmbedModal" :title="pendingEmbedData?.existingEmbed ? 'Edit Embed' : 'Insert Embed'" width="500">
-	<TextInput label="Embed URL or Code" v-model="embedForm.src" type="url" placeholder="https://www.youtube.com/embed/... or paste iframe code" @keydown.enter="submitEmbed" />
-	<div class="flex gap-1">
-		<TextInput label="Width" v-model="embedForm.width" placeholder="560" />
-		<TextInput label="Height" v-model="embedForm.height" placeholder="315" />
-	</div>
-	<TextInput label="Caption" v-model="embedForm.alt" placeholder="Enter caption (optional)" />
-	<template #footer>
-		<div class="flex gap-05 w-100">
-			<Btn @click="showEmbedModal = false" value="Cancel" flat thin />
-			<Btn v-if="pendingEmbedData?.existingEmbed" @click="deleteEmbed" value="Delete Embed" color="red" flat thin icon="delete" />
-			<Btn @click="submitEmbed" :value="pendingEmbedData?.existingEmbed ? 'Save Changes' : 'Insert Embed'" :disabled="!embedForm.src" class="ms-auto" />
+
+		<!-- Inline Toolbar -->
+		<div
+			v-if="showInlineToolbar" class="inline-toolbar" :style="{
+				position: 'fixed',
+				top: `${inlineToolbarPosition.top}px`,
+				left: `${inlineToolbarPosition.left}px`,
+				zIndex: 99,
+			}"
+		>
+			<div class="inline-toolbar-content">
+				<Btn
+					thin flat icon="format_bold" :class="{ active: editor.state.selectedStyles.has('bold') }"
+					@click="runInlineAction('bold')"
+				/>
+				<Btn
+					thin flat icon="format_italic" :class="{ active: editor.state.selectedStyles.has('italic') }"
+					@click="runInlineAction('italic')"
+				/>
+				<Btn
+					thin flat icon="format_underlined"
+					:class="{ active: editor.state.selectedStyles.has('underline') }"
+					@click="runInlineAction('underline')"
+				/>
+				<span class="separator">|</span>
+				<Btn thin flat icon="add_link" @click="runInlineAction('link')" />
+			</div>
 		</div>
-	</template>
-</Modal>
-<!-- Video Modal -->
-<Modal v-model:visible="showVideoModal" title="Insert Video" width="500">
-	<div class="grid gap-0">
-		<TextInput label="Video URL or Embed Code" v-model="videoForm.src" type="url" placeholder="Paste YouTube URL, video file URL, or iframe embed code..." @keydown.enter="submitVideo"
-			:class="{ 'error': videoForm.src && !isValidVideoUrl(videoForm.src) }" />
-
-		<div v-if="videoForm.src && !isValidVideoUrl(videoForm.src)" class="flex gap-025 opacity-5 -mt-05">
-			<Icon name="warning" />
-			<p class="txt12">Please enter a valid video URL or iframe embed code</p>
+		<!-- 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
+						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>
-
-		<TextInput label="Width" v-model="videoForm.width" placeholder="100% or 500px or 50vw" help="Examples: 100%, 500px, 50vw, 300" />
-
-		<SelectInput label="Aspect Ratio" v-model="videoForm.aspectRatio" :options="[
-			{ value: '16:9', label: '16:9 (Standard)' },
-			{ value: '4:3', label: '4:3 (Classic)' },
-			{ value: '9:16', label: '9:16 (Vertical/Shorts)' },
-			{ value: '21:9', label: '21:9 (Cinematic)' },
-			{ value: '1:1', label: '1:1 (Square)' },
-			{ value: 'custom', label: 'Custom' }
-		]" />
-
-		<div v-if="videoForm.aspectRatio === 'custom'" class="grid grid-wrap-2 gap-05">
-			<TextInput label="Width ratio" v-model="videoForm.customWidth" placeholder="16" type="number" />
-			<TextInput label="Height ratio" v-model="videoForm.customHeight" placeholder="9" type="number" />
+	</div>
+	<!-- Link Modal -->
+	<Modal v-model:visible="showLinkModal" title="Add Link" width="400">
+		<div class="flex gap-05 align-items-end">
+			<TextInput
+				v-model="linkForm.url" label="URL" type="url" placeholder="https://example.com"
+				@keydown.enter="submitLink"
+			/>
+			<Btn
+				icon="open_in_new" class="mb-05 radius-1" flat :disabled="!isValidUrl(linkForm.url)"
+				@click="visitLink"
+			/>
 		</div>
+		<CheckInput v-model="linkForm.openInNewTab" label="Open in new tab" type="checkbox" class="mb-2 mt-05" />
+		<template #footer>
+			<Btn value="Cancel" flat thin @click="showLinkModal = false" />
+			<Btn value="Add Link" :disabled="!isValidUrl(linkForm.url)" @click="submitLink" />
+		</template>
+	</Modal>
+
+	<!-- Tooltip -->
+	<div v-if="showTooltip" class="editor-tooltip" :style="{ left: `${tooltipData.x}px`, top: `${tooltipData.y}px` }">
+		{{ tooltipData.message }}
+	</div>
 
-		<div class="grid grid-wrap-2 gap-05 py-1">
-			<CheckInput label="Show controls" v-model="videoForm.controls" />
-			<CheckInput label="Autoplay" v-model="videoForm.autoplay" />
-			<CheckInput label="Mute" v-model="videoForm.mute" />
-			<CheckInput label="Loop" v-model="videoForm.loop" />
-			<CheckInput class="grid-span-2" label="Show caption below video" v-model="videoForm.showCaption" />
-			<TextInput v-if="videoForm.showCaption" label="Caption" class="grid-span-2" v-model="videoForm.caption" placeholder="Describe the video content" />
+	<!-- Image Modal -->
+	<Modal
+		v-model:visible="showImageModal" :title="pendingImageData?.existingImage ? 'Edit Image' : 'Insert Image'"
+		width="500"
+	>
+		<TextInput
+			v-model="imageForm.src" label="Image URL" type="url" placeholder="https://example.com/image.jpg"
+			@keydown.enter="submitImage"
+		/>
+		<TextInput v-model="imageForm.alt" label="Alt Text" placeholder="Describe the image" />
+		<div class="flex gap-1">
+			<TextInput
+				v-model="imageForm.width" label="Width" placeholder="100% or 500px or auto"
+				help="Examples: 100%, 500px, auto"
+			/>
+			<TextInput
+				v-model="imageForm.height" label="Height" placeholder="auto or 300px"
+				help="Examples: auto, 300px"
+			/>
 		</div>
-
-		<!-- Video Preview -->
-		<Card v-if="videoForm.src && isValidVideoUrl(videoForm.src)" frame thin class="bg-gray-20">
-			<p class="label">Preview:</p>
-			<div class="overflow-hidden flex justify-content-center">
-				<BglVideo :src="videoForm.src" class=""
-					:aspect-ratio="videoForm.aspectRatio === 'custom' && videoForm.customWidth && videoForm.customHeight ? `${videoForm.customWidth}:${videoForm.customHeight}` : videoForm.aspectRatio"
-					:autoplay="false" :mute="videoForm.mute" :controls="videoForm.controls" :loop="videoForm.loop" />
+		<TextInput v-model="imageForm.credit" label="Photo Credit" placeholder="Photographer name (optional)" />
+		<CheckInput
+			v-model="imageForm.figcaption" label="Show alt text as caption"
+			help="Photo credit will always be shown if provided"
+		/>
+		<template #footer>
+			<div class="flex gap-05 w-100 ">
+				<Btn value="Cancel" flat thin @click="showImageModal = false" />
+				<Btn
+					v-if="pendingImageData?.existingImage" value="Delete Image" color="red" flat thin icon="delete"
+					@click="deleteImage"
+				/>
+				<Btn
+					class="ms-auto" :value="pendingImageData?.existingImage ? 'Save Changes' : 'Insert Image'"
+					:disabled="!imageForm.src" @click="submitImage"
+				/>
 			</div>
-		</Card>
-	</div>
-	<template #footer>
-		<div class="flex gap-05 w-100 ">
-			<Btn @click="showVideoModal = false" value="Cancel" flat thin />
-			<Btn v-if="pendingVideoData?.existingVideo" @click="deleteVideo" value="Delete Video" color="red" flat thin icon="delete" />
-			<Btn @click="submitVideo" value="Insert Video" class="ms-auto" :disabled="!videoForm.src || !isValidVideoUrl(videoForm.src)" />
+		</template>
+	</Modal>
+
+	<!-- Embed Modal -->
+	<Modal
+		v-model:visible="showEmbedModal" :title="pendingEmbedData?.existingEmbed ? 'Edit Embed' : 'Insert Embed'"
+		width="500"
+	>
+		<TextInput
+			v-model="embedForm.src" label="Embed URL or Code" type="url"
+			placeholder="https://www.youtube.com/embed/... or paste iframe code" @keydown.enter="submitEmbed"
+		/>
+		<div class="flex gap-1">
+			<TextInput v-model="embedForm.width" label="Width" placeholder="560" />
+			<TextInput v-model="embedForm.height" label="Height" placeholder="315" />
 		</div>
-	</template>
-</Modal>
-
-<!-- Table Editor Modal -->
-<Modal v-model:visible="showTableEditor" :title="pendingTableData?.existingTable ? 'Edit Table' : 'Insert Table'" width="700">
-	<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"></div>
-				<p class="label grid-span-4 m_grid-span-2">Table Structure</p>
-				<div class="line"></div>
+		<TextInput v-model="embedForm.alt" label="Caption" placeholder="Enter caption (optional)" />
+		<template #footer>
+			<div class="flex gap-05 w-100">
+				<Btn value="Cancel" flat thin @click="showEmbedModal = false" />
+				<Btn
+					v-if="pendingEmbedData?.existingEmbed" value="Delete Embed" color="red" flat thin icon="delete"
+					@click="deleteEmbed"
+				/>
+				<Btn
+					:value="pendingEmbedData?.existingEmbed ? 'Save Changes' : 'Insert Embed'"
+					:disabled="!embedForm.src" class="ms-auto" @click="submitEmbed"
+				/>
 			</div>
-			<NumberInput v-model="tableForm.rows" :min="1" :max="20" label="Rows" />
-			<NumberInput v-model="tableForm.cols" :min="1" :max="10" label="Columns" />
-			<!-- 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(--input-height); background: var(--input-bg);">
-					<Btn :class="{ 'activeBtn': tableForm.alignment === 'left' }" @click="tableForm.alignment = 'left'" flat thin icon="format_align_left" title="Align Left" />
-					<Btn :class="{ 'activeBtn': tableForm.alignment === 'center' }" @click="tableForm.alignment = 'center'" flat thin icon="format_align_center" title="Align Center" />
-					<Btn :class="{ 'activeBtn': tableForm.alignment === 'right' }" @click="tableForm.alignment = 'right'" flat thin icon="format_align_right" title="Align Right" />
-				</div>
+		</template>
+	</Modal>
+	<!-- Video Modal -->
+	<Modal v-model:visible="showVideoModal" title="Insert Video" width="500">
+		<div class="grid gap-0">
+			<TextInput
+				v-model="videoForm.src" label="Video URL or Embed Code" type="url"
+				placeholder="Paste YouTube URL, video file URL, or iframe embed code..."
+				:class="{ error: videoForm.src && !isValidVideoUrl(videoForm.src) }" @keydown.enter="submitVideo"
+			/>
+
+			<div v-if="videoForm.src && !isValidVideoUrl(videoForm.src)" class="flex gap-025 opacity-5 -mt-05">
+				<Icon name="warning" />
+				<p class="txt12">
+					Please enter a valid video URL or iframe embed code
+				</p>
 			</div>
 
-			<!-- 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(--input-height); background: var(--input-bg);">
-					<Btn :class="{ 'activeBtn': tableForm.direction === 'ltr' }" @click="tableForm.direction = 'ltr'" flat thin value="LTR" title="Left to Right" />
-					<Btn :class="{ 'activeBtn': tableForm.direction === 'rtl' }" @click="tableForm.direction = 'rtl'" flat thin value="RTL" title="Right to Left" />
-				</div>
-			</div>
-			<!-- 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"></div>
-				<p class="label grid-span-4 m_grid-span-2">Table Style</p>
-				<div class="line"></div>
+			<TextInput
+				v-model="videoForm.width" label="Width" placeholder="100% or 500px or 50vw"
+				help="Examples: 100%, 500px, 50vw, 300"
+			/>
+
+			<SelectInput
+				v-model="videoForm.aspectRatio" label="Aspect Ratio" :options="[
+					{ value: '16:9', label: '16:9 (Standard)' },
+					{ value: '4:3', label: '4:3 (Classic)' },
+					{ value: '9:16', label: '9:16 (Vertical/Shorts)' },
+					{ value: '21:9', label: '21:9 (Cinematic)' },
+					{ value: '1:1', label: '1:1 (Square)' },
+					{ value: 'custom', label: 'Custom' },
+				]"
+			/>
+
+			<div v-if="videoForm.aspectRatio === 'custom'" class="grid grid-wrap-2 gap-05">
+				<TextInput v-model="videoForm.customWidth" label="Width ratio" placeholder="16" type="number" />
+				<TextInput v-model="videoForm.customHeight" label="Height ratio" placeholder="9" type="number" />
 			</div>
-			<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" />
-			<ColorInput v-model="tableForm.borderColor" label="Border Color" />
-			<CheckInput v-model="tableForm.fixedLayout" label="Fixed cell width (doesn't change by content)" class="grid-span-4 m_grid-span-2" />
 
-			<!-- 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"></div>
-				<p class="label grid-span-4 m_grid-span-2">Cell Colors:</p>
-				<div class="line"></div>
+			<div class="grid grid-wrap-2 gap-05 py-1">
+				<CheckInput v-model="videoForm.controls" label="Show controls" />
+				<CheckInput v-model="videoForm.autoplay" label="Autoplay" />
+				<CheckInput v-model="videoForm.mute" label="Mute" />
+				<CheckInput v-model="videoForm.loop" label="Loop" />
+				<CheckInput v-model="videoForm.showCaption" class="grid-span-2" label="Show caption below video" />
+				<TextInput
+					v-if="videoForm.showCaption" v-model="videoForm.caption" label="Caption" class="grid-span-2"
+					placeholder="Describe the video content"
+				/>
 			</div>
-			<ColorInput class="grid-span-2 m_grid-span-1" label="Background Color" v-model="tableForm.cellBgColor" />
-			<ColorInput class="grid-span-2 m_grid-span-1" label="Text Color" v-model="tableForm.cellTextColor" />
-			<!-- 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"></div>
-				<p class="label grid-span-4 m_grid-span-2">Row Styles:</p>
-				<div class="line"></div>
+
+			<!-- Video Preview -->
+			<Card v-if="videoForm.src && isValidVideoUrl(videoForm.src)" frame thin class="bg-gray-20">
+				<p class="label">
+					Preview:
+				</p>
+				<div class="overflow-hidden flex justify-content-center">
+					<BglVideo
+						:src="videoForm.src" class=""
+						:aspect-ratio="videoForm.aspectRatio === 'custom' && videoForm.customWidth && videoForm.customHeight ? `${videoForm.customWidth}:${videoForm.customHeight}` : videoForm.aspectRatio"
+						:autoplay="false" :mute="videoForm.mute" :controls="videoForm.controls"
+						:loop="videoForm.loop"
+					/>
+				</div>
+			</Card>
+		</div>
+		<template #footer>
+			<div class="flex gap-05 w-100 ">
+				<Btn value="Cancel" flat thin @click="showVideoModal = false" />
+				<Btn
+					v-if="pendingVideoData?.existingVideo" value="Delete Video" color="red" flat thin icon="delete"
+					@click="deleteVideo"
+				/>
+				<Btn
+					value="Insert Video" class="ms-auto" :disabled="!videoForm.src || !isValidVideoUrl(videoForm.src)"
+					@click="submitVideo"
+				/>
 			</div>
-			<CheckInput v-model="tableForm.showHeaders" label="Show header row" class="grid-span-4 m_grid-span-2" />
-			<!-- Header Colors -->
-			<div v-if="tableForm.showHeaders" class="grid-span-4 m_grid-span-2 grid-wrap-4 m_grid-wrap-2 grid gap-col-1 border-bottom pb-05 mb-05">
-				<ColorInput class="grid-span-2 m_grid-span-1" v-model="tableForm.headerBgColor" label="Header Background Color" />
-				<ColorInput class="grid-span-2 m_grid-span-1" v-model="tableForm.headerTextColor" label="Header Text Color" />
+		</template>
+	</Modal>
+
+	<!-- Table Editor Modal -->
+	<Modal
+		v-model:visible="showTableEditor" :title="pendingTableData?.existingTable ? 'Edit Table' : 'Insert Table'"
+		width="700"
+	>
+		<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>
+				<NumberInput v-model="tableForm.rows" :min="1" :max="20" label="Rows" />
+				<NumberInput v-model="tableForm.cols" :min="1" :max="10" label="Columns" />
+				<!-- 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(--input-height); background: var(--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>
+
+				<!-- 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(--input-height); background: var(--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>
+				<!-- 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>
+				<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" />
+				<ColorInput v-model="tableForm.borderColor" label="Border Color" />
+				<CheckInput
+					v-model="tableForm.fixedLayout" label="Fixed cell width (doesn't change by content)"
+					class="grid-span-4 m_grid-span-2"
+				/>
+
+				<!-- 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>
+				<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>
+				<CheckInput v-model="tableForm.showHeaders" label="Show header row" class="grid-span-4 m_grid-span-2" />
+				<!-- Header Colors -->
+				<div
+					v-if="tableForm.showHeaders"
+					class="grid-span-4 m_grid-span-2 grid-wrap-4 m_grid-wrap-2 grid gap-col-1 border-bottom pb-05 mb-05"
+				>
+					<ColorInput
+						v-model="tableForm.headerBgColor" class="grid-span-2 m_grid-span-1"
+						label="Header Background Color"
+					/>
+					<ColorInput
+						v-model="tableForm.headerTextColor" class="grid-span-2 m_grid-span-1"
+						label="Header Text Color"
+					/>
+				</div>
+				<CheckInput
+					v-model="tableForm.alternateRows" label="Alternating Row Colors"
+					class="grid-span-4 m_grid-span-2"
+				/>
+				<div
+					v-if="tableForm.alternateRows"
+					class="grid grid-wrap-4 m_grid-wrap-2 gap-col-1 grid-span-4 m_grid-span-2  border-bottom pb-05 mb-05"
+				>
+					<ColorInput
+						v-model="tableForm.alternateRowBgColor" class="grid-span-2 m_grid-span-1"
+						label="Alternate Row Background:"
+					/>
+					<ColorInput
+						v-model="tableForm.alternateRowTextColor" class="grid-span-2 m_grid-span-1"
+						label="Alternate Row Text:"
+					/>
+				</div>
 			</div>
-			<CheckInput v-model="tableForm.alternateRows" label="Alternating Row Colors" class="grid-span-4 m_grid-span-2" />
-			<div v-if="tableForm.alternateRows" class="grid grid-wrap-4 m_grid-wrap-2 gap-col-1 grid-span-4 m_grid-span-2  border-bottom pb-05 mb-05">
-				<ColorInput class="grid-span-2 m_grid-span-1" v-model="tableForm.alternateRowBgColor" label="Alternate Row Background:" />
-				<ColorInput class="grid-span-2 m_grid-span-1" v-model="tableForm.alternateRowTextColor" label="Alternate Row Text:" />
+			<!-- 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" />
 			</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"></div>
-			<p class="label grid-span-4 m_grid-span-2">Preview</p>
-			<div class="line"></div>
-		</div>
-		<div v-html="tablePreviewHtml" style="zoom: 0.8;" class="opacity-7 user-select-none pointer-events-none"></div>
-	</template>
-
-	<template #footer>
-		<Btn @click="showTableEditor = false" value="Cancel" flat thin />
-		<Btn v-if="pendingTableData?.existingTable" @click="deleteTable" value="Delete Table" color="red" flat thin icon="delete" />
-		<Btn @click="submitTable" :value="pendingTableData?.existingTable ? 'Save' : 'Insert Table'" class="ms-auto" />
-	</template>
-</Modal>
+			<div style="zoom: 0.8;" class="opacity-7 user-select-none pointer-events-none" v-html="tablePreviewHtml" />
+		</template>
+
+		<template #footer>
+			<Btn value="Cancel" flat thin @click="showTableEditor = false" />
+			<Btn
+				v-if="pendingTableData?.existingTable" value="Delete Table" color="red" flat thin icon="delete"
+				@click="deleteTable"
+			/>
+			<Btn
+				:value="pendingTableData?.existingTable ? 'Save' : 'Insert Table'" class="ms-auto"
+				@click="submitTable"
+			/>
+		</template>
+	</Modal>
 </template>
 
 <style>
@@ -3239,7 +3424,6 @@ defineExpose({
 	position: relative;
 }
 
-
 .content-area table:hover {
 	outline: 2px solid rgba(0, 123, 204, 0.3);
 	outline-offset: 2px;