@bagelink/vue 1.19.1 → 1.20.3

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

@@ -106,4 +106,5 @@ export interface ToolbarOption {
 	label?: string
 	icon?: string
 	class?: string
+	shortcut?: string
 }

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

@@ -42,6 +42,99 @@ function getCurrentSelection(state: EditorState): { selection: Selection, range:
 	return { selection, range }
 }
 
+function rangeOverlapsNodeContent(range: Range, node: Node): boolean {
+	const nodeRange = node.ownerDocument?.createRange()
+	if (!nodeRange) { return false }
+	nodeRange.selectNodeContents(node)
+
+	// `intersectsNode()` treats touching boundaries as an intersection. A browser
+	// selection that ends at offset 0 of the next paragraph must not format it.
+	return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) < 0
+		&& range.compareBoundaryPoints(Range.START_TO_END, nodeRange) > 0
+}
+
+function getSelectedListItems(doc: Document, range: Range): HTMLLIElement[] {
+	const items = Array.from(doc.body.querySelectorAll<HTMLLIElement>('li'))
+		.filter(item => rangeOverlapsNodeContent(range, item))
+	const itemSet = new Set(items)
+	const deepestItems = items.filter(item =>
+		!Array.from(item.querySelectorAll<HTMLLIElement>('li')).some(descendant => itemSet.has(descendant))
+	)
+
+	if (deepestItems.length > 0) { return deepestItems }
+
+	const container = range.commonAncestorContainer.nodeType === Node.TEXT_NODE
+		? range.commonAncestorContainer.parentElement
+		: range.commonAncestorContainer as Element
+	const currentItem = container?.closest('li') as HTMLLIElement | null
+	return currentItem ? [currentItem] : []
+}
+
+function selectNodes(doc: Document, selection: Selection, nodes: Node[]) {
+	if (!nodes.length) { return }
+	const nextRange = doc.createRange()
+	nextRange.setStartBefore(nodes[0])
+	nextRange.setEndAfter(nodes[nodes.length - 1])
+	selection.removeAllRanges()
+	selection.addRange(nextRange)
+}
+
+function indentSelectedListItems(doc: Document, selection: Selection, range: Range): boolean {
+	const items = getSelectedListItems(doc, range)
+	if (!items.length) { return false }
+
+	const parentList = items[0].parentElement
+	if (!parentList || !['UL', 'OL'].includes(parentList.tagName)
+		|| !items.every(item => item.parentElement === parentList)) {
+		return false
+	}
+
+	const siblings = Array.from(parentList.children)
+		.filter((element): element is HTMLLIElement => element.tagName === 'LI')
+	const firstIndex = siblings.indexOf(items[0])
+	if (firstIndex <= 0) { return true }
+
+	const previousItem = siblings[firstIndex - 1]
+	const listTag = parentList.tagName.toLowerCase()
+	let nestedList = Array.from(previousItem.children)
+		.find(child => child.tagName.toLowerCase() === listTag) as HTMLElement | undefined
+	if (!nestedList) {
+		nestedList = doc.createElement(listTag)
+		if (parentList.dir) { nestedList.dir = parentList.dir }
+		previousItem.appendChild(nestedList)
+	}
+
+	items.forEach(item => nestedList!.appendChild(item))
+	selectNodes(doc, selection, items)
+	return true
+}
+
+function outdentSelectedListItems(doc: Document, selection: Selection, range: Range): boolean {
+	const items = getSelectedListItems(doc, range)
+	if (!items.length) { return false }
+
+	const parentList = items[0].parentElement
+	const ownerItem = parentList?.parentElement?.tagName === 'LI'
+		? parentList.parentElement as HTMLLIElement
+		: parentList?.parentElement?.closest('li') as HTMLLIElement | null
+	const outerList = ownerItem?.parentElement
+	if (!parentList || !ownerItem || !outerList || !['UL', 'OL'].includes(outerList.tagName)
+		|| !items.every(item => item.parentElement === parentList)) {
+		return false
+	}
+
+	let insertAfter: Element = ownerItem
+	items.forEach((item) => {
+		insertAfter.insertAdjacentElement('afterend', item)
+		insertAfter = item
+	})
+	if (!parentList.querySelector(':scope > li')) {
+		parentList.remove()
+	}
+	selectNodes(doc, selection, items)
+	return true
+}
+
 function applyFormattingToWordAtCursor(doc: Document, range: Range, tagSelector: string, createTag: string): boolean {
 	if (!range.collapsed) { return false }
 
@@ -236,16 +329,144 @@ function toggleInlineFormatting(
 	// Check if selection spans across multiple block elements
 	const blockSelector = 'p,h1,h2,h3,h4,h5,h6,blockquote,li,td,th'
 	const blocks = Array.from(doc.body.querySelectorAll<HTMLElement>(blockSelector))
-		.filter(b => !b.querySelector(blockSelector) && range.intersectsNode(b))
+		.filter(block => {
+			if (!rangeOverlapsNodeContent(range, block)) { return false }
+			return block.tagName === 'LI' || !block.querySelector(blockSelector)
+		})
+
+	const fullySelectedBlocks = blocks.filter((block) => {
+		const blockRange = doc.createRange()
+		blockRange.selectNodeContents(block)
+		return range.compareBoundaryPoints(Range.START_TO_START, blockRange) <= 0
+			&& range.compareBoundaryPoints(Range.END_TO_END, blockRange) >= 0
+	})
+
+	// Browser line selections can extend just beyond an <li> boundary. Never pass
+	// such a range to extractContents(), because that can split the surrounding list
+	// and leave empty blocks before and after the selected item.
+	if (blocks.length > 0 && blocks.every(block => block.tagName === 'LI')) {
+		const allFormatted = blocks.every((block) => {
+			const meaningfulChildren = Array.from(block.childNodes)
+				.filter(node => node.nodeType !== Node.ELEMENT_NODE || !['UL', 'OL'].includes((node as Element).tagName))
+				.filter(node => node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim()))
+			return meaningfulChildren.length > 0 && meaningfulChildren.every((node) => {
+				const element = node.nodeType === Node.ELEMENT_NODE ? node as Element : node.parentElement
+				return Boolean(element?.closest(matchSelector))
+			})
+		})
+		const formattedNodes: HTMLElement[] = []
 
-	if (blocks.length > 1) {
 		blocks.forEach((block) => {
+			if (allFormatted) {
+				block.querySelectorAll<HTMLElement>(matchSelector).forEach((formatted) => {
+					const parent = formatted.parentNode
+					while (formatted.firstChild) {
+						parent?.insertBefore(formatted.firstChild, formatted)
+					}
+					formatted.remove()
+				})
+				formattedNodes.push(block)
+				return
+			}
+
+			const blockRange = doc.createRange()
+			const nestedListIndex = Array.from(block.childNodes)
+				.findIndex(node => node.nodeType === Node.ELEMENT_NODE && ['UL', 'OL'].includes((node as Element).tagName))
+			blockRange.setStart(block, 0)
+			blockRange.setEnd(block, nestedListIndex >= 0 ? nestedListIndex : block.childNodes.length)
+
+			const startItem = (range.startContainer.nodeType === Node.TEXT_NODE
+				? range.startContainer.parentElement
+				: range.startContainer as Element)?.closest('li')
+			const endItem = (range.endContainer.nodeType === Node.TEXT_NODE
+				? range.endContainer.parentElement
+				: range.endContainer as Element)?.closest('li')
+			if (startItem === block) {
+				blockRange.setStart(range.startContainer, range.startOffset)
+			}
+			if (endItem === block) {
+				blockRange.setEnd(range.endContainer, range.endOffset)
+			}
+			if (blockRange.collapsed || !blockRange.toString()) { return }
+
 			const wrapper = doc.createElement(tagName)
-			while (block.firstChild) {
-				wrapper.appendChild(block.firstChild)
+			try {
+				blockRange.surroundContents(wrapper)
+			} catch {
+				const fragment = blockRange.extractContents()
+				fragment.querySelectorAll(matchSelector).forEach((nested) => {
+					const parent = nested.parentNode
+					while (nested.firstChild) {
+						parent?.insertBefore(nested.firstChild, nested)
+					}
+					nested.remove()
+				})
+				wrapper.appendChild(fragment)
+				blockRange.insertNode(wrapper)
 			}
-			block.appendChild(wrapper)
+			wrapper.querySelectorAll(matchSelector).forEach((nested) => {
+				const parent = nested.parentNode
+				while (nested.firstChild) {
+					parent?.insertBefore(nested.firstChild, nested)
+				}
+				nested.remove()
+			})
+			formattedNodes.push(wrapper)
+		})
+
+		if (formattedNodes.length > 0) {
+			const nextRange = doc.createRange()
+			nextRange.setStartBefore(formattedNodes[0])
+			nextRange.setEndAfter(formattedNodes[formattedNodes.length - 1])
+			selection.removeAllRanges()
+			selection.addRange(nextRange)
+		}
+		return
+	}
+
+	if (fullySelectedBlocks.length > 0 && fullySelectedBlocks.length === blocks.length) {
+		const allFormatted = fullySelectedBlocks.every((block) => {
+			const meaningfulChildren = Array.from(block.childNodes)
+				.filter(node => node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim()))
+			return meaningfulChildren.length > 0 && meaningfulChildren.every((node) => {
+				const element = node.nodeType === Node.ELEMENT_NODE ? node as Element : node.parentElement
+				return Boolean(element?.closest(matchSelector))
+			})
 		})
+
+		if (allFormatted) {
+			fullySelectedBlocks.forEach((block) => {
+				block.querySelectorAll<HTMLElement>(matchSelector).forEach((formatted) => {
+					const parent = formatted.parentNode
+					while (formatted.firstChild) {
+						parent?.insertBefore(formatted.firstChild, formatted)
+					}
+					formatted.remove()
+				})
+			})
+		} else {
+			fullySelectedBlocks.forEach((block) => {
+				const wrapper = doc.createElement(tagName)
+				const children = Array.from(block.childNodes)
+				children.forEach((child) => {
+					if (child.nodeType === Node.ELEMENT_NODE && (child as Element).matches(matchSelector)) {
+						while (child.firstChild) {
+							wrapper.appendChild(child.firstChild)
+						}
+						child.remove()
+					} else {
+						wrapper.appendChild(child)
+					}
+				})
+				block.appendChild(wrapper)
+			})
+		}
+
+		const nextRange = doc.createRange()
+		nextRange.setStart(fullySelectedBlocks[0], 0)
+		nextRange.setEnd(fullySelectedBlocks[fullySelectedBlocks.length - 1], fullySelectedBlocks[fullySelectedBlocks.length - 1].childNodes.length)
+		selection.removeAllRanges()
+		selection.addRange(nextRange)
 		return
 	}
 
@@ -275,6 +496,66 @@ function toggleInlineFormatting(
 	}
 }
 
+function applyInlineStyle(state: EditorState, property: string, value: string) {
+	const selectionInfo = getCurrentSelection(state)
+	if (!selectionInfo || !state.doc || !value) { return }
+
+	const { doc } = state
+	const { range, selection } = selectionInfo
+	const styleSelector = `span[style*="${property}"]`
+
+	if (range.collapsed) {
+		const span = doc.createElement('span')
+		span.style.setProperty(property, value)
+		const marker = doc.createTextNode('\u200B')
+		span.appendChild(marker)
+		range.insertNode(span)
+
+		const nextRange = doc.createRange()
+		nextRange.setStart(marker, 1)
+		nextRange.collapse(true)
+		selection.removeAllRanges()
+		selection.addRange(nextRange)
+		return
+	}
+
+	const commonAncestor = range.commonAncestorContainer
+	const commonElement = commonAncestor.nodeType === Node.TEXT_NODE
+		? commonAncestor.parentElement
+		: commonAncestor as Element
+	const activeStyleSpan = commonElement?.closest(styleSelector) as HTMLSpanElement | null
+	if (activeStyleSpan && activeStyleSpan.contains(range.startContainer) && activeStyleSpan.contains(range.endContainer)) {
+		activeStyleSpan.style.setProperty(property, value)
+		const nextRange = doc.createRange()
+		nextRange.selectNodeContents(activeStyleSpan)
+		selection.removeAllRanges()
+		selection.addRange(nextRange)
+		return
+	}
+
+	const span = doc.createElement('span')
+	span.style.setProperty(property, value)
+	try {
+		range.surroundContents(span)
+	} catch {
+		const fragment = range.extractContents()
+		fragment.querySelectorAll<HTMLSpanElement>(styleSelector).forEach((nested) => {
+			const parent = nested.parentNode
+			while (nested.firstChild) {
+				parent?.insertBefore(nested.firstChild, nested)
+			}
+			nested.remove()
+		})
+		span.appendChild(fragment)
+		range.insertNode(span)
+	}
+
+	const nextRange = doc.createRange()
+	nextRange.selectNodeContents(span)
+	selection.removeAllRanges()
+	selection.addRange(nextRange)
+}
+
 function updateStateAfterCommand(state: EditorState, preCommandContent?: string) {
 	if (!state.doc) { return }
 
@@ -308,7 +589,7 @@ const CONVERTIBLE_BLOCK_SELECTOR = 'p,h1,h2,h3,h4,h5,h6,blockquote'
 function getSelectedBlocks(doc: Document, range: Range): HTMLElement[] {
 	if (!range.collapsed) {
 		const blocks = Array.from(doc.body.querySelectorAll<HTMLElement>(CONVERTIBLE_BLOCK_SELECTOR))
-			.filter(block => !block.closest('li') && range.intersectsNode(block))
+			.filter(block => !block.closest('li') && rangeOverlapsNodeContent(range, block))
 			.filter(block => !block.parentElement?.closest(CONVERTIBLE_BLOCK_SELECTOR))
 		if (blocks.length > 0) {
 			return blocks
@@ -348,7 +629,7 @@ function convertSelectedBlocksToList(
 	if (!state.doc || range.collapsed) { return false }
 
 	const blocks = Array.from(state.doc.body.querySelectorAll<HTMLElement>(CONVERTIBLE_BLOCK_SELECTOR))
-		.filter(block => !block.closest('li') && range.intersectsNode(block))
+		.filter(block => !block.closest('li') && rangeOverlapsNodeContent(range, block))
 		.filter(block => !block.parentElement?.closest(CONVERTIBLE_BLOCK_SELECTOR))
 
 	if (!blocks.length) { return false }
@@ -376,12 +657,124 @@ function convertSelectedBlocksToList(
 	return true
 }
 
+function replaceListTag(doc: Document, list: HTMLElement, listTag: 'ol' | 'ul'): HTMLElement {
+	const convertedList = doc.createElement(listTag)
+	for (const attribute of Array.from(list.attributes)) {
+		convertedList.setAttribute(attribute.name, attribute.value)
+	}
+	while (list.firstChild) {
+		convertedList.appendChild(list.firstChild)
+	}
+	list.replaceWith(convertedList)
+	return convertedList
+}
+
+function convertSelectedListItems(
+	doc: Document,
+	selection: Selection,
+	range: Range,
+	listTag: 'ol' | 'ul'
+): boolean {
+	const selectedItems = getSelectedListItems(doc, range)
+	if (!selectedItems.length) { return false }
+
+	const listParent = selectedItems[0].parentElement
+	if (!listParent || !['UL', 'OL'].includes(listParent.tagName)
+		|| !selectedItems.every(item => item.parentElement === listParent)) {
+		return false
+	}
+
+	const allItems = Array.from(listParent.children)
+		.filter((element): element is HTMLLIElement => element.tagName === 'LI')
+	const selectedSet = new Set(selectedItems)
+	const selectedIndexes = allItems
+		.map((item, index) => selectedSet.has(item) ? index : -1)
+		.filter(index => index >= 0)
+	if (!selectedIndexes.length) { return false }
+
+	const firstIndex = selectedIndexes[0]
+	const lastIndex = selectedIndexes[selectedIndexes.length - 1]
+	const selectedAreConsecutive = selectedIndexes.every((index, offset) => index === firstIndex + offset)
+	if (!selectedAreConsecutive) { return false }
+
+	const parentTag = listParent.tagName.toLowerCase()
+	if (firstIndex === 0 && lastIndex === allItems.length - 1) {
+		if (parentTag === listTag) {
+			const paragraphs = selectedItems.map((item) => {
+				const paragraph = doc.createElement('p')
+				if (item.dir || listParent.dir) { paragraph.dir = item.dir || listParent.dir }
+				while (item.firstChild) { paragraph.appendChild(item.firstChild) }
+				return paragraph
+			})
+			paragraphs.forEach(paragraph => listParent.parentNode?.insertBefore(paragraph, listParent))
+			listParent.remove()
+			const nextRange = doc.createRange()
+			nextRange.setStartBefore(paragraphs[0])
+			nextRange.setEndAfter(paragraphs[paragraphs.length - 1])
+			selection.removeAllRanges()
+			selection.addRange(nextRange)
+			return true
+		}
+
+		const convertedList = replaceListTag(doc, listParent, listTag)
+		const nextRange = doc.createRange()
+		nextRange.selectNodeContents(convertedList)
+		selection.removeAllRanges()
+		selection.addRange(nextRange)
+		return true
+	}
+
+	const beforeItems = allItems.slice(0, firstIndex)
+	const convertedItems = allItems.slice(firstIndex, lastIndex + 1)
+	const afterItems = allItems.slice(lastIndex + 1)
+	const fragment = doc.createDocumentFragment()
+	const createList = (tag: 'ol' | 'ul', items: HTMLLIElement[]) => {
+		const nextList = doc.createElement(tag)
+		for (const attribute of Array.from(listParent.attributes)) {
+			nextList.setAttribute(attribute.name, attribute.value)
+		}
+		items.forEach(item => nextList.appendChild(item))
+		return nextList
+	}
+
+	if (beforeItems.length) { fragment.appendChild(createList(parentTag as 'ol' | 'ul', beforeItems)) }
+	if (parentTag === listTag) {
+		convertedItems.forEach((item) => {
+			const paragraph = doc.createElement('p')
+			if (item.dir || listParent.dir) { paragraph.dir = item.dir || listParent.dir }
+			while (item.firstChild) { paragraph.appendChild(item.firstChild) }
+			fragment.appendChild(paragraph)
+		})
+	} else {
+		fragment.appendChild(createList(listTag, convertedItems))
+	}
+	if (afterItems.length) { fragment.appendChild(createList(parentTag as 'ol' | 'ul', afterItems)) }
+
+	const firstSelectedNode = parentTag === listTag
+		? fragment.childNodes[beforeItems.length ? 1 : 0]
+		: convertedItems[0]
+	const lastSelectedNode = parentTag === listTag
+		? fragment.childNodes[(beforeItems.length ? 1 : 0) + convertedItems.length - 1]
+		: convertedItems[convertedItems.length - 1]
+	listParent.replaceWith(fragment)
+
+	if (firstSelectedNode && lastSelectedNode) {
+		const nextRange = doc.createRange()
+		nextRange.setStartBefore(firstSelectedNode)
+		nextRange.setEndAfter(lastSelectedNode)
+		selection.removeAllRanges()
+		selection.addRange(nextRange)
+	}
+	return true
+}
+
 function toggleListCommand(state: EditorState, listTag: 'ol' | 'ul') {
 	const selectionInfo = getCurrentSelection(state)
 	if (!selectionInfo || !state.doc) { return }
 
 	const { doc } = state
 	const { range, selection } = selectionInfo
+	if (!range.collapsed && convertSelectedListItems(doc, selection, range, listTag)) { return }
 	if (convertSelectedBlocksToList(state, selection, range, listTag)) { return }
 
 	const currentBlock = findBlockElement(range.commonAncestorContainer)
@@ -632,25 +1025,35 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 
 		indent: createCommand('Indent', (s) => {
 			const selectionInfo = getCurrentSelection(s)
-			if (!selectionInfo) { return }
-			const block = findBlockElement(selectionInfo.range.commonAncestorContainer)
-			if (!block) { return }
-			const isRTL = (block.dir || s.doc?.body.dir) === 'rtl'
-			const prop = isRTL ? 'marginRight' : 'marginLeft'
-			const current = Number.parseInt(block.style[prop] || '0', 10) || 0
-			block.style[prop] = `${current + 24}px`
+			if (!selectionInfo || !s.doc) { return }
+			if (indentSelectedListItems(s.doc, selectionInfo.selection, selectionInfo.range)) { return }
+			const listItems = getSelectedListItems(s.doc, selectionInfo.range)
+			const blocks = listItems.length
+				? listItems
+				: [findBlockElement(selectionInfo.range.commonAncestorContainer)].filter(Boolean) as HTMLElement[]
+			blocks.forEach((block) => {
+				const isRTL = (block.dir || s.doc?.body.dir) === 'rtl'
+				const prop = isRTL ? 'marginRight' : 'marginLeft'
+				const current = Number.parseInt(block.style[prop] || '0', 10) || 0
+				block.style[prop] = `${current + 24}px`
+			})
 		}),
 
 		outdent: createCommand('Outdent', (s) => {
 			const selectionInfo = getCurrentSelection(s)
-			if (!selectionInfo) { return }
-			const block = findBlockElement(selectionInfo.range.commonAncestorContainer)
-			if (!block) { return }
-			const isRTL = (block.dir || s.doc?.body.dir) === 'rtl'
-			const prop = isRTL ? 'marginRight' : 'marginLeft'
-			const current = Number.parseInt(block.style[prop] || '0', 10) || 0
-			const next = Math.max(0, current - 24)
-			block.style[prop] = next > 0 ? `${next}px` : ''
+			if (!selectionInfo || !s.doc) { return }
+			if (outdentSelectedListItems(s.doc, selectionInfo.selection, selectionInfo.range)) { return }
+			const listItems = getSelectedListItems(s.doc, selectionInfo.range)
+			const blocks = listItems.length
+				? listItems
+				: [findBlockElement(selectionInfo.range.commonAncestorContainer)].filter(Boolean) as HTMLElement[]
+			blocks.forEach((block) => {
+				const isRTL = (block.dir || s.doc?.body.dir) === 'rtl'
+				const prop = isRTL ? 'marginRight' : 'marginLeft'
+				const current = Number.parseInt(block.style[prop] || '0', 10) || 0
+				const next = Math.max(0, current - 24)
+				block.style[prop] = next > 0 ? `${next}px` : ''
+			})
 		})
 	}
 
@@ -668,6 +1071,16 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 	}
 
 	const formatCommands: CommandRegistry = {
+		fontColor: createCommand('Font Color', (s, value) => {
+			if (value) {
+				applyInlineStyle(s, 'color', value)
+			}
+		}),
+		bgColor: createCommand('Background Color', (s, value) => {
+			if (value) {
+				applyInlineStyle(s, 'background-color', value)
+			}
+		}),
 		clear: createCommand('Clear Formatting', (s) => {
 			const selectionInfo = getCurrentSelection(s)
 			if (!selectionInfo || !s.doc) { return }
@@ -889,7 +1302,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 
 		if (!range.collapsed) {
 			const blocks = Array.from(s.doc.body.querySelectorAll<HTMLElement>(ALIGN_TARGET_SELECTOR))
-				.filter(el => range.intersectsNode(el) && !el.querySelector(ALIGN_TARGET_SELECTOR))
+				.filter(el => rangeOverlapsNodeContent(range, el) && !el.querySelector(ALIGN_TARGET_SELECTOR))
 			if (blocks.length > 0) {
 				blocks.forEach((b) => { b.style.textAlign = value })
 				return
@@ -924,7 +1337,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 
 		if (!range.collapsed) {
 			const blocks = Array.from(s.doc.body.querySelectorAll<HTMLElement>(ALIGN_TARGET_SELECTOR))
-				.filter(el => range.intersectsNode(el) && !el.querySelector(ALIGN_TARGET_SELECTOR))
+				.filter(el => rangeOverlapsNodeContent(range, el) && !el.querySelector(ALIGN_TARGET_SELECTOR))
 			if (blocks.length > 0) {
 				blocks.forEach(setDirOnEl)
 				return

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

@@ -0,0 +1,24 @@
+export interface RichTextMetrics {
+	text: string
+	characters: number
+	words: number
+}
+
+export function getRichTextMetrics(html: string, doc?: Document): RichTextMetrics {
+	let text = ''
+	if (doc?.body) {
+		text = doc.body.innerText || doc.body.textContent || ''
+	} else if (typeof DOMParser !== 'undefined') {
+		const body = new DOMParser().parseFromString(html, 'text/html').body
+		text = body.innerText || body.textContent || ''
+	} else {
+		text = html.replace(/<[^>]*>/g, ' ')
+	}
+
+	const normalizedText = text.replace(/\u200B/g, '').replace(/\s+/g, ' ').trim()
+	return {
+		text: normalizedText,
+		characters: normalizedText.length,
+		words: normalizedText ? normalizedText.split(/\s+/).length : 0,
+	}
+}