@bagelink/vue 1.4.136 → 1.4.141

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

@@ -45,107 +45,290 @@ onUnmounted(() => {
 })
 
 function setupAutoWrapping(doc: Document) {
-	// Handle typing in empty editor
-	doc.addEventListener('input', () => {
-		// If the editor is empty or only has whitespace, wrap content in a paragraph
-		if (!doc.body.firstElementChild
-			|| (!doc.body.textContent?.trim() && !doc.body.querySelector('p,h1,h2,h3,h4,h5,h6,blockquote,ul,ol,table'))) {
-			// If there's any text content, wrap it in a paragraph
-			if (doc.body.textContent?.trim()) {
-				const p = doc.createElement('p')
-				p.dir = doc.body.dir
+	// Initialize editor with paragraph
+	if (!doc.body.innerHTML.trim()) {
+		doc.body.innerHTML = '<p><br></p>'
+	}
+
+	// After any change, ensure proper structure
+	function normalizeContent() {
+		// Only proceed if the body exists
+		if (!doc.body) {
+			return
+		}
+
+		// If body is completely empty, add a paragraph and return
+		if (!doc.body.innerHTML.trim() || doc.body.innerHTML === '') {
+			doc.body.innerHTML = '<p><br></p>'
+			return
+		}
 
-				// Move all content to the paragraph
-				while (doc.body.firstChild) {
-					p.appendChild(doc.body.firstChild)
+		// Mark body as being normalized to prevent recursive processing
+		if (doc.body.dataset.normalizing === 'true') {
+			return
+		}
+		doc.body.dataset.normalizing = 'true'
+
+		try {
+			// Only wrap loose text nodes that are direct children of body
+			const walker = doc.createTreeWalker(
+				doc.body,
+				NodeFilter.SHOW_TEXT,
+				node => {
+					// Only accept text nodes that are direct children of body
+					// AND have meaningful content
+					const parent = node.parentNode as HTMLElement
+					return (parent === doc.body &&
+						node.textContent?.trim() &&
+						node.textContent.trim().length > 0) ?
+						NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
 				}
+			)
 
-				doc.body.appendChild(p)
+			const textNodes: Text[] = []
+			let node
+			while ((node = walker.nextNode())) {
+				textNodes.push(node as Text)
+			}
 
-				// Set cursor at the end of the paragraph
-				const selection = doc.getSelection()
-				if (selection) {
-					const range = doc.createRange()
-					range.selectNodeContents(p)
-					range.collapse(false)
-					selection.removeAllRanges()
-					selection.addRange(range)
+			// Wrap loose text nodes very carefully, preserving existing structure
+			textNodes.forEach(textNode => {
+				// Triple check the node is still valid and not corrupted
+				if (textNode.parentNode === doc.body &&
+					textNode.textContent?.trim() &&
+					textNode.nodeType === Node.TEXT_NODE) {
+
+					const p = doc.createElement('p')
+					p.dir = doc.body.dir || 'ltr'
+
+					// Clone the text content to avoid any reference issues
+					const textContent = textNode.textContent
+					p.textContent = textContent
+
+					// Replace the text node with the paragraph
+					try {
+						textNode.parentNode.replaceChild(p, textNode)
+					} catch (error) {
+						// If replacement fails, just remove the problematic text node
+						textNode.parentNode.removeChild(textNode)
+					}
 				}
+			})
+
+			// Ensure empty body has a paragraph
+			if (!doc.body.children.length || !doc.body.innerHTML.trim()) {
+				doc.body.innerHTML = '<p><br></p>'
+			}
 
-				// Update editor state
-				editor.state.content = doc.body.innerHTML
+			// Clean up empty paragraphs more conservatively
+			const paras = Array.from(doc.body.querySelectorAll('p'))
+			for (let i = 0; i < paras.length; i++) {
+				const current = paras[i]
+				const isEmpty = !current.textContent?.trim() || current.innerHTML === '<br>'
+
+				if (isEmpty) {
+					// Only remove if we have consecutive empty paragraphs at the end
+					const isLastPara = i === paras.length - 1
+					const prevPara = i > 0 ? paras[i - 1] : null
+					const isPrevEmpty = prevPara && (!prevPara.textContent?.trim() || prevPara.innerHTML === '<br>')
+
+					// Keep at least one empty paragraph for cursor placement
+					if (isPrevEmpty && !isLastPara) {
+						current.remove()
+					}
+				}
 			}
+
+		} finally {
+			// Always clean up the processing flag
+			delete doc.body.dataset.normalizing
+		}
+	}
+
+	// Handle input events
+	doc.addEventListener('input', (e) => {
+		// Handle complete content deletion immediately
+		if (!doc.body.innerHTML.trim() || doc.body.innerHTML === '') {
+			doc.body.innerHTML = '<p><br></p>'
+			editor.state.content = doc.body.innerHTML
+			return
 		}
+
+		// Don't normalize during normal typing - only on paste/drop
+		const inputEvent = e as InputEvent
+		const normalizeInputTypes = ['insertFromPaste', 'insertFromDrop']
+
+		// Only normalize on paste/drop operations to avoid interfering with typing
+		if (inputEvent.inputType && normalizeInputTypes.includes(inputEvent.inputType)) {
+			// Add a delay to let the browser finish processing
+			setTimeout(() => {
+				normalizeContent()
+			}, 100)
+		}
+
+		// Always update content to keep state in sync
+		editor.state.content = doc.body.innerHTML
 	})
 
-	// Handle backspace to prevent completely empty editor
+	// Handle Enter key
 	doc.addEventListener('keydown', (e) => {
-		if (e.key === 'Backspace') {
-			// Check if this would make the editor completely empty
+		if (e.key === 'Enter') {
 			const selection = doc.getSelection()
 			if (!selection || !selection.rangeCount) return
 
 			const range = selection.getRangeAt(0)
 
-			// If we're about to delete the last block element
-			const blockElements = doc.body.querySelectorAll('p,h1,h2,h3,h4,h5,h6,blockquote,li,div')
-			if (blockElements.length <= 1) {
-				const lastBlock = blockElements[0]
-
-				// If we're in the last block and it's about to be empty
-				if (lastBlock && (
-					(lastBlock.textContent?.trim() === '' && range.collapsed)
-					|| (range.startContainer === lastBlock && range.endContainer === lastBlock
-						&& range.startOffset === 0 && range.endOffset === lastBlock.childNodes.length)
-				)) {
-					e.preventDefault()
-
-					// Clear the content but keep the block structure
-					lastBlock.innerHTML = ''
-
-					// Set cursor in the empty block
-					const newRange = doc.createRange()
-					newRange.selectNodeContents(lastBlock)
-					newRange.collapse(true)
-					selection.removeAllRanges()
-					selection.addRange(newRange)
-
-					// Update editor state
-					editor.state.content = doc.body.innerHTML
+			// Check if we're in any list context - let browser handle lists
+			let currentElement = range.startContainer
+
+			// If it's a text node, get its parent
+			if (currentElement.nodeType === Node.TEXT_NODE) {
+				currentElement = currentElement.parentElement!
+			}
+
+			// Check if we're in a list item or list container
+			const li = (currentElement as Element).closest('li')
+			const listContainer = (currentElement as Element).closest('ul, ol')
+
+			if (li || listContainer) {
+				// We're in a list context - let browser handle everything
+				return
+			}			// Find the paragraph we're in (only for confirmed non-list content)
+			let paragraph = range.startContainer
+			if (paragraph.nodeType === Node.TEXT_NODE) {
+				paragraph = paragraph.parentElement!
+			}
+			paragraph = (paragraph as Element).closest('p,h1,h2,h3,h4,h5,h6') as HTMLElement
+
+			if (!paragraph) return
+
+			// Check if current paragraph is empty and previous paragraph is also empty
+			const currentIsEmpty = !paragraph.textContent?.trim()
+			const prevSibling = (paragraph as Element).previousElementSibling as HTMLElement
+			const prevIsEmpty = prevSibling &&
+				(prevSibling.tagName === 'P') &&
+				!prevSibling.textContent?.trim()
+
+			// If both current and previous paragraphs are empty, don't create another empty paragraph
+			if (currentIsEmpty && prevIsEmpty) {
+				e.preventDefault()
+				return
+			}
+
+			// For RTL text, be more careful about splitting
+			const isRTLContent = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(paragraph.textContent || '')
+
+			// Prevent default and handle manually to avoid browser inconsistencies
+			e.preventDefault()
+			e.stopPropagation()
+
+			// Get the text content before and after cursor
+			const textBeforeCursor = range.startContainer.textContent?.substring(0, range.startOffset) || ''
+			const textAfterCursor = range.startContainer.textContent?.substring(range.startOffset) || ''
+
+			// Debug logging to understand the issue
+			if (props.debug) {
+				console.log('Enter pressed:', {
+					startContainer: range.startContainer,
+					startOffset: range.startOffset,
+					textBeforeCursor,
+					textAfterCursor,
+					paragraphContent: paragraph.textContent,
+					isRTLContent
+				})
+			}
+
+			// Create new paragraph with proper direction
+			const newParagraph = doc.createElement('p')
+			newParagraph.dir = isRTLContent ? 'rtl' : doc.body.dir || 'ltr'
+
+			// If we're splitting text, handle it carefully
+			if (range.startContainer.nodeType === Node.TEXT_NODE && textAfterCursor.trim()) {
+				// We're in the middle of text - split properly
+				const textNode = range.startContainer as Text
+
+				// Store the original parent element for formatting preservation
+				const parentElement = textNode.parentElement
+
+				// Keep text before cursor in current paragraph
+				textNode.textContent = textBeforeCursor
+
+				// Put text after cursor in new paragraph
+				if (textAfterCursor.trim()) {
+					// Preserve any formatting from the parent element
+					if (parentElement && parentElement !== paragraph) {
+						const newFormattedElement = parentElement.cloneNode(false) as HTMLElement
+						newFormattedElement.textContent = textAfterCursor
+						newParagraph.appendChild(newFormattedElement)
+					} else {
+						newParagraph.textContent = textAfterCursor
+					}
+				} else {
+					newParagraph.innerHTML = '<br>'
 				}
+			} else {
+				// We're at the end of text or in empty space
+				newParagraph.innerHTML = '<br>'
 			}
+
+			// Insert the new paragraph
+			paragraph.parentNode?.insertBefore(newParagraph, paragraph.nextSibling)
+
+			// Set cursor at the beginning of the new paragraph
+			const newRange = doc.createRange()
+			newRange.selectNodeContents(newParagraph)
+			newRange.collapse(true)
+			selection.removeAllRanges()
+			selection.addRange(newRange)
+
+			// Update content immediately to reflect changes
+			editor.state.content = doc.body.innerHTML
 		}
 	})
 
-	// Handle paste events to ensure content is properly wrapped
+	// Handle paste
 	doc.addEventListener('paste', (e) => {
+		// Give the paste operation time to complete before normalizing
 		setTimeout(() => {
-			// After paste, ensure any unwrapped text gets wrapped in 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 && node.textContent?.trim()) {
-					textNodes.push(node as Text)
-				}
-			}
-
-			textNodes.forEach((textNode) => {
-				const p = doc.createElement('p')
-				p.dir = doc.body.dir
-				p.appendChild(textNode.cloneNode())
-				doc.body.replaceChild(p, textNode)
-			})
+			normalizeContent()
+			editor.state.content = doc.body.innerHTML
+		}, 150) // Longer timeout for reliable paste processing
+	})
 
-			// Update editor state if changes were made
-			if (textNodes.length > 0) {
-				editor.state.content = doc.body.innerHTML
+	// Add a MutationObserver to catch structural changes that might create loose text
+	const observer = new MutationObserver((mutations) => {
+		for (const mutation of mutations) {
+			if (mutation.type === 'childList') {
+				// Check if any loose text nodes were added to body
+				Array.from(mutation.addedNodes).forEach(addedNode => {
+					if (addedNode.nodeType === Node.TEXT_NODE &&
+						addedNode.parentNode === doc.body &&
+						addedNode.textContent?.trim()) {
+						// Wrap loose text node immediately
+						const p = doc.createElement('p')
+						p.dir = doc.body.dir || 'ltr'
+						p.textContent = addedNode.textContent
+						addedNode.parentNode.replaceChild(p, addedNode)
+						editor.state.content = doc.body.innerHTML
+					}
+				})
 			}
-		}, 0)
+		}
+	})
+
+	// Start observing
+	observer.observe(doc.body, {
+		childList: true,
+		subtree: false // Only watch direct children of body
 	})
+
+	// Store observer for cleanup
+	if (!doc.body.dataset.observers) {
+		doc.body.dataset.observers = 'mutation'
+	}
 }
 
-async function initEditor() {
+const initEditor = async () => {
 	if (isInitializing.value || !iframe.value || hasInitialized.value) {
 		return
 	}
@@ -230,6 +413,25 @@ async function initEditor() {
 		// Update state.content after cleanup
 		editor.state.content = doc.body.innerHTML
 
+		// If editor is empty, add an initial paragraph
+		if (!doc.body.innerHTML.trim() || !doc.body.querySelector('p,h1,h2,h3,h4,h5,h6,blockquote,ul,ol,table')) {
+			const p = doc.createElement('p')
+			p.dir = doc.body.dir
+			doc.body.appendChild(p)
+
+			// Set cursor in the new paragraph
+			const range = doc.createRange()
+			range.selectNodeContents(p)
+			range.collapse(true)
+			const selection = doc.getSelection()
+			if (selection) {
+				selection.removeAllRanges()
+				selection.addRange(range)
+			}
+
+			editor.state.content = doc.body.innerHTML
+		}
+
 		doc.body.focus()
 		hasInitialized.value = true
 	} catch (error) {

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

@@ -52,6 +52,11 @@ export type FormattingCommand =
 	| 'table'
 	| 'splitView'
 	| 'codeView'
+	| 'textDirection'
+	| 'alignLeft'
+	| 'alignCenter'
+	| 'alignRight'
+	| 'alignJustify'
 
 export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'