@bagelink/vue 1.19.1 → 1.20.3

package/src/components/form/inputs/RichText/utils/image.ts

@@ -0,0 +1,136 @@
+export type ImageAlignment = 'full' | 'start' | 'end'
+
+export interface ImageData {
+	src: string
+	alt: string
+	width: string
+	height: string
+	credit: string
+	figcaption: boolean
+	align: ImageAlignment
+	link: string
+	linkNewTab: boolean
+}
+
+export function createDefaultImageData(): ImageData {
+	return {
+		src: '',
+		alt: '',
+		width: '100%',
+		height: '',
+		credit: '',
+		figcaption: false,
+		align: 'full',
+		link: '',
+		linkNewTab: false,
+	}
+}
+
+function toCssDimension(value: string, fallback: string): string {
+	const normalized = value.trim()
+	if (!normalized) { return fallback }
+	return /[%a-z]/i.test(normalized) ? normalized : `${normalized}px`
+}
+
+function getImageFigure(element: HTMLElement): HTMLElement {
+	return element.tagName === 'FIGURE'
+		? element
+		: element.closest('figure') as HTMLElement | null
+			|| element.closest('a') as HTMLElement | null
+			|| element
+}
+
+export function readImageData(element: HTMLElement): ImageData {
+	const figure = getImageFigure(element)
+	const image = (figure.matches('img') ? figure : figure.querySelector('img')) as HTMLImageElement | null
+	const anchor = image?.closest('a')
+	const caption = figure.querySelector('figcaption')
+	const alignValue = figure.getAttribute('data-align') || image?.getAttribute('data-align')
+	const align: ImageAlignment = alignValue === 'start' || alignValue === 'end' ? alignValue : 'full'
+
+	return {
+		src: image?.getAttribute('src') || '',
+		alt: image?.getAttribute('alt') || '',
+		width: figure.getAttribute('data-width') || image?.getAttribute('data-width') || figure.style.width || image?.style.width || '100%',
+		height: image?.getAttribute('data-height') || image?.style.height || '',
+		credit: figure.getAttribute('data-credit') || image?.getAttribute('data-credit') || '',
+		figcaption: Boolean(caption?.querySelector('.alt-text') || (caption && !caption.querySelector('.photo-credit'))),
+		align,
+		link: anchor?.getAttribute('href') || '',
+		linkNewTab: anchor?.getAttribute('target') === '_blank',
+	}
+}
+
+function createCaption(doc: Document, data: ImageData): HTMLElement | null {
+	if (!(data.figcaption && data.alt) && !data.credit) { return null }
+	const caption = doc.createElement('figcaption')
+	if (data.figcaption && data.alt) {
+		const alt = doc.createElement('strong')
+		alt.className = 'alt-text'
+		alt.textContent = data.alt
+		caption.appendChild(alt)
+	}
+	if (data.credit) {
+		if (caption.hasChildNodes()) { caption.appendChild(doc.createTextNode(' • ')) }
+		const credit = doc.createElement('span')
+		credit.className = 'photo-credit'
+		credit.textContent = data.credit
+		caption.appendChild(credit)
+	}
+	return caption
+}
+
+export function buildImageFigure(doc: Document, data: ImageData, existing?: HTMLElement | null): HTMLElement {
+	const previous = existing ? getImageFigure(existing) : null
+	const figure = previous?.tagName === 'FIGURE' ? previous : doc.createElement('figure')
+	const normalized = { ...createDefaultImageData(), ...data }
+	const width = normalized.width.trim() || (normalized.align === 'full' ? '100%' : '45%')
+
+	const image = doc.createElement('img')
+	image.src = normalized.src
+	image.alt = normalized.alt
+	image.style.width = '100%'
+	image.style.height = toCssDimension(normalized.height, 'auto')
+	if (normalized.height) { image.setAttribute('data-height', normalized.height) }
+
+	let content: HTMLElement = image
+	if (normalized.link.trim()) {
+		const anchor = doc.createElement('a')
+		anchor.href = normalized.link.trim()
+		if (normalized.linkNewTab) {
+			anchor.target = '_blank'
+			anchor.rel = 'noopener noreferrer'
+		}
+		anchor.appendChild(image)
+		content = anchor
+	}
+
+	figure.replaceChildren(content)
+	const caption = createCaption(doc, normalized)
+	if (caption) { figure.appendChild(caption) }
+
+	figure.classList.remove('align-full', 'align-start', 'align-end')
+	figure.classList.add('image-figure', `align-${normalized.align}`)
+	figure.setAttribute('data-media-type', 'image')
+	figure.setAttribute('data-align', normalized.align)
+	figure.setAttribute('data-width', width)
+	figure.style.width = toCssDimension(width, '100%')
+	if (normalized.credit) { figure.setAttribute('data-credit', normalized.credit) }
+	else { figure.removeAttribute('data-credit') }
+	figure.tabIndex = 0
+	figure.setAttribute('role', 'group')
+	figure.setAttribute('aria-label', normalized.alt ? `Image: ${normalized.alt}` : 'Image')
+
+	if (previous && previous !== figure) { previous.replaceWith(figure) }
+	return figure
+}
+
+export function hydrateImageFigures(root: ParentNode): void {
+	root.querySelectorAll<HTMLElement>('figure[data-media-type="image"], figure:has(img)').forEach((figure) => {
+		figure.classList.add('image-figure')
+		figure.tabIndex = 0
+		figure.setAttribute('role', 'group')
+		const alt = figure.querySelector('img')?.getAttribute('alt')
+		figure.setAttribute('aria-label', alt ? `Image: ${alt}` : 'Image')
+	})
+}

package/src/components/form/inputs/RichText/utils/sanitizePaste.ts

@@ -0,0 +1,110 @@
+const ALLOWED_TAGS = new Set([
+	'A', 'B', 'BLOCKQUOTE', 'BR', 'CODE', 'EM', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
+	'HR', 'I', 'LI', 'OL', 'P', 'PRE', 'S', 'STRIKE', 'STRONG', 'SUB', 'SUP', 'U', 'UL',
+])
+
+function isSafeUrl(value: string): boolean {
+	const normalized = value
+		.replace(/&#(?:x([0-9a-f]+)|(\d+));?/gi, (_match, hex, decimal) =>
+			String.fromCodePoint(Number.parseInt(hex || decimal, hex ? 16 : 10)))
+		.replace(/&(tab|newline);/gi, '')
+		.split('')
+		.filter(character => {
+			const code = character.charCodeAt(0)
+			return code > 32 && !(code >= 127 && code <= 159)
+		})
+		.join('')
+		.trim()
+		.toLowerCase()
+	return !normalized.startsWith('javascript:')
+		&& !normalized.startsWith('data:')
+		&& !normalized.startsWith('vbscript:')
+}
+
+function unwrap(element: Element) {
+	const parent = element.parentNode
+	if (!parent) { return }
+	while (element.firstChild) {
+		parent.insertBefore(element.firstChild, element)
+	}
+	element.remove()
+}
+
+/**
+ * Removes source-specific markup while preserving the semantic document structure
+ * users expect when pasting from websites and document editors.
+ */
+export function sanitizePastedHtml(html: string, doc: Document = document): string {
+	const template = doc.createElement('template')
+	template.innerHTML = html
+
+	template.content.querySelectorAll('script, style, link, meta, object, embed, iframe, form, input, button')
+		.forEach(element => element.remove())
+
+	const elements = Array.from(template.content.querySelectorAll('*'))
+	for (const element of elements) {
+		if (!element.isConnected && !template.content.contains(element)) { continue }
+
+		if (!ALLOWED_TAGS.has(element.tagName)) {
+			unwrap(element)
+			continue
+		}
+
+		const href = element.tagName === 'A' ? element.getAttribute('href')?.trim() : undefined
+		const opensNewTab = element.tagName === 'A' && element.getAttribute('target') === '_blank'
+		for (const attribute of Array.from(element.attributes)) {
+			element.removeAttribute(attribute.name)
+		}
+
+		if (href && isSafeUrl(href)) {
+			element.setAttribute('href', href)
+			if (opensNewTab) {
+				element.setAttribute('target', '_blank')
+				element.setAttribute('rel', 'noopener noreferrer')
+			}
+		}
+	}
+
+	return template.innerHTML
+}
+
+export interface PasteContent {
+	html?: string
+	text?: string
+}
+
+function createPlainTextFragment(doc: Document, text: string): DocumentFragment {
+	const fragment = doc.createDocumentFragment()
+	const lines = text.replace(/\r\n?/g, '\n').split('\n')
+	lines.forEach((line, index) => {
+		if (index > 0) { fragment.appendChild(doc.createElement('br')) }
+		fragment.appendChild(doc.createTextNode(line))
+	})
+	return fragment
+}
+
+/**
+ * Replaces the current selection with sanitized clipboard content and leaves the
+ * caret directly after the inserted content. History remains the caller's concern.
+ */
+export function insertPastedContent(doc: Document, selection: Selection, content: PasteContent): boolean {
+	if (!selection.rangeCount || (!content.html && !content.text)) { return false }
+
+	const range = selection.getRangeAt(0)
+	const fragment = content.html
+		? range.createContextualFragment(sanitizePastedHtml(content.html, doc))
+		: createPlainTextFragment(doc, content.text || '')
+
+	if (!fragment.hasChildNodes()) { return false }
+	range.deleteContents()
+	const lastNode = fragment.lastChild
+	range.insertNode(fragment)
+
+	if (lastNode) {
+		range.setStartAfter(lastNode)
+		range.collapse(true)
+		selection.removeAllRanges()
+		selection.addRange(range)
+	}
+	return true
+}

package/src/components/form/inputs/RichText/utils/selection.ts

@@ -1,4 +1,5 @@
 const ALIGN_BLOCK_SELECTOR = 'p, h1, h2, h3, h4, h5, h6, blockquote, li, td, th'
+const STYLE_BLOCK_SELECTOR = 'p, h1, h2, h3, h4, h5, h6, blockquote, li, td, th'
 
 export const ACTIVE_STYLE_KEYS = [
 	'bold',
@@ -19,6 +20,7 @@ export const ACTIVE_STYLE_KEYS = [
 	'alignCenter',
 	'alignRight',
 	'alignJustify',
+	'tableContext',
 	'textDirection',
 	'ltrDirection',
 	'rtlDirection'
@@ -32,6 +34,20 @@ export function getSelectionRange(state: any) {
 	return state.range
 }
 
+function rangeOverlapsNodeContent(range: Range, node: Node): boolean {
+	const nodeRange = node.ownerDocument?.createRange()
+	if (!nodeRange) { return false }
+	nodeRange.selectNodeContents(node)
+	return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) < 0
+		&& range.compareBoundaryPoints(Range.START_TO_END, nodeRange) > 0
+}
+
+function getSelectedLeafBlocks(doc: Document, range: Range): HTMLElement[] {
+	return Array.from(doc.body.querySelectorAll<HTMLElement>(STYLE_BLOCK_SELECTOR))
+		.filter(block => !block.querySelector(STYLE_BLOCK_SELECTOR))
+		.filter(block => rangeOverlapsNodeContent(range, block))
+}
+
 export function isStyleActive(style: string, doc: Document): boolean {
 	const selection = doc.getSelection()
 	if (!selection || !selection.rangeCount) { return false }
@@ -44,6 +60,21 @@ export function isStyleActive(style: string, doc: Document): boolean {
 
 	if (!parent) { return false }
 
+	const selectedBlocks = range.collapsed ? [] : getSelectedLeafBlocks(doc, range)
+	const blockStyleTags = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote'])
+	if (blockStyleTags.has(style) && selectedBlocks.length > 0) {
+		return selectedBlocks.every(block => block.tagName.toLowerCase() === style)
+	}
+
+	if (style === 'tableContext' && selectedBlocks.length > 0) {
+		return selectedBlocks.every(block => Boolean(block.closest('table')))
+	}
+
+	if ((style === 'orderedList' || style === 'unorderedList') && selectedBlocks.length > 0) {
+		const listTag = style === 'orderedList' ? 'ol' : 'ul'
+		return selectedBlocks.every(block => block.tagName === 'LI' && Boolean(block.closest(listTag)))
+	}
+
 	const checkParent = (element: Element | null, checker: (el: Element) => boolean): boolean => {
 		if (!element || element === doc.body || element === doc.documentElement) { return false }
 		if (checker(element)) { return true }
@@ -100,6 +131,7 @@ export function isStyleActive(style: string, doc: Document): boolean {
 			const block = el.closest(ALIGN_BLOCK_SELECTOR) as HTMLElement | null
 			return block?.style.textAlign === 'justify'
 		},
+		tableContext: el => Boolean(el.closest('table')),
 
 		// Text direction
 		textDirection: (el) => {

package/src/components/form/inputs/RichText/utils/table.ts

@@ -135,18 +135,87 @@ export function syncTableColgroup(table: HTMLTableElement, targetCols?: number)
 	}
 }
 
+const CELL_VISUAL_PROPERTIES = [
+	'background-color',
+	'color',
+	'padding-top',
+	'padding-right',
+	'padding-bottom',
+	'padding-left',
+	'border-top',
+	'border-right',
+	'border-bottom',
+	'border-left',
+	'text-align',
+	'vertical-align',
+	'direction',
+	'font-family',
+	'font-size',
+	'font-style',
+	'font-weight',
+	'line-height',
+	'letter-spacing',
+	'white-space',
+] as const
+
 function copyCellBaseStyle(source: HTMLElement | null | undefined, target: HTMLElement) {
 	if (source) {
-		target.style.padding = source.style.padding || '8px'
-		target.style.border = source.style.border || '1px solid var(--bgl-border-color, #ddd)'
-		if (source.style.backgroundColor) {
-			target.style.backgroundColor = source.style.backgroundColor
+		target.style.cssText = source.style.cssText
+		// Column widths are recalculated for the whole table after insertion.
+		target.style.removeProperty('width')
+
+		// Preserve styles supplied by the editor stylesheet or a consumer class, not
+		// only inline declarations. Temporarily ignore editor-only selection styling.
+		const wasSelected = source.classList.contains('table-cell-selected')
+		if (wasSelected) {
+			source.classList.remove('table-cell-selected')
+		}
+		const computedStyle = source.ownerDocument.defaultView?.getComputedStyle(source)
+		if (computedStyle) {
+			for (const property of CELL_VISUAL_PROPERTIES) {
+				const value = computedStyle.getPropertyValue(property)
+				|| source.style.getPropertyValue(property)
+			if (value) {
+				target.style.setProperty(property, value)
+			}
+		}
 		}
-		if (source.style.color) {
-			target.style.color = source.style.color
+		if (wasSelected) {
+			source.classList.add('table-cell-selected')
+		}
+
+		const persistentClasses = Array.from(source.classList)
+			.filter(className => className !== 'table-cell-selected')
+		if (persistentClasses.length) {
+			target.classList.add(...persistentClasses)
 		}
-		if (source.style.textAlign) {
-			target.style.textAlign = source.style.textAlign
+
+		for (const attribute of ['dir', 'align', 'valign', 'bgcolor']) {
+			const value = source.getAttribute(attribute)
+			if (value !== null) {
+				target.setAttribute(attribute, value)
+			}
+		}
+
+		const hasPadding = Boolean(
+			target.style.padding
+			|| target.style.paddingTop
+			|| target.style.paddingRight
+			|| target.style.paddingBottom
+			|| target.style.paddingLeft
+		)
+		if (!hasPadding) {
+			target.style.padding = '8px'
+		}
+		const hasBorder = Boolean(
+			target.style.border
+			|| target.style.borderTop
+			|| target.style.borderRight
+			|| target.style.borderBottom
+			|| target.style.borderLeft
+		)
+		if (!hasBorder) {
+			target.style.border = '1px solid var(--bgl-border-color, #ddd)'
 		}
 	} else {
 		target.style.padding = '8px'

package/src/components/form/inputs/RichText/utils/video.ts

@@ -0,0 +1,270 @@
+export function normalizeVideoWidth(value?: string | null): string {
+	return value?.trim() || '100%'
+}
+
+export function toVideoCssWidth(value?: string | null): string {
+	const width = normalizeVideoWidth(value)
+	return /[%a-z]/i.test(width) ? width : `${width}px`
+}
+
+export type VideoAlignment = 'full' | 'start' | 'end'
+
+export interface VideoData {
+	src: string
+	width: string
+	align: VideoAlignment
+	autoplay: boolean
+	mute: boolean
+	controls: boolean
+	loop: boolean
+	aspectRatio: string
+	customWidth: string
+	customHeight: string
+	caption: string
+	showCaption: boolean
+}
+
+export function createDefaultVideoData(): VideoData {
+	return {
+		src: '',
+		width: '100%',
+		align: 'full',
+		autoplay: false,
+		mute: false,
+		controls: true,
+		loop: false,
+		aspectRatio: '16:9',
+		customWidth: '',
+		customHeight: '',
+		caption: '',
+		showCaption: false,
+	}
+}
+
+function getYoutubeId(src: string): string {
+	try {
+		const url = new URL(src)
+		if (url.hostname === 'youtu.be') { return url.pathname.split('/').filter(Boolean)[0] || '' }
+		if (url.pathname.startsWith('/shorts/') || url.pathname.startsWith('/embed/')) {
+			return url.pathname.split('/').filter(Boolean)[1] || ''
+		}
+		return url.searchParams.get('v') || ''
+	} catch {
+		return ''
+	}
+}
+
+function getVideoFigure(element: HTMLElement): HTMLElement {
+	return element.tagName === 'FIGURE'
+		? element
+		: element.closest('figure') as HTMLElement | null || element
+}
+
+function getBooleanAttribute(element: Element | null, dataName: string, nativeName: string, fallback: boolean): boolean {
+	const dataValue = element?.getAttribute(dataName)
+	if (dataValue !== null && dataValue !== undefined) { return dataValue === 'true' }
+	if (element?.hasAttribute(nativeName)) { return true }
+	return fallback
+}
+
+export function readVideoData(element: HTMLElement): VideoData {
+	const figure = getVideoFigure(element)
+	const container = figure.querySelector<HTMLElement>('.video-container[data-component="BglVideo"]')
+	const video = (figure.matches('video') ? figure : figure.querySelector('video')) as HTMLVideoElement | null
+	const iframe = (figure.matches('iframe') ? figure : figure.querySelector('iframe')) as HTMLIFrameElement | null
+	const source = figure.hasAttribute('data-video-src') ? figure : container || figure
+	const isCustom = source.getAttribute('data-custom-aspect-ratio') === 'true'
+	const caption = figure.querySelector('figcaption')?.textContent || ''
+	const alignValue = figure.getAttribute('data-align')
+	const align: VideoAlignment = alignValue === 'start' || alignValue === 'end' ? alignValue : 'full'
+
+	return {
+		src: source.getAttribute('data-video-src') || video?.getAttribute('src') || iframe?.getAttribute('src') || '',
+		width: normalizeVideoWidth(figure.getAttribute('data-width') || figure.style.width || container?.getAttribute('data-width') || video?.style.width),
+		align,
+		autoplay: getBooleanAttribute(source, 'data-autoplay', 'autoplay', video?.autoplay ?? false),
+		mute: getBooleanAttribute(source, 'data-mute', 'muted', video?.muted ?? false),
+		controls: getBooleanAttribute(source, 'data-controls', 'controls', video?.controls ?? true),
+		loop: getBooleanAttribute(source, 'data-loop', 'loop', video?.loop ?? false),
+		aspectRatio: isCustom ? 'custom' : source.getAttribute('data-aspect-ratio') || '16:9',
+		customWidth: source.getAttribute('data-custom-width') || '',
+		customHeight: source.getAttribute('data-custom-height') || '',
+		caption,
+		showCaption: Boolean(caption),
+	}
+}
+
+function resolvedAspectRatio(data: VideoData): { aspectRatio: string, isCustom: boolean } {
+	const isCustom = data.aspectRatio === 'custom'
+	let aspectRatio = isCustom && data.customWidth && data.customHeight
+		? `${data.customWidth}:${data.customHeight}`
+		: data.aspectRatio
+
+	if (data.src.includes('youtube.com/shorts/') && aspectRatio === '16:9') {
+		aspectRatio = '9:16'
+	}
+	return { aspectRatio, isCustom }
+}
+
+function applyVideoMetadata(figure: HTMLElement, data: VideoData, aspectRatio: string, isCustom: boolean): void {
+	const width = normalizeVideoWidth(data.width)
+	figure.classList.remove('align-full', 'align-start', 'align-end')
+	figure.classList.add('video-figure', `align-${data.align}`)
+	figure.setAttribute('data-media-type', 'video')
+	figure.setAttribute('data-video-src', data.src)
+	figure.setAttribute('data-width', width)
+	figure.setAttribute('data-align', data.align)
+	figure.setAttribute('data-autoplay', String(data.autoplay))
+	figure.setAttribute('data-mute', String(data.mute))
+	figure.setAttribute('data-controls', String(data.controls))
+	figure.setAttribute('data-loop', String(data.loop))
+	figure.setAttribute('data-aspect-ratio', aspectRatio)
+	figure.setAttribute('data-custom-aspect-ratio', String(isCustom))
+	figure.setAttribute('data-custom-width', data.customWidth)
+	figure.setAttribute('data-custom-height', data.customHeight)
+	figure.style.width = toVideoCssWidth(width)
+	figure.tabIndex = 0
+	figure.setAttribute('role', 'group')
+	figure.setAttribute('aria-label', data.caption ? `Video: ${data.caption}` : 'Video')
+}
+
+function createVideoPlaceholder(doc: Document, data: VideoData, aspectRatio: string): HTMLElement {
+	const videoContainer = doc.createElement('div')
+	videoContainer.className = 'video-container'
+	videoContainer.setAttribute('data-component', 'BglVideo')
+	videoContainer.setAttribute('data-media-type', 'video')
+
+	const videoWrapper = doc.createElement('div')
+	videoWrapper.className = 'bgl_vid'
+	const placeholder = doc.createElement('div')
+	placeholder.className = 'video-placeholder'
+	placeholder.style.aspectRatio = aspectRatio.replace(':', '/')
+
+	const youtubeId = getYoutubeId(data.src)
+	const isYoutube = Boolean(youtubeId)
+	if (data.src.includes('youtube.com/shorts/')) { videoWrapper.classList.add('vid_short') }
+
+	if (isYoutube) {
+		placeholder.classList.add('has-thumbnail')
+		const thumbnail = doc.createElement('img')
+		thumbnail.className = 'video-thumbnail'
+		thumbnail.src = `https://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg`
+		placeholder.appendChild(thumbnail)
+
+		const overlay = doc.createElement('div')
+		overlay.className = 'video-overlay'
+		const icon = doc.createElement('div')
+		icon.className = 'video-overlay-icon'
+		overlay.appendChild(icon)
+		placeholder.appendChild(overlay)
+	} else {
+		const icon = doc.createElement('div')
+		icon.className = 'video-placeholder-icon'
+		placeholder.appendChild(icon)
+		const description = doc.createElement('div')
+		description.className = 'video-placeholder-description'
+		description.textContent = data.src.includes('vimeo.com') ? 'Vimeo video' : 'video'
+		placeholder.appendChild(description)
+	}
+
+	videoWrapper.appendChild(placeholder)
+	videoContainer.appendChild(videoWrapper)
+	return videoContainer
+}
+
+export function buildVideoFigure(doc: Document, data: VideoData, existing?: HTMLElement | null): HTMLElement {
+	const previous = existing ? getVideoFigure(existing) : null
+	const figure = previous?.tagName === 'FIGURE' ? previous : doc.createElement('figure')
+	const normalized = { ...createDefaultVideoData(), ...data, width: normalizeVideoWidth(data.width) }
+	const { aspectRatio, isCustom } = resolvedAspectRatio(normalized)
+
+	figure.replaceChildren(createVideoPlaceholder(doc, normalized, aspectRatio))
+	applyVideoMetadata(figure, normalized, aspectRatio, isCustom)
+
+	if (normalized.showCaption && normalized.caption) {
+		const caption = doc.createElement('figcaption')
+		caption.textContent = normalized.caption
+		figure.appendChild(caption)
+	}
+
+	if (previous && previous !== figure) { previous.replaceWith(figure) }
+	return figure
+}
+
+function createResponsiveIframe(doc: Document, src: string, aspectRatio: string): HTMLElement {
+	const [ratioW, ratioH] = aspectRatio.split(':').map(Number)
+	const paddingBottom = ratioW && ratioH ? `${(ratioH / ratioW) * 100}%` : '56.25%'
+	const wrapper = doc.createElement('div')
+	wrapper.className = 'video-responsive'
+	wrapper.style.cssText = `position: relative; padding-bottom: ${paddingBottom}; height: 0; overflow: hidden; width: 100%;`
+	const iframe = doc.createElement('iframe')
+	iframe.src = src
+	iframe.frameBorder = '0'
+	iframe.setAttribute('allowfullscreen', '')
+	iframe.setAttribute('title', 'Video')
+	iframe.style.cssText = 'position: absolute; inset: 0; width: 100%; height: 100%;'
+	wrapper.appendChild(iframe)
+	return wrapper
+}
+
+function toYoutubeEmbedUrl(data: VideoData): string {
+	const id = getYoutubeId(data.src)
+	if (!id) { return data.src }
+	const params = new URLSearchParams()
+	if (data.autoplay) { params.set('autoplay', '1') }
+	if (data.mute) { params.set('mute', '1') }
+	if (data.loop) {
+		params.set('loop', '1')
+		params.set('playlist', id)
+	}
+	if (!data.controls) { params.set('controls', '0') }
+	return `https://www.youtube.com/embed/${id}${params.size ? `?${params}` : ''}`
+}
+
+function createOutputVideo(doc: Document, data: VideoData): HTMLElement {
+	if (data.src.includes('youtube.com') || data.src.includes('youtu.be')) {
+		return createResponsiveIframe(doc, toYoutubeEmbedUrl(data), data.aspectRatio)
+	}
+	if (data.src.includes('vimeo.com')) {
+		const match = data.src.match(/vimeo\.com\/(?:video\/)?(\d+)/)
+		return createResponsiveIframe(doc, match ? `https://player.vimeo.com/video/${match[1]}` : data.src, data.aspectRatio)
+	}
+	if (data.src.includes('<iframe')) {
+		const template = doc.createElement('template')
+		template.innerHTML = data.src
+		const src = template.content.querySelector('iframe')?.getAttribute('src') || ''
+		return createResponsiveIframe(doc, src, data.aspectRatio)
+	}
+
+	const video = doc.createElement('video')
+	video.src = data.src
+	if (data.controls) { video.setAttribute('controls', '') }
+	if (data.autoplay) { video.setAttribute('autoplay', '') }
+	if (data.mute) { video.setAttribute('muted', '') }
+	if (data.loop) { video.setAttribute('loop', '') }
+	video.style.cssText = 'width: 100%; height: auto; display: block;'
+	return video
+}
+
+export function serializeVideoFigures(root: ParentNode): void {
+	root.querySelectorAll<HTMLElement>('.video-container[data-component="BglVideo"]').forEach((container) => {
+		const figure = container.closest('figure') as HTMLElement | null
+		if (!figure) { return }
+		const data = readVideoData(figure)
+		const { aspectRatio, isCustom } = resolvedAspectRatio(data)
+		applyVideoMetadata(figure, data, aspectRatio, isCustom)
+		figure.classList.remove('video-figure')
+		container.replaceWith(createOutputVideo(figure.ownerDocument, { ...data, aspectRatio }))
+	})
+}
+
+export function hydrateVideoFigures(root: ParentNode): void {
+	root.querySelectorAll<HTMLElement>('figure[data-media-type="video"]').forEach((figure) => {
+		if (figure.querySelector('.video-container[data-component="BglVideo"]')) {
+			figure.tabIndex = 0
+			figure.setAttribute('role', 'group')
+			return
+		}
+		buildVideoFigure(figure.ownerDocument, readVideoData(figure), figure)
+	})
+}