@bagelink/vue 0.0.1260 → 0.0.1268

package/src/components/form/inputs/RichText/composables/useEditorKeyboard.ts

@@ -1,66 +1,132 @@
-export function useEditorKeyboard(doc: Document, handleToolbarAction: (action: string, value?: string) => void): void {
+import type { CommandExecutor } from '../utils/commands'
+
+interface KeyboardShortcut {
+	key: string
+	modifiers?: {
+		ctrl?: boolean
+		alt?: boolean
+		shift?: boolean
+	}
+	command: string
+}
+
+const shortcuts: KeyboardShortcut[] = [
+	{ key: 'b', command: 'bold' },
+	{ key: 'i', command: 'italic' },
+	{ key: 'u', command: 'underline' },
+	{ key: 'z', command: 'undo' },
+	{ key: 'z', modifiers: { shift: true }, command: 'redo' },
+	{ key: 'y', command: 'redo' },
+	{ key: '.', modifiers: { shift: true }, command: 'orderedList' },
+	{ key: '/', modifiers: { shift: true }, command: 'unorderedList' },
+	{ key: ']', command: 'indent' },
+	{ key: '[', command: 'outdent' },
+	...Array.from({ length: 6 }, (_, i) => ({
+		key: String(i + 1),
+		modifiers: { alt: true },
+		command: `h${i + 1}`
+	}))
+]
+
+export function useEditorKeyboard(doc: Document, executor: CommandExecutor): void {
+	// Handle keyboard shortcuts
 	doc.addEventListener('keydown', (e) => {
-		if (e.ctrlKey || e.metaKey) {
-			switch (e.key) {
-				case 'b':
-					e.preventDefault()
-					handleToolbarAction('bold')
-					break
-				case 'i':
-					e.preventDefault()
-					handleToolbarAction('italic')
-					break
-				case 'u':
-					e.preventDefault()
-					handleToolbarAction('underline')
-					break
-				case 'z':
-					e.preventDefault()
-					if (e.shiftKey) {
-						handleToolbarAction('redo')
-					} else {
-						handleToolbarAction('undo')
-					}
-					break
-				case 'y':
-					e.preventDefault()
-					handleToolbarAction('redo')
-					break
-				// List shortcuts
-				case '.':
-					if (e.shiftKey) {
-						e.preventDefault()
-						handleToolbarAction('orderedList')
-					}
-					break
-				case '/':
-					if (e.shiftKey) {
+		// Handle Enter key in lists
+		if (e.key === 'Enter' && !e.shiftKey) {
+			const selection = doc.getSelection()
+			if (!selection || !selection.rangeCount) return
+
+			const range = selection.getRangeAt(0)
+			const container = range.commonAncestorContainer
+			const listItem = (container.nodeType === 3 ? container.parentElement : container as Element)?.closest('li')
+
+			if (listItem) {
+				// If we're at the end of a list item
+				if (range.collapsed && isAtEndOfNode(listItem, range)) {
+					// If the list item is empty, break out of the list
+					if (isNodeEmpty(listItem)) {
 						e.preventDefault()
-						handleToolbarAction('unorderedList')
-					}
-					break
-				// Heading shortcuts
-				case '1':
-				case '2':
-				case '3':
-				case '4':
-				case '5':
-				case '6':
-					if (e.altKey) {
+						// Create a new paragraph after the list
+						const list = listItem.parentElement
+						if (!list) return
+
+						// Remove the empty list item
+						listItem.remove()
+
+						// If the list is now empty, remove it
+						if (!list.querySelector('li')) {
+							const p = doc.createElement('p')
+							p.innerHTML = '<br>'
+							list.parentNode?.replaceChild(p, list)
+
+							// Set cursor in the new paragraph
+							range.selectNodeContents(p)
+							range.collapse(true)
+							selection.removeAllRanges()
+							selection.addRange(range)
+						}
+					} else {
+						// Create a new list item
 						e.preventDefault()
-						handleToolbarAction(`h${e.key}`)
+						const newLi = doc.createElement('li')
+						newLi.innerHTML = '&nbsp;<br>' // Use non-breaking space with br
+						listItem.insertAdjacentElement('afterend', newLi)
+
+						// Move cursor to new list item
+						range.selectNodeContents(newLi)
+						range.collapse(true)
+						selection.removeAllRanges()
+						selection.addRange(range)
 					}
-					break
-				// Indentation
-				case ']':
-					e.preventDefault()
-					handleToolbarAction('indent')
-					break
-				case '[':
-					e.preventDefault()
-					handleToolbarAction('outdent')
-					break
+				}
 			}
 		}
+
+		// Handle other keyboard shortcuts
+		if (!e.ctrlKey && !e.metaKey) return
+
+		const matchingShortcut = shortcuts.find((shortcut) => {
+			const keyMatch = shortcut.key === e.key
+			const modifiersMatch = !shortcut.modifiers || (
+				(!shortcut.modifiers.ctrl || e.ctrlKey || e.metaKey)
+				&& (!shortcut.modifiers.alt || e.altKey)
+				&& (!shortcut.modifiers.shift || e.shiftKey)
+			)
+			return keyMatch && modifiersMatch
+		})
+
+		if (matchingShortcut) {
+			e.preventDefault()
+			executor.execute(matchingShortcut.command)
+		}
 	})
 }
+
+// Helper function to check if we're at the end of a node
+function isAtEndOfNode(node: Node, range: Range): boolean {
+	if (node.nodeType === 3) { // Text node
+		return range.startOffset === (node as Text).length
+	}
+
+	const { lastChild } = node
+	if (!lastChild) return true
+
+	if (lastChild.nodeType === 3) { // Text node
+		return range.startContainer === lastChild && range.startOffset === lastChild.textContent?.length
+	}
+
+	return range.startContainer === node && range.startOffset === node.childNodes.length
+}
+
+// Helper function to check if a node is empty (contains only whitespace or <br> or &nbsp;)
+function isNodeEmpty(node: Node): boolean {
+	const text = node.textContent?.replace(/\s/g, '') || '' // Remove non-breaking spaces and whitespace
+	if (text) return false
+
+	// Check for <br> tags
+	const brElements = (node as Element).getElementsByTagName('br')
+	if (brElements.length === 0) return true
+
+	// If there's only one <br> and it's the only content (besides potential &nbsp;), consider it empty
+	return brElements.length === 1 && node.childNodes.length <= 2 // Allow for &nbsp; + <br>
+}

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

@@ -16,7 +16,31 @@ export const tableTools: ToolbarConfig = [
 	'deleteTable'
 ]
 
-export const defaultToolbarConfig: ToolbarConfig = [
+export const basicToolbarConfig: ToolbarConfig = [
+	'h2',
+	'h3',
+	'h4',
+	'h5',
+	'h6',
+	'separator',
+	'p',
+	'blockquote',
+	'orderedList',
+	'unorderedList',
+	'separator',
+	'bold',
+	'italic',
+	'underline',
+	'separator',
+	'link',
+	'image',
+	'embed',
+	'clear',
+	'splitView',
+	'fullScreen',
+]
+
+export const fullToolbarConfig: ToolbarConfig = [
 	'h2',
 	'h3',
 	'h4',
@@ -39,7 +63,7 @@ export const defaultToolbarConfig: ToolbarConfig = [
 	'separator',
 	'link',
 	'image',
-	// 'youtube',
+	'embed',
 	'separator',
 	'splitView',
 	'clear',
@@ -66,7 +90,7 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'unorderedList', label: 'Unordered List', icon: 'format_list_bulleted' },
 	{ name: 'link', label: 'Link', icon: 'add_link' },
 	{ name: 'image', label: 'Image', icon: 'add_photo_alternate' },
-	{ name: 'youtube', label: 'YouTube', icon: 'youtube_activity' },
+	{ name: 'embed', label: 'Embed', icon: 'media_link' },
 	{ name: 'splitView', label: 'Split View', icon: 'code' },
 	{ name: 'clear', label: 'Clear Formatting', icon: 'format_clear' },
 	{ name: 'alignLeft', label: 'Align Left', icon: 'format_align_left' },

package/src/components/form/inputs/RichText/editor.css

@@ -26,3 +26,32 @@ td {
 th {
 	background-color: #f4f4f4;
 }
+
+/* Add styles for embedded content */
+iframe {
+	max-width: 100%;
+	border: none;
+	display: block;
+	margin: 1em auto;
+}
+
+/* Responsive iframe wrapper */
+div:has(> iframe) {
+	position: relative;
+	width: 100%;
+	margin: 1em 0;
+	text-align: center;
+}
+
+/* Ensure iframes don't overflow their containers */
+div:has(> iframe) iframe {
+	max-width: 100%;
+	margin: 0;
+}
+
+/* Add a subtle border to distinguish embedded content */
+iframe:not([class*='editableContent']) {
+	border: 1px solid var(--border-color);
+	border-radius: 4px;
+	background: white;
+}

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ToolbarConfig } from './richTextTypes'
 import { CodeEditor, copyText, Btn } from '@bagelink/vue'
-import { watch } from 'vue'
+import { watch, onUnmounted, ref } from 'vue'
 import EditorToolbar from './components/EditorToolbar.vue'
 import { useCommands } from './composables/useCommands'
 import { useEditor } from './composables/useEditor'
@@ -10,70 +10,134 @@ import { useEditorKeyboard } from './composables/useEditorKeyboard'
 const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig, debug?: boolean, label?: string }>()
 const emit = defineEmits(['update:modelValue'])
 
-const iframe = $ref<HTMLIFrameElement>()
+const iframe = ref<HTMLIFrameElement>()
 const editor = useEditor()
-const commands = useCommands(editor.state, props.debug ? editor.debug : undefined)
+const isInitializing = ref(false)
+const hasInitialized = ref(false)
+
+// Initialize debugger if debug mode is enabled
+if (props.debug) {
+	editor.initDebugger()
+}
+
+const commands = useCommands(editor.state, editor.state.debug)
 
 // Expose debug methods if debug mode is enabled
-const debugMethods = $computed(() => props.debug ? editor.debug : undefined)
+const debugMethods = $computed(() => editor.state.debug)
 const hasRTL = $computed(() => /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(props.modelValue))
+
+// Cleanup on component unmount
+onUnmounted(() => {
+	editor.cleanup()
+})
+
 async function initEditor() {
-	if (!iframe) {
-		setTimeout(initEditor, 100)
+	console.log('[initEditor] Starting, isInitializing:', isInitializing.value, 'hasInitialized:', hasInitialized.value)
+	if (isInitializing.value || !iframe.value || hasInitialized.value) {
+		console.log('[initEditor] Skipped - already initializing/initialized or no iframe')
 		return
 	}
-	editor.state.content = props.modelValue || ''
-	const doc = iframe.contentDocument || iframe.contentWindow?.document
-	if (!doc) return
-
-	doc.designMode = 'on'
-	doc.body.contentEditable = 'true'
-
-	// Set default direction based on content
-	doc.body.dir = hasRTL ? 'rtl' : 'ltr'
-
-	const style = doc.createElement('style')
-	style.textContent = (await import('./editor.css?inline')).default
-	doc.head.appendChild(style)
-
-	editor.init(doc)
-	useEditorKeyboard(doc, commands.execute)
-
-	// Initial cleanup and ensure there's at least one paragraph
-	if (!doc.body.firstElementChild) {
-		const p = doc.createElement('p')
-		p.dir = doc.body.dir
-		p.innerHTML = '<br>'
-		doc.body.appendChild(p)
-	} else {
-		// Convert any direct text nodes to paragraphs
-		const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
-		const textNodes: Text[] = []
-		let node: Node | null
-		while ((node = walker.nextNode())) {
-			if (node.parentElement === doc.body) {
-				textNodes.push(node as Text)
-			}
+
+	isInitializing.value = true
+
+	try {
+		// Load styles first
+		const editorStyles = await import('./editor.css?inline')
+
+		// Create a complete HTML document with proper doctype and meta tags
+		const htmlContent = `
+			<!DOCTYPE html>
+			<html>
+			<head>
+				<meta charset="UTF-8">
+				<meta name="viewport" content="width=device-width, initial-scale=1.0">
+				<meta http-equiv="Content-Security-Policy" content="
+					default-src * data: blob: 'unsafe-inline' 'unsafe-eval';
+					img-src * data: blob:;
+					style-src * 'unsafe-inline';
+					script-src * 'unsafe-inline' 'unsafe-eval';
+					frame-src * data: blob:;
+					connect-src *;
+					media-src *;
+				">
+				<base target="_blank">
+				<style id="editor-styles">${editorStyles.default}</style>
+			</head>
+			<body>${props.modelValue || ''}</body>
+			</html>
+		`
+
+		// Write the complete HTML document to the iframe
+		const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document
+		if (!doc) {
+			console.warn('[initEditor] No document found')
+			return
 		}
-		textNodes.forEach((textNode) => {
-			if (textNode.textContent?.trim()) {
-				const p = doc.createElement('p')
-				p.dir = doc.body.dir
-				p.appendChild(textNode.cloneNode())
-				doc.body.replaceChild(p, textNode)
-			} else {
-				doc.body.removeChild(textNode)
+
+		// First write the content
+		doc.open()
+		doc.write(htmlContent)
+		doc.close()
+
+		// Then make it editable after a short delay
+		await new Promise(resolve => setTimeout(resolve, 0))
+
+		doc.designMode = 'on'
+		doc.body.contentEditable = 'true'
+
+		// Set default direction based on content
+		doc.body.dir = hasRTL ? 'rtl' : 'ltr'
+
+		editor.init(doc)
+		useEditorKeyboard(doc, commands)
+
+		// Initial cleanup and ensure there's at least one paragraph
+		if (!doc.body.firstElementChild) {
+			const p = doc.createElement('p')
+			p.dir = doc.body.dir
+			p.innerHTML = '<br>'
+			doc.body.appendChild(p)
+		} else {
+			// Convert any direct text nodes to paragraphs
+			const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
+			const textNodes: Text[] = []
+			let node: Node | null
+			while ((node = walker.nextNode())) {
+				if (node.parentElement === doc.body) {
+					textNodes.push(node as Text)
+				}
 			}
-		})
-	}
+			textNodes.forEach((textNode) => {
+				if (textNode.textContent?.trim()) {
+					const p = doc.createElement('p')
+					p.dir = doc.body.dir
+					p.appendChild(textNode.cloneNode())
+					doc.body.replaceChild(p, textNode)
+				} else {
+					doc.body.removeChild(textNode)
+				}
+			})
+		}
 
-	doc.body.focus()
+		doc.body.focus()
+		hasInitialized.value = true
+	} catch (error) {
+		console.error('[initEditor] Error during initialization:', error)
+	} finally {
+		isInitializing.value = false
+	}
 }
 
-watch(() => props.modelValue, (newValue) => {
+// Reset initialization state when content changes significantly
+watch(() => props.modelValue, (newValue, oldValue) => {
 	if (newValue !== editor.state.content) {
-		editor.state.content = newValue
-		editor.updateContent('html')
+		// Only reset if content change is significant (not just minor edits)
+		if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
+			console.log('[watch] Significant content change, resetting initialization state')
+			hasInitialized.value = false
+			editor.state.content = newValue
+			editor.updateState.content('html')
+		}
 	}
 })
 
@@ -95,11 +159,21 @@ watch(() => editor.state.content, (newValue) => {
 			/>
 			<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
 				<div class="content-area radius-05">
-					<iframe id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" @load="initEditor" />
+					<iframe
+						id="rich-text-iframe"
+						ref="iframe"
+						class="editableContent"
+						title="Editor"
+						sandbox="allow-same-origin allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
+						src="about:blank"
+						@load="initEditor"
+					/>
 				</div>
 				<CodeEditor
-					v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
-					@update:modelValue="editor.updateContent('html')"
+					v-if="editor.state.isSplitView"
+					v-model="editor.state.content"
+					language="html"
+					@update:modelValue="editor.updateState.content('html')"
 				/>
 			</div>
 			<div v-if="debug" class="flex">

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

@@ -1,27 +1,42 @@
-import type { IconType } from '@bagelink/vue'
+import type { Modal as BagelModal } from '@bagelink/vue'
 
-export interface Modal {
-	showModalForm: (options: {
-		title: string
-		schema: any[]
-		onSubmit: (data: any) => void
-	}) => void
+export interface EditorDebuggerInstance {
+	logCommand: (command: string, value: string | undefined, state: any) => void
+	logPaste: (data: DataTransfer, state: any) => void
+	logKeyboard: (event: KeyboardEvent, state: any) => void
+	logSelection: (state: any) => void
+	logInput: (inputType: string, data: string | null, state: any) => void
+	getSession: () => any
+	clearSession: () => void
+	downloadSession: () => void
+	exportSession: () => string
+	exportSessionWithPrompt: (userMessage?: string) => string
+}
+
+export interface EditorDebugInterface {
+	debugger: EditorDebuggerInstance
+	logCommand: (command: string, value?: string) => void
+	getSession: () => any
+	clearSession: () => void
+	downloadSession: () => void
+	exportDebugWithPrompt: (message?: string) => string | undefined
 }
 
 export interface EditorState {
-	isFullscreen: boolean
-	hasInit: boolean
-	isCodeView: boolean
-	isSplitView: boolean
-	selectedStyles: Set<string>
 	content: string
-	rangeCount: number
-	selection?: Selection | null
-	range?: Range | null
 	doc?: Document
-	modal?: Modal
+	selection: Selection | null
+	selectedStyles: Set<string>
+	isFullscreen: boolean
+	isSplitView: boolean
+	isCodeView: boolean
+	hasInit: boolean
 	undoStack: string[]
 	redoStack: string[]
+	rangeCount: number
+	range: Range | null
+	modal: BagelModal
+	debug?: EditorDebugInterface
 }
 
 export type FormattingCommand =
@@ -33,49 +48,20 @@ export type FormattingCommand =
 	| 'unorderedList'
 	| 'link'
 	| 'image'
-	| 'youtube'
+	| 'embed'
 	| 'table'
 	| 'splitView'
 	| 'codeView'
 
 export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
-export type ToolbarConfigOption =
-	| FormattingCommand
-	| HeadingLevel
-	| 'p'
-	| 'blockquote'
-	| 'separator'
-	| 'fullScreen'
-	| 'clear'
-	| 'mergeCells'
-	| 'splitCells'
-	| 'addRowBefore'
-	| 'addRowAfter'
-	| 'deleteRow'
-	| 'alignLeft'
-	| 'alignCenter'
-	| 'alignRight'
-	| 'alignJustify'
-	| 'indent'
-	| 'outdent'
-	| 'fontColor'
-	| 'bgColor'
-	| 'insertTable'
-	| 'deleteTable'
-	| 'insertRowAbove'
-	| 'insertRowBelow'
-	| 'insertColumnLeft'
-	| 'insertColumnRight'
-	| 'deleteColumn'
-	| 'undo'
-	| 'redo'
+export type ToolbarConfigOption = string
 
 export type ToolbarConfig = ToolbarConfigOption[]
 
 export interface ToolbarOption {
-	name: ToolbarConfigOption
+	name: string
 	label?: string
-	icon?: IconType
+	icon?: string
 	class?: string
 }