@bagelink/vue 0.0.992 → 0.0.996

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

@@ -1,9 +1,113 @@
 import type { EditorState } from '../richTextTypes'
 
 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 createBlockElement = (tag: string, content: DocumentFragment): HTMLElement => {
+		const block = doc!.createElement(tag)
+		block.appendChild(content)
+		return block
+	}
+	const clear = () => {
+		if (!doc || !range || !selection) return
+
+		const inlineTags = ['b', 'i', 'u', 'strong', 'em']
+
+		const isInlineTag = (el: HTMLElement | null) => el && inlineTags.includes(el.tagName.toLowerCase())
+
+		if (range.collapsed) {
+			// No action if the selection is collapsed
+			return
+		}
+
+		// 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
+			}
+			return doc.createTextNode('') // Ignore other node types
+		}
+
+		// 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)
+
+		// 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
+				}
+				node.parentNode?.removeChild(node.nextSibling)
+			} else if (node.nodeType === 1) {
+				// Recursively normalize child nodes
+				Array.from(node.childNodes).forEach((child) => {
+					normalizeDom(child)
+				})
+			}
+		}
+
+		Array.from(fragment.childNodes).forEach((child) => {
+			normalizeDom(child)
+		})
+
+		// Update the selection to cover the cleaned content
+		selection.removeAllRanges()
+		range.selectNodeContents(fragment)
+		selection.addRange(range)
+	}
+
 	const text = (command: string) => {
-		const { doc, range, selection } = state
 		if (!doc || !range || !selection) return
+		const { startOffset, endOffset } = range
+
 		let tag = ''
 		if (command === 'bold') tag = 'b'
 		if (command === 'italic') tag = 'i'
@@ -14,52 +118,95 @@ export function formatting(state: EditorState) {
 		const relatedTags: { [key: string]: string[] } = {
 			b: ['strong'],
 			i: ['em'],
-			u: [],
+			u: ['u'],
 			em: ['i'],
-			strong: ['b']
+			strong: ['b'],
+		}
+
+		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 selectedContent = range.extractContents()
-		const wrapper = doc.createElement(tag)
-		wrapper.appendChild(selectedContent)
 		const container = range.commonAncestorContainer
 		const parent = container.parentElement
 
-		if (parent && (parent.tagName.toLowerCase() === tag || relatedTags[tag].includes(parent.tagName.toLowerCase()))) {
-			while (wrapper.firstChild) {
-				parent.parentNode?.insertBefore(wrapper.firstChild, parent)
+		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)
+			}
+
+			// Add unwrapped selected text
+			const unwrappedTextNode = doc.createTextNode(selectedText)
+			parent.parentNode?.insertBefore(unwrappedTextNode, parent)
+
+			if (afterText) {
+				const afterNode = wrapWithTag(afterText, tag)
+				parent.parentNode?.insertBefore(afterNode, parent)
 			}
+
+			// Remove the original parent node
 			parent.parentNode?.removeChild(parent)
+
+			// 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)
-		}
 
-		const nestedTags = wrapper.querySelectorAll(`${tag},${(relatedTags[tag] || []).join(',')}`)
-		nestedTags.forEach((nestedTag) => {
-			while (nestedTag.firstChild) {
-				nestedTag.parentNode?.insertBefore(nestedTag.firstChild, nestedTag)
-			}
-			nestedTag.parentNode?.removeChild(nestedTag)
-		})
+			// Clean up nested tags
+			const nestedTags = wrapper.querySelectorAll(`${tag},${(relatedTags[tag] || []).join(',')}`)
+			nestedTags.forEach((nestedTag) => {
+				while (nestedTag.firstChild) {
+					nestedTag.parentNode?.insertBefore(nestedTag.firstChild, nestedTag)
+				}
+				nestedTag.parentNode?.removeChild(nestedTag)
+			})
+
+			// Reselect the wrapped content
+			range.selectNodeContents(wrapper)
+		}
 
 		selection.removeAllRanges()
 		selection.addRange(range)
 	}
 	const block = (command: string, value: string) => {
-		const { doc, range, selection } = state
 		if (!doc || !range || !selection) return
 		const container = range.commonAncestorContainer
 		const parent = container.nodeType === 3 ? container.parentElement : (container as Element)
 		if (!parent) return
 
-		const currentHeading = parent.closest('p,h1,h2,h3,h4,h5,h6')
+		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)
 
 		const content = range.extractContents()
-		const newElement = doc.createElement(currentHeading && currentHeading.tagName.toLowerCase() === value ? 'p' : value)
-		newElement.appendChild(content)
+		const newElement = createBlockElement(value, content)
 
 		if (currentHeading) {
 			currentHeading.parentNode?.replaceChild(newElement, currentHeading)
@@ -68,31 +215,131 @@ export function formatting(state: EditorState) {
 		}
 
 		selection.removeAllRanges()
-		range.setStart(container, startOffset)
-		range.setEnd(container, endOffset)
+		setRangeAndSelect(container, startOffset, endOffset)
 		selection.addRange(range)
 	}
 	const list = (command: string) => {
-		const { doc, range } = state
-		if (!doc || !range) return
+		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')
 
+		if (!parent) return
+
+		// 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
+
+			// Create new fragments for before and after the selected list item
+			const beforeFragment = doc.createDocumentFragment()
+			const afterFragment = doc.createDocumentFragment()
+
+			let currentNode = listParent.firstChild
+			let isBefore = true
+
+			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
+			}
+
+			// Convert the selected list item to a standalone block (e.g., <p>)
+			const standaloneBlock = doc.createElement('p')
+			while (listItem.firstChild) {
+				standaloneBlock.appendChild(listItem.firstChild)
+			}
+
+			// Replace the original list with the split fragments and the standalone block
+			const grandParent = listParent.parentNode
+			if (!grandParent) return
+
+			if (beforeFragment.childNodes.length > 0) {
+				const newListBefore = doc.createElement(listParent.tagName.toLowerCase())
+				newListBefore.appendChild(beforeFragment)
+				grandParent.insertBefore(newListBefore, listParent)
+			}
+
+			grandParent.insertBefore(standaloneBlock, listParent)
+
+			if (afterFragment.childNodes.length > 0) {
+				const newListAfter = doc.createElement(listParent.tagName.toLowerCase())
+				newListAfter.appendChild(afterFragment)
+				grandParent.insertBefore(newListAfter, listParent.nextSibling)
+			}
+
+			// Remove the original list
+			grandParent.removeChild(listParent)
+
+			// Update the selection
+			selection.removeAllRanges()
+			range.selectNodeContents(standaloneBlock)
+			selection.addRange(range)
+
+			return
+		}
+
+		// 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
+		}
+
 		if (currentList) {
-			const content = range.extractContents()
-			const p = doc.createElement('p')
-			p.appendChild(content)
-			currentList.parentNode?.replaceChild(p, currentList)
+			const fragment = doc.createDocumentFragment()
+			blocks.forEach((block) => {
+				const paragraph = doc.createElement('p')
+				while (block.firstChild) {
+					paragraph.appendChild(block.firstChild)
+				}
+				fragment.appendChild(paragraph)
+			})
+
+			const listParent = currentList.parentNode
+			if (listParent) {
+				listParent.insertBefore(fragment, currentList.nextSibling)
+
+				if (!currentList.querySelector('li')) {
+					listParent.removeChild(currentList)
+				}
+			}
+
+			selection.removeAllRanges()
+			range.selectNodeContents(fragment)
+			selection.addRange(range)
 		} else {
 			const listEl = doc.createElement(listTag)
-			const li = doc.createElement('li')
-			const content = range.extractContents()
-			li.appendChild(content)
-			listEl.appendChild(li)
+
+			blocks.forEach((block) => {
+				const li = doc.createElement('li')
+				while (block.firstChild) {
+					li.appendChild(block.firstChild)
+				}
+				listEl.appendChild(li)
+			})
+
 			range.insertNode(listEl)
+
+			selection.removeAllRanges()
+			range.selectNodeContents(listEl)
+			selection.addRange(range)
 		}
 	}
-	return { text, block, list }
+	return { text, block, list, clear }
 }

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

@@ -1,7 +1,8 @@
-import type { Modal } from '../richTextTypes'
+import type { EditorState, Modal } from '../richTextTypes'
 
-export function insertImage(modal: Modal, doc: Document, range: Range | null) {
-	if (!range) return
+export function insertImage(modal: Modal, state: EditorState) {
+	const { range, doc } = state
+	if (!range || !doc) return
 
 	modal.showModalForm({
 		title: 'Upload Image',
@@ -14,15 +15,17 @@ export function insertImage(modal: Modal, doc: Document, range: Range | null) {
 				const img = doc.createElement('img')
 				img.src = data.src
 				img.alt = data.alt
-				range.deleteContents()
+				// range.deleteContents()
+				range.collapse(false)
 				range.insertNode(img)
 			}
 		}
 	})
 }
 
-export function insertLink(modal: Modal, doc: Document, range: Range | null) {
-	if (!range) return
+export function insertLink(modal: Modal, state: EditorState) {
+	const { range, doc } = state
+	if (!range || !doc) return
 
 	modal.showModalForm({
 		title: 'Insert Link',

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

@@ -1,4 +1,3 @@
-
 export function getSelection(state: any) {
 	return state.selection
 }
@@ -23,26 +22,11 @@ export function isStyleActive(style: string, doc: Document) {
 		return checkParent(element.parentElement, tags)
 	}
 
-	switch (style) {
-		case 'bold':
-			return checkParent(parent, ['strong', 'b'])
-		case 'italic':
-			return checkParent(parent, ['em', 'i'])
-		case 'underline':
-			return checkParent(parent, ['u'])
-		case 'h1':
-			return checkParent(parent, ['h1'])
-		case 'h2':
-			return checkParent(parent, ['h2'])
-		case 'h3':
-			return checkParent(parent, ['h3'])
-		case 'h4':
-			return checkParent(parent, ['h4'])
-		case 'h5':
-			return checkParent(parent, ['h5'])
-		case 'h6':
-			return checkParent(parent, ['h6'])
-		default:
-			return false
+	const styleTags: { [key: string]: string[] } = {
+		bold: ['strong', 'b'],
+		italic: ['em', 'i'],
+		underline: ['u'],
 	}
+
+	return checkParent(parent, styleTags[style] ?? [style])
 }