@bagelink/vue 1.6.47 → 1.6.51

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Option } from '@bagelink/vue'
 
-import { onMounted, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -20,38 +20,38 @@ const props = withDefaults(
 const emits = defineEmits(['update:modelValue'])
 
 function getLabel(option: Option) {
-	if ('string' === typeof option) {return option}
-	if ('number' === typeof option) {return `${option}`}
-	if ('boolean' === typeof option) {return option ? 'Yes' : 'No'}
+	if (typeof option === 'string') { return option }
+	if (typeof option === 'number') { return `${option}` }
+	if (typeof option === 'boolean') { return option ? 'Yes' : 'No' }
 	return option.label
 }
 
 function getValue(option: Option) {
-	if ('string' === typeof option) {return option}
-	if ('number' === typeof option) {return option}
-	if ('boolean' === typeof option) {return option ? 'Yes' : 'No'}
+	if (typeof option === 'string') { return option }
+	if (typeof option === 'number') { return option }
+	if (typeof option === 'boolean') { return option ? 'Yes' : 'No' }
 	return option.value
 }
 
-let selectedValue = $ref(props.modelValue)
+const selectedValue = ref(props.modelValue)
 
 function handleSelect(e: Event) {
 	const newVal = (e.target as any)?.value
 	emits('update:modelValue', newVal)
-	selectedValue = newVal
+	selectedValue.value = newVal
 }
 
 watch(
 	() => props.modelValue,
 	(newVal, oldVal) => {
-		if (newVal === oldVal || oldVal === undefined) {return}
-		if (selectedValue !== newVal) {selectedValue = newVal}
+		if (newVal === oldVal || oldVal === undefined) { return }
+		if (selectedValue.value !== newVal) { selectedValue.value = newVal }
 	},
 	{ immediate: true },
 )
 
 onMounted(() => {
-	selectedValue = props.modelValue
+	selectedValue.value = props.modelValue
 })
 </script>
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 export interface RangeInputProps {
 	modelValue: number | [number, number]
@@ -26,48 +26,48 @@ const {
 	formatValue = (value: number) => value.toString()
 } = props
 
-let from = $ref<number>(Array.isArray(props.modelValue) ? props.modelValue[0] : (props.modelValue ?? min))
-let to = $ref<number>(Array.isArray(props.modelValue) ? props.modelValue[1] : max)
+const from = ref<number>(Array.isArray(props.modelValue) ? props.modelValue[0] : (props.modelValue ?? min))
+const to = ref<number>(Array.isArray(props.modelValue) ? props.modelValue[1] : max)
 
-const validFrom = $computed(() => Math.min(Math.max(from, min), multiRange ? to : max))
-const validTo = $computed(() => Math.max(Math.min(to, max), from))
+const validFrom = computed(() => Math.min(Math.max(from.value, min), multiRange ? to.value : max))
+const validTo = computed(() => Math.max(Math.min(to.value, max), from.value))
 
-const fromPercentage = $computed(() => ((validFrom - min) / (max - min)) * 100)
-const toPercentage = $computed(() => ((validTo - min) / (max - min)) * 100)
+const fromPercentage = computed(() => ((validFrom.value - min) / (max - min)) * 100)
+const toPercentage = computed(() => ((validTo.value - min) / (max - min)) * 100)
 
 watch(() => props.modelValue, (newVal) => {
 	if (Array.isArray(newVal) && multiRange) {
-		from = newVal[0] ?? min
-		to = newVal[1] ?? max
+		from.value = newVal[0] ?? min
+		to.value = newVal[1] ?? max
 	} else if (!Array.isArray(newVal)) {
-		from = newVal ?? min
-		to = max
+		from.value = newVal ?? min
+		to.value = max
 	}
 }, { immediate: true })
 
 function handleInput(value: number, isFromInput: boolean) {
 	if (isFromInput) {
-		from = value
+		from.value = value
 	} else {
-		to = value
+		to.value = value
 	}
-	emit('update:modelValue', multiRange ? [validFrom, validTo] : validFrom)
+	emit('update:modelValue', multiRange ? [validFrom.value, validTo.value] : validFrom.value)
 }
 
-const rangeStyle = $computed(() => {
+const rangeStyle = computed(() => {
 	if (multiRange) {
 		return {
-			left: `${fromPercentage}%`,
-			width: `${toPercentage - fromPercentage}%`
+			left: `${fromPercentage.value}%`,
+			width: `${toPercentage.value - fromPercentage.value}%`
 		}
 	}
 	return props.rtl
-		? { left: `${100 - fromPercentage}%`, width: `${fromPercentage}%` }
-		: { left: '0', width: `${fromPercentage}%` }
+		? { left: `${100 - fromPercentage.value}%`, width: `${fromPercentage.value}%` }
+		: { left: '0', width: `${fromPercentage.value}%` }
 })
 
-const displayFrom = $computed(() => formatValue(validFrom))
-const displayTo = $computed(() => formatValue(validTo))
+const displayFrom = computed(() => formatValue(validFrom.value))
+const displayTo = computed(() => formatValue(validTo.value))
 </script>
 
 <template>

package/src/components/form/inputs/RichText/components/EditorToolbar.vue

@@ -31,42 +31,42 @@ const emit = defineEmits(['action'])
 
 // Function to get the current alignment icon based on active styles
 function getCurrentAlignmentIcon(): string {
-	if (selectedStyles.has('alignLeft')) {return 'format_align_left'}
-	if (selectedStyles.has('alignCenter')) {return 'format_align_center'}
-	if (selectedStyles.has('alignRight')) {return 'format_align_right'}
-	if (selectedStyles.has('alignJustify')) {return 'format_align_justify'}
+	if (selectedStyles.has('alignLeft')) { return 'format_align_left' }
+	if (selectedStyles.has('alignCenter')) { return 'format_align_center' }
+	if (selectedStyles.has('alignRight')) { return 'format_align_right' }
+	if (selectedStyles.has('alignJustify')) { return 'format_align_justify' }
 	return 'format_align_left' // default
 }
 
 // Function to check if any alignment is active
 function isAlignmentActive(): boolean {
-	return selectedStyles.has('alignLeft') ||
-		selectedStyles.has('alignCenter') ||
-		selectedStyles.has('alignRight') ||
-		selectedStyles.has('alignJustify')
+	return selectedStyles.has('alignLeft')
+		|| selectedStyles.has('alignCenter')
+		|| selectedStyles.has('alignRight')
+		|| selectedStyles.has('alignJustify')
 }
 
 // Helper function to check if an action should be hidden
 function shouldHideAction(actionName: string): boolean {
 	// Check if it's in the hide array - this covers ALL items including:
-	// bold, italic, underline, h1, h2, h3, h4, h5, h6, link, image, video, embed, 
+	// bold, italic, underline, h1, h2, h3, h4, h5, h6, link, image, video, embed,
 	// ul, ol, blockquote, code, clear, direction, table, fullScreen
-	if (hide.includes(actionName)) {return true}
+	if (hide.includes(actionName)) { return true }
 
 	// Alternative name mappings for some actions
 	const alternativeNames: Record<string, string[]> = {
-		'image': ['insertImage', 'image'],
-		'video': ['insertVideo', 'video'],
-		'embed': ['insertEmbed', 'embed'],
-		'table': ['insertTable'],
-		'direction': ['textDirection'],
-		'fullScreen': ['fullScreen'],
-		'ul': ['unorderedList'],
-		'ol': ['orderedList'],
-		'splitView': ['splitView'],
-		'p': ['p'],
-		'align': ['alignMenu'],
-		'alignment': ['alignMenu']
+		image: ['insertImage', 'image'],
+		video: ['insertVideo', 'video'],
+		embed: ['insertEmbed', 'embed'],
+		table: ['insertTable'],
+		direction: ['textDirection'],
+		fullScreen: ['fullScreen'],
+		ul: ['unorderedList'],
+		ol: ['orderedList'],
+		splitView: ['splitView'],
+		p: ['p'],
+		align: ['alignMenu'],
+		alignment: ['alignMenu']
 	}
 
 	// Check alternative names
@@ -78,28 +78,30 @@ function shouldHideAction(actionName: string): boolean {
 
 	// Map action names to check against specific hide props (for backward compatibility)
 	const actionMap: Record<string, boolean> = {
-		'insertImage': hideImages,
-		'insertVideo': hideVideos,
-		'insertEmbed': hideEmbeds,
-		'insertTable': hideTables,
-		'alignMenu': hideAlignment,
-		'textDirection': hideDirections,
-		'h5': hideH5H6,
-		'h6': hideH5H6
+		insertImage: hideImages,
+		insertVideo: hideVideos,
+		insertEmbed: hideEmbeds,
+		insertTable: hideTables,
+		alignMenu: hideAlignment,
+		textDirection: hideDirections,
+		h5: hideH5H6,
+		h6: hideH5H6
 	}
 
 	return actionMap[actionName] || false
 }
 
+const configToOption = (action: ToolbarConfigOption) => toolbarOptions.find(option => option.name === action) as ToolbarOption
+
 // Helper function to check if a separator should be shown
 function shouldShowSeparator(currentIndex: number): boolean {
 	const allActions = config.map(configToOption).filter(Boolean)
 
 	// Simple approach: find the last visible item before this separator
 	let lastVisibleBeforeIndex = -1
-	for (let i = currentIndex - 1; 0 <= i; i--) {
+	for (let i = currentIndex - 1; i >= 0; i--) {
 		const action = allActions[i]
-		if (action && 'separator' !== action.name && !shouldHideAction(action.name)) {
+		if (action && action.name !== 'separator' && !shouldHideAction(action.name)) {
 			lastVisibleBeforeIndex = i
 			break
 		}
@@ -109,28 +111,28 @@ function shouldShowSeparator(currentIndex: number): boolean {
 	let firstVisibleAfterIndex = -1
 	for (let i = currentIndex + 1; i < allActions.length; i++) {
 		const action = allActions[i]
-		if (action && 'separator' !== action.name && !shouldHideAction(action.name)) {
+		if (action && action.name !== 'separator' && !shouldHideAction(action.name)) {
 			firstVisibleAfterIndex = i
 			break
 		}
 	}
 
 	// Don't show if we don't have visible items on both sides
-	if (-1 === lastVisibleBeforeIndex || -1 === firstVisibleAfterIndex) {
+	if (lastVisibleBeforeIndex === -1 || firstVisibleAfterIndex === -1) {
 		return false
 	}
 
 	// Check if there's already a visible separator between these items
 	for (let i = lastVisibleBeforeIndex + 1; i < currentIndex; i++) {
 		const action = allActions[i]
-		if (action && 'separator' === action.name) {
+		if (action && action.name === 'separator') {
 			// There's already a separator closer to the visible items
 			return false
 		}
 	}
 
 	return true
-} const configToOption = (action: ToolbarConfigOption) => toolbarOptions.find(option => option.name === action) as ToolbarOption
+}
 
 function runAction(name: ToolbarConfigOption, value?: string) {
 	console.log('EditorToolbar: runAction called', { name, value })
@@ -181,61 +183,75 @@ function handleOpenAdvanced() {
 </script>
 
 <template>
-<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar" style="position: relative;">
-	<template v-for="(action, index) in config.map(configToOption).filter(Boolean)" :key="index">
-		<!-- Tables -->
-		<TableGridSelector v-if="action.name === 'insertTable' && !shouldHideAction('insertTable')" @insert="handleQuickTableInsert" @open-advanced="handleOpenAdvanced" />
-		<!-- Images -->
-		<Btn v-else-if="action.name === 'insertImage' && !shouldHideAction('insertImage')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
-			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
-
-		<!-- Videos -->
-		<Btn v-else-if="action.name === 'insertVideo' && !shouldHideAction('insertVideo')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
-			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
-
-		<!-- Embeds -->
-		<Btn v-else-if="action.name === 'insertEmbed' && !shouldHideAction('insertEmbed')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
-			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
-
-		<!-- Alignment Menu -->
-		<Dropdown v-else-if="action.name === 'alignMenu' && !shouldHideAction('alignMenu')" placement="bottom-start" thin flat :icon="getCurrentAlignmentIcon()"
-			:class="{ 'alignment-active': isAlignmentActive() }">
-			<template #default="{ hide }">
-				<div class="flex flex-column p-025">
-					<Btn thin flat icon="format_align_left" :class="{ active: selectedStyles.has('alignLeft') }" @click="runAction('alignLeft'); hide()" />
-					<Btn thin flat icon="format_align_center" :class="{ active: selectedStyles.has('alignCenter') }" @click="runAction('alignCenter'); hide()" />
-					<Btn thin flat icon="format_align_right" :class="{ active: selectedStyles.has('alignRight') }" @click="runAction('alignRight'); hide()" />
-					<Btn thin flat icon="format_align_justify" :class="{ active: selectedStyles.has('alignJustify') }" @click="runAction('alignJustify'); hide()" />
-				</div>
-			</template>
-		</Dropdown>
-
-		<!-- Text Direction -->
-		<Btn v-else-if="action.name === 'textDirection' && !shouldHideAction('textDirection')" v-tooltip="action.label"
-			:icon="selectedStyles.has('textDirection') ? 'format_textdirection_l_to_r' : 'format_textdirection_r_to_l'" thin flat :aria-label="action.name"
-			:class="[action.class, { active: selectedStyles.has('textDirection') }]" class="" tabindex="-1" @click="runAction(action.name)" />
-
-		<!-- H5 and H6 -->
-		<Btn v-else-if="(action.name === 'h5' || action.name === 'h6') && !shouldHideAction(action.name)" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
-			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
-
-		<!-- All other buttons - check if they should be hidden by the hide array -->
-		<Btn v-else-if="action.name !== 'separator' &&
-			action.name !== 'insertTable' &&
-			action.name !== 'insertImage' &&
-			action.name !== 'insertVideo' &&
-			action.name !== 'insertEmbed' &&
-			action.name !== 'alignMenu' &&
-			action.name !== 'textDirection' &&
-			action.name !== 'h5' &&
-			action.name !== 'h6' &&
-			!shouldHideAction(action.name)" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]" class=""
-			tabindex="-1" @click="runAction(action.name)" />
-
-		<!-- Separator -->
-		<span v-else-if="action.name === 'separator' && shouldShowSeparator(index)" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>
-	</template>
-</div>
+	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar" style="position: relative;">
+		<template v-for="(action, index) in config.map(configToOption).filter(Boolean)" :key="index">
+			<!-- Tables -->
+			<TableGridSelector v-if="action.name === 'insertTable' && !shouldHideAction('insertTable')" @insert="handleQuickTableInsert" @open-advanced="handleOpenAdvanced" />
+			<!-- Images -->
+			<Btn
+				v-else-if="action.name === 'insertImage' && !shouldHideAction('insertImage')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+				:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)"
+			/>
+
+			<!-- Videos -->
+			<Btn
+				v-else-if="action.name === 'insertVideo' && !shouldHideAction('insertVideo')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+				:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)"
+			/>
+
+			<!-- Embeds -->
+			<Btn
+				v-else-if="action.name === 'insertEmbed' && !shouldHideAction('insertEmbed')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+				:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)"
+			/>
+
+			<!-- Alignment Menu -->
+			<Dropdown
+				v-else-if="action.name === 'alignMenu' && !shouldHideAction('alignMenu')" placement="bottom-start" thin flat :icon="getCurrentAlignmentIcon()"
+				:class="{ 'alignment-active': isAlignmentActive() }"
+			>
+				<template #default="{ hide }">
+					<div class="flex flex-column p-025">
+						<Btn thin flat icon="format_align_left" :class="{ active: selectedStyles.has('alignLeft') }" @click="runAction('alignLeft'); hide()" />
+						<Btn thin flat icon="format_align_center" :class="{ active: selectedStyles.has('alignCenter') }" @click="runAction('alignCenter'); hide()" />
+						<Btn thin flat icon="format_align_right" :class="{ active: selectedStyles.has('alignRight') }" @click="runAction('alignRight'); hide()" />
+						<Btn thin flat icon="format_align_justify" :class="{ active: selectedStyles.has('alignJustify') }" @click="runAction('alignJustify'); hide()" />
+					</div>
+				</template>
+			</Dropdown>
+
+			<!-- Text Direction -->
+			<Btn
+				v-else-if="action.name === 'textDirection' && !shouldHideAction('textDirection')" v-tooltip="action.label"
+				:icon="selectedStyles.has('textDirection') ? 'format_textdirection_l_to_r' : 'format_textdirection_r_to_l'" thin flat :aria-label="action.name"
+				:class="[action.class, { active: selectedStyles.has('textDirection') }]" class="" tabindex="-1" @click="runAction(action.name)"
+			/>
+
+			<!-- H5 and H6 -->
+			<Btn
+				v-else-if="(action.name === 'h5' || action.name === 'h6') && !shouldHideAction(action.name)" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+				:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)"
+			/>
+
+			<!-- All other buttons - check if they should be hidden by the hide array -->
+			<Btn
+				v-else-if="action.name !== 'separator'
+					&& action.name !== 'insertTable'
+					&& action.name !== 'insertImage'
+					&& action.name !== 'insertVideo'
+					&& action.name !== 'insertEmbed'
+					&& action.name !== 'alignMenu'
+					&& action.name !== 'textDirection'
+					&& action.name !== 'h5'
+					&& action.name !== 'h6'
+					&& !shouldHideAction(action.name)" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]" class=""
+				tabindex="-1" @click="runAction(action.name)"
+			/>
+
+			<!-- Separator -->
+			<span v-else-if="action.name === 'separator' && shouldShowSeparator(index)" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>
+		</template>
+	</div>
 </template>
 
 <style scoped>
@@ -268,4 +284,3 @@ function handleOpenAdvanced() {
 	color: white !important;
 }
 </style>
-

package/src/components/form/inputs/RichText/components/TableGridSelector.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
 import { Btn, Dropdown } from '@bagelink/vue'
-
+import { ref, computed } from 'vue'
 
 const emit = defineEmits<{
-    insert: [rows: number, cols: number]
-    openAdvanced: []
+	insert: [rows: number, cols: number]
+	openAdvanced: []
 }>()
 
 const hoveredRow = ref(0)
@@ -15,80 +14,81 @@ const maxRows = 10
 const maxCols = 10
 
 const gridCells = computed(() => {
-    const cells = []
-    for (let row = 1; row <= maxRows; row++) {
-        for (let col = 1; col <= maxCols; col++) {
-            cells.push({
-                row,
-                col,
-                isActive: row <= hoveredRow.value && col <= hoveredCol.value
-            })
-        }
-    }
-    return cells
+	const cells = []
+	for (let row = 1; row <= maxRows; row++) {
+		for (let col = 1; col <= maxCols; col++) {
+			cells.push({
+				row,
+				col,
+				isActive: row <= hoveredRow.value && col <= hoveredCol.value
+			})
+		}
+	}
+	return cells
 })
 
 const selectionText = computed(() => {
-    if (0 === hoveredRow.value || 0 === hoveredCol.value) {
-        return 'Select table size'
-    }
-    return `${hoveredRow.value} × ${hoveredCol.value}`
+	if (hoveredRow.value === 0 || hoveredCol.value === 0) {
+		return 'Select table size'
+	}
+	return `${hoveredRow.value} × ${hoveredCol.value}`
 })
 
-const handleCellHover = (row: number, col: number) => {
-    hoveredRow.value = row
-    hoveredCol.value = col
+function handleCellHover(row: number, col: number) {
+	hoveredRow.value = row
+	hoveredCol.value = col
 }
 
-const handleCellClick = (row: number, col: number, hide: () => void) => {
-    emit('insert', row, col)
-    hide()
+function handleCellClick(row: number, col: number, hide: () => void) {
+	emit('insert', row, col)
+	hide()
 }
 
-const handleAdvanced = (hide: () => void) => {
-    emit('openAdvanced')
-    hide()
+function handleAdvanced(hide: () => void) {
+	emit('openAdvanced')
+	hide()
 }
 
-const handleMouseLeave = () => {
-    hoveredRow.value = 0
-    hoveredCol.value = 0
+function handleMouseLeave() {
+	hoveredRow.value = 0
+	hoveredCol.value = 0
 }
 </script>
 
 <template>
-<Dropdown placement="bottom-start" thin flat icon="table">
-    <template #default="{ hide }">
-        <div class="table-grid-selector p-075">
-            <!-- Header -->
-            <div class="txt-center mb-075">
-                <div style="font-size: 14px; font-weight: 500; color: #333; margin-bottom: 4px;">
-                    {{ selectionText }}
-                </div>
-                <div style="font-size: 12px; color: #666;">
-                    Hover to select size
-                </div>
-            </div>
+	<Dropdown placement="bottom-start" thin flat icon="table">
+		<template #default="{ hide }">
+			<div class="table-grid-selector p-075">
+				<!-- Header -->
+				<div class="txt-center mb-075">
+					<div style="font-size: 14px; font-weight: 500; color: #333; margin-bottom: 4px;">
+						{{ selectionText }}
+					</div>
+					<div style="font-size: 12px; color: #666;">
+						Hover to select size
+					</div>
+				</div>
+
+				<!-- Grid -->
+				<div style="display: grid; grid-template-columns: repeat(10, 20px); grid-template-rows: repeat(10, 20px); gap: 2px; margin-bottom: 12px; direction: ltr;" @mouseleave="handleMouseLeave" @blur="handleMouseLeave">
+					<div
+						v-for="cell in gridCells" :key="`${cell.row}-${cell.col}`" tabindex="0" :style="{
+							width: '20px',
+							height: '20px',
+							border: '1px solid #ddd',
+							backgroundColor: cell.isActive ? 'var(--bgl-primary)' : '#fff',
+							cursor: 'pointer',
+							borderRadius: '2px',
+							transition: 'background-color 0.1s ease',
+						}" @focus="handleCellHover(cell)" @mouseenter="handleCellHover(cell.row, cell.col)" @click="handleCellClick(cell.row, cell.col, hide)"
+					/>
+				</div>
 
-            <!-- Grid -->
-            <div style="display: grid; grid-template-columns: repeat(10, 20px); grid-template-rows: repeat(10, 20px); gap: 2px; margin-bottom: 12px; direction: ltr;" @mouseleave="handleMouseLeave">
-                <div v-for="cell in gridCells" :key="`${cell.row}-${cell.col}`" @mouseenter="handleCellHover(cell.row, cell.col)" @click="handleCellClick(cell.row, cell.col, hide)" :style="{
-                    width: '20px',
-                    height: '20px',
-                    border: '1px solid #ddd',
-                    backgroundColor: cell.isActive ? 'var(--bgl-primary)' : '#fff',
-                    cursor: 'pointer',
-                                    borderRadius: '2px',
-                                    transition: 'background-color 0.1s ease'
-                                }">
-                </div>
-                </div>
-                
-                <!-- Advanced button -->
-                <div class="border-top pt-075">
-                    <Btn @click="handleAdvanced(hide)" value="Advanced Settings" icon="settings" class="bg-gray-30 color-black" />
-                </div>
-                </div>
-                </template>
-                </Dropdown>
+				<!-- Advanced button -->
+				<div class="border-top pt-075">
+					<Btn value="Advanced Settings" icon="settings" class="bg-gray-30 color-black" @click="handleAdvanced(hide)" />
+				</div>
+			</div>
+		</template>
+	</Dropdown>
 </template>

package/src/components/form/inputs/RichText/components/gridBox.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+
 const props = defineProps<{
 	gridSize?: number
 }>()
 const emit = defineEmits(['select'])
 const fb = 1
 const base = props.gridSize || 5
-const hoveredRow = $ref(fb)
-const hoveredCol = $ref(fb)
+const hoveredRow = ref(fb)
+const hoveredCol = ref(fb)
 
-const rowSize = $computed(() => {
-	const enlarge = Math.min(hoveredRow + 1, 20)
-	return hoveredRow > (base - 1) ? enlarge : base
+const rowSize = computed(() => {
+	const enlarge = Math.min(hoveredRow.value + 1, 20)
+	return hoveredRow.value > (base - 1) ? enlarge : base
 })
-const colSize = $computed(() => {
-	const enlarge = Math.min(hoveredCol + 1, 20)
-	return hoveredCol > (base - 1) ? enlarge : base
+const colSize = computed(() => {
+	const enlarge = Math.min(hoveredCol.value + 1, 20)
+	return hoveredCol.value > (base - 1) ? enlarge : base
 })
 </script>
 

package/src/components/form/inputs/RichText/composables/useCommands.ts

@@ -8,7 +8,7 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 
 	// Function to immediately update styles
 	const updateStylesImmediately = () => {
-		if (!state.doc) {return}
+		if (!state.doc) { return }
 
 		const styles = new Set<string>()
 		const styleTypes = [