@bagelink/vue 1.19.1 → 1.20.1

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

@@ -4,6 +4,10 @@ import type { CustomToolbarButton, RichTextExtension, RichTextToolbarApi, Toolba
 import type { DropdownItem } from '../../../../index'
 import { CodeEditor, copyText, Btn, ContextMenu, Dialog, Divider, BglVideo, Icon, Card, ColorInput, pathKeyToURL, usePointerSession } from '../../../../index'
 import { watch, onUnmounted, onBeforeUnmount, onMounted, ref, computed, useAttrs, inject } from 'vue'
+import { getRichTextMetrics } from './utils/contentMetrics'
+import { insertPastedContent } from './utils/sanitizePaste'
+import { buildImageFigure, createDefaultImageData, hydrateImageFigures, readImageData } from './utils/image'
+import { buildVideoFigure, createDefaultVideoData, hydrateVideoFigures, readVideoData, serializeVideoFigures } from './utils/video'
 import CheckInput from '../CheckInput.vue'
 import NumberInput from '../NumberInput.vue'
 import SelectBtn from '../SelectBtn.vue'
@@ -20,6 +24,7 @@ import {
 	deleteColumn as tableDeleteColumn,
 	deleteRow as tableDeleteRow,
 	findCellCoords,
+	focusTableCell,
 	insertColumn as tableInsertColumn,
 	mergeCells as tableMergeCells,
 	moveColumn as tableMoveColumn,
@@ -67,11 +72,17 @@ const props = defineProps<{
 	textColor?: string
 	// Font size
 	fontSize?: number | string
+	// Optional document metrics and limits
+	showCounter?: boolean
+	maxLength?: number
+	maxWords?: number
 	// Field-specific CSS injected into the editor iframe.
 	contentStyles?: string
+	// Optional image uploader. Must resolve to a persistent path key or URL.
+	uploadImage?: (file: File) => Promise<string>
 } & BagelInputShellProps>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'limit-exceeded'])
 
 const { shellClass, shellStyle } = useBagelInputShell(props)
 const extensionRegistry = inject(RICH_TEXT_EXTENSION_REGISTRY_KEY, new Map())
@@ -107,6 +118,35 @@ const effectiveContentStyles = computed(() => [
 	...resolvedExtensions.value.map(extension => extension.contentStyles),
 ].filter(Boolean).join('\n'))
 
+function collectDocumentColors(property: 'color' | 'background-color'): string[] {
+	if (!normalizedModelValue.value || typeof document === 'undefined') { return [] }
+	const parsed = new DOMParser().parseFromString(normalizedModelValue.value, 'text/html')
+	const colors = new Set<string>()
+
+	parsed.body.querySelectorAll<HTMLElement>('[style]').forEach((element) => {
+		const value = element.style.getPropertyValue(property).trim()
+		if (value && value !== 'transparent' && value !== 'inherit') {
+			colors.add(value)
+		}
+	})
+
+	if (property === 'background-color') {
+		parsed.body.querySelectorAll<HTMLElement>('[bgcolor]').forEach((element) => {
+			const value = element.getAttribute('bgcolor')?.trim()
+			if (value) {
+				colors.add(value)
+			}
+		})
+	}
+
+	return Array.from(colors).slice(0, 12)
+}
+
+const documentColors = computed(() => Array.from(new Set([
+	...collectDocumentColors('color'),
+	...collectDocumentColors('background-color'),
+])).slice(0, 12))
+
 function updateCustomToolbarStyles() {
 	const { doc } = editor.state
 	if (!doc) return
@@ -146,6 +186,25 @@ const editor = useEditor()
 const isInitializing = ref(false)
 const hasInitialized = ref(false)
 const commands = useCommands(editor.state, editor.state.debug)
+const documentMetrics = computed(() => {
+	void editor.state.content
+	return getRichTextMetrics(normalizedModelValue.value, editor.state.doc)
+})
+const characterCount = computed(() => documentMetrics.value.characters)
+const wordCount = computed(() => documentMetrics.value.words)
+const characterLimitExceeded = computed(() => Boolean(props.maxLength && characterCount.value > props.maxLength))
+const wordLimitExceeded = computed(() => Boolean(props.maxWords && wordCount.value > props.maxWords))
+const hasExceededLimit = computed(() => characterLimitExceeded.value || wordLimitExceeded.value)
+const showDocumentCounter = computed(() => props.showCounter || Boolean(props.maxLength) || Boolean(props.maxWords))
+const counterLabel = computed(() => {
+	const characters = props.maxLength
+		? `${characterCount.value} / ${props.maxLength} characters`
+		: `${characterCount.value} characters`
+	const words = props.maxWords
+		? `${wordCount.value} / ${props.maxWords} words`
+		: `${wordCount.value} words`
+	return `${characters} · ${words}`
+})
 
 function setBlock(tagName: string, className?: string, removeClasses: string[] = []) {
 	const { doc } = editor.state
@@ -355,17 +414,8 @@ let pendingLinkData: {
 
 // Image modal state
 const showImageModal = ref(false)
-const imageForm = ref({
-	src: '',
-	alt: '',
-	width: '',
-	height: '',
-	credit: '',
-	figcaption: false,
-	align: 'full', // full, start, end
-	link: '',
-	linkNewTab: false
-})
+const imageForm = ref(createDefaultImageData())
+const imageUploadError = ref('')
 let pendingImageData: {
 	selection: Selection
 	range: Range
@@ -393,19 +443,7 @@ 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
-})
+const videoForm = ref(createDefaultVideoData())
 let pendingVideoData: {
 	selection: Selection
 	range: Range
@@ -804,6 +842,7 @@ function isValidUrl(url: string): boolean {
 function openImageModal(existingImage: HTMLElement | null = null) {
 	const { doc } = editor.state
 	if (!doc) { return }
+	imageUploadError.value = ''
 
 	// Get current selection for new images
 	if (!existingImage) {
@@ -821,51 +860,18 @@ function openImageModal(existingImage: HTMLElement | null = null) {
 	}
 
 	if (existingImage) {
-		// 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') || ''
-
-		// Read alignment from the figure (or bare img) data-align attribute
-		const alignSource = existingImage.tagName === 'IMG' ? img : existingImage
-		const align = alignSource?.getAttribute('data-align') || 'full'
-
-		// Read link from the anchor wrapping the image (if any)
-		const anchor = img?.closest('a')
-		const link = anchor?.getAttribute('href') || ''
-		const linkNewTab = anchor?.getAttribute('target') === '_blank'
-
-		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,
-			figcaption: !!figcaption,
-			align,
-			link,
-			linkNewTab
-		}
+		imageForm.value = readImageData(existingImage)
 	} else {
-		// Reset form for new image
-		imageForm.value = {
-			src: '',
-			alt: '',
-			width: '',
-			height: '',
-			credit: '',
-			figcaption: false,
-			align: 'full',
-			link: '',
-			linkNewTab: false
-		}
+		imageForm.value = createDefaultImageData()
 	}
 
 	showImageModal.value = true
 }
 
+function handleImageUploadError() {
+	imageUploadError.value = 'Image upload failed. Please try again or paste an image URL.'
+}
+
 // Function to submit image
 function submitImage() {
 	if (!imageForm.value.src || !pendingImageData) { return }
@@ -874,124 +880,9 @@ function submitImage() {
 	if (!doc) { return }
 
 	const { existingImage } = pendingImageData
+	const elementToUpdate = buildImageFigure(doc, imageForm.value, existingImage)
 
-	// 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 {
-		// Floated images default to a partial width so text can wrap alongside;
-		// full-width images fill the container.
-		img.style.width = (imageForm.value.align === 'start' || imageForm.value.align === 'end') ? '45%' : '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 (using safe DOM nodes)
-	function createFigcaption() {
-		const figcaption = doc!.createElement('figcaption')
-
-		if (imageForm.value.figcaption && imageForm.value.alt) {
-			const altStrong = doc!.createElement('strong')
-			altStrong.className = 'alt-text'
-			altStrong.textContent = imageForm.value.alt
-			figcaption.appendChild(altStrong)
-		}
-
-		if (imageForm.value.credit) {
-			if (figcaption.childNodes.length > 0) {
-				figcaption.appendChild(doc!.createTextNode(' • '))
-			}
-			const creditSpan = doc!.createElement('span')
-			creditSpan.className = 'photo-credit'
-			creditSpan.textContent = imageForm.value.credit
-			figcaption.appendChild(creditSpan)
-		}
-
-		return figcaption
-	}
-
-	// Wrap the image in an anchor when a link is provided, otherwise return the bare image
-	function createImageContent(): HTMLElement {
-		const link = imageForm.value.link?.trim()
-		if (!link) { return img }
-
-		const anchor = doc!.createElement('a')
-		anchor.setAttribute('href', link)
-		if (imageForm.value.linkNewTab) {
-			anchor.setAttribute('target', '_blank')
-			anchor.setAttribute('rel', 'noopener noreferrer')
-		}
-		anchor.appendChild(img)
-		return anchor
-	}
-
-	// 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(createImageContent())
-
-			// 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(createImageContent())
-
-			// 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(createImageContent())
-
-		// 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
-
+	if (!existingImage) {
 		// Insert new element
 		const { selection, range } = pendingImageData
 		range.collapse(false)
@@ -1004,12 +895,6 @@ function submitImage() {
 		selection.addRange(range)
 	}
 
-	// Apply alignment to the figure wrapper (full = full width, start/end = float)
-	const align = imageForm.value.align || 'full'
-	elementToUpdate.classList.remove('align-full', 'align-start', 'align-end')
-	elementToUpdate.classList.add(`align-${align}`)
-	elementToUpdate.setAttribute('data-align', align)
-
 	updateContentWithHistory(doc)
 	showImageModal.value = false
 	pendingImageData = null
@@ -1107,6 +992,7 @@ function submitEmbed() {
 	iframe.frameBorder = '0'
 	iframe.setAttribute('allowfullscreen', '')
 	iframe.setAttribute('data-media-type', 'embed')
+	iframe.title = embedForm.value.alt || 'Embedded content'
 	iframe.className = 'embed-iframe'
 
 	// Set width and height - always set them
@@ -1179,43 +1065,9 @@ function openVideoModal(existingVideo: HTMLElement | null = null) {
 	}
 
 	if (existingVideo) {
-		// 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')
-				|| 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')
-		}
+		videoForm.value = readVideoData(existingVideo)
 	} 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
-		}
+		videoForm.value = createDefaultVideoData()
 	}
 
 	showVideoModal.value = true
@@ -1264,133 +1116,7 @@ function submitVideo() {
 	if (!doc) { return }
 
 	const { existingVideo } = pendingVideoData
-
-	// Calculate aspect ratio
-	let { aspectRatio } = videoForm.value
-	const isCustom = videoForm.value.aspectRatio === 'custom'
-	if (isCustom && videoForm.value.customWidth && videoForm.value.customHeight) {
-		aspectRatio = `${videoForm.value.customWidth}:${videoForm.value.customHeight}`
-	}
-
-	// 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)
-	}
+	const figure = buildVideoFigure(doc, videoForm.value, existingVideo)
 
 	// Insert new video or update existing
 	if (!existingVideo) {
@@ -1825,6 +1551,7 @@ function deleteTable() {
 	if (!pendingTableData?.existingTable) { return }
 
 	removeTableElement(pendingTableData.existingTable)
+	updateContentWithHistory(editor.state.doc!)
 	showTableEditor.value = false
 	pendingTableData = null
 }
@@ -1883,6 +1610,11 @@ function getCleanHTML(doc: Document | null): string {
 	clone.querySelectorAll('.media-selected').forEach((el) => { el.classList.remove('media-selected') })
 	clone.querySelectorAll('.table-cell-selected').forEach((el) => { el.classList.remove('table-cell-selected') })
 	clone.querySelectorAll('[data-dir-explicit]').forEach((el) => { el.removeAttribute('data-dir-explicit') })
+	clone.querySelectorAll('figure[data-media-type]').forEach((figure) => {
+		figure.removeAttribute('tabindex')
+		figure.removeAttribute('role')
+		figure.removeAttribute('aria-label')
+	})
 
 	// Unwrap .table-wrapper divs: restore original table margin-based alignment
 	clone.querySelectorAll('.table-wrapper').forEach((wrapper) => {
@@ -1915,79 +1647,7 @@ function getCleanHTML(doc: Document | null): string {
 		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) }
-	})
+	serializeVideoFigures(clone)
 
 	// Strip internal placeholder content from video figures (the bgl_vid wrapper)
 	// that remains after video-container conversion
@@ -2200,11 +1860,12 @@ function setupTableColumnResizing(doc: Document) {
 		table: HTMLTableElement
 		cell: HTMLTableCellElement
 		insertPosition: 'before' | 'after'
+		rowInsertPosition: 'before' | 'after'
 	} | null = null
 
 	const hideAllInlineControls = () => {
 		doc.querySelectorAll<HTMLElement>('.table-inline-controls').forEach((ctrl) => {
-			ctrl.classList.remove('is-visible', 'show-col-add', 'show-col-thumb', 'is-dragging-col')
+			ctrl.classList.remove('is-visible', 'show-col-add', 'show-row-add', 'show-col-thumb', 'is-dragging-col')
 		})
 	}
 
@@ -2269,7 +1930,8 @@ function setupTableColumnResizing(doc: Document) {
 		const cell = target.closest('td, th') as HTMLTableCellElement | null
 		const table = cell?.closest('table') as HTMLTableElement | null
 		const wrapper = table?.closest('.table-wrapper') as HTMLElement | null
-		if (!cell || !table || !wrapper) {
+		const row = cell?.closest('tr') as HTMLTableRowElement | null
+		if (!cell || !table || !wrapper || !row) {
 			hideAllInlineControls()
 			return
 		}
@@ -2277,12 +1939,14 @@ function setupTableColumnResizing(doc: Document) {
 		const controls = wrapper.querySelector<HTMLElement>('.table-inline-controls')
 		const addBtn = controls?.querySelector<HTMLElement>('.table-col-add-btn')
 		const addLine = controls?.querySelector<HTMLElement>('.table-col-add-line')
+		const rowAddBtn = controls?.querySelector<HTMLElement>('.table-row-add-btn')
+		const rowAddLine = controls?.querySelector<HTMLElement>('.table-row-add-line')
 		const thumbBtn = controls?.querySelector<HTMLElement>('.table-col-thumb')
-		if (!controls || !addBtn || !addLine || !thumbBtn) { return }
+		if (!controls || !addBtn || !addLine || !rowAddBtn || !rowAddLine || !thumbBtn) { return }
 
 		doc.querySelectorAll<HTMLElement>('.table-inline-controls').forEach((other) => {
 			if (other !== controls) {
-				other.classList.remove('is-visible', 'show-col-add', 'show-col-thumb', 'is-dragging-col')
+				other.classList.remove('is-visible', 'show-col-add', 'show-row-add', 'show-col-thumb', 'is-dragging-col')
 			}
 		})
 
@@ -2292,6 +1956,8 @@ function setupTableColumnResizing(doc: Document) {
 
 		const tableTop = tableRect.top - wrapperRect.top
 		const tableHeight = tableRect.height
+		const tableLeft = tableRect.left - wrapperRect.left
+		const tableWidth = tableRect.width
 		const cellLeft = cellRect.left - wrapperRect.left
 		const cellRight = cellRect.right - wrapperRect.left
 		const cellCenter = cellLeft + cellRect.width / 2
@@ -2302,18 +1968,29 @@ function setupTableColumnResizing(doc: Document) {
 		const distRight = Math.abs(e.clientX - cellRect.right)
 		const nearLeft = distLeft <= distRight
 		const minEdgeDist = Math.min(distLeft, distRight)
+		const distTop = Math.abs(e.clientY - cellRect.top)
+		const distBottom = Math.abs(e.clientY - cellRect.bottom)
+		const nearTop = distTop <= distBottom
+		const minRowEdgeDist = Math.min(distTop, distBottom)
 		const nearTopBand = (e.clientY - tableRect.top) <= 36
+		const nearInlineStartBand = isRTL
+			? (tableRect.right - e.clientX) <= 36
+			: (e.clientX - tableRect.left) <= 36
+		const isHeaderRow = row.parentElement?.tagName === 'THEAD'
 
 		// In LTR: left edge inserts 'before', right edge inserts 'after'. In RTL: reversed.
 		const insertPosition: 'before' | 'after' = nearLeft
 			? (isRTL ? 'after' : 'before')
 			: (isRTL ? 'before' : 'after')
+		const rowInsertPosition: 'before' | 'after' = isHeaderRow ? 'after' : (nearTop ? 'before' : 'after')
 		const boundaryX = nearLeft ? cellLeft : cellRight
+		const boundaryY = (isHeaderRow ? row.getBoundingClientRect().bottom : (nearTop ? cellRect.top : cellRect.bottom)) - wrapperRect.top
 
 		activeHoverState = {
 			table,
 			cell,
 			insertPosition,
+			rowInsertPosition,
 		}
 
 		controls.classList.add('is-visible', 'show-col-thumb')
@@ -2331,6 +2008,18 @@ function setupTableColumnResizing(doc: Document) {
 		} else {
 			controls.classList.remove('show-col-add')
 		}
+
+		// Mirror the column affordance on horizontal row boundaries.
+		if (minRowEdgeDist <= ADD_TRIGGER_ZONE || nearInlineStartBand) {
+			rowAddBtn.style.left = `${isRTL ? tableLeft + tableWidth : tableLeft}px`
+			rowAddBtn.style.top = `${boundaryY}px`
+			rowAddLine.style.left = `${tableLeft}px`
+			rowAddLine.style.top = `${boundaryY}px`
+			rowAddLine.style.width = `${tableWidth}px`
+			controls.classList.add('show-row-add')
+		} else {
+			controls.classList.remove('show-row-add')
+		}
 	}
 
 	const onHoverPointerMove = (e: PointerEvent) => {
@@ -2348,7 +2037,32 @@ function setupTableColumnResizing(doc: Document) {
 	const onPointerDown = (e: PointerEvent) => {
 		const target = e.target as HTMLElement | null
 
-		// 1. Handle native inline '+' (Add Column) click
+		// 1. Handle native inline '+' (Add Row) click
+		const addRowBtn = target?.closest('.table-row-add-btn') as HTMLElement | null
+		if (addRowBtn) {
+			e.preventDefault()
+			e.stopPropagation()
+			e.stopImmediatePropagation()
+			const wrapper = addRowBtn.closest('.table-wrapper')
+			const table = wrapper?.querySelector('table') as HTMLTableElement | null
+			const fallbackCell = table?.querySelector('tbody td, td, th') as HTMLTableCellElement | null
+			const targetCell = (activeHoverState?.table === table && activeHoverState?.cell.isConnected)
+				? activeHoverState.cell
+				: (contextMenuCell.value?.closest('table') === table ? contextMenuCell.value : fallbackCell)
+			const pos = activeHoverState?.table === table
+				? activeHoverState.rowInsertPosition
+				: ((addRowBtn.getAttribute('data-insert-pos') as 'before' | 'after') || 'after')
+
+			if (targetCell) {
+				const newRow = tableAddRow(pos, editor.state.range, doc, targetCell)
+				const firstNewCell = newRow?.querySelector('td, th') as HTMLTableCellElement | null
+				if (firstNewCell) { focusTableCell(firstNewCell, true) }
+				updateContentWithHistory(doc)
+			}
+			return
+		}
+
+		// 2. Handle native inline '+' (Add Column) click
 		const addColBtn = target?.closest('.table-col-add-btn') as HTMLElement | null
 		if (addColBtn) {
 			e.preventDefault()
@@ -2371,7 +2085,7 @@ function setupTableColumnResizing(doc: Document) {
 			return
 		}
 
-		// 2. Handle native inline '⋯' (Column Thumb: drag via usePointerSession to reorder, or click to open ContextMenu)
+		// 3. Handle native inline '⋯' (Column Thumb: drag via usePointerSession to reorder, or click to open ContextMenu)
 		const thumbColBtn = target?.closest('.table-col-thumb') as HTMLElement | null
 		if (thumbColBtn) {
 			e.stopPropagation()
@@ -2469,7 +2183,7 @@ function setupTableColumnResizing(doc: Document) {
 			return
 		}
 
-		// 3. Handle column border drag-resizing via usePointerSession (with Escape rollback)
+		// 4. Handle column border drag-resizing via usePointerSession (with Escape rollback)
 		const hovered = getHoveredResizeCell(e)
 		if (!hovered || !hovered.cell.nextElementSibling) { return }
 
@@ -2578,6 +2292,18 @@ function setupTableEditButtons(doc: Document) {
 		addBtn.setAttribute('contenteditable', 'false')
 		addBtn.setAttribute('tabindex', '-1')
 
+		const rowAddLine = doc.createElement('span')
+		rowAddLine.className = 'table-row-add-line'
+		rowAddLine.setAttribute('contenteditable', 'false')
+
+		const rowAddBtn = doc.createElement('span')
+		rowAddBtn.className = 'table-row-add-btn'
+		rowAddBtn.textContent = '+'
+		rowAddBtn.title = 'Insert row here'
+		rowAddBtn.setAttribute('aria-label', 'Insert row here')
+		rowAddBtn.setAttribute('contenteditable', 'false')
+		rowAddBtn.setAttribute('tabindex', '-1')
+
 		const thumbBtn = doc.createElement('span')
 		thumbBtn.className = 'table-col-thumb'
 		thumbBtn.textContent = '⋯'
@@ -2588,6 +2314,8 @@ function setupTableEditButtons(doc: Document) {
 
 		controls.appendChild(addLine)
 		controls.appendChild(addBtn)
+		controls.appendChild(rowAddLine)
+		controls.appendChild(rowAddBtn)
 		controls.appendChild(thumbBtn)
 		return controls
 	}
@@ -2799,6 +2527,24 @@ function setupAutoWrapping(doc: Document) {
 		}
 	}
 
+	doc.addEventListener('paste', (event) => {
+		const clipboard = event.clipboardData
+		if (!clipboard) { return }
+
+		const selection = doc.getSelection()
+		if (!selection || !selection.rangeCount) { return }
+
+		const pastedHtml = clipboard.getData('text/html')
+		const pastedText = clipboard.getData('text/plain')
+		if (!pastedHtml && !pastedText) { return }
+
+		event.preventDefault()
+		if (!insertPastedContent(doc, selection, { html: pastedHtml, text: pastedText })) { return }
+
+		normalizeContent()
+		updateContentWithHistory(doc)
+	})
+
 	// Handle input events
 	doc.addEventListener('input', (e) => {
 		const inputEvent = e as InputEvent
@@ -2975,9 +2721,7 @@ function setupAutoWrapping(doc: Document) {
 		subtree: true
 	})
 
-	// Handle clicks on links to open link modal
-	doc.addEventListener('click', (e) => {
-		const target = e.target as HTMLElement
+	function openMediaFromTarget(target: HTMLElement, event?: Event): boolean {
 		const link = target.closest('a')
 		const table = target.closest('table')
 
@@ -3015,27 +2759,30 @@ function setupAutoWrapping(doc: Document) {
 		if (table) {
 			// Table clicks handled only by edit button
 		} else if (videoFigure) {
-			e.preventDefault()
-			e.stopPropagation()
+			event?.preventDefault()
+			event?.stopPropagation()
 			videoFigure.classList.add('media-selected')
 			openVideoModal(videoFigure)
+			return true
 		} else if (imageFigure) {
-			e.preventDefault()
-			e.stopPropagation()
+			event?.preventDefault()
+			event?.stopPropagation()
 			imageFigure.classList.add('media-selected')
 			openImageModal(imageFigure)
+			return true
 		} else if (embedFigure) {
-			e.preventDefault()
-			e.stopPropagation()
+			event?.preventDefault()
+			event?.stopPropagation()
 			embedFigure.classList.add('media-selected')
 			openEmbedModal(embedFigure)
+			return true
 		} else if (link && link.href) {
-			e.preventDefault()
-			e.stopPropagation()
+			event?.preventDefault()
+			event?.stopPropagation()
 
 			// Get current selection
 			const selection = doc.getSelection()
-			if (!selection) { return }
+			if (!selection) { return false }
 
 			// Create a range that selects the entire link
 			const range = doc.createRange()
@@ -3056,7 +2803,21 @@ function setupAutoWrapping(doc: Document) {
 			}
 
 			showLinkModal.value = true
+			return true
 		}
+		return false
+	}
+
+	// Handle clicks on links and media to open their edit modals
+	doc.addEventListener('click', (e) => {
+		openMediaFromTarget(e.target as HTMLElement, e)
+	})
+
+	doc.addEventListener('keydown', (e) => {
+		if (e.key !== 'Enter' && e.key !== ' ') { return }
+		const target = e.target as HTMLElement
+		if (!target.matches('figure[data-media-type="image"], figure[data-media-type="video"]')) { return }
+		openMediaFromTarget(target, e)
 	})
 
 	// Handle focus to remove placeholder when user starts interacting
@@ -3166,7 +2927,7 @@ async function initEditor() {
 			
 			/* Ensure all text elements inherit the theme color */
 			p, h1, h2, h3, h4, h5, h6, div, span, li {
-				color: inherit !important;
+				color: inherit;
 			}
 			table {
 				border-collapse: collapse;
@@ -3188,12 +2949,12 @@ async function initEditor() {
 			/* Table edit button styles */
 			.table-edit-btn {
 				position: absolute;
-				top: -8px;
+				bottom: -8px;
 				right: -8px;
-				background: #000;
+				background: rgba(0, 0, 0, 0.72);
 				color: #fff !important;
 				border: 1px solid #fff;
-				border-radius: 4px;
+				border-radius: 6px;
 				padding: 4px 8px;
 				font-size: 12px;
 				cursor: pointer;
@@ -3248,6 +3009,7 @@ async function initEditor() {
 			}
 
 			.table-col-add-btn,
+			.table-row-add-btn,
 			.table-col-thumb {
 				position: absolute;
 				display: flex;
@@ -3264,7 +3026,8 @@ async function initEditor() {
 				transition: opacity 0.14s ease, transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease, visibility 0.14s ease;
 			}
 
-			.table-col-add-btn {
+			.table-col-add-btn,
+			.table-row-add-btn {
 				width: 20px;
 				height: 20px;
 				border-radius: 999px;
@@ -3275,16 +3038,18 @@ async function initEditor() {
 				cursor: pointer;
 				box-shadow: 0 2px 6px rgba(0, 123, 255, 0.35);
 				z-index: 98;
+				padding-bottom: 2px;
 			}
 
-			.table-col-add-btn:hover {
+			.table-col-add-btn:hover,
+			.table-row-add-btn:hover {
 				background: #0056b3;
 				transform: translate(-50%, -50%) scale(1.08) !important;
 			}
 
-			.table-col-add-line {
+			.table-col-add-line,
+			.table-row-add-line {
 				position: absolute;
-				width: 2px;
 				background: #007bff;
 				pointer-events: none;
 				opacity: 0;
@@ -3294,6 +3059,15 @@ async function initEditor() {
 				z-index: 94;
 			}
 
+			.table-col-add-line {
+				width: 2px;
+			}
+
+			.table-row-add-line {
+				height: 2px;
+				transform: translateY(-50%);
+			}
+
 			.table-col-thumb {
 				width: 28px;
 				height: 14px;
@@ -3323,19 +3097,22 @@ async function initEditor() {
 				border-color: #0056b3;
 			}
 
-			.table-wrapper:hover .table-inline-controls.is-visible.show-col-add .table-col-add-btn {
+			.table-wrapper:hover .table-inline-controls.is-visible.show-col-add .table-col-add-btn,
+			.table-wrapper:hover .table-inline-controls.is-visible.show-row-add .table-row-add-btn {
 				opacity: 1;
 				visibility: visible;
 				transform: translate(-50%, -50%) scale(1);
 			}
 
 			.table-wrapper:hover .table-inline-controls.is-visible.show-col-add .table-col-add-line,
+			.table-wrapper:hover .table-inline-controls.is-visible.show-row-add .table-row-add-line,
 			.table-inline-controls.is-dragging-col .table-col-add-line {
 				opacity: 0.45;
 				visibility: visible;
 			}
 
 			.table-wrapper:hover .table-inline-controls.is-visible.show-col-add:has(.table-col-add-btn:hover) .table-col-add-line,
+			.table-wrapper:hover .table-inline-controls.is-visible.show-row-add:has(.table-row-add-btn:hover) .table-row-add-line,
 			.table-inline-controls.is-dragging-col .table-col-add-line {
 				opacity: 0.9;
 				visibility: visible;
@@ -3354,6 +3131,55 @@ async function initEditor() {
 			}
 
 			/* ── Media editing affordances ─────────────────────────────── */
+			figure.video-figure {
+				box-sizing: border-box;
+				width: 100%;
+				max-width: 100%;
+				margin: 2rem 0;
+				text-align: center;
+			}
+
+			figure.video-figure .video-container,
+			figure.video-figure .bgl_vid,
+			figure.video-figure .video-placeholder {
+				box-sizing: border-box;
+				width: 100%;
+				max-width: 100%;
+			}
+
+			figure.video-figure .video-placeholder {
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				overflow: hidden;
+				min-height: 50px;
+				background: #f4f4f4;
+				border-radius: 8px;
+			}
+
+			figure.video-figure .video-thumbnail {
+				position: absolute;
+				inset: 0;
+				display: block;
+				width: 100%;
+				height: 100%;
+				max-width: 100%;
+				object-fit: cover;
+			}
+
+			figure.video-figure .video-overlay {
+				position: absolute;
+				inset: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-direction: column;
+				background: rgba(0, 0, 0, 0.25);
+				color: #fff;
+			}
+
 			/* Figures wrapping media: ::after badge + hover ring.
 			   No display override — <figure> is already block, <img>/<video> keep their natural display. */
 			figure:has(img),
@@ -3447,6 +3273,25 @@ async function initEditor() {
 				width: 100%;
 			}
 
+			figure.video-figure.align-start,
+			figure.video-figure.align-end {
+				max-width: 50%;
+			}
+
+			figure.video-figure .video-container {
+				width: 100%;
+			}
+
+			@media (max-width: 600px) {
+				figure.video-figure.align-start,
+				figure.video-figure.align-end {
+					float: none;
+					width: 100% !important;
+					max-width: 100%;
+					margin-inline: 0;
+				}
+			}
+
 			/* Linked images: the wrapping <a> should behave like the image block.
 			   In the editor, disable navigation so clicks open the edit modal. */
 			figure.image-figure > a {
@@ -3503,6 +3348,8 @@ async function initEditor() {
 
 		if (normalizedModelValue.value) {
 			doc.body.innerHTML = normalizedModelValue.value
+			hydrateVideoFigures(doc.body)
+			hydrateImageFigures(doc.body)
 		} else if (props.placeholder) {
 			const placeholderEl = doc.createElement('p')
 			placeholderEl.className = 'placeholder'
@@ -3764,10 +3611,12 @@ function updateIframeColors() {
 			font-family: ${currentFontFamily.value} !important;
 		}
 		
-		/* Ensure all text elements inherit the color and font size */
+		/* Body copy inherits the configured base size; headings keep semantic sizes. */
+		p, div, li {
+			font-size: inherit;
+		}
 		p, h1, h2, h3, h4, h5, h6, div, span, li {
-			color: inherit !important;
-			font-size: inherit !important;
+			color: inherit;
 		}
 			${effectiveContentStyles.value}
 	`
@@ -3808,6 +3657,8 @@ watch(normalizedModelValue, (newValue) => {
 		}
 	} else {
 		doc.body.innerHTML = newValue
+		hydrateVideoFigures(doc.body)
+		hydrateImageFigures(doc.body)
 	}
 
 	detectAndSetDirection()
@@ -3839,6 +3690,16 @@ watch(() => editor.state.content, () => {
 	emit('update:modelValue', getCleanHTML(editor.state.doc ?? null))
 })
 
+watch(hasExceededLimit, (exceeded) => {
+	if (!exceeded) { return }
+	emit('limit-exceeded', {
+		characters: characterCount.value,
+		words: wordCount.value,
+		maxLength: props.maxLength,
+		maxWords: props.maxWords,
+	})
+})
+
 // Watch table alignment changes and update the table immediately
 watch(() => tableForm.value.alignment, (newAlignment) => {
 	if (pendingTableData?.existingTable) {
@@ -3904,6 +3765,7 @@ const imgTransform = computed({
 				: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"
+				:document-colors="documentColors"
 				@action="commands.execute"
 			>
 				<template #end>
@@ -3926,6 +3788,17 @@ const imgTransform = computed({
 					</slot>
 				</template>
 			</EditorToolbar>
+			<div
+				v-if="showDocumentCounter"
+				class="flex space-between txt10 pb-025"
+				:class="hasExceededLimit ? 'color-red' : 'color-gray'"
+				role="status"
+				aria-live="polite"
+			>
+				<span>{{ characterCount }}<template v-if="maxLength"> / {{ maxLength }}</template> characters</span>
+				<span>{{ wordCount }}<template v-if="maxWords"> / {{ maxWords }}</template> words</span>
+				<span class="hide">{{ counterLabel }}</span>
+			</div>
 			<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
 				<div
 					class="content-area radius-05"
@@ -4037,7 +3910,15 @@ const imgTransform = computed({
 		width="l" @update:open="showImageModal = $event"
 	>
 		<div class="image-dialog-layout">
-			<UploadInput v-model="imgTransform" label="Image" type="image" @keydown.enter="submitImage" />
+			<div>
+				<UploadInput
+					v-model="imgTransform" label="Image" type="image" accept="image/*" :upload="uploadImage"
+					@add-file-start="imageUploadError = ''" @upload-error="handleImageUploadError" @keydown.enter="submitImage"
+				/>
+				<p v-if="imageUploadError" class="color-red txt12 m-0" role="alert">
+					{{ imageUploadError }}
+				</p>
+			</div>
 			<div class="flex flex-column gap-05 min-w-0">
 				<TextInput
 					v-model="imageForm.src" label="Image URL" type="url" placeholder="https://example.com/image.jpg"
@@ -4143,6 +4024,16 @@ const imgTransform = computed({
 				help="Examples: 100%, 500px, 50vw, 300"
 			/>
 
+			<SelectBtn
+				v-model="videoForm.align"
+				label="Video alignment"
+				:options="[
+					{ value: 'full', label: 'Full width', icon: 'fit_screen' },
+					{ value: 'start', label: 'Align start', icon: 'align_horizontal_left' },
+					{ value: 'end', label: 'Align end', icon: 'align_horizontal_right' },
+				]"
+			/>
+
 			<SelectInput
 				v-model="videoForm.aspectRatio" label="Aspect Ratio" :options="[
 					{ value: '16:9', label: '16:9 (Standard)' },
@@ -4154,12 +4045,12 @@ const imgTransform = computed({
 				]"
 			/>
 
-			<div v-if="videoForm.aspectRatio === 'custom'" class="grid grid-wrap-2 gap-05">
-				<TextInput v-model="videoForm.customWidth" label="Width ratio" placeholder="16" type="number" />
-				<TextInput v-model="videoForm.customHeight" label="Height ratio" placeholder="9" type="number" />
+			<div v-if="videoForm.aspectRatio === 'custom'" class="grid grid-wrap-2 gap-05 m_gap-05">
+				<TextInput v-model="videoForm.customWidth" class="m_grid-span-1" label="Width ratio" placeholder="16" type="number" />
+				<TextInput v-model="videoForm.customHeight" class="m_grid-span-1" label="Height ratio" placeholder="9" type="number" />
 			</div>
 
-			<div class="grid grid-wrap-2 gap-05 py-1">
+			<div class="grid grid-wrap-2 gap-05 py-1 m_gap-05 m_py-05">
 				<CheckInput v-model="videoForm.controls" label="Show controls" />
 				<CheckInput v-model="videoForm.autoplay" label="Autoplay" />
 				<CheckInput v-model="videoForm.mute" label="Mute" />
@@ -4187,14 +4078,14 @@ const imgTransform = computed({
 			</Card>
 		</div>
 		<template #footer>
-			<div class="flex gap-05 w-100 ">
-				<Btn value="Cancel" flat thin @click="showVideoModal = false" />
+			<div class="flex gap-05 w-100 m_column">
+				<Btn value="Cancel" flat thin full-width-mobile @click="showVideoModal = false" />
 				<Btn
 					v-if="pendingVideoData?.existingVideo" value="Delete Video" color="red" flat thin icon="delete"
-					@click="deleteVideo"
+					full-width-mobile @click="deleteVideo"
 				/>
 				<Btn
-					value="Insert Video" class="ms-auto" :disabled="!videoForm.src || !isValidVideoUrl(videoForm.src)"
+					:value="pendingVideoData?.existingVideo ? 'Save Video' : 'Insert Video'" class="ms-auto m_ms-0" full-width-mobile :disabled="!videoForm.src || !isValidVideoUrl(videoForm.src)"
 					@click="submitVideo"
 				/>
 			</div>