@bagelink/vue 0.0.1262 → 0.0.1268

package/src/components/form/inputs/RichText/composables/useCommands.ts

@@ -1,113 +1,69 @@
 import type { EditorState } from '../richTextTypes'
-import type { CommandRegistry } from '../utils/commands'
-import { createCommandExecutor } from '../utils/commands'
-import { formatting } from '../utils/formatting'
-import { insertImage, insertLink } from '../utils/media'
-import { addRow, deleteRow, mergeCells, splitCell, insertTable, deleteTable, insertColumn, deleteColumn, alignColumn } from '../utils/table'
+import { createCommandExecutor, createCommandRegistry } from '../utils/commands'
 
 export function useCommands(state: EditorState, debug?: { logCommand: (command: string, value?: string) => void }) {
-	const format = () => formatting(state)
+	const commands = createCommandRegistry(state)
+	const executor = createCommandExecutor(state, commands)
 
-	const commands: CommandRegistry = {
-		// Text formatting commands
-		bold: {
-			name: 'Bold',
-			execute: (state: EditorState) => { format().text('bold') },
-			isActive: (state: EditorState) => state.selectedStyles.has('bold')
-		},
-		italic: {
-			name: 'Italic',
-			execute: (state: EditorState) => { format().text('italic') },
-			isActive: (state: EditorState) => state.selectedStyles.has('italic')
-		},
-		underline: {
-			name: 'Underline',
-			execute: (state: EditorState) => { format().text('underline') },
-			isActive: (state: EditorState) => state.selectedStyles.has('underline')
-		},
+	return {
+		execute: (command: string, value?: string) => {
+			if (!state.doc) return
 
-		// Block formatting commands
-		h1: { name: 'Heading 1', execute: (state: EditorState) => { format().block('h1', 'h1') }, isActive: (state: EditorState) => state.selectedStyles.has('h1') },
-		h2: { name: 'Heading 2', execute: (state: EditorState) => { format().block('h2', 'h2') }, isActive: (state: EditorState) => state.selectedStyles.has('h2') },
-		h3: { name: 'Heading 3', execute: (state: EditorState) => { format().block('h3', 'h3') }, isActive: (state: EditorState) => state.selectedStyles.has('h3') },
-		h4: { name: 'Heading 4', execute: (state: EditorState) => { format().block('h4', 'h4') }, isActive: (state: EditorState) => state.selectedStyles.has('h4') },
-		h5: { name: 'Heading 5', execute: (state: EditorState) => { format().block('h5', 'h5') }, isActive: (state: EditorState) => state.selectedStyles.has('h5') },
-		h6: { name: 'Heading 6', execute: (state: EditorState) => { format().block('h6', 'h6') }, isActive: (state: EditorState) => state.selectedStyles.has('h6') },
-		p: { name: 'Paragraph', execute: (state: EditorState) => { format().block('p', 'p') }, isActive: (state: EditorState) => state.selectedStyles.has('p') },
-		blockquote: {
-			name: 'Blockquote',
-			execute: (state: EditorState) => { format().block('blockquote', 'blockquote') },
-			isActive: (state: EditorState) => state.selectedStyles.has('blockquote')
-		},
+			console.log('[useCommands.execute] Starting command execution:', command, value)
 
-		// List commands
-		orderedList: {
-			name: 'Ordered List',
-			execute: (state: EditorState) => { format().list('orderedList') },
-			isActive: (state: EditorState) => state.selectedStyles.has('orderedList')
-		},
-		unorderedList: {
-			name: 'Unordered List',
-			execute: (state: EditorState) => { format().list('unorderedList') },
-			isActive: (state: EditorState) => state.selectedStyles.has('unorderedList')
-		},
+			// Log command if debug is enabled
+			debug?.logCommand(command, value)
 
-		// Table commands
-		insertTable: {
-			name: 'Insert Table',
-			execute: (state: EditorState, value?: string) => {
-				const [rows, cols] = value?.split('x').map(Number) || [3, 3]
-				insertTable(rows, cols, state)
+			// Handle view state commands directly
+			if (['splitView', 'codeView', 'fullScreen'].includes(command)) {
+				console.log('[useCommands.execute] Handling view state command:', command)
+				switch (command) {
+					case 'splitView':
+						state.isSplitView = !state.isSplitView
+						return
+					case 'codeView':
+						state.isCodeView = !state.isCodeView
+						return
+					case 'fullScreen':
+						state.isFullscreen = !state.isFullscreen
+						return
+				}
 			}
-		},
-		deleteTable: { name: 'Delete Table', execute: (state: EditorState) => state.range && deleteTable(state.range) },
-		mergeCells: { name: 'Merge Cells', execute: (state: EditorState) => state.range && state.doc && mergeCells(state.range, state.doc) },
-		splitCells: { name: 'Split Cells', execute: (state: EditorState) => state.range && state.doc && splitCell(state.range, state.doc) },
-		addRowBefore: { name: 'Add Row Before', execute: (state: EditorState) => state.range && state.doc && addRow('before', state.range, state.doc) },
-		addRowAfter: { name: 'Add Row After', execute: (state: EditorState) => state.range && state.doc && addRow('after', state.range, state.doc) },
-		deleteRow: { name: 'Delete Row', execute: (state: EditorState) => state.range && deleteRow(state.range) },
-		insertColumnLeft: { name: 'Insert Column Left', execute: (state: EditorState) => state.range && insertColumn('before', state.range) },
-		insertColumnRight: { name: 'Insert Column Right', execute: (state: EditorState) => state.range && insertColumn('after', state.range) },
-		deleteColumn: { name: 'Delete Column', execute: (state: EditorState) => state.range && deleteColumn(state.range) },
 
-		// Alignment commands
-		alignLeft: { name: 'Align Left', execute: (state: EditorState) => state.range && alignColumn(state.range, 'left') },
-		alignCenter: { name: 'Align Center', execute: (state: EditorState) => state.range && alignColumn(state.range, 'center') },
-		alignRight: { name: 'Align Right', execute: (state: EditorState) => state.range && alignColumn(state.range, 'right') },
-		alignJustify: { name: 'Align Justify', execute: (state: EditorState) => state.range && alignColumn(state.range, 'justify') },
+			// Focus the editor before executing command
+			console.log('[useCommands.execute] Focusing editor')
+			state.doc.body.focus()
 
-		// Media commands
-		image: { name: 'Insert Image', execute: (state: EditorState) => state.modal && insertImage(state.modal, state) },
-		link: { name: 'Insert Link', execute: (state: EditorState) => state.modal && state.range && insertLink(state.modal, state) },
+			// Execute the command
+			console.log('[useCommands.execute] Executing command')
+			executor.execute(command, value)
 
-		// Other commands
-		clear: { name: 'Clear Formatting', execute: (state: EditorState) => { format().clear() } },
-		indent: { name: 'Indent', execute: (state: EditorState) => { format().text('indent') } },
-		outdent: { name: 'Outdent', execute: (state: EditorState) => { format().text('outdent') } },
-		fullScreen: {
-			name: 'Full Screen',
-			execute: (state: EditorState) => { state.isFullscreen = !state.isFullscreen },
-			isActive: (state: EditorState) => state.isFullscreen
-		},
-		splitView: {
-			name: 'Split View',
-			execute: (state: EditorState) => { state.isSplitView = !state.isSplitView },
-			isActive: (state: EditorState) => state.isSplitView
-		},
-		codeView: {
-			name: 'Code View',
-			execute: (state: EditorState) => { state.isCodeView = !state.isCodeView },
-			isActive: (state: EditorState) => state.isCodeView
-		}
-	}
+			// Update content state only if it has changed
+			const newContent = state.doc.body.innerHTML
+			console.log('[useCommands.execute] Checking content changes')
+			console.log('[useCommands.execute] Old content length:', state.content.length)
+			console.log('[useCommands.execute] New content length:', newContent.length)
+			if (newContent !== state.content) {
+				console.log('[useCommands.execute] Content changed, updating state')
+				state.content = newContent
+			}
 
-	const executor = createCommandExecutor(state, commands)
+			// Update selection state if needed
+			console.log('[useCommands.execute] Checking selection changes')
+			const selection = state.doc.getSelection()
+			if (selection?.rangeCount) {
+				const hasSelectionChanged = !state.selection
+					|| state.selection !== selection
+					|| state.rangeCount !== selection.rangeCount
 
-	// Wrap executor with debug logging if available
-	return {
-		execute: (command: string, value?: string) => {
-			debug?.logCommand(command, value)
-			executor.execute(command, value)
+				console.log('[useCommands.execute] Selection changed:', hasSelectionChanged)
+				if (hasSelectionChanged) {
+					console.log('[useCommands.execute] Updating selection state')
+					state.selection = selection
+					state.range = selection.getRangeAt(0).cloneRange()
+					state.rangeCount = selection.rangeCount
+				}
+			}
 		},
 		isActive: executor.isActive,
 		getValue: executor.getValue