@bagelink/vue 1.16.0 → 1.17.6

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

@@ -1,6 +1,19 @@
 import type { EditorState } from '../richTextTypes'
+import { pushHistorySnapshot, restoreHistoryNodes } from '../composables/useEditor'
 import { insertLink } from './media'
-import { addRow, deleteRow, mergeCells, splitCell, insertTable, deleteTable, insertColumn, deleteColumn, alignColumn } from './table'
+import { isStyleActive } from './selection'
+import {
+	addRow,
+	alignColumn,
+	deleteColumn,
+	deleteRow,
+	deleteTable,
+	focusTableCell,
+	insertColumn,
+	insertTable,
+	mergeCells,
+	splitCell
+} from './table'
 
 export interface Command {
 	name: string
@@ -19,7 +32,6 @@ export interface CommandExecutor {
 	getValue: (command: string) => string | null
 }
 
-// Helper functions
 function getCurrentSelection(state: EditorState): { selection: Selection, range: Range } | null {
 	if (!state.doc) { return null }
 
@@ -30,14 +42,12 @@ 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 {
+function applyFormattingToWordAtCursor(doc: Document, range: Range, tagSelector: string, createTag: 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) {
@@ -53,24 +63,20 @@ function applyFormattingToWordAtCursor(doc: Document, range: Range, tagName: str
 		}
 	}
 
-	// Check if we're already inside a formatting element
 	const { parentElement } = textNode
-	const existingFormatElement = parentElement?.closest(tagName.toLowerCase())
+	const existingFormatElement = parentElement?.closest(tagSelector)
 
 	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.setStart(textNode, Math.min(offset, textNode.textContent?.length ?? 0))
 				newRange.collapse(true)
 
 				const selection = doc.getSelection()
@@ -90,64 +96,48 @@ function applyFormattingToWordAtCursor(doc: Document, range: Range, tagName: str
 	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) {
+	if (start < end) {
 		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)
+			const relativeCursorOffset = Math.max(0, Math.min(wordText.length, offset - start))
 
-			// Create the formatting element
-			const formatElement = doc.createElement(tagName)
-			formatElement.textContent = wordText
+			const formatElement = doc.createElement(createTag)
+			const innerTextNode = doc.createTextNode(wordText)
+			formatElement.appendChild(innerTextNode)
 
-			// 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(doc.createTextNode(beforeText), textNode)
 				}
-
 				parent.insertBefore(formatElement, textNode)
-
 				if (afterText) {
-					const afterNode = doc.createTextNode(afterText)
-					parent.insertBefore(afterNode, textNode)
+					parent.insertBefore(doc.createTextNode(afterText), textNode)
 				}
-
 				parent.removeChild(textNode)
 
-				// Position cursor after the formatted word
 				const newRange = doc.createRange()
-				newRange.setStartAfter(formatElement)
+				newRange.setStart(innerTextNode, relativeCursorOffset)
 				newRange.collapse(true)
 
 				const selection = doc.getSelection()
@@ -166,13 +156,134 @@ function applyFormattingToWordAtCursor(doc: Document, range: Range, tagName: str
 	return false
 }
 
-function updateStateAfterCommand(state: EditorState) {
+function toggleInlineFormatting(
+	state: EditorState,
+	tagName: 'b' | 'i' | 'u',
+	matchSelector: string
+) {
+	const selectionInfo = getCurrentSelection(state)
+	if (!selectionInfo || !state.doc) { return }
+
+	const { doc } = state
+	const { range, selection } = selectionInfo
+
+	if (range.collapsed) {
+		applyFormattingToWordAtCursor(doc, range, matchSelector, tagName)
+		return
+	}
+
+	const commonAncestor = range.commonAncestorContainer
+	const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+		? commonAncestor.parentElement
+		: commonAncestor as Element
+
+	const activeFormatEl = parentElement?.closest(matchSelector) as HTMLElement | null
+
+	if (activeFormatEl) {
+		// Unwrap only the selected portion if the selection is strictly inside the formatted element
+		const selectedText = range.toString()
+		const fullText = activeFormatEl.textContent || ''
+
+		if (selectedText === fullText || range.startContainer !== range.endContainer || range.startContainer.parentElement !== activeFormatEl) {
+			const parent = activeFormatEl.parentNode
+			const firstMoved = activeFormatEl.firstChild
+			const lastMoved = activeFormatEl.lastChild
+			while (activeFormatEl.firstChild) {
+				parent?.insertBefore(activeFormatEl.firstChild, activeFormatEl)
+			}
+			parent?.removeChild(activeFormatEl)
+
+			if (firstMoved && lastMoved) {
+				const nextRange = doc.createRange()
+				nextRange.setStartBefore(firstMoved)
+				nextRange.setEndAfter(lastMoved)
+				selection.removeAllRanges()
+				selection.addRange(nextRange)
+			}
+		} else {
+			// Selection is a substring of a single text node inside activeFormatEl: split into [before, unwrapped, after]
+			const textNode = range.startContainer as Text
+			const text = textNode.textContent || ''
+			const before = text.slice(0, range.startOffset)
+			const middle = text.slice(range.startOffset, range.endOffset)
+			const after = text.slice(range.endOffset)
+			const parent = activeFormatEl.parentNode
+
+			if (parent) {
+				const middleNode = doc.createTextNode(middle)
+				if (before) {
+					const beforeEl = activeFormatEl.cloneNode(false) as HTMLElement
+					beforeEl.textContent = before
+					parent.insertBefore(beforeEl, activeFormatEl)
+				}
+				parent.insertBefore(middleNode, activeFormatEl)
+				if (after) {
+					const afterEl = activeFormatEl.cloneNode(false) as HTMLElement
+					afterEl.textContent = after
+					parent.insertBefore(afterEl, activeFormatEl)
+				}
+				parent.removeChild(activeFormatEl)
+
+				const nextRange = doc.createRange()
+				nextRange.selectNodeContents(middleNode)
+				selection.removeAllRanges()
+				selection.addRange(nextRange)
+			}
+		}
+		return
+	}
+
+	// Check if selection spans across multiple block elements
+	const blockSelector = 'p,h1,h2,h3,h4,h5,h6,blockquote,li,td,th'
+	const blocks = Array.from(doc.body.querySelectorAll<HTMLElement>(blockSelector))
+		.filter(b => !b.querySelector(blockSelector) && range.intersectsNode(b))
+
+	if (blocks.length > 1) {
+		blocks.forEach((block) => {
+			const wrapper = doc.createElement(tagName)
+			while (block.firstChild) {
+				wrapper.appendChild(block.firstChild)
+			}
+			block.appendChild(wrapper)
+		})
+		return
+	}
+
+	// Single-block inline wrap
+	try {
+		const wrapper = doc.createElement(tagName)
+		try {
+			range.surroundContents(wrapper)
+		} catch {
+			const fragment = range.extractContents()
+			// Unwrap redundant nested tags of the same type inside the fragment
+			fragment.querySelectorAll(matchSelector).forEach((nested) => {
+				const p = nested.parentNode
+				while (nested.firstChild) {
+					p?.insertBefore(nested.firstChild, nested)
+				}
+				nested.remove()
+			})
+			wrapper.appendChild(fragment)
+			range.insertNode(wrapper)
+		}
+		range.selectNodeContents(wrapper)
+		selection.removeAllRanges()
+		selection.addRange(range)
+	} catch (error) {
+		console.error(`Error applying ${tagName}:`, error)
+	}
+}
+
+function updateStateAfterCommand(state: EditorState, preCommandContent?: string) {
 	if (!state.doc) { return }
 
-	// Update content
-	state.content = state.doc.body.innerHTML
+	const newContent = state.doc.body.innerHTML
+	if (preCommandContent !== undefined && newContent !== preCommandContent) {
+		pushHistorySnapshot(state, preCommandContent)
+	}
+	state.content = newContent
 
-	// Update selection state
 	const selection = state.doc.getSelection()
 	if (selection && selection.rangeCount > 0) {
 		state.selection = selection
@@ -181,8 +292,8 @@ function updateStateAfterCommand(state: EditorState) {
 	}
 }
 
-function findBlockElement(node: Node): Element | null {
-	let current = node.nodeType === Node.TEXT_NODE ? node.parentElement : node as Element
+function findBlockElement(node: Node): HTMLElement | null {
+	let current = node.nodeType === Node.TEXT_NODE ? node.parentElement : node as HTMLElement | null
 	while (current) {
 		if (current.matches && current.matches('p,h1,h2,h3,h4,h5,h6,blockquote,li,div')) {
 			return current
@@ -192,7 +303,41 @@ function findBlockElement(node: Node): Element | null {
 	return null
 }
 
-const LIST_BLOCK_SELECTOR = 'p,h1,h2,h3,h4,h5,h6,blockquote'
+const CONVERTIBLE_BLOCK_SELECTOR = 'p,h1,h2,h3,h4,h5,h6,blockquote'
+
+function getSelectedBlocks(doc: Document, range: Range): HTMLElement[] {
+	if (!range.collapsed) {
+		const blocks = Array.from(doc.body.querySelectorAll<HTMLElement>(CONVERTIBLE_BLOCK_SELECTOR))
+			.filter(block => !block.closest('li') && range.intersectsNode(block))
+			.filter(block => !block.parentElement?.closest(CONVERTIBLE_BLOCK_SELECTOR))
+		if (blocks.length > 0) {
+			return blocks
+		}
+	}
+	const single = findBlockElement(range.commonAncestorContainer)
+	if (single && single !== doc.body) {
+		return [single]
+	}
+	return []
+}
+
+function convertBlockTag(doc: Document, currentBlock: HTMLElement, newTag: string): HTMLElement {
+	const newBlock = doc.createElement(newTag)
+	if (currentBlock.dir) {
+		newBlock.dir = currentBlock.dir
+	}
+	if (currentBlock.hasAttribute('data-dir-explicit')) {
+		newBlock.setAttribute('data-dir-explicit', 'true')
+	}
+	if (currentBlock.style.textAlign) {
+		newBlock.style.textAlign = currentBlock.style.textAlign
+	}
+	while (currentBlock.firstChild) {
+		newBlock.appendChild(currentBlock.firstChild)
+	}
+	currentBlock.parentNode?.replaceChild(newBlock, currentBlock)
+	return newBlock
+}
 
 function convertSelectedBlocksToList(
 	state: EditorState,
@@ -202,24 +347,20 @@ function convertSelectedBlocksToList(
 ): boolean {
 	if (!state.doc || range.collapsed) { return false }
 
-	const blocks = Array.from(state.doc.body.querySelectorAll(LIST_BLOCK_SELECTOR))
+	const blocks = Array.from(state.doc.body.querySelectorAll<HTMLElement>(CONVERTIBLE_BLOCK_SELECTOR))
 		.filter(block => !block.closest('li') && range.intersectsNode(block))
-		.filter(block => !blocksContainAncestor(block))
-
-	function blocksContainAncestor(block: Element) {
-		return block.parentElement?.closest(LIST_BLOCK_SELECTOR) !== null
-	}
+		.filter(block => !block.parentElement?.closest(CONVERTIBLE_BLOCK_SELECTOR))
 
 	if (!blocks.length) { return false }
 
 	const list = state.doc.createElement(listTag)
-	const direction = (blocks[0] as HTMLElement).dir
+	const direction = blocks[0].dir
 	if (direction === 'rtl' || direction === 'ltr') { list.dir = direction }
 
 	blocks[0].parentNode?.insertBefore(list, blocks[0])
 	blocks.forEach((block) => {
 		const item = state.doc!.createElement('li')
-		const blockDirection = (block as HTMLElement).dir
+		const blockDirection = block.dir
 		if (blockDirection === 'rtl' || blockDirection === 'ltr') { item.dir = blockDirection }
 		while (block.firstChild) {
 			item.appendChild(block.firstChild)
@@ -235,21 +376,136 @@ function convertSelectedBlocksToList(
 	return true
 }
 
-// Centralized command creation helper
-function createCommand(name: string, execute: Command['execute'], isActive?: Command['isActive']): Command {
+function toggleListCommand(state: EditorState, listTag: 'ol' | 'ul') {
+	const selectionInfo = getCurrentSelection(state)
+	if (!selectionInfo || !state.doc) { return }
+
+	const { doc } = state
+	const { range, selection } = selectionInfo
+	if (convertSelectedBlocksToList(state, selection, range, listTag)) { return }
+
+	const currentBlock = findBlockElement(range.commonAncestorContainer)
+	if (!currentBlock) { return }
+
+	const listItem = currentBlock.closest('li') as HTMLLIElement | null
+	if (listItem) {
+		const listParent = listItem.parentElement as HTMLElement | null
+		if (!listParent) { return }
+
+		if (listParent.tagName.toLowerCase() === listTag) {
+			// Toggle off this list item: if it's in the middle of a list, split the list around the new paragraph
+			const p = doc.createElement('p')
+			if (listItem.dir || listParent.dir) {
+				p.dir = listItem.dir || listParent.dir
+			}
+			while (listItem.firstChild) {
+				p.appendChild(listItem.firstChild)
+			}
+
+			const allItems = Array.from(listParent.children).filter(el => el.tagName === 'LI')
+			const itemIndex = allItems.indexOf(listItem)
+			const trailingItems = allItems.slice(itemIndex + 1)
+
+			if (itemIndex === 0) {
+				listParent.parentNode?.insertBefore(p, listParent)
+				listItem.remove()
+				if (!listParent.querySelector('li')) {
+					listParent.remove()
+				}
+			} else if (trailingItems.length === 0) {
+				listParent.insertAdjacentElement('afterend', p)
+				listItem.remove()
+				if (!listParent.querySelector('li')) {
+					listParent.remove()
+				}
+			} else {
+				// Split list into [beforeList, p, afterList]
+				const afterList = doc.createElement(listTag)
+				if (listParent.dir) { afterList.dir = listParent.dir }
+				trailingItems.forEach(item => afterList.appendChild(item))
+				listItem.remove()
+				listParent.insertAdjacentElement('afterend', p)
+				p.insertAdjacentElement('afterend', afterList)
+			}
+
+			const nextRange = doc.createRange()
+			nextRange.selectNodeContents(p)
+			nextRange.collapse(false)
+			selection.removeAllRanges()
+			selection.addRange(nextRange)
+			return
+		}
+
+		// Convert between ul and ol
+		const convertedList = doc.createElement(listTag)
+		if (listParent.dir) { convertedList.dir = listParent.dir }
+		const currentOffset = range.startOffset
+		const currentContainer = range.startContainer
+
+		while (listParent.firstChild) {
+			convertedList.appendChild(listParent.firstChild)
+		}
+		listParent.parentNode?.replaceChild(convertedList, listParent)
+
+		try {
+			const newRange = doc.createRange()
+			newRange.setStart(currentContainer, currentOffset)
+			newRange.collapse(true)
+			selection.removeAllRanges()
+			selection.addRange(newRange)
+		} catch {
+			const firstLi = convertedList.querySelector('li')
+			if (firstLi) {
+				const newRange = doc.createRange()
+				newRange.selectNodeContents(firstLi)
+				newRange.collapse(true)
+				selection.removeAllRanges()
+				selection.addRange(newRange)
+			}
+		}
+		return
+	}
+
+	// Convert single block to list
+	const listEl = doc.createElement(listTag)
+	const li = doc.createElement('li')
+	if (currentBlock.dir) {
+		listEl.dir = currentBlock.dir
+		li.dir = currentBlock.dir
+	}
+
+	while (currentBlock.firstChild) {
+		li.appendChild(currentBlock.firstChild)
+	}
+
+	listEl.appendChild(li)
+	currentBlock.parentNode?.replaceChild(listEl, currentBlock)
+
+	range.selectNodeContents(li)
+	range.collapse(false)
+	selection.removeAllRanges()
+	selection.addRange(range)
+}
+
+function createCommand(
+	name: string,
+	execute: Command['execute'],
+	isActive?: Command['isActive'],
+	options?: { skipHistory?: boolean }
+): Command {
 	return {
 		name,
 		execute: (state: EditorState, value?: string) => {
 			if (!state.doc) { return }
+			const preCommandContent = options?.skipHistory ? undefined : state.doc.body.innerHTML
 			execute(state, value)
-			updateStateAfterCommand(state)
+			updateStateAfterCommand(state, preCommandContent)
 		},
 		isActive
 	}
 }
 
 export function createCommandRegistry(state: EditorState): CommandRegistry {
-	// History commands
 	const historyCommands = {
 		undo: createCommand('Undo', () => {
 			if (state.undoStack.length > 0 && state.doc) {
@@ -257,1084 +513,489 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 				if (lastContent !== undefined) {
 					state.redoStack.push(state.content)
 					state.content = lastContent
-					state.doc.body.innerHTML = lastContent
+					restoreHistoryNodes(state.doc, lastContent)
 				}
 			}
-		}),
+		}, undefined, { skipHistory: true }),
 		redo: createCommand('Redo', () => {
 			if (state.redoStack.length > 0 && state.doc) {
 				const nextContent = state.redoStack.pop()
 				if (nextContent !== undefined) {
 					state.undoStack.push(state.content)
 					state.content = nextContent
-					state.doc.body.innerHTML = nextContent
+					restoreHistoryNodes(state.doc, nextContent)
 				}
 			}
-		})
+		}, undefined, { skipHistory: true })
 	}
 
-	// Basic text formatting commands with toggle functionality
 	const textCommands = {
-		bold: createCommand('Bold', (state) => {
-			const selectionInfo = getCurrentSelection(state)
-			if (!selectionInfo) { return }
-
-			const { 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 }
-				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 {
-					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(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) { return }
-
-			const { 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 }
-				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 {
-					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(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) { return }
-
-			const { 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 }
-				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 {
-					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(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
+		bold: createCommand(
+			'Bold',
+			s => toggleInlineFormatting(s, 'b', 'b, strong'),
+			s => Boolean(s.doc && isStyleActive('bold', s.doc))
+		),
+		italic: createCommand(
+			'Italic',
+			s => toggleInlineFormatting(s, 'i', 'i, em'),
+			s => Boolean(s.doc && isStyleActive('italic', s.doc))
+		),
+		underline: createCommand(
+			'Underline',
+			s => toggleInlineFormatting(s, 'u', 'u'),
+			s => Boolean(s.doc && isStyleActive('underline', s.doc))
+		),
+		link: createCommand('Link', (s) => {
+			const { openLinkModal } = s as any
 			if (openLinkModal) {
-				insertLink(openLinkModal, state)
+				insertLink(openLinkModal, s)
 			}
-		}, (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')
-		})
+		}, s => Boolean(s.doc && isStyleActive('link', s.doc)), { skipHistory: true })
 	}
 
-	// Heading commands
-	const headingCommands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((acc, cmd) => ({
+	const headingCommands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce<CommandRegistry>((acc, cmd) => ({
 		...acc,
-		[cmd]: createCommand(`Heading ${cmd}`, (state) => {
-			const selectionInfo = getCurrentSelection(state)
-			if (!selectionInfo) { return }
+		[cmd]: createCommand(`Heading ${cmd}`, (s) => {
+			const selectionInfo = getCurrentSelection(s)
+			if (!selectionInfo || !s.doc) { return }
 
 			const { range, selection } = selectionInfo
-			const currentBlock = findBlockElement(range.commonAncestorContainer)
-			if (!currentBlock) { return }
-
-			// Store the original selection information before modification
-			const { startContainer } = range
-			const { endContainer } = range
-			const { startOffset } = range
-			const { endOffset } = range
-			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
-
-			try {
-				const newBlock = state.doc!.createElement(newTag)
-
-				// Copy content from current block to new block
-				while (currentBlock.firstChild) {
-					newBlock.appendChild(currentBlock.firstChild)
-				}
+			const blocks = getSelectedBlocks(s.doc, range)
+			if (!blocks.length) { return }
 
-				// Replace the old block with the new one
-				currentBlock.parentNode?.replaceChild(newBlock, currentBlock)
+			const allMatch = blocks.every(b => b.tagName.toLowerCase() === cmd.toLowerCase())
+			const newTag = allMatch ? 'p' : cmd
 
-				// 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()
-							}
+			const converted = blocks.map(block => convertBlockTag(s.doc!, block, newTag))
+			const lastConverted = converted[converted.length - 1]
 
-							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 (!allMatch && lastConverted && !lastConverted.nextElementSibling) {
+				const p = s.doc.createElement('p')
+				p.dir = lastConverted.dir || s.doc.body.dir || 'ltr'
+				p.innerHTML = '<br>'
+				lastConverted.parentNode?.insertBefore(p, lastConverted.nextSibling)
+			}
 
-				// 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)
+			if (lastConverted) {
+				const nextRange = s.doc.createRange()
+				nextRange.selectNodeContents(lastConverted)
+				nextRange.collapse(false)
+				selection.removeAllRanges()
+				selection.addRange(nextRange)
 			}
-		}),
+		}, s => Boolean(s.doc && isStyleActive(cmd, s.doc)))
 	}), {})
 
-	// Block commands
-	const blockCommands = {
-		p: createCommand('Paragraph', (state) => {
-			const selectionInfo = getCurrentSelection(state)
-			if (!selectionInfo) { return }
-
-			const { range } = selectionInfo
-			const currentBlock = findBlockElement(range.commonAncestorContainer)
-			if (!currentBlock) { return }
+	const blockCommands: CommandRegistry = {
+		p: createCommand('Paragraph', (s) => {
+			const selectionInfo = getCurrentSelection(s)
+			if (!selectionInfo || !s.doc) { return }
 
-			// Check if already a paragraph - if so, nothing to do
-			if (currentBlock.tagName.toLowerCase() === 'p') {
-				return
+			const { range, selection } = selectionInfo
+			const blocks = getSelectedBlocks(s.doc, range)
+			if (!blocks.length) { return }
+
+			const converted = blocks.map(block =>
+				block.tagName.toLowerCase() === 'p' ? block : convertBlockTag(s.doc!, block, 'p')
+			)
+			const lastBlock = converted[converted.length - 1]
+			if (lastBlock) {
+				const nextRange = s.doc.createRange()
+				nextRange.selectNodeContents(lastBlock)
+				nextRange.collapse(false)
+				selection.removeAllRanges()
+				selection.addRange(nextRange)
 			}
+		}, s => Boolean(s.doc && isStyleActive('p', s.doc))),
 
-			try {
-				const newParagraph = state.doc!.createElement('p')
+		blockquote: createCommand('Blockquote', (s) => {
+			const selectionInfo = getCurrentSelection(s)
+			if (!selectionInfo || !s.doc) { return }
 
-				// 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)
+			const { range, selection } = selectionInfo
+			const blocks = getSelectedBlocks(s.doc, range)
+			if (!blocks.length) { return }
+
+			const allBlockquotes = blocks.every(b => b.tagName.toLowerCase() === 'blockquote')
+			const newTag = allBlockquotes ? 'p' : 'blockquote'
+
+			const converted = blocks.map(block => convertBlockTag(s.doc!, block, newTag))
+			const lastBlock = converted[converted.length - 1]
+			if (lastBlock) {
+				const nextRange = s.doc.createRange()
+				nextRange.selectNodeContents(lastBlock)
+				nextRange.collapse(false)
+				selection.removeAllRanges()
+				selection.addRange(nextRange)
 			}
-		}),
+		}, s => Boolean(s.doc && isStyleActive('blockquote', s.doc))),
 
-		blockquote: createCommand('Blockquote', (state) => {
-			const selectionInfo = getCurrentSelection(state)
+		indent: createCommand('Indent', (s) => {
+			const selectionInfo = getCurrentSelection(s)
 			if (!selectionInfo) { return }
+			const block = findBlockElement(selectionInfo.range.commonAncestorContainer)
+			if (!block) { return }
+			const isRTL = (block.dir || s.doc?.body.dir) === 'rtl'
+			const prop = isRTL ? 'marginRight' : 'marginLeft'
+			const current = Number.parseInt(block.style[prop] || '0', 10) || 0
+			block.style[prop] = `${current + 24}px`
+		}),
 
-			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)
-			}
+		outdent: createCommand('Outdent', (s) => {
+			const selectionInfo = getCurrentSelection(s)
+			if (!selectionInfo) { return }
+			const block = findBlockElement(selectionInfo.range.commonAncestorContainer)
+			if (!block) { return }
+			const isRTL = (block.dir || s.doc?.body.dir) === 'rtl'
+			const prop = isRTL ? 'marginRight' : 'marginLeft'
+			const current = Number.parseInt(block.style[prop] || '0', 10) || 0
+			const next = Math.max(0, current - 24)
+			block.style[prop] = next > 0 ? `${next}px` : ''
 		})
 	}
 
-	// List commands - simplified implementation
-	const listCommands = {
-		orderedList: createCommand('Ordered List', (state) => {
-			const selectionInfo = getCurrentSelection(state)
-			if (!selectionInfo) { return }
-
-			const { range } = selectionInfo
-			if (convertSelectedBlocksToList(state, selectionInfo.selection, range, 'ol')) { return }
-			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()
-					}
-
-					range.selectNodeContents(p)
-					range.collapse(false)
-					selectionInfo.selection.removeAllRanges()
-					selectionInfo.selection.addRange(range)
-					return
-				}
+	const listCommands: CommandRegistry = {
+		orderedList: createCommand(
+			'Ordered List',
+			s => toggleListCommand(s, 'ol'),
+			s => Boolean(s.doc && isStyleActive('orderedList', s.doc))
+		),
+		unorderedList: createCommand(
+			'Unordered List',
+			s => toggleListCommand(s, 'ul'),
+			s => Boolean(s.doc && isStyleActive('unorderedList', s.doc))
+		)
+	}
 
-				// Convert unordered list to ordered list
-				if (listParent.tagName.toLowerCase() === 'ul') {
-					const ol = state.doc!.createElement('ol')
+	const formatCommands: CommandRegistry = {
+		clear: createCommand('Clear Formatting', (s) => {
+			const selectionInfo = getCurrentSelection(s)
+			if (!selectionInfo || !s.doc) { return }
 
-					// Store current cursor position before conversion
-					const currentOffset = range.startOffset
-					const currentContainer = range.startContainer
+			const { doc } = s
+			const { range, selection } = selectionInfo
 
-					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
-				}
+			const formattingTags = new Set([
+				'b', 'i', 'u', 'strong', 'em', 'span', 'font', 'strike', 's', 'sub', 'sup', 'mark', 'del', 'ins', 'small', 'big'
+			])
+			const structuralTags = new Set([
+				'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'div',
+				'table', 'tr', 'td', 'th', 'thead', 'tbody', 'colgroup', 'col',
+				'a', 'img', 'iframe', 'video', 'audio', 'figure', 'figcaption', 'br'
+			])
+
+			function cleanText(text: string): string {
+				return text
+					.replace(/[\u200B-\u200D\uFEFF]/g, '')
+					.replace(/\u00A0/g, ' ')
 			}
 
-			// Convert current block to ordered list
-			try {
-				const ol = state.doc!.createElement('ol')
-				const li = state.doc!.createElement('li')
-
-				// Copy content to list item
-				while (currentBlock.firstChild) {
-					li.appendChild(currentBlock.firstChild)
+			function cleanNode(node: Node): Node {
+				if (node.nodeType === Node.TEXT_NODE) {
+					return doc!.createTextNode(cleanText(node.textContent || ''))
 				}
 
-				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('Error creating ordered list:', error)
-			}
-		}),
-
-		unorderedList: createCommand('Unordered List', (state) => {
-			const selectionInfo = getCurrentSelection(state)
-			if (!selectionInfo) { return }
-
-			const { range } = selectionInfo
-			if (convertSelectedBlocksToList(state, selectionInfo.selection, range, 'ul')) { return }
-			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 (node.nodeType === Node.ELEMENT_NODE) {
+					const element = node as HTMLElement
+					const tagName = element.tagName.toLowerCase()
 
-					if (!listParent.querySelector('li')) {
-						listParent.remove()
+					if (formattingTags.has(tagName)) {
+						const frag = doc!.createDocumentFragment()
+						Array.from(element.childNodes).forEach((child) => {
+							frag.appendChild(cleanNode(child))
+						})
+						return frag
 					}
 
-					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')
-
-					// 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)
+					if (structuralTags.has(tagName)) {
+						// Convert headings/blockquotes inside cleared region to plain <p>
+						const targetTag = /^h[1-6]|blockquote$/.test(tagName) ? 'p' : tagName
+						const cleanElement = doc!.createElement(targetTag)
+						if (element.dir) {
+							cleanElement.dir = element.dir
 						}
-					}
-					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)
-			}
-		})
-	}
-
-	// Clear formatting command - enhanced
-	const formatCommands = {
-		clear: createCommand('Clear Formatting', (state) => {
-			const selectionInfo = getCurrentSelection(state)
-			if (!selectionInfo) { return }
-
-			const { range, selection } = selectionInfo
-
-			try {
-				// 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) {
-						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, 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 cleaned text content
-							const cleanedText = cleanText(element.textContent || '')
-							return state.doc!.createTextNode(cleanedText)
-						} if (structuralTags.includes(tagName)) {
-							// For structural elements, keep the element but remove all styling attributes
-							const cleanElement = state.doc!.createElement(tagName)
-
-							// 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 (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') {
+							for (const attr of ['src', 'alt', 'width', 'height']) {
+								if (element.hasAttribute(attr)) {
+									cleanElement.setAttribute(attr, element.getAttribute(attr) || '')
 								}
-								if (element.hasAttribute('rel')) {
-									cleanElement.setAttribute('rel', element.getAttribute('rel') || '')
+							}
+						} else if (tagName === 'iframe') {
+							for (const attr of ['src', 'width', 'height', 'frameborder', 'allowfullscreen']) {
+								if (element.hasAttribute(attr)) {
+									cleanElement.setAttribute(attr, element.getAttribute(attr) || '')
 								}
-							} 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) => {
-								const cleanedChild = cleanNode(child)
-								if (cleanedChild.textContent?.trim() || cleanedChild.nodeType === Node.ELEMENT_NODE) {
-									cleanElement.appendChild(cleanedChild)
+						} else if (tagName === 'video' || tagName === 'audio') {
+							for (const attr of ['src', 'controls', 'width', 'height']) {
+								if (element.hasAttribute(attr)) {
+									cleanElement.setAttribute(attr, element.getAttribute(attr) || '')
 								}
-							})
-
-							return cleanElement
+							}
 						}
-					}
 
-					return state.doc!.createTextNode('')
-				}
+						Array.from(element.childNodes).forEach((child) => {
+							cleanElement.appendChild(cleanNode(child))
+						})
 
-				if (range.collapsed) {
-					// If no selection, clean the entire document
-					const { body } = (state.doc!)
-					const cleanedFragment = state.doc!.createDocumentFragment()
-
-					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)
+						return cleanElement
 					}
-				} 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)
-						}
-					})
+				}
 
-					// Replace the selection with cleaned content
-					range.deleteContents()
-					range.insertNode(cleanedFragment)
+				return doc!.createTextNode('')
+			}
 
-					// Restore selection
-					range.collapse(false)
+			if (range.collapsed) {
+				// Clear formatting only on the current block or inline ancestors (never wipe the whole document)
+				const currentBlock = findBlockElement(range.commonAncestorContainer)
+				if (!currentBlock || currentBlock === doc.body) { return }
+				const cleanedBlock = cleanNode(currentBlock) as HTMLElement
+				if (cleanedBlock && cleanedBlock.nodeType === Node.ELEMENT_NODE) {
+					currentBlock.replaceWith(cleanedBlock)
+					const newRange = doc.createRange()
+					newRange.selectNodeContents(cleanedBlock)
+					newRange.collapse(false)
 					selection.removeAllRanges()
-					selection.addRange(range)
+					selection.addRange(newRange)
+				}
+				return
+			}
+
+			// If selection is inside an inline formatting ancestor, unwrap it first
+			const startEl = range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement
+				: range.startContainer as HTMLElement | null
+			const inlineAncestor = startEl?.closest('b, i, u, strong, em, span, font, strike, s, sub, sup, mark')
+			if (inlineAncestor && inlineAncestor.contains(range.endContainer)) {
+				const parent = inlineAncestor.parentNode
+				while (inlineAncestor.firstChild) {
+					parent?.insertBefore(inlineAncestor.firstChild, inlineAncestor)
 				}
-			} catch (error) {
-				console.error('Error clearing formatting:', error)
+				inlineAncestor.remove()
 			}
+
+			const fragment = range.extractContents()
+			const cleanedFragment = doc.createDocumentFragment()
+			Array.from(fragment.childNodes).forEach((node) => {
+				cleanedFragment.appendChild(cleanNode(node))
+			})
+
+			range.insertNode(cleanedFragment)
+			range.collapse(false)
+			selection.removeAllRanges()
+			selection.addRange(range)
 		})
 	}
 
-	// Table commands
-	const tableCommands = {
-		insertTable: createCommand('Insert Table', (state, value) => {
-			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)
+	const tableCommands: CommandRegistry = {
+		insertTable: createCommand('Insert Table', (s, value) => {
+			if ((s as any).openTableEditor && !value) {
+				;(s as any).openTableEditor(null)
 				return
 			}
 
 			if (!value) {
-				// Default fallback
-				const [rows, cols] = [3, 3]
-				insertTable(rows, cols, state)
+				insertTable(3, 3, s)
 				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
+				const selectionInfo = getCurrentSelection(s)
+				if (!s.doc) { return }
 
 				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)
+					const parsedDoc = new DOMParser().parseFromString(value, 'text/html')
+					const table = parsedDoc.querySelector('table')
+					if (!table) { return }
+
+					const insertedTable = s.doc.importNode(table, true) as HTMLTableElement
+					insertedTable.dir = s.doc.body.dir || 'ltr'
+					if (!insertedTable.style.tableLayout) {
+						insertedTable.style.tableLayout = 'fixed'
+					}
+
+					const activeRange = selectionInfo?.range ?? s.range
+					if (activeRange) {
+						const hostBlock = (activeRange.startContainer.nodeType === Node.ELEMENT_NODE
+							? activeRange.startContainer as Element
+							: activeRange.startContainer.parentElement)?.closest('p,h1,h2,h3,h4,h5,h6')
+						if (hostBlock && hostBlock.parentElement === s.doc.body && !(hostBlock.textContent || '').trim()) {
+							hostBlock.replaceWith(insertedTable)
+						} else if (hostBlock && hostBlock.parentElement === s.doc.body) {
+							hostBlock.insertAdjacentElement('afterend', insertedTable)
+						} else {
+							activeRange.insertNode(insertedTable)
 						}
-						console.log('Table inserted successfully')
 					} else {
-						console.error('Could not parse table from HTML')
+						s.doc.body.appendChild(insertedTable)
+					}
+
+					if (!insertedTable.nextElementSibling) {
+						const trailingP = s.doc.createElement('p')
+						trailingP.dir = s.doc.body.dir || 'ltr'
+						trailingP.innerHTML = '<br>'
+						insertedTable.insertAdjacentElement('afterend', trailingP)
+					}
+
+					const addButtons = (s.doc as any).__addEditButtonsToTables as (() => void) | undefined
+					addButtons?.()
+
+					const firstCell = insertedTable.querySelector('tbody td, td, th') as HTMLTableCellElement | null
+					if (firstCell) {
+						focusTableCell(firstCell, true)
 					}
 				} 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)
+				insertTable(rows || 3, cols || 3, s)
 			}
 		}),
-		deleteTable: createCommand('Delete Table', state => state.range && deleteTable(state.range)),
-		mergeCells: createCommand('Merge Cells', state => state.range && state.doc && mergeCells(state.range, state.doc)),
-		splitCells: createCommand('Split Cells', state => state.range && state.doc && splitCell(state.range, state.doc)),
-		addRowBefore: createCommand('Add Row Before', state => state.range && state.doc && addRow('before', state.range, state.doc)),
-		addRowAfter: createCommand('Add Row After', state => state.range && state.doc && addRow('after', state.range, state.doc)),
-		deleteRow: createCommand('Delete Row', state => state.range && deleteRow(state.range)),
-		insertColumnLeft: createCommand('Insert Column Left', state => state.range && insertColumn('before', state.range)),
-		insertColumnRight: createCommand('Insert Column Right', state => state.range && insertColumn('after', state.range)),
-		deleteColumn: createCommand('Delete Column', state => state.range && deleteColumn(state.range))
+		deleteTable: createCommand('Delete Table', s => deleteTable(s.range)),
+		mergeCells: createCommand('Merge Cells', s => s.doc && mergeCells(s.range, s.doc)),
+		splitCells: createCommand('Split Cells', s => s.doc && splitCell(s.range, s.doc)),
+		addRowBefore: createCommand('Add Row Before', s => s.doc && addRow('before', s.range, s.doc)),
+		addRowAfter: createCommand('Add Row After', s => s.doc && addRow('after', s.range, s.doc)),
+		deleteRow: createCommand('Delete Row', s => deleteRow(s.range)),
+		insertColumnLeft: createCommand('Insert Column Left', s => insertColumn('before', s.range)),
+		insertColumnRight: createCommand('Insert Column Right', s => insertColumn('after', s.range)),
+		deleteColumn: createCommand('Delete Column', s => deleteColumn(s.range))
 	}
 
-	// Table alignment commands
-	const alignmentCommands = ['Left', 'Center', 'Right', 'Justify'].reduce((acc, align) => ({
+	const alignmentCommands = ['Left', 'Center', 'Right', 'Justify'].reduce<CommandRegistry>((acc, align) => ({
 		...acc,
-		[`tableAlign${align}`]: createCommand(`Table Align ${align}`, (state) => {
-			if (state.range) {
-				const alignment = align === 'Left' ? 'start' : align === 'Right' ? 'end' : align.toLowerCase() as 'center' | 'justify'
-				alignColumn(state.range, alignment)
-			}
+		[`tableAlign${align}`]: createCommand(`Table Align ${align}`, (s) => {
+			const alignment = align === 'Left' ? 'start' : align === 'Right' ? 'end' : align.toLowerCase() as 'center' | 'justify'
+			alignColumn(s.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 ALIGN_TARGET_SELECTOR = 'p, h1, h2, h3, h4, h5, h6, blockquote, li, td, th'
 
-			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')
+	function applyBlockAlignment(s: EditorState, value: 'left' | 'center' | 'right' | 'justify') {
+		const selectionInfo = getCurrentSelection(s)
+		if (!selectionInfo || !s.doc) { return }
+		const { range } = selectionInfo
 
-			if (paragraph) {
-				const currentDir = (paragraph as HTMLElement).dir || 'ltr'
-					; (paragraph as HTMLElement).dir = currentDir === 'ltr' ? 'rtl' : 'ltr'
+		if (!range.collapsed) {
+			const blocks = Array.from(s.doc.body.querySelectorAll<HTMLElement>(ALIGN_TARGET_SELECTOR))
+				.filter(el => range.intersectsNode(el) && !el.querySelector(ALIGN_TARGET_SELECTOR))
+			if (blocks.length > 0) {
+				blocks.forEach((b) => { b.style.textAlign = value })
+				return
 			}
-		}, (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')
+		const target = range.startContainer.nodeType === Node.TEXT_NODE
+			? range.startContainer.parentElement?.closest(ALIGN_TARGET_SELECTOR)
+			: (range.startContainer as Element).closest(ALIGN_TARGET_SELECTOR)
+		if (target) {
+			(target as HTMLElement).style.textAlign = value
+		}
+	}
 
-			if (paragraph) {
-				(paragraph as HTMLElement).dir = 'ltr'
+	function applyBlockDirection(s: EditorState, dir: 'ltr' | 'rtl' | 'toggle') {
+		const selectionInfo = getCurrentSelection(s)
+		if (!selectionInfo || !s.doc) { return }
+		const { range } = selectionInfo
+
+		const setDirOnEl = (el: HTMLElement) => {
+			const nextDir = dir === 'toggle'
+				? ((el.dir || s.doc?.body.dir || 'ltr') === 'ltr' ? 'rtl' : 'ltr')
+				: dir
+			el.dir = nextDir
+			el.setAttribute('data-dir-explicit', 'true')
+			const listParent = el.closest('ul, ol') as HTMLElement | null
+			if (listParent) {
+				listParent.dir = nextDir
+				listParent.setAttribute('data-dir-explicit', 'true')
 			}
-		}, (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'
+		if (!range.collapsed) {
+			const blocks = Array.from(s.doc.body.querySelectorAll<HTMLElement>(ALIGN_TARGET_SELECTOR))
+				.filter(el => range.intersectsNode(el) && !el.querySelector(ALIGN_TARGET_SELECTOR))
+			if (blocks.length > 0) {
+				blocks.forEach(setDirOnEl)
+				return
 			}
-		}, (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')
+		const target = range.startContainer.nodeType === Node.TEXT_NODE
+			? range.startContainer.parentElement?.closest(ALIGN_TARGET_SELECTOR)
+			: (range.startContainer as Element).closest(ALIGN_TARGET_SELECTOR)
+		if (target) {
+			setDirOnEl(target as HTMLElement)
+		}
+	}
 
-			return (paragraph as HTMLElement)?.dir === 'rtl'
-		})
+	const textAlignmentCommands: CommandRegistry = {
+		alignLeft: createCommand(
+			'Align Left',
+			s => applyBlockAlignment(s, 'left'),
+			s => Boolean(s.doc && isStyleActive('alignLeft', s.doc))
+		),
+		alignCenter: createCommand(
+			'Align Center',
+			s => applyBlockAlignment(s, 'center'),
+			s => Boolean(s.doc && isStyleActive('alignCenter', s.doc))
+		),
+		alignRight: createCommand(
+			'Align Right',
+			s => applyBlockAlignment(s, 'right'),
+			s => Boolean(s.doc && isStyleActive('alignRight', s.doc))
+		),
+		alignJustify: createCommand(
+			'Align Justify',
+			s => applyBlockAlignment(s, 'justify'),
+			s => Boolean(s.doc && isStyleActive('alignJustify', s.doc))
+		),
+		textDirection: createCommand(
+			'Toggle Text Direction',
+			s => applyBlockDirection(s, 'toggle'),
+			s => Boolean(s.doc && isStyleActive('textDirection', s.doc))
+		),
+		ltrDirection: createCommand(
+			'Set Left to Right Direction',
+			s => applyBlockDirection(s, 'ltr'),
+			s => Boolean(s.doc && isStyleActive('ltrDirection', s.doc))
+		),
+		rtlDirection: createCommand(
+			'Set Right to Left Direction',
+			s => applyBlockDirection(s, 'rtl'),
+			s => Boolean(s.doc && isStyleActive('rtlDirection', s.doc))
+		)
 	}
 
-	// View state commands
-	const viewCommands = {
-		fullScreen: createCommand('Full Screen', (state) => { state.isFullscreen = !state.isFullscreen }, state => state.isFullscreen),
-		splitView: createCommand('Split View', (state) => { state.isSplitView = !state.isSplitView }, state => state.isSplitView),
-		codeView: createCommand('Code View', (state) => { state.isCodeView = !state.isCodeView }, state => state.isCodeView)
+	const viewCommands: CommandRegistry = {
+		fullScreen: createCommand('Full Screen', (s) => { s.isFullscreen = !s.isFullscreen }, s => s.isFullscreen, { skipHistory: true }),
+		splitView: createCommand('Split View', (s) => { s.isSplitView = !s.isSplitView }, s => s.isSplitView, { skipHistory: true }),
+		codeView: createCommand('Code View', (s) => { s.isCodeView = !s.isCodeView }, s => s.isCodeView, { skipHistory: true })
 	}
 
-	// Media commands
-	const mediaCommands = {
-		image: createCommand('Insert Image', (state) => {
-			const { openImageModal } = state as any
-			if (openImageModal) {
-				openImageModal()
-			} else {
-				console.warn('Image insertion requires modal implementation')
-			}
-		}),
-		video: createCommand('Insert Video', (state) => {
-			const { openVideoModal } = state as any
-			if (openVideoModal) {
-				openVideoModal()
-			} else {
-				console.warn('Video insertion requires modal implementation')
-			}
-		}),
-		embed: createCommand('Insert Embed', (state) => {
-			const { openEmbedModal } = state as any
-			if (openEmbedModal) {
-				openEmbedModal()
-			} else {
-				console.warn('Embed insertion requires modal implementation')
-			}
-		})
+	const mediaCommands: CommandRegistry = {
+		image: createCommand('Insert Image', (s) => {
+			const { openImageModal } = s as any
+			openImageModal?.()
+		}, undefined, { skipHistory: true }),
+		video: createCommand('Insert Video', (s) => {
+			const { openVideoModal } = s as any
+			openVideoModal?.()
+		}, undefined, { skipHistory: true }),
+		embed: createCommand('Insert Embed', (s) => {
+			const { openEmbedModal } = s as any
+			openEmbedModal?.()
+		}, undefined, { skipHistory: true })
 	}
 
 	return {
@@ -1362,11 +1023,11 @@ export function createCommandExecutor(state: EditorState, commands: CommandRegis
 		},
 		isActive(command: string): boolean {
 			const cmd = commands[command]
-			return cmd.isActive?.(state) || false
+			return cmd?.isActive?.(state) || false
 		},
 		getValue(command: string): string | null {
 			const cmd = commands[command]
-			return cmd.getValue?.(state) || null
+			return cmd?.getValue?.(state) || null
 		}
 	}
 }