@bagelink/vue 1.16.0 → 1.17.6

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

@@ -17,6 +17,10 @@ import {
 	isCustomFormFieldType,
 	warnMissingCustomFormField,
 } from './custom-field-registry'
+import type {
+	JSONSchemaObject as FormJSONSchemaObject,
+	JSONSchemaProperty as FormJSONSchemaProperty,
+} from './schema-fields'
 
 // ============================================================================
 // Core Types
@@ -412,6 +416,9 @@ export const $ = {
 			noFilePlaceholder?: string
 			btnPlaceholder?: string
 			style?: string
+			/** Upload to the immutable assets catalog and persist a `{asset_id}` pin. */
+			assetMode?: boolean
+			assetVisibility?: import('../assets').AssetVisibility
 		}),
 		config?: BaseFieldConfig & {
 			multiple?: boolean
@@ -428,6 +435,9 @@ export const $ = {
 			noFilePlaceholder?: string
 			btnPlaceholder?: string
 			style?: string
+			/** Upload to the immutable assets catalog and persist a `{asset_id}` pin. */
+			assetMode?: boolean
+			assetVisibility?: import('../assets').AssetVisibility
 		}
 	): FieldBuilder<string | string[]> {
 		return new Field('upload', parseArgs(labelOrConfig, config))
@@ -806,8 +816,10 @@ export function multiStepSchema<T extends Record<string, any> = Record<string, a
 // JSONSchema Import
 // ============================================================================
 
-interface JSONSchemaProperty {
-	'type'?: string
+type JSONSchemaProperty = Omit<
+	FormJSONSchemaProperty,
+	'items' | 'properties' | 'x-field-type'
+> & {
 	'title'?: string
 	'description'?: string
 	'default'?: any
@@ -855,6 +867,7 @@ interface JSONSchemaProperty {
 	'x-placeholder'?: string
 	'x-select-multiselect'?: boolean
 	'x-select-searchable'?: boolean
+	'x-asset'?: boolean
 	'x-radio-inline'?: boolean
 	'x-radio-align'?: 'start' | 'center' | 'end'
 	'x-radio-text-align'?: 'left' | 'center' | 'right'
@@ -929,8 +942,8 @@ function normalizeOptionsSourceResponse(
 	})
 }
 
-interface JSONSchemaObject {
-	'type'?: string
+type JSONSchemaObject = Omit<FormJSONSchemaObject, 'properties'> & {
+	'type': 'object'
 	'title'?: string
 	'properties'?: Record<string, JSONSchemaProperty>
 	'required'?: string[]
@@ -1039,8 +1052,8 @@ function resolveUnionType(prop: JSONSchemaProperty, _rootSchema: JSONSchemaObjec
 	// Prefer object > array > string > number > boolean
 	const typeOrder = ['object', 'array', 'string', 'number', 'integer', 'boolean']
 	const sorted = nonNullTypes.sort((a, b) => {
-		const aIdx = typeOrder.indexOf(a.type || 'string')
-		const bIdx = typeOrder.indexOf(b.type || 'string')
+		const aIdx = typeOrder.indexOf(Array.isArray(a.type) ? (a.type[0] ?? 'string') : (a.type ?? 'string'))
+		const bIdx = typeOrder.indexOf(Array.isArray(b.type) ? (b.type[0] ?? 'string') : (b.type ?? 'string'))
 		return aIdx - bIdx
 	})
 
@@ -1092,8 +1105,12 @@ function createFieldFromProperty(
 	const xUi = resolvedProp['x-ui'] || {}
 	// Field type may be declared either as `x-ui.fieldType` (this module's own
 	// round-trip) or the flat `x-field-type` (FormBuilder designer). Multiselect
-	// is a `select` flagged multi.
+	// is a `select` flagged multi. `x-asset` is an immutable-assets file field
+	// whose JSON-schema type is `object` (the pin), not `string`.
 	let fieldType = xUi.fieldType || resolvedProp['x-field-type'] || inferFieldType(resolvedProp)
+	if (resolvedProp['x-asset'] === true && fieldType !== 'file' && fieldType !== 'upload') {
+		fieldType = 'file'
+	}
 	if (fieldType === 'select' && resolvedProp['x-select-multiselect']) fieldType = 'multiselect'
 
 	// Designer-authored options: [{label,value}] pairs preserve labels (raw
@@ -1232,6 +1249,13 @@ function createFieldFromProperty(
 			break
 		case 'file':
 		case 'upload':
+			// `x-asset` marks a field as managed by the immutable assets catalog:
+			// the widget uploads and persists a `{asset_id}` pin, and
+			// the JSON-schema type is `object`, not `string`.
+			if (resolvedProp['x-asset'] === true) config.assetMode = true
+			if (resolvedProp['x-asset-visibility']) {
+				config.assetVisibility = resolvedProp['x-asset-visibility']
+			}
 			field = $.upload(config)
 			break
 		case 'array': {

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

@@ -95,6 +95,10 @@ export interface FormField {
 	fileTheme?: 'dropzone' | 'basic'
 	fileShowIcon?: boolean
 	fileIcon?: string
+	/** Upload to the immutable assets catalog; persist a `{asset_id}` pin. */
+	assetMode?: boolean
+	/** Asset delivery policy. Omitted assets are protected. */
+	assetVisibility?: import('../assets').AssetVisibility
 	dateEnableTime?: boolean
 	dateMin?: string
 	dateMax?: string
@@ -163,6 +167,8 @@ export interface JSONSchemaProperty {
 	'x-file-theme'?: 'dropzone' | 'basic'
 	'x-file-show-icon'?: boolean
 	'x-file-icon'?: string
+	'x-asset'?: boolean
+	'x-asset-visibility'?: import('../assets').AssetVisibility
 	'x-date-enable-time'?: boolean
 	'x-date-min'?: string
 	'x-date-max'?: string
@@ -351,7 +357,28 @@ export function fieldsToSchema(
 					prop.type = 'string'
 					break
 				case 'file':
-					if (field.fileMultiple === true) {
+					if (field.assetMode === true) {
+						// Public-by-default assets catalog: persist a `{asset_id}` pin.
+						// The JSON-schema type is `object` (the pin), and `x-asset` is the
+						// authoritative marker — never a `string` URL.
+						const assetRef = {
+							type: 'object',
+							properties: {
+								asset_id: { type: 'string', format: 'uuid' },
+							},
+							required: ['asset_id'],
+						}
+						if (field.fileMultiple === true) {
+							prop.type = 'array'
+							prop.items = assetRef
+						} else {
+							Object.assign(prop, assetRef)
+						}
+						prop['x-asset'] = true
+						if (field.assetVisibility) {
+							prop['x-asset-visibility'] = field.assetVisibility
+						}
+					} else if (field.fileMultiple === true) {
 						prop.type = 'array'
 						prop.items = { type: 'string' }
 					} else {

package/src/index.ts

@@ -1,4 +1,7 @@
 export * from './components'
+export * from './assets'
+export * from './assetTransport'
+export { default as AssetPreview } from './components/lightbox/AssetPreview.vue'
 export * from './composables'
 // Dialog (native <dialog> based)
 export * from './dialog'

package/src/styles/core.css

@@ -1,7 +1,7 @@
 /* Font-neutral Bagel UI stylesheet for public/customer sites.
    Apps choose their own typography and may import optional font packs. */
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,100..700,0..1,0');
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/brands.min.css');
 
 @import "theme.css";
 @import "dark.css";
@@ -27,7 +27,6 @@
 @import "color-variants.css";
 
 .bgl_icon-font { font-family: 'Material Symbols Outlined', serif !important; }
-.bgl_icon-font.fa { font-family: 'Font Awesome 6 Free', serif !important; }
 .bgl_icon-font.fa-brands { font-family: 'Font Awesome 6 Brands', serif !important; }
 .bgl_icon-font.bgl_icon-round {
     display: inline-flex;
@@ -94,19 +93,3 @@ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
 	font-weight: 400;
 	src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-brands-400.woff2') format('woff2');
 }
-
-@font-face {
-	font-display: swap;
-	font-family: 'Font Awesome 6 Free';
-	font-style: normal;
-	font-weight: 400;
-	src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-regular-400.woff2') format('woff2');
-}
-
-@font-face {
-	font-display: swap;
-	font-family: 'Font Awesome 6 Free';
-	font-style: normal;
-	font-weight: 900;
-	src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-solid-900.woff2') format('woff2');
-}

package/src/types/BagelForm.ts

@@ -192,6 +192,10 @@ export interface UploadInputValueObject {
 }
 
 export interface UploadInputProps extends BagelInputShellProps {
+	/** Opt-in stable reference output; defaults to legacy path-key behavior. */
+	assetMode?: boolean
+	/** Asset delivery policy. Defaults to protected; website/media fields use public. */
+	assetVisibility?: import('../assets').AssetVisibility
 	id?: string
 	name?: string
 	label?: string
@@ -200,7 +204,7 @@ export interface UploadInputProps extends BagelInputShellProps {
 	 * Path-key string(s). Legacy/migrated records may also provide an image object
 	 * (e.g. `{ imageURL, imageName, extension, altText }`); it is normalized internally.
 	 */
-	modelValue?: string | string[] | UploadInputValueObject | (string | UploadInputValueObject)[]
+	modelValue?: string | string[] | UploadInputValueObject | import('../assets').AssetReference | (string | UploadInputValueObject | import('../assets').AssetReference)[]
 	/** Optional upload handler. When omitted, the shared file-storage uploader is used. */
 	upload?: (file: File) => Promise<string>
 	width?: string

package/dist/components/form/inputs/RichText/utils/formatting.d.ts

@@ -1,10 +0,0 @@
-import { EditorState } from '../richTextTypes';
-export declare function formatting(state: EditorState): {
-    text: (command: string) => void;
-    block: (command: string, tag: string) => void;
-    list: (command: string) => void;
-    clear: () => void;
-};
-export declare function getBlockElement(node: Node): HTMLElement | null;
-export declare function adjustIndentation(state: EditorState, increase: boolean): void;
-//# sourceMappingURL=formatting.d.ts.map

package/dist/components/form/inputs/RichText/utils/formatting.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/inputs/RichText/utils/formatting.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAGnD,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW;oBAIrB,MAAM;qBA4CL,MAAM,OAAO,MAAM;oBA6CpB,MAAM;;EAsN7B;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,WAAW,GAAG,IAAI,CAI9D;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,QAYtE"}

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

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-const props = defineProps<{
-	gridSize?: number
-}>()
-const emit = defineEmits(['select'])
-const fb = 1
-const base = props.gridSize || 5
-const hoveredRow = ref(fb)
-const hoveredCol = ref(fb)
-
-const rowSize = computed(() => {
-	const enlarge = Math.min(hoveredRow.value + 1, 20)
-	return hoveredRow.value > (base - 1) ? enlarge : base
-})
-const colSize = computed(() => {
-	const enlarge = Math.min(hoveredCol.value + 1, 20)
-	return hoveredCol.value > (base - 1) ? enlarge : base
-})
-</script>
-
-<template>
-	<div class="grid grid-wrap p-05">
-		<div
-			v-for="row in rowSize" :key="`row-${row}`" class="flex" @mouseout="hoveredRow = fb; hoveredCol = fb"
-			@focusout="hoveredRow = fb; hoveredCol = fb"
-		>
-			<div
-				v-for="col in colSize" :key="`col-${col}`" role="button" tabindex="0" aria-label="Insert Table"
-				:style="{ width: '20px', height: '20px' }" class="flex pointer gap-025 tableBoxSelect"
-				:class="{ borderSelect: hoveredRow >= row && hoveredCol >= col }"
-				@mousemove="hoveredRow = row; hoveredCol = col" @click="emit('select', `${row}x${col}`)"
-			/>
-		</div>
-		<p class="txt-center txt-12 color-gray">
-			{{ hoveredRow }}x{{ hoveredCol }}
-		</p>
-	</div>
-</template>
-
-<style scoped>
-
-.tableBoxSelect::after {
-content: '';
-display: block;
-width: calc(100% - 4px);
-height:	calc(100% - 4px);
-border: 1px solid var(--bgl-gray);
-background: var(--bgl-gray-light);
-
-}
-.borderSelect::after {
-border-color: var(--bgl-primary-tint);
-background: var(--bgl-primary-light);
-}
-
-</style>

package/src/components/form/inputs/RichText/utils/formatting.ts

@@ -1,331 +0,0 @@
-import type { EditorState } from '../richTextTypes'
-import { analyzeSelection, restoreSelection, getBlocksBetween } from './selection'
-
-export function formatting(state: EditorState) {
-	const { doc } = state
-	if (!doc) { return { text: () => {}, block: () => {}, list: () => {}, clear: () => {} } }
-
-	const text = (command: string) => {
-		const selection = doc.getSelection()
-		if (!selection || !selection.rangeCount) { return }
-
-		const range = selection.getRangeAt(0)
-		const container = range.commonAncestorContainer
-		const parentBlock = container.nodeType === 3 ? container.parentElement : container as HTMLElement
-
-		// Preserve RTL direction when applying text formatting
-		const isRTL = parentBlock?.closest('[dir="rtl"]') !== null
-
-		// Don't apply inline styles directly to block elements
-		if (parentBlock?.tagName.match(/^H[1-6]|P|BLOCKQUOTE|LI$/)) {
-			if (!range.collapsed && range.toString().trim()) {
-				let element: HTMLElement
-				if (command === 'underline') { element = doc.createElement('u') }
-				else if (command === 'bold') { element = doc.createElement('b') }
-				else if (command === 'italic') { element = doc.createElement('i') }
-				else { return }
-
-				if (isRTL) { element.dir = 'rtl' }
-				range.surroundContents(element)
-			}
-		} else {
-			if (range.collapsed) { return } // No selection, nothing to format
-
-			let element: HTMLElement
-			if (command === 'bold') { element = doc.createElement('b') }
-			else if (command === 'italic') { element = doc.createElement('i') }
-			else if (command === 'underline') { element = doc.createElement('u') }
-			else { return }
-
-			try {
-				range.surroundContents(element)
-			} catch {
-				// If surroundContents fails (e.g., for selections across multiple nodes)
-				// Extract the fragment, wrap it, and insert it back
-				const fragment = range.extractContents()
-				element.appendChild(fragment)
-				range.insertNode(element)
-			}
-		}
-	}
-
-	const block = (command: string, tag: string) => {
-		const selection = doc.getSelection()
-		if (!selection || !selection.rangeCount) { return }
-
-		const range = selection.getRangeAt(0)
-		const container = range.commonAncestorContainer
-		const parentBlock = container.nodeType === 3 ? container.parentElement : container as HTMLElement
-		const isRTL = parentBlock?.closest('[dir="rtl"]') !== null
-
-		// Remove any invalid inline style wrapping
-		if (parentBlock?.closest('u, b, i')) {
-			const wrapper = parentBlock.closest('u, b, i')
-			if (wrapper) {
-				const parent = wrapper.parentNode
-				while (wrapper.firstChild) {
-					parent?.insertBefore(wrapper.firstChild, wrapper)
-				}
-				wrapper.remove()
-			}
-		}
-
-		// Create a new block element of the desired type
-		const newBlock = doc.createElement(tag)
-		if (isRTL) { newBlock.dir = 'rtl' }
-
-		// Find the current block to replace
-		const currentBlock = parentBlock?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div') || parentBlock
-
-		if (currentBlock) {
-			// Copy content to the new block
-			while (currentBlock.firstChild) {
-				newBlock.appendChild(currentBlock.firstChild)
-			}
-
-			// Replace the current block with the new one
-			currentBlock.parentNode?.replaceChild(newBlock, currentBlock)
-
-			// Move cursor into the new block
-			range.selectNodeContents(newBlock)
-			range.collapse(false)
-			selection.removeAllRanges()
-			selection.addRange(range)
-		}
-	}
-
-	const list = (command: string) => {
-		if (!state.doc || !state.range || !state.selection) { return }
-
-		const listTag = command === 'orderedList' ? 'ol' : 'ul'
-		const selectionInfo = analyzeSelection(state.doc, state.range)
-		if (!selectionInfo) { return }
-
-		const isRTL = selectionInfo.parent.closest('[dir="rtl"]') !== null
-
-		// If we're inside a list item, handle toggling off or switching list type
-		const listItem = selectionInfo.parent.closest('li')
-		if (listItem) {
-			const listParent = listItem.parentElement
-			if (!listParent) { return }
-
-			// If it's the same list type, toggle off
-			if (listParent.tagName.toLowerCase() === listTag) {
-				// Create a paragraph from the list item content
-				const p = state.doc.createElement('p') as HTMLParagraphElement
-				if (isRTL) { p.dir = 'rtl' }
-				while (listItem.firstChild) {
-					p.appendChild(listItem.firstChild)
-				}
-
-				listParent.parentNode?.insertBefore(p, listParent)
-				listItem.remove()
-
-				if (!listParent.querySelector('li')) {
-					listParent.remove()
-				}
-
-				restoreSelection(state.doc, state.range, state.selection, selectionInfo, p)
-				return
-			}
-
-			// Convert to the other list type
-			const newList = state.doc.createElement(listTag) as HTMLElement
-			if (isRTL) { newList.dir = 'rtl' }
-			const allItems = Array.from(listParent.children)
-			allItems.forEach(item => newList.appendChild(item.cloneNode(true)))
-			listParent.parentNode?.replaceChild(newList, listParent)
-
-			const newListItem = newList.children[Array.from(allItems).indexOf(listItem)]
-			restoreSelection(state.doc, state.range, state.selection, selectionInfo, newListItem)
-			return
-		}
-
-		// For single block conversion
-		if (!selectionInfo.isMultiBlock) {
-			const li = state.doc.createElement('li')
-			const listEl = state.doc.createElement(listTag) as HTMLElement
-			if (isRTL) { listEl.dir = 'rtl' }
-
-			while (selectionInfo.startBlock.firstChild) {
-				li.appendChild(selectionInfo.startBlock.firstChild)
-			}
-
-			listEl.appendChild(li)
-			selectionInfo.startBlock.parentNode?.replaceChild(listEl, selectionInfo.startBlock)
-			restoreSelection(state.doc, state.range, state.selection, selectionInfo, li)
-			return
-		}
-
-		// Handle multi-block selection
-		const blocks = getBlocksBetween(selectionInfo.startBlock, selectionInfo.endBlock)
-		if (!blocks.length) { return }
-
-		const listEl = state.doc.createElement(listTag) as HTMLElement
-		if (isRTL) { listEl.dir = 'rtl' }
-
-		const firstBlock = blocks[0]
-		firstBlock.parentNode?.insertBefore(listEl, firstBlock)
-
-		blocks.forEach((block) => {
-			if (!state.doc) { return }
-			const li = state.doc.createElement('li')
-			while (block.firstChild) {
-				li.appendChild(block.firstChild)
-			}
-			listEl.appendChild(li)
-			block.remove()
-		})
-
-		restoreSelection(state.doc, state.range, state.selection, selectionInfo, listEl)
-	}
-
-	const clear = () => {
-		console.log('[Clear Format] Starting clear format process', state)
-		console.assert(!!state, '[Clear Format] State must exist')
-		console.assert(!!state.doc, '[Clear Format] Document must exist')
-		console.assert(!!state.range, '[Clear Format] Range must exist')
-		console.assert(!!state.selection, '[Clear Format] Selection must exist')
-
-		if (!state.doc || !state.range || !state.selection) {
-			console.log('[Clear Format] No document or selection')
-			return
-		}
-
-		const selectionInfo = analyzeSelection(state.doc, state.range)
-		console.log('[Clear Format] Selection info:', selectionInfo)
-		if (!selectionInfo) {
-			console.log('[Clear Format] No valid selection info')
-			return
-		}
-
-		// If selection is collapsed (just a cursor), return
-		if (state.range.collapsed) {
-			console.log('[Clear Format] Selection is collapsed, nothing to clear')
-			return
-		}
-
-		console.log('[Clear Format] Processing selection:', {
-			startContainer: state.range.startContainer,
-			endContainer: state.range.endContainer,
-			selectedText: state.range.toString()
-		})
-
-		// Get the selected content
-		const fragment = state.range.cloneContents()
-		const tempDiv = state.doc.createElement('div')
-		tempDiv.appendChild(fragment)
-
-		console.log('[Clear Format] Original HTML:', tempDiv.innerHTML)
-
-		// Function to recursively clean a node and its children
-		const cleanNode = (node: Node): Node => {
-			if (!state.doc) { return node }
-
-			// Text nodes can be returned as-is
-			if (node.nodeType === 3) {
-				return node.cloneNode(true)
-			}
-
-			if (node.nodeType === 1) { // Element node
-				const el = node as HTMLElement
-				const nodeName = el.nodeName.toLowerCase()
-				const inlineTags = ['b', 'i', 'u', 'strong', 'em', 'span', 'font', 'strike', 'sub', 'sup']
-
-				console.log('[Clear Format] Processing element:', nodeName, {
-					hasStyle: el.hasAttribute('style'),
-					style: el.getAttribute('style'),
-					className: el.className
-				})
-
-				// For inline formatting elements, just extract the text content
-				if (inlineTags.includes(nodeName)) {
-					// Create a text node with the element's content
-					const textContent = el.textContent || ''
-					console.log('[Clear Format] Extracting text from inline element:', textContent)
-					return state.doc.createTextNode(textContent)
-				}
-
-				// For block elements, preserve the element type but remove formatting
-				const newEl = state.doc.createElement(nodeName)
-
-				// Remove any style and class attributes
-				if (el.hasAttribute('style')) {
-					console.log('[Clear Format] Removing style attribute:', el.getAttribute('style'))
-				}
-				if (el.className) {
-					console.log('[Clear Format] Removing class:', el.className)
-				}
-
-				// Transfer only specific attributes we want to keep (like href for links)
-				if (nodeName === 'a' && el.hasAttribute('href')) {
-					newEl.setAttribute('href', el.getAttribute('href') || '')
-					if (el.hasAttribute('target')) {
-						newEl.setAttribute('target', el.getAttribute('target') || '')
-					}
-					console.log('[Clear Format] Preserving link attributes')
-				}
-
-				// For images, preserve src and alt
-				if (nodeName === 'img') {
-					if (el.hasAttribute('src')) { newEl.setAttribute('src', el.getAttribute('src') || '') }
-					if (el.hasAttribute('alt')) { newEl.setAttribute('alt', el.getAttribute('alt') || '') }
-					console.log('[Clear Format] Preserving image attributes')
-				}
-
-				// Clean and append all child nodes
-				Array.from(el.childNodes).forEach((child) => {
-					newEl.appendChild(cleanNode(child))
-				})
-
-				return newEl
-			}
-
-			return node.cloneNode(true)
-		}
-
-		// Clean all nodes in the fragment
-		const cleanedFragment = state.doc.createDocumentFragment()
-		Array.from(tempDiv.childNodes).forEach((node) => {
-			cleanedFragment.appendChild(cleanNode(node))
-		})
-
-		// For debugging: check what the cleaned HTML looks like
-		const debugDiv = state.doc.createElement('div')
-		debugDiv.appendChild(cleanedFragment.cloneNode(true))
-		console.log('[Clear Format] Cleaned HTML:', debugDiv.innerHTML)
-
-		// Replace the content
-		state.range.deleteContents()
-		state.range.insertNode(cleanedFragment)
-
-		// Restore selection
-		restoreSelection(state.doc, state.range, state.selection, selectionInfo)
-
-		// Update content state
-		state.content = state.doc.body.innerHTML
-		console.log('[Clear Format] Updated document HTML:', state.content)
-	}
-
-	return { text, block, list, clear }
-}
-
-export function getBlockElement(node: Node): HTMLElement | null {
-	const element = node.nodeType === 3 ? node.parentElement : node as HTMLElement
-	if (!element) { return null }
-	return element.closest('p,h1,h2,h3,h4,h5,h6,blockquote,li') || element
-}
-
-export function adjustIndentation(state: EditorState, increase: boolean) {
-	const { doc, range } = state
-	if (!doc || !range) { return }
-
-	const blockElement = getBlockElement(range.commonAncestorContainer)
-	if (!blockElement) { return }
-
-	const currentMargin = Number.parseInt(blockElement.style.marginLeft || '0', 10)
-	const step = 20 // pixels to indent/outdent
-	const newMargin = increase ? currentMargin + step : Math.max(0, currentMargin - step)
-
-	blockElement.style.marginLeft = `${newMargin}px`
-}