@bagelink/vue 1.4.141 → 1.4.147

package/src/components/form/inputs/RichText/richTextTypes.ts

@@ -1,5 +1,3 @@
-import type { ModalApi } from '../../../../plugins/useModal'
-
 export interface EditorDebuggerInstance {
 	logCommand: (command: string, value: string | undefined, state: any) => void
 	logPaste: (data: DataTransfer, state: any) => void
@@ -35,7 +33,6 @@ export interface EditorState {
 	redoStack: string[]
 	rangeCount: number
 	range: Range | null
-	modal: ModalApi
 	debug?: EditorDebugInterface
 }
 
@@ -53,6 +50,8 @@ export type FormattingCommand =
 	| 'splitView'
 	| 'codeView'
 	| 'textDirection'
+	| 'ltrDirection'
+	| 'rtlDirection'
 	| 'alignLeft'
 	| 'alignCenter'
 	| 'alignRight'

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

@@ -1,5 +1,5 @@
 import type { EditorState } from '../richTextTypes'
-import { insertImage, insertLink, insertEmbed } from './media'
+import { insertLink } from './media'
 import { addRow, deleteRow, mergeCells, splitCell, insertTable, deleteTable, insertColumn, deleteColumn, alignColumn } from './table'
 
 export interface Command {
@@ -97,6 +97,14 @@ function applyFormattingToWordAtCursor(doc: Document, range: Range, tagName: str
 	// Regular expression for word characters (Hebrew, English, numbers)
 	const wordChar = /[\u0590-\u05FF\u0600-\u06FF\w]/
 
+	// If we're at the end of a word (cursor right after the last character)
+	// move back one position to include that word
+	if (offset > 0 && wordChar.test(text[offset - 1]) &&
+		(offset >= text.length || !wordChar.test(text[offset]))) {
+		start = offset - 1
+		end = offset - 1
+	}
+
 	// Move start backwards to find word beginning
 	while (start > 0 && wordChar.test(text[start - 1])) {
 		start--
@@ -429,6 +437,24 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 				: commonAncestor as Element
 
 			return !!parentElement?.closest('u')
+		}),
+
+		link: createCommand('Link', (state) => {
+			const openLinkModal = (state as any).openLinkModal
+			if (openLinkModal) {
+				insertLink(openLinkModal, state)
+			}
+		}, (state) => {
+			// isActive function for link
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const commonAncestor = selectionInfo.range.commonAncestorContainer
+			const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+				? commonAncestor.parentElement
+				: commonAncestor as Element
+
+			return !!parentElement?.closest('a')
 		})
 	}
 
@@ -439,10 +465,17 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 			const selectionInfo = getCurrentSelection(state)
 			if (!selectionInfo) return
 
-			const { range } = selectionInfo
+			const { range, selection } = selectionInfo
 			const currentBlock = findBlockElement(range.commonAncestorContainer)
 			if (!currentBlock) return
 
+			// Store the original selection information before modification
+			const startContainer = range.startContainer
+			const endContainer = range.endContainer
+			const startOffset = range.startOffset
+			const endOffset = range.endOffset
+			const isCollapsed = range.collapsed
+
 			// Check if we need to toggle off (already in the same heading)
 			const isToggleOff = currentBlock.tagName.toLowerCase() === cmd.toLowerCase()
 			const newTag = isToggleOff ? 'p' : cmd
@@ -458,56 +491,105 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 				// Replace the old block with the new one
 				currentBlock.parentNode?.replaceChild(newBlock, currentBlock)
 
+				// Restore selection within the new block
+				try {
+					const newRange = state.doc!.createRange()
+
+					// Find corresponding nodes in the new block
+					const findCorrespondingNode = (originalNode: Node, originalBlock: Element, newBlock: Element): Node | null => {
+						if (originalNode === originalBlock) return newBlock
+
+						// If it's a text node, find it by traversing the tree
+						if (originalNode.nodeType === Node.TEXT_NODE) {
+							const walker = state.doc!.createTreeWalker(
+								newBlock,
+								NodeFilter.SHOW_TEXT,
+								null
+							)
+
+							let textNodeIndex = 0
+							const originalWalker = state.doc!.createTreeWalker(
+								originalBlock,
+								NodeFilter.SHOW_TEXT,
+								null
+							)
+
+							let currentOriginalNode = originalWalker.nextNode()
+							while (currentOriginalNode && currentOriginalNode !== originalNode) {
+								textNodeIndex++
+								currentOriginalNode = originalWalker.nextNode()
+							}
+
+							let currentNewNode = walker.nextNode()
+							let currentIndex = 0
+							while (currentNewNode && currentIndex < textNodeIndex) {
+								currentIndex++
+								currentNewNode = walker.nextNode()
+							}
+
+							return currentNewNode
+						}
+
+						return newBlock.firstChild
+					}
+
+					const newStartContainer = findCorrespondingNode(startContainer, currentBlock, newBlock)
+					const newEndContainer = findCorrespondingNode(endContainer, currentBlock, newBlock)
+
+					if (newStartContainer && newEndContainer) {
+						// Set start position
+						if (newStartContainer.nodeType === Node.TEXT_NODE) {
+							const maxOffset = Math.min(startOffset, newStartContainer.textContent?.length || 0)
+							newRange.setStart(newStartContainer, maxOffset)
+						} else {
+							newRange.setStart(newStartContainer, 0)
+						}
+
+						// Set end position
+						if (!isCollapsed) {
+							if (newEndContainer.nodeType === Node.TEXT_NODE) {
+								const maxOffset = Math.min(endOffset, newEndContainer.textContent?.length || 0)
+								newRange.setEnd(newEndContainer, maxOffset)
+							} else {
+								newRange.setEnd(newEndContainer, 0)
+							}
+						} else {
+							newRange.collapse(true)
+						}
+
+						// Apply the restored selection
+						selection.removeAllRanges()
+						selection.addRange(newRange)
+					} else {
+						// Fallback: select all content in the new block
+						newRange.selectNodeContents(newBlock)
+						if (isCollapsed) {
+							newRange.collapse(true)
+						}
+						selection.removeAllRanges()
+						selection.addRange(newRange)
+					}
+				} catch (selectionError) {
+					console.warn('Error restoring selection after heading change:', selectionError)
+					// Fallback: place cursor at start of the new block
+					const fallbackRange = state.doc!.createRange()
+					fallbackRange.selectNodeContents(newBlock)
+					fallbackRange.collapse(true)
+					selection.removeAllRanges()
+					selection.addRange(fallbackRange)
+				}
+
 				// If we created a heading (not toggling off), ensure there's a paragraph after it
 				if (!isToggleOff) {
-					// Check if there's already a next sibling element
 					const nextSibling = newBlock.nextElementSibling
 					if (!nextSibling) {
 						// No element after the heading, create a paragraph
 						const p = state.doc!.createElement('p')
 						p.dir = newBlock.dir || state.doc!.body.dir
 						newBlock.parentNode?.insertBefore(p, newBlock.nextSibling)
-
-						// Move cursor to the new paragraph
-						const newRange = state.doc!.createRange()
-						newRange.selectNodeContents(p)
-						newRange.collapse(true)
-						selectionInfo.selection.removeAllRanges()
-						selectionInfo.selection.addRange(newRange)
-					} else {
-						// There is a next element, just move cursor to the heading
-						range.selectNodeContents(newBlock)
-						range.collapse(false)
-						selectionInfo.selection.removeAllRanges()
-						selectionInfo.selection.addRange(range)
 					}
-				} else {
-					// Toggling off to paragraph, move cursor to it
-					range.selectNodeContents(newBlock)
-					range.collapse(false)
-					selectionInfo.selection.removeAllRanges()
-					selectionInfo.selection.addRange(range)
 				}
 
-				// Clean up empty elements after creating heading
-				setTimeout(() => {
-					const emptyElements = Array.from(state.doc!.body.querySelectorAll('div, p')).filter(el =>
-						!el.textContent?.trim() && !el.querySelector('img, br, hr, input, textarea, select')
-					)
-
-					emptyElements.forEach(el => {
-						// Remove empty elements that come right before or after headings
-						const nextSibling = el.nextElementSibling
-						const prevSibling = el.previousElementSibling
-						if ((nextSibling && /^H[1-6]$/.test(nextSibling.tagName)) ||
-							(prevSibling && /^H[1-6]$/.test(prevSibling.tagName))) {
-							el.remove()
-						} else if (el === state.doc!.body.firstElementChild && state.doc!.body.children.length > 1) {
-							el.remove()
-						}
-					})
-				}, 0)
-
 			} catch (error) {
 				console.error(`Error applying ${cmd} heading:`, error)
 			}
@@ -640,7 +722,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 						newRange.collapse(true)
 						selectionInfo.selection.removeAllRanges()
 						selectionInfo.selection.addRange(newRange)
-					} catch (e) {
+					} catch {
 						// Fallback: put cursor at beginning of first list item
 						const firstLi = ol.querySelector('li')
 						if (firstLi) {
@@ -804,8 +886,8 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 						const element = node as Element
 						const tagName = element.tagName.toLowerCase()
 
-						// Preserve structural elements
-						const structuralTags = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'div', 'table', 'tr', 'td', 'th', 'thead', 'tbody', 'b', 'i', 'u']
+						// Preserve structural elements, links, and media
+						const structuralTags = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'div', 'table', 'tr', 'td', 'th', 'thead', 'tbody', 'b', 'i', 'u', 'a', 'img', 'iframe', 'video', 'audio', 'figure', 'figcaption']
 						// Remove formatting elements (excluding basic HTML formatting tags)
 						const formattingTags = ['strong', 'em', 'span', 'font', 'strike', 'sub', 'sup', 'mark', 'del', 'ins', 'small', 'big']
 
@@ -823,11 +905,25 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 								if (element.hasAttribute('target')) {
 									cleanElement.setAttribute('target', element.getAttribute('target') || '')
 								}
+								if (element.hasAttribute('rel')) {
+									cleanElement.setAttribute('rel', element.getAttribute('rel') || '')
+								}
 							} else if (tagName === 'img') {
 								if (element.hasAttribute('src')) cleanElement.setAttribute('src', element.getAttribute('src') || '')
 								if (element.hasAttribute('alt')) cleanElement.setAttribute('alt', element.getAttribute('alt') || '')
 								if (element.hasAttribute('width')) cleanElement.setAttribute('width', element.getAttribute('width') || '')
 								if (element.hasAttribute('height')) cleanElement.setAttribute('height', element.getAttribute('height') || '')
+							} else if (tagName === 'iframe') {
+								if (element.hasAttribute('src')) cleanElement.setAttribute('src', element.getAttribute('src') || '')
+								if (element.hasAttribute('width')) cleanElement.setAttribute('width', element.getAttribute('width') || '')
+								if (element.hasAttribute('height')) cleanElement.setAttribute('height', element.getAttribute('height') || '')
+								if (element.hasAttribute('frameborder')) cleanElement.setAttribute('frameborder', element.getAttribute('frameborder') || '')
+								if (element.hasAttribute('allowfullscreen')) cleanElement.setAttribute('allowfullscreen', element.getAttribute('allowfullscreen') || '')
+							} else if (tagName === 'video' || tagName === 'audio') {
+								if (element.hasAttribute('src')) cleanElement.setAttribute('src', element.getAttribute('src') || '')
+								if (element.hasAttribute('controls')) cleanElement.setAttribute('controls', element.getAttribute('controls') || '')
+								if (element.hasAttribute('width')) cleanElement.setAttribute('width', element.getAttribute('width') || '')
+								if (element.hasAttribute('height')) cleanElement.setAttribute('height', element.getAttribute('height') || '')
 							}
 
 							// Clean and append child nodes
@@ -906,8 +1002,67 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 	// Table commands
 	const tableCommands = {
 		insertTable: createCommand('Insert Table', (state, value) => {
-			const [rows, cols] = value?.split('x').map(Number) || [3, 3]
-			insertTable(rows, cols, state)
+			console.log('insertTable command called with value:', value)
+
+			// If we have an openTableEditor function in state, use it for new tables
+			if ((state as any).openTableEditor && !value) {
+				console.log('Opening table editor modal for new table')
+					; (state as any).openTableEditor(null)
+				return
+			}
+
+			if (!value) {
+				// Default fallback
+				const [rows, cols] = [3, 3]
+				insertTable(rows, cols, state)
+				return
+			}
+
+			// Check if value is HTML string (from our advanced table editor)
+			if (value.includes('<table')) {
+				console.log('Inserting HTML table')
+				// Insert HTML table directly
+				const selectionInfo = getCurrentSelection(state)
+				if (!selectionInfo || !state.doc) {
+					console.error('No selection info or document')
+					return
+				}
+
+				const { range } = selectionInfo
+
+				try {
+					// Create a temporary div to parse the HTML
+					const tempDiv = state.doc.createElement('div')
+					tempDiv.innerHTML = value
+					const table = tempDiv.querySelector('table')
+
+					if (table) {
+						console.log('Table parsed successfully, inserting...')
+						// Insert the table at the current selection
+						const insertedTable = table.cloneNode(true) as HTMLTableElement
+						range.insertNode(insertedTable)
+
+						// Move cursor after the table
+						range.setStartAfter(insertedTable)
+						range.collapse(true)
+
+						const selection = state.doc.getSelection()
+						if (selection) {
+							selection.removeAllRanges()
+							selection.addRange(range)
+						}
+						console.log('Table inserted successfully')
+					} else {
+						console.error('Could not parse table from HTML')
+					}
+				} catch (error) {
+					console.error('Error inserting HTML table:', error)
+				}
+			} else {
+				// Original grid format (e.g., "3x3")
+				const [rows, cols] = value.split('x').map(Number) || [3, 3]
+				insertTable(rows, cols, state)
+			}
 		}),
 		deleteTable: createCommand('Delete Table', state => state.range && deleteTable(state.range)),
 		mergeCells: createCommand('Merge Cells', state => state.range && state.doc && mergeCells(state.range, state.doc)),
@@ -923,7 +1078,12 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 	// Table alignment commands
 	const alignmentCommands = ['Left', 'Center', 'Right', 'Justify'].reduce((acc, align) => ({
 		...acc,
-		[`tableAlign${align}`]: createCommand(`Table Align ${align}`, state => state.range && alignColumn(state.range, align.toLowerCase() as 'left' | 'center' | 'right' | 'justify'))
+		[`tableAlign${align}`]: createCommand(`Table Align ${align}`, state => {
+			if (state.range) {
+				const alignment = align === 'Left' ? 'start' : align === 'Right' ? 'end' : align.toLowerCase() as 'center' | 'justify'
+				return alignColumn(state.range, alignment)
+			}
+		})
 	}), {})
 
 	// Text alignment commands (for paragraphs)
@@ -1041,6 +1201,54 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 			const selectionInfo = getCurrentSelection(state)
 			if (!selectionInfo) return false
 
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			return (paragraph as HTMLElement)?.dir === 'rtl'
+		}),
+
+		ltrDirection: createCommand('Set Left to Right Direction', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			if (paragraph) {
+				(paragraph as HTMLElement).dir = 'ltr'
+			}
+		}, (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			return (paragraph as HTMLElement)?.dir === 'ltr'
+		}),
+
+		rtlDirection: createCommand('Set Right to Left Direction', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			if (paragraph) {
+				(paragraph as HTMLElement).dir = 'rtl'
+			}
+		}, (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
 			const { range } = selectionInfo
 			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
 				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
@@ -1059,9 +1267,30 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 
 	// Media commands
 	const mediaCommands = {
-		image: createCommand('Insert Image', (state) => { state.modal && insertImage(state.modal, state) }),
-		link: createCommand('Insert Link', state => state.modal && state.range && insertLink(state.modal, state)),
-		embed: createCommand('Insert Embed', (state) => { state.modal && insertEmbed(state.modal, state) })
+		image: createCommand('Insert Image', (state) => {
+			const openImageModal = (state as any).openImageModal
+			if (openImageModal) {
+				openImageModal()
+			} else {
+				console.warn('Image insertion requires modal implementation')
+			}
+		}),
+		video: createCommand('Insert Video', (state) => {
+			const openVideoModal = (state as any).openVideoModal
+			if (openVideoModal) {
+				openVideoModal()
+			} else {
+				console.warn('Video insertion requires modal implementation')
+			}
+		}),
+		embed: createCommand('Insert Embed', (state) => {
+			const openEmbedModal = (state as any).openEmbedModal
+			if (openEmbedModal) {
+				openEmbedModal()
+			} else {
+				console.warn('Embed insertion requires modal implementation')
+			}
+		})
 	}
 
 	return {

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

@@ -1,5 +1,4 @@
 import type { ModalApi } from '../../../../../plugins/useModal'
-
 import type { EditorState } from '../richTextTypes'
 import { bagelFormUtils as frm } from '../../../../../utils'
 
@@ -53,87 +52,154 @@ export function insertImage(modal: ModalApi, state: EditorState) {
 }
 
 export function insertLink(modal: ModalApi, state: EditorState) {
-	const { range, doc } = state
-	if (!range || !doc) return
+	const { doc } = state
+	if (!doc) {
+		console.log('No doc found')
+		return
+	}
 
-	modal.showModalForm({
-		title: 'Insert Link',
-		schema: [
-			{ id: 'url', $el: 'text', label: 'URL' },
-			{ id: 'openInNewTab', $el: 'check', label: 'Open in new tab' },
-		],
-		onSubmit: (data: { url: string, openInNewTab: boolean }) => {
-			if (data.url) {
-				const anchor = doc.createElement('a')
-				anchor.href = data.url
-				if (data.openInNewTab) anchor.target = '_blank'
-				range.surroundContents(anchor)
-				state.content = doc.body.innerHTML
+	// Get current selection
+	const selection = doc.getSelection()
+	if (!selection || !selection.rangeCount) {
+		console.log('No selection found')
+		return
+	}
+
+	let range = selection.getRangeAt(0)
+
+	// If no text is selected, try to select word at cursor
+	if (range.collapsed) {
+		const success = selectWordAtCursor(doc, range)
+		if (!success) {
+			console.log('Failed to select word at cursor')
+			// Show a helpful tooltip to the user
+			const showTooltipMessage = (state as any).showTooltipMessage
+			if (showTooltipMessage) {
+				showTooltipMessage('To add a link, please select text first or place cursor within a word')
+			} else {
+				// Fallback to alert if tooltip system is not available
+				alert('To add a link, please select text first or place the cursor within a word you want to turn into a link.')
 			}
+			return
 		}
-	})
+		// Get the updated range after word selection
+		range = selection.getRangeAt(0)
+	}
+
+	// Check if we're editing an existing link
+	const commonAncestor = range.commonAncestorContainer
+	const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+		? commonAncestor.parentElement
+		: commonAncestor as Element
+
+	const existingLink = parentElement?.closest('a')
+
+	// Use the new modal function if available
+	if ((state as any).openLinkModal) {
+		(state as any).openLinkModal(selection, range, existingLink)
+		return
+	}
+
+	// Fallback - just show an alert if modal is not available
+	console.warn('Link modal not available - openLinkModal function not found')
+	alert('Link functionality requires proper modal setup')
 }
 
-export interface InsertImbedModalData { url: string, width?: number, height?: number, allowFullscreen?: boolean }
+// Helper function to select word at cursor
+function selectWordAtCursor(doc: Document, range: Range): boolean {
+	if (!range.collapsed) return true // Already has selection
+
+	let textNode = range.startContainer
+	let offset = range.startOffset
+
+	// If we're in an element node, try to find a text node
+	if (textNode.nodeType !== Node.TEXT_NODE) {
+		const element = textNode as Element
+		if (element.childNodes.length > 0 && offset < element.childNodes.length) {
+			const childNode = element.childNodes[offset]
+			if (childNode.nodeType === Node.TEXT_NODE) {
+				textNode = childNode
+				offset = 0
+			} else {
+				return false
+			}
+		} else {
+			return false
+		}
+	}
+
+	const text = textNode.textContent || ''
+	if (!text) return false
+
+	// Find word boundaries - support Hebrew, English, and numbers
+	let start = offset
+	let end = offset
+
+	// Define word characters (Hebrew, English, numbers)
+	const wordRegex = /[\u0590-\u05FF\u0600-\u06FF\w]/
+
+	// Move start backwards to find beginning of word
+	while (start > 0 && wordRegex.test(text[start - 1])) {
+		start--
+	}
+
+	// Move end forwards to find end of word
+	while (end < text.length && wordRegex.test(text[end])) {
+		end++
+	}
+
+	// If we found a word
+	if (start < end) {
+		range.setStart(textNode, start)
+		range.setEnd(textNode, end)
+
+		const selection = doc.getSelection()
+		if (selection) {
+			selection.removeAllRanges()
+			selection.addRange(range)
+		}
+		return true
+	}
+
+	return false
+}
+
+export interface InsertImbedModalData {
+	src: string
+	width: number
+	height: number
+	allowfullscreen: boolean
+}
 
 export function insertEmbed(modal: ModalApi, state: EditorState) {
 	const { range, doc } = state
 	if (!range || !doc) return
 
-	modal.showModalForm<InsertImbedModalData
-	>({
-		title: 'Insert Embed',
+	modal.showModalForm<InsertImbedModalData>({
+		title: 'Embed iframe',
 		schema: [
-			{ id: 'url', $el: 'text', label: 'URL', attrs: { placeholder: 'Enter URL (YouTube, Vimeo, etc.)' } },
+			{ id: 'src', $el: 'text', label: 'Source URL' },
 			frm.frmRow(
-				frm.numField('width', 'Width', { min: 200, placeholder: '560' }),
-				frm.numField('height', 'Height', { min: 200, placeholder: '315' })
+				frm.numField('width', 'Width', { min: 1 }),
+				frm.numField('height', 'Height', { min: 1 }),
 			),
-			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', attrs: { value: true } },
+			{ id: 'allowfullscreen', $el: 'check', label: 'Allow Fullscreen' },
 		],
-		onSubmit: (data: { url: string, width?: number, height?: number, allowFullscreen?: boolean }) => {
-			if (!data.url) return
-
-			// Convert common video URLs to embed URLs
-			const url = new URL(data.url)
-			let embedUrl = data.url
-
-			// YouTube
-			if (url.hostname.includes('youtube.com') || url.hostname === 'youtu.be') {
-				const videoId = url.hostname === 'youtu.be'
-					? url.pathname.slice(1)
-					: url.searchParams.get('v')
-				if (videoId) {
-					embedUrl = `https://www.youtube.com/embed/${videoId}`
-				}
-			}
-			// Vimeo
-			else if (url.hostname.includes('vimeo.com')) {
-				const videoId = url.pathname.split('/').pop()
-				if (videoId) {
-					embedUrl = `https://player.vimeo.com/video/${videoId}`
-				}
-			}
+		onSubmit: (data: InsertImbedModalData) => {
+			if (data.src) {
+				const iframe = doc.createElement('iframe')
+				Object.assign(iframe, {
+					src: data.src,
+					width: data.width || 560,
+					height: data.height || 315,
+					allowfullscreen: data.allowfullscreen || false,
+					frameborder: '0'
+				})
 
-			const iframe = doc.createElement('iframe')
-			Object.assign(iframe, {
-				src: embedUrl,
-				width: data.width || 560,
-				height: data.height || 315,
-				frameBorder: '0',
-				allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
-				allowFullscreen: data.allowFullscreen
-			})
-
-			// Create a wrapper div for proper alignment and spacing
-			const wrapper = doc.createElement('div')
-			wrapper.style.textAlign = 'center'
-			wrapper.style.margin = '1em 0'
-			wrapper.appendChild(iframe)
-
-			range.deleteContents()
-			range.insertNode(wrapper)
-			state.content = doc.body.innerHTML
+				range.collapse(false)
+				range.insertNode(iframe)
+				state.content = doc.body.innerHTML
+			}
 		}
 	})
 }