@bagelink/vue 0.0.1260 → 0.0.1268

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

@@ -1,4 +1,7 @@
 import type { EditorState } from '../richTextTypes'
+import { formatting } from './formatting'
+import { insertImage, insertLink, insertEmbed } from './media'
+import { addRow, deleteRow, mergeCells, splitCell, insertTable, deleteTable, insertColumn, deleteColumn, alignColumn } from './table'
 
 export interface Command {
 	name: string
@@ -17,6 +20,184 @@ export interface CommandExecutor {
 	getValue: (command: string) => string | null
 }
 
+// Centralized command creation helper
+function createCommand(name: string, execute: Command['execute'], isActive?: Command['isActive']): Command {
+	return {
+		name,
+		execute: (state: EditorState, value?: string) => {
+			if (!state.doc) return
+			execute(state, value)
+		},
+		isActive
+	}
+}
+
+// Create formatting commands helper
+function createFormattingCommand(state: EditorState, type: 'text' | 'block' | 'list', command: string, tag?: string): Command {
+	const format = formatting(state)
+	return createCommand(
+		command,
+		() => {
+			if (!state.doc) return
+
+			if (type === 'text') {
+				if (command === 'bold') state.doc.execCommand('bold', false)
+				else if (command === 'italic') state.doc.execCommand('italic', false)
+				else if (command === 'underline') state.doc.execCommand('underline', false)
+				else format.text(command)
+			}
+			else if (type === 'block') {
+				state.doc.execCommand('formatBlock', false, `<${tag || command}>`)
+			}
+			else if (type === 'list') {
+				const selection = state.doc.getSelection()
+				if (!selection || !selection.rangeCount) return
+
+				const range = selection.getRangeAt(0)
+
+				// If there's no content or the selection is collapsed
+				if (range.collapsed && (!range.startContainer.textContent?.trim() || range.startContainer === state.doc.body)) {
+					// Create a new list with an empty item
+					const list = state.doc.createElement(command === 'orderedList' ? 'ol' : 'ul')
+					const li = state.doc.createElement('li')
+					// Use a non-breaking space with br to ensure proper rendering
+					li.innerHTML = '&nbsp;<br>'
+					list.appendChild(li)
+
+					// If we're in an empty paragraph, replace it
+					const currentBlock = range.startContainer.nodeType === 1
+						? range.startContainer as Element
+						: range.startContainer.parentElement
+
+					if (currentBlock?.tagName.toLowerCase() === 'p' && isNodeEmpty(currentBlock)) {
+						currentBlock.parentNode?.replaceChild(list, currentBlock)
+					} else {
+						// Otherwise insert at cursor
+						range.insertNode(list)
+					}
+
+					// Move cursor into the list item
+					range.selectNodeContents(li)
+					range.collapse(true)
+					selection.removeAllRanges()
+					selection.addRange(range)
+				} else {
+					// Use standard command for existing content
+					state.doc.execCommand(
+						command === 'orderedList' ? 'insertOrderedList' : 'insertUnorderedList',
+						false
+					)
+				}
+			}
+		},
+		() => state.selectedStyles.has(command)
+	)
+}
+
+// Helper function to check if a node is empty (contains only whitespace or <br>)
+function isNodeEmpty(node: Node): boolean {
+	const text = node.textContent?.trim() || ''
+	if (text) return false
+
+	// Check for <br> tags
+	const brElements = (node as Element).getElementsByTagName('br')
+	if (brElements.length === 0) return true
+
+	// If there's only one <br> and it's the only content, consider it empty
+	return brElements.length === 1 && node.childNodes.length === 1
+}
+
+export function createCommandRegistry(state: EditorState): CommandRegistry {
+	const format = formatting(state)
+
+	// History commands
+	const historyCommands = {
+		undo: createCommand('Undo', () => state.doc?.execCommand('undo', false)),
+		redo: createCommand('Redo', () => state.doc?.execCommand('redo', false))
+	}
+
+	// Basic text formatting commands
+	const textCommands = ['bold', 'italic', 'underline'].reduce((acc, cmd) => ({
+		...acc,
+		[cmd]: createFormattingCommand(state, 'text', cmd)
+	}), {})
+
+	// Heading commands
+	const headingCommands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].reduce((acc, cmd) => ({
+		...acc,
+		[cmd]: createFormattingCommand(state, 'block', cmd)
+	}), {})
+
+	// Block commands
+	const blockCommands = {
+		p: createFormattingCommand(state, 'block', 'p'),
+		blockquote: createFormattingCommand(state, 'block', 'blockquote')
+	}
+
+	// List commands
+	const listCommands = {
+		orderedList: createFormattingCommand(state, 'list', 'orderedList'),
+		unorderedList: createFormattingCommand(state, 'list', 'unorderedList')
+	}
+
+	// Table commands
+	const tableCommands = {
+		insertTable: createCommand('Insert Table', (state, value) => {
+			const [rows, cols] = value?.split('x').map(Number) || [3, 3]
+			insertTable(rows, cols, state)
+		}),
+		deleteTable: createCommand('Delete Table', state => state.range && deleteTable(state.range)),
+		mergeCells: createCommand('Merge Cells', state => state.range && state.doc && mergeCells(state.range, state.doc)),
+		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))
+	}
+
+	// Alignment commands
+	const alignmentCommands = ['Left', 'Center', 'Right', 'Justify'].reduce((acc, align) => ({
+		...acc,
+		[`align${align}`]: createCommand(`Align ${align}`, state => state.range && alignColumn(state.range, align.toLowerCase() as 'left' | 'center' | 'right' | 'justify'))
+	}), {})
+
+	// 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)
+	}
+
+	// Media commands
+	const mediaCommands = {
+		image: createCommand('Insert Image', state => state.modal && insertImage(state.modal, state)),
+		link: createCommand('Insert Link', state => state.modal && state.range && insertLink(state.modal, state)),
+		embed: createCommand('Insert Embed', state => state.modal && insertEmbed(state.modal, state))
+	}
+
+	// Other formatting commands
+	const otherCommands = {
+		clear: createCommand('Clear Formatting', () => { format.clear() }),
+		indent: createCommand('Indent', () => { format.text('indent') }),
+		outdent: createCommand('Outdent', () => { format.text('outdent') })
+	}
+
+	return {
+		...historyCommands,
+		...textCommands,
+		...headingCommands,
+		...blockCommands,
+		...listCommands,
+		...tableCommands,
+		...alignmentCommands,
+		...viewCommands,
+		...mediaCommands,
+		...otherCommands
+	}
+}
+
 export function createCommandExecutor(state: EditorState, commands: CommandRegistry): CommandExecutor {
 	return {
 		execute(command: string, value?: string) {

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

@@ -1,9 +1,10 @@
-import type { EditorState, Modal } from '../richTextTypes'
+import type { Modal } from '@bagelink/vue'
+import type { EditorState } from '../richTextTypes'
 import { bagelFormUtils } from '@bagelink/vue'
 
 const { frmRow, numField } = bagelFormUtils
 
-export function insertImage(modal: Modal, state: EditorState) {
+export function insertImage(modal: typeof Modal, state: EditorState) {
 	const { range, doc } = state
 	if (!range || !doc) return
 
@@ -45,7 +46,7 @@ export function insertImage(modal: Modal, state: EditorState) {
 	})
 }
 
-export function insertLink(modal: Modal, state: EditorState) {
+export function insertLink(modal: typeof Modal, state: EditorState) {
 	const { range, doc } = state
 	if (!range || !doc) return
 
@@ -65,3 +66,63 @@ export function insertLink(modal: Modal, state: EditorState) {
 		}
 	})
 }
+
+export function insertEmbed(modal: typeof Modal, state: EditorState) {
+	const { range, doc } = state
+	if (!range || !doc) return
+
+	modal.showModalForm({
+		title: 'Insert Embed',
+		schema: [
+			{ id: 'url', $el: 'text', label: 'URL', attrs: { placeholder: 'Enter URL (YouTube, Vimeo, etc.)' } },
+			frmRow(
+				numField('width', 'Width', { min: 200, placeholder: '560' }),
+				numField('height', 'Height', { min: 200, placeholder: '315' })
+			),
+			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', value: true },
+		],
+		onSubmit: (data: { url: string, width?: number, height?: number, allowFullscreen?: boolean }) => {
+			if (!data.url) return
+
+			// Convert common video URLs to embed URLs
+			const url = new URL(data.url)
+			let embedUrl = data.url
+
+			// YouTube
+			if (url.hostname.includes('youtube.com') || url.hostname === 'youtu.be') {
+				const videoId = url.hostname === 'youtu.be'
+					? url.pathname.slice(1)
+					: url.searchParams.get('v')
+				if (videoId) {
+					embedUrl = `https://www.youtube.com/embed/${videoId}`
+				}
+			}
+			// Vimeo
+			else if (url.hostname.includes('vimeo.com')) {
+				const videoId = url.pathname.split('/').pop()
+				if (videoId) {
+					embedUrl = `https://player.vimeo.com/video/${videoId}`
+				}
+			}
+
+			const iframe = doc.createElement('iframe')
+			Object.assign(iframe, {
+				src: embedUrl,
+				width: data.width || 560,
+				height: data.height || 315,
+				frameBorder: '0',
+				allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+				allowFullscreen: data.allowFullscreen
+			})
+
+			// Create a wrapper div for proper alignment and spacing
+			const wrapper = doc.createElement('div')
+			wrapper.style.textAlign = 'center'
+			wrapper.style.margin = '1em 0'
+			wrapper.appendChild(iframe)
+
+			range.deleteContents()
+			range.insertNode(wrapper)
+		}
+	})
+}

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

@@ -12,23 +12,58 @@ export function isStyleActive(style: string, doc: Document) {
 
 	const range = selection.getRangeAt(0)
 	const container = range.commonAncestorContainer
-	const parent = container.nodeType === 3 ? container.parentElement : container as Element
+	const parent = container.nodeType === Node.TEXT_NODE ? container.parentElement : container as Element
 
 	if (!parent) return false
 
 	const checkParent = (element: Element | null, tags: string[]): boolean => {
-		if (!element) return false
-		if (tags.includes(element.tagName.toLowerCase())) return true
+		if (!element || !element.tagName) return false
+		const tagName = element.tagName.toLowerCase()
+		if (tags.includes(tagName)) return true
 		return checkParent(element.parentElement, tags)
 	}
 
-	const styleTags: { [key: string]: string[] } = {
+	// Define style mappings for different types of formatting
+	const styleMappings: { [key: string]: string[] } = {
+		// Inline styles
 		bold: ['strong', 'b'],
 		italic: ['em', 'i'],
 		underline: ['u'],
+
+		// Block styles
+		h1: ['h1'],
+		h2: ['h2'],
+		h3: ['h3'],
+		h4: ['h4'],
+		h5: ['h5'],
+		h6: ['h6'],
+		p: ['p'],
+		blockquote: ['blockquote'],
+
+		// List styles
+		orderedList: ['ol'],
+		unorderedList: ['ul']
+	}
+
+	// Special handling for view state commands
+	if (['splitView', 'codeView', 'fullScreen'].includes(style)) {
+		return false // These are handled by the editor state directly
+	}
+
+	// Special handling for list items
+	if (style === 'orderedList' || style === 'unorderedList') {
+		const listParent = parent.closest(style === 'orderedList' ? 'ol' : 'ul')
+		return !!listParent
+	}
+
+	// Check for the style in the style mappings
+	const tags = styleMappings[style]
+	if (tags) {
+		return checkParent(parent, tags)
 	}
 
-	return checkParent(parent, styleTags[style] ?? [style])
+	// Default to checking the style itself if no mapping exists
+	return checkParent(parent, [style])
 }
 
 export interface SelectionInfo {

package/src/components/form/useBagelFormState.ts

@@ -1,5 +1,6 @@
 import type { Ref } from 'vue'
 import { inject, provide, ref } from 'vue'
+import { getNestedValue } from '../../utils'
 
 export const FORM_STATE_KEY = Symbol('bagelFormState')
 
@@ -30,20 +31,7 @@ export function provideBagelFormState<T>(initialData: T) {
 	const data = ref(initialData) as Ref<T>
 	const isDirty = ref(false)
 
-	const getFieldData = (path?: string) => {
-		if (!path) return ''
-		const keys = path.split(/[.[]/)
-		let current = data.value as any
-
-		for (let i = 0; i < keys.length; i++) {
-			const key = keys[i]
-			if (!current || typeof current !== 'object' || !(key in current)) {
-				return ''
-			}
-			current = current[key]
-		}
-		return current ?? ''
-	}
+	const getFieldData = (path?: string) => getNestedValue(data.value, path, '')
 
 	const updateField = (path: string, value: any) => {
 		const keys = path.split(/[.[]/)

package/src/utils/index.ts

@@ -180,3 +180,18 @@ export function pathKeyToURL(pathKey?: string) {
 	}
 	return `${fileBaseUrl}/${pathKey}`
 }
+
+export function getNestedValue(obj: any, path?: string, defaultValue: any = undefined): any {
+	if (!path) return obj
+	const keys = path.split(/[.[]/)
+	let current = obj
+
+	for (const key of keys) {
+		if (!current || typeof current !== 'object' || !(key in current)) {
+			return defaultValue
+		}
+		current = current[key]
+	}
+
+	return current ?? defaultValue
+}