@bagelink/vue 1.4.139 → 1.4.145

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

@@ -1,5 +1,5 @@
 import type { EditorState } from '../richTextTypes'
-import { insertImage, insertLink, insertEmbed } from './media'
+import { insertLink } from './media'
 import { addRow, deleteRow, mergeCells, splitCell, insertTable, deleteTable, insertColumn, deleteColumn, alignColumn } from './table'
 
 export interface Command {
@@ -30,6 +30,142 @@ function getCurrentSelection(state: EditorState): { selection: Selection, range:
 	return { selection, range }
 }
 
+// Alternative helper function to apply formatting to word at cursor
+function applyFormattingToWordAtCursor(doc: Document, range: Range, tagName: string): boolean {
+	if (!range.collapsed) return false
+
+	let textNode = range.startContainer
+	let offset = range.startOffset
+
+	// If we're in an element node, try to find a text node
+	if (textNode.nodeType !== Node.TEXT_NODE) {
+		const element = textNode as Element
+		if (element.childNodes.length > 0 && offset < element.childNodes.length) {
+			const childNode = element.childNodes[offset]
+			if (childNode.nodeType === Node.TEXT_NODE) {
+				textNode = childNode
+				offset = 0
+			} else {
+				return false
+			}
+		} else {
+			return false
+		}
+	}
+
+	// Check if we're already inside a formatting element
+	const parentElement = textNode.parentElement
+	const existingFormatElement = parentElement?.closest(tagName.toLowerCase())
+
+	if (existingFormatElement) {
+		// Remove existing formatting
+		try {
+			const parent = existingFormatElement.parentNode
+			if (parent) {
+				// Move all children of the format element to its parent
+				while (existingFormatElement.firstChild) {
+					parent.insertBefore(existingFormatElement.firstChild, existingFormatElement)
+				}
+				parent.removeChild(existingFormatElement)
+
+				// Position cursor at the same relative position
+				const newRange = doc.createRange()
+				newRange.setStart(textNode, offset)
+				newRange.collapse(true)
+
+				const selection = doc.getSelection()
+				if (selection) {
+					selection.removeAllRanges()
+					selection.addRange(newRange)
+				}
+
+				return true
+			}
+		} catch (error) {
+			console.error('Error removing formatting from word:', error)
+			return false
+		}
+	}
+
+	const text = textNode.textContent || ''
+	if (!text) return false
+
+	// Find word boundaries - support Hebrew, English, and numbers
+	let start = offset
+	let end = offset
+
+	// Regular expression for word characters (Hebrew, English, numbers)
+	const wordChar = /[\u0590-\u05FF\u0600-\u06FF\w]/
+
+	// If we're at the end of a word (cursor right after the last character)
+	// move back one position to include that word
+	if (offset > 0 && wordChar.test(text[offset - 1]) &&
+		(offset >= text.length || !wordChar.test(text[offset]))) {
+		start = offset - 1
+		end = offset - 1
+	}
+
+	// Move start backwards to find word beginning
+	while (start > 0 && wordChar.test(text[start - 1])) {
+		start--
+	}
+
+	// Move end forwards to find word ending
+	while (end < text.length && wordChar.test(text[end])) {
+		end++
+	}
+
+	// If we found a word, apply formatting
+	if (start < end && end > start) {
+		try {
+			// Split the text node into three parts: before, word, after
+			const beforeText = text.substring(0, start)
+			const wordText = text.substring(start, end)
+			const afterText = text.substring(end)
+
+			// Create the formatting element
+			const formatElement = doc.createElement(tagName)
+			formatElement.textContent = wordText
+
+			// Replace the text node with the new structure
+			const parent = textNode.parentNode
+			if (parent) {
+				// Create text nodes for before and after
+				if (beforeText) {
+					const beforeNode = doc.createTextNode(beforeText)
+					parent.insertBefore(beforeNode, textNode)
+				}
+
+				parent.insertBefore(formatElement, textNode)
+
+				if (afterText) {
+					const afterNode = doc.createTextNode(afterText)
+					parent.insertBefore(afterNode, textNode)
+				}
+
+				parent.removeChild(textNode)
+
+				// Position cursor after the formatted word
+				const newRange = doc.createRange()
+				newRange.setStartAfter(formatElement)
+				newRange.collapse(true)
+
+				const selection = doc.getSelection()
+				if (selection) {
+					selection.removeAllRanges()
+					selection.addRange(newRange)
+				}
+
+				return true
+			}
+		} catch (error) {
+			console.error('Error applying formatting to word:', error)
+		}
+	}
+
+	return false
+}
+
 function updateStateAfterCommand(state: EditorState) {
 	if (!state.doc) return
 
@@ -94,81 +230,231 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 		})
 	}
 
-	// Basic text formatting commands
+	// Basic text formatting commands with toggle functionality
 	const textCommands = {
 		bold: createCommand('Bold', (state) => {
 			const selectionInfo = getCurrentSelection(state)
-			if (!selectionInfo || selectionInfo.range.collapsed) return
+			if (!selectionInfo) return
 
-			const { range } = selectionInfo
-			try {
-				const span = state.doc!.createElement('span')
-				span.style.fontWeight = 'bold'
+			let { range, selection } = selectionInfo
+
+			// If no text is selected, try to apply formatting to word at cursor
+			if (range.collapsed) {
+				const success = applyFormattingToWordAtCursor(state.doc!, range, 'b')
+				if (success) return
+				else return
+			}
 
+			// Check if the selection is already bold
+			const commonAncestor = range.commonAncestorContainer
+			const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+				? commonAncestor.parentElement
+				: commonAncestor as Element
+
+			const boldElement = parentElement?.closest('b, strong')
+
+			if (boldElement) {
+				// Remove bold formatting
 				try {
-					range.surroundContents(span)
-				} catch {
-					const fragment = range.extractContents()
-					span.appendChild(fragment)
-					range.insertNode(span)
+					const parent = boldElement.parentNode
+					while (boldElement.firstChild) {
+						parent?.insertBefore(boldElement.firstChild, boldElement)
+					}
+					parent?.removeChild(boldElement)
+
+					// Restore selection
+					selection.removeAllRanges()
+					selection.addRange(range)
+				} catch (error) {
+					console.error('Error removing bold:', error)
 				}
+			} else {
+				// Apply bold formatting
+				try {
+					const b = state.doc!.createElement('b')
+
+					try {
+						range.surroundContents(b)
+					} catch {
+						const fragment = range.extractContents()
+						b.appendChild(fragment)
+						range.insertNode(b)
+					}
 
-				range.selectNodeContents(span)
-				selectionInfo.selection.removeAllRanges()
-				selectionInfo.selection.addRange(range)
-			} catch (error) {
-				console.error('Error applying bold:', error)
+					range.selectNodeContents(b)
+					selection.removeAllRanges()
+					selection.addRange(range)
+				} catch (error) {
+					console.error('Error applying bold:', error)
+				}
 			}
+		}, (state) => {
+			// isActive function for bold
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const commonAncestor = selectionInfo.range.commonAncestorContainer
+			const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+				? commonAncestor.parentElement
+				: commonAncestor as Element
+
+			return !!parentElement?.closest('b, strong')
 		}),
 
 		italic: createCommand('Italic', (state) => {
 			const selectionInfo = getCurrentSelection(state)
-			if (!selectionInfo || selectionInfo.range.collapsed) return
+			if (!selectionInfo) return
 
-			const { range } = selectionInfo
-			try {
-				const span = state.doc!.createElement('span')
-				span.style.fontStyle = 'italic'
+			let { range, selection } = selectionInfo
 
+			// If no text is selected, try to apply formatting to word at cursor
+			if (range.collapsed) {
+				const success = applyFormattingToWordAtCursor(state.doc!, range, 'i')
+				if (success) return
+				else return
+			}
+
+			// Check if the selection is already italic
+			const commonAncestor = range.commonAncestorContainer
+			const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+				? commonAncestor.parentElement
+				: commonAncestor as Element
+
+			const italicElement = parentElement?.closest('i, em')
+
+			if (italicElement) {
+				// Remove italic formatting
 				try {
-					range.surroundContents(span)
-				} catch {
-					const fragment = range.extractContents()
-					span.appendChild(fragment)
-					range.insertNode(span)
+					const parent = italicElement.parentNode
+					while (italicElement.firstChild) {
+						parent?.insertBefore(italicElement.firstChild, italicElement)
+					}
+					parent?.removeChild(italicElement)
+
+					// Restore selection
+					selection.removeAllRanges()
+					selection.addRange(range)
+				} catch (error) {
+					console.error('Error removing italic:', error)
 				}
+			} else {
+				// Apply italic formatting
+				try {
+					const i = state.doc!.createElement('i')
+
+					try {
+						range.surroundContents(i)
+					} catch {
+						const fragment = range.extractContents()
+						i.appendChild(fragment)
+						range.insertNode(i)
+					}
 
-				range.selectNodeContents(span)
-				selectionInfo.selection.removeAllRanges()
-				selectionInfo.selection.addRange(range)
-			} catch (error) {
-				console.error('Error applying italic:', error)
+					range.selectNodeContents(i)
+					selection.removeAllRanges()
+					selection.addRange(range)
+				} catch (error) {
+					console.error('Error applying italic:', error)
+				}
 			}
+		}, (state) => {
+			// isActive function for italic
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const commonAncestor = selectionInfo.range.commonAncestorContainer
+			const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+				? commonAncestor.parentElement
+				: commonAncestor as Element
+
+			return !!parentElement?.closest('i, em')
 		}),
 
 		underline: createCommand('Underline', (state) => {
 			const selectionInfo = getCurrentSelection(state)
-			if (!selectionInfo || selectionInfo.range.collapsed) return
+			if (!selectionInfo) return
 
-			const { range } = selectionInfo
-			try {
-				const span = state.doc!.createElement('span')
-				span.style.textDecoration = 'underline'
+			let { range, selection } = selectionInfo
+
+			// If no text is selected, try to apply formatting to word at cursor
+			if (range.collapsed) {
+				const success = applyFormattingToWordAtCursor(state.doc!, range, 'u')
+				if (success) return
+				else return
+			}
+
+			// Check if the selection is already underlined
+			const commonAncestor = range.commonAncestorContainer
+			const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+				? commonAncestor.parentElement
+				: commonAncestor as Element
 
+			const underlineElement = parentElement?.closest('u')
+
+			if (underlineElement) {
+				// Remove underline formatting
 				try {
-					range.surroundContents(span)
-				} catch {
-					const fragment = range.extractContents()
-					span.appendChild(fragment)
-					range.insertNode(span)
+					const parent = underlineElement.parentNode
+					while (underlineElement.firstChild) {
+						parent?.insertBefore(underlineElement.firstChild, underlineElement)
+					}
+					parent?.removeChild(underlineElement)
+
+					// Restore selection
+					selection.removeAllRanges()
+					selection.addRange(range)
+				} catch (error) {
+					console.error('Error removing underline:', error)
 				}
+			} else {
+				// Apply underline formatting
+				try {
+					const u = state.doc!.createElement('u')
+
+					try {
+						range.surroundContents(u)
+					} catch {
+						const fragment = range.extractContents()
+						u.appendChild(fragment)
+						range.insertNode(u)
+					}
 
-				range.selectNodeContents(span)
-				selectionInfo.selection.removeAllRanges()
-				selectionInfo.selection.addRange(range)
-			} catch (error) {
-				console.error('Error applying underline:', error)
+					range.selectNodeContents(u)
+					selection.removeAllRanges()
+					selection.addRange(range)
+				} catch (error) {
+					console.error('Error applying underline:', error)
+				}
+			}
+		}, (state) => {
+			// isActive function for underline
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const commonAncestor = selectionInfo.range.commonAncestorContainer
+			const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+				? commonAncestor.parentElement
+				: commonAncestor as Element
+
+			return !!parentElement?.closest('u')
+		}),
+
+		link: createCommand('Link', (state) => {
+			const openLinkModal = (state as any).openLinkModal
+			if (openLinkModal) {
+				insertLink(openLinkModal, state)
 			}
+		}, (state) => {
+			// isActive function for link
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const commonAncestor = selectionInfo.range.commonAncestorContainer
+			const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+				? commonAncestor.parentElement
+				: commonAncestor as Element
+
+			return !!parentElement?.closest('a')
 		})
 	}
 
@@ -179,10 +465,17 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 			const selectionInfo = getCurrentSelection(state)
 			if (!selectionInfo) return
 
-			const { range } = selectionInfo
+			const { range, selection } = selectionInfo
 			const currentBlock = findBlockElement(range.commonAncestorContainer)
 			if (!currentBlock) return
 
+			// Store the original selection information before modification
+			const startContainer = range.startContainer
+			const endContainer = range.endContainer
+			const startOffset = range.startOffset
+			const endOffset = range.endOffset
+			const isCollapsed = range.collapsed
+
 			// Check if we need to toggle off (already in the same heading)
 			const isToggleOff = currentBlock.tagName.toLowerCase() === cmd.toLowerCase()
 			const newTag = isToggleOff ? 'p' : cmd
@@ -198,11 +491,105 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 				// 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)
+				// Restore selection within the new block
+				try {
+					const newRange = state.doc!.createRange()
+
+					// Find corresponding nodes in the new block
+					const findCorrespondingNode = (originalNode: Node, originalBlock: Element, newBlock: Element): Node | null => {
+						if (originalNode === originalBlock) return newBlock
+
+						// If it's a text node, find it by traversing the tree
+						if (originalNode.nodeType === Node.TEXT_NODE) {
+							const walker = state.doc!.createTreeWalker(
+								newBlock,
+								NodeFilter.SHOW_TEXT,
+								null
+							)
+
+							let textNodeIndex = 0
+							const originalWalker = state.doc!.createTreeWalker(
+								originalBlock,
+								NodeFilter.SHOW_TEXT,
+								null
+							)
+
+							let currentOriginalNode = originalWalker.nextNode()
+							while (currentOriginalNode && currentOriginalNode !== originalNode) {
+								textNodeIndex++
+								currentOriginalNode = originalWalker.nextNode()
+							}
+
+							let currentNewNode = walker.nextNode()
+							let currentIndex = 0
+							while (currentNewNode && currentIndex < textNodeIndex) {
+								currentIndex++
+								currentNewNode = walker.nextNode()
+							}
+
+							return currentNewNode
+						}
+
+						return newBlock.firstChild
+					}
+
+					const newStartContainer = findCorrespondingNode(startContainer, currentBlock, newBlock)
+					const newEndContainer = findCorrespondingNode(endContainer, currentBlock, newBlock)
+
+					if (newStartContainer && newEndContainer) {
+						// Set start position
+						if (newStartContainer.nodeType === Node.TEXT_NODE) {
+							const maxOffset = Math.min(startOffset, newStartContainer.textContent?.length || 0)
+							newRange.setStart(newStartContainer, maxOffset)
+						} else {
+							newRange.setStart(newStartContainer, 0)
+						}
+
+						// Set end position
+						if (!isCollapsed) {
+							if (newEndContainer.nodeType === Node.TEXT_NODE) {
+								const maxOffset = Math.min(endOffset, newEndContainer.textContent?.length || 0)
+								newRange.setEnd(newEndContainer, maxOffset)
+							} else {
+								newRange.setEnd(newEndContainer, 0)
+							}
+						} else {
+							newRange.collapse(true)
+						}
+
+						// Apply the restored selection
+						selection.removeAllRanges()
+						selection.addRange(newRange)
+					} else {
+						// Fallback: select all content in the new block
+						newRange.selectNodeContents(newBlock)
+						if (isCollapsed) {
+							newRange.collapse(true)
+						}
+						selection.removeAllRanges()
+						selection.addRange(newRange)
+					}
+				} catch (selectionError) {
+					console.warn('Error restoring selection after heading change:', selectionError)
+					// Fallback: place cursor at start of the new block
+					const fallbackRange = state.doc!.createRange()
+					fallbackRange.selectNodeContents(newBlock)
+					fallbackRange.collapse(true)
+					selection.removeAllRanges()
+					selection.addRange(fallbackRange)
+				}
+
+				// If we created a heading (not toggling off), ensure there's a paragraph after it
+				if (!isToggleOff) {
+					const nextSibling = newBlock.nextElementSibling
+					if (!nextSibling) {
+						// No element after the heading, create a paragraph
+						const p = state.doc!.createElement('p')
+						p.dir = newBlock.dir || state.doc!.body.dir
+						newBlock.parentNode?.insertBefore(p, newBlock.nextSibling)
+					}
+				}
+
 			} catch (error) {
 				console.error(`Error applying ${cmd} heading:`, error)
 			}
@@ -318,10 +705,34 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 				// Convert unordered list to ordered list
 				if (listParent.tagName.toLowerCase() === 'ul') {
 					const ol = state.doc!.createElement('ol')
+
+					// Store current cursor position before conversion
+					const currentOffset = range.startOffset
+					const currentContainer = range.startContainer
+
 					while (listParent.firstChild) {
 						ol.appendChild(listParent.firstChild)
 					}
 					listParent.parentNode?.replaceChild(ol, listParent)
+
+					// Restore cursor position
+					try {
+						const newRange = state.doc!.createRange()
+						newRange.setStart(currentContainer, currentOffset)
+						newRange.collapse(true)
+						selectionInfo.selection.removeAllRanges()
+						selectionInfo.selection.addRange(newRange)
+					} catch {
+						// Fallback: put cursor at beginning of first list item
+						const firstLi = ol.querySelector('li')
+						if (firstLi) {
+							const newRange = state.doc!.createRange()
+							newRange.selectNodeContents(firstLi)
+							newRange.collapse(true)
+							selectionInfo.selection.removeAllRanges()
+							selectionInfo.selection.addRange(newRange)
+						}
+					}
 					return
 				}
 			}
@@ -386,10 +797,35 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 				// Convert ordered list to unordered list
 				if (listParent.tagName.toLowerCase() === 'ol') {
 					const ul = state.doc!.createElement('ul')
+
+					// Store current cursor position before conversion
+					const currentOffset = range.startOffset
+					const currentContainer = range.startContainer
+
 					while (listParent.firstChild) {
 						ul.appendChild(listParent.firstChild)
 					}
 					listParent.parentNode?.replaceChild(ul, listParent)
+
+					// Restore cursor position
+					try {
+						const newRange = state.doc!.createRange()
+						newRange.setStart(currentContainer, currentOffset)
+						newRange.collapse(true)
+						selectionInfo.selection.removeAllRanges()
+						selectionInfo.selection.addRange(newRange)
+					} catch (e) {
+						// Fallback: put cursor at beginning of first list item
+						console.warn('Could not restore cursor position:', e)
+						const firstLi = ul.querySelector('li')
+						if (firstLi) {
+							const newRange = state.doc!.createRange()
+							newRange.selectNodeContents(firstLi)
+							newRange.collapse(true)
+							selectionInfo.selection.removeAllRanges()
+							selectionInfo.selection.addRange(newRange)
+						}
+					}
 					return
 				}
 			}
@@ -418,78 +854,145 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 		})
 	}
 
-	// Clear formatting command - simplified
+	// Clear formatting command - enhanced
 	const formatCommands = {
 		clear: createCommand('Clear Formatting', (state) => {
 			const selectionInfo = getCurrentSelection(state)
-			if (!selectionInfo || selectionInfo.range.collapsed) return
+			if (!selectionInfo) return
+
+			const { range, selection } = selectionInfo
 
-			const { range } = selectionInfo
 			try {
-				// Get the selected content
-				const fragment = range.cloneContents()
-				const tempDiv = state.doc!.createElement('div')
-				tempDiv.appendChild(fragment)
+				// Function to clean text from unwanted characters
+				function cleanText(text: string): string {
+					return text
+						// Remove zero-width characters
+						.replace(/[\u200B-\u200D\uFEFF]/g, '')
+						// Remove extra whitespace
+						.replace(/\s+/g, ' ')
+						// Remove invisible characters
+						.replace(/[\u00A0]/g, ' ') // non-breaking space to regular space
+						.trim()
+				}
 
 				// Function to clean a node recursively
 				function cleanNode(node: Node): Node {
 					if (node.nodeType === Node.TEXT_NODE) {
-						return node.cloneNode(true)
+						const cleanedText = cleanText(node.textContent || '')
+						return state.doc!.createTextNode(cleanedText)
 					}
 
 					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']
+						// Preserve structural elements, links, and media
+						const structuralTags = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'div', 'table', 'tr', 'td', 'th', 'thead', 'tbody', 'b', 'i', 'u', 'a', 'img', 'iframe', 'video', 'audio', 'figure', 'figcaption']
+						// Remove formatting elements (excluding basic HTML formatting tags)
+						const formattingTags = ['strong', 'em', 'span', 'font', 'strike', 'sub', 'sup', 'mark', 'del', 'ins', 'small', 'big']
 
 						if (formattingTags.includes(tagName)) {
-							// For formatting elements, just return the text content
-							return state.doc!.createTextNode(element.textContent || '')
+							// For formatting elements, just return the cleaned text content
+							const cleanedText = cleanText(element.textContent || '')
+							return state.doc!.createTextNode(cleanedText)
 						} else if (structuralTags.includes(tagName)) {
-							// For structural elements, keep the element but remove attributes
+							// For structural elements, keep the element but remove all styling attributes
 							const cleanElement = state.doc!.createElement(tagName)
 
-							// Preserve certain attributes for links and images
+							// Only preserve essential attributes
 							if (tagName === 'a' && element.hasAttribute('href')) {
 								cleanElement.setAttribute('href', element.getAttribute('href') || '')
 								if (element.hasAttribute('target')) {
 									cleanElement.setAttribute('target', element.getAttribute('target') || '')
 								}
+								if (element.hasAttribute('rel')) {
+									cleanElement.setAttribute('rel', element.getAttribute('rel') || '')
+								}
 							} else if (tagName === 'img') {
 								if (element.hasAttribute('src')) cleanElement.setAttribute('src', element.getAttribute('src') || '')
 								if (element.hasAttribute('alt')) cleanElement.setAttribute('alt', element.getAttribute('alt') || '')
+								if (element.hasAttribute('width')) cleanElement.setAttribute('width', element.getAttribute('width') || '')
+								if (element.hasAttribute('height')) cleanElement.setAttribute('height', element.getAttribute('height') || '')
+							} else if (tagName === 'iframe') {
+								if (element.hasAttribute('src')) cleanElement.setAttribute('src', element.getAttribute('src') || '')
+								if (element.hasAttribute('width')) cleanElement.setAttribute('width', element.getAttribute('width') || '')
+								if (element.hasAttribute('height')) cleanElement.setAttribute('height', element.getAttribute('height') || '')
+								if (element.hasAttribute('frameborder')) cleanElement.setAttribute('frameborder', element.getAttribute('frameborder') || '')
+								if (element.hasAttribute('allowfullscreen')) cleanElement.setAttribute('allowfullscreen', element.getAttribute('allowfullscreen') || '')
+							} else if (tagName === 'video' || tagName === 'audio') {
+								if (element.hasAttribute('src')) cleanElement.setAttribute('src', element.getAttribute('src') || '')
+								if (element.hasAttribute('controls')) cleanElement.setAttribute('controls', element.getAttribute('controls') || '')
+								if (element.hasAttribute('width')) cleanElement.setAttribute('width', element.getAttribute('width') || '')
+								if (element.hasAttribute('height')) cleanElement.setAttribute('height', element.getAttribute('height') || '')
 							}
 
 							// Clean and append child nodes
 							Array.from(element.childNodes).forEach((child) => {
-								cleanElement.appendChild(cleanNode(child))
+								const cleanedChild = cleanNode(child)
+								if (cleanedChild.textContent?.trim() || cleanedChild.nodeType === Node.ELEMENT_NODE) {
+									cleanElement.appendChild(cleanedChild)
+								}
 							})
 
 							return cleanElement
 						}
 					}
 
-					return node.cloneNode(true)
+					return state.doc!.createTextNode('')
 				}
 
-				// Clean all nodes in the temp div
-				const cleanedFragment = state.doc!.createDocumentFragment()
-				Array.from(tempDiv.childNodes).forEach((node) => {
-					cleanedFragment.appendChild(cleanNode(node))
-				})
+				if (range.collapsed) {
+					// If no selection, clean the entire document
+					const body = state.doc!.body
+					const cleanedFragment = state.doc!.createDocumentFragment()
 
-				// Replace the selection with cleaned content
-				range.deleteContents()
-				range.insertNode(cleanedFragment)
+					Array.from(body.childNodes).forEach((node) => {
+						const cleanedNode = cleanNode(node)
+						if (cleanedNode.textContent?.trim() || cleanedNode.nodeType === Node.ELEMENT_NODE) {
+							cleanedFragment.appendChild(cleanedNode)
+						}
+					})
+
+					// Clear body and append cleaned content
+					body.innerHTML = ''
+					body.appendChild(cleanedFragment)
+
+					// If body is empty, add a paragraph
+					if (!body.firstElementChild) {
+						const p = state.doc!.createElement('p')
+						body.appendChild(p)
+
+						// Set cursor in the paragraph
+						const newRange = state.doc!.createRange()
+						newRange.selectNodeContents(p)
+						newRange.collapse(true)
+						selection.removeAllRanges()
+						selection.addRange(newRange)
+					}
+				} else {
+					// If there's a selection, clean only the selected content
+					const fragment = range.cloneContents()
+					const tempDiv = state.doc!.createElement('div')
+					tempDiv.appendChild(fragment)
+
+					// Clean all nodes in the temp div
+					const cleanedFragment = state.doc!.createDocumentFragment()
+					Array.from(tempDiv.childNodes).forEach((node) => {
+						const cleanedNode = cleanNode(node)
+						if (cleanedNode.textContent?.trim() || cleanedNode.nodeType === Node.ELEMENT_NODE) {
+							cleanedFragment.appendChild(cleanedNode)
+						}
+					})
 
-				// Restore selection
-				range.collapse(false)
-				selectionInfo.selection.removeAllRanges()
-				selectionInfo.selection.addRange(range)
+					// Replace the selection with cleaned content
+					range.deleteContents()
+					range.insertNode(cleanedFragment)
+
+					// Restore selection
+					range.collapse(false)
+					selection.removeAllRanges()
+					selection.addRange(range)
+				}
 			} catch (error) {
 				console.error('Error clearing formatting:', error)
 			}
@@ -499,8 +1002,67 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 	// Table commands
 	const tableCommands = {
 		insertTable: createCommand('Insert Table', (state, value) => {
-			const [rows, cols] = value?.split('x').map(Number) || [3, 3]
-			insertTable(rows, cols, state)
+			console.log('insertTable command called with value:', value)
+
+			// If we have an openTableEditor function in state, use it for new tables
+			if ((state as any).openTableEditor && !value) {
+				console.log('Opening table editor modal for new table')
+					; (state as any).openTableEditor(null)
+				return
+			}
+
+			if (!value) {
+				// Default fallback
+				const [rows, cols] = [3, 3]
+				insertTable(rows, cols, state)
+				return
+			}
+
+			// Check if value is HTML string (from our advanced table editor)
+			if (value.includes('<table')) {
+				console.log('Inserting HTML table')
+				// Insert HTML table directly
+				const selectionInfo = getCurrentSelection(state)
+				if (!selectionInfo || !state.doc) {
+					console.error('No selection info or document')
+					return
+				}
+
+				const { range } = selectionInfo
+
+				try {
+					// Create a temporary div to parse the HTML
+					const tempDiv = state.doc.createElement('div')
+					tempDiv.innerHTML = value
+					const table = tempDiv.querySelector('table')
+
+					if (table) {
+						console.log('Table parsed successfully, inserting...')
+						// Insert the table at the current selection
+						const insertedTable = table.cloneNode(true) as HTMLTableElement
+						range.insertNode(insertedTable)
+
+						// Move cursor after the table
+						range.setStartAfter(insertedTable)
+						range.collapse(true)
+
+						const selection = state.doc.getSelection()
+						if (selection) {
+							selection.removeAllRanges()
+							selection.addRange(range)
+						}
+						console.log('Table inserted successfully')
+					} else {
+						console.error('Could not parse table from HTML')
+					}
+				} catch (error) {
+					console.error('Error inserting HTML table:', error)
+				}
+			} else {
+				// Original grid format (e.g., "3x3")
+				const [rows, cols] = value.split('x').map(Number) || [3, 3]
+				insertTable(rows, cols, state)
+			}
 		}),
 		deleteTable: createCommand('Delete Table', state => state.range && deleteTable(state.range)),
 		mergeCells: createCommand('Merge Cells', state => state.range && state.doc && mergeCells(state.range, state.doc)),
@@ -513,12 +1075,189 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 		deleteColumn: createCommand('Delete Column', state => state.range && deleteColumn(state.range))
 	}
 
-	// Alignment commands
+	// Table alignment commands
 	const alignmentCommands = ['Left', 'Center', 'Right', 'Justify'].reduce((acc, align) => ({
 		...acc,
-		[`align${align}`]: createCommand(`Align ${align}`, state => state.range && alignColumn(state.range, align.toLowerCase() as 'left' | 'center' | 'right' | 'justify'))
+		[`tableAlign${align}`]: createCommand(`Table Align ${align}`, state => {
+			if (state.range) {
+				const alignment = align === 'Left' ? 'start' : align === 'Right' ? 'end' : align.toLowerCase() as 'center' | 'justify'
+				return alignColumn(state.range, alignment)
+			}
+		})
 	}), {})
 
+	// Text alignment commands (for paragraphs)
+	const textAlignmentCommands = {
+		alignLeft: createCommand('Align Left', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			if (paragraph) {
+				(paragraph as HTMLElement).style.textAlign = 'left'
+			}
+		}, (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			return (paragraph as HTMLElement)?.style.textAlign === 'left'
+		}),
+
+		alignCenter: createCommand('Align Center', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			if (paragraph) {
+				(paragraph as HTMLElement).style.textAlign = 'center'
+			}
+		}, (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			return (paragraph as HTMLElement)?.style.textAlign === 'center'
+		}),
+
+		alignRight: createCommand('Align Right', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			if (paragraph) {
+				(paragraph as HTMLElement).style.textAlign = 'right'
+			}
+		}, (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			return (paragraph as HTMLElement)?.style.textAlign === 'right'
+		}),
+
+		alignJustify: createCommand('Align Justify', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			if (paragraph) {
+				(paragraph as HTMLElement).style.textAlign = 'justify'
+			}
+		}, (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			return (paragraph as HTMLElement)?.style.textAlign === 'justify'
+		}),
+
+		textDirection: createCommand('Toggle Text Direction', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			if (paragraph) {
+				const currentDir = (paragraph as HTMLElement).dir || 'ltr'
+					; (paragraph as HTMLElement).dir = currentDir === 'ltr' ? 'rtl' : 'ltr'
+			}
+		}, (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			return (paragraph as HTMLElement)?.dir === 'rtl'
+		}),
+
+		ltrDirection: createCommand('Set Left to Right Direction', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			if (paragraph) {
+				(paragraph as HTMLElement).dir = 'ltr'
+			}
+		}, (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			return (paragraph as HTMLElement)?.dir === 'ltr'
+		}),
+
+		rtlDirection: createCommand('Set Right to Left Direction', (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			if (paragraph) {
+				(paragraph as HTMLElement).dir = 'rtl'
+			}
+		}, (state) => {
+			const selectionInfo = getCurrentSelection(state)
+			if (!selectionInfo) return false
+
+			const { range } = selectionInfo
+			const paragraph = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement?.closest('p, h1, h2, h3, h4, h5, h6')
+				: (range.startContainer as Element).closest('p, h1, h2, h3, h4, h5, h6')
+
+			return (paragraph as HTMLElement)?.dir === 'rtl'
+		})
+	}
+
 	// View state commands
 	const viewCommands = {
 		fullScreen: createCommand('Full Screen', (state) => { state.isFullscreen = !state.isFullscreen }, state => state.isFullscreen),
@@ -528,9 +1267,30 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 
 	// Media commands
 	const mediaCommands = {
-		image: createCommand('Insert Image', (state) => { state.modal && insertImage(state.modal, state) }),
-		link: createCommand('Insert Link', state => state.modal && state.range && insertLink(state.modal, state)),
-		embed: createCommand('Insert Embed', (state) => { state.modal && insertEmbed(state.modal, state) })
+		image: createCommand('Insert Image', (state) => {
+			const openImageModal = (state as any).openImageModal
+			if (openImageModal) {
+				openImageModal()
+			} else {
+				console.warn('Image insertion requires modal implementation')
+			}
+		}),
+		video: createCommand('Insert Video', (state) => {
+			const openVideoModal = (state as any).openVideoModal
+			if (openVideoModal) {
+				openVideoModal()
+			} else {
+				console.warn('Video insertion requires modal implementation')
+			}
+		}),
+		embed: createCommand('Insert Embed', (state) => {
+			const openEmbedModal = (state as any).openEmbedModal
+			if (openEmbedModal) {
+				openEmbedModal()
+			} else {
+				console.warn('Embed insertion requires modal implementation')
+			}
+		})
 	}
 
 	return {
@@ -542,6 +1302,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 		...formatCommands,
 		...tableCommands,
 		...alignmentCommands,
+		...textAlignmentCommands,
 		...viewCommands,
 		...mediaCommands
 	}