@bagelink/vue 1.9.83 → 1.9.86

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

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import type { ToolbarConfig } from './richTextTypes'
-import { CodeEditor, copyText, Btn, Modal, BglVideo, Icon, Card, ColorInput } from '@bagelink/vue'
+import { CodeEditor, copyText, Btn, Modal, BglVideo, Icon, Card, ColorInput, pathKeyToURL } from '@bagelink/vue'
 import { watch, onUnmounted, onBeforeUnmount, onMounted, ref, computed, useAttrs } from 'vue'
 import CheckInput from '../CheckInput.vue'
 import NumberInput from '../NumberInput.vue'
 import SelectInput from '../SelectInput.vue'
 import TextInput from '../TextInput.vue'
+import UploadInput from '../Upload/UploadInput.vue'
 import EditorToolbar from './components/EditorToolbar.vue'
 import { useCommands } from './composables/useCommands'
 import { useEditor } from './composables/useEditor'
@@ -64,7 +65,6 @@ const currentInputColor = computed(() => {
 	if (typeof document !== 'undefined') {
 		const computedStyle = getComputedStyle(document.documentElement)
 		const color = computedStyle.getPropertyValue('--input-color').trim()
-		console.log('🎨 currentInputColor computed:', color, 'forceUpdate:', forceUpdate.value)
 		return color || '#000'
 	}
 	return '#000'
@@ -73,7 +73,6 @@ const currentInputColor = computed(() => {
 const currentTextColor = computed(() => {
 	const inputColor = currentInputColor.value
 	const textColor = props.textColor || (inputColor && inputColor.length > 0 && inputColor !== '#000' ? inputColor : 'inherit')
-	console.log('🎨 currentTextColor computed:', textColor, 'from inputColor:', inputColor)
 	return textColor
 })
 
@@ -96,7 +95,6 @@ onMounted(() => {
 			})
 
 			if (shouldUpdate) {
-				console.log('🔄 Theme change detected, forcing update')
 				forceUpdate.value++
 
 				// Also directly update iframe if initialized
@@ -128,26 +126,10 @@ onBeforeUnmount(() => {
 	themeObserver?.disconnect()
 })
 
-// Global testing functions
-if (typeof window !== 'undefined') {
-	(window as any).testRichTextTheme = () => {
-		console.log('🧪 Testing RichText theme:', {
-			currentInputColor: currentInputColor.value,
-			currentTextColor: currentTextColor.value,
-			hasInitialized: hasInitialized.value,
-			hasIframe: !!iframe.value,
-			cssVar: getComputedStyle(document.documentElement).getPropertyValue('--input-color')
-		})
-
-		if (hasInitialized.value) {
-			updateIframeColors()
-		}
-	}
-
-	(window as any).forceRichTextUpdate = () => {
-		console.log('🔄 Forcing RichText update')
-		forceUpdate.value++
-	}
+// Debug helpers — only registered when debug prop is set
+if (props.debug && typeof window !== 'undefined') {
+	; (window as any).forceRichTextUpdate = () => { forceUpdate.value++ }
+	; (window as any).debugRichText = debugShowContent
 }
 
 // Computed properties for UI control
@@ -353,59 +335,34 @@ const tablePreviewHtml = computed(() => {
 // Initialize content from modelValue
 editor.state.content = props.modelValue
 
-// Function to detect Hebrew text and set direction
+// Matches Hebrew, Arabic, Syriac, Thaana, Arabic Supplement, Arabic Presentation Forms
+const RTL_REGEX = /[\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\uFB1D-\uFDFD\uFE70-\uFEFC]/
+
 function detectAndSetDirection() {
 	const { doc } = editor.state
-	if (!doc?.body) {
-		console.log('No doc.body found')
-		return
-	}
+	if (!doc?.body) { 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 firstChars = allText.trim().substring(0, 20)
 	const currentDir = doc.body.dir || 'ltr'
-	const shouldBeRtl = hasHebrew
-	const newDirection = shouldBeRtl ? 'rtl' : 'ltr'
-
-	console.log('Current dir:', currentDir, 'Should be RTL:', shouldBeRtl)
+	const newDirection = RTL_REGEX.test(firstChars) ? 'rtl' : 'ltr'
 
 	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) => {
+		doc.querySelectorAll('p').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
 	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'
+	const firstChars = (doc.body.textContent || '').trim().substring(0, 20)
+	return RTL_REGEX.test(firstChars) ? 'rtl' : 'ltr'
 }
 
 // Helper function to update content with history tracking
@@ -437,33 +394,15 @@ function updateContentWithHistory(doc: Document, skipHistory = false) {
 function debugShowContent() {
 	const { doc } = editor.state
 	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
@@ -723,9 +662,10 @@ function openImageModal(existingImage: HTMLElement | null = null) {
 	}
 
 	if (existingImage) {
-		// Populate form with existing image data
-		// All images are now in figures
-		const img = existingImage.querySelector('img')
+		// Handle both <figure><img></figure> (editor-created) and bare <img> (loaded content)
+		const img = existingImage.tagName === 'IMG'
+			? existingImage as HTMLImageElement
+			: existingImage.querySelector('img')
 		const figcaption = existingImage.querySelector('figcaption')
 		const credit = existingImage.getAttribute('data-credit') || img?.getAttribute('data-credit') || ''
 
@@ -894,9 +834,13 @@ function openEmbedModal(existingEmbed: HTMLElement | null = null) {
 	}
 
 	if (existingEmbed) {
-		// Populate form with existing embed data
-		const iframe = existingEmbed.querySelector('iframe')
-		const caption = existingEmbed.querySelector('figcaption')
+		// Handle both figure wrappers and bare <iframe> elements
+		const iframe = existingEmbed.tagName === 'IFRAME'
+			? existingEmbed as HTMLIFrameElement
+			: existingEmbed.querySelector('iframe')
+		const caption = existingEmbed.tagName !== 'IFRAME'
+			? existingEmbed.querySelector('figcaption')
+			: null
 		embedForm.value = {
 			src: iframe?.src || '',
 			width: iframe?.width || iframe?.style.width?.replace('px', '') || '560',
@@ -951,14 +895,6 @@ function submitEmbed() {
 	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,
-		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'
@@ -1003,10 +939,6 @@ function submitEmbed() {
 		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
@@ -1033,21 +965,27 @@ function openVideoModal(existingVideo: HTMLElement | null = null) {
 	}
 
 	if (existingVideo) {
-		// Populate form with existing video data
+		// Handle both editor-internal figures (with .video-container) and bare <video>/<iframe> elements
 		const container = existingVideo.querySelector('.video-container')
+		const bareVideo = existingVideo.tagName === 'VIDEO' ? existingVideo as HTMLVideoElement : null
+		const bareIframe = existingVideo.tagName === 'IFRAME' ? existingVideo as HTMLIFrameElement : null
 		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',
+			src: container?.getAttribute('data-video-src')
+				|| bareVideo?.src
+				|| bareIframe?.src
+				|| '',
+			width: container?.getAttribute('data-width') || (bareVideo?.style.width ?? '') || '',
+			autoplay: container ? container.getAttribute('data-autoplay') === 'true' : (bareVideo?.autoplay ?? false),
+			mute: container ? container.getAttribute('data-mute') === 'true' : (bareVideo?.muted ?? false),
+			controls: container ? container.getAttribute('data-controls') === 'true' : (bareVideo?.controls ?? true),
+			loop: container ? container.getAttribute('data-loop') === 'true' : (bareVideo?.loop ?? false),
 			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')
+			caption: existingVideo.querySelector?.('figcaption')?.textContent || '',
+			showCaption: !!existingVideo.querySelector?.('figcaption')
 		}
 	} else {
 		// Reset form for new video
@@ -1277,8 +1215,6 @@ function detectTableAlignment(table: HTMLTableElement): 'left' | 'center' | 'rig
 	const { marginLeft } = table.style
 	const { marginRight } = table.style
 
-	console.log('Table margins:', { marginLeft, marginRight })
-
 	if (marginLeft === 'auto' && marginRight === 'auto') {
 		return 'center'
 	} if (marginLeft === 'auto' && marginRight === '0') {
@@ -1571,21 +1507,7 @@ function createNewTable(doc: Document) {
 	}
 
 	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
@@ -1602,8 +1524,6 @@ function deleteTable() {
 
 // 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,
@@ -1652,8 +1572,6 @@ function applyDefaultTableSettings(table: HTMLTableElement) {
 
 	// Set table direction
 	table.dir = defaultSettings.direction
-
-	console.log('Default settings applied successfully')
 }
 
 // Function to delete image
@@ -1680,6 +1598,136 @@ function deleteEmbed() {
 	pendingEmbedData = null
 }
 
+// Serialize editor DOM to clean, vanilla HTML — strips all editor chrome and converts
+// internal video placeholders to proper <video> / <iframe> tags.
+function getCleanHTML(doc: Document | null): string {
+	if (!doc?.body) { return '' }
+
+	const clone = doc.body.cloneNode(true) as HTMLElement
+
+	// Strip editor-UI elements that must never appear in output
+	clone.querySelectorAll('.table-edit-btn').forEach((btn) => { btn.remove() })
+	clone.querySelectorAll('.media-selected').forEach((el) => { el.classList.remove('media-selected') })
+	clone.querySelectorAll('.table-cell-selected').forEach((el) => { el.classList.remove('table-cell-selected') })
+
+	// Unwrap .table-wrapper divs: restore original table margin-based alignment
+	clone.querySelectorAll('.table-wrapper').forEach((wrapper) => {
+		const wrapperEl = wrapper as HTMLElement
+		const parent = wrapper.parentNode
+		if (!parent) { return }
+
+		const table = wrapper.querySelector('table') as HTMLElement | null
+		if (table) {
+			const { alignItems } = wrapperEl.style
+			if (alignItems === 'center') {
+				table.style.marginLeft = 'auto'
+				table.style.marginRight = 'auto'
+			} else if (alignItems === 'flex-end') {
+				table.style.marginLeft = 'auto'
+				table.style.marginRight = '0'
+			} else {
+				table.style.marginLeft = '0'
+				table.style.marginRight = 'auto'
+			}
+			table.style.marginBottom = '1rem'
+		}
+
+		Array.from(wrapper.childNodes).forEach(child => parent.insertBefore(child, wrapper))
+		wrapper.remove()
+	})
+
+	// Clean editor-only attributes from tables
+	clone.querySelectorAll('table').forEach((table) => {
+		table.removeAttribute('data-edit-button-added')
+	})
+
+	// Convert internal video placeholder divs → real <video> or <iframe> HTML
+	clone.querySelectorAll('.video-container[data-component="BglVideo"]').forEach((container) => {
+		const el = container as HTMLElement
+		const src = el.getAttribute('data-video-src') || ''
+		if (!src) { return }
+
+		const autoplay = el.getAttribute('data-autoplay') === 'true'
+		const muted = el.getAttribute('data-mute') === 'true'
+		const controls = el.getAttribute('data-controls') !== 'false'
+		const loop = el.getAttribute('data-loop') === 'true'
+		const aspectRatio = el.getAttribute('data-aspect-ratio') || '16:9'
+		const width = el.getAttribute('data-width') || ''
+
+		const widthStyle = width
+			? `width: ${/[%pxvwemr]/.test(width) ? width : `${width}px`};`
+			: 'width: 100%;'
+
+		const [ratioW, ratioH] = aspectRatio.split(':').map(Number)
+		const paddingBottom = ratioW && ratioH ? `${(ratioH / ratioW) * 100}%` : '56.25%'
+
+		const makeResponsiveIframe = (iframeSrc: string): HTMLElement => {
+			const wrapper = document.createElement('div')
+			wrapper.style.cssText = `${widthStyle} position: relative; padding-bottom: ${paddingBottom}; height: 0; overflow: hidden;`
+			const iframe = document.createElement('iframe')
+			iframe.src = iframeSrc
+			iframe.frameBorder = '0'
+			iframe.setAttribute('allowfullscreen', '')
+			iframe.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 100%;'
+			wrapper.appendChild(iframe)
+			return wrapper
+		}
+
+		let newEl: HTMLElement | null = null
+
+		if (src.includes('youtube.com') || src.includes('youtu.be')) {
+			let embedUrl = src
+			if (src.includes('youtube.com/watch?v=')) {
+				const videoId = src.split('watch?v=')[1]?.split('&')[0]
+				const params = []
+				if (autoplay) { params.push('autoplay=1') }
+				if (muted) { params.push('mute=1') }
+				if (loop) { params.push(`loop=1&playlist=${videoId}`) }
+				if (!controls) { params.push('controls=0') }
+				embedUrl = `https://www.youtube.com/embed/${videoId}${params.length ? `?${params.join('&')}` : ''}`
+			} else if (src.includes('youtu.be/')) {
+				const videoId = src.split('youtu.be/')[1]?.split('?')[0]
+				embedUrl = `https://www.youtube.com/embed/${videoId}`
+			} else if (src.includes('youtube.com/shorts/')) {
+				const videoId = src.split('shorts/')[1]?.split('?')[0]
+				embedUrl = `https://www.youtube.com/embed/${videoId}`
+			}
+			newEl = makeResponsiveIframe(embedUrl)
+		} else if (src.includes('vimeo.com')) {
+			const match = src.match(/vimeo\.com\/(\d+)/)
+			const embedUrl = match ? `https://player.vimeo.com/video/${match[1]}` : src
+			newEl = makeResponsiveIframe(embedUrl)
+		} else if (src.includes('<iframe')) {
+			const srcMatch = src.match(/src=["']([^"']+)["']/)
+			if (srcMatch) { newEl = makeResponsiveIframe(srcMatch[1]) }
+		} else {
+			// Direct video file
+			const video = document.createElement('video')
+			video.src = src
+			if (controls) { video.setAttribute('controls', '') }
+			if (autoplay) { video.setAttribute('autoplay', '') }
+			if (muted) { video.setAttribute('muted', '') }
+			if (loop) { video.setAttribute('loop', '') }
+			video.style.cssText = `${widthStyle} height: auto; display: block;`
+			newEl = video
+		}
+
+		if (newEl) { el.parentNode?.replaceChild(newEl, el) }
+	})
+
+	// Strip internal placeholder content from video figures (the bgl_vid wrapper)
+	// that remains after video-container conversion
+	clone.querySelectorAll('.bgl_vid').forEach((el) => { el.remove() })
+
+	// Strip editor-only classes from <figure> elements so output is pure semantic HTML
+	clone.querySelectorAll('figure').forEach((fig) => {
+		fig.classList.remove('image-figure', 'video-figure', 'embed-figure')
+		if (fig.classList.length === 0) { fig.removeAttribute('class') }
+	})
+
+	return clone.innerHTML
+}
+
 // Expose openLinkModal to editor state
 ; (editor.state as any).openLinkModal = openLinkModal
 ; (editor.state as any).showTooltipMessage = showTooltipMessage
@@ -1886,10 +1934,7 @@ function deleteRow() {
 	const tbody = table.querySelector('tbody') || table
 	const rows = tbody.querySelectorAll('tr')
 
-	if (rows.length <= 1) {
-		alert('Cannot delete the last row')
-		return
-	}
+	if (rows.length <= 1) { return }
 
 	row.remove()
 	updateContentWithHistory(doc)
@@ -1958,10 +2003,7 @@ function deleteColumn() {
 
 	// 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
-	}
+	if (firstRow && firstRow.cells.length <= 1) { return }
 
 	// Remove cell from each row at the same index
 	const rows = table.querySelectorAll('tr')
@@ -2029,7 +2071,7 @@ function handleTableContextMenu(event: MouseEvent) {
 
 // Expose debug methods if debug mode is enabled
 const debugMethods = computed(() => editor.state.debug)
-const hasRTL = computed(() => /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(props.modelValue))
+const hasRTL = computed(() => RTL_REGEX.test(props.modelValue))
 
 // Computed property to handle height prop
 const editorHeight = computed(() => {
@@ -2047,17 +2089,11 @@ onUnmounted(() => {
 })
 
 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'
@@ -2071,7 +2107,6 @@ function setupTableEditButtons(doc: Document) {
 			editBtn.style.userSelect = 'none'
 
 			editBtn.addEventListener('click', (e) => {
-				console.log('Edit button clicked!')
 				e.preventDefault()
 				e.stopPropagation()
 				e.stopImmediatePropagation()
@@ -2137,8 +2172,6 @@ function setupTableEditButtons(doc: Document) {
 			table.style.marginBottom = '0'
 
 			table.setAttribute('data-edit-button-added', 'true')
-
-			console.log(`Added edit button to table ${index + 1}`)
 		})
 	}
 
@@ -2362,7 +2395,7 @@ function setupAutoWrapping(doc: Document) {
 			}
 
 			// For RTL text, be more careful about splitting
-			const isRTLContent = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(paragraph.textContent || '')
+			const isRTLContent = RTL_REGEX.test(paragraph.textContent || '')
 
 			// Prevent default and handle manually to avoid browser inconsistencies
 			e.preventDefault()
@@ -2374,14 +2407,6 @@ function setupAutoWrapping(doc: Document) {
 
 			// Debug logging to understand the issue
 			if (props.debug) {
-				console.log('Enter pressed:', {
-					startContainer: range.startContainer,
-					startOffset: range.startOffset,
-					textBeforeCursor,
-					textAfterCursor,
-					paragraphContent: paragraph.textContent,
-					isRTLContent
-				})
 			}
 
 			// Create new paragraph with proper direction
@@ -2459,20 +2484,15 @@ function setupAutoWrapping(doc: Document) {
 					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
@@ -2481,7 +2501,6 @@ function setupAutoWrapping(doc: Document) {
 								listItems.forEach((li) => {
 									if (!li.dir) {
 										li.dir = element.dir
-										console.log('Applied direction to new list item:', li.dir)
 									}
 								})
 							}
@@ -2507,37 +2526,57 @@ function setupAutoWrapping(doc: Document) {
 	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')
 
+		// Resolve media element to edit. Check figure wrappers first (editor-created),
+		// then fall back to bare primitive elements (existing/loaded content).
+		const figure = target.closest('figure') as HTMLElement | null
+		let videoFigure: HTMLElement | null = null
+		let imageFigure: HTMLElement | null = null
+		let embedFigure: HTMLElement | null = null
+
+		if (figure?.querySelector('.video-container, video')) {
+			videoFigure = figure
+		} else if (target.closest('.video-figure')) {
+			videoFigure = target.closest('.video-figure') as HTMLElement
+		} else if (figure?.querySelector('img')) {
+			imageFigure = figure
+		} else if (target.closest('.image-figure')) {
+			imageFigure = target.closest('.image-figure') as HTMLElement
+		} else if (target.tagName === 'IMG') {
+			// Bare <img> not in a figure — pass it directly
+			imageFigure = target
+		} else if (figure?.querySelector('iframe')) {
+			embedFigure = figure
+		} else if (target.closest('.embed-figure')) {
+			embedFigure = target.closest('.embed-figure') as HTMLElement
+		} else if (target.tagName === 'VIDEO') {
+			videoFigure = target
+		} else if (target.tagName === 'IFRAME') {
+			embedFigure = target
+		}
+
+		// Clear previous media selection
+		doc.querySelectorAll('.media-selected').forEach((el) => { el.classList.remove('media-selected') })
+
 		if (table) {
-			// Table clicks are handled only by edit button, not by direct clicks
-			// No action needed for regular table clicks
-		}
-		else if (videoFigure) {
+			// Table clicks handled only by edit button
+		} else if (videoFigure) {
 			e.preventDefault()
 			e.stopPropagation()
-
-			// Open video modal for editing
-			openVideoModal(videoFigure as HTMLElement)
-		}
-		else if (imageFigure) {
+			videoFigure.classList.add('media-selected')
+			openVideoModal(videoFigure)
+		} else if (imageFigure) {
 			e.preventDefault()
 			e.stopPropagation()
-
-			// Open image modal for editing
-			openImageModal(imageFigure as HTMLElement)
-		}
-		else if (embedFigure) {
+			imageFigure.classList.add('media-selected')
+			openImageModal(imageFigure)
+		} else if (embedFigure) {
 			e.preventDefault()
 			e.stopPropagation()
-
-			// Open embed modal for editing
-			openEmbedModal(embedFigure as HTMLElement)
-		}
-		else if (link && link.href) {
+			embedFigure.classList.add('media-selected')
+			openEmbedModal(embedFigure)
+		} else if (link && link.href) {
 			e.preventDefault()
 			e.stopPropagation()
 
@@ -2684,10 +2723,88 @@ async function initEditor() {
 				background: #0056b3;
 			}
 				.richtext-editor-content blockquote {
-   				 padding: 8px !important;
-    background: #f4f4f4 !important;
-	border-inline-start: 4px solid #ccc !important;
-}
+				padding: 8px !important;
+				background: #f4f4f4 !important;
+				border-inline-start: 4px solid #ccc !important;
+			}
+
+			/* ── Media editing affordances ─────────────────────────────── */
+			/* Figures wrapping media: ::after badge + hover ring.
+			   No display override — <figure> is already block, <img>/<video> keep their natural display. */
+			figure:has(img),
+			figure:has(video),
+			figure:has(iframe),
+			figure.image-figure,
+			figure.video-figure,
+			figure.embed-figure {
+				position: relative;
+				cursor: pointer;
+			}
+
+			figure:has(img)::after,
+			figure:has(video)::after,
+			figure:has(iframe)::after,
+			figure.image-figure::after,
+			figure.video-figure::after,
+			figure.embed-figure::after {
+				content: '✎ Edit';
+				position: absolute;
+				top: 8px;
+				right: 8px;
+				background: rgba(0, 0, 0, 0.72);
+				color: #fff;
+				padding: 4px 10px;
+				border-radius: 4px;
+				font-size: 12px;
+				font-family: sans-serif;
+				line-height: 1.5;
+				opacity: 0;
+				transition: opacity 0.18s ease;
+				pointer-events: none;
+			}
+
+			figure:has(img):hover::after,
+			figure:has(video):hover::after,
+			figure:has(iframe):hover::after,
+			figure.image-figure:hover::after,
+			figure.video-figure:hover::after,
+			figure.embed-figure:hover::after {
+				opacity: 1;
+			}
+
+			figure:has(img):hover,
+			figure:has(video):hover,
+			figure:has(iframe):hover,
+			figure.image-figure:hover,
+			figure.video-figure:hover,
+			figure.embed-figure:hover {
+				outline: 2px solid rgba(0, 123, 204, 0.45);
+				outline-offset: 2px;
+			}
+
+			/* Bare <img> and <video> not inside a <figure> — show outline + pointer only.
+			   ::after is not available on replaced/void elements. */
+			img:not(figure img),
+			video:not(figure video) {
+				cursor: pointer;
+			}
+
+			img:not(figure img):hover,
+			video:not(figure video):hover {
+				outline: 2px solid rgba(0, 123, 204, 0.45);
+				outline-offset: 2px;
+			}
+
+			/* Selected state — applied via JS on click, stripped by getCleanHTML() */
+			.media-selected {
+				outline: 2px solid #007bff !important;
+				outline-offset: 2px !important;
+			}
+
+			.media-selected::after {
+				opacity: 1 !important;
+				background: #007bff !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 = `
@@ -2741,13 +2858,10 @@ async function initEditor() {
 
 		// 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
@@ -2757,7 +2871,6 @@ async function initEditor() {
 					const listItem = li as HTMLElement
 					if (!listItem.dir) {
 						listItem.dir = htmlElement.dir
-						console.log('Applied direction to list item:', listItem.dir)
 					}
 				})
 			}
@@ -2889,9 +3002,7 @@ async function initEditor() {
 		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
 		updateContentWithHistory(doc)
@@ -2936,16 +3047,7 @@ async function initEditor() {
 
 // Function to update CSS colors in the iframe
 function updateIframeColors() {
-	console.log('🎯 updateIframeColors called', {
-		hasIframe: !!iframe.value,
-		hasContentDocument: !!iframe.value?.contentDocument,
-		hasInitialized: hasInitialized.value
-	})
-
-	if (!iframe.value?.contentDocument || iframe.value.contentDocument === null) {
-		console.warn('❌ No iframe or contentDocument')
-		return
-	}
+	if (!iframe.value?.contentDocument) { return }
 
 	const doc = iframe.value.contentDocument
 	let styleElement = doc.getElementById('editor-theme-styles') as HTMLStyleElement
@@ -2954,7 +3056,6 @@ function updateIframeColors() {
 		styleElement = doc.createElement('style')
 		styleElement.id = 'editor-theme-styles'
 		doc.head.appendChild(styleElement)
-		console.log('✅ Created new style element')
 	}
 
 	const fontSize = props.fontSize ? (typeof props.fontSize === 'number' ? `${props.fontSize}px` : props.fontSize) : '16px'
@@ -2977,45 +3078,32 @@ function updateIframeColors() {
 	`
 
 	styleElement.textContent = css
-	console.log('🎨 Updated iframe colors:', {
-		inputColor: currentInputColor.value,
-		textColor: currentTextColor.value,
-		css: css.trim()
-	})
 }
 
 // Watch for theme changes and update iframe colors
-watch([currentInputColor, currentTextColor], (newValues, oldValues) => {
-	console.log('🔄 Colors changed:', {
-		newValues,
-		oldValues,
-		hasInitialized: hasInitialized.value
-	})
-
+watch([currentInputColor, currentTextColor], () => {
 	if (hasInitialized.value) {
 		updateIframeColors()
 	}
 }, { flush: 'post' })
 
-// Reset initialization state when content changes significantly
+// Reset initialization state when content changes significantly.
+// Compare incoming value against the CLEAN output (not raw DOM innerHTML) to avoid
+// false positives caused by editor chrome (table wrappers, edit buttons, etc.)
 watch(() => props.modelValue, (newValue, oldValue) => {
-	if (newValue !== editor.state.content) {
-		// Only reset if content change is significant (not just minor edits)
+	const cleanCurrent = editor.state.doc ? getCleanHTML(editor.state.doc ?? null) : ''
+	if (newValue !== cleanCurrent) {
 		if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
 			hasInitialized.value = false
-			// 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)
@@ -3025,11 +3113,12 @@ watch(() => props.modelValue, (newValue, oldValue) => {
 	}
 })
 
-watch(() => editor.state.content, (newValue) => {
+// Always emit clean, vanilla HTML — never the editor's internal DOM format
+watch(() => editor.state.content, () => {
 	if (editor.state.doc?.body) {
 		editor.state.doc.body.dir = hasRTL.value ? 'rtl' : 'ltr'
 	}
-	emit('update:modelValue', newValue)
+	emit('update:modelValue', getCleanHTML(editor.state.doc ?? null))
 })
 
 // Watch table alignment changes and update the table immediately
@@ -3076,6 +3165,16 @@ defineExpose({
 	editor,
 	commands
 })
+
+const imgTransform = computed({
+	get: () => {
+		return imageForm.value.src
+	},
+	set: (newVal: string) => {
+		if (!newVal || imageForm.value.src === newVal) return
+		imageForm.value.src = pathKeyToURL(newVal)
+	}
+})
 </script>
 
 <template>
@@ -3270,6 +3369,7 @@ defineExpose({
 		v-model:visible="showImageModal" :title="pendingImageData?.existingImage ? 'Edit Image' : 'Insert Image'"
 		width="500"
 	>
+		<UploadInput v-model="imgTransform" label="Image" type="image" @keydown.enter="submitImage" />
 		<TextInput
 			v-model="imageForm.src" label="Image URL" type="url" placeholder="https://example.com/image.jpg"
 			@keydown.enter="submitImage"
@@ -3334,7 +3434,10 @@ defineExpose({
 		</template>
 	</Modal>
 	<!-- Video Modal -->
-	<Modal v-model:visible="showVideoModal" title="Insert Video" width="500">
+	<Modal
+		v-model:visible="showVideoModal" :title="pendingVideoData?.existingVideo ? 'Edit Video' : 'Insert Video'"
+		width="500"
+	>
 		<div class="grid gap-0">
 			<TextInput
 				v-model="videoForm.src" label="Video URL or Embed Code" type="url"
@@ -3578,6 +3681,7 @@ defineExpose({
 	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;