@bagelink/vue 1.4.141 → 1.4.147

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

@@ -1,13 +1,47 @@
 <script setup lang="ts">
 import type { ToolbarConfig } from './richTextTypes'
-import { CodeEditor, copyText, Btn } from '@bagelink/vue'
-import { watch, onUnmounted, ref } from 'vue'
+import { CodeEditor, copyText, Btn, Modal, BglVideo, Icon, Card, ColorInput } from '@bagelink/vue'
+import { watch, onUnmounted, onBeforeUnmount, ref, computed, useAttrs } from '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 props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig, debug?: boolean, label?: string, height?: number | string }>()
+const attrs = useAttrs()
+
+const props = defineProps<{
+	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,
+	// Simple array-based hide option
+	hide?: string[],
+	// Control autofocus behavior
+	autofocus?: boolean
+}>()
 const emit = defineEmits(['update:modelValue'])
 
 const iframe = ref<HTMLIFrameElement>()
@@ -15,14 +49,1890 @@ const editor = useEditor()
 const isInitializing = ref(false)
 const hasInitialized = ref(false)
 
+// Computed properties for UI control
+const shouldShowToolbar = computed(() => {
+	if (props.hideToolbar) return false
+	if (props.basic) return false
+	return true
+})
+
+const shouldShowInlineToolbar = computed(() => {
+	if (props.hideInlineToolbar) return false
+	return true
+})
+
+// Simple toolbar config - just pass the original config, filtering happens in EditorToolbar
+const effectiveToolbarConfig = computed(() => {
+	return props.toolbarConfig
+})
+
+// Compute effective hide array - combine manual hide array with simple mode
+const effectiveHideArray = computed(() => {
+	const hideArray = [...(props.hide || [])]
+
+	// 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 => {
+			if (!hideArray.includes(item)) {
+				hideArray.push(item)
+			}
+		})
+	}
+
+	return hideArray
+})
+
+// Link modal state
+const showLinkModal = ref(false)
+const linkForm = ref({
+	url: '',
+	openInNewTab: true
+})
+
+// Tooltip state  
+const showTooltip = ref(false)
+const tooltipData = ref({
+	message: '',
+	x: 0,
+	y: 0
+})
+
+let pendingLinkData: {
+	selection: Selection,
+	range: Range,
+	existingLink: HTMLAnchorElement | null
+} | null = null
+
+// Image modal state
+const showImageModal = ref(false)
+const imageForm = ref({
+	src: '',
+	alt: '',
+	width: '',
+	height: '',
+	credit: '',
+	figcaption: false
+})
+let pendingImageData: {
+	selection: Selection,
+	range: Range,
+	existingImage: HTMLElement | null
+} | null = null
+
+// Embed modal state
+const showEmbedModal = ref(false)
+const embedForm = ref({
+	src: '',
+	width: '560',
+	height: '315',
+	alt: ''
+})
+let pendingEmbedData: {
+	selection: Selection,
+	range: Range,
+	existingEmbed: HTMLElement | null
+} | null = null
+
+// Inline toolbar state
+const showInlineToolbar = ref(false)
+const inlineToolbarPosition = ref({ top: 0, left: 0 })
+const inlineToolbarSelection = ref<Selection | null>(null)
+
+// Video modal state
+const showVideoModal = ref(false)
+const videoForm = ref({
+	src: '',
+	width: '',
+	autoplay: false,
+	mute: false,
+	controls: true,
+	loop: false,
+	aspectRatio: '16:9',
+	customWidth: '',
+	customHeight: '',
+	caption: '',
+	showCaption: false
+})
+let pendingVideoData: {
+	selection: Selection,
+	range: Range,
+	existingVideo: HTMLElement | null
+} | null = null
+
+// Table editor state
+const showTableEditor = ref(false)
+const tableForm = ref({
+	rows: 3,
+	cols: 3,
+	width: 100,
+	borderWidth: 1,
+	borderColor: '#dddddd',
+	cellPadding: 8,
+	showHeaders: true,
+	headerBgColor: '#f4f4f4',
+	headerTextColor: '#333333',
+	cellBgColor: '#ffffff',
+	cellTextColor: '#333333',
+	alternateRows: false,
+	alternateRowBgColor: '#f9f9f9',
+	alternateRowTextColor: '#333333',
+	fixedLayout: true, // תאים ברוחב קבוע
+	alignment: 'left', // left, center, right
+	direction: 'ltr' // ltr, rtl
+})
+
+// Table context menu state
+const showTableContextMenu = ref(false)
+const contextMenuPosition = ref({ x: 0, y: 0 })
+const contextMenuCell = ref<HTMLTableCellElement | null>(null)
+
+let pendingTableData: {
+	selection: Selection,
+	range: Range,
+	existingTable: HTMLTableElement | null
+} | null = null
+
+// Computed property for table preview
+const tablePreviewHtml = computed(() => {
+	const form = tableForm.value
+
+	let tableStyle = `
+		width: ${form.width}%;
+		border-collapse: collapse;
+		margin-bottom: 1rem;
+		border: ${form.borderWidth}px solid ${form.borderColor};
+		table-layout: ${form.fixedLayout ? 'fixed' : 'auto'};
+	`
+
+	// For cell text alignment, we'll apply it to individual cells, not the table
+
+	let html = `<table style="${tableStyle}" dir="${form.direction}">`
+
+	// Add header row if enabled
+	if (form.showHeaders) {
+		html += '<thead><tr>'
+		for (let j = 0; j < form.cols; j++) {
+			const thStyle = `
+				padding: ${form.cellPadding}px;
+				border: ${form.borderWidth}px solid ${form.borderColor};
+				background-color: ${form.headerBgColor};
+				color: ${form.headerTextColor};
+				text-align: ${form.alignment};
+				${form.fixedLayout ? `width: ${100 / form.cols}%;` : ''}
+			`
+			html += `<th style="${thStyle}">Header ${j + 1}</th>`
+		}
+		html += '</tr></thead>'
+	}
+
+	// Add body rows
+	html += '<tbody>'
+	for (let i = 0; i < form.rows; i++) {
+		html += '<tr>'
+		for (let j = 0; j < form.cols; j++) {
+			const tdStyle = `
+				padding: ${form.cellPadding}px;
+				border: ${form.borderWidth}px solid ${form.borderColor};
+				text-align: ${form.alignment};
+				${form.fixedLayout ? `width: ${100 / form.cols}%;` : ''}
+				${form.alternateRows && i % 2 === 1 ?
+				`background-color: ${form.alternateRowBgColor}; color: ${form.alternateRowTextColor};` :
+				`background-color: ${form.cellBgColor}; color: ${form.cellTextColor};`}
+			`
+			html += `<td style="${tdStyle}">Cell ${i + 1},${j + 1}</td>`
+		}
+		html += '</tr>'
+	}
+	html += '</tbody></table>'
+
+	return html
+})
+
 // Initialize content from modelValue
 editor.state.content = props.modelValue
 
+// Function to detect Hebrew text and set direction
+function detectAndSetDirection() {
+	const doc = editor.state.doc
+	if (!doc?.body) {
+		console.log('No doc.body found')
+		return
+	}
+
+	// Get all text content from body
+	const allText = doc.body.textContent || ''
+	const firstChars = allText.trim().substring(0, 10) // Check first 10 characters
+
+	console.log('Checking text:', firstChars, 'Length:', firstChars.length)
+
+	// Hebrew regex
+	const hebrewRegex = /[\u0590-\u05FF]/
+	const hasHebrew = hebrewRegex.test(firstChars)
+
+	console.log('Has Hebrew:', hasHebrew)
+
+	// Only change direction if it's different from current
+	const currentDir = doc.body.dir || 'ltr'
+	const shouldBeRtl = hasHebrew
+	const newDirection = shouldBeRtl ? 'rtl' : 'ltr'
+
+	console.log('Current dir:', currentDir, 'Should be RTL:', shouldBeRtl)
+
+	if (newDirection !== currentDir) {
+		doc.body.dir = newDirection
+		doc.body.style.direction = newDirection
+
+		// Update all paragraphs to match the new direction
+		const paragraphs = doc.querySelectorAll('p')
+		paragraphs.forEach(p => {
+			if (!p.classList.contains('placeholder')) {
+				p.setAttribute('dir', newDirection)
+			}
+		})
+
+		console.log(`✅ Switched to ${newDirection.toUpperCase()}`)
+	}
+}
+
+// Function to get current direction based on content
+function getCurrentDirection() {
+	const doc = editor.state.doc
+	if (!doc?.body) return 'ltr'
+
+	const allText = doc.body.textContent || ''
+	const firstChars = allText.trim().substring(0, 10)
+	const hebrewRegex = /[\u0590-\u05FF]/
+
+	return hebrewRegex.test(firstChars) ? 'rtl' : 'ltr'
+}
+
+// Helper function to update content with history tracking
+function updateContentWithHistory(doc: Document, skipHistory = false) {
+	if (!doc) return
+
+	const newContent = doc.body.innerHTML
+	if (newContent !== editor.state.content) {
+		if (!skipHistory) {
+			// Save to undo stack before updating
+			editor.state.undoStack.push(editor.state.content)
+			// Clear redo stack when new content is added
+			editor.state.redoStack = []
+			// Limit undo stack size to prevent memory issues
+			if (editor.state.undoStack.length > 50) {
+				editor.state.undoStack.shift()
+			}
+		}
+		editor.state.content = newContent
+
+		// Check direction after content update
+		if (doc === editor.state.doc) {
+			detectAndSetDirection()
+		}
+	}
+}
+
+// Debug function to show current content
+function debugShowContent() {
+	const doc = editor.state.doc
+	if (doc) {
+		console.log('=== Current Editor Content ===')
+		console.log('HTML:', doc.body.innerHTML)
+		console.log('=== All iframes ===')
+		const iframes = doc.querySelectorAll('iframe')
+		iframes.forEach((iframe, index) => {
+			console.log(`Iframe ${index}:`, {
+				src: iframe.src,
+				width: iframe.width,
+				height: iframe.height,
+				className: iframe.className,
+				style: iframe.style.cssText
+			})
+		})
+		console.log('=== All figures ===')
+		const figures = doc.querySelectorAll('figure')
+		figures.forEach((figure, index) => {
+			console.log(`Figure ${index}:`, {
+				className: figure.className,
+				innerHTML: figure.innerHTML
+			})
+		})
+	}
+}
+
+// Make debug function available globally
+; (window as any).debugRichText = debugShowContent
+
+// Function to show inline toolbar
+function showInlineToolbarForSelection() {
+	// Check if inline toolbar should be shown
+	if (!shouldShowInlineToolbar.value) {
+		return
+	}
+
+	const doc = editor.state.doc
+	if (!doc) return
+
+	const selection = doc.getSelection()
+	if (!selection || selection.rangeCount === 0) {
+		hideInlineToolbar()
+		return
+	}
+
+	const range = selection.getRangeAt(0)
+	if (range.collapsed) {
+		hideInlineToolbar()
+		return
+	}
+
+	// Get the selected text
+	const selectedText = selection.toString().trim()
+	if (!selectedText) {
+		hideInlineToolbar()
+		return
+	}
+
+	// Calculate position relative to viewport
+	const rect = range.getBoundingClientRect()
+	const iframeRect = iframe.value?.getBoundingClientRect()
+
+	if (rect && iframeRect) {
+		// Calculate position with better centering and offset
+		const toolbarWidth = 200 // Approximate width of toolbar
+		const leftPosition = Math.max(10, Math.min(
+			window.innerWidth - toolbarWidth - 10,
+			iframeRect.left + rect.left + (rect.width / 2) - (toolbarWidth / 2)
+		))
+
+		inlineToolbarPosition.value = {
+			top: iframeRect.top + rect.top - 45, // 45px above selection
+			left: leftPosition
+		}
+
+		// Store a clone of the selection to preserve it
+		const rangeClone = range.cloneRange()
+		inlineToolbarSelection.value = selection
+
+			// Store the cloned range for later use
+			; (inlineToolbarSelection.value as any)._storedRange = rangeClone
+
+		showInlineToolbar.value = true
+	}
+}
+
+// Function to hide inline toolbar
+function hideInlineToolbar() {
+	showInlineToolbar.value = false
+	inlineToolbarSelection.value = null
+}
+
+// Function to run inline toolbar action
+function runInlineAction(actionName: string) {
+	if (!inlineToolbarSelection.value) return
+
+	const doc = editor.state.doc
+	if (!doc) return
+
+	// Get the stored range
+	const storedRange = (inlineToolbarSelection.value as any)._storedRange as Range
+	if (!storedRange) return
+
+	// Restore selection using the stored range
+	const selection = doc.getSelection()
+	if (selection) {
+		selection.removeAllRanges()
+		selection.addRange(storedRange)
+	}
+
+	// Run the command
+	commands.execute(actionName)
+
+	// Keep the toolbar visible but update the stored selection
+	setTimeout(() => {
+		const newSelection = doc.getSelection()
+		if (newSelection && newSelection.rangeCount > 0) {
+			const newRange = newSelection.getRangeAt(0)
+			if (!newRange.collapsed) {
+				; (inlineToolbarSelection.value as any)._storedRange = newRange.cloneRange()
+			} else {
+				hideInlineToolbar()
+			}
+		}
+	}, 50)
+}
+
 // Initialize debugger if debug mode is enabled
 if (props.debug) {
 	editor.initDebugger()
 }
 
+// Function to show tooltip
+function showTooltipMessage(message: string, x?: number, y?: number) {
+	// If coordinates not provided, try to get cursor position
+	if (x === undefined || y === undefined) {
+		const selection = editor.state.doc?.getSelection()
+		if (selection && selection.rangeCount > 0) {
+			const range = selection.getRangeAt(0)
+			const rect = range.getBoundingClientRect()
+			// Get iframe offset
+			const iframeRect = iframe.value?.getBoundingClientRect() || { left: 0, top: 0 }
+			tooltipData.value = {
+				message,
+				x: rect.left + iframeRect.left + window.scrollX,
+				y: rect.top + iframeRect.top + window.scrollY - 40 // Show above cursor
+			}
+		} else {
+			// Fallback to center of editor
+			const iframeRect = iframe.value?.getBoundingClientRect()
+			tooltipData.value = {
+				message,
+				x: iframeRect ? iframeRect.left + iframeRect.width / 2 : 200,
+				y: iframeRect ? iframeRect.top + 50 : 100
+			}
+		}
+	} else {
+		tooltipData.value = { message, x, y }
+	}
+
+	showTooltip.value = true
+
+	// Auto hide after 3 seconds
+	setTimeout(() => {
+		showTooltip.value = false
+	}, 3000)
+}
+
+// Function to open link modal
+function openLinkModal(selection: Selection, range: Range, existingLink: HTMLAnchorElement | null) {
+	pendingLinkData = { selection, range, existingLink }
+	linkForm.value = {
+		url: existingLink?.href || '',
+		openInNewTab: existingLink?.target !== '_self'
+	}
+	showLinkModal.value = true
+}
+
+// Function to submit link
+function submitLink() {
+	if (!pendingLinkData || !linkForm.value.url) return
+
+	const { selection, range, existingLink } = pendingLinkData
+	const { url, openInNewTab } = linkForm.value
+	const doc = editor.state.doc
+
+	if (!doc) return
+
+	if (existingLink) {
+		// Update existing link
+		existingLink.href = url
+		existingLink.target = openInNewTab ? '_blank' : '_self'
+		if (openInNewTab) {
+			existingLink.rel = 'noopener noreferrer'
+		} else {
+			existingLink.removeAttribute('rel')
+		}
+	} else {
+		// Create new link
+		try {
+			const anchor = doc.createElement('a')
+			anchor.href = url
+			anchor.target = openInNewTab ? '_blank' : '_self'
+			if (openInNewTab) {
+				anchor.rel = 'noopener noreferrer'
+			}
+
+			try {
+				range.surroundContents(anchor)
+			} catch {
+				// If surroundContents fails, use extractContents method
+				const fragment = range.extractContents()
+				anchor.appendChild(fragment)
+				range.insertNode(anchor)
+			}
+
+			// Position cursor after the link
+			range.selectNodeContents(anchor)
+			range.collapse(false)
+			selection.removeAllRanges()
+			selection.addRange(range)
+		} catch (error) {
+			console.error('Error creating link:', error)
+		}
+	}
+
+	updateContentWithHistory(doc)
+	showLinkModal.value = false
+	pendingLinkData = null
+}
+
+// Function to visit link
+function visitLink() {
+	if (!linkForm.value.url || !isValidUrl(linkForm.value.url)) return
+
+	let url = linkForm.value.url.trim()
+
+	// Add https:// if no protocol is specified
+	if (!url.match(/^https?:\/\//)) {
+		url = 'https://' + url
+	}
+
+	if (linkForm.value.openInNewTab) {
+		window.open(url, '_blank', 'noopener,noreferrer')
+	} else {
+		window.location.href = url
+	}
+}
+
+// Function to validate URL
+function isValidUrl(url: string): boolean {
+	if (!url || url.trim() === '') return false
+
+	try {
+		new URL(url)
+		return true
+	} catch {
+		// Try with https:// prefix if it's missing
+		try {
+			new URL('https://' + url)
+			return true
+		} catch {
+			return false
+		}
+	}
+}
+
+// Function to open image modal
+function openImageModal(existingImage: HTMLElement | null = null) {
+	const doc = editor.state.doc
+	if (!doc) return
+
+	// Get current selection for new images
+	if (!existingImage) {
+		const selection = doc.getSelection()
+		if (!selection || !selection.rangeCount) return
+		const range = selection.getRangeAt(0)
+		pendingImageData = { selection, range, existingImage: null }
+	} else {
+		// For existing images, set pendingImageData with the existing element
+		pendingImageData = {
+			selection: doc.getSelection()!,
+			range: doc.createRange(),
+			existingImage
+		}
+	}
+
+	if (existingImage) {
+		// Populate form with existing image data
+		// All images are now in figures
+		const img = existingImage.querySelector('img')
+		const figcaption = existingImage.querySelector('figcaption')
+		const credit = existingImage.getAttribute('data-credit') || img?.getAttribute('data-credit') || ''
+
+		imageForm.value = {
+			src: img?.src || '',
+			alt: img?.alt || '',
+			width: img?.getAttribute('data-width') || img?.style.width || '',
+			height: img?.getAttribute('data-height') || img?.style.height || '',
+			credit: credit,
+			figcaption: !!figcaption
+		}
+	} else {
+		// Reset form for new image
+		imageForm.value = {
+			src: '',
+			alt: '',
+			width: '',
+			height: '',
+			credit: '',
+			figcaption: false
+		}
+	}
+
+	showImageModal.value = true
+}
+
+// Function to submit image
+function submitImage() {
+	if (!imageForm.value.src || !pendingImageData) return
+
+	const doc = editor.state.doc
+	if (!doc) return
+
+	const { existingImage } = pendingImageData
+
+	// Create image element
+	const img = doc.createElement('img')
+	img.src = imageForm.value.src
+	img.alt = imageForm.value.alt || ''
+
+	// Store original width/height values in data attributes
+	if (imageForm.value.width) {
+		img.setAttribute('data-width', imageForm.value.width)
+		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'
+		}
+	} else {
+		img.style.width = '100%'
+	}
+
+	if (imageForm.value.height) {
+		img.setAttribute('data-height', imageForm.value.height)
+		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'
+		}
+	} else {
+		img.style.height = 'auto'
+	}
+
+	// Helper function to create figcaption with alt text and credit
+	function createFigcaption() {
+		const figcaption = doc!.createElement('figcaption')
+		let captionHTML = ''
+
+		// Add alt text only if figcaption checkbox is checked (with bold styling)
+		if (imageForm.value.figcaption && imageForm.value.alt) {
+			captionHTML = `<strong class="alt-text">${imageForm.value.alt}</strong>`
+		}
+
+		// Always add credit if it exists (with lighter styling)
+		if (imageForm.value.credit) {
+			captionHTML += (captionHTML ? ' • ' : '') + `<span class="photo-credit">${imageForm.value.credit}</span>`
+		}
+
+		figcaption.innerHTML = captionHTML
+		return figcaption
+	}
+
+	// Create or update figure/image - always wrap in figure
+	let elementToUpdate: HTMLElement
+	if (existingImage) {
+		if (existingImage.tagName.toLowerCase() === 'img') {
+			// Converting standalone image to figure (always)
+			const figure = doc.createElement('figure')
+			figure.className = 'image-figure'
+			if (imageForm.value.credit) {
+				figure.setAttribute('data-credit', imageForm.value.credit)
+			}
+			figure.appendChild(img)
+
+			// Add caption if needed (alt with checkbox checked OR credit exists)
+			if ((imageForm.value.figcaption && imageForm.value.alt) || imageForm.value.credit) {
+				figure.appendChild(createFigcaption())
+			}
+
+			existingImage.parentNode?.replaceChild(figure, existingImage)
+			elementToUpdate = figure
+		} else {
+			// Updating an existing figure
+			existingImage.innerHTML = '' // Clear existing content
+			if (imageForm.value.credit) {
+				existingImage.setAttribute('data-credit', imageForm.value.credit)
+			}
+			existingImage.appendChild(img)
+
+			// Add caption if needed (alt with checkbox checked OR credit exists)
+			if ((imageForm.value.figcaption && imageForm.value.alt) || imageForm.value.credit) {
+				existingImage.appendChild(createFigcaption())
+			}
+			elementToUpdate = existingImage
+		}
+	} else {
+		// Creating new image - always wrap in figure
+		const figure = doc.createElement('figure')
+		figure.className = 'image-figure'
+		if (imageForm.value.credit) {
+			figure.setAttribute('data-credit', imageForm.value.credit)
+		}
+		figure.appendChild(img)
+
+		// Add caption if needed (alt with checkbox checked OR credit exists)
+		if ((imageForm.value.figcaption && imageForm.value.alt) || imageForm.value.credit) {
+			figure.appendChild(createFigcaption())
+		}
+		elementToUpdate = figure
+
+		// Insert new element
+		const { selection, range } = pendingImageData
+		range.collapse(false)
+		range.insertNode(elementToUpdate)
+
+		// Move cursor after the inserted element
+		range.setStartAfter(elementToUpdate)
+		range.collapse(true)
+		selection.removeAllRanges()
+		selection.addRange(range)
+	}
+
+	updateContentWithHistory(doc)
+	showImageModal.value = false
+	pendingImageData = null
+}
+
+// Function to open embed modal
+function openEmbedModal(existingEmbed: HTMLElement | null = null) {
+	const doc = editor.state.doc
+	if (!doc) return
+
+	// Get current selection for new embeds
+	if (!existingEmbed) {
+		const selection = doc.getSelection()
+		if (!selection || !selection.rangeCount) return
+		const range = selection.getRangeAt(0)
+		pendingEmbedData = { selection, range, existingEmbed: null }
+	} else {
+		// For existing embeds, set pendingEmbedData with the existing element
+		pendingEmbedData = {
+			selection: doc.getSelection()!,
+			range: doc.createRange(),
+			existingEmbed
+		}
+	}
+
+	if (existingEmbed) {
+		// Populate form with existing embed data
+		const iframe = existingEmbed.querySelector('iframe')
+		const caption = existingEmbed.querySelector('figcaption')
+		embedForm.value = {
+			src: iframe?.src || '',
+			width: iframe?.width || iframe?.style.width?.replace('px', '') || '560',
+			height: iframe?.height || iframe?.style.height?.replace('px', '') || '315',
+			alt: caption?.textContent || ''
+		}
+	} else {
+		// Reset form for new embed
+		embedForm.value = {
+			src: '',
+			width: '560',
+			height: '315',
+			alt: ''
+		}
+	}
+
+	showEmbedModal.value = true
+}
+
+// Function to extract URL from iframe code or return the URL as-is
+function extractEmbedUrl(input: string): string {
+	// If it's already a clean URL, return it
+	if (input.startsWith('http')) {
+		return input
+	}
+
+	// If it's iframe code, extract the src attribute
+	const srcMatch = input.match(/src=["']([^"']+)["']/)
+	if (srcMatch) {
+		return srcMatch[1]
+	}
+
+	// If no match, return the input as-is
+	return input
+}
+
+// Function to submit embed
+function submitEmbed() {
+	if (!embedForm.value.src || !pendingEmbedData) return
+
+	const doc = editor.state.doc
+	if (!doc) return
+
+	const { existingEmbed } = pendingEmbedData
+
+	// Create iframe element
+	const iframe = doc.createElement('iframe')
+	const cleanUrl = extractEmbedUrl(embedForm.value.src)
+	iframe.src = cleanUrl
+	iframe.frameBorder = '0'
+	iframe.setAttribute('allowfullscreen', '')
+	iframe.setAttribute('data-media-type', 'embed')
+	iframe.className = 'embed-iframe'
+
+	// Debug: Log the iframe details
+	console.log('Creating embed iframe:', {
+		originalSrc: embedForm.value.src,
+		cleanUrl: cleanUrl,
+		width: embedForm.value.width,
+		height: embedForm.value.height
+	})
+
+	// 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'
+
+	// Create or update figure
+	let figure: HTMLElement
+	if (existingEmbed) {
+		figure = existingEmbed
+		figure.innerHTML = '' // Clear existing content
+		figure.appendChild(iframe)
+
+		// Add caption if provided
+		if (embedForm.value.alt) {
+			const caption = doc.createElement('figcaption')
+			caption.textContent = embedForm.value.alt
+			figure.appendChild(caption)
+		}
+	} else {
+		// Wrap iframe in figure for consistent styling
+		figure = doc.createElement('figure')
+		figure.className = 'embed-figure'
+		figure.appendChild(iframe)
+
+		// Add caption if provided
+		if (embedForm.value.alt) {
+			const caption = doc.createElement('figcaption')
+			caption.textContent = embedForm.value.alt
+			figure.appendChild(caption)
+		}
+
+		// Insert the figure
+		const { selection, range } = pendingEmbedData
+		range.collapse(false)
+		range.insertNode(figure)
+
+		// Move cursor after the inserted figure
+		range.setStartAfter(figure)
+		range.collapse(true)
+		selection.removeAllRanges()
+		selection.addRange(range)
+	}
+
+	// Debug: Log the final HTML
+	console.log('Embed figure created:', figure.outerHTML)
+	console.log('Editor content updated:', doc.body.innerHTML.includes('embed-figure'))
+
+	updateContentWithHistory(doc)
+	showEmbedModal.value = false
+	pendingEmbedData = null
+}
+
+// Function to open video modal
+function openVideoModal(existingVideo: HTMLElement | null = null) {
+	const doc = editor.state.doc
+	if (!doc) return
+
+	// Get current selection for new videos
+	if (!existingVideo) {
+		const selection = doc.getSelection()
+		if (!selection || !selection.rangeCount) return
+		const range = selection.getRangeAt(0)
+		pendingVideoData = { selection, range, existingVideo: null }
+	} else {
+		// For existing videos, set pendingVideoData with the existing element
+		pendingVideoData = {
+			selection: doc.getSelection()!,
+			range: doc.createRange(),
+			existingVideo
+		}
+	}
+
+	if (existingVideo) {
+		// Populate form with existing video data
+		const container = existingVideo.querySelector('.video-container')
+		const isCustom = container?.getAttribute('data-custom-aspect-ratio') === 'true'
+		videoForm.value = {
+			src: container?.getAttribute('data-video-src') || '',
+			width: container?.getAttribute('data-width') || '',
+			autoplay: container?.getAttribute('data-autoplay') === 'true',
+			mute: container?.getAttribute('data-mute') === 'true',
+			controls: container?.getAttribute('data-controls') === 'true',
+			loop: container?.getAttribute('data-loop') === 'true',
+			aspectRatio: isCustom ? 'custom' : (container?.getAttribute('data-aspect-ratio') || '16:9'),
+			customWidth: container?.getAttribute('data-custom-width') || '',
+			customHeight: container?.getAttribute('data-custom-height') || '',
+			caption: existingVideo.querySelector('figcaption')?.textContent || '',
+			showCaption: !!existingVideo.querySelector('figcaption')
+		}
+	} else {
+		// Reset form for new video
+		videoForm.value = {
+			src: '',
+			width: '',
+			autoplay: false,
+			mute: false,
+			controls: true,
+			loop: false,
+			aspectRatio: '16:9',
+			customWidth: '',
+			customHeight: '',
+			caption: '',
+			showCaption: false
+		}
+	}
+
+	showVideoModal.value = true
+}
+
+// Function to validate video URL
+function isValidVideoUrl(url: string): boolean {
+	if (!url || url.trim() === '') return false
+
+	try {
+		// Check for iframe tags
+		if (url.includes('<iframe') && url.includes('</iframe>')) {
+			return true
+		}
+
+		// Check for supported video formats
+		const videoFormats = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv']
+		const hasVideoFormat = videoFormats.some(format => url.toLowerCase().includes(format))
+
+		// Check for supported platforms
+		const supportedPlatforms = [
+			'youtube.com',
+			'youtu.be',
+			'vimeo.com',
+			'embed',
+			'player.'
+		]
+		const hasSupportedPlatform = supportedPlatforms.some(platform => url.toLowerCase().includes(platform))
+
+		// Try to parse as URL for general validation
+		if (hasVideoFormat || hasSupportedPlatform) {
+			return true
+		}
+
+		// Basic URL validation
+		new URL(url)
+		return true
+	} catch {
+		return false
+	}
+}
+function submitVideo() {
+	if (!videoForm.value.src || !pendingVideoData) return
+
+	const doc = editor.state.doc
+	if (!doc) return
+
+	const { existingVideo } = pendingVideoData
+
+	// Calculate aspect ratio
+	let aspectRatio = videoForm.value.aspectRatio
+	const isCustom = videoForm.value.aspectRatio === 'custom'
+	if (isCustom && videoForm.value.customWidth && videoForm.value.customHeight) {
+		aspectRatio = `${videoForm.value.customWidth}:${videoForm.value.customHeight}`
+	}
+
+	// Auto-adjust aspect ratio for YouTube Shorts
+	const isYoutubeShort = videoForm.value.src.includes('youtube.com/shorts/')
+	if (isYoutubeShort && aspectRatio === '16:9') {
+		aspectRatio = '9:16'
+	}
+
+	// Create video container
+	const videoContainer = doc.createElement('div')
+	videoContainer.className = 'video-container'
+	videoContainer.setAttribute('data-video-src', videoForm.value.src)
+	videoContainer.setAttribute('data-component', 'BglVideo')
+	videoContainer.setAttribute('data-media-type', 'video')
+	videoContainer.setAttribute('data-width', videoForm.value.width)
+	videoContainer.setAttribute('data-autoplay', videoForm.value.autoplay.toString())
+	videoContainer.setAttribute('data-mute', videoForm.value.mute.toString())
+	videoContainer.setAttribute('data-controls', videoForm.value.controls.toString())
+	videoContainer.setAttribute('data-loop', videoForm.value.loop.toString())
+	videoContainer.setAttribute('data-aspect-ratio', aspectRatio)
+	videoContainer.setAttribute('data-custom-aspect-ratio', isCustom.toString())
+	videoContainer.setAttribute('data-custom-width', videoForm.value.customWidth)
+	videoContainer.setAttribute('data-custom-height', videoForm.value.customHeight)
+
+	// Set width
+	if (videoForm.value.width) {
+		videoContainer.style.width = videoForm.value.width.includes('%') || videoForm.value.width.includes('px')
+			? videoForm.value.width
+			: videoForm.value.width + 'px'
+	}
+
+	// Create the video placeholder/thumbnail instead of actual video
+	const videoWrapper = doc.createElement('div')
+	videoWrapper.className = 'bgl_vid'
+
+	// Create video placeholder/thumbnail
+	const placeholder = doc.createElement('div')
+	placeholder.className = 'video-placeholder'
+	placeholder.style.aspectRatio = aspectRatio.replace(':', '/')
+
+	// Detect video type for display
+	const isYoutube = videoForm.value.src.includes('youtube.com') || videoForm.value.src.includes('youtu.be')
+	const isVimeo = videoForm.value.src.includes('vimeo.com')
+
+	// Create play icon
+	const playIcon = doc.createElement('div')
+	playIcon.className = 'video-placeholder-icon'
+
+	// Create text description
+	const description = doc.createElement('div')
+	description.className = 'video-placeholder-description'
+	let platformText = 'video'
+	if (isYoutube) platformText = 'YouTube video'
+	else if (isVimeo) platformText = 'Vimeo video'
+	description.textContent = platformText
+
+	// Try to get YouTube thumbnail if possible
+	if (isYoutube) {
+		let videoId = ''
+		if (videoForm.value.src.includes('youtube.com/watch?v=')) {
+			videoId = videoForm.value.src.split('watch?v=')[1]?.split('&')[0]
+		} else if (videoForm.value.src.includes('youtu.be/')) {
+			videoId = videoForm.value.src.split('youtu.be/')[1]?.split('?')[0]
+		} else if (videoForm.value.src.includes('youtube.com/shorts/')) {
+			videoId = videoForm.value.src.split('shorts/')[1]?.split('?')[0]
+		}
+
+		if (videoId) {
+			// Add thumbnail class and create thumbnail image
+			placeholder.classList.add('has-thumbnail')
+
+			const thumbnail = doc.createElement('img')
+			thumbnail.className = 'video-thumbnail'
+			thumbnail.src = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`
+			placeholder.appendChild(thumbnail)
+
+			// Add overlay with play button
+			const overlay = doc.createElement('div')
+			overlay.className = 'video-overlay'
+
+			const overlayPlayIcon = doc.createElement('div')
+			overlayPlayIcon.className = 'video-overlay-icon'
+
+			overlay.appendChild(overlayPlayIcon)
+			placeholder.appendChild(overlay)
+		} else {
+			placeholder.appendChild(playIcon)
+			placeholder.appendChild(description)
+		}
+	} else {
+		placeholder.appendChild(playIcon)
+		placeholder.appendChild(description)
+	}
+
+	// Add special class for YouTube Shorts
+	if (isYoutube && videoForm.value.src.includes('youtube.com/shorts/')) {
+		videoWrapper.classList.add('vid_short')
+	}
+
+	videoWrapper.appendChild(placeholder)
+
+	videoContainer.appendChild(videoWrapper)
+
+	// Create or update figure
+	let figure: HTMLElement
+	if (existingVideo) {
+		figure = existingVideo
+		figure.innerHTML = '' // Clear existing content
+	} else {
+		figure = doc.createElement('figure')
+		figure.className = 'video-figure'
+	}
+
+	figure.appendChild(videoContainer)
+
+	// Add caption if enabled
+	if (videoForm.value.showCaption && videoForm.value.caption) {
+		const figcaption = doc.createElement('figcaption')
+		figcaption.textContent = videoForm.value.caption
+		figure.appendChild(figcaption)
+	}
+
+	// Insert new video or update existing
+	if (!existingVideo) {
+		const { selection, range } = pendingVideoData
+		range.collapse(false)
+		range.insertNode(figure)
+
+		// Move cursor after the inserted figure
+		range.setStartAfter(figure)
+		range.collapse(true)
+		selection.removeAllRanges()
+		selection.addRange(range)
+	}
+
+	updateContentWithHistory(doc)
+	showVideoModal.value = false
+	pendingVideoData = null
+}
+
+// Function to delete video
+function deleteVideo() {
+	if (!pendingVideoData?.existingVideo) return
+
+	const { existingVideo } = pendingVideoData
+	existingVideo.remove()
+
+	updateContentWithHistory(editor.state.doc!)
+	showVideoModal.value = false
+	pendingVideoData = null
+}
+
+// Function to open table editor
+// Function to detect table alignment from table or wrapper
+function detectTableAlignment(table: HTMLTableElement): 'left' | 'center' | 'right' {
+	// Check table margins to determine alignment
+	const marginLeft = table.style.marginLeft
+	const marginRight = table.style.marginRight
+
+	console.log('Table margins:', { marginLeft, marginRight })
+
+	if (marginLeft === 'auto' && marginRight === 'auto') {
+		return 'center'
+	} else if (marginLeft === 'auto' && marginRight === '0') {
+		return 'right'
+	} else {
+		return 'left'
+	}
+}
+
+function openTableEditor(existingTable: HTMLTableElement | null = null) {
+	const doc = editor.state.doc
+	if (!doc) return
+
+	// Get current selection for new tables
+	if (!existingTable) {
+		const selection = doc.getSelection()
+		if (!selection || !selection.rangeCount) return
+		const range = selection.getRangeAt(0)
+		pendingTableData = { selection, range, existingTable: null }
+	} else {
+		// For existing tables, set pendingTableData with the existing element
+		pendingTableData = {
+			selection: doc.getSelection()!,
+			range: doc.createRange(),
+			existingTable
+		}
+	}
+
+	if (existingTable) {
+		// Populate form with existing table data
+		const tbody = existingTable.querySelector('tbody')
+		const thead = existingTable.querySelector('thead')
+
+		// Detect alternating rows by comparing background colors
+		let hasAlternatingRows = false
+		let alternateRowBg = '#f9f9f9'
+		let alternateRowTextColor = '#333333'
+
+		if (tbody && tbody.rows.length >= 2) {
+			const firstRow = tbody.rows[0]
+			const secondRow = tbody.rows[1]
+
+			if (firstRow.cells.length > 0 && secondRow.cells.length > 0) {
+				const firstCell = firstRow.cells[0] as HTMLElement
+				const secondCell = secondRow.cells[0] as HTMLElement
+
+				const firstBgColor = getComputedStyle(firstCell).backgroundColor
+				const secondBgColor = getComputedStyle(secondCell).backgroundColor
+
+				// Check if colors are different (indicating alternating rows)
+				if (firstBgColor !== secondBgColor) {
+					hasAlternatingRows = true
+					alternateRowBg = secondBgColor
+					alternateRowTextColor = getComputedStyle(secondCell).color
+				}
+			}
+		}
+
+		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,
+			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',
+			alternateRows: hasAlternatingRows,
+			alternateRowBgColor: alternateRowBg,
+			alternateRowTextColor: alternateRowTextColor,
+			fixedLayout: existingTable.style.tableLayout === 'fixed' || true, // ברירת מחדל true
+			alignment: detectTableAlignment(existingTable),
+			direction: existingTable.dir || 'ltr'
+		}
+	} else {
+		// Reset form for new table
+		tableForm.value = {
+			rows: 3,
+			cols: 3,
+			width: 100,
+			borderWidth: 1,
+			borderColor: '#dddddd',
+			cellPadding: 8,
+			showHeaders: true,
+			headerBgColor: '#f4f4f4',
+			headerTextColor: '#333333',
+			cellBgColor: '#ffffff',
+			cellTextColor: '#333333',
+			alternateRows: false,
+			alternateRowBgColor: '#f9f9f9',
+			alternateRowTextColor: '#333333',
+			fixedLayout: true,
+			alignment: 'left',
+			direction: 'ltr'
+		}
+	} showTableEditor.value = true
+}
+
+// Function to submit table changes
+function submitTable() {
+	if (!pendingTableData) return
+
+	const doc = editor.state.doc
+	if (!doc) return
+
+	if (pendingTableData.existingTable) {
+		// Update existing table instead of creating new one
+		const table = pendingTableData.existingTable
+
+		// Update table styles
+		table.style.width = `${tableForm.value.width}%`
+		table.style.borderCollapse = 'collapse'
+		table.style.marginBottom = '1rem'
+		table.style.border = `${tableForm.value.borderWidth}px solid ${tableForm.value.borderColor}`
+
+		// Set table layout
+		if (tableForm.value.fixedLayout) {
+			table.style.tableLayout = 'fixed'
+		} else {
+			table.style.tableLayout = 'auto'
+		}
+
+		// Don't force text alignment for all cells - let them inherit from table direction
+		// console.log('Setting cell text alignment:', tableForm.value.alignment)
+		// const allCells = table.querySelectorAll('td, th')
+		// allCells.forEach(cell => {
+		//	const cellEl = cell as HTMLElement
+		//	cellEl.style.textAlign = tableForm.value.alignment
+		// })
+
+		// Set table direction
+		table.dir = tableForm.value.direction
+
+		// Update border and padding for all cells
+		const allCells = table.querySelectorAll('td, th')
+		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}`
+
+			// 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}%`
+			}
+		})
+
+		// Update header styles if headers exist
+		const headers = table.querySelectorAll('th')
+		headers.forEach(th => {
+			const thEl = th as HTMLElement
+			thEl.style.backgroundColor = tableForm.value.headerBgColor
+			thEl.style.color = tableForm.value.headerTextColor
+		})
+
+		// Update body cell styles
+		const tbody = table.querySelector('tbody')
+		if (tbody) {
+			const rows = Array.from(tbody.querySelectorAll('tr'))
+			rows.forEach((row, i) => {
+				const cells = row.querySelectorAll('td')
+				cells.forEach(cell => {
+					const cellEl = cell as HTMLElement
+					if (tableForm.value.alternateRows && i % 2 === 1) {
+						// Alternate rows: use special colors
+						cellEl.style.backgroundColor = tableForm.value.alternateRowBgColor
+						cellEl.style.color = tableForm.value.alternateRowTextColor
+					} else {
+						// Regular rows: use cell colors
+						cellEl.style.backgroundColor = tableForm.value.cellBgColor
+						cellEl.style.color = tableForm.value.cellTextColor
+					}
+				})
+			})
+		}
+
+		updateContentWithHistory(doc)
+	} else {
+		// Create new table (existing logic)
+		createNewTable(doc)
+	}
+
+	showTableEditor.value = false
+	pendingTableData = null
+}
+
+// Function to create new table (moved from submitTable)
+function createNewTable(doc: Document) {
+	if (!pendingTableData) return
+
+	// Create new table with current settings
+	const table = doc.createElement('table')
+	table.style.width = `${tableForm.value.width}%`
+	table.style.borderCollapse = 'collapse'
+	table.style.marginBottom = '1rem'
+	table.style.border = `${tableForm.value.borderWidth}px solid ${tableForm.value.borderColor}`
+
+	// Set table layout based on fixedLayout setting
+	if (tableForm.value.fixedLayout) {
+		table.style.tableLayout = 'fixed'
+	} else {
+		table.style.tableLayout = 'auto'
+	}
+
+	// Set table alignment (will be applied directly to table since no wrapper yet)
+	// Don't set textAlign on table - let it inherit from document direction
+	// table.style.textAlign = tableForm.value.alignment
+
+	if (tableForm.value.alignment === 'center') {
+		table.style.marginLeft = 'auto'
+		table.style.marginRight = 'auto'
+	} else if (tableForm.value.alignment === 'right') {
+		table.style.marginLeft = 'auto'
+		table.style.marginRight = '0'
+	} else {
+		table.style.marginLeft = '0'
+		table.style.marginRight = 'auto'
+	}
+
+	// Set table direction
+	table.dir = tableForm.value.direction
+
+	// Add header if enabled
+	if (tableForm.value.showHeaders) {
+		const thead = doc.createElement('thead')
+		const headerRow = thead.insertRow()
+		for (let j = 0; j < tableForm.value.cols; j++) {
+			const th = doc.createElement('th')
+			th.innerHTML = `Header ${j + 1}`
+			th.style.padding = `${tableForm.value.cellPadding}px`
+			th.style.border = `${tableForm.value.borderWidth}px solid ${tableForm.value.borderColor}`
+			th.style.backgroundColor = tableForm.value.headerBgColor
+			th.style.color = tableForm.value.headerTextColor
+			// Don't set textAlign - let it inherit from table direction
+			// th.style.textAlign = tableForm.value.alignment
+
+			// Set fixed width for fixed layout
+			if (tableForm.value.fixedLayout) {
+				th.style.width = `${100 / tableForm.value.cols}%`
+			}
+
+			headerRow.appendChild(th)
+		}
+		table.appendChild(thead)
+	}
+
+	// Add body
+	const tbody = doc.createElement('tbody')
+	for (let i = 0; i < tableForm.value.rows; i++) {
+		const row = tbody.insertRow()
+		for (let j = 0; j < tableForm.value.cols; j++) {
+			const cell = row.insertCell()
+			cell.innerHTML = '&nbsp;'
+			cell.style.padding = `${tableForm.value.cellPadding}px`
+			cell.style.border = `${tableForm.value.borderWidth}px solid ${tableForm.value.borderColor}`
+			// Don't set textAlign - let it inherit from table direction
+			// cell.style.textAlign = tableForm.value.alignment
+
+			// Set fixed width for fixed layout
+			if (tableForm.value.fixedLayout) {
+				cell.style.width = `${100 / tableForm.value.cols}%`
+			}
+
+			// Apply background and text colors
+			if (tableForm.value.alternateRows && i % 2 === 1) {
+				// Alternate rows: use special colors
+				cell.style.backgroundColor = tableForm.value.alternateRowBgColor
+				cell.style.color = tableForm.value.alternateRowTextColor
+			} else {
+				// Regular rows: use cell colors
+				cell.style.backgroundColor = tableForm.value.cellBgColor
+				cell.style.color = tableForm.value.cellTextColor
+			}
+		}
+	}
+	table.appendChild(tbody)
+
+	// Insert new table
+	const { range } = pendingTableData
+	range.insertNode(table)
+	range.setStartAfter(table)
+	range.collapse(true)
+	const selection = doc.getSelection()
+	if (selection) {
+		selection.removeAllRanges()
+		selection.addRange(range)
+	}
+
+	updateContentWithHistory(doc)
+
+	// Add edit button to the new table immediately
+	setupTableEditButtons(doc)
+
+	// Add edit button to the new table
+	setTimeout(() => {
+		console.log('Trying to add edit button to new table...')
+		if (doc && (doc as any).__addEditButtonsToTables) {
+			console.log('Calling __addEditButtonsToTables...')
+				; (doc as any).__addEditButtonsToTables()
+		} else {
+			console.log('__addEditButtonsToTables not found, calling setupTableEditButtons...')
+			setupTableEditButtons(doc)
+		}
+	}, 10)
+}
+
+// Function to delete table
+function deleteTable() {
+	if (!pendingTableData?.existingTable) return
+
+	const { existingTable } = pendingTableData
+	existingTable.remove()
+
+	updateContentWithHistory(editor.state.doc!)
+	showTableEditor.value = false
+	pendingTableData = null
+}
+
+// Function to apply default table settings to externally created tables
+function applyDefaultTableSettings(table: HTMLTableElement) {
+	console.log('Applying default settings to table:', table)
+
+	// Apply default styles from tableForm
+	const defaultSettings = {
+		fixedLayout: true,
+		alignment: 'start',
+		direction: 'ltr'
+	}
+
+	// Set table layout
+	if (defaultSettings.fixedLayout) {
+		table.style.tableLayout = 'fixed'
+
+		// Set equal width for all columns if not already set
+		const headers = table.querySelectorAll('th')
+		const cells = table.querySelectorAll('td')
+
+		if (headers.length > 0) {
+			const colWidth = `${100 / headers.length}%`
+			headers.forEach(th => {
+				if (!(th as HTMLElement).style.width) {
+					(th as HTMLElement).style.width = colWidth
+				}
+			})
+		}
+
+		if (cells.length > 0 && headers.length === 0) {
+			// If no headers, use first row to determine column count
+			const firstRow = table.querySelector('tr')
+			if (firstRow) {
+				const colCount = firstRow.querySelectorAll('td').length
+				const colWidth = `${100 / colCount}%`
+				cells.forEach(td => {
+					if (!(td as HTMLElement).style.width) {
+						(td as HTMLElement).style.width = colWidth
+					}
+				})
+			}
+		}
+	}
+
+	// Set cell text alignment
+	const allCells = table.querySelectorAll('td, th')
+	allCells.forEach(cell => {
+		const cellEl = cell as HTMLElement
+		cellEl.style.textAlign = defaultSettings.alignment
+	})
+
+	// Set table direction
+	table.dir = defaultSettings.direction
+
+	console.log('Default settings applied successfully')
+}
+
+// Function to delete image
+function deleteImage() {
+	if (!pendingImageData?.existingImage) return
+
+	const { existingImage } = pendingImageData
+	existingImage.remove()
+
+	updateContentWithHistory(editor.state.doc!)
+	showImageModal.value = false
+	pendingImageData = null
+}
+
+// Function to delete embed
+function deleteEmbed() {
+	if (!pendingEmbedData?.existingEmbed) return
+
+	const { existingEmbed } = pendingEmbedData
+	existingEmbed.remove()
+
+	updateContentWithHistory(editor.state.doc!)
+	showEmbedModal.value = false
+	pendingEmbedData = null
+}
+
+// Expose openLinkModal to editor state
+; (editor.state as any).openLinkModal = openLinkModal
+	; (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
+
+// Table manipulation functions
+function mergeCellRight() {
+	const doc = editor.state.doc
+	if (!doc || !contextMenuCell.value) return
+
+	const cell = contextMenuCell.value
+	const row = cell.parentElement as HTMLTableRowElement
+	const cellIndex = Array.from(row.cells).indexOf(cell)
+	const table = cell.closest('table') as HTMLTableElement
+	const isRTL = table?.dir === 'rtl'
+
+	// In RTL, "right" means the previous cell, in LTR it means the next cell
+	const targetIndex = isRTL ? cellIndex - 1 : cellIndex + 1
+	const targetCell = row.cells[targetIndex]
+
+	if (targetCell && targetIndex >= 0 && targetIndex < row.cells.length) {
+		// Combine content
+		if (targetCell.innerHTML.trim()) {
+			cell.innerHTML += ' ' + targetCell.innerHTML
+		}
+
+		// Update colspan
+		const currentColspan = parseInt(cell.getAttribute('colspan') || '1')
+		const targetColspan = parseInt(targetCell.getAttribute('colspan') || '1')
+		cell.setAttribute('colspan', (currentColspan + targetColspan).toString())
+
+		// Remove the target cell
+		targetCell.remove()
+
+		updateContentWithHistory(doc)
+	}
+}
+
+function mergeCellDown() {
+	const doc = editor.state.doc
+	if (!doc || !contextMenuCell.value) return
+
+	const cell = contextMenuCell.value
+	const table = cell.closest('table') as HTMLTableElement
+	const row = cell.parentElement as HTMLTableRowElement
+	const cellIndex = Array.from(row.cells).indexOf(cell)
+
+	// Find the row below
+	const tbody = table.querySelector('tbody') || table
+	const rows = Array.from(tbody.querySelectorAll('tr'))
+	const currentRowIndex = rows.indexOf(row)
+	const nextRow = rows[currentRowIndex + 1]
+
+	if (nextRow) {
+		const targetCell = nextRow.cells[cellIndex]
+		if (targetCell) {
+			// Combine content
+			if (targetCell.innerHTML.trim()) {
+				cell.innerHTML += '<br>' + targetCell.innerHTML
+			}
+
+			// Update rowspan
+			const currentRowspan = parseInt(cell.getAttribute('rowspan') || '1')
+			const targetRowspan = parseInt(targetCell.getAttribute('rowspan') || '1')
+			cell.setAttribute('rowspan', (currentRowspan + targetRowspan).toString())
+
+			// Remove the target cell
+			targetCell.remove()
+
+			updateContentWithHistory(doc)
+		}
+	}
+}
+
+function splitCell() {
+	const doc = editor.state.doc
+	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')
+
+	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++) {
+			const newCell = doc.createElement(cell.tagName.toLowerCase() as 'td' | 'th')
+			newCell.innerHTML = '&nbsp;'
+			newCell.style.cssText = cell.style.cssText
+
+			if (isRTL) {
+				row.insertBefore(newCell, cell)
+			} else {
+				if (cell.nextSibling) {
+					row.insertBefore(newCell, cell.nextSibling)
+				} else {
+					row.appendChild(newCell)
+				}
+			}
+		}
+	} else if (rowspan > 1) {
+		// Split vertically
+		cell.setAttribute('rowspan', '1')
+		const row = cell.parentElement as HTMLTableRowElement
+		const cellIndex = Array.from(row.cells).indexOf(cell)
+		const tbody = table.querySelector('tbody') || table
+		const rows = Array.from(tbody.querySelectorAll('tr'))
+		const currentRowIndex = rows.indexOf(row)
+
+		// Add new cells to rows below
+		for (let i = 1; i < rowspan; i++) {
+			const targetRow = rows[currentRowIndex + i]
+			if (targetRow) {
+				const newCell = doc.createElement(cell.tagName.toLowerCase() as 'td' | 'th')
+				newCell.innerHTML = '&nbsp;'
+				newCell.style.cssText = cell.style.cssText
+
+				// Insert at the correct position
+				if (cellIndex < targetRow.cells.length) {
+					targetRow.insertBefore(newCell, targetRow.cells[cellIndex])
+				} else {
+					targetRow.appendChild(newCell)
+				}
+			}
+		}
+	}
+
+	updateContentWithHistory(doc)
+}
+
+function insertRowAbove() {
+	const doc = editor.state.doc
+	if (!doc || !contextMenuCell.value) return
+
+	const cell = contextMenuCell.value
+	const row = cell.parentElement as HTMLTableRowElement
+
+	// Create new row with same number of columns
+	const newRow = doc.createElement('tr')
+	const columnCount = Array.from(row.cells).reduce((total, cell) => {
+		return total + parseInt(cell.getAttribute('colspan') || '1')
+	}, 0)
+
+	for (let i = 0; i < columnCount; i++) {
+		const newCell = doc.createElement('td')
+		newCell.innerHTML = '&nbsp;'
+		newCell.style.padding = '8px'
+		newCell.style.border = '1px solid #ddd'
+		newRow.appendChild(newCell)
+	}
+
+	// Insert before current row
+	row.insertAdjacentElement('beforebegin', newRow)
+
+	updateContentWithHistory(doc)
+}
+
+function insertRowBelow() {
+	const doc = editor.state.doc
+	if (!doc || !contextMenuCell.value) return
+
+	const cell = contextMenuCell.value
+	const row = cell.parentElement as HTMLTableRowElement
+
+	// Create new row with same number of columns
+	const newRow = doc.createElement('tr')
+	const columnCount = Array.from(row.cells).reduce((total, cell) => {
+		return total + parseInt(cell.getAttribute('colspan') || '1')
+	}, 0)
+
+	for (let i = 0; i < columnCount; i++) {
+		const newCell = doc.createElement('td')
+		newCell.innerHTML = '&nbsp;'
+		newCell.style.padding = '8px'
+		newCell.style.border = '1px solid #ddd'
+		newRow.appendChild(newCell)
+	}
+
+	// Insert after current row
+	row.insertAdjacentElement('afterend', newRow)
+
+	updateContentWithHistory(doc)
+}
+
+function deleteRow() {
+	const doc = editor.state.doc
+	if (!doc || !contextMenuCell.value) return
+
+	const cell = contextMenuCell.value
+	const row = cell.parentElement as HTMLTableRowElement
+	const table = cell.closest('table') as HTMLTableElement
+
+	// Don't delete if it's the only row
+	const tbody = table.querySelector('tbody') || table
+	const rows = tbody.querySelectorAll('tr')
+
+	if (rows.length <= 1) {
+		alert('Cannot delete the last row')
+		return
+	}
+
+	row.remove()
+	updateContentWithHistory(doc)
+}
+
+function insertColumnLeft() {
+	const doc = editor.state.doc
+	if (!doc || !contextMenuCell.value) return
+
+	const cell = contextMenuCell.value
+	const table = cell.closest('table') as HTMLTableElement
+	const cellIndex = Array.from((cell.parentElement as HTMLTableRowElement).cells).indexOf(cell)
+
+	// Add new cell to each row at the same index
+	const rows = table.querySelectorAll('tr')
+	rows.forEach(row => {
+		const newCell = doc.createElement(row.parentElement?.tagName === 'THEAD' ? 'th' : 'td')
+		newCell.innerHTML = '&nbsp;'
+		newCell.style.padding = '8px'
+		newCell.style.border = '1px solid #ddd'
+
+		if (cellIndex < row.cells.length) {
+			row.insertBefore(newCell, row.cells[cellIndex])
+		} else {
+			row.appendChild(newCell)
+		}
+	})
+
+	updateContentWithHistory(doc)
+}
+
+function insertColumnRight() {
+	const doc = editor.state.doc
+	if (!doc || !contextMenuCell.value) return
+
+	const cell = contextMenuCell.value
+	const table = cell.closest('table') as HTMLTableElement
+	const cellIndex = Array.from((cell.parentElement as HTMLTableRowElement).cells).indexOf(cell)
+
+	// Add new cell to each row after the current index
+	const rows = table.querySelectorAll('tr')
+	rows.forEach(row => {
+		const newCell = doc.createElement(row.parentElement?.tagName === 'THEAD' ? 'th' : 'td')
+		newCell.innerHTML = '&nbsp;'
+		newCell.style.padding = '8px'
+		newCell.style.border = '1px solid #ddd'
+
+		const targetIndex = cellIndex + 1
+		if (targetIndex < row.cells.length) {
+			row.insertBefore(newCell, row.cells[targetIndex])
+		} else {
+			row.appendChild(newCell)
+		}
+	})
+
+	updateContentWithHistory(doc)
+}
+
+function deleteColumn() {
+	const doc = editor.state.doc
+	if (!doc || !contextMenuCell.value) return
+
+	const cell = contextMenuCell.value
+	const table = cell.closest('table') as HTMLTableElement
+	const cellIndex = Array.from((cell.parentElement as HTMLTableRowElement).cells).indexOf(cell)
+
+	// Check if this is the only column
+	const firstRow = table.querySelector('tr')
+	if (firstRow && firstRow.cells.length <= 1) {
+		alert('Cannot delete the last column')
+		return
+	}
+
+	// Remove cell from each row at the same index
+	const rows = table.querySelectorAll('tr')
+	rows.forEach(row => {
+		if (row.cells[cellIndex]) {
+			row.cells[cellIndex].remove()
+		}
+	})
+
+	updateContentWithHistory(doc)
+}
+
+// Table context menu functions
+const canMergeRight = computed(() => {
+	if (!contextMenuCell.value) return false
+	const cell = contextMenuCell.value
+	const row = cell.parentElement as HTMLTableRowElement
+	const cellIndex = Array.from(row.cells).indexOf(cell)
+	const table = cell.closest('table') as HTMLTableElement
+	const isRTL = table?.dir === 'rtl'
+	const targetIndex = isRTL ? cellIndex - 1 : cellIndex + 1
+	return targetIndex >= 0 && targetIndex < row.cells.length
+})
+
+const canMergeDown = computed(() => {
+	if (!contextMenuCell.value) return false
+	const cell = contextMenuCell.value
+	const table = cell.closest('table') as HTMLTableElement
+	const rows = Array.from(table.rows)
+	const currentRow = cell.parentElement as HTMLTableRowElement
+	const currentRowIndex = rows.indexOf(currentRow)
+	return currentRowIndex < rows.length - 1
+})
+
+const 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')
+	return colspan > 1 || rowspan > 1
+})
+
+function handleTableContextMenu(event: MouseEvent) {
+	const target = event.target as HTMLElement
+	const cell = target.closest('td, th') as HTMLTableCellElement
+
+	if (cell && cell.closest('table')) {
+		event.preventDefault()
+		contextMenuCell.value = cell
+		contextMenuPosition.value = { x: event.clientX, y: event.clientY }
+		showTableContextMenu.value = true
+	}
+}
+
+// Close context menu when clicking outside
+function closeTableContextMenu() {
+	showTableContextMenu.value = false
+	contextMenuCell.value = null
+}
+
+// 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)
 
 // Expose debug methods if debug mode is enabled
@@ -36,18 +1946,148 @@ const editorHeight = $computed(() => {
 	} else if (typeof props.height === 'string') {
 		return props.height
 	}
-	return '240px' // default height
-})
+	return '240px' // default height
+})
+
+// Cleanup on component unmount
+onUnmounted(() => {
+	editor.cleanup()
+})
+
+function setupTableEditButtons(doc: Document) {
+	console.log('setupTableEditButtons called with doc:', doc)
+
+	// Simple function to add edit buttons to all tables
+	function addEditButtonsToTables() {
+		console.log('Adding edit buttons to tables...')
+		const tables = doc.querySelectorAll('table:not([data-edit-button-added])') as NodeListOf<HTMLTableElement>
+		console.log('Found tables:', tables.length)
+
+		tables.forEach((table, index) => {
+			console.log(`Processing table ${index + 1}`)
+
+			// Create edit button as a span element instead of button
+			const editBtn = doc.createElement('span')
+			editBtn.className = 'table-edit-btn'
+			editBtn.textContent = '✎ Edit'
+			editBtn.title = 'Edit Table'
+
+			// Prevent any content insertion into button
+			editBtn.setAttribute('contenteditable', 'false')
+			editBtn.setAttribute('tabindex', '-1')
+			editBtn.style.pointerEvents = 'auto'
+			editBtn.style.userSelect = 'none'
+
+			editBtn.addEventListener('click', (e) => {
+				console.log('Edit button clicked!')
+				e.preventDefault()
+				e.stopPropagation()
+				e.stopImmediatePropagation()
+				openTableEditor(table)
+			})
+
+			// Prevent focus and content insertion
+			editBtn.addEventListener('focus', (e) => {
+				e.preventDefault()
+				e.stopPropagation()
+				editBtn.blur()
+			})
+
+			editBtn.addEventListener('mousedown', (e) => {
+				e.preventDefault()
+				e.stopPropagation()
+			})
+
+			// Create a wrapper div to contain both table and button
+			const wrapper = doc.createElement('div')
+			wrapper.className = 'table-wrapper'
+			wrapper.style.position = 'relative'
+			wrapper.style.display = 'flex'
+			wrapper.style.flexDirection = 'column'
+			wrapper.style.width = '100%'
+			wrapper.style.marginBottom = '1rem'
+
+			// Copy table alignment to wrapper and convert to flex
+			if (table.style.marginLeft && table.style.marginRight) {
+				// Detect current alignment
+				let alignment = 'left'
+				if (table.style.marginLeft === 'auto' && table.style.marginRight === 'auto') {
+					alignment = 'center'
+				} else if (table.style.marginLeft === 'auto') {
+					alignment = 'right'
+				}
+
+				// Apply flex alignment to wrapper
+				if (alignment === 'center') {
+					wrapper.style.alignItems = 'center'
+				} else if (alignment === 'right') {
+					wrapper.style.alignItems = 'flex-end'
+				} else {
+					wrapper.style.alignItems = 'flex-start'
+				}
+
+				// Reset table margins since wrapper handles alignment now
+				table.style.marginLeft = '0'
+				table.style.marginRight = '0'
+			} else {
+				// Default to left alignment
+				wrapper.style.alignItems = 'flex-start'
+			}
+
+			// Insert wrapper before table
+			table.parentNode?.insertBefore(wrapper, table)
+			// Move table into wrapper
+			wrapper.appendChild(table)
+			// Add button to wrapper (not to table)
+			wrapper.appendChild(editBtn)
+
+			// Remove margin from table since wrapper handles it
+			table.style.marginBottom = '0'
+
+			table.setAttribute('data-edit-button-added', 'true')
+
+			console.log(`Added edit button to table ${index + 1}`)
+		})
+	}
 
-// Cleanup on component unmount
-onUnmounted(() => {
-	editor.cleanup()
-})
+	// Store function for external access
+	; (doc as any).__addEditButtonsToTables = addEditButtonsToTables
+
+	// Add buttons immediately
+	addEditButtonsToTables()
+}
 
 function setupAutoWrapping(doc: Document) {
-	// Initialize editor with paragraph
+	// Function to remove placeholder
+	function removePlaceholder() {
+		const placeholderElement = doc.querySelector('.placeholder')
+		if (placeholderElement) {
+			placeholderElement.remove()
+			// Add empty paragraph if body becomes empty
+			if (!doc.body.innerHTML.trim()) {
+				const direction = getCurrentDirection()
+				doc.body.innerHTML = `<p dir="${direction}"><br></p>`
+			}
+		}
+	}
+
+	// Function to add placeholder if content is empty
+	function addPlaceholder() {
+		const direction = getCurrentDirection()
+		const emptyContent = `<p dir="${direction}"><br></p>`
+		if (props.placeholder && (!doc.body.innerHTML.trim() || doc.body.innerHTML === emptyContent)) {
+			doc.body.innerHTML = `<p class="placeholder">${props.placeholder}</p>`
+		}
+	}
+
+	// Initialize editor with paragraph or placeholder
 	if (!doc.body.innerHTML.trim()) {
-		doc.body.innerHTML = '<p><br></p>'
+		if (props.placeholder) {
+			addPlaceholder()
+		} else {
+			const direction = getCurrentDirection()
+			doc.body.innerHTML = `<p dir="${direction}"><br></p>`
+		}
 	}
 
 	// After any change, ensure proper structure
@@ -59,7 +2099,8 @@ function setupAutoWrapping(doc: Document) {
 
 		// If body is completely empty, add a paragraph and return
 		if (!doc.body.innerHTML.trim() || doc.body.innerHTML === '') {
-			doc.body.innerHTML = '<p><br></p>'
+			const direction = getCurrentDirection()
+			doc.body.innerHTML = `<p dir="${direction}"><br></p>`
 			return
 		}
 
@@ -115,9 +2156,14 @@ function setupAutoWrapping(doc: Document) {
 				}
 			})
 
-			// Ensure empty body has a paragraph
+			// Ensure empty body has a paragraph or placeholder
 			if (!doc.body.children.length || !doc.body.innerHTML.trim()) {
-				doc.body.innerHTML = '<p><br></p>'
+				if (props.placeholder) {
+					addPlaceholder()
+				} else {
+					const direction = getCurrentDirection()
+					doc.body.innerHTML = `<p dir="${direction}"><br></p>`
+				}
 			}
 
 			// Clean up empty paragraphs more conservatively
@@ -147,14 +2193,23 @@ function setupAutoWrapping(doc: Document) {
 
 	// Handle input events
 	doc.addEventListener('input', (e) => {
+		// Remove placeholder on first input
+		removePlaceholder()
+
+		// Detect direction based on content
+		detectAndSetDirection()
+
 		// Handle complete content deletion immediately
 		if (!doc.body.innerHTML.trim() || doc.body.innerHTML === '') {
-			doc.body.innerHTML = '<p><br></p>'
-			editor.state.content = doc.body.innerHTML
+			if (props.placeholder) {
+				addPlaceholder()
+			} else {
+				const direction = getCurrentDirection()
+				doc.body.innerHTML = `<p dir="${direction}"><br></p>`
+			}
+			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']
 
@@ -167,7 +2222,7 @@ function setupAutoWrapping(doc: Document) {
 		}
 
 		// Always update content to keep state in sync
-		editor.state.content = doc.body.innerHTML
+		updateContentWithHistory(doc)
 	})
 
 	// Handle Enter key
@@ -282,7 +2337,7 @@ function setupAutoWrapping(doc: Document) {
 			selection.addRange(newRange)
 
 			// Update content immediately to reflect changes
-			editor.state.content = doc.body.innerHTML
+			updateContentWithHistory(doc)
 		}
 	})
 
@@ -291,11 +2346,9 @@ function setupAutoWrapping(doc: Document) {
 		// Give the paste operation time to complete before normalizing
 		setTimeout(() => {
 			normalizeContent()
-			editor.state.content = doc.body.innerHTML
+			updateContentWithHistory(doc)
 		}, 150) // Longer timeout for reliable paste processing
-	})
-
-	// Add a MutationObserver to catch structural changes that might create loose text
+	})	// Add a MutationObserver to catch structural changes that might create loose text
 	const observer = new MutationObserver((mutations) => {
 		for (const mutation of mutations) {
 			if (mutation.type === 'childList') {
@@ -309,7 +2362,39 @@ function setupAutoWrapping(doc: Document) {
 						p.dir = doc.body.dir || 'ltr'
 						p.textContent = addedNode.textContent
 						addedNode.parentNode.replaceChild(p, addedNode)
-						editor.state.content = doc.body.innerHTML
+						updateContentWithHistory(doc)
+					}
+					// Check if a table was added
+					else if (addedNode.nodeType === Node.ELEMENT_NODE) {
+						const element = addedNode as HTMLElement
+						if (element.tagName === 'TABLE') {
+							console.log('MutationObserver detected new table:', element)
+							setTimeout(() => {
+								console.log('Applying default table settings...')
+								applyDefaultTableSettings(element as HTMLTableElement)
+								console.log('Adding edit buttons to newly detected table...')
+								setupTableEditButtons(doc)
+							}, 100)
+						}
+						// Apply direction to blockquotes and lists
+						else if (['BLOCKQUOTE', 'UL', 'OL'].includes(element.tagName)) {
+							console.log('MutationObserver detected new', element.tagName, ':', element)
+							if (!element.dir) {
+								element.dir = doc.body.dir || 'ltr'
+								console.log('Applied direction to', element.tagName, ':', element.dir)
+							}
+
+							// 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 => {
+									if (!li.dir) {
+										li.dir = element.dir
+										console.log('Applied direction to new list item:', li.dir)
+									}
+								})
+							}
+						}
 					}
 				})
 			}
@@ -326,6 +2411,101 @@ function setupAutoWrapping(doc: Document) {
 	if (!doc.body.dataset.observers) {
 		doc.body.dataset.observers = 'mutation'
 	}
+
+	// Handle clicks on links to open link modal
+	doc.addEventListener('click', (e) => {
+		const target = e.target as HTMLElement
+		const link = target.closest('a')
+		const videoFigure = target.closest('.video-figure')
+		const imageFigure = target.closest('.image-figure')
+		const embedFigure = target.closest('.embed-figure')
+		const table = target.closest('table')
+
+		if (table) {
+			// Table clicks are handled only by edit button, not by direct clicks
+			// No action needed for regular table clicks
+		}
+		else if (videoFigure) {
+			e.preventDefault()
+			e.stopPropagation()
+
+			// Open video modal for editing
+			openVideoModal(videoFigure as HTMLElement)
+		}
+		else if (imageFigure) {
+			e.preventDefault()
+			e.stopPropagation()
+
+			// Open image modal for editing
+			openImageModal(imageFigure as HTMLElement)
+		}
+		else if (embedFigure) {
+			e.preventDefault()
+			e.stopPropagation()
+
+			// Open embed modal for editing
+			openEmbedModal(embedFigure as HTMLElement)
+		}
+		else if (link && link.href) {
+			e.preventDefault()
+			e.stopPropagation()
+
+			// Get current selection
+			const selection = doc.getSelection()
+			if (!selection) return
+
+			// Create a range that selects the entire link
+			const range = doc.createRange()
+			range.selectNodeContents(link)
+			selection.removeAllRanges()
+			selection.addRange(range)
+
+			// Populate the form with existing link data
+			linkForm.value.url = link.href
+			linkForm.value.openInNewTab = link.target === '_blank'
+
+			// Store the link data for editing
+			pendingLinkData = {
+				selection,
+				range,
+				existingLink: link
+			}
+
+			showLinkModal.value = true
+		}
+	})
+
+	// Handle focus to remove placeholder when user starts interacting
+	doc.addEventListener('focus', () => {
+		// If content is just placeholder, remove it when focusing
+		const placeholderElement = doc.querySelector('.placeholder')
+		if (placeholderElement) {
+			// Clear content and add empty paragraph for typing
+			const direction = getCurrentDirection()
+			doc.body.innerHTML = `<p dir="${direction}"><br></p>`
+			// Set cursor in the paragraph
+			const p = doc.body.querySelector('p')
+			if (p) {
+				const range = doc.createRange()
+				range.selectNodeContents(p)
+				range.collapse(true)
+				const selection = doc.getSelection()
+				if (selection) {
+					selection.removeAllRanges()
+					selection.addRange(range)
+				}
+			}
+			updateContentWithHistory(doc)
+		}
+	})	// Handle blur to add placeholder back if content is empty
+	doc.addEventListener('blur', () => {
+		const direction = getCurrentDirection()
+		const emptyContent = `<p dir="${direction}"><br></p>`
+		if (props.placeholder && (!doc.body.innerHTML.trim() || doc.body.innerHTML === emptyContent)) {
+			addPlaceholder()
+			updateContentWithHistory(doc)
+		}
+	})
 }
 
 const initEditor = async () => {
@@ -336,10 +2516,77 @@ const initEditor = async () => {
 	isInitializing.value = true
 
 	try {
-		// Load styles first
-		const editorStyles = await import('./editor.css?inline')
+		// Use basic embedded styles for better compatibility
+		let editorStylesContent = `
+			body {
+				margin: 0;
+				padding: 8px;
+				min-height: 200px;
+				font-family: sans-serif !important;
+				line-height: 1.5;
+				color: inherit;
+				background: transparent;
+				max-width: 1060px;
+				margin: 0 auto;
+			}
+			table {
+				border-collapse: collapse;
+				margin-bottom: 1rem;
+			}
+			th, td {
+				padding: 1rem;
+				border: 1px solid #2a2a2a;
+				line-height: 1.5;
+				text-align: unset;
+			}
+			th {
+				background-color: #f4f4f4;
+			}
+
+			/* Table edit button styles */
+			.table-edit-btn {
+				position: absolute;
+				top: -8px;
+				right: -8px;
+				background: #007bff;
+				color: white;
+				border: none;
+				border-radius: 4px;
+				padding: 4px 8px;
+				font-size: 12px;
+				cursor: pointer;
+				opacity: 1;
+				z-index: 99;
+				font-family: sans-serif;
+				pointer-events: auto;
+				user-select: none;
+				display: block;
+				line-height: 1;
+				/* Prevent content insertion */
+				contenteditable: false !important;
+				outline: none !important;
+			}
 
-		// Create a complete HTML document with proper doctype and meta tags
+			.table-edit-btn:hover {
+				background: #0056b3;
+			}
+			
+			/* Prevent any focus or content insertion */
+			.table-edit-btn:focus {
+				outline: none !important;
+				background: #007bff;
+			}
+			
+			.table-edit-btn:active {
+				background: #0056b3;
+			}
+				.richtext-editor-content blockquote {
+   				 padding: 8px !important;
+    background: #f4f4f4 !important;
+	border-inline-start: 4px solid #ccc !important;
+}
+		`		// 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>
 			<html>
@@ -356,9 +2603,17 @@ const initEditor = async () => {
 					media-src *;
 				">
 				<base target="_blank">
-				<style id="editor-styles">${editorStyles.default}</style>
+				<style id="editor-styles">
+					${editorStylesContent}
+					.placeholder {
+						color: #9ca3af;
+						font-style: italic;
+						pointer-events: none;
+						user-select: none;
+					}
+				</style>
 			</head>
-			<body>${props.modelValue || ''}</body>
+			<body class="richtext-editor-content">${initialContent}</body>
 			</html>
 		`
 
@@ -381,12 +2636,96 @@ const initEditor = async () => {
 		// Set default direction based on content
 		doc.body.dir = hasRTL ? 'rtl' : 'ltr'
 
+		// 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 => {
+			const htmlElement = element as HTMLElement
+			console.log('Processing element:', htmlElement.tagName, 'current dir:', htmlElement.dir)
+			if (!htmlElement.dir) {
+				htmlElement.dir = doc.body.dir || 'ltr'
+				console.log('Applied direction to existing', htmlElement.tagName, ':', htmlElement.dir)
+			}
+
+			// Also apply direction to list items
+			if (htmlElement.tagName === 'UL' || htmlElement.tagName === 'OL') {
+				const listItems = htmlElement.querySelectorAll('li')
+				listItems.forEach(li => {
+					const listItem = li as HTMLElement
+					if (!listItem.dir) {
+						listItem.dir = htmlElement.dir
+						console.log('Applied direction to list item:', listItem.dir)
+					}
+				})
+			}
+		})
+
 		// Ensure editor.state.content is set to the current HTML content
 		editor.state.content = doc.body.innerHTML
 
 		editor.init(doc)
 		useEditorKeyboard(doc, commands)
 
+		// Auto clear format for basic mode
+		if (props.basic && props.modelValue) {
+			setTimeout(() => {
+				// Clear all formatting by removing styles and replacing with plain text
+				const elements = doc.body.querySelectorAll('*')
+				elements.forEach(el => {
+					if (el.tagName !== 'P' && el.tagName !== 'BR') {
+						const textContent = el.textContent || ''
+						if (textContent.trim()) {
+							const p = doc.createElement('p')
+							p.textContent = textContent
+							el.parentNode?.replaceChild(p, el)
+						} else {
+							el.remove()
+						}
+					} else if (el.tagName === 'P') {
+						// Remove all attributes from paragraphs
+						Array.from(el.attributes).forEach(attr => {
+							if (attr.name !== 'dir') {
+								el.removeAttribute(attr.name)
+							}
+						})
+					}
+				})
+				updateContentWithHistory(doc)
+			}, 100)
+		}
+
+		// Add inline toolbar selection listener
+		doc.addEventListener('selectionchange', () => {
+			setTimeout(() => showInlineToolbarForSelection(), 10)
+		})
+
+		// Also listen for mouseup to handle manual selections
+		doc.addEventListener('mouseup', () => {
+			setTimeout(() => showInlineToolbarForSelection(), 10)
+		})
+
+		// Hide inline toolbar when clicking outside or when selection is lost
+		doc.addEventListener('click', (e) => {
+			setTimeout(() => {
+				const selection = doc.getSelection()
+				if (!selection || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed) {
+					hideInlineToolbar()
+				}
+			}, 10)
+		})
+
+		// Also hide when pressing keyboard arrows or escape
+		doc.addEventListener('keydown', (e) => {
+			if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Escape'].includes(e.key)) {
+				setTimeout(() => {
+					const selection = doc.getSelection()
+					if (!selection || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed) {
+						hideInlineToolbar()
+					}
+				}, 10)
+			}
+		})
+
 		// Clean up any existing content and convert direct text nodes to paragraphs
 		const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
 		const textNodes: Text[] = []
@@ -407,11 +2746,52 @@ const initEditor = async () => {
 			}
 		})
 
+		// Add table context menu listener
+		doc.addEventListener('contextmenu', (e) => {
+			const target = e.target as HTMLElement
+			const cell = target.closest('td, th') as HTMLTableCellElement
+
+			if (cell && cell.closest('table')) {
+				e.preventDefault()
+				contextMenuCell.value = cell
+
+				// Get iframe position relative to viewport
+				const iframeRect = iframe.value!.getBoundingClientRect()
+				contextMenuPosition.value = {
+					x: iframeRect.left + e.clientX,
+					y: iframeRect.top + e.clientY
+				}
+				showTableContextMenu.value = true
+			}
+		})
+
+		// Add click listener to highlight selected table cell
+		doc.addEventListener('click', (e) => {
+			// Remove previous highlights
+			doc.querySelectorAll('.table-cell-selected').forEach(cell => {
+				cell.classList.remove('table-cell-selected')
+			})
+
+			const target = e.target as HTMLElement
+			const cell = target.closest('td, th') as HTMLTableCellElement
+
+			if (cell && cell.closest('table')) {
+				// Highlight the selected cell
+				cell.classList.add('table-cell-selected')
+				contextMenuCell.value = cell
+			}
+		})
+
 		// Setup auto-wrapping for typed content
 		setupAutoWrapping(doc)
 
+		// Setup table edit buttons
+		console.log('About to setup table edit buttons...')
+		setupTableEditButtons(doc)
+		console.log('Table edit buttons setup completed')
+
 		// Update state.content after cleanup
-		editor.state.content = doc.body.innerHTML
+		updateContentWithHistory(doc)
 
 		// If editor is empty, add an initial paragraph
 		if (!doc.body.innerHTML.trim() || !doc.body.querySelector('p,h1,h2,h3,h4,h5,h6,blockquote,ul,ol,table')) {
@@ -429,10 +2809,14 @@ const initEditor = async () => {
 				selection.addRange(range)
 			}
 
-			editor.state.content = doc.body.innerHTML
+			updateContentWithHistory(doc)
+		}
+
+		// Only focus if autofocus is explicitly set to true
+		if (props.autofocus === true) {
+			doc.body.focus()
 		}
 
-		doc.body.focus()
 		hasInitialized.value = true
 	} catch (error) {
 		// Keep only this error log for debugging critical issues
@@ -448,8 +2832,24 @@ watch(() => props.modelValue, (newValue, oldValue) => {
 		// Only reset if content change is significant (not just minor edits)
 		if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
 			hasInitialized.value = false
+			// For external changes, update content directly but then push to history
 			editor.state.content = newValue
 			editor.updateState.content('html')
+			// Add this external change to history after a brief delay
+			setTimeout(() => {
+				if (editor.state.doc) {
+					updateContentWithHistory(editor.state.doc)
+					// Also setup table edit buttons for any new tables
+					setupTableEditButtons(editor.state.doc)
+				}
+			}, 100)
+		} else {
+			// For minor changes, still check for new tables
+			setTimeout(() => {
+				if (editor.state.doc) {
+					setupTableEditButtons(editor.state.doc)
+				}
+			}, 50)
 		}
 	}
 })
@@ -461,6 +2861,45 @@ watch(() => editor.state.content, (newValue) => {
 	emit('update:modelValue', newValue)
 })
 
+// Watch table alignment changes and update the table immediately
+watch(() => tableForm.value.alignment, (newAlignment) => {
+	if (pendingTableData?.existingTable) {
+		const table = pendingTableData.existingTable
+		if (newAlignment === 'center') {
+			table.style.marginLeft = 'auto'
+			table.style.marginRight = 'auto'
+		} else if (newAlignment === 'right') {
+			table.style.marginLeft = 'auto'
+			table.style.marginRight = '0'
+		} else {
+			table.style.marginLeft = '0'
+			table.style.marginRight = 'auto'
+		}
+
+		// Update content with history
+		if (editor.state.doc) {
+			updateContentWithHistory(editor.state.doc)
+		}
+	}
+})
+
+// Close context menu when clicking outside
+const handleGlobalClick = () => {
+	showTableContextMenu.value = false
+}
+
+// Add event listener when component mounts
+if (typeof window !== 'undefined') {
+	window.addEventListener('click', handleGlobalClick)
+}
+
+// Cleanup event listener
+onBeforeUnmount(() => {
+	if (typeof window !== 'undefined') {
+		window.removeEventListener('click', handleGlobalClick)
+	}
+})
+
 // Expose for testing
 defineExpose({
 	editor,
@@ -469,56 +2908,324 @@ defineExpose({
 </script>
 
 <template>
-	<div class="bagel-input">
-		<label>{{ label }}</label>
-
-		<div
-			class="rich-text-editor rounded pt-05 px-05 pb-075"
-			:class="{ 'fullscreen-mode': editor.state.isFullscreen }"
-		>
-			<EditorToolbar
-				v-if="editor.state.hasInit" :config="toolbarConfig"
-				:selectedStyles="editor.state.selectedStyles" @action="commands.execute"
-			/>
-			<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
-				<div
-					class="content-area radius-05"
-					: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"
-					/>
-				</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 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>
-			<div v-if="debug" class="flex">
-				<p class="text12 txt-gray mb-0 p-0">
-					Debug
-				</p>
-				<Btn thin color="gray" icon="delete" @click="debugMethods?.clearSession">
-					Clear Session
+			<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
+				</Btn>
+				<Btn full-width align-txt="start" thin flat icon="remove" @click="deleteRow(); showTableContextMenu = false" class="context-menu-btn">
+					Delete Row
+				</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>
-				<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
-					Download Log
+				<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
-					thin color="gray" icon="content_copy"
-					@click="copyText(debugMethods?.exportDebugWithPrompt() || '')"
-				>
-					Copy Log
+				<Btn full-width align-txt="start" thin flat icon="remove" @click="deleteColumn(); showTableContextMenu = false" class="context-menu-btn">
+					Delete Column
 				</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" />
+		</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>
+		</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>
+
+		<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" />
+		</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 @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)" />
+		</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>
+			</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>
+			</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>
+			</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>
+			<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>
+			</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" />
+			</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:" />
+			</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>
 </template>
 
 <style>
+.table-editor .colorInputPickWrap {
+	background: var(--input-bg);
+}
+
+.rich-text-editor--basic .content-area {
+	background: var(--input-bg) !important;
+	border: none;
+	padding: 0 0.7rem;
+	border-radius: var(--input-border-radius);
+	color: var(--input-color);
+	min-width: calc(var(--input-height) * 3);
+	width: 100%;
+}
+
+.rich-text-editor--basic .content-area:hover {
+	outline-color: rgba(0, 0, 0, 0.05);
+	box-shadow: inset 0 0 8px #00000018;
+	outline-color: var(--input-bg);
+}
+
 .content-area p,
 .content-area span,
 .content-area li {
@@ -527,6 +3234,17 @@ defineExpose({
 </style>
 
 <style scoped>
+/* Table hover and edit button styles */
+.content-area table {
+	position: relative;
+}
+
+
+.content-area table:hover {
+	outline: 2px solid rgba(0, 123, 204, 0.3);
+	outline-offset: 2px;
+}
+
 .rich-text-editor {
 	background: var(--input-bg);
 	border: 1px solid var(--border-color);
@@ -581,7 +3299,7 @@ defineExpose({
 	left: 0;
 	width: 100vw;
 	height: 100vh;
-	z-index: 9999;
+	z-index: 99;
 	padding: 2rem;
 }
 
@@ -600,4 +3318,225 @@ defineExpose({
 	gap: 0.5rem;
 	justify-content: flex-end;
 }
+
+/* Inline Toolbar Styles */
+.inline-toolbar {
+	pointer-events: all;
+}
+
+.inline-toolbar-content {
+	background: var(--bgl-surface, white);
+	border: 1px solid var(--border-color, #dddddd);
+	border-radius: 8px;
+	padding: 0.25rem;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	display: flex;
+	align-items: center;
+	gap: 0.125rem;
+	backdrop-filter: blur(8px);
+}
+
+.inline-toolbar-content .btn {
+	min-width: 32px;
+	height: 32px;
+	padding: 0;
+}
+
+.inline-toolbar-content .btn.active {
+	background: var(--bgl-primary);
+	color: white;
+}
+
+.inline-toolbar-content .separator {
+	color: var(--border-color, #dddddd);
+	margin: 0 0.25rem;
+	opacity: 0.5;
+}
+
+/* Table Context Menu */
+.table-context-menu {
+	pointer-events: auto;
+}
+
+.context-menu-content {
+	background: white;
+	border: 1px solid var(--border-color, #dddddd);
+	border-radius: var(--btn-border-radius) !important;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	padding: 0;
+	min-width: 140px;
+	max-width: 180px;
+	overflow: hidden;
+	--input-font-size: 12px;
+}
+
+.menu-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 8px 12px;
+	background-color: var(--bg-light, #f8f9fa);
+	border-bottom: 1px solid var(--border-color, #dddddd);
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--text-secondary, #666);
+	margin-bottom: 5px;
+}
+
+.close-btn {
+	background: none;
+	border: none;
+	font-size: 16px;
+	cursor: pointer;
+	padding: 0;
+	width: 20px;
+	height: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 3px;
+	color: var(--text-secondary, #666);
+	transition: all 0.2s;
+}
+
+.close-btn:hover {
+	background-color: var(--hover-bg, #e9ecef);
+	color: var(--text-primary, #333);
+}
+
+.context-menu-content>.btn {
+	margin: 2px 4px;
+}
+
+.context-menu-item {
+	padding: 8px 16px;
+	cursor: pointer;
+	transition: background-color 0.2s;
+	font-size: 14px;
+}
+
+.context-menu-item:hover {
+	background-color: var(--hover-bg, #f5f5f5);
+}
+
+.context-menu-separator {
+	height: 1px;
+	background-color: var(--border-color, #dddddd);
+	margin: 4px 0;
+}
+
+.context-menu-btn:hover {
+	background-color: var(--hover-bg, #f5f5f5) !important;
+}
+
+/* Table Cell Selection */
+.table-cell-selected {
+	background-color: rgba(0, 123, 255, 0.1) !important;
+	border: 2px solid #007bff !important;
+	position: relative;
+}
+
+.table-cell-selected::after {
+	content: '';
+	position: absolute;
+	top: -2px;
+	left: -2px;
+	right: -2px;
+	bottom: -2px;
+	border: 2px solid #007bff;
+	pointer-events: none;
+	z-index: 1;
+}
+
+/* Table Modal Button Active States */
+.activeBtn {
+	background: var(--bgl-primary) !important;
+	color: white !important;
+	border-color: var(--bgl-primary) !important;
+}
+
+/* Table Edit Button Protection */
+.table-edit-btn {
+	position: absolute !important;
+	top: 5px !important;
+	right: 5px !important;
+	background: rgba(0, 0, 0, 0.7) !important;
+	color: white !important;
+	padding: 4px 8px !important;
+	border-radius: 4px !important;
+	font-size: 12px !important;
+	cursor: pointer !important;
+	z-index: 100 !important;
+	pointer-events: auto !important;
+	user-select: none !important;
+	-webkit-user-select: none !important;
+	-moz-user-select: none !important;
+	-ms-user-select: none !important;
+	outline: none !important;
+	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;
+	font-family: inherit !important;
+	font-weight: normal !important;
+	text-align: center !important;
+	vertical-align: baseline !important;
+	text-decoration: none !important;
+	text-transform: none !important;
+	letter-spacing: normal !important;
+	word-spacing: normal !important;
+	text-indent: 0 !important;
+	text-shadow: none !important;
+	direction: ltr !important;
+	unicode-bidi: normal !important;
+}
+
+.table-edit-btn:hover {
+	background: rgba(0, 0, 0, 0.9) !important;
+}
+
+/* Prevent any content insertion into table edit buttons */
+.table-edit-btn * {
+	display: none !important;
+}
+
+.table-edit-btn::before,
+.table-edit-btn::after {
+	content: none !important;
+}
+
+/* Editor Tooltip */
+.editor-tooltip {
+	position: fixed;
+	background: rgba(0, 0, 0, 0.9);
+	color: white;
+	padding: 8px 12px;
+	border-radius: 6px;
+	font-size: 14px;
+	line-height: 1.4;
+	max-width: 300px;
+	word-wrap: break-word;
+	z-index: 9999;
+	pointer-events: none;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+	animation: tooltipFadeIn 0.2s ease-out;
+}
+
+@keyframes tooltipFadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(-5px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
 </style>