@bagelink/vue 1.17.2 → 1.18.3

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

@@ -1,331 +0,0 @@
-import type { EditorState } from '../richTextTypes'
-import { analyzeSelection, restoreSelection, getBlocksBetween } from './selection'
-
-export function formatting(state: EditorState) {
-	const { doc } = state
-	if (!doc) { return { text: () => {}, block: () => {}, list: () => {}, clear: () => {} } }
-
-	const text = (command: string) => {
-		const selection = doc.getSelection()
-		if (!selection || !selection.rangeCount) { return }
-
-		const range = selection.getRangeAt(0)
-		const container = range.commonAncestorContainer
-		const parentBlock = container.nodeType === 3 ? container.parentElement : container as HTMLElement
-
-		// Preserve RTL direction when applying text formatting
-		const isRTL = parentBlock?.closest('[dir="rtl"]') !== null
-
-		// 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()) {
-				let element: HTMLElement
-				if (command === 'underline') { element = doc.createElement('u') }
-				else if (command === 'bold') { element = doc.createElement('b') }
-				else if (command === 'italic') { element = doc.createElement('i') }
-				else { return }
-
-				if (isRTL) { element.dir = 'rtl' }
-				range.surroundContents(element)
-			}
-		} else {
-			if (range.collapsed) { return } // No selection, nothing to format
-
-			let element: HTMLElement
-			if (command === 'bold') { element = doc.createElement('b') }
-			else if (command === 'italic') { element = doc.createElement('i') }
-			else if (command === 'underline') { element = doc.createElement('u') }
-			else { return }
-
-			try {
-				range.surroundContents(element)
-			} catch {
-				// If surroundContents fails (e.g., for selections across multiple nodes)
-				// Extract the fragment, wrap it, and insert it back
-				const fragment = range.extractContents()
-				element.appendChild(fragment)
-				range.insertNode(element)
-			}
-		}
-	}
-
-	const block = (command: string, tag: string) => {
-		const selection = doc.getSelection()
-		if (!selection || !selection.rangeCount) { return }
-
-		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)
-				}
-				wrapper.remove()
-			}
-		}
-
-		// Create a new block element of the desired type
-		const newBlock = doc.createElement(tag)
-		if (isRTL) { newBlock.dir = 'rtl' }
-
-		// Find the current block to replace
-		const currentBlock = parentBlock?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div') || parentBlock
-
-		if (currentBlock) {
-			// Copy content to the new block
-			while (currentBlock.firstChild) {
-				newBlock.appendChild(currentBlock.firstChild)
-			}
-
-			// Replace the current block with the new one
-			currentBlock.parentNode?.replaceChild(newBlock, currentBlock)
-
-			// Move cursor into the new block
-			range.selectNodeContents(newBlock)
-			range.collapse(false)
-			selection.removeAllRanges()
-			selection.addRange(range)
-		}
-	}
-
-	const list = (command: string) => {
-		if (!state.doc || !state.range || !state.selection) { return }
-
-		const listTag = command === 'orderedList' ? 'ol' : 'ul'
-		const selectionInfo = analyzeSelection(state.doc, state.range)
-		if (!selectionInfo) { return }
-
-		const isRTL = selectionInfo.parent.closest('[dir="rtl"]') !== null
-
-		// 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 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)
-				}
-
-				listParent.parentNode?.insertBefore(p, listParent)
-				listItem.remove()
-
-				if (!listParent.querySelector('li')) {
-					listParent.remove()
-				}
-
-				restoreSelection(state.doc, state.range, state.selection, selectionInfo, p)
-				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
-		}
-
-		// 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' }
-
-			while (selectionInfo.startBlock.firstChild) {
-				li.appendChild(selectionInfo.startBlock.firstChild)
-			}
-
-			listEl.appendChild(li)
-			selectionInfo.startBlock.parentNode?.replaceChild(listEl, selectionInfo.startBlock)
-			restoreSelection(state.doc, state.range, state.selection, selectionInfo, li)
-			return
-		}
-
-		// Handle multi-block selection
-		const blocks = getBlocksBetween(selectionInfo.startBlock, selectionInfo.endBlock)
-		if (!blocks.length) { return }
-
-		const listEl = state.doc.createElement(listTag) as HTMLElement
-		if (isRTL) { listEl.dir = 'rtl' }
-
-		const firstBlock = blocks[0]
-		firstBlock.parentNode?.insertBefore(listEl, firstBlock)
-
-		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()
-		})
-
-		restoreSelection(state.doc, state.range, state.selection, selectionInfo, listEl)
-	}
-
-	const clear = () => {
-		console.log('[Clear Format] Starting clear format process', state)
-		console.assert(!!state, '[Clear Format] State must exist')
-		console.assert(!!state.doc, '[Clear Format] Document must exist')
-		console.assert(!!state.range, '[Clear Format] Range must exist')
-		console.assert(!!state.selection, '[Clear Format] Selection must exist')
-
-		if (!state.doc || !state.range || !state.selection) {
-			console.log('[Clear Format] No document or selection')
-			return
-		}
-
-		const selectionInfo = analyzeSelection(state.doc, state.range)
-		console.log('[Clear Format] Selection info:', selectionInfo)
-		if (!selectionInfo) {
-			console.log('[Clear Format] No valid selection info')
-			return
-		}
-
-		// If selection is collapsed (just a cursor), return
-		if (state.range.collapsed) {
-			console.log('[Clear Format] Selection is collapsed, nothing to clear')
-			return
-		}
-
-		console.log('[Clear Format] Processing selection:', {
-			startContainer: state.range.startContainer,
-			endContainer: state.range.endContainer,
-			selectedText: state.range.toString()
-		})
-
-		// Get the selected content
-		const fragment = state.range.cloneContents()
-		const tempDiv = state.doc.createElement('div')
-		tempDiv.appendChild(fragment)
-
-		console.log('[Clear Format] Original HTML:', tempDiv.innerHTML)
-
-		// Function to recursively clean a node and its children
-		const cleanNode = (node: Node): Node => {
-			if (!state.doc) { return node }
-
-			// Text nodes can be returned as-is
-			if (node.nodeType === 3) {
-				return node.cloneNode(true)
-			}
-
-			if (node.nodeType === 1) { // Element node
-				const el = node as HTMLElement
-				const nodeName = el.nodeName.toLowerCase()
-				const inlineTags = ['b', 'i', 'u', 'strong', 'em', 'span', 'font', 'strike', 'sub', 'sup']
-
-				console.log('[Clear Format] Processing element:', nodeName, {
-					hasStyle: el.hasAttribute('style'),
-					style: el.getAttribute('style'),
-					className: el.className
-				})
-
-				// For inline formatting elements, just extract the text content
-				if (inlineTags.includes(nodeName)) {
-					// Create a text node with the element's content
-					const textContent = el.textContent || ''
-					console.log('[Clear Format] Extracting text from inline element:', textContent)
-					return state.doc.createTextNode(textContent)
-				}
-
-				// For block elements, preserve the element type but remove formatting
-				const newEl = state.doc.createElement(nodeName)
-
-				// Remove any style and class attributes
-				if (el.hasAttribute('style')) {
-					console.log('[Clear Format] Removing style attribute:', el.getAttribute('style'))
-				}
-				if (el.className) {
-					console.log('[Clear Format] Removing class:', el.className)
-				}
-
-				// Transfer only specific attributes we want to keep (like href for links)
-				if (nodeName === 'a' && el.hasAttribute('href')) {
-					newEl.setAttribute('href', el.getAttribute('href') || '')
-					if (el.hasAttribute('target')) {
-						newEl.setAttribute('target', el.getAttribute('target') || '')
-					}
-					console.log('[Clear Format] Preserving link attributes')
-				}
-
-				// For images, preserve src and alt
-				if (nodeName === 'img') {
-					if (el.hasAttribute('src')) { newEl.setAttribute('src', el.getAttribute('src') || '') }
-					if (el.hasAttribute('alt')) { newEl.setAttribute('alt', el.getAttribute('alt') || '') }
-					console.log('[Clear Format] Preserving image attributes')
-				}
-
-				// Clean and append all child nodes
-				Array.from(el.childNodes).forEach((child) => {
-					newEl.appendChild(cleanNode(child))
-				})
-
-				return newEl
-			}
-
-			return node.cloneNode(true)
-		}
-
-		// Clean all nodes in the fragment
-		const cleanedFragment = state.doc.createDocumentFragment()
-		Array.from(tempDiv.childNodes).forEach((node) => {
-			cleanedFragment.appendChild(cleanNode(node))
-		})
-
-		// For debugging: check what the cleaned HTML looks like
-		const debugDiv = state.doc.createElement('div')
-		debugDiv.appendChild(cleanedFragment.cloneNode(true))
-		console.log('[Clear Format] Cleaned HTML:', debugDiv.innerHTML)
-
-		// Replace the content
-		state.range.deleteContents()
-		state.range.insertNode(cleanedFragment)
-
-		// Restore selection
-		restoreSelection(state.doc, state.range, state.selection, selectionInfo)
-
-		// Update content state
-		state.content = state.doc.body.innerHTML
-		console.log('[Clear Format] Updated document HTML:', state.content)
-	}
-
-	return { text, block, list, clear }
-}
-
-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
-}
-
-export function adjustIndentation(state: EditorState, increase: boolean) {
-	const { doc, range } = state
-	if (!doc || !range) { return }
-
-	const blockElement = getBlockElement(range.commonAncestorContainer)
-	if (!blockElement) { return }
-
-	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)
-
-	blockElement.style.marginLeft = `${newMargin}px`
-}