@bagelink/vue 1.4.139 → 1.4.141

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

@@ -19,30 +19,32 @@ export function formatting(state: EditorState) {
 		// 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()) {
-				const span = doc.createElement('span') as HTMLSpanElement
-				if (command === 'underline') span.style.textDecoration = 'underline'
-				else if (command === 'bold') span.style.fontWeight = 'bold'
-				else if (command === 'italic') span.style.fontStyle = 'italic'
-
-				if (isRTL) span.dir = 'rtl'
-				range.surroundContents(span)
+				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
 
-			const span = doc.createElement('span')
-			if (command === 'bold') span.style.fontWeight = 'bold'
-			else if (command === 'italic') span.style.fontStyle = 'italic'
-			else if (command === 'underline') span.style.textDecoration = 'underline'
+			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(span)
-			} catch (e) {
+				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()
-				span.appendChild(fragment)
-				range.insertNode(span)
+				element.appendChild(fragment)
+				range.insertNode(element)
 			}
 		}
 	}

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

@@ -25,26 +25,23 @@ export function isStyleActive(style: string, doc: Document) {
 
 	// Define style checkers for different formatting types
 	const styleCheckers: { [key: string]: (el: Element) => boolean } = {
-		// Text formatting - check for elements or inline styles
+		// Text formatting - check for elements only, not CSS 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'
+			// Only consider <b> and <strong> tags, not CSS bold styling
+			return tagName === 'strong' || tagName === 'b'
 		},
 
 		italic: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			if (tagName === 'em' || tagName === 'i') return true
-			const styles = window.getComputedStyle(el)
-			return styles.fontStyle === 'italic'
+			// Only consider <i> and <em> tags, not CSS italic styling
+			return tagName === 'em' || tagName === 'i'
 		},
 
 		underline: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			if (tagName === 'u') return true
-			const styles = window.getComputedStyle(el)
-			return styles.textDecoration.includes('underline')
+			// Only consider <u> tag, not CSS underline styling
+			return tagName === 'u'
 		},
 
 		// Block elements
@@ -66,6 +63,30 @@ export function isStyleActive(style: string, doc: Document) {
 		unorderedList: (el) => {
 			// Check if we're inside an unordered list
 			return !!el.closest('ul')
+		},
+
+		// Text alignment
+		alignLeft: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'left'
+		},
+		alignCenter: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'center'
+		},
+		alignRight: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'right'
+		},
+		alignJustify: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'justify'
+		},
+
+		// Text direction
+		textDirection: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.dir === 'rtl'
 		}
 	}
 
@@ -141,7 +162,7 @@ export function restoreSelection(
 	try {
 		range.setStart(info.originalStart, info.originalStartOffset)
 		range.setEnd(info.originalEnd, info.originalEndOffset)
-	} catch (e) {
+	} catch {
 		if (fallbackNode) {
 			range.selectNodeContents(fallbackNode)
 		}