@bagelink/vue 1.15.295 → 1.15.299

package/package.json

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

package/src/components/Btn.vue

@@ -310,13 +310,10 @@ opacity: 0;
 z-index: 1;
 }
 
-/* Pin the ring itself to the exact center of the full-button loading overlay. */
-.bgl_btn .btn-loading :deep(.lds-ring) {
-position: absolute;
-top: 50%;
-left: 50%;
-transform: translate(-50%, -50%);
-}
+/* The overlay is `absolute-fill flex-center`, so it already centers the <Loading>
+   container. Don't re-center the inner ring with top/left:50% — that would override
+   the ring's own `translate(-thickness, -thickness)` compensation (it offsets the
+   ring-segment margins) and push the spinner slightly off-center. */
 
 .bgl_btn .bgl_btn-icon {
 font-size: calc(var(--bgl-input-font-size) * 1.3);

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

@@ -251,6 +251,7 @@ function handleOpenAdvanced() {
 			<!-- Separator -->
 			<span v-else-if="action.name === 'separator' && shouldShowSeparator(index)" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>
 		</template>
+		<slot name="end" />
 	</div>
 </template>
 

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

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script setup lang="ts">
-import type { ToolbarConfig } from './richTextTypes'
+import type { CustomToolbarButton, RichTextToolbarApi, ToolbarConfig } from './richTextTypes'
 import { CodeEditor, copyText, Btn, Dialog, BglVideo, Icon, Card, ColorInput, pathKeyToURL } from '@bagelink/vue'
 import { watch, onUnmounted, onBeforeUnmount, onMounted, ref, computed, useAttrs } from 'vue'
 import CheckInput from '../CheckInput.vue'
@@ -23,6 +23,7 @@ defineOptions({
 const props = defineProps<{
 	modelValue: string
 	toolbarConfig?: ToolbarConfig
+	customToolbarButtons?: CustomToolbarButton[]
 	debug?: boolean
 	label?: string
 	height?: number | string
@@ -64,6 +65,52 @@ const isInitializing = ref(false)
 const hasInitialized = ref(false)
 const commands = useCommands(editor.state, editor.state.debug)
 
+function setBlock(tagName: string, className?: string, removeClasses: string[] = []) {
+	const { doc } = editor.state
+	if (!doc) return
+
+	const selection = doc.getSelection()
+	const savedRange = selection?.rangeCount
+		? selection.getRangeAt(0).cloneRange()
+		: editor.state.range?.cloneRange()
+	if (!savedRange) return
+
+	const node = savedRange.commonAncestorContainer
+	const element = node.nodeType === Node.ELEMENT_NODE ? node as Element : node.parentElement
+	const currentBlock = element?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li,div')
+	if (!currentBlock || currentBlock === doc.body) return
+
+	editor.state.undoStack.push(editor.state.content)
+	editor.state.redoStack = []
+	if (editor.state.undoStack.length > 50) editor.state.undoStack.shift()
+
+	const target = currentBlock.tagName.toLowerCase() === tagName.toLowerCase()
+		? currentBlock
+		: doc.createElement(tagName)
+
+	if (target !== currentBlock) {
+		while (currentBlock.firstChild) target.appendChild(currentBlock.firstChild)
+		currentBlock.parentNode?.replaceChild(target, currentBlock)
+	}
+
+	removeClasses.forEach(name => target.classList.remove(name))
+	if (className) target.classList.add(className)
+	if (!target.classList.length) target.removeAttribute('class')
+
+	const nextRange = doc.createRange()
+	nextRange.selectNodeContents(target)
+	nextRange.collapse(false)
+	selection?.removeAllRanges()
+	selection?.addRange(nextRange)
+	editor.state.range = nextRange.cloneRange()
+	updateContentWithHistory(doc, true)
+}
+
+const toolbarApi: RichTextToolbarApi = {
+	execute: commands.execute,
+	setBlock
+}
+
 // Reactive theme colors with forced reactivity
 const forceUpdate = ref(0)
 const currentInputColor = computed(() => {
@@ -3372,7 +3419,26 @@ const imgTransform = computed({
 				:hide-embeds="hideEmbed" :hide-tables="hideTables" :hide-alignment="hideAlignment"
 				:hide-directions="hideDirections" :hide-h5-h6="hideH5H6" :hide="effectiveHideArray"
 				@action="commands.execute"
-			/>
+			>
+				<template #end>
+					<slot name="toolbar-end" :api="toolbarApi">
+						<Btn
+							v-for="button in customToolbarButtons"
+							:key="button.name"
+							v-tooltip="button.label"
+							:icon="button.icon"
+							:value="button.value"
+							:aria-label="button.label"
+							:class="button.class"
+							thin
+							flat
+							tabindex="-1"
+							@mousedown.prevent
+							@click="button.action(toolbarApi)"
+						/>
+					</slot>
+				</template>
+			</EditorToolbar>
 			<div class="editor-container" :class="{ 'split-view': editor.state.isSplitView }">
 				<div
 					class="content-area radius-05"

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

@@ -63,6 +63,20 @@ export type ToolbarConfigOption = string
 
 export type ToolbarConfig = ToolbarConfigOption[]
 
+export interface RichTextToolbarApi {
+	execute: (command: string, value?: string) => void
+	setBlock: (tagName: string, className?: string, removeClasses?: string[]) => void
+}
+
+export interface CustomToolbarButton {
+	name: string
+	label: string
+	icon?: string
+	value?: string
+	class?: string
+	action: (api: RichTextToolbarApi) => void
+}
+
 export interface ToolbarOption {
 	name: string
 	label?: string

package/src/components/form/inputs/index.ts

@@ -14,6 +14,7 @@ export { default as PasswordInput } from './PasswordInput.vue'
 export { default as RadioGroup } from './RadioGroup.vue'
 export { default as RangeInput } from './RangeInput.vue'
 export { default as RichText } from './RichText/index.vue'
+export type { CustomToolbarButton, RichTextToolbarApi } from './RichText/richTextTypes'
 export { default as SelectBtn } from './SelectBtn.vue'
 export { default as SelectInput } from './SelectInput.vue'
 export { default as SignaturePad } from './SignaturePad.vue'

package/src/components/layout/AppContent.vue

@@ -12,6 +12,8 @@ interface Props {
 	subtitle?: string
 	showMenuButton?: boolean
 	backTo?: string | Record<string, any>
+	/** Optional custom back action. When set, the back button calls this instead of navigating to backTo. */
+	onBack?: () => void
 	/**
 	 * Header framing:
 	 *   'border' → bottom hairline under the header (default — legacy behaviour).
@@ -146,7 +148,14 @@ const hasCenter = computed(() => !!slots['header-center'])
 				/>
 
 				<!-- Back Button -->
-				<Btn v-if="backTo" icon="arrow_back" thin :to="backTo" class="back-btn bg-bg m_-ms-05 m_-me-05 color-black" />
+				<Btn
+					v-if="backTo || onBack"
+					icon="arrow_back"
+					thin
+					:to="onBack ? undefined : backTo"
+					class="back-btn bg-bg m_-ms-05 m_-me-05 color-black"
+					@click="onBack?.()"
+				/>
 
 				<!-- Page Title -->
 				<PageTitle v-if="title || subtitle" :subtitle="subtitle">

package/src/components/lightbox/Lightbox.vue

@@ -273,6 +273,7 @@ max-height: calc(100vh - 140px);
 object-fit: contain;
 border-radius: 3px;
 margin: auto;
+width: 100%;
 }
 
 .lightbox-pdf {
@@ -289,6 +290,9 @@ border-radius: 3px;
 
 .lightbox-video iframe {
 width: 90vw;
+height: auto;
+aspect-ratio: 16 / 9;
+max-height: calc(100vh - 140px);
 }
 
 .lightbox-video video {

package/src/form-flow/form-flow.ts

@@ -10,6 +10,7 @@
 
 import type { Component } from 'vue'
 import type { IconType } from '../types'
+import type { CustomToolbarButton } from '../components/form/inputs/RichText/richTextTypes'
 import { getOptionValue } from '../utils/options'
 
 // ============================================================================
@@ -297,8 +298,8 @@ export const $ = {
 	},
 
 	richtext(
-		labelOrConfig?: string | (BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean, fontSize?: number | string }),
-		config?: BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean, fontSize?: number | string }
+		labelOrConfig?: string | (BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean, fontSize?: number | string, customToolbarButtons?: CustomToolbarButton[] }),
+		config?: BaseFieldConfig & { autoheight?: boolean, basic?: boolean, simple?: boolean, fontSize?: number | string, customToolbarButtons?: CustomToolbarButton[] }
 	): FieldBuilder<string> {
 		return new Field('richtext', parseArgs(labelOrConfig, config))
 	},