@bagelink/vue 1.4.153 → 1.4.159

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

@@ -414,8 +414,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 +1480,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 +1582,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,12 +1916,6 @@ 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) {
@@ -2908,38 +2902,28 @@ 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">
@@ -2954,51 +2938,39 @@ 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>
@@ -3007,60 +2979,42 @@ 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>
@@ -3070,14 +3024,10 @@ 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>
@@ -3092,54 +3042,36 @@ 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" />
@@ -3148,25 +3080,19 @@ 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" />
@@ -3175,21 +3101,17 @@ 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" />
@@ -3202,10 +3124,8 @@ 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 -->
@@ -3214,35 +3134,27 @@ 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 -->
@@ -3258,40 +3170,26 @@ 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 -->
@@ -3306,10 +3204,8 @@ 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">
@@ -3319,10 +3215,8 @@ 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">
@@ -3334,35 +3228,21 @@ 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 -->
@@ -3378,14 +3258,10 @@ 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>