@bagelink/vue 0.0.1025 → 0.0.1031

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

@@ -1,21 +1,66 @@
-
 export function useEditorKeyboard(doc: Document, handleToolbarAction: (action: string, value?: string) => void): void {
-  doc.addEventListener('keydown', (e) => {
-    if (e.ctrlKey || e.metaKey) {
-      switch (e.key) {
-        case 'b':
-          e.preventDefault()
-          handleToolbarAction('bold')
-          break
-        case 'i':
-          e.preventDefault()
-          handleToolbarAction('italic')
-          break
-        case 'u':
-          e.preventDefault()
-          handleToolbarAction('underline')
-          break
-      }
-    }
-  })
+	doc.addEventListener('keydown', (e) => {
+		if (e.ctrlKey || e.metaKey) {
+			switch (e.key) {
+				case 'b':
+					e.preventDefault()
+					handleToolbarAction('bold')
+					break
+				case 'i':
+					e.preventDefault()
+					handleToolbarAction('italic')
+					break
+				case 'u':
+					e.preventDefault()
+					handleToolbarAction('underline')
+					break
+				case 'z':
+					e.preventDefault()
+					if (e.shiftKey) {
+						handleToolbarAction('redo')
+					} else {
+						handleToolbarAction('undo')
+					}
+					break
+				case 'y':
+					e.preventDefault()
+					handleToolbarAction('redo')
+					break
+				// List shortcuts
+				case '.':
+					if (e.shiftKey) {
+						e.preventDefault()
+						handleToolbarAction('orderedList')
+					}
+					break
+				case '/':
+					if (e.shiftKey) {
+						e.preventDefault()
+						handleToolbarAction('unorderedList')
+					}
+					break
+				// Heading shortcuts
+				case '1':
+				case '2':
+				case '3':
+				case '4':
+				case '5':
+				case '6':
+					if (e.altKey) {
+						e.preventDefault()
+						handleToolbarAction(`h${e.key}`)
+					}
+					break
+				// Indentation
+				case ']':
+					e.preventDefault()
+					handleToolbarAction('indent')
+					break
+				case '[':
+					e.preventDefault()
+					handleToolbarAction('outdent')
+					break
+			}
+		}
+	})
 }

package/src/components/form/inputs/RichText/config.ts

@@ -5,7 +5,15 @@ export const tableTools: ToolbarConfig = [
 	'splitCells',
 	'addRowBefore',
 	'addRowAfter',
-	'deleteRow'
+	'deleteRow',
+	'insertColumnLeft',
+	'insertColumnRight',
+	'deleteColumn',
+	'alignLeft',
+	'alignCenter',
+	'alignRight',
+	'alignJustify',
+	'deleteTable'
 ]
 
 export const defaultToolbarConfig: ToolbarConfig = [
@@ -19,10 +27,15 @@ export const defaultToolbarConfig: ToolbarConfig = [
 	'italic',
 	'underline',
 	'separator',
+	'fontColor',
+	'bgColor',
+	'separator',
 	'p',
 	'blockquote',
 	'orderedList',
 	'unorderedList',
+	'indent',
+	'outdent',
 	'separator',
 	'link',
 	'image',
@@ -31,7 +44,10 @@ export const defaultToolbarConfig: ToolbarConfig = [
 	'splitView',
 	'clear',
 	'insertTable',
-	// ...tableTools,
+	...tableTools,
+	'separator',
+	'undo',
+	'redo',
 	'fullScreen',
 ]
 

package/src/components/form/inputs/RichText/editor.css

@@ -1,26 +1,28 @@
 body {
-    margin: 0;
-    padding: 8px;
-    min-height: 200px;
-    font-family: sans-serif;
-    line-height: 1.5;
-    color: inherit;
-    background: transparent;
+	margin: 0;
+	padding: 8px;
+	min-height: 200px;
+	font-family: sans-serif;
+	line-height: 1.5;
+	color: inherit;
+	background: transparent;
+	max-width: 1060px;
+	margin: 0 auto;
 }
 
 table {
-    border-collapse: collapse;
-    margin-bottom: 1rem;
+	border-collapse: collapse;
+	margin-bottom: 1rem;
 }
 
 th,
 td {
-    padding: 1rem;
-    text-align: left;
-    border: 1px solid #2a2a2a;
-    line-height: 1.5;
+	padding: 1rem;
+	text-align: left;
+	border: 1px solid #2a2a2a;
+	line-height: 1.5;
 }
 
 th {
-    background-color: #f4f4f4;
-}
+	background-color: #f4f4f4;
+}

package/src/components/form/inputs/RichText/index.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
 import type { ToolbarConfig } from './richTextTypes'
-import { useModal, CodeEditor } from '@bagelink/vue'
-import { watch } from 'vue'
-import Toolbar from './components/Toolbar.vue'
+import { CodeEditor, copyText, Btn } from '@bagelink/vue'
+import { watch, computed } from 'vue'
+import EditorToolbar from './components/EditorToolbar.vue'
+import { useCommands } from './composables/useCommands'
 import { useEditor } from './composables/useEditor'
 import { useEditorKeyboard } from './composables/useEditorKeyboard'
 
-const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
+const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig, debug?: boolean }>()
 const emit = defineEmits(['update:modelValue'])
 
 const iframe = $ref<HTMLIFrameElement>()
-const modal = useModal()
 const editor = useEditor()
+const commands = useCommands(editor.state, props.debug ? editor.debug : undefined)
+
+// Expose debug methods if debug mode is enabled
+const debugMethods = computed(() => props.debug ? editor.debug : undefined)
 
 async function initEditor() {
 	if (!iframe) {
@@ -25,14 +29,44 @@ async function initEditor() {
 	doc.designMode = 'on'
 	doc.body.contentEditable = 'true'
 
+	// Set default direction based on content
+	const hasRTL = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(props.modelValue)
+	doc.body.dir = hasRTL ? 'rtl' : 'ltr'
+
 	const style = doc.createElement('style')
 	style.textContent = (await import('./editor.css?inline')).default
 	doc.head.appendChild(style)
 
-	editor.init(doc, modal)
-	useEditorKeyboard(doc, (action, value) => {
-		editor.handleToolbarAction(action, value)
-	})
+	editor.init(doc)
+	useEditorKeyboard(doc, commands.execute)
+
+	// Initial cleanup and ensure there's at least one paragraph
+	if (!doc.body.firstElementChild) {
+		const p = doc.createElement('p')
+		p.dir = doc.body.dir
+		p.innerHTML = '<br>'
+		doc.body.appendChild(p)
+	} else {
+		// Convert any direct text nodes to paragraphs
+		const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
+		const textNodes: Text[] = []
+		let node: Node | null
+		while (node = walker.nextNode()) {
+			if (node.parentElement === doc.body) {
+				textNodes.push(node as Text)
+			}
+		}
+		textNodes.forEach((textNode) => {
+			if (textNode.textContent?.trim()) {
+				const p = doc.createElement('p')
+				p.dir = doc.body.dir
+				p.appendChild(textNode.cloneNode())
+				doc.body.replaceChild(p, textNode)
+			} else {
+				doc.body.removeChild(textNode)
+			}
+		})
+	}
 
 	doc.body.focus()
 }
@@ -51,19 +85,33 @@ watch(() => editor.state.content, (newValue) => {
 
 <template>
 	<div class="rich-text-editor rounded pt-05 px-05 pb-075 mb-05" :class="{ 'fullscreen-mode': editor.state.isFullscreen }">
-		<Toolbar
+		<EditorToolbar
 			v-if="editor.state.hasInit" :config="toolbarConfig" :selectedStyles="editor.state.selectedStyles"
-			@action="editor.handleToolbarAction"
+			@action="commands.execute"
 		/>
-		<div class="editor-container" :class="{ 'split-view': editor?.state.isSplitView }">
+		<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
 			<div class="content-area radius-05">
 				<iframe id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" @load="initEditor" />
 			</div>
 			<CodeEditor
-				v-if="editor?.state.isSplitView" v-model="editor.state.content" language="html"
+				v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
 				@update:modelValue="editor.updateContent('html')"
 			/>
 		</div>
+		<div v-if="debug" class="flex">
+			<p class="text12 txt-gray mb-0 p-0">
+				Debug
+			</p>
+			<Btn thin color="gray" icon="delete" @click="debugMethods?.clearSession">
+				Clear Session
+			</Btn>
+			<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
+				Download Log
+			</Btn>
+			<Btn thin color="gray" icon="content_copy" @click="copyText(debugMethods?.exportDebugWithPrompt() || '')">
+				Copy Log
+			</Btn>
+		</div>
 	</div>
 </template>
 
@@ -148,4 +196,10 @@ line-height: 1.65;
 .fullscreen-mode .code-editor{
 	height: 100% !important;
 }
+
+.debug-controls {
+	display: flex;
+	gap: 0.5rem;
+	justify-content: flex-end;
+}
 </style>

package/src/components/form/inputs/RichText/richTextTypes.d.ts

@@ -20,6 +20,8 @@ export interface EditorState {
 	range?: Range | null
 	doc?: Document
 	modal?: Modal
+	undoStack: string[]
+	redoStack: string[]
 }
 
 export type FormattingCommand =

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

@@ -0,0 +1,37 @@
+import type { EditorState } from '../richTextTypes'
+
+export interface Command {
+	name: string
+	execute: (state: EditorState, value?: string) => void
+	isActive?: (state: EditorState) => boolean
+	getValue?: (state: EditorState) => string | null
+}
+
+export interface CommandRegistry {
+	[key: string]: Command
+}
+
+export interface CommandExecutor {
+	execute: (command: string, value?: string) => void
+	isActive: (command: string) => boolean
+	getValue: (command: string) => string | null
+}
+
+export function createCommandExecutor(state: EditorState, commands: CommandRegistry): CommandExecutor {
+	return {
+		execute(command: string, value?: string) {
+			const cmd = commands[command]
+			if (cmd) {
+				cmd.execute(state, value)
+			}
+		},
+		isActive(command: string): boolean {
+			const cmd = commands[command]
+			return cmd.isActive?.(state) || false
+		},
+		getValue(command: string): string | null {
+			const cmd = commands[command]
+			return cmd.getValue?.(state) || null
+		}
+	}
+}

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

@@ -0,0 +1,196 @@
+import type { EditorState } from '../richTextTypes'
+
+export interface EditorAction {
+	type: 'command' | 'paste' | 'keyboard' | 'selection' | 'input'
+	name: string
+	timestamp: number
+	details: Record<string, any>
+	state: EditorStateSnapshot
+}
+
+export interface EditorStateSnapshot {
+	content: string
+	selection: {
+		start: number
+		end: number
+		collapsed: boolean
+		text: string
+	} | null
+	activeStyles: string[]
+	caretPosition: {
+		node: string // Node description
+		offset: number
+	} | null
+}
+
+export interface DebugSession {
+	id: string
+	startTime: number
+	actions: EditorAction[]
+}
+
+export class EditorDebugger {
+	private session: DebugSession
+	private maxActions: number
+	private isDevelopment: boolean
+
+	constructor(maxActions = 1000) {
+		this.maxActions = maxActions
+		this.session = this.createNewSession()
+		this.isDevelopment = import.meta.env.DEV
+	}
+
+	private createNewSession(): DebugSession {
+		return {
+			id: `session_${Date.now()}`,
+			startTime: Date.now(),
+			actions: []
+		}
+	}
+
+	private getNodeDescription(node: Node): string {
+		if (node.nodeType === Node.TEXT_NODE) {
+			return `Text("${node.textContent?.slice(0, 20)}${node.textContent && node.textContent.length > 20 ? '...' : ''}")`
+		}
+		const element = node as Element
+		return `${element.tagName.toLowerCase()}${element.id ? `#${element.id}` : ''}`
+	}
+
+	private captureState(state: EditorState): EditorStateSnapshot {
+		if (!state.doc || !state.selection) {
+			return {
+				content: '',
+				selection: null,
+				activeStyles: [],
+				caretPosition: null
+			}
+		}
+
+		const { selection } = state
+		const range = selection.rangeCount ? selection.getRangeAt(0) : null
+
+		return {
+			content: state.doc.body.innerHTML,
+			selection: range
+				? {
+					start: range.startOffset,
+					end: range.endOffset,
+					collapsed: range.collapsed,
+					text: range.toString()
+				}
+				: null,
+			activeStyles: Array.from(state.selectedStyles),
+			caretPosition: range
+				? {
+					node: this.getNodeDescription(range.startContainer),
+					offset: range.startOffset
+				}
+				: null
+		}
+	}
+
+	logCommand(command: string, value: string | undefined, state: EditorState) {
+		this.addAction({
+			type: 'command',
+			name: command,
+			timestamp: Date.now(),
+			details: { value },
+			state: this.captureState(state)
+		})
+	}
+
+	logPaste(data: DataTransfer, state: EditorState) {
+		this.addAction({
+			type: 'paste',
+			name: 'paste',
+			timestamp: Date.now(),
+			details: {
+				html: data.getData('text/html'),
+				text: data.getData('text/plain'),
+				types: Array.from(data.types)
+			},
+			state: this.captureState(state)
+		})
+	}
+
+	logKeyboard(event: KeyboardEvent, state: EditorState) {
+		this.addAction({
+			type: 'keyboard',
+			name: 'keypress',
+			timestamp: Date.now(),
+			details: {
+				key: event.key,
+				code: event.code,
+				ctrl: event.ctrlKey,
+				alt: event.altKey,
+				shift: event.shiftKey,
+				meta: event.metaKey
+			},
+			state: this.captureState(state)
+		})
+	}
+
+	logSelection(state: EditorState) {
+		this.addAction({
+			type: 'selection',
+			name: 'selection_change',
+			timestamp: Date.now(),
+			details: {},
+			state: this.captureState(state)
+		})
+	}
+
+	logInput(inputType: string, data: string | null, state: EditorState) {
+		this.addAction({
+			type: 'input',
+			name: inputType,
+			timestamp: Date.now(),
+			details: { data },
+			state: this.captureState(state)
+		})
+	}
+
+	private addAction(action: EditorAction) {
+		this.session.actions.push(action)
+		if (this.session.actions.length > this.maxActions) {
+			this.session.actions.shift()
+		}
+
+		// Log to console in development
+		if (this.isDevelopment) {
+			console.log('Editor Action:', action)
+		}
+	}
+
+	getSession(): DebugSession {
+		return this.session
+	}
+
+	clearSession() {
+		this.session = this.createNewSession()
+	}
+
+	exportSession(): string {
+		return JSON.stringify(this.session, null, 2)
+	}
+
+	downloadSession() {
+		const blob = new Blob([this.exportSession()], { type: 'application/json' })
+		const url = URL.createObjectURL(blob)
+		const a = document.createElement('a')
+		a.href = url
+		a.download = `editor_session_${this.session.id}.json`
+		document.body.appendChild(a)
+		a.click()
+		document.body.removeChild(a)
+		URL.revokeObjectURL(url)
+	}
+
+	exportSessionWithPrompt(userMessage?: string): string {
+		const prompt = {
+			message: userMessage || 'here is a debug log, can you analyze and fix accordingly?',
+			session: this.session
+		}
+		return JSON.stringify(prompt, null, 2)
+	}
+}