@bagelink/vue 1.4.62 → 1.4.69

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

@@ -1,5 +1,4 @@
 import type { EditorState } from '../richTextTypes'
-import { formatting } from './formatting'
 import { insertImage, insertLink, insertEmbed } from './media'
 import { addRow, deleteRow, mergeCells, splitCell, insertTable, deleteTable, insertColumn, deleteColumn, alignColumn } from './table'
 
@@ -20,6 +19,43 @@ export interface CommandExecutor {
 	getValue: (command: string) => string | null
 }
 
+// Helper functions
+function getCurrentSelection(state: EditorState): { selection: Selection, range: Range } | null {
+	if (!state.doc) return null
+
+	const selection = state.doc.getSelection()
+	if (!selection || !selection.rangeCount) return null
+
+	const range = selection.getRangeAt(0)
+	return { selection, range }
+}
+
+function updateStateAfterCommand(state: EditorState) {
+	if (!state.doc) return
+
+	// Update content
+	state.content = state.doc.body.innerHTML
+
+	// Update selection state
+	const selection = state.doc.getSelection()
+	if (selection && selection.rangeCount > 0) {
+		state.selection = selection
+		state.range = selection.getRangeAt(0).cloneRange()
+		state.rangeCount = selection.rangeCount
+	}
+}
+
+function findBlockElement(node: Node): Element | null {
+	let current = node.nodeType === Node.TEXT_NODE ? node.parentElement : node as Element
+	while (current) {
+		if (current.matches && current.matches('p,h1,h2,h3,h4,h5,h6,blockquote,li,div')) {
+			return current
+		}
+		current = current.parentElement
+	}
+	return null
+}
+
 // Centralized command creation helper
 function createCommand(name: string, execute: Command['execute'], isActive?: Command['isActive']): Command {
 	return {
@@ -27,83 +63,13 @@ function createCommand(name: string, execute: Command['execute'], isActive?: Com
 		execute: (state: EditorState, value?: string) => {
 			if (!state.doc) return
 			execute(state, value)
+			updateStateAfterCommand(state)
 		},
 		isActive
 	}
 }
 
-// Create formatting commands helper
-function createFormattingCommand(state: EditorState, type: 'text' | 'block' | 'list', command: string, tag?: string): Command {
-	const format = formatting(state)
-	return createCommand(
-		command,
-		() => {
-			if (!state.doc) return
-
-			if (type === 'text') {
-				format.text(command)
-			}
-			else if (type === 'block') {
-				format.block(command, tag || command)
-			}
-			else if (type === 'list') {
-				const selection = state.doc.getSelection()
-				if (!selection || !selection.rangeCount) return
-
-				const range = selection.getRangeAt(0)
-
-				// If there's no content or the selection is collapsed
-				if (range.collapsed && (!range.startContainer.textContent?.trim() || range.startContainer === state.doc.body)) {
-					// Create a new list with an empty item
-					const list = state.doc.createElement(command === 'orderedList' ? 'ol' : 'ul')
-					const li = state.doc.createElement('li')
-					// Use a non-breaking space with br to ensure proper rendering
-					li.innerHTML = '&nbsp;<br>'
-					list.appendChild(li)
-
-					// If we're in an empty paragraph, replace it
-					const currentBlock = range.startContainer.nodeType === 1
-						? range.startContainer as Element
-						: range.startContainer.parentElement
-
-					if (currentBlock?.tagName.toLowerCase() === 'p' && isNodeEmpty(currentBlock)) {
-						currentBlock.parentNode?.replaceChild(list, currentBlock)
-					} else {
-						// Otherwise insert at cursor
-						range.insertNode(list)
-					}
-
-					// Move cursor into the list item
-					range.selectNodeContents(li)
-					range.collapse(true)
-					selection.removeAllRanges()
-					selection.addRange(range)
-				} else {
-					format.list(command)
-				}
-			}
-		},
-		() => state.selectedStyles.has(command)
-	)
-}
-
-// Helper function to check if a node is empty (contains only whitespace or <br>)
-function isNodeEmpty(node: Node): boolean {
-	// 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 ? (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>
-}
-
 export function createCommandRegistry(state: EditorState): CommandRegistry {
-	const format = formatting(state)
-
 	// History commands
 	const historyCommands = {
 		undo: createCommand('Undo', () => {
@@ -112,7 +78,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 				if (lastContent !== undefined) {
 					state.redoStack.push(state.content)
 					state.content = lastContent
-					if (state.doc) state.doc.body.innerHTML = lastContent
+					state.doc.body.innerHTML = lastContent
 				}
 			}
 		}),
@@ -122,7 +88,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 				if (nextContent !== undefined) {
 					state.undoStack.push(state.content)
 					state.content = nextContent
-					if (state.doc) state.doc.body.innerHTML = nextContent
+					state.doc.body.innerHTML = nextContent
 				}
 			}
 		})
@@ -131,104 +97,77 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 	// Basic text formatting commands
 	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
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo || selectionInfo.range.collapsed) return
 
+			const { range } = selectionInfo
 			try {
-				// Create a span with bold style
-				const span = state.doc.createElement('span')
+				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 {
-					// 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
+				selectionInfo.selection.removeAllRanges()
+				selectionInfo.selection.addRange(range)
 			} catch (error) {
-				console.error('[Command] Error applying bold:', error)
+				console.error('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
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo || selectionInfo.range.collapsed) return
 
+			const { range } = selectionInfo
 			try {
-				// Create a span with italic style
-				const span = state.doc.createElement('span')
+				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 {
-					// 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
+				selectionInfo.selection.removeAllRanges()
+				selectionInfo.selection.addRange(range)
 			} catch (error) {
-				console.error('[Command] Error applying italic:', error)
+				console.error('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
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo || selectionInfo.range.collapsed) return
 
+			const { range } = selectionInfo
 			try {
-				// Create a span with underline style
-				const span = state.doc.createElement('span')
+				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 {
-					// 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
+				selectionInfo.selection.removeAllRanges()
+				selectionInfo.selection.addRange(range)
 			} catch (error) {
-				console.error('[Command] Error applying underline:', error)
+				console.error('Error applying underline:', error)
 			}
 		})
 	}
@@ -237,46 +176,35 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 	const headingCommands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((acc, cmd) => ({
 		...acc,
 		[cmd]: createCommand(`Heading ${cmd}`, (state) => {
-			console.log(`[Command] ${cmd} heading called`)
-			if (!state.doc || !state.range || !state.selection) return
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
 
-			const { range, doc, selection } = state
-			const container = range.commonAncestorContainer
-			const parentBlock = container.nodeType === 3 ? container.parentElement : container as HTMLElement
+			const { range } = selectionInfo
+			const currentBlock = findBlockElement(range.commonAncestorContainer)
+			if (!currentBlock) return
 
-			// 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
+			// Check if we need to toggle off (already in the same heading)
+			const isToggleOff = currentBlock.tagName.toLowerCase() === cmd.toLowerCase()
 			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)
+				const newBlock = state.doc!.createElement(newTag)
 
-					// Move cursor into the new block
-					range.selectNodeContents(newBlock)
-					range.collapse(false) // Move to end
-					selection.removeAllRanges()
-					selection.addRange(range)
+				// Copy content from current block to new block
+				while (currentBlock.firstChild) {
+					newBlock.appendChild(currentBlock.firstChild)
 				}
 
-				// Update content
-				state.content = doc.body.innerHTML
+				// 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)
+				selectionInfo.selection.removeAllRanges()
+				selectionInfo.selection.addRange(range)
 			} catch (error) {
-				console.error(`[Command] Error applying ${cmd} heading:`, error)
+				console.error(`Error applying ${cmd} heading:`, error)
 			}
 		}),
 	}), {})
@@ -284,55 +212,288 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 	// Block commands
 	const blockCommands = {
 		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
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
 
-			// Find current block element
-			const currentBlock = parentBlock?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div') || parentBlock
+			const { range } = selectionInfo
+			const currentBlock = findBlockElement(range.commonAncestorContainer)
+			if (!currentBlock) return
 
 			// Check if already a paragraph - if so, nothing to do
-			if (currentBlock?.tagName.toLowerCase() === 'p') {
-				console.log('[Command] Already a paragraph')
+			if (currentBlock.tagName.toLowerCase() === 'p') {
 				return
 			}
 
 			try {
-				// Create a new paragraph
-				const newParagraph = doc.createElement('p')
+				const newParagraph = state.doc!.createElement('p')
+
+				// 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)
+				selectionInfo.selection.removeAllRanges()
+				selectionInfo.selection.addRange(range)
+			} catch (error) {
+				console.error('Error applying paragraph:', error)
+			}
+		}),
+
+		blockquote: createCommand('Blockquote', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const currentBlock = findBlockElement(range.commonAncestorContainer)
+			if (!currentBlock) return
+
+			// Check if already a blockquote - if so, toggle to paragraph
+			const isToggleOff = currentBlock.tagName.toLowerCase() === 'blockquote'
+			const newTag = isToggleOff ? 'p' : 'blockquote'
+
+			try {
+				const newBlock = state.doc!.createElement(newTag)
+
+				// 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)
+				selectionInfo.selection.removeAllRanges()
+				selectionInfo.selection.addRange(range)
+			} catch (error) {
+				console.error('Error applying blockquote:', error)
+			}
+		})
+	}
+
+	// List commands - simplified implementation
+	const listCommands = {
+		orderedList: createCommand('Ordered List', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const currentBlock = findBlockElement(range.commonAncestorContainer)
+			if (!currentBlock) return
+
+			// Check if we're inside a list item
+			const listItem = currentBlock.closest('li')
+			if (listItem) {
+				const listParent = listItem.parentElement as HTMLElement
+				if (!listParent) return
+
+				// If it's already an ordered list, toggle off to paragraph
+				if (listParent.tagName.toLowerCase() === 'ol') {
+					const p = state.doc!.createElement('p')
+					while (listItem.firstChild) {
+						p.appendChild(listItem.firstChild)
+					}
+					listParent.parentNode?.insertBefore(p, listParent)
+					listItem.remove()
+
+					if (!listParent.querySelector('li')) {
+						listParent.remove()
+					}
 
-				if (currentBlock) {
-					// Copy content from current block to paragraph
-					while (currentBlock.firstChild) {
-						newParagraph.appendChild(currentBlock.firstChild)
+					range.selectNodeContents(p)
+					range.collapse(false)
+					selectionInfo.selection.removeAllRanges()
+					selectionInfo.selection.addRange(range)
+					return
+				}
+
+				// Convert unordered list to ordered list
+				if (listParent.tagName.toLowerCase() === 'ul') {
+					const ol = state.doc!.createElement('ol')
+					while (listParent.firstChild) {
+						ol.appendChild(listParent.firstChild)
 					}
+					listParent.parentNode?.replaceChild(ol, listParent)
+					return
+				}
+			}
 
-					// Replace the old block with the paragraph
-					currentBlock.parentNode?.replaceChild(newParagraph, currentBlock)
+			// Convert current block to ordered list
+			try {
+				const ol = state.doc!.createElement('ol')
+				const li = state.doc!.createElement('li')
 
-					// Move cursor into the new paragraph
-					range.selectNodeContents(newParagraph)
-					range.collapse(false) // Move to end
-					selection.removeAllRanges()
-					selection.addRange(range)
+				// Copy content to list item
+				while (currentBlock.firstChild) {
+					li.appendChild(currentBlock.firstChild)
 				}
 
-				// Update content
-				state.content = doc.body.innerHTML
+				ol.appendChild(li)
+				currentBlock.parentNode?.replaceChild(ol, currentBlock)
+
+				// Move cursor into the list item
+				range.selectNodeContents(li)
+				range.collapse(false)
+				selectionInfo.selection.removeAllRanges()
+				selectionInfo.selection.addRange(range)
 			} catch (error) {
-				console.error('[Command] Error applying paragraph:', error)
+				console.error('Error creating ordered list:', error)
 			}
 		}),
-		blockquote: createFormattingCommand(state, 'block', 'blockquote')
+
+		unorderedList: createCommand('Unordered List', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const currentBlock = findBlockElement(range.commonAncestorContainer)
+			if (!currentBlock) return
+
+			// Check if we're inside a list item
+			const listItem = currentBlock.closest('li')
+			if (listItem) {
+				const listParent = listItem.parentElement as HTMLElement
+				if (!listParent) return
+
+				// If it's already an unordered list, toggle off to paragraph
+				if (listParent.tagName.toLowerCase() === 'ul') {
+					const p = state.doc!.createElement('p')
+					while (listItem.firstChild) {
+						p.appendChild(listItem.firstChild)
+					}
+					listParent.parentNode?.insertBefore(p, listParent)
+					listItem.remove()
+
+					if (!listParent.querySelector('li')) {
+						listParent.remove()
+					}
+
+					range.selectNodeContents(p)
+					range.collapse(false)
+					selectionInfo.selection.removeAllRanges()
+					selectionInfo.selection.addRange(range)
+					return
+				}
+
+				// Convert ordered list to unordered list
+				if (listParent.tagName.toLowerCase() === 'ol') {
+					const ul = state.doc!.createElement('ul')
+					while (listParent.firstChild) {
+						ul.appendChild(listParent.firstChild)
+					}
+					listParent.parentNode?.replaceChild(ul, listParent)
+					return
+				}
+			}
+
+			// Convert current block to unordered list
+			try {
+				const ul = state.doc!.createElement('ul')
+				const li = state.doc!.createElement('li')
+
+				// Copy content to list item
+				while (currentBlock.firstChild) {
+					li.appendChild(currentBlock.firstChild)
+				}
+
+				ul.appendChild(li)
+				currentBlock.parentNode?.replaceChild(ul, currentBlock)
+
+				// Move cursor into the list item
+				range.selectNodeContents(li)
+				range.collapse(false)
+				selectionInfo.selection.removeAllRanges()
+				selectionInfo.selection.addRange(range)
+			} catch (error) {
+				console.error('Error creating unordered list:', error)
+			}
+		})
 	}
 
-	// List commands
-	const listCommands = {
-		orderedList: createFormattingCommand(state, 'list', 'orderedList'),
-		unorderedList: createFormattingCommand(state, 'list', 'unorderedList')
+	// Clear formatting command - simplified
+	const formatCommands = {
+		clear: createCommand('Clear Formatting', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo || selectionInfo.range.collapsed) return
+
+			const { range } = selectionInfo
+			try {
+				// Get the selected content
+				const fragment = range.cloneContents()
+				const tempDiv = state.doc!.createElement('div')
+				tempDiv.appendChild(fragment)
+
+				// Function to clean a node recursively
+				function cleanNode(node: Node): Node {
+					if (node.nodeType === Node.TEXT_NODE) {
+						return node.cloneNode(true)
+					}
+
+					if (node.nodeType === Node.ELEMENT_NODE) {
+						const element = node as Element
+						const tagName = element.tagName.toLowerCase()
+
+						// Preserve structural elements
+						const structuralTags = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'div', 'table', 'tr', 'td', 'th']
+						// Remove formatting elements
+						const formattingTags = ['b', 'i', 'u', 'strong', 'em', 'span', 'font', 'strike', 'sub', 'sup']
+
+						if (formattingTags.includes(tagName)) {
+							// For formatting elements, just return the text content
+							return state.doc!.createTextNode(element.textContent || '')
+						} else if (structuralTags.includes(tagName)) {
+							// For structural elements, keep the element but remove attributes
+							const cleanElement = state.doc!.createElement(tagName)
+
+							// Preserve certain attributes for links and images
+							if (tagName === 'a' && element.hasAttribute('href')) {
+								cleanElement.setAttribute('href', element.getAttribute('href') || '')
+								if (element.hasAttribute('target')) {
+									cleanElement.setAttribute('target', element.getAttribute('target') || '')
+								}
+							} else if (tagName === 'img') {
+								if (element.hasAttribute('src')) cleanElement.setAttribute('src', element.getAttribute('src') || '')
+								if (element.hasAttribute('alt')) cleanElement.setAttribute('alt', element.getAttribute('alt') || '')
+							}
+
+							// Clean and append child nodes
+							Array.from(element.childNodes).forEach((child) => {
+								cleanElement.appendChild(cleanNode(child))
+							})
+
+							return cleanElement
+						}
+					}
+
+					return node.cloneNode(true)
+				}
+
+				// Clean all nodes in the temp div
+				const cleanedFragment = state.doc!.createDocumentFragment()
+				Array.from(tempDiv.childNodes).forEach((node) => {
+					cleanedFragment.appendChild(cleanNode(node))
+				})
+
+				// Replace the selection with cleaned content
+				range.deleteContents()
+				range.insertNode(cleanedFragment)
+
+				// Restore selection
+				range.collapse(false)
+				selectionInfo.selection.removeAllRanges()
+				selectionInfo.selection.addRange(range)
+			} catch (error) {
+				console.error('Error clearing formatting:', error)
+			}
+		})
 	}
 
 	// Table commands
@@ -372,113 +533,17 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 		embed: createCommand('Insert Embed', (state) => { state.modal && insertEmbed(state.modal, state) })
 	}
 
-	// Other formatting commands
-	const otherCommands = {
-		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') })
-	}
-
 	return {
 		...historyCommands,
 		...textCommands,
 		...headingCommands,
 		...blockCommands,
 		...listCommands,
+		...formatCommands,
 		...tableCommands,
 		...alignmentCommands,
 		...viewCommands,
-		...mediaCommands,
-		...otherCommands
+		...mediaCommands
 	}
 }