@bagelink/vue 1.4.159 → 1.4.163

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

@@ -39,6 +39,8 @@ const props = defineProps<{
 	hide?: string[]
 	// Control autofocus behavior
 	autofocus?: boolean
+	// Text color
+	textColor?: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -414,8 +416,8 @@ function showInlineToolbarForSelection() {
 		const rangeClone = range.cloneRange()
 		inlineToolbarSelection.value = selection
 
-			// Store the cloned range for later use
-			; (inlineToolbarSelection.value as any)._storedRange = rangeClone
+		// Store the cloned range for later use
+		; (inlineToolbarSelection.value as any)._storedRange = rangeClone
 
 		showInlineToolbar.value = true
 	}
@@ -1480,7 +1482,7 @@ function createNewTable(doc: Document) {
 		console.log('Trying to add edit button to new table...')
 		if (doc && (doc as any).__addEditButtonsToTables) {
 			console.log('Calling __addEditButtonsToTables...')
-				; (doc as any).__addEditButtonsToTables()
+			; (doc as any).__addEditButtonsToTables()
 		} else {
 			console.log('__addEditButtonsToTables not found, calling setupTableEditButtons...')
 			setupTableEditButtons(doc)
@@ -1582,13 +1584,13 @@ function deleteEmbed() {
 
 // Expose openLinkModal to editor state
 ; (editor.state as any).openLinkModal = openLinkModal
-	; (editor.state as any).showTooltipMessage = showTooltipMessage
+; (editor.state as any).showTooltipMessage = showTooltipMessage
 
-	// Expose openTableEditor to editor state
-	; (editor.state as any).openTableEditor = openTableEditor
-	; (editor.state as any).openImageModal = openImageModal
-	; (editor.state as any).openEmbedModal = openEmbedModal
-	; (editor.state as any).openVideoModal = openVideoModal
+// Expose openTableEditor to editor state
+; (editor.state as any).openTableEditor = openTableEditor
+; (editor.state as any).openImageModal = openImageModal
+; (editor.state as any).openEmbedModal = openEmbedModal
+; (editor.state as any).openVideoModal = openVideoModal
 
 // Table manipulation functions
 function mergeCellRight() {
@@ -1916,6 +1918,12 @@ function handleTableContextMenu(event: MouseEvent) {
 	}
 }
 
+// Close context menu when clicking outside
+function closeTableContextMenu() {
+	showTableContextMenu.value = false
+	contextMenuCell.value = null
+}
+
 // Handle clicks outside context menu
 // function handleDocumentClick(event: MouseEvent) {
 // 	if (showTableContextMenu.value) {
@@ -2515,7 +2523,7 @@ async function initEditor() {
 				min-height: 200px;
 				font-family: sans-serif !important;
 				line-height: 1.5;
-				color: inherit;
+				color: ${props.textColor || 'inherit'};
 				background: transparent;
 				max-width: 1060px;
 				margin: 0 auto;
@@ -2902,28 +2910,38 @@ defineExpose({
 	<div class="bagel-input" v-bind="attrs">
 		<label v-if="label">{{ label }}</label>
 
-		<div class="rounded" :class="[
-			{
-				'rich-text-editor pt-05 px-05 pb-075': !basic,
-				'rich-text-editor--basic': basic,
-				'fullscreen-mode': editor.state.isFullscreen,
-			},
-		]">
-			<EditorToolbar v-if="editor.state.hasInit && shouldShowToolbar" :config="effectiveToolbarConfig"
+		<div
+			class="rounded" :class="[
+				{
+					'rich-text-editor pt-05 px-05 pb-075': !basic,
+					'rich-text-editor--basic': basic,
+					'fullscreen-mode': editor.state.isFullscreen,
+				},
+			]"
+		>
+			<EditorToolbar
+				v-if="editor.state.hasInit && shouldShowToolbar" :config="effectiveToolbarConfig"
 				:selectedStyles="editor.state.selectedStyles" :hide-images="hideImages" :hide-videos="hideVideos"
 				:hide-embeds="hideEmbed" :hide-tables="hideTables" :hide-alignment="hideAlignment"
 				:hide-directions="hideDirections" :hide-h5-h6="hideH5H6" :hide="effectiveHideArray"
-				@action="commands.execute" />
+				@action="commands.execute"
+			/>
 			<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
-				<div class="content-area radius-1"
-					:style="{ height: editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight }">
-					<iframe id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" srcdoc=""
+				<div
+					class="content-area radius-1"
+					:style="{ height: editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight }"
+				>
+					<iframe
+						id="rich-text-iframe" ref="iframe" class="editableContent" title="Editor" srcdoc=""
 						sandbox="allow-same-origin allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-scripts allow-top-navigation allow-top-navigation-by-user-activation"
-						@load="initEditor" @contextmenu="handleTableContextMenu" />
+						@load="initEditor" @contextmenu="handleTableContextMenu"
+					/>
 				</div>
-				<CodeEditor v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
+				<CodeEditor
+					v-if="editor.state.isSplitView" v-model="editor.state.content" language="html"
 					:height="editor.state.isFullscreen ? 'calc(100vh - 4rem)' : editorHeight"
-					@update:modelValue="editor.updateState.content('html')" />
+					@update:modelValue="editor.updateState.content('html')"
+				/>
 			</div>
 			<div v-if="debug" class="flex pt-05">
 				<p class="txt12 txt-gray mb-0 p-0">
@@ -2938,39 +2956,51 @@ defineExpose({
 				<Btn thin color="gray" icon="download" @click="debugMethods?.downloadSession">
 					Download Log
 				</Btn>
-				<Btn thin color="gray" icon="content_copy"
-					@click="copyText(debugMethods?.exportDebugWithPrompt() || '')">
+				<Btn
+					thin color="gray" icon="content_copy"
+					@click="copyText(debugMethods?.exportDebugWithPrompt() || '')"
+				>
 					Copy Log
 				</Btn>
 			</div>
 		</div>
 
 		<!-- Inline Toolbar -->
-		<div v-if="showInlineToolbar" class="inline-toolbar" :style="{
-			position: 'fixed',
-			top: `${inlineToolbarPosition.top}px`,
-			left: `${inlineToolbarPosition.left}px`,
-			zIndex: 99,
-		}">
+		<div
+			v-if="showInlineToolbar" class="inline-toolbar" :style="{
+				position: 'fixed',
+				top: `${inlineToolbarPosition.top}px`,
+				left: `${inlineToolbarPosition.left}px`,
+				zIndex: 99,
+			}"
+		>
 			<div class="inline-toolbar-content">
-				<Btn thin flat icon="format_bold" :class="{ active: editor.state.selectedStyles.has('bold') }"
-					@click="runInlineAction('bold')" />
-				<Btn thin flat icon="format_italic" :class="{ active: editor.state.selectedStyles.has('italic') }"
-					@click="runInlineAction('italic')" />
-				<Btn thin flat icon="format_underlined"
+				<Btn
+					thin flat icon="format_bold" :class="{ active: editor.state.selectedStyles.has('bold') }"
+					@click="runInlineAction('bold')"
+				/>
+				<Btn
+					thin flat icon="format_italic" :class="{ active: editor.state.selectedStyles.has('italic') }"
+					@click="runInlineAction('italic')"
+				/>
+				<Btn
+					thin flat icon="format_underlined"
 					:class="{ active: editor.state.selectedStyles.has('underline') }"
-					@click="runInlineAction('underline')" />
+					@click="runInlineAction('underline')"
+				/>
 				<span class="separator">|</span>
 				<Btn thin flat icon="add_link" @click="runInlineAction('link')" />
 			</div>
 		</div>
 		<!-- Table Context Menu -->
-		<div v-if="showTableContextMenu" class="table-context-menu" :style="{
-			position: 'fixed',
-			top: `${contextMenuPosition.y}px`,
-			left: `${contextMenuPosition.x}px`,
-			zIndex: 1001,
-		}">
+		<div
+			v-if="showTableContextMenu" class="table-context-menu" :style="{
+				position: 'fixed',
+				top: `${contextMenuPosition.y}px`,
+				left: `${contextMenuPosition.x}px`,
+				zIndex: 1001,
+			}"
+		>
 			<div class="context-menu-content" @click.stop>
 				<div class="menu-header">
 					<span>Table Actions</span>
@@ -2979,42 +3009,60 @@ defineExpose({
 					</button>
 				</div>
 				<div class="px-025">
-					<Btn v-if="canMergeRight" full-width align-txt="start" thin flat icon="start"
-						class="context-menu-btn" @click="mergeCellRight(); showTableContextMenu = false">
+					<Btn
+						v-if="canMergeRight" full-width align-txt="start" thin flat icon="start"
+						class="context-menu-btn" @click="mergeCellRight(); showTableContextMenu = false"
+					>
 						Merge Right
 					</Btn>
-					<Btn v-if="canMergeDown" full-width align-txt="start" thin flat icon="text_select_move_down"
-						class="context-menu-btn" @click="mergeCellDown(); showTableContextMenu = false">
+					<Btn
+						v-if="canMergeDown" full-width align-txt="start" thin flat icon="text_select_move_down"
+						class="context-menu-btn" @click="mergeCellDown(); showTableContextMenu = false"
+					>
 						Merge Down
 					</Btn>
-					<Btn v-if="canSplit" full-width align-txt="start" thin flat icon="call_split"
-						class="context-menu-btn" @click="splitCell(); showTableContextMenu = false">
+					<Btn
+						v-if="canSplit" full-width align-txt="start" thin flat icon="call_split"
+						class="context-menu-btn" @click="splitCell(); showTableContextMenu = false"
+					>
 						Split Cell
 					</Btn>
 					<div v-if="canMergeRight || canMergeDown || canSplit" class="context-menu-separator" />
-					<Btn full-width align-txt="start" thin flat icon="add_row_above" class="context-menu-btn"
-						@click="insertRowAbove(); showTableContextMenu = false">
+					<Btn
+						full-width align-txt="start" thin flat icon="add_row_above" class="context-menu-btn"
+						@click="insertRowAbove(); showTableContextMenu = false"
+					>
 						Insert Row Above
 					</Btn>
-					<Btn full-width align-txt="start" thin flat icon="add_row_below" class="context-menu-btn"
-						@click="insertRowBelow(); showTableContextMenu = false">
+					<Btn
+						full-width align-txt="start" thin flat icon="add_row_below" class="context-menu-btn"
+						@click="insertRowBelow(); showTableContextMenu = false"
+					>
 						Insert Row Below
 					</Btn>
-					<Btn full-width align-txt="start" thin flat icon="remove" class="context-menu-btn"
-						@click="deleteRow(); showTableContextMenu = false">
+					<Btn
+						full-width align-txt="start" thin flat icon="remove" class="context-menu-btn"
+						@click="deleteRow(); showTableContextMenu = false"
+					>
 						Delete Row
 					</Btn>
 					<div class="context-menu-separator" />
-					<Btn full-width align-txt="start" thin flat icon="add_column_left" class="context-menu-btn"
-						@click="insertColumnLeft(); showTableContextMenu = false">
+					<Btn
+						full-width align-txt="start" thin flat icon="add_column_left" class="context-menu-btn"
+						@click="insertColumnLeft(); showTableContextMenu = false"
+					>
 						Insert Column Left
 					</Btn>
-					<Btn full-width align-txt="start" thin flat icon="add_column_right" class="context-menu-btn"
-						@click="insertColumnRight(); showTableContextMenu = false">
+					<Btn
+						full-width align-txt="start" thin flat icon="add_column_right" class="context-menu-btn"
+						@click="insertColumnRight(); showTableContextMenu = false"
+					>
 						Insert Column Right
 					</Btn>
-					<Btn full-width align-txt="start" thin flat icon="remove" class="context-menu-btn"
-						@click="deleteColumn(); showTableContextMenu = false">
+					<Btn
+						full-width align-txt="start" thin flat icon="remove" class="context-menu-btn"
+						@click="deleteColumn(); showTableContextMenu = false"
+					>
 						Delete Column
 					</Btn>
 				</div>
@@ -3024,10 +3072,14 @@ defineExpose({
 	<!-- Link Modal -->
 	<Modal v-model:visible="showLinkModal" title="Add Link" width="400">
 		<div class="flex gap-05 align-items-end">
-			<TextInput v-model="linkForm.url" label="URL" type="url" placeholder="https://example.com"
-				@keydown.enter="submitLink" />
-			<Btn icon="open_in_new" class="mb-05 radius-1" flat :disabled="!isValidUrl(linkForm.url)"
-				@click="visitLink" />
+			<TextInput
+				v-model="linkForm.url" label="URL" type="url" placeholder="https://example.com"
+				@keydown.enter="submitLink"
+			/>
+			<Btn
+				icon="open_in_new" class="mb-05 radius-1" flat :disabled="!isValidUrl(linkForm.url)"
+				@click="visitLink"
+			/>
 		</div>
 		<CheckInput v-model="linkForm.openInNewTab" label="Open in new tab" type="checkbox" class="mb-2 mt-05" />
 		<template #footer>
@@ -3042,36 +3094,54 @@ defineExpose({
 	</div>
 
 	<!-- Image Modal -->
-	<Modal v-model:visible="showImageModal" :title="pendingImageData?.existingImage ? 'Edit Image' : 'Insert Image'"
-		width="500">
-		<TextInput v-model="imageForm.src" label="Image URL" type="url" placeholder="https://example.com/image.jpg"
-			@keydown.enter="submitImage" />
+	<Modal
+		v-model:visible="showImageModal" :title="pendingImageData?.existingImage ? 'Edit Image' : 'Insert Image'"
+		width="500"
+	>
+		<TextInput
+			v-model="imageForm.src" label="Image URL" type="url" placeholder="https://example.com/image.jpg"
+			@keydown.enter="submitImage"
+		/>
 		<TextInput v-model="imageForm.alt" label="Alt Text" placeholder="Describe the image" />
 		<div class="flex gap-1">
-			<TextInput v-model="imageForm.width" label="Width" placeholder="100% or 500px or auto"
-				help="Examples: 100%, 500px, auto" />
-			<TextInput v-model="imageForm.height" label="Height" placeholder="auto or 300px"
-				help="Examples: auto, 300px" />
+			<TextInput
+				v-model="imageForm.width" label="Width" placeholder="100% or 500px or auto"
+				help="Examples: 100%, 500px, auto"
+			/>
+			<TextInput
+				v-model="imageForm.height" label="Height" placeholder="auto or 300px"
+				help="Examples: auto, 300px"
+			/>
 		</div>
 		<TextInput v-model="imageForm.credit" label="Photo Credit" placeholder="Photographer name (optional)" />
-		<CheckInput v-model="imageForm.figcaption" label="Show alt text as caption"
-			help="Photo credit will always be shown if provided" />
+		<CheckInput
+			v-model="imageForm.figcaption" label="Show alt text as caption"
+			help="Photo credit will always be shown if provided"
+		/>
 		<template #footer>
 			<div class="flex gap-05 w-100 ">
 				<Btn value="Cancel" flat thin @click="showImageModal = false" />
-				<Btn v-if="pendingImageData?.existingImage" value="Delete Image" color="red" flat thin icon="delete"
-					@click="deleteImage" />
-				<Btn class="ms-auto" :value="pendingImageData?.existingImage ? 'Save Changes' : 'Insert Image'"
-					:disabled="!imageForm.src" @click="submitImage" />
+				<Btn
+					v-if="pendingImageData?.existingImage" value="Delete Image" color="red" flat thin icon="delete"
+					@click="deleteImage"
+				/>
+				<Btn
+					class="ms-auto" :value="pendingImageData?.existingImage ? 'Save Changes' : 'Insert Image'"
+					:disabled="!imageForm.src" @click="submitImage"
+				/>
 			</div>
 		</template>
 	</Modal>
 
 	<!-- Embed Modal -->
-	<Modal v-model:visible="showEmbedModal" :title="pendingEmbedData?.existingEmbed ? 'Edit Embed' : 'Insert Embed'"
-		width="500">
-		<TextInput v-model="embedForm.src" label="Embed URL or Code" type="url"
-			placeholder="https://www.youtube.com/embed/... or paste iframe code" @keydown.enter="submitEmbed" />
+	<Modal
+		v-model:visible="showEmbedModal" :title="pendingEmbedData?.existingEmbed ? 'Edit Embed' : 'Insert Embed'"
+		width="500"
+	>
+		<TextInput
+			v-model="embedForm.src" label="Embed URL or Code" type="url"
+			placeholder="https://www.youtube.com/embed/... or paste iframe code" @keydown.enter="submitEmbed"
+		/>
 		<div class="flex gap-1">
 			<TextInput v-model="embedForm.width" label="Width" placeholder="560" />
 			<TextInput v-model="embedForm.height" label="Height" placeholder="315" />
@@ -3080,19 +3150,25 @@ defineExpose({
 		<template #footer>
 			<div class="flex gap-05 w-100">
 				<Btn value="Cancel" flat thin @click="showEmbedModal = false" />
-				<Btn v-if="pendingEmbedData?.existingEmbed" value="Delete Embed" color="red" flat thin icon="delete"
-					@click="deleteEmbed" />
-				<Btn :value="pendingEmbedData?.existingEmbed ? 'Save Changes' : 'Insert Embed'"
-					:disabled="!embedForm.src" class="ms-auto" @click="submitEmbed" />
+				<Btn
+					v-if="pendingEmbedData?.existingEmbed" value="Delete Embed" color="red" flat thin icon="delete"
+					@click="deleteEmbed"
+				/>
+				<Btn
+					:value="pendingEmbedData?.existingEmbed ? 'Save Changes' : 'Insert Embed'"
+					:disabled="!embedForm.src" class="ms-auto" @click="submitEmbed"
+				/>
 			</div>
 		</template>
 	</Modal>
 	<!-- Video Modal -->
 	<Modal v-model:visible="showVideoModal" title="Insert Video" width="500">
 		<div class="grid gap-0">
-			<TextInput v-model="videoForm.src" label="Video URL or Embed Code" type="url"
+			<TextInput
+				v-model="videoForm.src" label="Video URL or Embed Code" type="url"
 				placeholder="Paste YouTube URL, video file URL, or iframe embed code..."
-				:class="{ error: videoForm.src && !isValidVideoUrl(videoForm.src) }" @keydown.enter="submitVideo" />
+				:class="{ error: videoForm.src && !isValidVideoUrl(videoForm.src) }" @keydown.enter="submitVideo"
+			/>
 
 			<div v-if="videoForm.src && !isValidVideoUrl(videoForm.src)" class="flex gap-025 opacity-5 -mt-05">
 				<Icon name="warning" />
@@ -3101,17 +3177,21 @@ defineExpose({
 				</p>
 			</div>
 
-			<TextInput v-model="videoForm.width" label="Width" placeholder="100% or 500px or 50vw"
-				help="Examples: 100%, 500px, 50vw, 300" />
-
-			<SelectInput v-model="videoForm.aspectRatio" label="Aspect Ratio" :options="[
-				{ value: '16:9', label: '16:9 (Standard)' },
-				{ value: '4:3', label: '4:3 (Classic)' },
-				{ value: '9:16', label: '9:16 (Vertical/Shorts)' },
-				{ value: '21:9', label: '21:9 (Cinematic)' },
-				{ value: '1:1', label: '1:1 (Square)' },
-				{ value: 'custom', label: 'Custom' },
-			]" />
+			<TextInput
+				v-model="videoForm.width" label="Width" placeholder="100% or 500px or 50vw"
+				help="Examples: 100%, 500px, 50vw, 300"
+			/>
+
+			<SelectInput
+				v-model="videoForm.aspectRatio" label="Aspect Ratio" :options="[
+					{ value: '16:9', label: '16:9 (Standard)' },
+					{ value: '4:3', label: '4:3 (Classic)' },
+					{ value: '9:16', label: '9:16 (Vertical/Shorts)' },
+					{ value: '21:9', label: '21:9 (Cinematic)' },
+					{ value: '1:1', label: '1:1 (Square)' },
+					{ value: 'custom', label: 'Custom' },
+				]"
+			/>
 
 			<div v-if="videoForm.aspectRatio === 'custom'" class="grid grid-wrap-2 gap-05">
 				<TextInput v-model="videoForm.customWidth" label="Width ratio" placeholder="16" type="number" />
@@ -3124,8 +3204,10 @@ defineExpose({
 				<CheckInput v-model="videoForm.mute" label="Mute" />
 				<CheckInput v-model="videoForm.loop" label="Loop" />
 				<CheckInput v-model="videoForm.showCaption" class="grid-span-2" label="Show caption below video" />
-				<TextInput v-if="videoForm.showCaption" v-model="videoForm.caption" label="Caption" class="grid-span-2"
-					placeholder="Describe the video content" />
+				<TextInput
+					v-if="videoForm.showCaption" v-model="videoForm.caption" label="Caption" class="grid-span-2"
+					placeholder="Describe the video content"
+				/>
 			</div>
 
 			<!-- Video Preview -->
@@ -3134,27 +3216,35 @@ defineExpose({
 					Preview:
 				</p>
 				<div class="overflow-hidden flex justify-content-center">
-					<BglVideo :src="videoForm.src" class=""
+					<BglVideo
+						:src="videoForm.src" class=""
 						:aspect-ratio="videoForm.aspectRatio === 'custom' && videoForm.customWidth && videoForm.customHeight ? `${videoForm.customWidth}:${videoForm.customHeight}` : videoForm.aspectRatio"
 						:autoplay="false" :mute="videoForm.mute" :controls="videoForm.controls"
-						:loop="videoForm.loop" />
+						:loop="videoForm.loop"
+					/>
 				</div>
 			</Card>
 		</div>
 		<template #footer>
 			<div class="flex gap-05 w-100 ">
 				<Btn value="Cancel" flat thin @click="showVideoModal = false" />
-				<Btn v-if="pendingVideoData?.existingVideo" value="Delete Video" color="red" flat thin icon="delete"
-					@click="deleteVideo" />
-				<Btn value="Insert Video" class="ms-auto" :disabled="!videoForm.src || !isValidVideoUrl(videoForm.src)"
-					@click="submitVideo" />
+				<Btn
+					v-if="pendingVideoData?.existingVideo" value="Delete Video" color="red" flat thin icon="delete"
+					@click="deleteVideo"
+				/>
+				<Btn
+					value="Insert Video" class="ms-auto" :disabled="!videoForm.src || !isValidVideoUrl(videoForm.src)"
+					@click="submitVideo"
+				/>
 			</div>
 		</template>
 	</Modal>
 
 	<!-- Table Editor Modal -->
-	<Modal v-model:visible="showTableEditor" :title="pendingTableData?.existingTable ? 'Edit Table' : 'Insert Table'"
-		width="700">
+	<Modal
+		v-model:visible="showTableEditor" :title="pendingTableData?.existingTable ? 'Edit Table' : 'Insert Table'"
+		width="700"
+	>
 		<template #default>
 			<div class="grid grid-wrap-4 m_grid-wrap-2 gap-col-1 table-editor testMe1">
 				<!-- Structure Section -->
@@ -3170,26 +3260,40 @@ defineExpose({
 				<!-- Cell Text Alignment -->
 				<div class="grid-span-1">
 					<label class="label">Cell Text Alignment</label>
-					<div class="flex gap-025 mt-025 radius-1 p-05 w-fit"
-						style="height: var(--input-height); background: var(--input-bg);">
-						<Btn :class="{ activeBtn: tableForm.alignment === 'left' }" flat thin icon="format_align_left"
-							title="Align Left" @click="tableForm.alignment = 'left'" />
-						<Btn :class="{ activeBtn: tableForm.alignment === 'center' }" flat thin
-							icon="format_align_center" title="Align Center" @click="tableForm.alignment = 'center'" />
-						<Btn :class="{ activeBtn: tableForm.alignment === 'right' }" flat thin icon="format_align_right"
-							title="Align Right" @click="tableForm.alignment = 'right'" />
+					<div
+						class="flex gap-025 mt-025 radius-1 p-05 w-fit"
+						style="height: var(--input-height); background: var(--input-bg);"
+					>
+						<Btn
+							:class="{ activeBtn: tableForm.alignment === 'left' }" flat thin icon="format_align_left"
+							title="Align Left" @click="tableForm.alignment = 'left'"
+						/>
+						<Btn
+							:class="{ activeBtn: tableForm.alignment === 'center' }" flat thin
+							icon="format_align_center" title="Align Center" @click="tableForm.alignment = 'center'"
+						/>
+						<Btn
+							:class="{ activeBtn: tableForm.alignment === 'right' }" flat thin icon="format_align_right"
+							title="Align Right" @click="tableForm.alignment = 'right'"
+						/>
 					</div>
 				</div>
 
 				<!-- Text Direction -->
 				<div class="grid-span-1">
 					<label class="label">Text Direction</label>
-					<div class="flex gap-025 mt-025 radius-1 p-025 w-fit"
-						style="height: var(--input-height); background: var(--input-bg);">
-						<Btn :class="{ activeBtn: tableForm.direction === 'ltr' }" flat thin value="LTR"
-							title="Left to Right" @click="tableForm.direction = 'ltr'" />
-						<Btn :class="{ activeBtn: tableForm.direction === 'rtl' }" flat thin value="RTL"
-							title="Right to Left" @click="tableForm.direction = 'rtl'" />
+					<div
+						class="flex gap-025 mt-025 radius-1 p-025 w-fit"
+						style="height: var(--input-height); background: var(--input-bg);"
+					>
+						<Btn
+							:class="{ activeBtn: tableForm.direction === 'ltr' }" flat thin value="LTR"
+							title="Left to Right" @click="tableForm.direction = 'ltr'"
+						/>
+						<Btn
+							:class="{ activeBtn: tableForm.direction === 'rtl' }" flat thin value="RTL"
+							title="Right to Left" @click="tableForm.direction = 'rtl'"
+						/>
 					</div>
 				</div>
 				<!-- Style Section -->
@@ -3204,8 +3308,10 @@ defineExpose({
 				<NumberInput v-model="tableForm.cellPadding" label="Cell Padding (px)" :min="2" :max="20" />
 				<NumberInput v-model="tableForm.borderWidth" label="Border Width (px)" :min="0" :max="5" />
 				<ColorInput v-model="tableForm.borderColor" label="Border Color" />
-				<CheckInput v-model="tableForm.fixedLayout" label="Fixed cell width (doesn't change by content)"
-					class="grid-span-4 m_grid-span-2" />
+				<CheckInput
+					v-model="tableForm.fixedLayout" label="Fixed cell width (doesn't change by content)"
+					class="grid-span-4 m_grid-span-2"
+				/>
 
 				<!-- Cell Colors -->
 				<div class="flex gap-05 white-space mt-0 grid-span-4 m_grid-span-2 pt-1 pb-05">
@@ -3215,8 +3321,10 @@ defineExpose({
 					</p>
 					<div class="line" />
 				</div>
-				<ColorInput v-model="tableForm.cellBgColor" class="grid-span-2 m_grid-span-1"
-					label="Background Color" />
+				<ColorInput
+					v-model="tableForm.cellBgColor" class="grid-span-2 m_grid-span-1"
+					label="Background Color"
+				/>
 				<ColorInput v-model="tableForm.cellTextColor" class="grid-span-2 m_grid-span-1" label="Text Color" />
 				<!-- Alternating Rows -->
 				<div class="flex gap-05 white-space mt-0 grid-span-4 m_grid-span-2 pt-1 pb-05">
@@ -3228,21 +3336,35 @@ defineExpose({
 				</div>
 				<CheckInput v-model="tableForm.showHeaders" label="Show header row" class="grid-span-4 m_grid-span-2" />
 				<!-- Header Colors -->
-				<div v-if="tableForm.showHeaders"
-					class="grid-span-4 m_grid-span-2 grid-wrap-4 m_grid-wrap-2 grid gap-col-1 border-bottom pb-05 mb-05">
-					<ColorInput v-model="tableForm.headerBgColor" class="grid-span-2 m_grid-span-1"
-						label="Header Background Color" />
-					<ColorInput v-model="tableForm.headerTextColor" class="grid-span-2 m_grid-span-1"
-						label="Header Text Color" />
+				<div
+					v-if="tableForm.showHeaders"
+					class="grid-span-4 m_grid-span-2 grid-wrap-4 m_grid-wrap-2 grid gap-col-1 border-bottom pb-05 mb-05"
+				>
+					<ColorInput
+						v-model="tableForm.headerBgColor" class="grid-span-2 m_grid-span-1"
+						label="Header Background Color"
+					/>
+					<ColorInput
+						v-model="tableForm.headerTextColor" class="grid-span-2 m_grid-span-1"
+						label="Header Text Color"
+					/>
 				</div>
-				<CheckInput v-model="tableForm.alternateRows" label="Alternating Row Colors"
-					class="grid-span-4 m_grid-span-2" />
-				<div v-if="tableForm.alternateRows"
-					class="grid grid-wrap-4 m_grid-wrap-2 gap-col-1 grid-span-4 m_grid-span-2  border-bottom pb-05 mb-05">
-					<ColorInput v-model="tableForm.alternateRowBgColor" class="grid-span-2 m_grid-span-1"
-						label="Alternate Row Background:" />
-					<ColorInput v-model="tableForm.alternateRowTextColor" class="grid-span-2 m_grid-span-1"
-						label="Alternate Row Text:" />
+				<CheckInput
+					v-model="tableForm.alternateRows" label="Alternating Row Colors"
+					class="grid-span-4 m_grid-span-2"
+				/>
+				<div
+					v-if="tableForm.alternateRows"
+					class="grid grid-wrap-4 m_grid-wrap-2 gap-col-1 grid-span-4 m_grid-span-2  border-bottom pb-05 mb-05"
+				>
+					<ColorInput
+						v-model="tableForm.alternateRowBgColor" class="grid-span-2 m_grid-span-1"
+						label="Alternate Row Background:"
+					/>
+					<ColorInput
+						v-model="tableForm.alternateRowTextColor" class="grid-span-2 m_grid-span-1"
+						label="Alternate Row Text:"
+					/>
 				</div>
 			</div>
 			<!-- Table Preview -->
@@ -3258,10 +3380,14 @@ defineExpose({
 
 		<template #footer>
 			<Btn value="Cancel" flat thin @click="showTableEditor = false" />
-			<Btn v-if="pendingTableData?.existingTable" value="Delete Table" color="red" flat thin icon="delete"
-				@click="deleteTable" />
-			<Btn :value="pendingTableData?.existingTable ? 'Save' : 'Insert Table'" class="ms-auto"
-				@click="submitTable" />
+			<Btn
+				v-if="pendingTableData?.existingTable" value="Delete Table" color="red" flat thin icon="delete"
+				@click="deleteTable"
+			/>
+			<Btn
+				:value="pendingTableData?.existingTable ? 'Save' : 'Insert Table'" class="ms-auto"
+				@click="submitTable"
+			/>
 		</template>
 	</Modal>
 </template>
@@ -3385,7 +3511,7 @@ defineExpose({
 }
 
 .inline-toolbar-content {
-	background: var(--bgl-surface, white);
+	background: var(--bgl-box-bg, white);
 	border: 1px solid var(--border-color, #dddddd);
 	border-radius: 8px;
 	padding: 0.25rem;