@bagelink/vue 1.6.47 → 1.6.51

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

@@ -3,39 +3,39 @@ import { analyzeSelection, restoreSelection, getBlocksBetween } from './selectio
 
 export function formatting(state: EditorState) {
 	const { doc } = state
-	if (!doc) {return { text: () => {}, block: () => {}, list: () => {}, clear: () => {} }}
+	if (!doc) { return { text: () => {}, block: () => {}, list: () => {}, clear: () => {} } }
 
 	const text = (command: string) => {
 		const selection = doc.getSelection()
-		if (!selection || !selection.rangeCount) {return}
+		if (!selection || !selection.rangeCount) { return }
 
 		const range = selection.getRangeAt(0)
 		const container = range.commonAncestorContainer
-		const parentBlock = 3 === container.nodeType ? container.parentElement : container as HTMLElement
+		const parentBlock = container.nodeType === 3 ? container.parentElement : container as HTMLElement
 
 		// Preserve RTL direction when applying text formatting
-		const isRTL = null !== parentBlock?.closest('[dir="rtl"]')
+		const isRTL = parentBlock?.closest('[dir="rtl"]') !== null
 
 		// 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()) {
 				let element: HTMLElement
-				if ('underline' === command) {element = doc.createElement('u')}
-				else if ('bold' === command) {element = doc.createElement('b')}
-				else if ('italic' === command) {element = doc.createElement('i')}
-				else {return}
+				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'}
+				if (isRTL) { element.dir = 'rtl' }
 				range.surroundContents(element)
 			}
 		} else {
-			if (range.collapsed) {return} // No selection, nothing to format
+			if (range.collapsed) { return } // No selection, nothing to format
 
 			let element: HTMLElement
-			if ('bold' === command) {element = doc.createElement('b')}
-			else if ('italic' === command) {element = doc.createElement('i')}
-			else if ('underline' === command) {element = doc.createElement('u')}
-			else {return}
+			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(element)
@@ -51,12 +51,12 @@ export function formatting(state: EditorState) {
 
 	const block = (command: string, tag: string) => {
 		const selection = doc.getSelection()
-		if (!selection || !selection.rangeCount) {return}
+		if (!selection || !selection.rangeCount) { return }
 
 		const range = selection.getRangeAt(0)
 		const container = range.commonAncestorContainer
-		const parentBlock = 3 === container.nodeType ? container.parentElement : container as HTMLElement
-		const isRTL = null !== parentBlock?.closest('[dir="rtl"]')
+		const parentBlock = container.nodeType === 3 ? container.parentElement : container as HTMLElement
+		const isRTL = parentBlock?.closest('[dir="rtl"]') !== null
 
 		// Remove any invalid inline style wrapping
 		if (parentBlock?.closest('u, b, i')) {
@@ -72,7 +72,7 @@ export function formatting(state: EditorState) {
 
 		// Create a new block element of the desired type
 		const newBlock = doc.createElement(tag)
-		if (isRTL) {newBlock.dir = 'rtl'}
+		if (isRTL) { newBlock.dir = 'rtl' }
 
 		// Find the current block to replace
 		const currentBlock = parentBlock?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div') || parentBlock
@@ -95,25 +95,25 @@ export function formatting(state: EditorState) {
 	}
 
 	const list = (command: string) => {
-		if (!state.doc || !state.range || !state.selection) {return}
+		if (!state.doc || !state.range || !state.selection) { return }
 
-		const listTag = 'orderedList' === command ? 'ol' : 'ul'
+		const listTag = command === 'orderedList' ? 'ol' : 'ul'
 		const selectionInfo = analyzeSelection(state.doc, state.range)
-		if (!selectionInfo) {return}
+		if (!selectionInfo) { return }
 
-		const isRTL = null !== selectionInfo.parent.closest('[dir="rtl"]')
+		const isRTL = selectionInfo.parent.closest('[dir="rtl"]') !== null
 
 		// If we're inside a list item, handle toggling off or switching list type
 		const listItem = selectionInfo.parent.closest('li')
 		if (listItem) {
 			const listParent = listItem.parentElement
-			if (!listParent) {return}
+			if (!listParent) { return }
 
 			// If it's the same list type, toggle off
 			if (listParent.tagName.toLowerCase() === listTag) {
 				// Create a paragraph from the list item content
 				const p = state.doc.createElement('p') as HTMLParagraphElement
-				if (isRTL) {p.dir = 'rtl'}
+				if (isRTL) { p.dir = 'rtl' }
 				while (listItem.firstChild) {
 					p.appendChild(listItem.firstChild)
 				}
@@ -131,7 +131,7 @@ export function formatting(state: EditorState) {
 
 			// Convert to the other list type
 			const newList = state.doc.createElement(listTag) as HTMLElement
-			if (isRTL) {newList.dir = 'rtl'}
+			if (isRTL) { newList.dir = 'rtl' }
 			const allItems = Array.from(listParent.children)
 			allItems.forEach(item => newList.appendChild(item.cloneNode(true)))
 			listParent.parentNode?.replaceChild(newList, listParent)
@@ -145,7 +145,7 @@ export function formatting(state: EditorState) {
 		if (!selectionInfo.isMultiBlock) {
 			const li = state.doc.createElement('li')
 			const listEl = state.doc.createElement(listTag) as HTMLElement
-			if (isRTL) {listEl.dir = 'rtl'}
+			if (isRTL) { listEl.dir = 'rtl' }
 
 			while (selectionInfo.startBlock.firstChild) {
 				li.appendChild(selectionInfo.startBlock.firstChild)
@@ -160,10 +160,10 @@ export function formatting(state: EditorState) {
 		// Handle multi-block selection
 		const blocks = getBlocksBetween(selectionInfo.startBlock, selectionInfo.endBlock)
 		const listEl = state.doc.createElement(listTag) as HTMLElement
-		if (isRTL) {listEl.dir = 'rtl'}
+		if (isRTL) { listEl.dir = 'rtl' }
 
 		blocks.forEach((block) => {
-			if (!state.doc) {return}
+			if (!state.doc) { return }
 			const li = state.doc.createElement('li')
 			while (block.firstChild) {
 				li.appendChild(block.firstChild)
@@ -216,14 +216,14 @@ export function formatting(state: EditorState) {
 
 		// Function to recursively clean a node and its children
 		const cleanNode = (node: Node): Node => {
-			if (!state.doc) {return node}
+			if (!state.doc) { return node }
 
 			// Text nodes can be returned as-is
-			if (3 === node.nodeType) {
+			if (node.nodeType === 3) {
 				return node.cloneNode(true)
 			}
 
-			if (1 === node.nodeType) { // Element node
+			if (node.nodeType === 1) { // Element node
 				const el = node as HTMLElement
 				const nodeName = el.nodeName.toLowerCase()
 				const inlineTags = ['b', 'i', 'u', 'strong', 'em', 'span', 'font', 'strike', 'sub', 'sup']
@@ -254,7 +254,7 @@ export function formatting(state: EditorState) {
 				}
 
 				// Transfer only specific attributes we want to keep (like href for links)
-				if ('a' === nodeName && el.hasAttribute('href')) {
+				if (nodeName === 'a' && el.hasAttribute('href')) {
 					newEl.setAttribute('href', el.getAttribute('href') || '')
 					if (el.hasAttribute('target')) {
 						newEl.setAttribute('target', el.getAttribute('target') || '')
@@ -263,9 +263,9 @@ export function formatting(state: EditorState) {
 				}
 
 				// For images, preserve src and alt
-				if ('img' === nodeName) {
-					if (el.hasAttribute('src')) {newEl.setAttribute('src', el.getAttribute('src') || '')}
-					if (el.hasAttribute('alt')) {newEl.setAttribute('alt', el.getAttribute('alt') || '')}
+				if (nodeName === 'img') {
+					if (el.hasAttribute('src')) { newEl.setAttribute('src', el.getAttribute('src') || '') }
+					if (el.hasAttribute('alt')) { newEl.setAttribute('alt', el.getAttribute('alt') || '') }
 					console.log('[Clear Format] Preserving image attributes')
 				}
 
@@ -307,17 +307,17 @@ export function formatting(state: EditorState) {
 }
 
 export function getBlockElement(node: Node): HTMLElement | null {
-	const element = 3 === node.nodeType ? node.parentElement : node as HTMLElement
-	if (!element) {return null}
+	const element = node.nodeType === 3 ? node.parentElement : node as HTMLElement
+	if (!element) { return null }
 	return element.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li') || element
 }
 
 export function adjustIndentation(state: EditorState, increase: boolean) {
 	const { doc, range } = state
-	if (!doc || !range) {return}
+	if (!doc || !range) { return }
 
 	const blockElement = getBlockElement(range.commonAncestorContainer)
-	if (!blockElement) {return}
+	if (!blockElement) { return }
 
 	const currentMargin = Number.parseInt(blockElement.style.marginLeft || '0', 10)
 	const step = 20 // pixels to indent/outdent

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

@@ -8,18 +8,18 @@ export function getSelectionRange(state: any) {
 
 export function isStyleActive(style: string, doc: Document) {
 	const selection = doc.getSelection()
-	if (!selection || !selection.rangeCount) {return false}
+	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
 
-	if (!parent) {return false}
+	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 (checker(element)) {return true}
+		if (!element) { return false }
+		if (checker(element)) { return true }
 		return checkParent(element.parentElement, checker)
 	}
 
@@ -29,30 +29,30 @@ export function isStyleActive(style: string, doc: Document) {
 		bold: (el) => {
 			const tagName = el.tagName?.toLowerCase()
 			// Only consider <b> and <strong> tags, not CSS bold styling
-			return 'strong' === tagName || 'b' === tagName 
+			return tagName === 'strong' || tagName === 'b'
 		},
 
 		italic: (el) => {
 			const tagName = el.tagName?.toLowerCase()
 			// Only consider <i> and <em> tags, not CSS italic styling
-			return 'em' === tagName || 'i' === tagName 
+			return tagName === 'em' || tagName === 'i'
 		},
 
 		underline: (el) => {
 			const tagName = el.tagName?.toLowerCase()
 			// Only consider <u> tag, not CSS underline styling
-			return 'u' === tagName 
+			return tagName === 'u'
 		},
 
 		// Block elements
-		h1: el => 'h1' === el.tagName?.toLowerCase(),
-		h2: el => 'h2' === el.tagName?.toLowerCase(),
-		h3: el => 'h3' === el.tagName?.toLowerCase(),
-		h4: el => 'h4' === el.tagName?.toLowerCase(),
-		h5: el => 'h5' === el.tagName?.toLowerCase(),
-		h6: el => 'h6' === el.tagName?.toLowerCase(),
-		p: el => 'p' === el.tagName?.toLowerCase(),
-		blockquote: el => 'blockquote' === el.tagName?.toLowerCase(),
+		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) => {
@@ -68,33 +68,33 @@ export function isStyleActive(style: string, doc: Document) {
 		// Text alignment
 		alignLeft: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return 'start' === (paragraph as HTMLElement)?.style.textAlign
+			return (paragraph as HTMLElement)?.style.textAlign === 'start'
 		},
 		alignCenter: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return 'center' === (paragraph as HTMLElement)?.style.textAlign
+			return (paragraph as HTMLElement)?.style.textAlign === 'center'
 		},
 		alignRight: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return 'end' === (paragraph as HTMLElement)?.style.textAlign
+			return (paragraph as HTMLElement)?.style.textAlign === 'end'
 		},
 		alignJustify: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return 'justify' === (paragraph as HTMLElement)?.style.textAlign
+			return (paragraph as HTMLElement)?.style.textAlign === 'justify'
 		},
 
 		// Text direction
 		textDirection: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return 'rtl' === (paragraph as HTMLElement)?.dir
+			return (paragraph as HTMLElement)?.dir === 'rtl'
 		},
 		ltrDirection: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return 'ltr' === (paragraph as HTMLElement)?.dir
+			return (paragraph as HTMLElement)?.dir === 'ltr'
 		},
 		rtlDirection: (el) => {
 			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
-			return 'rtl' === (paragraph as HTMLElement)?.dir
+			return (paragraph as HTMLElement)?.dir === 'rtl'
 		}
 	}
 
@@ -126,8 +126,8 @@ export interface SelectionInfo {
 
 export function analyzeSelection(doc: Document, range: Range): SelectionInfo | null {
 	const container = range.commonAncestorContainer
-	const parent = 3 === container.nodeType ? container.parentElement : container as Element
-	if (!parent) {return null}
+	const parent = container.nodeType === 3 ? container.parentElement : container as Element
+	if (!parent) { return null }
 
 	const startBlock = parent.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li') || parent
 
@@ -135,7 +135,7 @@ export function analyzeSelection(doc: Document, range: Range): SelectionInfo | n
 	const isMultiBlock = (() => {
 		if (!range.collapsed) {
 			const { endContainer } = range
-			const endParent = 3 === endContainer.nodeType ? endContainer.parentElement : endContainer as Element
+			const endParent = endContainer.nodeType === 3 ? endContainer.parentElement : endContainer as Element
 			const endBlock = endParent?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li') || endParent
 			return startBlock !== endBlock
 		}
@@ -143,10 +143,10 @@ export function analyzeSelection(doc: Document, range: Range): SelectionInfo | n
 	})()
 
 	const { endContainer } = range
-	const endParent = 3 === endContainer.nodeType ? endContainer.parentElement : endContainer as Element
+	const endParent = endContainer.nodeType === 3 ? endContainer.parentElement : endContainer as Element
 	const endBlock = endParent?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li') || endParent
 
-	if (!endBlock) {return null}
+	if (!endBlock) { return null }
 
 	return {
 		startBlock,
@@ -184,7 +184,7 @@ export function getBlocksBetween(startBlock: Element, endBlock: Element): Elemen
 	let currentBlock = startBlock
 	while (currentBlock) {
 		blocks.push(currentBlock)
-		if (currentBlock === endBlock) {break}
+		if (currentBlock === endBlock) { break }
 		currentBlock = currentBlock.nextElementSibling as Element
 	}
 	return blocks

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

@@ -1,7 +1,7 @@
 import type { EditorState } from '../richTextTypes'
 
 export function insertTable(rows: number, cols: number, state: EditorState) {
-	if (!state.doc) {return}
+	if (!state.doc) { return }
 	const table = state.doc.createElement('table')
 	table.style.width = '100%'
 	table.style.borderCollapse = 'collapse'
@@ -59,10 +59,10 @@ export function insertTable(rows: number, cols: number, state: EditorState) {
 
 export function mergeCells(range: Range, doc: Document) {
 	const cells = Array.from(range.cloneContents().querySelectorAll('td'))
-	if (2 > cells.length) {return}
+	if (cells.length < 2) { return }
 
 	const firstCell = range.startContainer.parentElement?.closest('td')
-	if (!firstCell) {return}
+	if (!firstCell) { return }
 
 	firstCell.colSpan = cells.length
 	firstCell.innerHTML = cells.map(cell => cell.innerHTML).join(' ')
@@ -81,7 +81,7 @@ export function mergeCells(range: Range, doc: Document) {
 
 export function splitCell(range: Range, doc: Document) {
 	const cell = range.startContainer.parentElement?.closest('td')
-	if (!cell || !cell.colSpan || 1 === cell.colSpan) {return}
+	if (!cell || !cell.colSpan || cell.colSpan === 1) { return }
 
 	const newCells = new Array(cell.colSpan - 1).fill(0).map(() => {
 		const newCell = doc.createElement('td')
@@ -106,16 +106,16 @@ export function splitCell(range: Range, doc: Document) {
 
 export function addRow(position: 'before' | 'after', range: Range, doc: Document) {
 	const cell = range.startContainer.parentElement?.closest('td')
-	if (!cell) {return}
+	if (!cell) { return }
 
 	const row = cell.parentElement
 	const table = row?.parentElement
-	if (!row || !table) {return}
+	if (!row || !table) { return }
 
 	const newRow = row.cloneNode(true) as HTMLTableRowElement
 	Array.from(newRow.cells).forEach(cell => cell.innerHTML = '&nbsp;')
 
-	row.insertAdjacentElement('before' === position ? 'beforebegin' : 'afterend', newRow)
+	row.insertAdjacentElement(position === 'before' ? 'beforebegin' : 'afterend', newRow)
 
 	// Update state content
 	const state = (doc as any).editorState as EditorState
@@ -126,10 +126,10 @@ export function addRow(position: 'before' | 'after', range: Range, doc: Document
 
 export function deleteRow(range: Range) {
 	const cell = range.startContainer.parentElement?.closest('td')
-	if (!cell) {return}
+	if (!cell) { return }
 
 	const row = cell.parentElement
-	if (!row) {return}
+	if (!row) { return }
 
 	const doc = row.ownerDocument
 	row.remove()
@@ -143,10 +143,10 @@ export function deleteRow(range: Range) {
 
 export function deleteTable(range: Range) {
 	const cell = range.startContainer.parentElement?.closest('td')
-	if (!cell) {return}
+	if (!cell) { return }
 
 	const table = cell.closest('table')
-	if (!table) {return}
+	if (!table) { return }
 
 	const doc = table.ownerDocument
 	table.remove()
@@ -160,16 +160,16 @@ export function deleteTable(range: Range) {
 
 export function insertColumn(position: 'before' | 'after', range: Range) {
 	const cell = range.startContainer.parentElement?.closest('td')
-	if (!cell) {return}
+	if (!cell) { return }
 
 	const table = cell.closest('table')
-	if (!table) {return}
+	if (!table) { return }
 
 	const columnIndex = cell.cellIndex
 	const { rows } = table
 
 	for (let i = 0; i < rows.length; i++) {
-		const newCell = rows[i].insertCell('after' === position ? columnIndex + 1 : columnIndex)
+		const newCell = rows[i].insertCell(position === 'after' ? columnIndex + 1 : columnIndex)
 		newCell.innerHTML = '&nbsp;'
 		newCell.style.border = '1px solid var(--border-color)'
 		newCell.style.padding = '8px'
@@ -184,10 +184,10 @@ export function insertColumn(position: 'before' | 'after', range: Range) {
 
 export function deleteColumn(range: Range) {
 	const cell = range.startContainer.parentElement?.closest('td')
-	if (!cell) {return}
+	if (!cell) { return }
 
 	const table = cell.closest('table')
-	if (!table) {return}
+	if (!table) { return }
 
 	const columnIndex = cell.cellIndex
 	const { rows } = table
@@ -198,7 +198,7 @@ export function deleteColumn(range: Range) {
 	}
 
 	// If no columns left, remove the table
-	if (0 === rows[0].cells.length) {
+	if (rows[0].cells.length === 0) {
 		table.remove()
 	}
 
@@ -211,10 +211,10 @@ export function deleteColumn(range: Range) {
 
 export function alignColumn(range: Range, alignment: 'start' | 'center' | 'end' | 'justify') {
 	const cell = range.startContainer.parentElement?.closest('td')
-	if (!cell) {return}
+	if (!cell) { return }
 
 	const table = cell.closest('table')
-	if (!table) {return}
+	if (!table) { return }
 
 	const columnIndex = cell.cellIndex
 	const { rows } = table

package/src/components/form/inputs/SelectBtn.vue

@@ -24,7 +24,7 @@ function toggleOption(value: string | number) {
 		// Multiselect mode - work with arrays
 		const currentValue = Array.isArray(selected.value) ? selected.value : []
 		const index = currentValue.indexOf(value)
-		if (-1 < index) {
+		if (index > -1) {
 			selected.value = currentValue.filter(v => v !== value)
 		} else {
 			selected.value = [...currentValue, value]