@bagelink/vue 1.2.11 → 1.2.15

package/src/components/form/inputs/RichText/utils/commands.ts

@@ -41,13 +41,10 @@ function createFormattingCommand(state: EditorState, type: 'text' | 'block' | 'l
 			if (!state.doc) return
 
 			if (type === 'text') {
-				if (command === 'bold') state.doc.execCommand('bold', false)
-				else if (command === 'italic') state.doc.execCommand('italic', false)
-				else if (command === 'underline') state.doc.execCommand('underline', false)
-				else format.text(command)
+				format.text(command)
 			}
 			else if (type === 'block') {
-				state.doc.execCommand('formatBlock', false, `<${tag || command}>`)
+				format.block(command, tag || command)
 			}
 			else if (type === 'list') {
 				const selection = state.doc.getSelection()
@@ -82,11 +79,7 @@ function createFormattingCommand(state: EditorState, type: 'text' | 'block' | 'l
 					selection.removeAllRanges()
 					selection.addRange(range)
 				} else {
-					// Use standard command for existing content
-					state.doc.execCommand(
-						command === 'orderedList' ? 'insertOrderedList' : 'insertUnorderedList',
-						false
-					)
+					format.list(command)
 				}
 			}
 		},
@@ -96,15 +89,16 @@ function createFormattingCommand(state: EditorState, type: 'text' | 'block' | 'l
 
 // Helper function to check if a node is empty (contains only whitespace or <br>)
 function isNodeEmpty(node: Node): boolean {
-	const text = node.textContent?.trim() || ''
+	// Check for text content after removing whitespace and nonbreaking spaces
+	const text = node.textContent?.replace(/\s/g, '') || ''
 	if (text) return false
 
 	// Check for <br> tags
-	const brElements = (node as Element).getElementsByTagName('br')
+	const brElements = (node as Element).getElementsByTagName ? (node as Element).getElementsByTagName('br') : []
 	if (brElements.length === 0) return true
 
-	// If there's only one <br> and it's the only content, consider it empty
-	return brElements.length === 1 && node.childNodes.length === 1
+	// 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>
 }
 
 export function createCommandRegistry(state: EditorState): CommandRegistry {
@@ -112,25 +106,226 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 
 	// History commands
 	const historyCommands = {
-		undo: createCommand('Undo', () => state.doc?.execCommand('undo', false)),
-		redo: createCommand('Redo', () => state.doc?.execCommand('redo', false))
+		undo: createCommand('Undo', () => {
+			if (state.undoStack.length > 0 && state.doc) {
+				const lastContent = state.undoStack.pop()
+				if (lastContent !== undefined) {
+					state.redoStack.push(state.content)
+					state.content = lastContent
+					if (state.doc) state.doc.body.innerHTML = lastContent
+				}
+			}
+		}),
+		redo: createCommand('Redo', () => {
+			if (state.redoStack.length > 0 && state.doc) {
+				const nextContent = state.redoStack.pop()
+				if (nextContent !== undefined) {
+					state.undoStack.push(state.content)
+					state.content = nextContent
+					if (state.doc) state.doc.body.innerHTML = nextContent
+				}
+			}
+		})
 	}
 
 	// Basic text formatting commands
-	const textCommands = ['bold', 'italic', 'underline'].reduce((acc, cmd) => ({
-		...acc,
-		[cmd]: createFormattingCommand(state, 'text', cmd)
-	}), {})
+	const textCommands = {
+		bold: createCommand('Bold', (state) => {
+			console.log('[Command] Bold called')
+			if (!state.doc || !state.range || !state.selection) return
+
+			const { range } = state
+			if (range.collapsed) return
+
+			try {
+				// Create a span with bold style
+				const span = state.doc.createElement('span')
+				span.style.fontWeight = 'bold'
+
+				// Try to surround contents, if that fails use extract and insert
+				try {
+					range.surroundContents(span)
+				} catch (e) {
+					// Handle selections that cross node boundaries
+					const fragment = range.extractContents()
+					span.appendChild(fragment)
+					range.insertNode(span)
+				}
+
+				// Select the new formatted content
+				range.selectNodeContents(span)
+				state.selection.removeAllRanges()
+				state.selection.addRange(range)
+
+				// Update content
+				state.content = state.doc.body.innerHTML
+			} catch (error) {
+				console.error('[Command] Error applying bold:', error)
+			}
+		}),
+
+		italic: createCommand('Italic', (state) => {
+			console.log('[Command] Italic called')
+			if (!state.doc || !state.range || !state.selection) return
+
+			const { range } = state
+			if (range.collapsed) return
+
+			try {
+				// Create a span with italic style
+				const span = state.doc.createElement('span')
+				span.style.fontStyle = 'italic'
+
+				// Try to surround contents, if that fails use extract and insert
+				try {
+					range.surroundContents(span)
+				} catch (e) {
+					// Handle selections that cross node boundaries
+					const fragment = range.extractContents()
+					span.appendChild(fragment)
+					range.insertNode(span)
+				}
+
+				// Select the new formatted content
+				range.selectNodeContents(span)
+				state.selection.removeAllRanges()
+				state.selection.addRange(range)
+
+				// Update content
+				state.content = state.doc.body.innerHTML
+			} catch (error) {
+				console.error('[Command] Error applying italic:', error)
+			}
+		}),
+
+		underline: createCommand('Underline', (state) => {
+			console.log('[Command] Underline called')
+			if (!state.doc || !state.range || !state.selection) return
+
+			const { range } = state
+			if (range.collapsed) return
+
+			try {
+				// Create a span with underline style
+				const span = state.doc.createElement('span')
+				span.style.textDecoration = 'underline'
+
+				// Try to surround contents, if that fails use extract and insert
+				try {
+					range.surroundContents(span)
+				} catch (e) {
+					// Handle selections that cross node boundaries
+					const fragment = range.extractContents()
+					span.appendChild(fragment)
+					range.insertNode(span)
+				}
+
+				// Select the new formatted content
+				range.selectNodeContents(span)
+				state.selection.removeAllRanges()
+				state.selection.addRange(range)
+
+				// Update content
+				state.content = state.doc.body.innerHTML
+			} catch (error) {
+				console.error('[Command] Error applying underline:', error)
+			}
+		})
+	}
 
 	// Heading commands
 	const headingCommands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((acc, cmd) => ({
 		...acc,
-		[cmd]: createFormattingCommand(state, 'block', cmd)
+		[cmd]: createCommand(`Heading ${cmd}`, (state) => {
+			console.log(`[Command] ${cmd} heading called`)
+			if (!state.doc || !state.range || !state.selection) return
+
+			const { range, doc, selection } = state
+			const container = range.commonAncestorContainer
+			const parentBlock = container.nodeType === 3 ? container.parentElement : container as HTMLElement
+
+			// Find current block element
+			const currentBlock = parentBlock?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div') || parentBlock
+
+			// Check if we need to toggle off (already in a heading with the same tag)
+			const isToggleOff = currentBlock?.tagName.toLowerCase() === cmd.toLowerCase()
+
+			// Determine which tag to apply
+			const newTag = isToggleOff ? 'p' : cmd
+
+			try {
+				// Create a new block element of the proper type
+				const newBlock = doc.createElement(newTag)
+
+				if (currentBlock) {
+					// Copy content from current block to new block
+					while (currentBlock.firstChild) {
+						newBlock.appendChild(currentBlock.firstChild)
+					}
+
+					// Replace the old block with the new one
+					currentBlock.parentNode?.replaceChild(newBlock, currentBlock)
+
+					// Move cursor into the new block
+					range.selectNodeContents(newBlock)
+					range.collapse(false) // Move to end
+					selection.removeAllRanges()
+					selection.addRange(range)
+				}
+
+				// Update content
+				state.content = doc.body.innerHTML
+			} catch (error) {
+				console.error(`[Command] Error applying ${cmd} heading:`, error)
+			}
+		}),
 	}), {})
 
 	// Block commands
 	const blockCommands = {
-		p: createFormattingCommand(state, 'block', 'p'),
+		p: createCommand('Paragraph', (state) => {
+			console.log('[Command] Paragraph called')
+			if (!state.doc || !state.range || !state.selection) return
+
+			const { range, doc, selection } = state
+			const container = range.commonAncestorContainer
+			const parentBlock = container.nodeType === 3 ? container.parentElement : container as HTMLElement
+
+			// Find current block element
+			const currentBlock = parentBlock?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div') || parentBlock
+
+			// Check if already a paragraph - if so, nothing to do
+			if (currentBlock?.tagName.toLowerCase() === 'p') {
+				console.log('[Command] Already a paragraph')
+				return
+			}
+
+			try {
+				// Create a new paragraph
+				const newParagraph = doc.createElement('p')
+
+				if (currentBlock) {
+					// Copy content from current block to paragraph
+					while (currentBlock.firstChild) {
+						newParagraph.appendChild(currentBlock.firstChild)
+					}
+
+					// Replace the old block with the paragraph
+					currentBlock.parentNode?.replaceChild(newParagraph, currentBlock)
+
+					// Move cursor into the new paragraph
+					range.selectNodeContents(newParagraph)
+					range.collapse(false) // Move to end
+					selection.removeAllRanges()
+					selection.addRange(range)
+				}
+
+				// Update content
+				state.content = doc.body.innerHTML
+			} catch (error) {
+				console.error('[Command] Error applying paragraph:', error)
+			}
+		}),
 		blockquote: createFormattingCommand(state, 'block', 'blockquote')
 	}
 
@@ -179,7 +374,96 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 
 	// Other formatting commands
 	const otherCommands = {
-		clear: createCommand('Clear Formatting', () => { format.clear() }),
+		clear: createCommand('Clear Formatting', (state) => {
+			console.log('[Command] Clear formatting called')
+			console.log('[Command] Current selection:', state.selection?.toString())
+			console.log('[Command] Range exists:', !!state.range)
+			console.log('[Command] Document exists:', !!state.doc)
+
+			try {
+				if (!state.doc || !state.range || !state.selection) {
+					console.log('[Command] Missing required state for clear formatting')
+					return
+				}
+
+				const { selection, range, doc } = state
+
+				if (range.collapsed) {
+					console.log('[Command] Selection is collapsed, nothing to clear')
+					return
+				}
+
+				// Clone the contents to work with
+				const fragment = range.cloneContents()
+				const tempDiv = doc.createElement('div')
+				tempDiv.appendChild(fragment)
+
+				console.log('[Command] Original HTML:', tempDiv.innerHTML)
+
+				// Process all elements to remove styling but keep structure
+				const structuralTags = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'div', 'table', 'tr', 'td', 'th']
+				const inlineTags = ['b', 'i', 'u', 'strong', 'em', 'span', 'font', 'strike', 'sub', 'sup']
+
+				// Function to clean an element of styling
+				const cleanElement = (element: Element) => {
+					// Remove style and class attributes
+					element.removeAttribute('style')
+					element.removeAttribute('class')
+
+					// Process child elements
+					Array.from(element.children).forEach((child) => {
+						if (inlineTags.includes(child.tagName.toLowerCase())) {
+							// For inline formatting elements, replace with their text content
+							const textContent = child.textContent || ''
+							const textNode = doc.createTextNode(textContent)
+							child.replaceWith(textNode)
+						} else {
+							// For structural elements, keep them but clean styling
+							cleanElement(child)
+						}
+					})
+				}
+
+				// Clean all elements
+				Array.from(tempDiv.querySelectorAll('*')).forEach((element) => {
+					const tagName = element.tagName.toLowerCase()
+
+					// For inline formatting tags, we'll remove and keep only their content
+					// which happens in cleanElement when processing children
+
+					// For structural tags, keep them but remove styling
+					if (structuralTags.includes(tagName)) {
+						cleanElement(element)
+					}
+				})
+
+				console.log('[Command] Cleaned HTML:', tempDiv.innerHTML)
+
+				// Replace the selection with the cleaned content
+				range.deleteContents()
+
+				// Create a new document fragment to hold the cleaned content
+				const cleanedFragment = doc.createDocumentFragment()
+
+				// Append all nodes from the tempDiv
+				while (tempDiv.firstChild) {
+					cleanedFragment.appendChild(tempDiv.firstChild)
+				}
+
+				range.insertNode(cleanedFragment)
+
+				// Try to restore a reasonable selection
+				range.collapse(false)
+				selection.removeAllRanges()
+				selection.addRange(range)
+
+				// Update content
+				state.content = doc.body.innerHTML
+				console.log('[Command] Clear formatting completed')
+			} catch (error) {
+				console.error('[Command] Error in clear formatting:', error)
+			}
+		}),
 		indent: createCommand('Indent', () => { format.text('indent') }),
 		outdent: createCommand('Outdent', () => { format.text('outdent') })
 	}

package/src/components/form/inputs/RichText/utils/formatting.ts

@@ -28,7 +28,22 @@ export function formatting(state: EditorState) {
 				range.surroundContents(span)
 			}
 		} else {
-			doc.execCommand(command, false)
+			if (range.collapsed) return // No selection, nothing to format
+
+			const span = doc.createElement('span')
+			if (command === 'bold') span.style.fontWeight = 'bold'
+			else if (command === 'italic') span.style.fontStyle = 'italic'
+			else if (command === 'underline') span.style.textDecoration = 'underline'
+
+			try {
+				range.surroundContents(span)
+			} catch (e) {
+				// If surroundContents fails (e.g., for selections across multiple nodes)
+				// Extract the fragment, wrap it, and insert it back
+				const fragment = range.extractContents()
+				span.appendChild(fragment)
+				range.insertNode(span)
+			}
 		}
 	}
 
@@ -53,12 +68,27 @@ export function formatting(state: EditorState) {
 			}
 		}
 
-		doc.execCommand('formatBlock', false, tag)
+		// Create a new block element of the desired type
+		const newBlock = doc.createElement(tag)
+		if (isRTL) newBlock.dir = 'rtl'
+
+		// Find the current block to replace
+		const currentBlock = parentBlock?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div') || parentBlock
+
+		if (currentBlock) {
+			// Copy content to the new block
+			while (currentBlock.firstChild) {
+				newBlock.appendChild(currentBlock.firstChild)
+			}
+
+			// Replace the current block with the new one
+			currentBlock.parentNode?.replaceChild(newBlock, currentBlock)
 
-		// Preserve RTL direction after block formatting
-		if (isRTL) {
-			const newBlock = selection.anchorNode?.parentElement?.closest(tag.toLowerCase()) as HTMLElement
-			if (newBlock) newBlock.dir = 'rtl'
+			// Move cursor into the new block
+			range.selectNodeContents(newBlock)
+			range.collapse(false)
+			selection.removeAllRanges()
+			selection.addRange(range)
 		}
 	}
 
@@ -145,38 +175,97 @@ export function formatting(state: EditorState) {
 	}
 
 	const clear = () => {
-		if (!state.doc || !state.range || !state.selection) return
+		console.log('[Clear Format] Starting clear format process', state)
+		console.assert(state, '[Clear Format] State must exist')
+		console.assert(state.doc, '[Clear Format] Document must exist')
+		console.assert(state.range, '[Clear Format] Range must exist')
+		console.assert(state.selection, '[Clear Format] Selection must exist')
+
+		if (!state.doc || !state.range || !state.selection) {
+			console.log('[Clear Format] No document or selection')
+			return
+		}
 
 		const selectionInfo = analyzeSelection(state.doc, state.range)
-		if (!selectionInfo) return
+		console.log('[Clear Format] Selection info:', selectionInfo)
+		if (!selectionInfo) {
+			console.log('[Clear Format] No valid selection info')
+			return
+		}
+
+		// If selection is collapsed (just a cursor), return
+		if (state.range.collapsed) {
+			console.log('[Clear Format] Selection is collapsed, nothing to clear')
+			return
+		}
+
+		console.log('[Clear Format] Processing selection:', {
+			startContainer: state.range.startContainer,
+			endContainer: state.range.endContainer,
+			selectedText: state.range.toString()
+		})
 
-		const inlineTags = ['b', 'i', 'u', 'strong', 'em', 'span']
+		// Get the selected content
 		const fragment = state.range.cloneContents()
 		const tempDiv = state.doc.createElement('div')
 		tempDiv.appendChild(fragment)
 
-		// Function to clean a node and its children
+		console.log('[Clear Format] Original HTML:', tempDiv.innerHTML)
+
+		// Function to recursively clean a node and its children
 		const cleanNode = (node: Node): Node => {
 			if (!state.doc) return node
-			if (node.nodeType === 3) { // Text node
+
+			// Text nodes can be returned as-is
+			if (node.nodeType === 3) {
 				return node.cloneNode(true)
 			}
 
 			if (node.nodeType === 1) { // Element node
 				const el = node as HTMLElement
 				const nodeName = el.nodeName.toLowerCase()
+				const inlineTags = ['b', 'i', 'u', 'strong', 'em', 'span', 'font', 'strike', 'sub', 'sup']
+
+				console.log('[Clear Format] Processing element:', nodeName, {
+					hasStyle: el.hasAttribute('style'),
+					style: el.getAttribute('style'),
+					className: el.className
+				})
 
-				// If it's an inline formatting element, just return its text content
+				// For inline formatting elements, just extract the text content
 				if (inlineTags.includes(nodeName)) {
-					return state.doc.createTextNode(el.textContent || '')
+					// Create a text node with the element's content
+					const textContent = el.textContent || ''
+					console.log('[Clear Format] Extracting text from inline element:', textContent)
+					return state.doc.createTextNode(textContent)
 				}
 
-				// For block elements, create a new clean element
+				// For block elements, preserve the element type but remove formatting
 				const newEl = state.doc.createElement(nodeName)
 
-				// Remove all styles and classes
-				newEl.removeAttribute('style')
-				newEl.removeAttribute('class')
+				// Remove any style and class attributes
+				if (el.hasAttribute('style')) {
+					console.log('[Clear Format] Removing style attribute:', el.getAttribute('style'))
+				}
+				if (el.className) {
+					console.log('[Clear Format] Removing class:', el.className)
+				}
+
+				// Transfer only specific attributes we want to keep (like href for links)
+				if (nodeName === 'a' && el.hasAttribute('href')) {
+					newEl.setAttribute('href', el.getAttribute('href') || '')
+					if (el.hasAttribute('target')) {
+						newEl.setAttribute('target', el.getAttribute('target') || '')
+					}
+					console.log('[Clear Format] Preserving link attributes')
+				}
+
+				// For images, preserve src and alt
+				if (nodeName === 'img') {
+					if (el.hasAttribute('src')) newEl.setAttribute('src', el.getAttribute('src') || '')
+					if (el.hasAttribute('alt')) newEl.setAttribute('alt', el.getAttribute('alt') || '')
+					console.log('[Clear Format] Preserving image attributes')
+				}
 
 				// Clean and append all child nodes
 				Array.from(el.childNodes).forEach((child) => {
@@ -195,10 +284,21 @@ export function formatting(state: EditorState) {
 			cleanedFragment.appendChild(cleanNode(node))
 		})
 
+		// For debugging: check what the cleaned HTML looks like
+		const debugDiv = state.doc.createElement('div')
+		debugDiv.appendChild(cleanedFragment.cloneNode(true))
+		console.log('[Clear Format] Cleaned HTML:', debugDiv.innerHTML)
+
 		// Replace the content
 		state.range.deleteContents()
 		state.range.insertNode(cleanedFragment)
+
+		// Restore selection
 		restoreSelection(state.doc, state.range, state.selection, selectionInfo)
+
+		// Update content state
+		state.content = state.doc.body.innerHTML
+		console.log('[Clear Format] Updated document HTML:', state.content)
 	}
 
 	return { text, block, list, clear }

package/src/components/form/inputs/RichText/utils/table.ts

@@ -5,17 +5,52 @@ export function insertTable(rows: number, cols: number, state: EditorState) {
 	const table = state.doc.createElement('table')
 	table.style.width = '100%'
 	table.style.borderCollapse = 'collapse'
+	table.style.marginBottom = '1rem'
+
+	// Add a header row
+	const thead = state.doc.createElement('thead')
+	const headerRow = thead.insertRow()
+	for (let j = 0; j < cols; j++) {
+		const th = state.doc.createElement('th')
+		th.innerHTML = `Header ${j + 1}`
+		th.style.padding = '8px'
+		th.style.border = '1px solid var(--border-color, #ddd)'
+		th.style.backgroundColor = 'var(--bgl-gray-light, #f4f4f4)'
+		headerRow.appendChild(th)
+	}
+	table.appendChild(thead)
 
+	// Add body rows
+	const tbody = state.doc.createElement('tbody')
 	for (let i = 0; i < rows; i++) {
-		const row = table.insertRow()
+		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 var(--border-color, #ddd)'
 		}
 	}
+	table.appendChild(tbody)
+
+	// Insert the table at the current selection
 	const { range } = state
 	if (range) {
 		range.insertNode(table)
+
+		// Move cursor inside first cell for convenience
+		if (state.doc.getSelection()) {
+			const firstCell = table.querySelector('td')
+			if (firstCell) {
+				range.selectNodeContents(firstCell)
+				range.collapse(true)
+				const selection = state.doc.getSelection()
+				if (selection) {
+					selection.removeAllRanges()
+					selection.addRange(range)
+				}
+			}
+		}
 	} else {
 		state.doc.body.appendChild(table)
 	}