@bagelink/vue 1.17.2 → 1.18.3

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

@@ -1,35 +1,24 @@
 import type { EditorState, EditorDebugInterface, EditorDebuggerInstance } from '../richTextTypes'
 import { reactive } from 'vue'
 import { EditorDebugger } from '../utils/debug'
-import { isStyleActive } from '../utils/selection'
+import { computeActiveStyles } from '../utils/selection'
 
-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
-	}
+export function restoreHistoryNodes(doc: Document, html: string) {
+	const parsed = new DOMParser().parseFromString(html, 'text/html')
+	doc.body.replaceChildren(...Array.from(parsed.body.childNodes).map(n => doc.importNode(n, true)))
+	const addButtons = (doc as any).__addEditButtonsToTables as (() => void) | undefined
+	addButtons?.()
 }
 
-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 pushHistorySnapshot(state: EditorState, snapshot: string) {
+	if (state.undoStack[state.undoStack.length - 1] === snapshot) {
+		return
+	}
+	state.undoStack.push(snapshot)
+	state.redoStack = []
+	if (state.undoStack.length > 50) {
+		state.undoStack.shift()
+	}
 }
 
 export function useEditor() {
@@ -51,75 +40,34 @@ export function useEditor() {
 		debug: undefined
 	})
 
-	// Centralized state update functions
 	const updateState = {
 		styles: () => {
 			if (!state.doc) { return }
-			const styles = new Set<string>()
-			const styleTypes = [
-				'bold',
-				'italic',
-				'underline',
-				'h1',
-				'h2',
-				'h3',
-				'h4',
-				'h5',
-				'h6',
-				'blockquote',
-				'p',
-				'orderedList',
-				'unorderedList',
-				'alignLeft',
-				'alignCenter',
-				'alignRight',
-				'alignJustify',
-				'textDirection',
-				'ltrDirection',
-				'rtlDirection'
-			]
-			styleTypes.forEach((style) => {
-				if (state.doc && isStyleActive(style, state.doc)) {
-					styles.add(style)
-				}
-			})
-			state.selectedStyles = styles
+			state.selectedStyles = computeActiveStyles(state.doc)
 		},
 		content: (source: 'html' | 'text') => {
 			if (!state.doc) { return }
 
-			// Only push to undo stack if content has changed
 			const currentContent = state.doc.body.innerHTML
 			if (currentContent !== state.content) {
-				state.undoStack.push(state.content)
-				state.redoStack = []
+				pushHistorySnapshot(state, currentContent)
 			}
 
-			// Store current selection
 			const selection = state.doc.getSelection()
 			const range = selection?.rangeCount ? selection.getRangeAt(0).cloneRange() : null
 
 			if (source === 'html') {
-				// Preserve iframes before setting content
-				const preserved = preserveIframes(state.content)
-				state.doc.body.innerHTML = preserved.html
-
-				// Restore iframes after a short delay to ensure the document is ready
-				setTimeout(() => {
-					if (state.doc) {
-						restoreIframes(state.doc, state.content, preserved.iframes)
-
-						// Restore selection if it existed
-						if (range && selection) {
-							try {
-								selection.removeAllRanges()
-								selection.addRange(range)
-							} catch {
-							// Range restoration failed, ignore
-							}
-						}
+				state.doc.body.innerHTML = state.content
+				const addButtons = (state.doc as any).__addEditButtonsToTables as (() => void) | undefined
+				addButtons?.()
+				if (range && selection) {
+					try {
+						selection.removeAllRanges()
+						selection.addRange(range)
+					} catch {
+						// Ignore range restoration errors when structure changed
 					}
-				}, 0)
+				}
 			} else {
 				state.doc.body.textContent = state.content
 			}
@@ -133,11 +81,9 @@ export function useEditor() {
 
 			try {
 				if (!state.doc.body.contains(newSelection.anchorNode)) {
-					state.doc.body.focus()
 					return
 				}
 
-				// Only update if selection has actually changed
 				const hasSelectionChanged = !state.selection
 					|| state.selection !== newSelection
 					|| state.rangeCount !== newSelection.rangeCount
@@ -156,7 +102,6 @@ export function useEditor() {
 						state.range = newSelection.getRangeAt(0).cloneRange()
 					}
 
-					// Update styles immediately for better responsiveness
 					updateState.styles()
 				}
 			} catch {
@@ -168,57 +113,29 @@ export function useEditor() {
 		}
 	}
 
-	// History management
 	const history = {
 		undo: () => {
-			if (state.undoStack.length === 0) { return }
-			state.redoStack.push(state.content)
+			if (state.undoStack.length === 0 || !state.doc) { return }
 			const lastContent = state.undoStack.pop()
 			if (lastContent !== undefined) {
+				state.redoStack.push(state.content)
 				state.content = lastContent
-				updateState.content('html')
+				restoreHistoryNodes(state.doc, lastContent)
 			}
 		},
 		redo: () => {
-			if (state.redoStack.length === 0) { return }
-			state.undoStack.push(state.content)
+			if (state.redoStack.length === 0 || !state.doc) { return }
 			const nextContent = state.redoStack.pop()
 			if (nextContent !== undefined) {
+				state.undoStack.push(state.content)
 				state.content = nextContent
-				updateState.content('html')
+				restoreHistoryNodes(state.doc, nextContent)
 			}
 		}
 	}
 
-	// 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) {
-				if (['br', 'img', 'hr', 'input'].includes(node.tagName.toLowerCase())) {
-					node = walker.nextNode() as Element
-					continue
-				}
-
-				const textContent = node.textContent?.trim() || ''
-				const innerHTML = node.innerHTML.trim()
-				const hasOnlyBr = innerHTML === '<br>' || innerHTML === '<br/>'
-				const hasOnlyNbsp = innerHTML === '&nbsp;' || textContent === '\u00A0'
-				const isEmpty = !textContent && !innerHTML
-				const isDirectChildOfBody = node.parentElement === doc.body
-
-				if (isEmpty || hasOnlyNbsp || (hasOnlyBr && !isDirectChildOfBody)) {
-					nodesToRemove.push(node)
-				}
-				node = walker.nextNode() as Element
-			}
-			nodesToRemove.forEach((node) => { node.remove() })
-		},
 		normalizeContent: (doc: Document) => {
-			// Only normalize direct text nodes to paragraphs, don't force any structure
 			const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
 			const textNodes: Text[] = []
 			let node: Node | null
@@ -237,52 +154,29 @@ export function useEditor() {
 	}
 
 	function setupEventListeners(doc: Document) {
-		// Clean up existing listeners if they exist
 		if (cleanupListeners) {
 			cleanupListeners()
 			cleanupListeners = null
 		}
 
-		let isUpdating = false
-
 		const events = {
-			input: () => {
-				if (isUpdating) { return }
-				isUpdating = true
-
-				// Immediately update content
-				const newContent = doc.body.innerHTML
-				if (newContent !== state.content) {
-					state.content = newContent
-				}
-
-				isUpdating = false
-			},
 			selectionchange: () => {
-				if (!isUpdating) {
-					updateState.selection()
-				}
+				updateState.selection()
 			},
 			mouseup: () => {
-				if (!isUpdating) {
-					updateState.selection()
-				}
+				updateState.selection()
 			},
 			keyup: (e: KeyboardEvent) => {
-				if (!isUpdating) {
-					if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
-						updateState.selection()
-					}
+				if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+					updateState.selection()
 				}
 			}
 		}
 
-		// Only add listeners if they haven't been added yet
 		Object.entries(events).forEach(([event, handler]) => {
 			doc.addEventListener(event, handler as EventListener)
 		})
 
-		// Store cleanup function
 		cleanupListeners = () => {
 			Object.entries(events).forEach(([event, handler]) => {
 				doc.removeEventListener(event, handler as EventListener)
@@ -293,34 +187,25 @@ export function useEditor() {
 	}
 
 	function init(doc: Document) {
-		if (state.hasInit) {
-			if (cleanupListeners) {
-				cleanupListeners()
-				cleanupListeners = null
-			}
+		if (state.hasInit && cleanupListeners) {
+			cleanupListeners()
+			cleanupListeners = null
 		}
 
 		state.doc = doc
-		state.hasInit = true as const
+		state.hasInit = true
 
-		// Store state reference in document for table operations
-		(doc as any).editorState = state
+		;(doc as any).editorState = state
 
-		// Initial setup without triggering updates - only set content if it exists and is not just empty paragraphs
 		if (state.content && state.content.trim()
 			&& !state.content.match(/^<p(?:\s[^>]*)?>(?:<br\s*\/?>)?\s*<\/p>$/i)) {
-			const preserved = preserveIframes(state.content)
-			doc.body.innerHTML = preserved.html
-			setTimeout(() => {
-				if (state.doc) {
-					restoreIframes(doc, state.content, preserved.iframes)
-				}
-			}, 0)
+			if (doc.body.innerHTML !== state.content) {
+				doc.body.innerHTML = state.content
+			}
 		}
 
 		cleanup.normalizeContent(doc)
 
-		// Set initial selection only if there's content
 		if (doc.body.firstElementChild) {
 			const range = doc.createRange()
 			const selection = doc.getSelection()
@@ -334,7 +219,6 @@ export function useEditor() {
 				state.rangeCount = selection.rangeCount
 			}
 		} else {
-			// For empty editor, set cursor at the beginning of body
 			const selection = doc.getSelection()
 			if (selection) {
 				const range = doc.createRange()
@@ -348,7 +232,6 @@ export function useEditor() {
 			}
 		}
 
-		// Setup event listeners immediately
 		cleanupListeners = setupEventListeners(doc)
 	}
 
@@ -373,15 +256,6 @@ export function useEditor() {
 		}
 	}
 
-	// Add cleanup on component unmount
-	if (typeof window !== 'undefined') {
-		window.addEventListener('beforeunload', () => {
-			if (cleanupListeners) {
-				cleanupListeners()
-			}
-		})
-	}
-
 	return {
 		state,
 		init,

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

@@ -1,4 +1,5 @@
 import type { CommandExecutor } from '../utils/commands'
+import { addRow, buildTableGrid, findCellCoords, focusTableCell, resolveCellFromNode } from '../utils/table'
 
 interface KeyboardShortcut {
 	key: string
@@ -29,17 +30,91 @@ const shortcuts: KeyboardShortcut[] = [
 	}))
 ]
 
-export function useEditorKeyboard(doc: Document, executor: CommandExecutor): void {
-	// Handle keyboard shortcuts
-	doc.addEventListener('keydown', (e) => {
-		// Remove Enter key handling from here - it's handled in setupAutoWrapping in index.vue
-		// This was causing conflicts with the main Enter key handler
+export function useEditorKeyboard(doc: Document, executor: CommandExecutor): () => void {
+	const previousCleanup = (doc as any).__keyboardCleanup as (() => void) | undefined
+	previousCleanup?.()
 
-		// Handle other keyboard shortcuts
+	const onKeyDown = (e: KeyboardEvent) => {
+		if (e.isComposing || e.keyCode === 229) {
+			return
+		}
+
+		const selection = doc.getSelection()
+		const range = selection?.rangeCount ? selection.getRangeAt(0) : null
+		const activeCell = range ? resolveCellFromNode(range.startContainer) : null
+
+		// Table Tab / Shift+Tab navigation
+		if (e.key === 'Tab' && activeCell) {
+			const table = activeCell.closest('table') as HTMLTableElement | null
+			if (table) {
+				e.preventDefault()
+				const cells = Array.from(table.querySelectorAll<HTMLTableCellElement>('th, td'))
+				const currentIndex = cells.indexOf(activeCell)
+				if (currentIndex === -1) { return }
+
+				if (e.shiftKey) {
+					if (currentIndex > 0) {
+						focusTableCell(cells[currentIndex - 1], false)
+					}
+				} else {
+					if (currentIndex < cells.length - 1) {
+						focusTableCell(cells[currentIndex + 1], false)
+					} else {
+						// At the last cell of the table: insert a new row below and move cursor to its first cell
+						const newRow = addRow('after', range, doc, activeCell)
+						const firstNewCell = newRow?.cells[0]
+						if (firstNewCell) {
+							focusTableCell(firstNewCell, true)
+						}
+					}
+				}
+				return
+			}
+		}
+
+		// Table ArrowUp / ArrowDown boundary escape when table is at start or end of document
+		if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && activeCell && range?.collapsed) {
+			const table = activeCell.closest('table') as HTMLTableElement | null
+			if (table) {
+				const map = buildTableGrid(table)
+				const coords = findCellCoords(map, activeCell)
+				const containerEl = (table.closest('.table-wrapper') || table) as HTMLElement
+
+				if (coords && e.key === 'ArrowUp' && coords.row === 0 && !containerEl.previousElementSibling) {
+					e.preventDefault()
+					const p = doc.createElement('p')
+					p.dir = doc.body.dir || 'ltr'
+					p.innerHTML = '<br>'
+					containerEl.insertAdjacentElement('beforebegin', p)
+					const nextRange = doc.createRange()
+					nextRange.selectNodeContents(p)
+					nextRange.collapse(true)
+					selection?.removeAllRanges()
+					selection?.addRange(nextRange)
+					return
+				}
+
+				if (coords && e.key === 'ArrowDown' && coords.row + coords.rowspan >= map.rowCount && !containerEl.nextElementSibling) {
+					e.preventDefault()
+					const p = doc.createElement('p')
+					p.dir = doc.body.dir || 'ltr'
+					p.innerHTML = '<br>'
+					containerEl.insertAdjacentElement('afterend', p)
+					const nextRange = doc.createRange()
+					nextRange.selectNodeContents(p)
+					nextRange.collapse(true)
+					selection?.removeAllRanges()
+					selection?.addRange(nextRange)
+					return
+				}
+			}
+		}
+
+		// Handle modifier keyboard shortcuts
 		if (!e.ctrlKey && !e.metaKey) { return }
 
 		const matchingShortcut = shortcuts.find((shortcut) => {
-			const keyMatch = shortcut.key === e.key
+			const keyMatch = shortcut.key.toLowerCase() === e.key.toLowerCase()
 			const modifiersMatch = Boolean(shortcut.modifiers?.alt) === e.altKey
 				&& Boolean(shortcut.modifiers?.shift) === e.shiftKey
 			return keyMatch && modifiersMatch
@@ -47,13 +122,14 @@ export function useEditorKeyboard(doc: Document, executor: CommandExecutor): voi
 
 		if (matchingShortcut) {
 			e.preventDefault()
-			// Keep text editing history scoped to the iframe. The browser groups
-			// typing into granular transactions, while the editor's HTML snapshot
-			// history is intended for structural toolbar operations.
-			if (matchingShortcut.command === 'undo' || matchingShortcut.command === 'redo') {
-				if (doc.execCommand(matchingShortcut.command)) { return }
-			}
 			executor.execute(matchingShortcut.command)
 		}
-	})
+	}
+
+	doc.addEventListener('keydown', onKeyDown)
+	const cleanup = () => {
+		doc.removeEventListener('keydown', onKeyDown)
+	}
+	;(doc as any).__keyboardCleanup = cleanup
+	return cleanup
 }