@bagelink/vue 1.4.139 → 1.4.141

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.139",
+  "version": "1.4.141",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/dataTable/DataTable.vue

@@ -127,7 +127,7 @@ const showLoading = computed(() => loading.value)
 						@click="toggleSort(field?.id || '')"
 					>
 						<div class="flex">
-							{{ field.label || keyToLabel(field?.id) }}
+							{{ field.label || field.attrs?.label || keyToLabel(field?.id) }}
 							<div class="list-arrows" :class="{ sorted: sortField === field?.id }">
 								<Icon :class="{ desc: sortDirection === 'DESC' }" icon="keyboard_arrow_up" />
 							</div>

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

@@ -30,6 +30,17 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 					/>
 				</template>
 			</Dropdown>
+			<Btn
+				v-else-if="action.name === 'textDirection'" 
+				v-tooltip="action.label" 
+				:icon="selectedStyles.has('textDirection') ? 'format_textdirection_l_to_r' : 'format_textdirection_r_to_l'" 
+				thin flat
+				:aria-label="action.name" 
+				:class="[action.class, { active: selectedStyles.has('textDirection') }]"
+				class=""
+				tabindex="-1"
+				@click="runAction(action.name)"
+			/>
 			<Btn
 				v-else-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
 				:aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]"

package/src/components/form/inputs/RichText/composables/useCommands.ts

@@ -1,10 +1,46 @@
 import type { EditorState } from '../richTextTypes'
 import { createCommandExecutor, createCommandRegistry } from '../utils/commands'
+import { isStyleActive } from '../utils/selection'
 
 export function useCommands(state: EditorState, debug?: { logCommand: (command: string, value?: string) => void }) {
 	const commands = createCommandRegistry(state)
 	const executor = createCommandExecutor(state, commands)
 
+	// Function to immediately update styles
+	const updateStylesImmediately = () => {
+		if (!state.doc) return
+
+		const styles = new Set<string>()
+		const styleTypes = [
+			'bold',
+			'italic',
+			'underline',
+			'h1',
+			'h2',
+			'h3',
+			'h4',
+			'h5',
+			'h6',
+			'blockquote',
+			'p',
+			'orderedList',
+			'unorderedList',
+			'alignLeft',
+			'alignCenter',
+			'alignRight',
+			'alignJustify',
+			'textDirection'
+		]
+
+		styleTypes.forEach((style) => {
+			if (isStyleActive(style, state.doc!)) {
+				styles.add(style)
+			}
+		})
+
+		state.selectedStyles = styles
+	}
+
 	return {
 		execute: (command: string, value?: string) => {
 			if (!state.doc) {
@@ -48,6 +84,12 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			// Execute the command
 			try {
 				executor.execute(command, value)
+
+				// Update styles immediately after command execution for all commands except view state
+				const viewCommands = ['splitView', 'codeView', 'fullScreen']
+				if (!viewCommands.includes(command)) {
+					updateStylesImmediately()
+				}
 			} catch (e) {
 				console.error('[useCommands] Error during command execution:', e)
 			}

package/src/components/form/inputs/RichText/composables/useEditor.ts

@@ -72,7 +72,12 @@ export function useEditor() {
 				'blockquote',
 				'p',
 				'orderedList',
-				'unorderedList'
+				'unorderedList',
+				'alignLeft',
+				'alignCenter',
+				'alignRight',
+				'alignJustify',
+				'textDirection'
 			]
 			styleTypes.forEach((style) => {
 				if (state.doc && isStyleActive(style, state.doc)) {
@@ -151,10 +156,8 @@ export function useEditor() {
 						state.range = newSelection.getRangeAt(0).cloneRange()
 					}
 
-					// Update styles less frequently
-					requestAnimationFrame(() => {
-						updateState.styles()
-					})
+					// Update styles immediately for better responsiveness
+					updateState.styles()
 				}
 			} catch (e) {
 				state.selection = null

package/src/components/form/inputs/RichText/composables/useEditorKeyboard.ts

@@ -31,105 +31,8 @@ const shortcuts: KeyboardShortcut[] = [
 export function useEditorKeyboard(doc: Document, executor: CommandExecutor): void {
 	// Handle keyboard shortcuts
 	doc.addEventListener('keydown', (e) => {
-		// Handle Enter key in lists and empty editor
-		if (e.key === 'Enter' && !e.shiftKey) {
-			const selection = doc.getSelection()
-			if (!selection || !selection.rangeCount) return
-
-			const range = selection.getRangeAt(0)
-			const container = range.commonAncestorContainer
-			const listItem = (container.nodeType === 3 ? container.parentElement : container as Element)?.closest('li')
-
-			if (listItem) {
-				// If we're at the end of a list item
-				if (range.collapsed && isAtEndOfNode(listItem, range)) {
-					// If the list item is empty, break out of the list
-					if (isNodeEmpty(listItem)) {
-						e.preventDefault()
-						// Create a new paragraph after the list
-						const list = listItem.parentElement
-						if (!list) return
-
-						// Remove the empty list item
-						listItem.remove()
-
-						// If the list is now empty, remove it
-						if (!list.querySelector('li')) {
-							const p = doc.createElement('p')
-							p.innerHTML = ''
-							list.parentNode?.replaceChild(p, list)
-
-							// Set cursor in the new paragraph
-							range.selectNodeContents(p)
-							range.collapse(true)
-							selection.removeAllRanges()
-							selection.addRange(range)
-						}
-					} else {
-						// Create a new list item
-						e.preventDefault()
-						const newLi = doc.createElement('li')
-						newLi.innerHTML = '' // Start with empty list item
-						listItem.insertAdjacentElement('afterend', newLi)
-
-						// Move cursor to new list item
-						range.selectNodeContents(newLi)
-						range.collapse(true)
-						selection.removeAllRanges()
-						selection.addRange(range)
-					}
-				}
-			} else {
-				// Handle Enter in regular content - create new paragraph
-				const blockElement = (container.nodeType === 3 ? container.parentElement : container as Element)?.closest('p,h1,h2,h3,h4,h5,h6,blockquote,div')
-
-				if (blockElement && range.collapsed) {
-					// If we're at the end of a block element, create a new paragraph
-					if (isAtEndOfNode(blockElement, range)) {
-						e.preventDefault()
-						const newP = doc.createElement('p')
-						newP.innerHTML = ''
-						blockElement.insertAdjacentElement('afterend', newP)
-
-						// Move cursor to new paragraph
-						range.selectNodeContents(newP)
-						range.collapse(true)
-						selection.removeAllRanges()
-						selection.addRange(range)
-					}
-				} else if (!blockElement && doc.body.textContent?.trim()) {
-					// If we're typing directly in the body and press Enter, wrap in paragraphs
-					e.preventDefault()
-
-					// Split content at cursor position
-					const textContent = doc.body.textContent || ''
-					const cursorPos = range.startOffset
-					const beforeText = textContent.substring(0, cursorPos).trim()
-					const afterText = textContent.substring(cursorPos).trim()
-
-					// Clear body
-					doc.body.innerHTML = ''
-
-					// Create first paragraph with before text
-					if (beforeText) {
-						const p1 = doc.createElement('p')
-						p1.textContent = beforeText
-						doc.body.appendChild(p1)
-					}
-
-					// Create second paragraph for after text
-					const p2 = doc.createElement('p')
-					p2.textContent = afterText
-					doc.body.appendChild(p2)
-
-					// Set cursor at beginning of second paragraph
-					range.selectNodeContents(p2)
-					range.collapse(true)
-					selection.removeAllRanges()
-					selection.addRange(range)
-				}
-			}
-		}
+		// Remove Enter key handling from here - it's handled in setupAutoWrapping in index.vue
+		// This was causing conflicts with the main Enter key handler
 
 		// Handle other keyboard shortcuts
 		if (!e.ctrlKey && !e.metaKey) return
@@ -150,32 +53,3 @@ export function useEditorKeyboard(doc: Document, executor: CommandExecutor): voi
 		}
 	})
 }
-
-// Helper function to check if we're at the end of a node
-function isAtEndOfNode(node: Node, range: Range): boolean {
-	if (node.nodeType === 3) { // Text node
-		return range.startOffset === (node as Text).length
-	}
-
-	const { lastChild } = node
-	if (!lastChild) return true
-
-	if (lastChild.nodeType === 3) { // Text node
-		return range.startContainer === lastChild && range.startOffset === lastChild.textContent?.length
-	}
-
-	return range.startContainer === node && range.startOffset === node.childNodes.length
-}
-
-// Helper function to check if a node is empty (contains only whitespace or <br> or &nbsp;)
-function isNodeEmpty(node: Node): boolean {
-	const text = node.textContent?.replace(/\s/g, '') || '' // Remove non-breaking spaces and whitespace
-	if (text) return false
-
-	// Check for <br> tags
-	const brElements = (node as Element).getElementsByTagName('br')
-	if (brElements.length === 0) return true
-
-	// If there's only one <br> and it's the only content (besides potential &nbsp;), consider it empty
-	return brElements.length === 1 && node.childNodes.length <= 2 // Allow for &nbsp; + <br>
-}

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

@@ -9,10 +9,10 @@ export const tableTools: ToolbarConfig = [
 	'insertColumnLeft',
 	'insertColumnRight',
 	'deleteColumn',
-	'alignLeft',
-	'alignCenter',
-	'alignRight',
-	'alignJustify',
+	'tableAlignLeft',
+	'tableAlignCenter',
+	'tableAlignRight',
+	'tableAlignJustify',
 	'deleteTable'
 ]
 
@@ -33,6 +33,12 @@ export const basicToolbarConfig: ToolbarConfig = [
 	'italic',
 	'underline',
 	'separator',
+	'alignLeft',
+	'alignCenter',
+	'alignRight',
+	'alignJustify',
+	'textDirection',
+	'separator',
 	'link',
 	'image',
 	'embed',
@@ -100,6 +106,10 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'alignCenter', label: 'Align Center', icon: 'format_align_center' },
 	{ name: 'alignRight', label: 'Align Right', icon: 'format_align_right' },
 	{ name: 'alignJustify', label: 'Align Justify', icon: 'format_align_justify' },
+	{ name: 'tableAlignLeft', label: 'Table Align Left', icon: 'format_align_left' },
+	{ name: 'tableAlignCenter', label: 'Table Align Center', icon: 'format_align_center' },
+	{ name: 'tableAlignRight', label: 'Table Align Right', icon: 'format_align_right' },
+	{ name: 'tableAlignJustify', label: 'Table Align Justify', icon: 'format_align_justify' },
 	{ name: 'indent', label: 'Indent', icon: 'format_indent_increase' },
 	{ name: 'outdent', label: 'Outdent', icon: 'format_indent_decrease' },
 	{ name: 'fontColor', label: 'Font Color', icon: 'format_color_text' },
@@ -119,4 +129,5 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'redo', label: 'Redo', icon: 'redo' },
 	{ name: 'separator' },
 	{ name: 'fullScreen', label: 'Full Screen', icon: 'fullscreen', class: 'ms-auto' },
+	{ name: 'textDirection', label: 'Text Direction (RTL/LTR)', icon: 'format_textdirection_r_to_l' },
 ]