@bagelink/vue 1.4.64 → 1.4.71

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

@@ -16,33 +16,57 @@ export function isStyleActive(style: string, doc: Document) {
 
 	if (!parent) return false
 
-	const checkParent = (element: Element | null, tags: string[]): boolean => {
-		if (!element || !element.tagName) return false
-		const tagName = element.tagName.toLowerCase()
-		if (tags.includes(tagName)) return true
-		return checkParent(element.parentElement, tags)
+	// 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 (checker(element)) return true
+		return checkParent(element.parentElement, checker)
 	}
 
-	// Define style mappings for different types of formatting
-	const styleMappings: { [key: string]: string[] } = {
-		// Inline styles
-		bold: ['strong', 'b'],
-		italic: ['em', 'i'],
-		underline: ['u'],
-
-		// Block styles
-		h1: ['h1'],
-		h2: ['h2'],
-		h3: ['h3'],
-		h4: ['h4'],
-		h5: ['h5'],
-		h6: ['h6'],
-		p: ['p'],
-		blockquote: ['blockquote'],
-
-		// List styles
-		orderedList: ['ol'],
-		unorderedList: ['ul']
+	// Define style checkers for different formatting types
+	const styleCheckers: { [key: string]: (el: Element) => boolean } = {
+		// Text formatting - check for elements or inline styles
+		bold: (el) => {
+			const tagName = el.tagName?.toLowerCase()
+			if (tagName === 'strong' || tagName === 'b') return true
+			const styles = window.getComputedStyle(el)
+			return styles.fontWeight === 'bold' || styles.fontWeight === '700'
+		},
+
+		italic: (el) => {
+			const tagName = el.tagName?.toLowerCase()
+			if (tagName === 'em' || tagName === 'i') return true
+			const styles = window.getComputedStyle(el)
+			return styles.fontStyle === 'italic'
+		},
+
+		underline: (el) => {
+			const tagName = el.tagName?.toLowerCase()
+			if (tagName === 'u') return true
+			const styles = window.getComputedStyle(el)
+			return styles.textDecoration.includes('underline')
+		},
+
+		// Block elements
+		h1: el => el.tagName?.toLowerCase() === 'h1',
+		h2: el => el.tagName?.toLowerCase() === 'h2',
+		h3: el => el.tagName?.toLowerCase() === 'h3',
+		h4: el => el.tagName?.toLowerCase() === 'h4',
+		h5: el => el.tagName?.toLowerCase() === 'h5',
+		h6: el => el.tagName?.toLowerCase() === 'h6',
+		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')
+		}
 	}
 
 	// Special handling for view state commands
@@ -50,20 +74,14 @@ export function isStyleActive(style: string, doc: Document) {
 		return false // These are handled by the editor state directly
 	}
 
-	// Special handling for list items
-	if (style === 'orderedList' || style === 'unorderedList') {
-		const listParent = parent.closest(style === 'orderedList' ? 'ol' : 'ul')
-		return !!listParent
-	}
-
-	// Check for the style in the style mappings
-	const tags = styleMappings[style]
-	if (tags) {
-		return checkParent(parent, tags)
+	// Use the appropriate checker
+	const checker = styleCheckers[style]
+	if (checker) {
+		return checkParent(parent, checker)
 	}
 
-	// Default to checking the style itself if no mapping exists
-	return checkParent(parent, [style])
+	// Fallback: check if element matches the style tag name
+	return checkParent(parent, el => el.tagName?.toLowerCase() === style.toLowerCase())
 }
 
 export interface SelectionInfo {