@bagelink/vue 1.4.139 → 1.4.145

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

@@ -2,44 +2,240 @@
 import type { ToolbarConfig, ToolbarConfigOption, ToolbarOption } from '../richTextTypes'
 import { Btn, Dropdown } from '@bagelink/vue'
 import { basicToolbarConfig, toolbarOptions } from '../config'
-import GridBox from './gridBox.vue'
+import TableGridSelector from './TableGridSelector.vue'
 
-const { config = basicToolbarConfig, selectedStyles } = defineProps<{
+const {
+	config = basicToolbarConfig,
+	selectedStyles,
+	hideImages = false,
+	hideVideos = false,
+	hideEmbeds = false,
+	hideTables = false,
+	hideAlignment = false,
+	hideDirections = false,
+	hideH5H6 = false,
+	hide = []
+} = defineProps<{
 	config?: ToolbarConfig
 	selectedStyles: Set<string>
+	hideImages?: boolean
+	hideVideos?: boolean
+	hideEmbeds?: boolean
+	hideTables?: boolean
+	hideAlignment?: boolean
+	hideDirections?: boolean
+	hideH5H6?: boolean
+	hide?: string[]
 }>()
 const emit = defineEmits(['action'])
 
-const configToOption = (action: ToolbarConfigOption) => toolbarOptions.find(option => option.name === action) as ToolbarOption
+// Function to get the current alignment icon based on active styles
+function getCurrentAlignmentIcon(): string {
+	if (selectedStyles.has('alignLeft')) return 'format_align_left'
+	if (selectedStyles.has('alignCenter')) return 'format_align_center'
+	if (selectedStyles.has('alignRight')) return 'format_align_right'
+	if (selectedStyles.has('alignJustify')) return 'format_align_justify'
+	return 'format_align_left' // default
+}
+
+// Function to check if any alignment is active
+function isAlignmentActive(): boolean {
+	return selectedStyles.has('alignLeft') ||
+		selectedStyles.has('alignCenter') ||
+		selectedStyles.has('alignRight') ||
+		selectedStyles.has('alignJustify')
+}
+
+// Helper function to check if an action should be hidden
+function shouldHideAction(actionName: string): boolean {
+	// Check if it's in the hide array - this covers ALL items including:
+	// bold, italic, underline, h1, h2, h3, h4, h5, h6, link, image, video, embed, 
+	// ul, ol, blockquote, code, clear, direction, table, fullScreen
+	if (hide.includes(actionName)) return true
+
+	// Alternative name mappings for some actions
+	const alternativeNames: Record<string, string[]> = {
+		'image': ['insertImage', 'image'],
+		'video': ['insertVideo', 'video'],
+		'embed': ['insertEmbed', 'embed'],
+		'table': ['insertTable'],
+		'direction': ['textDirection'],
+		'fullScreen': ['fullScreen'],
+		'ul': ['unorderedList'],
+		'ol': ['orderedList'],
+		'splitView': ['splitView'],
+		'p': ['p'],
+		'align': ['alignMenu'],
+		'alignment': ['alignMenu']
+	}
+
+	// Check alternative names
+	for (const [hideKey, actionNames] of Object.entries(alternativeNames)) {
+		if (hide.includes(hideKey) && actionNames.includes(actionName)) {
+			return true
+		}
+	}
+
+	// Map action names to check against specific hide props (for backward compatibility)
+	const actionMap: Record<string, boolean> = {
+		'insertImage': hideImages,
+		'insertVideo': hideVideos,
+		'insertEmbed': hideEmbeds,
+		'insertTable': hideTables,
+		'alignMenu': hideAlignment,
+		'textDirection': hideDirections,
+		'h5': hideH5H6,
+		'h6': hideH5H6
+	}
+
+	return actionMap[actionName] || false
+}
+
+// Helper function to check if a separator should be shown
+function shouldShowSeparator(currentIndex: number): boolean {
+	const allActions = config.map(configToOption).filter(Boolean)
+
+	// Simple approach: find the last visible item before this separator
+	let lastVisibleBeforeIndex = -1
+	for (let i = currentIndex - 1; i >= 0; i--) {
+		const action = allActions[i]
+		if (action && action.name !== 'separator' && !shouldHideAction(action.name)) {
+			lastVisibleBeforeIndex = i
+			break
+		}
+	}
+
+	// Find the first visible item after this separator
+	let firstVisibleAfterIndex = -1
+	for (let i = currentIndex + 1; i < allActions.length; i++) {
+		const action = allActions[i]
+		if (action && action.name !== 'separator' && !shouldHideAction(action.name)) {
+			firstVisibleAfterIndex = i
+			break
+		}
+	}
+
+	// Don't show if we don't have visible items on both sides
+	if (lastVisibleBeforeIndex === -1 || firstVisibleAfterIndex === -1) {
+		return false
+	}
+
+	// Check if there's already a visible separator between these items
+	for (let i = lastVisibleBeforeIndex + 1; i < currentIndex; i++) {
+		const action = allActions[i]
+		if (action && action.name === 'separator') {
+			// There's already a separator closer to the visible items
+			return false
+		}
+	}
+
+	return true
+} const configToOption = (action: ToolbarConfigOption) => toolbarOptions.find(option => option.name === action) as ToolbarOption
 
 function runAction(name: ToolbarConfigOption, value?: string) {
+	console.log('EditorToolbar: runAction called', { name, value })
 	emit('action', name, value)
 }
+
+function handleQuickTableInsert(rows: number, cols: number) {
+	// Create a simple table quickly
+	const table = document.createElement('table')
+	table.style.width = '100%'
+	table.style.borderCollapse = 'collapse'
+	table.style.marginBottom = '1rem'
+
+	// Add header
+	const thead = document.createElement('thead')
+	const headerRow = thead.insertRow()
+	for (let j = 0; j < cols; j++) {
+		const th = document.createElement('th')
+		th.innerHTML = `Header ${j + 1}`
+		th.style.padding = '8px'
+		th.style.border = '1px solid #ddd'
+		th.style.backgroundColor = '#f4f4f4'
+		headerRow.appendChild(th)
+	}
+	table.appendChild(thead)
+
+	// Add body
+	const tbody = document.createElement('tbody')
+	for (let i = 0; i < rows; i++) {
+		const row = tbody.insertRow()
+		for (let j = 0; j < cols; j++) {
+			const cell = row.insertCell()
+			cell.innerHTML = '&nbsp;'
+			cell.style.padding = '8px'
+			cell.style.border = '1px solid #ddd'
+		}
+	}
+	table.appendChild(tbody)
+
+	emit('action', 'insertTable', table.outerHTML)
+}
+
+function handleOpenAdvanced() {
+	// The advanced table editor is now handled by the main RichText component
+	// through the insertTable command which opens the main modal
+	emit('action', 'insertTable')
+}
 </script>
 
 <template>
-	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
-		<template v-for="(action, index) in config.map(configToOption).filter(Boolean)" :key="index">
-			<Dropdown v-if="action.name === 'insertTable'" placement="bottom-start" thin flat icon="table">
-				<template #default="{ hide }">
-					<GridBox
-						:gridSize="5" @select="(value) => {
-							runAction('insertTable', value);
-							hide();
-						}"
-					/>
-				</template>
-			</Dropdown>
-			<Btn
-				v-else-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
-				:aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]"
-				class=""
-				tabindex="-1"
-				@click="runAction(action.name)"
-			/>
-			<span v-else-if="action.name === 'separator'" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>
-		</template>
-	</div>
+<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar" style="position: relative;">
+	<template v-for="(action, index) in config.map(configToOption).filter(Boolean)" :key="index">
+		<!-- Tables -->
+		<TableGridSelector v-if="action.name === 'insertTable' && !shouldHideAction('insertTable')" @insert="handleQuickTableInsert" @open-advanced="handleOpenAdvanced" />
+		<!-- Images -->
+		<Btn v-else-if="action.name === 'insertImage' && !shouldHideAction('insertImage')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- Videos -->
+		<Btn v-else-if="action.name === 'insertVideo' && !shouldHideAction('insertVideo')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- Embeds -->
+		<Btn v-else-if="action.name === 'insertEmbed' && !shouldHideAction('insertEmbed')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- Alignment Menu -->
+		<Dropdown v-else-if="action.name === 'alignMenu' && !shouldHideAction('alignMenu')" placement="bottom-start" thin flat :icon="getCurrentAlignmentIcon()"
+			:class="{ 'alignment-active': isAlignmentActive() }">
+			<template #default="{ hide }">
+				<div class="flex flex-column p-025">
+					<Btn thin flat icon="format_align_left" :class="{ active: selectedStyles.has('alignLeft') }" @click="runAction('alignLeft'); hide()" />
+					<Btn thin flat icon="format_align_center" :class="{ active: selectedStyles.has('alignCenter') }" @click="runAction('alignCenter'); hide()" />
+					<Btn thin flat icon="format_align_right" :class="{ active: selectedStyles.has('alignRight') }" @click="runAction('alignRight'); hide()" />
+					<Btn thin flat icon="format_align_justify" :class="{ active: selectedStyles.has('alignJustify') }" @click="runAction('alignJustify'); hide()" />
+				</div>
+			</template>
+		</Dropdown>
+
+		<!-- Text Direction -->
+		<Btn v-else-if="action.name === 'textDirection' && !shouldHideAction('textDirection')" v-tooltip="action.label"
+			:icon="selectedStyles.has('textDirection') ? 'format_textdirection_l_to_r' : 'format_textdirection_r_to_l'" thin flat :aria-label="action.name"
+			:class="[action.class, { active: selectedStyles.has('textDirection') }]" class="" tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- H5 and H6 -->
+		<Btn v-else-if="(action.name === 'h5' || action.name === 'h6') && !shouldHideAction(action.name)" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- All other buttons - check if they should be hidden by the hide array -->
+		<Btn v-else-if="action.name !== 'separator' &&
+			action.name !== 'insertTable' &&
+			action.name !== 'insertImage' &&
+			action.name !== 'insertVideo' &&
+			action.name !== 'insertEmbed' &&
+			action.name !== 'alignMenu' &&
+			action.name !== 'textDirection' &&
+			action.name !== 'h5' &&
+			action.name !== 'h6' &&
+			!shouldHideAction(action.name)" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]" class=""
+			tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- Separator -->
+		<span v-else-if="action.name === 'separator' && shouldShowSeparator(index)" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>
+	</template>
+</div>
 </template>
 
 <style scoped>
@@ -48,8 +244,28 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 	color: white;
 }
 .toolbar :deep(.active):hover {
-	color: var(--bgl-black);
+	background: var(--bgl-primary) !important;
+		color: white;
+}
+/* Headings menu styling */
+.toolbar :deep(.dropdown-content) {
+	min-width: 40px;
+}
+
+.toolbar :deep(.dropdown-content .btn) {
+	min-width: 32px;
+	height: 32px;
+	padding: 0;
+}
+/* Alignment active state */
+.alignment-active :deep(button) {
+	background: var(--bgl-primary) !important;
+	color: white !important;
+}
+
+.alignment-active :deep(button:hover) {
+	background: var(--bgl-primary) !important;
+	color: white !important;
 }
 </style>
 
-<style scoped></style>

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Btn, Dropdown } from '@bagelink/vue'
+
+
+const emit = defineEmits<{
+    insert: [rows: number, cols: number]
+    openAdvanced: []
+}>()
+
+const hoveredRow = ref(0)
+const hoveredCol = ref(0)
+
+const maxRows = 10
+const maxCols = 10
+
+const gridCells = computed(() => {
+    const cells = []
+    for (let row = 1; row <= maxRows; row++) {
+        for (let col = 1; col <= maxCols; col++) {
+            cells.push({
+                row,
+                col,
+                isActive: row <= hoveredRow.value && col <= hoveredCol.value
+            })
+        }
+    }
+    return cells
+})
+
+const selectionText = computed(() => {
+    if (hoveredRow.value === 0 || hoveredCol.value === 0) {
+        return 'Select table size'
+    }
+    return `${hoveredRow.value} × ${hoveredCol.value}`
+})
+
+const handleCellHover = (row: number, col: number) => {
+    hoveredRow.value = row
+    hoveredCol.value = col
+}
+
+const handleCellClick = (row: number, col: number, hide: () => void) => {
+    emit('insert', row, col)
+    hide()
+}
+
+const handleAdvanced = (hide: () => void) => {
+    emit('openAdvanced')
+    hide()
+}
+
+const handleMouseLeave = () => {
+    hoveredRow.value = 0
+    hoveredCol.value = 0
+}
+</script>
+
+<template>
+<Dropdown placement="bottom-start" thin flat icon="table">
+    <template #default="{ hide }">
+        <div class="table-grid-selector p-075">
+            <!-- Header -->
+            <div class="txt-center mb-075">
+                <div style="font-size: 14px; font-weight: 500; color: #333; margin-bottom: 4px;">
+                    {{ selectionText }}
+                </div>
+                <div style="font-size: 12px; color: #666;">
+                    Hover to select size
+                </div>
+            </div>
+
+            <!-- Grid -->
+            <div style="display: grid; grid-template-columns: repeat(10, 20px); grid-template-rows: repeat(10, 20px); gap: 2px; margin-bottom: 12px; direction: ltr;" @mouseleave="handleMouseLeave">
+                <div v-for="cell in gridCells" :key="`${cell.row}-${cell.col}`" @mouseenter="handleCellHover(cell.row, cell.col)" @click="handleCellClick(cell.row, cell.col, hide)" :style="{
+                    width: '20px',
+                    height: '20px',
+                    border: '1px solid #ddd',
+                    backgroundColor: cell.isActive ? 'var(--bgl-primary)' : '#fff',
+                    cursor: 'pointer',
+                                    borderRadius: '2px',
+                                    transition: 'background-color 0.1s ease'
+                                }">
+                </div>
+                </div>
+                
+                <!-- Advanced button -->
+                <div class="border-top pt-075">
+                    <Btn @click="handleAdvanced(hide)" value="Advanced Settings" icon="settings" class="bg-gray-30 color-black" />
+                </div>
+                </div>
+                </template>
+                </Dropdown>
+</template>

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

@@ -1,10 +1,49 @@
 import type { EditorState } from '../richTextTypes'
 import { createCommandExecutor, createCommandRegistry } from '../utils/commands'
+import { isStyleActive } from '../utils/selection'
 
 export function useCommands(state: EditorState, debug?: { logCommand: (command: string, value?: string) => void }) {
 	const commands = createCommandRegistry(state)
 	const executor = createCommandExecutor(state, commands)
 
+	// Function to immediately update styles
+	const updateStylesImmediately = () => {
+		if (!state.doc) return
+
+		const styles = new Set<string>()
+		const styleTypes = [
+			'bold',
+			'italic',
+			'underline',
+			'link',
+			'h1',
+			'h2',
+			'h3',
+			'h4',
+			'h5',
+			'h6',
+			'blockquote',
+			'p',
+			'orderedList',
+			'unorderedList',
+			'alignLeft',
+			'alignCenter',
+			'alignRight',
+			'alignJustify',
+			'textDirection',
+			'ltrDirection',
+			'rtlDirection'
+		]
+
+		styleTypes.forEach((style) => {
+			if (isStyleActive(style, state.doc!)) {
+				styles.add(style)
+			}
+		})
+
+		state.selectedStyles = styles
+	}
+
 	return {
 		execute: (command: string, value?: string) => {
 			if (!state.doc) {
@@ -48,6 +87,12 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			// Execute the command
 			try {
 				executor.execute(command, value)
+
+				// Update styles immediately after command execution for all commands except view state
+				const viewCommands = ['splitView', 'codeView', 'fullScreen']
+				if (!viewCommands.includes(command)) {
+					updateStylesImmediately()
+				}
 			} catch (e) {
 				console.error('[useCommands] Error during command execution:', e)
 			}

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

@@ -1,5 +1,4 @@
 import type { EditorState, EditorDebugInterface, EditorDebuggerInstance } from '../richTextTypes'
-import { useModal } from '@bagelink/vue'
 import { reactive } from 'vue'
 import { EditorDebugger } from '../utils/debug'
 import { isStyleActive } from '../utils/selection'
@@ -34,7 +33,6 @@ function restoreIframes(doc: Document, content: string, iframes: HTMLIFrameEleme
 }
 
 export function useEditor() {
-	const modal = useModal()
 	let cleanupListeners: (() => void) | null = null
 
 	const state = reactive<EditorState>({
@@ -50,7 +48,6 @@ export function useEditor() {
 		redoStack: [],
 		rangeCount: 0,
 		range: null,
-		modal,
 		debug: undefined
 	})
 
@@ -72,7 +69,14 @@ export function useEditor() {
 				'blockquote',
 				'p',
 				'orderedList',
-				'unorderedList'
+				'unorderedList',
+				'alignLeft',
+				'alignCenter',
+				'alignRight',
+				'alignJustify',
+				'textDirection',
+				'ltrDirection',
+				'rtlDirection'
 			]
 			styleTypes.forEach((style) => {
 				if (state.doc && isStyleActive(style, state.doc)) {
@@ -110,7 +114,8 @@ export function useEditor() {
 							try {
 								selection.removeAllRanges()
 								selection.addRange(range)
-							} catch (e) {
+							} catch {
+							// Range restoration failed, ignore
 							}
 						}
 					}
@@ -151,12 +156,10 @@ export function useEditor() {
 						state.range = newSelection.getRangeAt(0).cloneRange()
 					}
 
-					// Update styles less frequently
-					requestAnimationFrame(() => {
-						updateState.styles()
-					})
+					// Update styles immediately for better responsiveness
+					updateState.styles()
 				}
-			} catch (e) {
+			} catch {
 				state.selection = null
 				state.range = null
 				state.rangeCount = 0

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

@@ -14,6 +14,7 @@ const shortcuts: KeyboardShortcut[] = [
 	{ key: 'b', command: 'bold' },
 	{ key: 'i', command: 'italic' },
 	{ key: 'u', command: 'underline' },
+	{ key: 'k', command: 'link' },
 	{ key: 'z', command: 'undo' },
 	{ key: 'z', modifiers: { shift: true }, command: 'redo' },
 	{ key: 'y', command: 'redo' },
@@ -31,105 +32,8 @@ const shortcuts: KeyboardShortcut[] = [
 export function useEditorKeyboard(doc: Document, executor: CommandExecutor): void {
 	// Handle keyboard shortcuts
 	doc.addEventListener('keydown', (e) => {
-		// Handle Enter key in lists and empty editor
-		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()
-						// 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 = ''
-							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()
-						const newLi = doc.createElement('li')
-						newLi.innerHTML = '' // Start with empty list item
-						listItem.insertAdjacentElement('afterend', newLi)
-
-						// Move cursor to new list item
-						range.selectNodeContents(newLi)
-						range.collapse(true)
-						selection.removeAllRanges()
-						selection.addRange(range)
-					}
-				}
-			} else {
-				// Handle Enter in regular content - create new paragraph
-				const blockElement = (container.nodeType === 3 ? container.parentElement : container as Element)?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div')
-
-				if (blockElement && range.collapsed) {
-					// If we're at the end of a block element, create a new paragraph
-					if (isAtEndOfNode(blockElement, range)) {
-						e.preventDefault()
-						const newP = doc.createElement('p')
-						newP.innerHTML = ''
-						blockElement.insertAdjacentElement('afterend', newP)
-
-						// Move cursor to new paragraph
-						range.selectNodeContents(newP)
-						range.collapse(true)
-						selection.removeAllRanges()
-						selection.addRange(range)
-					}
-				} else if (!blockElement && doc.body.textContent?.trim()) {
-					// If we're typing directly in the body and press Enter, wrap in paragraphs
-					e.preventDefault()
-
-					// Split content at cursor position
-					const textContent = doc.body.textContent || ''
-					const cursorPos = range.startOffset
-					const beforeText = textContent.substring(0, cursorPos).trim()
-					const afterText = textContent.substring(cursorPos).trim()
-
-					// Clear body
-					doc.body.innerHTML = ''
-
-					// Create first paragraph with before text
-					if (beforeText) {
-						const p1 = doc.createElement('p')
-						p1.textContent = beforeText
-						doc.body.appendChild(p1)
-					}
-
-					// Create second paragraph for after text
-					const p2 = doc.createElement('p')
-					p2.textContent = afterText
-					doc.body.appendChild(p2)
-
-					// Set cursor at beginning of second paragraph
-					range.selectNodeContents(p2)
-					range.collapse(true)
-					selection.removeAllRanges()
-					selection.addRange(range)
-				}
-			}
-		}
+		// Remove Enter key handling from here - it's handled in setupAutoWrapping in index.vue
+		// This was causing conflicts with the main Enter key handler
 
 		// Handle other keyboard shortcuts
 		if (!e.ctrlKey && !e.metaKey) return
@@ -150,32 +54,3 @@ export function useEditorKeyboard(doc: Document, executor: CommandExecutor): voi
 		}
 	})
 }
-
-// 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>
-}