@bagelink/vue 0.0.1025 → 0.0.1031

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

@@ -1,345 +1,225 @@
 import type { EditorState } from '../richTextTypes'
+import { analyzeSelection, restoreSelection, getBlocksBetween } from './selection'
 
 export function formatting(state: EditorState) {
-	const { doc, range, selection } = state
-	function setRangeAndSelect(node: Node, start: number, end: number) {
-		if (!range) return
-		range.setStart(node, start)
-		range.setEnd(node, end)
-	}
-	const wrapWithTag = (content: string, tag: string): HTMLElement => {
-		const wrapper = doc!.createElement(tag)
-		wrapper.textContent = content
-		return wrapper
-	}
+	const { doc } = state
+	if (!doc) return { text: () => {}, block: () => {}, list: () => {}, clear: () => {} }
 
-	const createBlockElement = (tag: string, content: DocumentFragment): HTMLElement => {
-		const block = doc!.createElement(tag)
-		block.appendChild(content)
-		return block
-	}
-	const clear = () => {
-		if (!doc || !range || !selection) return
+	const text = (command: string) => {
+		const selection = doc.getSelection()
+		if (!selection || !selection.rangeCount) return
 
-		const inlineTags = ['b', 'i', 'u', 'strong', 'em']
+		const range = selection.getRangeAt(0)
+		const container = range.commonAncestorContainer
+		const parentBlock = container.nodeType === 3 ? container.parentElement : container as HTMLElement
 
-		const isInlineTag = (el: HTMLElement | null) => el && inlineTags.includes(el.tagName.toLowerCase())
+		// Preserve RTL direction when applying text formatting
+		const isRTL = parentBlock?.closest('[dir="rtl"]') !== null
 
-		if (range.collapsed) {
-			// No action if the selection is collapsed
-			return
-		}
+		// Don't apply inline styles directly to block elements
+		if (parentBlock?.tagName.match(/^H[1-6]|P|BLOCKQUOTE|LI$/)) {
+			if (!range.collapsed && range.toString().trim()) {
+				const span = doc.createElement('span') as HTMLSpanElement
+				if (command === 'underline') span.style.textDecoration = 'underline'
+				else if (command === 'bold') span.style.fontWeight = 'bold'
+				else if (command === 'italic') span.style.fontStyle = 'italic'
 
-		// Extract the selected content
-		const selectedContent = range.extractContents()
-
-		// Helper function to recursively clean inline tags
-		const cleanInlineTags = (node: Node): Node => {
-			if (node.nodeType === 1 && isInlineTag(node as HTMLElement)) {
-				// Inline element: replace it with its children
-				const fragment = doc.createDocumentFragment()
-				let child = node.firstChild // Start with the first child
-				while (child) {
-					const { nextSibling } = child // Store the next sibling before appending
-					fragment.appendChild(cleanInlineTags(child))
-					child = nextSibling // Move to the next sibling
-				}
-				return fragment
-			} else if (node.nodeType === 1) {
-				// Non-inline element: clean its children
-				const element = node.cloneNode(false) as HTMLElement
-				let child = node.firstChild // Start with the first child
-				while (child) {
-					const { nextSibling } = child // Store the next sibling before appending
-					element.appendChild(cleanInlineTags(child))
-					child = nextSibling // Move to the next sibling
-				}
-				return element
-			} else if (node.nodeType === 3) {
-				// Text node: return as is
-				return node
+				if (isRTL) span.dir = 'rtl'
+				range.surroundContents(span)
 			}
-			return doc.createTextNode('') // Ignore other node types
+		} else {
+			doc.execCommand(command, false)
 		}
+	}
 
-		// Clean the extracted content
-		const fragment = doc.createDocumentFragment()
-		Array.from(selectedContent.childNodes).forEach((child) => {
-			const cleanedChild = cleanInlineTags(child)
-			if (cleanedChild.nodeType === 11) {
-				// If it's a DocumentFragment, append its children directly
-				fragment.appendChild(cleanedChild)
-			} else {
-				fragment.appendChild(cleanedChild)
-			}
-		})
-
-		// Replace the range content with the cleaned content
-		range.deleteContents()
-		range.insertNode(fragment)
+	const block = (command: string, tag: string) => {
+		const selection = doc.getSelection()
+		if (!selection || !selection.rangeCount) return
 
-		// Normalize the DOM (merge adjacent text nodes)
-		const normalizeDom = (node: Node) => {
-			if (node.nodeType === 3 && node.nextSibling?.nodeType === 3) {
-				// Merge adjacent text nodes
-				if (node.textContent && node.nextSibling.textContent) {
-					node.textContent += node.nextSibling.textContent
+		const range = selection.getRangeAt(0)
+		const container = range.commonAncestorContainer
+		const parentBlock = container.nodeType === 3 ? container.parentElement : container as HTMLElement
+		const isRTL = parentBlock?.closest('[dir="rtl"]') !== null
+
+		// Remove any invalid inline style wrapping
+		if (parentBlock?.closest('u, b, i')) {
+			const wrapper = parentBlock.closest('u, b, i')
+			if (wrapper) {
+				const parent = wrapper.parentNode
+				while (wrapper.firstChild) {
+					parent?.insertBefore(wrapper.firstChild, wrapper)
 				}
-				node.parentNode?.removeChild(node.nextSibling)
-			} else if (node.nodeType === 1) {
-				// Recursively normalize child nodes
-				Array.from(node.childNodes).forEach((child) => {
-					normalizeDom(child)
-				})
+				wrapper.remove()
 			}
 		}
 
-		Array.from(fragment.childNodes).forEach((child) => {
-			normalizeDom(child)
-		})
+		doc.execCommand('formatBlock', false, tag)
 
-		// Update the selection to cover the cleaned content
-		selection.removeAllRanges()
-		range.selectNodeContents(fragment)
-		selection.addRange(range)
+		// Preserve RTL direction after block formatting
+		if (isRTL) {
+			const newBlock = selection.anchorNode?.parentElement?.closest(tag.toLowerCase()) as HTMLElement
+			if (newBlock) newBlock.dir = 'rtl'
+		}
 	}
 
-	const text = (command: string) => {
-		if (!doc || !range || !selection) return
-		const { startOffset, endOffset } = range
-
-		let tag = ''
-		if (command === 'bold') tag = 'b'
-		if (command === 'italic') tag = 'i'
-		if (command === 'underline') tag = 'u'
-		if (command === 'emphasis') tag = 'em'
-		if (command === 'strong') tag = 'strong'
-
-		const relatedTags: { [key: string]: string[] } = {
-			b: ['strong'],
-			i: ['em'],
-			u: ['u'],
-			em: ['i'],
-			strong: ['b'],
-		}
+	const list = (command: string) => {
+		if (!state.doc || !state.range || !state.selection) return
 
-		const isTagMatch = (el: HTMLElement | null) => el
-			&& (el.tagName.toLowerCase() === tag || relatedTags[tag].includes(el.tagName.toLowerCase()))
-
-		if (range.collapsed) {
-			// Handle collapsed range
-			const container = range.commonAncestorContainer
-			const parent = container.parentElement
-			if (parent && isTagMatch(parent)) {
-				const textNode = doc.createTextNode(parent.textContent || '')
-				parent.parentNode?.replaceChild(textNode, parent)
-				range.selectNodeContents(textNode)
-				selection.removeAllRanges()
-				setRangeAndSelect(textNode, startOffset, endOffset)
-				selection.addRange(range)
-			}
-			return
-		}
+		const listTag = command === 'orderedList' ? 'ol' : 'ul'
+		const selectionInfo = analyzeSelection(state.doc, state.range)
+		if (!selectionInfo) return
 
-		const container = range.commonAncestorContainer
-		const parent = container.parentElement
-
-		if (parent && isTagMatch(parent)) {
-			// Split text content into three parts: before, selected, and after
-			const parentText = parent.textContent || ''
-			const beforeText = parentText.substring(0, range.startOffset - parentText.indexOf(parent.textContent || ''))
-			const selectedText = parentText.substring(range.startOffset, range.endOffset)
-			const afterText = parentText.substring(range.endOffset)
-
-			// Create text nodes for before, selected, and after
-			if (beforeText) {
-				const beforeNode = wrapWithTag(beforeText, tag)
-				parent.parentNode?.insertBefore(beforeNode, parent)
-			}
+		const isRTL = selectionInfo.parent.closest('[dir="rtl"]') !== null
 
-			// Add unwrapped selected text
-			const unwrappedTextNode = doc.createTextNode(selectedText)
-			parent.parentNode?.insertBefore(unwrappedTextNode, parent)
+		// If we're inside a list item, handle toggling off or switching list type
+		const listItem = selectionInfo.parent.closest('li')
+		if (listItem) {
+			const listParent = listItem.parentElement
+			if (!listParent) return
 
-			if (afterText) {
-				const afterNode = wrapWithTag(afterText, tag)
-				parent.parentNode?.insertBefore(afterNode, parent)
-			}
+			// If it's the same list type, toggle off
+			if (listParent.tagName.toLowerCase() === listTag) {
+				// Create a paragraph from the list item content
+				const p = state.doc.createElement('p') as HTMLParagraphElement
+				if (isRTL) p.dir = 'rtl'
+				while (listItem.firstChild) {
+					p.appendChild(listItem.firstChild)
+				}
 
-			// Remove the original parent node
-			parent.parentNode?.removeChild(parent)
+				listParent.parentNode?.insertBefore(p, listParent)
+				listItem.remove()
 
-			// Reselect the unwrapped text
-			range.selectNode(unwrappedTextNode)
-		} else {
-			// Standard case: wrap the selection
-			const selectedContent = range.extractContents()
-			const wrapper = doc.createElement(tag)
-			wrapper.appendChild(selectedContent)
-			range.insertNode(wrapper)
-
-			// Clean up nested tags
-			const nestedTags = wrapper.querySelectorAll(`${tag},${(relatedTags[tag] || []).join(',')}`)
-			nestedTags.forEach((nestedTag) => {
-				while (nestedTag.firstChild) {
-					nestedTag.parentNode?.insertBefore(nestedTag.firstChild, nestedTag)
+				if (!listParent.querySelector('li')) {
+					listParent.remove()
 				}
-				nestedTag.parentNode?.removeChild(nestedTag)
-			})
 
-			// Reselect the wrapped content
-			range.selectNodeContents(wrapper)
-		}
+				restoreSelection(state.doc, state.range, state.selection, selectionInfo, p)
+				return
+			}
 
-		selection.removeAllRanges()
-		selection.addRange(range)
-	}
-	const block = (command: string, value: string) => {
-		if (!doc || !range || !selection) return
-		const container = range.commonAncestorContainer
-		const parent = container.nodeType === 3 ? container.parentElement : (container as Element)
-		if (!parent) return
+			// Convert to the other list type
+			const newList = state.doc.createElement(listTag) as HTMLElement
+			if (isRTL) newList.dir = 'rtl'
+			const allItems = Array.from(listParent.children)
+			allItems.forEach(item => newList.appendChild(item.cloneNode(true)))
+			listParent.parentNode?.replaceChild(newList, listParent)
+
+			const newListItem = newList.children[Array.from(allItems).indexOf(listItem)]
+			restoreSelection(state.doc, state.range, state.selection, selectionInfo, newListItem)
+			return
+		}
 
-		const currentHeading = parent.closest('p,h1,h2,h3,h4,h5,h6,blockquote')
-		const { startOffset, endOffset } = range
-		const blockEl = currentHeading || parent.closest('p,h1,h2,h3,h4,h5,h6') || parent
-		range.selectNodeContents(blockEl)
+		// For single block conversion
+		if (!selectionInfo.isMultiBlock) {
+			const li = state.doc.createElement('li')
+			const listEl = state.doc.createElement(listTag) as HTMLElement
+			if (isRTL) listEl.dir = 'rtl'
 
-		const content = range.extractContents()
-		const newElement = createBlockElement(value, content)
+			while (selectionInfo.startBlock.firstChild) {
+				li.appendChild(selectionInfo.startBlock.firstChild)
+			}
 
-		if (currentHeading) {
-			currentHeading.parentNode?.replaceChild(newElement, currentHeading)
-		} else {
-			range.insertNode(newElement)
+			listEl.appendChild(li)
+			selectionInfo.startBlock.parentNode?.replaceChild(listEl, selectionInfo.startBlock)
+			restoreSelection(state.doc, state.range, state.selection, selectionInfo, li)
+			return
 		}
 
-		selection.removeAllRanges()
-		setRangeAndSelect(container, startOffset, endOffset)
-		selection.addRange(range)
-	}
-	const list = (command: string) => {
-		if (!doc || !range || !selection) return
-
-		const listTag = command === 'orderedList' ? 'ol' : 'ul'
-		const container = range.commonAncestorContainer
-		const parent = container.nodeType === 3 ? container.parentElement : (container as Element)
-		const currentList = parent?.closest('ul,ol')
+		// Handle multi-block selection
+		const blocks = getBlocksBetween(selectionInfo.startBlock, selectionInfo.endBlock)
+		const listEl = state.doc.createElement(listTag) as HTMLElement
+		if (isRTL) listEl.dir = 'rtl'
 
-		if (!parent) return
+		blocks.forEach((block) => {
+			if (!state.doc) return
+			const li = state.doc.createElement('li')
+			while (block.firstChild) {
+				li.appendChild(block.firstChild)
+			}
+			listEl.appendChild(li)
+			block.remove()
+		})
 
-		// Expand range to include the entire list item if the caret is inside one
-		const listItem = parent.closest('li')
-		if (listItem) {
-			const listParent = listItem.parentElement // The <ol> or <ul>
-			if (!listParent) return
+		selectionInfo.startBlock.parentNode?.insertBefore(listEl, selectionInfo.startBlock)
+		restoreSelection(state.doc, state.range, state.selection, selectionInfo, listEl)
+	}
 
-			// Create new fragments for before and after the selected list item
-			const beforeFragment = doc.createDocumentFragment()
-			const afterFragment = doc.createDocumentFragment()
+	const clear = () => {
+		if (!state.doc || !state.range || !state.selection) return
 
-			let currentNode = listParent.firstChild
-			let isBefore = true
+		const selectionInfo = analyzeSelection(state.doc, state.range)
+		if (!selectionInfo) return
 
-			while (currentNode) {
-				if (currentNode === listItem) {
-					isBefore = false // Mark as "after" once we reach the selected item
-				} else if (isBefore) {
-					beforeFragment.appendChild(currentNode.cloneNode(true))
-				} else {
-					afterFragment.appendChild(currentNode.cloneNode(true))
-				}
-				currentNode = currentNode.nextSibling
-			}
+		const inlineTags = ['b', 'i', 'u', 'strong', 'em', 'span']
+		const fragment = state.range.cloneContents()
+		const tempDiv = state.doc.createElement('div')
+		tempDiv.appendChild(fragment)
 
-			// Convert the selected list item to a standalone block (e.g., <p>)
-			const standaloneBlock = doc.createElement('p')
-			while (listItem.firstChild) {
-				standaloneBlock.appendChild(listItem.firstChild)
+		// Function to clean a node and its children
+		const cleanNode = (node: Node): Node => {
+			if (!state.doc) return node
+			if (node.nodeType === 3) { // Text node
+				return node.cloneNode(true)
 			}
 
-			// Replace the original list with the split fragments and the standalone block
-			const grandParent = listParent.parentNode
-			if (!grandParent) return
+			if (node.nodeType === 1) { // Element node
+				const el = node as HTMLElement
+				const nodeName = el.nodeName.toLowerCase()
 
-			if (beforeFragment.childNodes.length > 0) {
-				const newListBefore = doc.createElement(listParent.tagName.toLowerCase())
-				newListBefore.appendChild(beforeFragment)
-				grandParent.insertBefore(newListBefore, listParent)
-			}
+				// If it's an inline formatting element, just return its text content
+				if (inlineTags.includes(nodeName)) {
+					return state.doc.createTextNode(el.textContent || '')
+				}
 
-			grandParent.insertBefore(standaloneBlock, listParent)
+				// For block elements, create a new clean element
+				const newEl = state.doc.createElement(nodeName)
 
-			if (afterFragment.childNodes.length > 0) {
-				const newListAfter = doc.createElement(listParent.tagName.toLowerCase())
-				newListAfter.appendChild(afterFragment)
-				grandParent.insertBefore(newListAfter, listParent.nextSibling)
-			}
+				// Remove all styles and classes
+				newEl.removeAttribute('style')
+				newEl.removeAttribute('class')
 
-			// Remove the original list
-			grandParent.removeChild(listParent)
+				// Clean and append all child nodes
+				Array.from(el.childNodes).forEach((child) => {
+					newEl.appendChild(cleanNode(child))
+				})
 
-			// Update the selection
-			selection.removeAllRanges()
-			range.selectNodeContents(standaloneBlock)
-			selection.addRange(range)
+				return newEl
+			}
 
-			return
+			return node.cloneNode(true)
 		}
 
-		// Fallback for toggling list behavior (same as previous implementation)
-		const startBlock = parent.closest('p,h1,h2,h3,h4,h5,h6,blockquote') || parent
-		const endBlock = range.endContainer.nodeType === 3
-			? (range.endContainer.parentElement?.closest('p,h1,h2,h3,h4,h5,h6,blockquote') || range.endContainer.parentElement)
-			: (range.endContainer as Element)
-
-		const blocks = []
-		let currentBlock = startBlock
-		while (currentBlock) {
-			blocks.push(currentBlock)
-			if (currentBlock === endBlock) break
-			currentBlock = currentBlock.nextElementSibling as Element
-		}
+		// Clean all nodes in the fragment
+		const cleanedFragment = state.doc.createDocumentFragment()
+		Array.from(tempDiv.childNodes).forEach((node) => {
+			cleanedFragment.appendChild(cleanNode(node))
+		})
 
-		if (currentList) {
-			const fragment = doc.createDocumentFragment()
-			blocks.forEach((block) => {
-				const paragraph = doc.createElement('p')
-				while (block.firstChild) {
-					paragraph.appendChild(block.firstChild)
-				}
-				fragment.appendChild(paragraph)
-			})
+		// Replace the content
+		state.range.deleteContents()
+		state.range.insertNode(cleanedFragment)
+		restoreSelection(state.doc, state.range, state.selection, selectionInfo)
+	}
 
-			const listParent = currentList.parentNode
-			if (listParent) {
-				listParent.insertBefore(fragment, currentList.nextSibling)
+	return { text, block, list, clear }
+}
 
-				if (!currentList.querySelector('li')) {
-					listParent.removeChild(currentList)
-				}
-			}
+export function getBlockElement(node: Node): HTMLElement | null {
+	const element = node.nodeType === 3 ? node.parentElement : node as HTMLElement
+	if (!element) return null
+	return element.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li') || element
+}
 
-			selection.removeAllRanges()
-			range.selectNodeContents(fragment)
-			selection.addRange(range)
-		} else {
-			const listEl = doc.createElement(listTag)
+export function adjustIndentation(state: EditorState, increase: boolean) {
+	const { doc, range } = state
+	if (!doc || !range) return
 
-			blocks.forEach((block) => {
-				const li = doc.createElement('li')
-				while (block.firstChild) {
-					li.appendChild(block.firstChild)
-				}
-				listEl.appendChild(li)
-			})
+	const blockElement = getBlockElement(range.commonAncestorContainer)
+	if (!blockElement) return
 
-			range.insertNode(listEl)
+	const currentMargin = Number.parseInt(blockElement.style.marginLeft || '0', 10)
+	const step = 20 // pixels to indent/outdent
+	const newMargin = increase ? currentMargin + step : Math.max(0, currentMargin - step)
 
-			selection.removeAllRanges()
-			range.selectNodeContents(listEl)
-			selection.addRange(range)
-		}
-	}
-	return { text, block, list, clear }
+	blockElement.style.marginLeft = `${newMargin}px`
 }

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

@@ -30,3 +30,80 @@ export function isStyleActive(style: string, doc: Document) {
 
 	return checkParent(parent, styleTags[style] ?? [style])
 }
+
+export interface SelectionInfo {
+	startBlock: Element
+	endBlock: Element
+	isMultiBlock: boolean
+	originalStart: Node
+	originalEnd: Node
+	originalStartOffset: number
+	originalEndOffset: number
+	parent: Element
+}
+
+export function analyzeSelection(doc: Document, range: Range): SelectionInfo | null {
+	const container = range.commonAncestorContainer
+	const parent = container.nodeType === 3 ? container.parentElement : container as Element
+	if (!parent) return null
+
+	const startBlock = parent.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li') || parent
+
+	// Analyze if selection spans multiple blocks
+	const isMultiBlock = (() => {
+		if (!range.collapsed) {
+			const { endContainer } = range
+			const endParent = endContainer.nodeType === 3 ? endContainer.parentElement : endContainer as Element
+			const endBlock = endParent?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li') || endParent
+			return startBlock !== endBlock
+		}
+		return false
+	})()
+
+	const { endContainer } = range
+	const endParent = endContainer.nodeType === 3 ? endContainer.parentElement : endContainer as Element
+	const endBlock = endParent?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li') || endParent
+
+	if (!endBlock) return null
+
+	return {
+		startBlock,
+		endBlock,
+		isMultiBlock,
+		originalStart: range.startContainer,
+		originalEnd: range.endContainer,
+		originalStartOffset: range.startOffset,
+		originalEndOffset: range.endOffset,
+		parent
+	}
+}
+
+export function restoreSelection(
+	doc: Document,
+	range: Range,
+	selection: Selection,
+	info: SelectionInfo,
+	fallbackNode?: Node
+) {
+	try {
+		range.setStart(info.originalStart, info.originalStartOffset)
+		range.setEnd(info.originalEnd, info.originalEndOffset)
+	} catch (e) {
+		if (fallbackNode) {
+			range.selectNodeContents(fallbackNode)
+		}
+	}
+	selection.removeAllRanges()
+	selection.addRange(range)
+}
+
+export function getBlocksBetween(startBlock: Element, endBlock: Element): Element[] {
+	const blocks = []
+	let currentBlock = startBlock
+	while (currentBlock) {
+		blocks.push(currentBlock)
+		if (currentBlock === endBlock) break
+		currentBlock = currentBlock.nextElementSibling as Element
+	}
+	return blocks
+}

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

@@ -79,3 +79,69 @@ export function deleteRow(range: Range) {
 
 	row.remove()
 }
+
+export function deleteTable(range: Range) {
+	const cell = range.startContainer.parentElement?.closest('td')
+	if (!cell) return
+
+	const table = cell.closest('table')
+	if (!table) return
+
+	table.remove()
+}
+
+export function insertColumn(position: 'before' | 'after', range: Range) {
+	const cell = range.startContainer.parentElement?.closest('td')
+	if (!cell) return
+
+	const table = cell.closest('table')
+	if (!table) return
+
+	const columnIndex = cell.cellIndex
+	const { rows } = table
+
+	for (let i = 0; i < rows.length; i++) {
+		const newCell = rows[i].insertCell(position === 'after' ? columnIndex + 1 : columnIndex)
+		newCell.innerHTML = '&nbsp;'
+		newCell.style.border = '1px solid var(--border-color)'
+		newCell.style.padding = '8px'
+	}
+}
+
+export function deleteColumn(range: Range) {
+	const cell = range.startContainer.parentElement?.closest('td')
+	if (!cell) return
+
+	const table = cell.closest('table')
+	if (!table) return
+
+	const columnIndex = cell.cellIndex
+	const { rows } = table
+
+	for (let i = 0; i < rows.length; i++) {
+		rows[i].deleteCell(columnIndex)
+	}
+
+	// If no columns left, remove the table
+	if (rows[0].cells.length === 0) {
+		table.remove()
+	}
+}
+
+export function alignColumn(range: Range, alignment: 'left' | 'center' | 'right' | 'justify') {
+	const cell = range.startContainer.parentElement?.closest('td')
+	if (!cell) return
+
+	const table = cell.closest('table')
+	if (!table) return
+
+	const columnIndex = cell.cellIndex
+	const { rows } = table
+
+	for (let i = 0; i < rows.length; i++) {
+		const cell = rows[i].cells[columnIndex]
+		if (cell) {
+			cell.style.textAlign = alignment
+		}
+	}
+}