@bagelink/vue 1.15.515 → 1.15.521

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

@@ -192,6 +192,49 @@ function findBlockElement(node: Node): Element | null {
 	return null
 }
 
+const LIST_BLOCK_SELECTOR = 'p,h1,h2,h3,h4,h5,h6,blockquote'
+
+function convertSelectedBlocksToList(
+	state: EditorState,
+	selection: Selection,
+	range: Range,
+	listTag: 'ol' | 'ul'
+): boolean {
+	if (!state.doc || range.collapsed) { return false }
+
+	const blocks = Array.from(state.doc.body.querySelectorAll(LIST_BLOCK_SELECTOR))
+		.filter(block => !block.closest('li') && range.intersectsNode(block))
+		.filter(block => !blocksContainAncestor(block))
+
+	function blocksContainAncestor(block: Element) {
+		return block.parentElement?.closest(LIST_BLOCK_SELECTOR) !== null
+	}
+
+	if (!blocks.length) { return false }
+
+	const list = state.doc.createElement(listTag)
+	const direction = (blocks[0] as HTMLElement).dir
+	if (direction === 'rtl' || direction === 'ltr') { list.dir = direction }
+
+	blocks[0].parentNode?.insertBefore(list, blocks[0])
+	blocks.forEach((block) => {
+		const item = state.doc!.createElement('li')
+		const blockDirection = (block as HTMLElement).dir
+		if (blockDirection === 'rtl' || blockDirection === 'ltr') { item.dir = blockDirection }
+		while (block.firstChild) {
+			item.appendChild(block.firstChild)
+		}
+		list.appendChild(item)
+		block.remove()
+	})
+
+	const nextRange = state.doc.createRange()
+	nextRange.selectNodeContents(list)
+	selection.removeAllRanges()
+	selection.addRange(nextRange)
+	return true
+}
+
 // Centralized command creation helper
 function createCommand(name: string, execute: Command['execute'], isActive?: Command['isActive']): Command {
 	return {
@@ -236,7 +279,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 			const selectionInfo = getCurrentSelection(state)
 			if (!selectionInfo) { return }
 
-			let { range, selection } = selectionInfo
+			const { range, selection } = selectionInfo
 
 			// If no text is selected, try to apply formatting to word at cursor
 			if (range.collapsed) {
@@ -305,7 +348,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 			const selectionInfo = getCurrentSelection(state)
 			if (!selectionInfo) { return }
 
-			let { range, selection } = selectionInfo
+			const { range, selection } = selectionInfo
 
 			// If no text is selected, try to apply formatting to word at cursor
 			if (range.collapsed) {
@@ -374,7 +417,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 			const selectionInfo = getCurrentSelection(state)
 			if (!selectionInfo) { return }
 
-			let { range, selection } = selectionInfo
+			const { range, selection } = selectionInfo
 
 			// If no text is selected, try to apply formatting to word at cursor
 			if (range.collapsed) {
@@ -672,6 +715,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 			if (!selectionInfo) { return }
 
 			const { range } = selectionInfo
+			if (convertSelectedBlocksToList(state, selectionInfo.selection, range, 'ol')) { return }
 			const currentBlock = findBlockElement(range.commonAncestorContainer)
 			if (!currentBlock) { return }
 
@@ -764,6 +808,7 @@ export function createCommandRegistry(state: EditorState): CommandRegistry {
 			if (!selectionInfo) { return }
 
 			const { range } = selectionInfo
+			if (convertSelectedBlocksToList(state, selectionInfo.selection, range, 'ul')) { return }
 			const currentBlock = findBlockElement(range.commonAncestorContainer)
 			if (!currentBlock) { return }
 

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

@@ -159,9 +159,14 @@ export function formatting(state: EditorState) {
 
 		// 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')
@@ -172,7 +177,6 @@ export function formatting(state: EditorState) {
 			block.remove()
 		})
 
-		selectionInfo.startBlock.parentNode?.insertBefore(listEl, selectionInfo.startBlock)
 		restoreSelection(state.doc, state.range, state.selection, selectionInfo, listEl)
 	}
 

package/src/components/form/inputs/Upload/UploadInput.vue

@@ -216,7 +216,7 @@ function fileName(pathKey: string) {
 						:class="{ 'bgl_fill-image': fill }"
 					>
 						<div
-							class="flex opacity-8 z-99 gap-025 absolute top-0 start-0"
+							class="flex opacity-8 z-90 gap-025 absolute top-0 start-0"
 							:class="{ 'mx-auto end-0 mt-1 justify-content-center': oval, 'm-05': !oval }"
 						>
 							<Btn

package/src/styles/appearance.css

@@ -82,6 +82,56 @@
     z-index: 9;
 }
 
+.z-index-10,
+.z-10 {
+    z-index: 10;
+}
+
+.z-index-20,
+.z-20 {
+    z-index: 20;
+}
+
+.z-index-30,
+.z-30 {
+    z-index: 30;
+}
+
+.z-index-40,
+.z-40 {
+    z-index: 40;
+}
+
+.z-index-50,
+.z-50 {
+    z-index: 50;
+}
+
+.z-index-60,
+.z-60 {
+    z-index: 60;
+}
+
+.z-index-70,
+.z-70 {
+    z-index: 70;
+}
+
+.z-index-80,
+.z-80 {
+    z-index: 80;
+}
+
+.z-index-90,
+.z-90 {
+    z-index: 90;
+}
+
+.z-index-95,
+.z-95 {
+    z-index: 95;
+}
+
 .z-index-99,
 .z-99 {
     z-index: 99;