@bagelink/vue 1.4.64 → 1.4.71

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

@@ -44,6 +44,107 @@ onUnmounted(() => {
 	editor.cleanup()
 })
 
+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
+
+				// Move all content to the paragraph
+				while (doc.body.firstChild) {
+					p.appendChild(doc.body.firstChild)
+				}
+
+				doc.body.appendChild(p)
+
+				// 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)
+				}
+
+				// Update editor state
+				editor.state.content = doc.body.innerHTML
+			}
+		}
+	})
+
+	// Handle backspace to prevent completely empty editor
+	doc.addEventListener('keydown', (e) => {
+		if (e.key === 'Backspace') {
+			// Check if this would make the editor completely empty
+			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
+				}
+			}
+		}
+	})
+
+	// Handle paste events to ensure content is properly wrapped
+	doc.addEventListener('paste', (e) => {
+		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)
+			})
+
+			// Update editor state if changes were made
+			if (textNodes.length > 0) {
+				editor.state.content = doc.body.innerHTML
+			}
+		}, 0)
+	})
+}
+
 async function initEditor() {
 	if (isInitializing.value || !iframe.value || hasInitialized.value) {
 		return
@@ -103,37 +204,31 @@ async function initEditor() {
 		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)
-			// Update state.content after changes
-			editor.state.content = doc.body.innerHTML
-		} 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)
-				}
+		// Clean up any existing content and convert 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)
-				}
-			})
-			// Update state.content after cleanup
-			editor.state.content = doc.body.innerHTML
 		}
+		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)
+			}
+		})
+
+		// Setup auto-wrapping for typed content
+		setupAutoWrapping(doc)
+
+		// Update state.content after cleanup
+		editor.state.content = doc.body.innerHTML
 
 		doc.body.focus()
 		hasInitialized.value = true
@@ -163,32 +258,39 @@ watch(() => editor.state.content, (newValue) => {
 	}
 	emit('update:modelValue', newValue)
 })
+
+// Expose for testing
+defineExpose({
+	editor,
+	commands
+})
 </script>
 
 <template>
 	<div class="bagel-input">
 		<label>{{ label }}</label>
-		<div class="rich-text-editor rounded pt-05 px-05 pb-075" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
+
+		<div
+			class="rich-text-editor rounded pt-05 px-05 pb-075"
+			:class="{ 'fullscreen-mode': editor.state.isFullscreen }"
+		>
 			<EditorToolbar
-				v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
-				@action="commands.execute"
+				v-if="editor.state.hasInit" :config="toolbarConfig"
+				:selectedStyles="editor.state.selectedStyles" @action="commands.execute"
 			/>
 			<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
-				<div class="content-area radius-05" :style="{ height: editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight }">
+				<div
+					class="content-area radius-05"
+					:style="{ height: editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight }"
+				>
 					<iframe
-						id="rich-text-iframe"
-						ref="iframe"
-						class="editableContent"
-						title="Editor"
-						srcdoc=""
+						id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" srcdoc=""
 						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"
 						@load="initEditor"
 					/>
 				</div>
 				<CodeEditor
-					v-if="editor.state.isSplitView"
-					v-model="editor.state.content"
-					language="html"
+					v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
 					:height="editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight"
 					@update:modelValue="editor.updateState.content('html')"
 				/>
@@ -203,7 +305,10 @@ watch(() => editor.state.content, (newValue) => {
 				<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
 					Download Log
 				</Btn>
-				<Btn thin color="gray" icon="content_copy" @click="copyText(debugMethods?.exportDebugWithPrompt() || '')">
+				<Btn
+					thin color="gray" icon="content_copy"
+					@click="copyText(debugMethods?.exportDebugWithPrompt() || '')"
+				>
 					Copy Log
 				</Btn>
 			</div>
@@ -214,7 +319,7 @@ watch(() => editor.state.content, (newValue) => {
 <style>
 .content-area p,
 .content-area span,
-.content-area li{
+.content-area li {
 	line-height: 1.65;
 }
 </style>