@bagelink/vue 1.4.136 → 1.4.141

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

@@ -30,6 +30,134 @@ 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]/
+
+	// 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 +222,213 @@ 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')
 		})
 	}
 
@@ -198,11 +458,56 @@ 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)
+				// If we created a heading (not toggling off), ensure there's a paragraph after it
+				if (!isToggleOff) {
+					// Check if there's already a next sibling element
+					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)
+
+						// Move cursor to the new paragraph
+						const newRange = state.doc!.createRange()
+						newRange.selectNodeContents(p)
+						newRange.collapse(true)
+						selectionInfo.selection.removeAllRanges()
+						selectionInfo.selection.addRange(newRange)
+					} else {
+						// There is a next element, just move cursor to the heading
+						range.selectNodeContents(newBlock)
+						range.collapse(false)
+						selectionInfo.selection.removeAllRanges()
+						selectionInfo.selection.addRange(range)
+					}
+				} else {
+					// Toggling off to paragraph, move cursor to it
+					range.selectNodeContents(newBlock)
+					range.collapse(false)
+					selectionInfo.selection.removeAllRanges()
+					selectionInfo.selection.addRange(range)
+				}
+
+				// Clean up empty elements after creating heading
+				setTimeout(() => {
+					const emptyElements = Array.from(state.doc!.body.querySelectorAll('div, p')).filter(el =>
+						!el.textContent?.trim() && !el.querySelector('img, br, hr, input, textarea, select')
+					)
+
+					emptyElements.forEach(el => {
+						// Remove empty elements that come right before or after headings
+						const nextSibling = el.nextElementSibling
+						const prevSibling = el.previousElementSibling
+						if ((nextSibling && /^H[1-6]$/.test(nextSibling.tagName)) ||
+							(prevSibling && /^H[1-6]$/.test(prevSibling.tagName))) {
+							el.remove()
+						} else if (el === state.doc!.body.firstElementChild && state.doc!.body.children.length > 1) {
+							el.remove()
+						}
+					})
+				}, 0)
+
 			} catch (error) {
 				console.error(`Error applying ${cmd} heading:`, error)
 			}
@@ -318,10 +623,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 (e) {
+						// 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 +715,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,23 +772,32 @@ 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) {
@@ -442,18 +805,19 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 						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']
+						const structuralTags = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'div', 'table', 'tr', 'td', 'th', 'thead', 'tbody', 'b', 'i', 'u']
+						// 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')) {
@@ -462,34 +826,77 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 							} 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') || '')
 							}
 
 							// 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)
 			}
@@ -513,12 +920,136 @@ 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 => state.range && alignColumn(state.range, align.toLowerCase() as 'left' | 'center' | 'right' | 'justify'))
 	}), {})
 
+	// 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'
+		})
+	}
+
 	// View state commands
 	const viewCommands = {
 		fullScreen: createCommand('Full Screen', (state) => { state.isFullscreen = !state.isFullscreen }, state => state.isFullscreen),
@@ -542,6 +1073,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 		...formatCommands,
 		...tableCommands,
 		...alignmentCommands,
+		...textAlignmentCommands,
 		...viewCommands,
 		...mediaCommands
 	}