@bagelink/vue 1.19.1 → 1.20.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.19.1",
+  "version": "1.20.1",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Dropdown.vue

@@ -1,5 +1,10 @@
 <!-- prettier-ignore-start -->
 <!-- eslint-disable -->
+<script lang="ts">
+// Shared across instances so opening a grouped dropdown closes its siblings.
+const groupRegistry = new Map<string, Set<() => void>>()
+</script>
+
 <script setup lang="ts">
 import type { VirtualElement } from '@floating-ui/dom'
 import type { IconType, ThemeType } from '../index'
@@ -118,9 +123,6 @@ const resolvedDelay = computed((): { show: number; hide: number } => {
 	return { show: 0, hide: 0 }
 })
 
-// ShowGroup registry — shared across all Dropdown instances on the page
-const groupRegistry = new Map<string, Set<() => void>>()
-
 function toVirtualElement(pt: AnchorPoint): VirtualElement {
 	const width = pt.width ?? 0
 	const height = pt.height ?? 0
@@ -347,6 +349,12 @@ function onDocumentPointerDown(e: PointerEvent) {
 	internalHide({ restoreFocus: false })
 }
 
+function onEmbeddedDocumentPointerDown() {
+	if (props.autoHide && isOpen()) {
+		internalHide({ restoreFocus: false })
+	}
+}
+
 // Esc key — LIFO via shared composable (nested layers close first)
 useEscapeKey(() => internalHide(), () => isOpen())
 
@@ -355,13 +363,22 @@ let showTimer: ReturnType<typeof setTimeout> | undefined
 let hideTimer: ReturnType<typeof setTimeout> | undefined
 function clearTimers() { clearTimeout(showTimer); clearTimeout(hideTimer) }
 
+function hideForGroup() {
+	clearTimers()
+	internalHide({ restoreFocus: false })
+}
+
 let lastToggleAt = 0
 function toggle(viaKeyboard = false) {
 	const now = Date.now()
 	if (now - lastToggleAt < 50) return
 	lastToggleAt = now
 	openedViaKeyboard = viaKeyboard
-	isOpen() ? internalHide() : internalShow()
+	if (isOpen()) {
+		internalHide()
+	} else {
+		internalShow()
+	}
 }
 
 function onTriggerClick(e?: MouseEvent) {
@@ -425,10 +442,33 @@ function onScroll() {
 }
 
 let openListenersActive = false
+const embeddedDocuments = new Set<Document>()
+
+function addEmbeddedDocumentListeners() {
+	document.querySelectorAll('iframe').forEach((iframe) => {
+		try {
+			const embeddedDocument = iframe.contentDocument
+			if (!embeddedDocument || embeddedDocuments.has(embeddedDocument)) return
+			embeddedDocument.addEventListener('pointerdown', onEmbeddedDocumentPointerDown, true)
+			embeddedDocuments.add(embeddedDocument)
+		} catch {
+			// Cross-origin iframes are not inspectable; the browser owns their focus boundary.
+		}
+	})
+}
+
+function removeEmbeddedDocumentListeners() {
+	embeddedDocuments.forEach((embeddedDocument) => {
+		embeddedDocument.removeEventListener('pointerdown', onEmbeddedDocumentPointerDown, true)
+	})
+	embeddedDocuments.clear()
+}
+
 function addOpenListeners() {
 	if (openListenersActive) return
 	document.addEventListener('pointerdown', onDocumentPointerDown, true)
 	document.addEventListener('scroll', onScroll, { capture: true, passive: true })
+	addEmbeddedDocumentListeners()
 	openListenersActive = true
 }
 
@@ -436,13 +476,14 @@ function removeOpenListeners() {
 	if (!openListenersActive) return
 	document.removeEventListener('pointerdown', onDocumentPointerDown, true)
 	document.removeEventListener('scroll', onScroll, true)
+	removeEmbeddedDocumentListeners()
 	openListenersActive = false
 }
 
 onMounted(() => {
 	if (props.showGroup) {
 		if (!groupRegistry.has(props.showGroup)) groupRegistry.set(props.showGroup, new Set())
-		groupRegistry.get(props.showGroup)!.add(internalHide)
+		groupRegistry.get(props.showGroup)!.add(hideForGroup)
 	}
 	if (shown.value) internalShow()
 })
@@ -450,7 +491,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
 	removeOpenListeners()
 	clearTimers()
-	if (props.showGroup) groupRegistry.get(props.showGroup)?.delete(internalHide)
+	if (props.showGroup) groupRegistry.get(props.showGroup)?.delete(hideForGroup)
 	if (isOpen()) popoverRef.value?.hidePopover()
 })
 
@@ -482,7 +523,7 @@ defineExpose({ show, hide, toggle, openAt, updatePosition, shown })
 		</div>
 
 		<!-- Popup — teleported to closest dialog[open] or body, promoted to top layer via popover -->
-		<Teleport :to="teleportTarget">
+		<Teleport v-if="hasOpened" :to="teleportTarget">
 			<div
 				v-if="hasOpened"
 				:id="bglId" ref="popoverRef" popover="manual" class="bgl-dropdown m-0 p-0 border-none"

package/src/components/FilterQuery.vue

@@ -489,7 +489,7 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
 				<TransitionGroup name="condition">
 					<div
 						v-for="(condition, index) in conditions" :key="condition.id"
-						class="grid gap-025 align-items-center pt-025" :class="{
+						class="grid gap-025 align-items-center py-025" :class="{
 							'': index > 0 && condition.connector === 'or',
 							'pt-075 border-top-or': index > 0 && condition.connector === 'or',
 							'first-filter-row': index === 0,

package/src/components/Icon/Icon.vue

@@ -4,6 +4,8 @@ import { useDevice } from '../../index'
 import { computed, ref, onMounted, watchEffect } from 'vue'
 import { MATERIAL_ICONS, FONT_AWESOME_BRANDS_ICONS } from './constants'
 
+defineOptions({ inheritAttrs: false })
+
 type AnimateType = 'spin' | 'pulse' | 'bounce' | 'fade-in' | 'slide-up' | 'rotate-in'
 type TransitionType = 'slide-up' | 'rotate' | 'scale' | 'fade'
 
@@ -192,6 +194,7 @@ const iconStyle = computed(() => {
 <template>
 	<Transition :name="transitionName" mode="out-in">
 		<span
+			v-bind="$attrs"
 			v-if="iconRenderType === 'material'" :key="`material-${iconRender}`" class="bgl_icon-font notranslate"
 			:class="[animateClass, roundClass, roundPairClass, softClass, { 'color-white keep-white': round && !soft && isRawCssColor }]"
 			:style="iconStyle" aria-hidden="true" translate="no"
@@ -199,6 +202,7 @@ const iconStyle = computed(() => {
 			{{ iconRender }}
 		</span>
 		<span
+			v-bind="$attrs"
 			v-else-if="iconRenderType === 'font-awesome-brand'" :key="`font-awesome-brand-${iconRender}`" class="fa fa-brands bgl_icon-font notranslate" :class="[
 				`fa-${iconRender}`,
 				animateClass,
@@ -250,6 +254,10 @@ const iconStyle = computed(() => {
 	font-family: 'Font Awesome 6 Brands', serif !important;
 }
 
+.bgl_icon-font.fa-brands::before {
+	content: var(--fa);
+}
+
 /* ── Entrance / loop animations (opt-in via `animate`) ─────────────────────── */
 .bgl_icon--spin,
 .bgl_icon--pulse,

package/src/components/dataTable/DataTable.vue

@@ -208,7 +208,10 @@ const headerFontSize = computed(() => {
 					<tr
 						v-for="{ data: row } in list" :key="row?.id || `row-${Math.random()}`"
 						class="row row-item position-relative"
-						:class="{ selected: row?.id && computedSelectedItems.includes(row.id) }"
+						:class="{
+							selected: row?.id != null
+								&& computedSelectedItems.map(String).includes(String(row.id)),
+						}"
 						@click="(event) => toggleSelectItem(row, event)"
 					>
 						<td v-if="isSortable" class="col-drag">
@@ -295,11 +298,11 @@ min-height: 150px;
 overflow-anchor: none;
 }
 
-.selected {
+.selected > td {
 background: var(--bgl-primary-tint);
 }
 
-tbody tr.selected:hover {
+tbody tr.selected:hover > td {
 background: var(--bgl-primary-light);
 }
 

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

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import type { ToolbarConfig, ToolbarConfigOption, ToolbarOption } from '../richTextTypes'
-import { Btn, Divider, Dropdown } from '../../../../../index'
+import { Btn, ColorInput, Divider, Dropdown } from '../../../../../index'
 import { basicToolbarConfig, toolbarOptions } from '../config'
 import TableGridSelector from './TableGridSelector.vue'
+import { onBeforeUnmount, ref } from 'vue'
 
 const {
 	config = basicToolbarConfig,
@@ -14,7 +15,8 @@ const {
 	hideAlignment = false,
 	hideDirections = false,
 	hideH5H6 = false,
-	hide = []
+	hide = [],
+	documentColors = [],
 } = defineProps<{
 	config?: ToolbarConfig
 	selectedStyles: Set<string>
@@ -26,8 +28,23 @@ const {
 	hideDirections?: boolean
 	hideH5H6?: boolean
 	hide?: string[]
+	documentColors?: string[]
 }>()
 const emit = defineEmits(['action'])
+const fontColor = ref('#000000')
+const backgroundColor = ref('#fff59d')
+const basicColors = [
+	'#000000',
+	'#ffffff',
+	'#6b7280',
+	'#ef4444',
+	'#f97316',
+	'#eab308',
+	'#22c55e',
+	'#3b82f6',
+	'#8b5cf6',
+]
+let colorCloseTimer: ReturnType<typeof setTimeout> | null = null
 
 function getCurrentAlignmentIcon(): string {
 	if (selectedStyles.has('alignLeft')) { return 'format_align_left' }
@@ -58,8 +75,8 @@ function shouldHideAction(actionName: string): boolean {
 		ol: ['orderedList'],
 		splitView: ['splitView'],
 		p: ['p'],
-		align: ['alignMenu', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify'],
-		alignment: ['alignMenu', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify']
+		align: ['alignMenu', 'paragraphToolsMenu', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify'],
+		alignment: ['alignMenu', 'paragraphToolsMenu', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify']
 	}
 
 	for (const [hideKey, actionNames] of Object.entries(alternativeNames)) {
@@ -77,6 +94,7 @@ function shouldHideAction(actionName: string): boolean {
 		embed: hideEmbeds,
 		insertTable: hideTables,
 		alignMenu: hideAlignment,
+		paragraphToolsMenu: hideAlignment,
 		alignLeft: hideAlignment,
 		alignCenter: hideAlignment,
 		alignRight: hideAlignment,
@@ -93,6 +111,41 @@ function shouldHideAction(actionName: string): boolean {
 
 const configToOption = (action: ToolbarConfigOption) => toolbarOptions.find(option => option.name === action) as ToolbarOption
 
+function getActionLabel(action: ToolbarOption): string {
+	const state = selectedStyles.has(action.name) ? 'Active' : 'Inactive'
+	return [action.label || action.name, action.shortcut, state].filter(Boolean).join(' · ')
+}
+
+function getToolbarControls(toolbar: HTMLElement): HTMLElement[] {
+	return Array.from(toolbar.querySelectorAll<HTMLElement>(
+		'button:not(:disabled), [role="button"]:not([aria-disabled="true"]), input:not(:disabled), select:not(:disabled)'
+	)).filter(element => element.offsetParent !== null || element.getClientRects().length > 0)
+}
+
+function handleToolbarKeydown(event: KeyboardEvent) {
+	if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) { return }
+	const toolbar = event.currentTarget as HTMLElement
+	const controls = getToolbarControls(toolbar)
+	if (!controls.length) { return }
+
+	const currentIndex = controls.indexOf(event.target as HTMLElement)
+	if (currentIndex < 0) { return }
+
+	event.preventDefault()
+	const isRtl = getComputedStyle(toolbar).direction === 'rtl'
+	let nextIndex = currentIndex
+	if (event.key === 'Home') {
+		nextIndex = 0
+	} else if (event.key === 'End') {
+		nextIndex = controls.length - 1
+	} else {
+		const visualDirection = event.key === 'ArrowRight' ? 1 : -1
+		const direction = isRtl ? -visualDirection : visualDirection
+		nextIndex = (currentIndex + direction + controls.length) % controls.length
+	}
+	controls[nextIndex]?.focus()
+}
+
 function shouldShowSeparator(currentIndex: number): boolean {
 	const allActions = config.map(configToOption).filter(Boolean)
 
@@ -139,14 +192,122 @@ function handleQuickTableInsert(rows: number, cols: number) {
 function handleOpenAdvanced() {
 	emit('action', 'insertTable')
 }
+
+function scheduleColorMenuClose(closeMenu: () => void) {
+	if (colorCloseTimer) {
+		clearTimeout(colorCloseTimer)
+	}
+	colorCloseTimer = setTimeout(() => {
+		closeMenu()
+		colorCloseTimer = null
+	}, 4000)
+}
+
+function applyColor(command: 'fontColor' | 'bgColor', value: string, closeMenu: () => void) {
+	if (value) {
+		runAction(command, value)
+	}
+	scheduleColorMenuClose(closeMenu)
+}
+
+function applyRecentColor(command: string, value: string, closeMenu: () => void) {
+	if (command !== 'fontColor' && command !== 'bgColor') { return }
+	if (command === 'fontColor') {
+		fontColor.value = value
+	} else {
+		backgroundColor.value = value
+	}
+	applyColor(command, value, closeMenu)
+}
+
+onBeforeUnmount(() => {
+	if (colorCloseTimer) {
+		clearTimeout(colorCloseTimer)
+	}
+})
 </script>
 
 <template>
-	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar" style="position: relative;">
+	<div
+		class="toolbar flex gap-025 pb-05 flex-wrap m_flex-wrap-nowrap overflow-x"
+		role="toolbar"
+		aria-label="Rich text formatting"
+		style="position: relative;"
+		@keydown="handleToolbarKeydown"
+	>
 		<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" />
 
+			<!-- Table editing tools -->
+			<Dropdown
+				v-else-if="action.name === 'tableToolsMenu' && !hideTables"
+				placement="bottom-start"
+				thin
+				flat
+				icon="table_edit"
+				aria-label="Table tools"
+				:disabled="!selectedStyles.has('tableContext')"
+				:class="{ 'opacity-4': !selectedStyles.has('tableContext') }"
+				:title="selectedStyles.has('tableContext') ? 'Table tools' : 'Select a table cell to use table tools'"
+				class="table-tools-menu"
+			>
+				<template #default="{ hide: closeMenu }">
+					<div class="grid min-w-220px p-025">
+						<span class="txt12 semi color-gray px-05 py-025">Table tools</span>
+						<Btn thin flat full-width align-txt="start" icon="table_chart" value="Merge selected cells" @click="runAction('mergeCells'); closeMenu()" />
+						<Btn thin flat full-width align-txt="start" icon="dashboard" value="Split cell" @click="runAction('splitCells'); closeMenu()" />
+						<Divider class="my-025" />
+						<Btn thin flat full-width align-txt="start" icon="add_row_above" value="Insert row above" @click="runAction('addRowBefore'); closeMenu()" />
+						<Btn thin flat full-width align-txt="start" icon="add_row_below" value="Insert row below" @click="runAction('addRowAfter'); closeMenu()" />
+						<Btn thin flat full-width align-txt="start" icon="remove" value="Delete row" @click="runAction('deleteRow'); closeMenu()" />
+						<Divider class="my-025" />
+						<Btn thin flat full-width align-txt="start" icon="add_column_left" value="Insert column left" @click="runAction('insertColumnLeft'); closeMenu()" />
+						<Btn thin flat full-width align-txt="start" icon="add_column_right" value="Insert column right" @click="runAction('insertColumnRight'); closeMenu()" />
+						<Btn thin flat full-width align-txt="start" icon="delete" value="Delete column" @click="runAction('deleteColumn'); closeMenu()" />
+						<Divider class="my-025" />
+						<span class="txt12 semi color-gray px-05 py-025">Column alignment</span>
+						<div class="flex gap-025 px-025 pb-025">
+							<Btn thin flat icon="format_align_left" aria-label="Align table column left" @click="runAction('tableAlignLeft'); closeMenu()" />
+							<Btn thin flat icon="format_align_center" aria-label="Align table column center" @click="runAction('tableAlignCenter'); closeMenu()" />
+							<Btn thin flat icon="format_align_right" aria-label="Align table column right" @click="runAction('tableAlignRight'); closeMenu()" />
+							<Btn thin flat icon="format_align_justify" aria-label="Justify table column" @click="runAction('tableAlignJustify'); closeMenu()" />
+						</div>
+						<Divider class="my-025" />
+						<Btn thin flat full-width align-txt="start" color="red" icon="delete_sweep" value="Delete table" @click="runAction('deleteTable'); closeMenu()" />
+					</div>
+				</template>
+			</Dropdown>
+
+			<!-- Paragraph alignment and direction -->
+			<Dropdown
+				v-else-if="action.name === 'paragraphToolsMenu' && !shouldHideAction('paragraphToolsMenu')"
+				placement="bottom-start"
+				thin
+				flat
+				:icon="getCurrentAlignmentIcon()"
+				:class="{ 'alignment-active': isAlignmentActive() }"
+				aria-label="Paragraph tools"
+			>
+				<template #default="{ hide: closeMenu }">
+					<div class="grid min-w-220px p-025">
+						<span class="txt12 semi color-gray px-05 py-025">Paragraph alignment</span>
+						<div class="flex gap-025 px-025 pb-025">
+							<Btn thin flat icon="format_align_left" aria-label="Align paragraph left" :class="{ active: selectedStyles.has('alignLeft') }" @click="runAction('alignLeft'); closeMenu()" />
+							<Btn thin flat icon="format_align_center" aria-label="Align paragraph center" :class="{ active: selectedStyles.has('alignCenter') }" @click="runAction('alignCenter'); closeMenu()" />
+							<Btn thin flat icon="format_align_right" aria-label="Align paragraph right" :class="{ active: selectedStyles.has('alignRight') }" @click="runAction('alignRight'); closeMenu()" />
+							<Btn thin flat icon="format_align_justify" aria-label="Justify paragraph" :class="{ active: selectedStyles.has('alignJustify') }" @click="runAction('alignJustify'); closeMenu()" />
+						</div>
+						<Divider class="my-025" />
+						<span class="txt12 semi color-gray px-05 py-025">Writing direction</span>
+						<div class="flex gap-025 px-025 pb-025">
+							<Btn thin flat icon="format_textdirection_l_to_r" value="LTR" aria-label="Left to right" :class="{ active: selectedStyles.has('ltrDirection') }" @click="runAction('ltrDirection'); closeMenu()" />
+							<Btn thin flat icon="format_textdirection_r_to_l" value="RTL" aria-label="Right to left" :class="{ active: selectedStyles.has('rtlDirection') }" @click="runAction('rtlDirection'); closeMenu()" />
+						</div>
+					</div>
+				</template>
+			</Dropdown>
+
 			<!-- Alignment Menu -->
 			<Dropdown
 				v-else-if="action.name === 'alignMenu' && !shouldHideAction('alignMenu')" placement="bottom-start" thin flat :icon="getCurrentAlignmentIcon()"
@@ -169,20 +330,83 @@ function handleOpenAdvanced() {
 				:class="[action.class, { active: selectedStyles.has('textDirection') }]" tabindex="-1" @click="runAction(action.name)"
 			/>
 
+			<!-- Text / background colors -->
+			<Dropdown
+				v-else-if="(action.name === 'fontColor' || action.name === 'bgColor') && !shouldHideAction(action.name)"
+				placement="bottom-start"
+				thin
+				flat
+				:icon="action.icon"
+			>
+				<template #default="{ hide: closeMenu }">
+					<div class="px-05 min-w-220px" @pointerdown="scheduleColorMenuClose(closeMenu)" @keydown="scheduleColorMenuClose(closeMenu)">
+						<ColorInput
+							v-if="action.name === 'fontColor'"
+							v-model="fontColor"
+							label="Text color"
+							@update:model-value="applyColor('fontColor', $event, closeMenu)"
+						/>
+						<ColorInput
+							v-else
+							v-model="backgroundColor"
+							label="Background color"
+							@update:model-value="applyColor('bgColor', $event, closeMenu)"
+						/>
+						<Divider label="Basic colors" class="py-025" />
+						<div class="flex flex-wrap gap-025">
+							<Btn
+								v-for="color in basicColors"
+								:key="color"
+								round
+								flat
+								thin
+								class="square-24 border"
+								:style="{ backgroundColor: color }"
+								:aria-label="`Use ${color}`"
+								:title="color"
+								@click="applyRecentColor(action.name, color, closeMenu)"
+							/>
+						</div>
+						<template v-if="documentColors.length">
+							<Divider label="Colors in document" class="py-025" />
+							<div class="flex flex-wrap gap-025">
+								<Btn
+									v-for="color in documentColors"
+									:key="color"
+									round
+									flat
+									thin
+									class="square-24 border"
+									:style="{ backgroundColor: color }"
+									:aria-label="`Use ${color}`"
+									:title="color"
+									@click="applyRecentColor(action.name, color, closeMenu)"
+								/>
+							</div>
+						</template>
+					</div>
+				</template>
+			</Dropdown>
+
 			<!-- All other buttons -->
 			<Btn
 				v-else-if="action.name !== 'separator'
 					&& action.name !== 'insertTable'
+					&& action.name !== 'tableToolsMenu'
+					&& action.name !== 'paragraphToolsMenu'
 					&& action.name !== 'alignMenu'
 					&& action.name !== 'textDirection'
+					&& action.name !== 'fontColor'
+					&& action.name !== 'bgColor'
 					&& !shouldHideAction(action.name)"
-				v-tooltip="action.label"
 				:icon="action.icon"
 				thin
 				flat
-				:aria-label="action.name"
+				:aria-label="getActionLabel(action)"
 				:class="[action.class, { active: selectedStyles.has(action.name) }]"
-				tabindex="-1"
+				:aria-pressed="selectedStyles.has(action.name)"
+				:title="getActionLabel(action)"
+				v-tooltip="getActionLabel(action)"
 				@click="runAction(action.name)"
 			/>
 
@@ -194,6 +418,12 @@ function handleOpenAdvanced() {
 </template>
 
 <style scoped>
+.toolbar {
+	scrollbar-width: thin;
+}
+.toolbar > * {
+	flex-shrink: 0;
+}
 .toolbar :deep(.active) {
 	background: var(--bgl-primary);
 	color: white !important;

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

@@ -18,6 +18,10 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			}
 
 			debug?.logCommand(command, value)
+			const activeSelection = state.doc.getSelection()
+			const preFocusRange = activeSelection?.rangeCount
+				? activeSelection.getRangeAt(0).cloneRange()
+				: state.range?.cloneRange()
 
 			if (['splitView', 'codeView', 'fullScreen'].includes(command)) {
 				switch (command) {
@@ -33,16 +37,30 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 				}
 			}
 
-			try {
-				state.doc.body.focus({ preventScroll: true })
-			} catch {
-				// Ignore focus errors
+			const selectionIsInsideEditor = Boolean(activeSelection?.anchorNode
+				&& state.doc.body.contains(activeSelection.anchorNode))
+			if (!selectionIsInsideEditor) {
+				try {
+					state.doc.body.focus({ preventScroll: true })
+				} catch {
+					// Ignore focus errors
+				}
 			}
 
 			// Restore selection if focusing the body cleared or collapsed the user's active selection
 			const selection = state.doc.getSelection()
 			if (selection) {
-				if (selection.rangeCount > 0) {
+				if (preFocusRange) {
+					try {
+						selection.removeAllRanges()
+						selection.addRange(preFocusRange)
+						state.selection = selection
+						state.range = preFocusRange.cloneRange()
+						state.rangeCount = selection.rangeCount
+					} catch {
+						// Ignore invalid ranges after external DOM changes
+					}
+				} else if (selection.rangeCount > 0) {
 					const currentRange = selection.getRangeAt(0)
 					if (currentRange.collapsed && state.range && !state.range.collapsed) {
 						try {

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

@@ -43,6 +43,34 @@ export function useEditorKeyboard(doc: Document, executor: CommandExecutor): ()
 		const range = selection?.rangeCount ? selection.getRangeAt(0) : null
 		const activeCell = range ? resolveCellFromNode(range.startContainer) : null
 
+		const startElement = range?.startContainer.nodeType === Node.TEXT_NODE
+			? range.startContainer.parentElement
+			: range?.startContainer as Element | undefined
+		const activeListItem = (startElement?.matches?.('li')
+			? startElement
+			: startElement?.closest('li')) as HTMLLIElement | null
+
+		if (e.key === 'Tab' && activeListItem && !activeCell) {
+			e.preventDefault()
+			executor.execute(e.shiftKey ? 'outdent' : 'indent')
+			return
+		}
+
+		const parentList = activeListItem?.parentElement
+		const isNestedListItem = Boolean(parentList && ['UL', 'OL'].includes(parentList.tagName)
+			&& parentList.closest('li'))
+		if (e.key === 'Enter' && activeListItem && !activeCell
+			&& !activeListItem.textContent?.trim()
+			&& isNestedListItem) {
+			e.preventDefault()
+			const itemRange = doc.createRange()
+			itemRange.selectNodeContents(activeListItem)
+			selection?.removeAllRanges()
+			selection?.addRange(itemRange)
+			executor.execute('outdent')
+			return
+		}
+
 		// Table Tab / Shift+Tab navigation
 		if (e.key === 'Tab' && activeCell) {
 			const table = activeCell.closest('table') as HTMLTableElement | null