@bagelink/vue 1.19.1 → 1.19.3

package/package.json

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

package/src/components/Dropdown.vue

@@ -347,6 +347,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())
 
@@ -425,10 +431,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,6 +465,7 @@ function removeOpenListeners() {
 	if (!openListenersActive) return
 	document.removeEventListener('pointerdown', onDocumentPointerDown, true)
 	document.removeEventListener('scroll', onScroll, true)
+	removeEmbeddedDocumentListeners()
 	openListenersActive = false
 }
 

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

@@ -250,6 +250,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

package/src/components/form/inputs/RichText/config.ts

@@ -33,9 +33,7 @@ export const basicToolbarConfig: ToolbarConfig = [
 	'italic',
 	'underline',
 	'separator',
-	'alignMenu',
-	'ltrDirection',
-	'rtlDirection',
+	'paragraphToolsMenu',
 	'separator',
 	'insertTable',
 	'separator',
@@ -67,6 +65,8 @@ export const fullToolbarConfig: ToolbarConfig = [
 	'fontColor',
 	'bgColor',
 	'separator',
+	'paragraphToolsMenu',
+	'separator',
 	'p',
 	'blockquote',
 	'orderedList',
@@ -81,8 +81,9 @@ export const fullToolbarConfig: ToolbarConfig = [
 	'separator',
 	'splitView',
 	'clear',
+	'separator',
 	'insertTable',
-	...tableTools,
+	'tableToolsMenu',
 	'separator',
 	'undo',
 	'redo',
@@ -93,6 +94,8 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'headingsMenu', label: 'Headings', icon: 'title' },
 	{ name: 'mediaMenu', label: 'Media', icon: 'perm_media' },
 	{ name: 'alignMenu', label: 'Alignment', icon: 'format_align_left' },
+	{ name: 'paragraphToolsMenu', label: 'Paragraph tools', icon: 'format_align_right' },
+	{ name: 'tableToolsMenu', label: 'Table tools', icon: 'table_edit' },
 	{ name: 'h1', label: 'Heading 1', icon: 'format_h1' },
 	{ name: 'h2', label: 'Heading 2', icon: 'format_h2' },
 	{ name: 'h3', label: 'Heading 3', icon: 'format_h3' },
@@ -101,12 +104,12 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'h6', label: 'Heading 6', icon: 'format_h6' },
 	{ name: 'p', label: 'Paragraph', icon: 'format_paragraph' },
 	{ name: 'blockquote', label: 'Blockquote', icon: 'format_quote' },
-	{ name: 'bold', label: 'Bold', icon: 'format_bold' },
-	{ name: 'italic', label: 'Italic', icon: 'format_italic' },
-	{ name: 'underline', label: 'Underline', icon: 'format_underlined' },
-	{ name: 'orderedList', label: 'Ordered List', icon: 'format_list_numbered' },
-	{ name: 'unorderedList', label: 'Unordered List', icon: 'format_list_bulleted' },
-	{ name: 'link', label: 'Link', icon: 'add_link' },
+	{ name: 'bold', label: 'Bold', icon: 'format_bold', shortcut: '⌘/Ctrl+B' },
+	{ name: 'italic', label: 'Italic', icon: 'format_italic', shortcut: '⌘/Ctrl+I' },
+	{ name: 'underline', label: 'Underline', icon: 'format_underlined', shortcut: '⌘/Ctrl+U' },
+	{ name: 'orderedList', label: 'Ordered List', icon: 'format_list_numbered', shortcut: '⌘/Ctrl+Shift+.' },
+	{ name: 'unorderedList', label: 'Unordered List', icon: 'format_list_bulleted', shortcut: '⌘/Ctrl+Shift+/' },
+	{ name: 'link', label: 'Link', icon: 'add_link', shortcut: '⌘/Ctrl+K' },
 	{ name: 'image', label: 'Image', icon: 'add_photo_alternate' },
 	{ name: 'video', label: 'Video', icon: 'play_circle' },
 	{ name: 'embed', label: 'Embed', icon: 'media_link' },
@@ -120,8 +123,8 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'tableAlignCenter', label: 'Table Align Center', icon: 'format_align_center' },
 	{ name: 'tableAlignRight', label: 'Table Align Right', icon: 'format_align_right' },
 	{ name: 'tableAlignJustify', label: 'Table Align Justify', icon: 'format_align_justify' },
-	{ name: 'indent', label: 'Indent', icon: 'format_indent_increase' },
-	{ name: 'outdent', label: 'Outdent', icon: 'format_indent_decrease' },
+	{ name: 'indent', label: 'Indent', icon: 'format_indent_increase', shortcut: 'Tab' },
+	{ name: 'outdent', label: 'Outdent', icon: 'format_indent_decrease', shortcut: 'Shift+Tab' },
 	{ name: 'fontColor', label: 'Font Color', icon: 'format_color_text' },
 	{ name: 'bgColor', label: 'Background Color', icon: 'format_color_fill' },
 	{ name: 'insertTable', label: 'Insert Table', icon: 'table' },
@@ -135,8 +138,8 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'insertColumnRight', label: 'Insert Column Right', icon: 'format_indent_increase' },
 	{ name: 'deleteColumn', label: 'Delete Column', icon: 'view_week' },
 	{ name: 'separator' },
-	{ name: 'undo', label: 'Undo', icon: 'undo' },
-	{ name: 'redo', label: 'Redo', icon: 'redo' },
+	{ name: 'undo', label: 'Undo', icon: 'undo', shortcut: '⌘/Ctrl+Z' },
+	{ name: 'redo', label: 'Redo', icon: 'redo', shortcut: '⌘/Ctrl+Shift+Z' },
 	{ name: 'separator' },
 	{ name: 'fullScreen', label: 'Full Screen', icon: 'fullscreen', class: 'ms-auto' },
 	{ name: 'textDirection', label: 'Text Direction (RTL/LTR)', icon: 'format_textdirection_r_to_l' },