@bagelink/vue 0.0.1262 → 0.0.1268

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

@@ -1,35 +1,47 @@
-import type { EditorDebugger } from '../utils/debug'
+import type { EditorState, EditorDebugInterface, EditorDebuggerInstance } from '../richTextTypes'
 import { useModal } from '@bagelink/vue'
-import { reactive, ref } from 'vue'
-import { formatting } from '../utils/formatting'
+import { reactive } from 'vue'
+import { EditorDebugger } from '../utils/debug'
 import { isStyleActive } from '../utils/selection'
-import { addRow, deleteRow, mergeCells, splitCell, insertTable, deleteTable, insertColumn, deleteColumn, alignColumn } from '../utils/table'
-
-interface EditorState {
-	content: string
-	doc: Document | undefined
-	selection: Selection | null
-	selectedStyles: Set<string>
-	isFullscreen: boolean
-	isSplitView: boolean
-	isCodeView: boolean
-	hasInit: boolean
-	undoStack: string[]
-	redoStack: string[]
-	rangeCount: number
-	range: Range | null
-	modal: ReturnType<typeof useModal>
+
+function preserveIframes(content: string): { html: string, iframes: HTMLIFrameElement[] } {
+	const temp = document.createElement('div')
+	temp.innerHTML = content
+	const iframes: HTMLIFrameElement[] = []
+	const placeholders: string[] = []
+
+	// Find all iframes and replace them with placeholders
+	temp.querySelectorAll('iframe').forEach((iframe, index) => {
+		const placeholder = `<!--iframe-${index}-->`
+		iframes.push(iframe.cloneNode(true) as HTMLIFrameElement)
+		placeholders.push(placeholder)
+		iframe.replaceWith(placeholder)
+	})
+
+	return {
+		html: temp.innerHTML,
+		iframes
+	}
+}
+
+function restoreIframes(doc: Document, content: string, iframes: HTMLIFrameElement[]) {
+	// Find all iframe placeholders and restore them
+	const placeholderPattern = /<!--iframe-(\d+)-->/g
+	doc.body.innerHTML = content.replace(placeholderPattern, (_, index) => {
+		const iframe = iframes[Number(index)]
+		return iframe ? iframe.outerHTML : ''
+	})
 }
 
 export function useEditor() {
-	const editorDebugger = ref<EditorDebugger>()
 	const modal = useModal()
+	let cleanupListeners: (() => void) | null = null
 
 	const state = reactive<EditorState>({
 		content: '',
 		doc: undefined,
 		selection: null,
-		selectedStyles: new Set(),
+		selectedStyles: new Set<string>(),
 		isFullscreen: false,
 		isSplitView: false,
 		isCodeView: false,
@@ -38,122 +50,181 @@ export function useEditor() {
 		redoStack: [],
 		rangeCount: 0,
 		range: null,
-		modal
+		modal,
+		debug: undefined
 	})
 
-	function updateActiveStyles() {
-		if (!state.doc) return
-		const styles = new Set<string>()
-		const styleTypes = [
-			'bold',
-			'italic',
-			'underline',
-			'h1',
-			'h2',
-			'h3',
-			'h4',
-			'h5',
-			'h6',
-			'blockquote',
-			'table',
-			'p',
-			'ol',
-			'li'
-		]
-
-		styleTypes.forEach((style) => {
-			if (state.doc && isStyleActive(style, state.doc)) {
-				styles.add(style)
+	// Centralized state update functions
+	const updateState = {
+		styles: () => {
+			if (!state.doc) return
+			console.log('[updateState.styles] Starting style update')
+			const styles = new Set<string>()
+			const styleTypes = [
+				'bold',
+				'italic',
+				'underline',
+				'h1',
+				'h2',
+				'h3',
+				'h4',
+				'h5',
+				'h6',
+				'blockquote',
+				'table',
+				'p',
+				'ol',
+				'li'
+			]
+			styleTypes.forEach((style) => {
+				if (state.doc && isStyleActive(style, state.doc)) {
+					styles.add(style)
+				}
+			})
+			console.log('[updateState.styles] New styles:', Array.from(styles))
+			state.selectedStyles = styles
+		},
+		content: (source: 'html' | 'text') => {
+			if (!state.doc) return
+			console.log('[updateState.content] Starting content update, source:', source)
+
+			// Only push to undo stack if content has changed
+			const currentContent = state.doc.body.innerHTML
+			console.log('[updateState.content] Current content length:', currentContent.length)
+			console.log('[updateState.content] State content length:', state.content.length)
+			if (currentContent !== state.content) {
+				console.log('[updateState.content] Content changed, pushing to undo stack')
+				state.undoStack.push(state.content)
+				state.redoStack = []
 			}
-		})
-		state.selectedStyles = styles
-	}
 
-	function updateContent(source: 'html' | 'text') {
-		if (!state.doc) return
+			// Store current selection
+			const selection = state.doc.getSelection()
+			const range = selection?.rangeCount ? selection.getRangeAt(0).cloneRange() : null
+			console.log('[updateState.content] Has selection:', !!selection, 'Has range:', !!range)
+
+			if (source === 'html') {
+				console.log('[updateState.content] Processing HTML content')
+				// Preserve iframes before setting content
+				const preserved = preserveIframes(state.content)
+				console.log('[updateState.content] Preserved iframes count:', preserved.iframes.length)
+				state.doc.body.innerHTML = preserved.html
+
+				// Restore iframes after a short delay to ensure the document is ready
+				setTimeout(() => {
+					console.log('[updateState.content] Restoring iframes')
+					if (state.doc) {
+						restoreIframes(state.doc, state.content, preserved.iframes)
+
+						// Restore selection if it existed
+						if (range && selection) {
+							try {
+								selection.removeAllRanges()
+								selection.addRange(range)
+								console.log('[updateState.content] Selection restored')
+							} catch (e) {
+								console.warn('[updateState.content] Could not restore selection:', e)
+							}
+						}
+					}
+				}, 0)
+			} else {
+				console.log('[updateState.content] Setting text content')
+				state.doc.body.textContent = state.content
+			}
+		},
+		selection: () => {
+			if (!state.doc) return
+			console.log('[updateState.selection] Starting selection update')
+			const newSelection = state.doc.getSelection()
+			if (!newSelection) {
+				console.log('[updateState.selection] No selection available')
+				return
+			}
 
-		// Save current state for undo
-		state.undoStack.push(state.content)
-		// Clear redo stack on new content
-		state.redoStack = []
+			try {
+				if (!state.doc.body.contains(newSelection.anchorNode)) {
+					console.log('[updateState.selection] Selection outside editor body, refocusing')
+					state.doc.body.focus()
+					return
+				}
 
-		if (source === 'html') {
-			state.doc.body.innerHTML = state.content
-		} else {
-			state.doc.body.textContent = state.content
+				// Only update if selection has actually changed
+				const hasSelectionChanged = !state.selection
+					|| state.selection !== newSelection
+					|| state.rangeCount !== newSelection.rangeCount
+					|| (newSelection.rangeCount > 0 && state.range && (
+						state.range.startContainer !== newSelection.getRangeAt(0).startContainer
+						|| state.range.startOffset !== newSelection.getRangeAt(0).startOffset
+						|| state.range.endContainer !== newSelection.getRangeAt(0).endContainer
+						|| state.range.endOffset !== newSelection.getRangeAt(0).endOffset
+					))
+
+				console.log('[updateState.selection] Selection changed:', hasSelectionChanged)
+				if (hasSelectionChanged) {
+					state.selection = newSelection
+					state.rangeCount = newSelection.rangeCount
+
+					if (newSelection.rangeCount > 0) {
+						state.range = newSelection.getRangeAt(0).cloneRange()
+						console.log('[updateState.selection] New range:', {
+							startOffset: state.range.startOffset,
+							endOffset: state.range.endOffset,
+							collapsed: state.range.collapsed
+						})
+					}
+
+					// Update styles less frequently
+					requestAnimationFrame(() => {
+						console.log('[updateState.selection] Updating styles in RAF')
+						updateState.styles()
+					})
+				}
+			} catch (e) {
+				console.warn('[updateState.selection] Selection error:', e)
+				state.selection = null
+				state.range = null
+				state.rangeCount = 0
+				state.selectedStyles = new Set()
+			}
 		}
-		updateActiveStyles()
 	}
 
-	function updateSelection() {
-		if (!state.doc) return
-		state.selection = state.doc.getSelection()
-		if (!state.selection) return
-
-		try {
-			if (!state.doc.body.contains(state.selection.anchorNode)) {
-				state.doc.body.focus()
-				return
+	// History management
+	const history = {
+		undo: () => {
+			if (state.undoStack.length === 0) return
+			state.redoStack.push(state.content)
+			const lastContent = state.undoStack.pop()
+			if (lastContent !== undefined) {
+				state.content = lastContent
+				updateState.content('html')
 			}
-			state.rangeCount = state.selection.rangeCount
-			if (!state.rangeCount) {
-				const range = state.doc.createRange()
-				range.selectNodeContents(state.doc.body)
-				range.collapse(false)
-				state.selection.removeAllRanges()
-				state.selection.addRange(range)
+		},
+		redo: () => {
+			if (state.redoStack.length === 0) return
+			state.undoStack.push(state.content)
+			const nextContent = state.redoStack.pop()
+			if (nextContent !== undefined) {
+				state.content = nextContent
+				updateState.content('html')
 			}
-			state.range = state.selection.getRangeAt(0).cloneRange()
-			updateActiveStyles()
-		} catch (e) {
-			console.warn('Selection error:', e)
-			state.selection = null
-			state.range = null
-			state.rangeCount = 0
-			state.selectedStyles = new Set()
 		}
 	}
 
-	function setupEventListeners(doc: Document) {
-		// Input and selection events
-		doc.addEventListener('input', () => {
-			state.content = doc.body.innerHTML
-			updateActiveStyles()
-		})
-
-		doc.addEventListener('selectionchange', () => {
-			updateSelection()
-		})
-
-		doc.addEventListener('mouseup', () => {
-			updateSelection()
-		})
-
-		doc.addEventListener('keyup', (e) => {
-			if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
-				updateSelection()
-			}
-		})
-
-		// Clean empty tags and normalize content
-		const cleanEmptyTags = () => {
-			const walker = doc.createTreeWalker(
-				doc.body,
-				NodeFilter.SHOW_ELEMENT,
-				null
-			)
-
+	// Content cleanup utilities
+	const cleanup = {
+		emptyTags: (doc: Document) => {
+			const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_ELEMENT, null)
 			const nodesToRemove: Element[] = []
 			let node = walker.nextNode() as Element
 
 			while (node) {
-				// Skip certain elements
 				if (['br', 'img', 'hr', 'input'].includes(node.tagName.toLowerCase())) {
 					node = walker.nextNode() as Element
 					continue
 				}
 
-				// Get text content without extra spaces
 				const textContent = node.textContent?.trim() || ''
 				const innerHTML = node.innerHTML.trim()
 				const hasOnlyBr = innerHTML === '<br>' || innerHTML === '<br/>'
@@ -161,195 +232,231 @@ export function useEditor() {
 				const isEmpty = !textContent && !innerHTML
 				const isDirectChildOfBody = node.parentElement === doc.body
 
-				// Handle empty or unnecessary tags
 				if (isEmpty || hasOnlyNbsp || (hasOnlyBr && !isDirectChildOfBody)) {
-					// If it's a direct child of body, replace with a proper paragraph
-					if (isDirectChildOfBody) {
-						if (!node.matches('p')) {
-							const p = doc.createElement('p')
-							p.innerHTML = '<br>'
-							node.parentNode?.replaceChild(p, node)
-						}
+					if (isDirectChildOfBody && !node.matches('p')) {
+						const p = doc.createElement('p')
+						p.innerHTML = '<br>'
+						node.parentNode?.replaceChild(p, node)
 					} else {
 						nodesToRemove.push(node)
 					}
 				}
-
 				node = walker.nextNode() as Element
 			}
-
-			// Remove all marked nodes
 			nodesToRemove.forEach((node) => { node.remove() })
+		},
+		normalizeContent: (doc: Document) => {
+			if (!doc.body.firstElementChild) {
+				const p = doc.createElement('p')
+				p.dir = doc.body.dir
+				p.innerHTML = '<br>'
+				doc.body.appendChild(p)
+			} else {
+				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)
+					}
+				})
+			}
 		}
+	}
 
-		// Regular cleanup
-		const observer = new MutationObserver(() => {
-			cleanEmptyTags()
-		})
+	function setupEventListeners(doc: Document) {
+		console.log('[setupEventListeners] Starting setup')
+		// Clean up existing listeners if they exist
+		if (cleanupListeners) {
+			console.log('[setupEventListeners] Cleaning up existing listeners')
+			cleanupListeners()
+			cleanupListeners = null
+		}
 
-		observer.observe(doc.body, {
-			childList: true,
-			subtree: true,
-			characterData: true
-		})
-	}
+		let isUpdating = false
+		let contentUpdateTimeout: number | null = null
+		let selectionUpdateTimeout: number | null = null
+		let updateCount = 0
+
+		const events = {
+			input: () => {
+				updateCount++
+				console.log(`[input event #${updateCount}] Starting, isUpdating:`, isUpdating)
+				if (isUpdating) {
+					console.log(`[input event #${updateCount}] Skipped - already updating`)
+					return
+				}
+				isUpdating = true
 
-	function init(doc: Document) {
-		state.doc = doc
-		state.hasInit = true
-		setupEventListeners(doc)
-		updateContent('html')
-	}
+				// Clear any pending content updates
+				if (contentUpdateTimeout) {
+					console.log(`[input event #${updateCount}] Clearing previous timeout`)
+					window.clearTimeout(contentUpdateTimeout)
+				}
 
-	function handleUndo() {
-		if (state.undoStack.length === 0) return
+				contentUpdateTimeout = window.setTimeout(() => {
+					console.log(`[input event #${updateCount}] Timeout fired`)
+					const newContent = doc.body.innerHTML
+					if (newContent !== state.content) {
+						console.log(`[input event #${updateCount}] Content changed, updating state`)
+						state.content = newContent
+					} else {
+						console.log(`[input event #${updateCount}] Content unchanged`)
+					}
+					isUpdating = false
+				}, 100)
+			},
+			selectionchange: () => {
+				updateCount++
+				console.log(`[selectionchange #${updateCount}] Starting, isUpdating:`, isUpdating)
+				if (isUpdating) {
+					console.log(`[selectionchange #${updateCount}] Skipped - already updating`)
+					return
+				}
 
-		// Save current state to redo stack
-		state.redoStack.push(state.content)
+				if (selectionUpdateTimeout) {
+					console.log(`[selectionchange #${updateCount}] Clearing previous timeout`)
+					window.clearTimeout(selectionUpdateTimeout)
+				}
 
-		// Pop and apply last state from undo stack
-		const lastContent = state.undoStack.pop()
-		if (lastContent !== undefined) {
-			state.content = lastContent
-			updateContent('html')
+				selectionUpdateTimeout = window.setTimeout(() => {
+					console.log(`[selectionchange #${updateCount}] Timeout fired`)
+					if (!isUpdating) {
+						updateState.selection()
+					} else {
+						console.log(`[selectionchange #${updateCount}] Skipped - still updating`)
+					}
+				}, 150)
+			},
+			mouseup: () => {
+				updateCount++
+				console.log(`[mouseup #${updateCount}] Starting, isUpdating:`, isUpdating)
+				if (isUpdating) return
+				updateState.selection()
+			},
+			keyup: (e: KeyboardEvent) => {
+				updateCount++
+				console.log(`[keyup #${updateCount}] Key:`, e.key, 'isUpdating:', isUpdating)
+				if (isUpdating) return
+				if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+					updateState.selection()
+				}
+			}
 		}
-	}
-
-	function handleRedo() {
-		if (state.redoStack.length === 0) return
 
-		// Save current state to undo stack
-		state.undoStack.push(state.content)
+		// Only add listeners if they haven't been added yet
+		Object.entries(events).forEach(([event, handler]) => {
+			doc.addEventListener(event, handler as EventListener)
+			console.log('[setupEventListeners] Added listener for:', event)
+		})
 
-		// Pop and apply last state from redo stack
-		const nextContent = state.redoStack.pop()
-		if (nextContent !== undefined) {
-			state.content = nextContent
-			updateContent('html')
+		// Store cleanup function
+		cleanupListeners = () => {
+			console.log('[setupEventListeners] Cleaning up event listeners')
+			if (contentUpdateTimeout) window.clearTimeout(contentUpdateTimeout)
+			if (selectionUpdateTimeout) window.clearTimeout(selectionUpdateTimeout)
+			Object.entries(events).forEach(([event, handler]) => {
+				doc.removeEventListener(event, handler as EventListener)
+			})
 		}
-	}
 
-	function handleToolbarAction(action: string, value?: string) {
-		if (!state.doc) return
+		return cleanupListeners
+	}
 
-		if (action === 'undo') {
-			handleUndo()
-			return
-		}
-		if (action === 'redo') {
-			handleRedo()
-			return
-		}
-		if (action === 'fullScreen') {
-			state.isFullscreen = !state.isFullscreen
-			return
+	function init(doc: Document) {
+		console.log('[init] Starting initialization')
+		if (state.hasInit) {
+			console.log('[init] Already initialized, cleaning up first')
+			if (cleanupListeners) {
+				cleanupListeners()
+				cleanupListeners = null
+			}
 		}
-		if (action === 'splitView') {
-			state.isSplitView = !state.isSplitView
-			return
+
+		state.doc = doc
+		state.hasInit = true
+
+		// Initial setup without triggering updates
+		if (state.content) {
+			const preserved = preserveIframes(state.content)
+			doc.body.innerHTML = preserved.html
+			setTimeout(() => {
+				if (state.doc) {
+					restoreIframes(doc, state.content, preserved.iframes)
+				}
+			}, 0)
 		}
-		if (action === 'codeView') {
-			state.isCodeView = !state.isCodeView
-			return
+
+		cleanup.normalizeContent(doc)
+
+		// Set initial selection at the end
+		const range = doc.createRange()
+		const selection = doc.getSelection()
+		if (selection) {
+			range.selectNodeContents(doc.body)
+			range.collapse(false)
+			selection.removeAllRanges()
+			selection.addRange(range)
+			state.range = range.cloneRange()
+			state.selection = selection
+			state.rangeCount = selection.rangeCount
 		}
 
-		// Apply formatting based on action
-		const format = formatting(state)
-		state.doc.body.focus()
-
-		switch (action) {
-			case 'bold':
-			case 'italic':
-			case 'underline':
-				format.text(action)
-				break
-			case 'orderedList':
-				format.list('ol')
-				break
-			case 'unorderedList':
-				format.list('ul')
-				break
-			case 'blockquote':
-			case 'p':
-			case 'h1':
-			case 'h2':
-			case 'h3':
-			case 'h4':
-			case 'h5':
-			case 'h6':
-				format.block(action, action)
-				break
-			case 'insertTable': {
-				const [rows, cols] = value?.split('x').map(Number) || [3, 3]
-				insertTable(rows, cols, state)
-				break
+		// Setup event listeners immediately
+		cleanupListeners = setupEventListeners(doc)
+	}
+
+	function initDebugger() {
+		if (!state.debug) {
+			const debugInstance: EditorDebuggerInstance = new EditorDebugger()
+			const debug: EditorDebugInterface = {
+				debugger: debugInstance,
+				logCommand: (command: string, value?: string) => {
+					debugInstance.logCommand(command, value, state)
+				},
+				getSession: () => debugInstance.getSession(),
+				clearSession: () => {
+					debugInstance.clearSession()
+				},
+				downloadSession: () => {
+					debugInstance.downloadSession()
+				},
+				exportDebugWithPrompt: (message?: string) => debugInstance.exportSessionWithPrompt(message)
 			}
-			case 'deleteTable':
-				if (state.range) deleteTable(state.range)
-				break
-			case 'mergeCells':
-				if (state.range && state.doc) mergeCells(state.range, state.doc)
-				break
-			case 'splitCells':
-				if (state.range && state.doc) splitCell(state.range, state.doc)
-				break
-			case 'addRowBefore':
-			case 'addRowAfter':
-				if (state.range && state.doc) {
-					addRow(action === 'addRowBefore' ? 'before' : 'after', state.range, state.doc)
-				}
-				break
-			case 'deleteRow':
-				if (state.range) deleteRow(state.range)
-				break
-			case 'insertColumnLeft':
-			case 'insertColumnRight':
-				if (state.range) {
-					insertColumn(action === 'insertColumnLeft' ? 'before' : 'after', state.range)
-				}
-				break
-			case 'deleteColumn':
-				if (state.range) deleteColumn(state.range)
-				break
-			case 'alignLeft':
-			case 'alignCenter':
-			case 'alignRight':
-			case 'alignJustify':
-				if (state.range) {
-					alignColumn(state.range, action.replace('align', '').toLowerCase() as 'left' | 'center' | 'right' | 'justify')
-				}
-				break
-			case 'clear':
-				format.clear()
-				break
-			default:
-				format.text(action)
+			state.debug = debug
 		}
-
-		updateContent('html')
 	}
 
-	// Debug methods
-	const getDebugSession = () => editorDebugger.value?.getSession()
-	const clearDebugSession = () => editorDebugger.value?.clearSession()
-	const downloadDebugSession = () => editorDebugger.value?.downloadSession()
-	const logCommand = (command: string, value?: string) => editorDebugger.value?.logCommand(command, value, state)
-	const exportDebugWithPrompt = (message?: string) => editorDebugger.value?.exportSessionWithPrompt(message)
+	// Add cleanup on component unmount
+	if (typeof window !== 'undefined') {
+		window.addEventListener('beforeunload', () => {
+			if (cleanupListeners) {
+				cleanupListeners()
+			}
+		})
+	}
 
 	return {
 		state,
 		init,
-		handleToolbarAction,
-		updateContent,
-		handleUndo,
-		handleRedo,
-		// Debug methods
-		debug: {
-			getSession: getDebugSession,
-			clearSession: clearDebugSession,
-			downloadSession: downloadDebugSession,
-			logCommand,
-			exportDebugWithPrompt
+		updateState,
+		history,
+		initDebugger,
+		cleanup: () => {
+			if (cleanupListeners) {
+				cleanupListeners()
+				cleanupListeners = null
+			}
 		}
 	}
 }