@bagelink/vue 1.16.0 → 1.17.6

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

@@ -1,3 +1,29 @@
+const ALIGN_BLOCK_SELECTOR = 'p, h1, h2, h3, h4, h5, h6, blockquote, li, td, th'
+
+export const ACTIVE_STYLE_KEYS = [
+	'bold',
+	'italic',
+	'underline',
+	'link',
+	'h1',
+	'h2',
+	'h3',
+	'h4',
+	'h5',
+	'h6',
+	'blockquote',
+	'p',
+	'orderedList',
+	'unorderedList',
+	'alignLeft',
+	'alignCenter',
+	'alignRight',
+	'alignJustify',
+	'textDirection',
+	'ltrDirection',
+	'rtlDirection'
+] as const
+
 export function getSelection(state: any) {
 	return state.selection
 }
@@ -6,43 +32,40 @@ export function getSelectionRange(state: any) {
 	return state.range
 }
 
-export function isStyleActive(style: string, doc: Document) {
+export function isStyleActive(style: string, doc: Document): boolean {
 	const selection = doc.getSelection()
 	if (!selection || !selection.rangeCount) { return false }
 
 	const range = selection.getRangeAt(0)
 	const container = range.commonAncestorContainer
-	const parent = container.nodeType === Node.TEXT_NODE ? container.parentElement : container as Element
+	const parent = container.nodeType === Node.TEXT_NODE
+		? container.parentElement
+		: container as Element
 
 	if (!parent) { return false }
 
-	// Check if the current node or any parent has the style
 	const checkParent = (element: Element | null, checker: (el: Element) => boolean): boolean => {
-		if (!element) { return false }
+		if (!element || element === doc.body || element === doc.documentElement) { return false }
 		if (checker(element)) { return true }
 		return checkParent(element.parentElement, checker)
 	}
 
-	// Define style checkers for different formatting types
 	const styleCheckers: { [key: string]: (el: Element) => boolean } = {
-		// Text formatting - check for elements only, not CSS styles
 		bold: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			// Only consider <b> and <strong> tags, not CSS bold styling
 			return tagName === 'strong' || tagName === 'b'
 		},
-
 		italic: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			// Only consider <i> and <em> tags, not CSS italic styling
 			return tagName === 'em' || tagName === 'i'
 		},
-
 		underline: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			// Only consider <u> tag, not CSS underline styling
 			return tagName === 'u'
 		},
+		link: (el) => {
+			return el.tagName?.toLowerCase() === 'a'
+		},
 
 		// Block elements
 		h1: el => el.tagName?.toLowerCase() === 'h1',
@@ -54,65 +77,68 @@ export function isStyleActive(style: string, doc: Document) {
 		p: el => el.tagName?.toLowerCase() === 'p',
 		blockquote: el => el.tagName?.toLowerCase() === 'blockquote',
 
-		// List elements - check if we're inside a list
-		orderedList: (el) => {
-			// Check if we're inside an ordered list
-			return !!el.closest('ol')
-		},
-
-		unorderedList: (el) => {
-			// Check if we're inside an unordered list
-			return !!el.closest('ul')
-		},
+		// List elements
+		orderedList: el => !!el.closest('ol'),
+		unorderedList: el => !!el.closest('ul'),
 
-		// Text alignment
+		// Text alignment (supports both physical left/right and logical start/end)
 		alignLeft: (el) => {
-			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return (paragraph as HTMLElement)?.style.textAlign === 'start'
+			const block = el.closest(ALIGN_BLOCK_SELECTOR) as HTMLElement | null
+			const align = block?.style.textAlign
+			return align === 'left' || align === 'start'
 		},
 		alignCenter: (el) => {
-			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return (paragraph as HTMLElement)?.style.textAlign === 'center'
+			const block = el.closest(ALIGN_BLOCK_SELECTOR) as HTMLElement | null
+			return block?.style.textAlign === 'center'
 		},
 		alignRight: (el) => {
-			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return (paragraph as HTMLElement)?.style.textAlign === 'end'
+			const block = el.closest(ALIGN_BLOCK_SELECTOR) as HTMLElement | null
+			const align = block?.style.textAlign
+			return align === 'right' || align === 'end'
 		},
 		alignJustify: (el) => {
-			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return (paragraph as HTMLElement)?.style.textAlign === 'justify'
+			const block = el.closest(ALIGN_BLOCK_SELECTOR) as HTMLElement | null
+			return block?.style.textAlign === 'justify'
 		},
 
 		// Text direction
 		textDirection: (el) => {
-			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return (paragraph as HTMLElement)?.dir === 'rtl'
+			const block = el.closest(ALIGN_BLOCK_SELECTOR) as HTMLElement | null
+			return (block?.dir || el.closest('table')?.dir) === 'rtl'
 		},
 		ltrDirection: (el) => {
-			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return (paragraph as HTMLElement)?.dir === 'ltr'
+			const block = el.closest(ALIGN_BLOCK_SELECTOR) as HTMLElement | null
+			return (block?.dir || el.closest('table')?.dir) === 'ltr'
 		},
 		rtlDirection: (el) => {
-			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return (paragraph as HTMLElement)?.dir === 'rtl'
+			const block = el.closest(ALIGN_BLOCK_SELECTOR) as HTMLElement | null
+			return (block?.dir || el.closest('table')?.dir) === 'rtl'
 		}
 	}
 
-	// Special handling for view state commands
 	if (['splitView', 'codeView', 'fullScreen'].includes(style)) {
-		return false // These are handled by the editor state directly
+		return false
 	}
 
-	// Use the appropriate checker
 	const checker = styleCheckers[style]
 	if (checker) {
 		return checkParent(parent, checker)
 	}
 
-	// Fallback: check if element matches the style tag name
 	return checkParent(parent, el => el.tagName?.toLowerCase() === style.toLowerCase())
 }
 
+export function computeActiveStyles(doc: Document | undefined): Set<string> {
+	const styles = new Set<string>()
+	if (!doc) { return styles }
+	for (const style of ACTIVE_STYLE_KEYS) {
+		if (isStyleActive(style, doc)) {
+			styles.add(style)
+		}
+	}
+	return styles
+}
+
 export interface SelectionInfo {
 	startBlock: Element
 	endBlock: Element
@@ -131,7 +157,6 @@ export function analyzeSelection(doc: Document, range: Range): SelectionInfo | n
 
 	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