@bagelink/vue 1.4.141 → 1.4.145

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

@@ -2,55 +2,240 @@
 import type { ToolbarConfig, ToolbarConfigOption, ToolbarOption } from '../richTextTypes'
 import { Btn, Dropdown } from '@bagelink/vue'
 import { basicToolbarConfig, toolbarOptions } from '../config'
-import GridBox from './gridBox.vue'
+import TableGridSelector from './TableGridSelector.vue'
 
-const { config = basicToolbarConfig, selectedStyles } = defineProps<{
+const {
+	config = basicToolbarConfig,
+	selectedStyles,
+	hideImages = false,
+	hideVideos = false,
+	hideEmbeds = false,
+	hideTables = false,
+	hideAlignment = false,
+	hideDirections = false,
+	hideH5H6 = false,
+	hide = []
+} = defineProps<{
 	config?: ToolbarConfig
 	selectedStyles: Set<string>
+	hideImages?: boolean
+	hideVideos?: boolean
+	hideEmbeds?: boolean
+	hideTables?: boolean
+	hideAlignment?: boolean
+	hideDirections?: boolean
+	hideH5H6?: boolean
+	hide?: string[]
 }>()
 const emit = defineEmits(['action'])
 
-const configToOption = (action: ToolbarConfigOption) => toolbarOptions.find(option => option.name === action) as ToolbarOption
+// Function to get the current alignment icon based on active styles
+function getCurrentAlignmentIcon(): string {
+	if (selectedStyles.has('alignLeft')) return 'format_align_left'
+	if (selectedStyles.has('alignCenter')) return 'format_align_center'
+	if (selectedStyles.has('alignRight')) return 'format_align_right'
+	if (selectedStyles.has('alignJustify')) return 'format_align_justify'
+	return 'format_align_left' // default
+}
+
+// Function to check if any alignment is active
+function isAlignmentActive(): boolean {
+	return selectedStyles.has('alignLeft') ||
+		selectedStyles.has('alignCenter') ||
+		selectedStyles.has('alignRight') ||
+		selectedStyles.has('alignJustify')
+}
+
+// Helper function to check if an action should be hidden
+function shouldHideAction(actionName: string): boolean {
+	// Check if it's in the hide array - this covers ALL items including:
+	// bold, italic, underline, h1, h2, h3, h4, h5, h6, link, image, video, embed, 
+	// ul, ol, blockquote, code, clear, direction, table, fullScreen
+	if (hide.includes(actionName)) return true
+
+	// Alternative name mappings for some actions
+	const alternativeNames: Record<string, string[]> = {
+		'image': ['insertImage', 'image'],
+		'video': ['insertVideo', 'video'],
+		'embed': ['insertEmbed', 'embed'],
+		'table': ['insertTable'],
+		'direction': ['textDirection'],
+		'fullScreen': ['fullScreen'],
+		'ul': ['unorderedList'],
+		'ol': ['orderedList'],
+		'splitView': ['splitView'],
+		'p': ['p'],
+		'align': ['alignMenu'],
+		'alignment': ['alignMenu']
+	}
+
+	// Check alternative names
+	for (const [hideKey, actionNames] of Object.entries(alternativeNames)) {
+		if (hide.includes(hideKey) && actionNames.includes(actionName)) {
+			return true
+		}
+	}
+
+	// Map action names to check against specific hide props (for backward compatibility)
+	const actionMap: Record<string, boolean> = {
+		'insertImage': hideImages,
+		'insertVideo': hideVideos,
+		'insertEmbed': hideEmbeds,
+		'insertTable': hideTables,
+		'alignMenu': hideAlignment,
+		'textDirection': hideDirections,
+		'h5': hideH5H6,
+		'h6': hideH5H6
+	}
+
+	return actionMap[actionName] || false
+}
+
+// Helper function to check if a separator should be shown
+function shouldShowSeparator(currentIndex: number): boolean {
+	const allActions = config.map(configToOption).filter(Boolean)
+
+	// Simple approach: find the last visible item before this separator
+	let lastVisibleBeforeIndex = -1
+	for (let i = currentIndex - 1; i >= 0; i--) {
+		const action = allActions[i]
+		if (action && action.name !== 'separator' && !shouldHideAction(action.name)) {
+			lastVisibleBeforeIndex = i
+			break
+		}
+	}
+
+	// Find the first visible item after this separator
+	let firstVisibleAfterIndex = -1
+	for (let i = currentIndex + 1; i < allActions.length; i++) {
+		const action = allActions[i]
+		if (action && action.name !== 'separator' && !shouldHideAction(action.name)) {
+			firstVisibleAfterIndex = i
+			break
+		}
+	}
+
+	// Don't show if we don't have visible items on both sides
+	if (lastVisibleBeforeIndex === -1 || firstVisibleAfterIndex === -1) {
+		return false
+	}
+
+	// Check if there's already a visible separator between these items
+	for (let i = lastVisibleBeforeIndex + 1; i < currentIndex; i++) {
+		const action = allActions[i]
+		if (action && action.name === 'separator') {
+			// There's already a separator closer to the visible items
+			return false
+		}
+	}
+
+	return true
+} const configToOption = (action: ToolbarConfigOption) => toolbarOptions.find(option => option.name === action) as ToolbarOption
 
 function runAction(name: ToolbarConfigOption, value?: string) {
+	console.log('EditorToolbar: runAction called', { name, value })
 	emit('action', name, value)
 }
+
+function handleQuickTableInsert(rows: number, cols: number) {
+	// Create a simple table quickly
+	const table = document.createElement('table')
+	table.style.width = '100%'
+	table.style.borderCollapse = 'collapse'
+	table.style.marginBottom = '1rem'
+
+	// Add header
+	const thead = document.createElement('thead')
+	const headerRow = thead.insertRow()
+	for (let j = 0; j < cols; j++) {
+		const th = document.createElement('th')
+		th.innerHTML = `Header ${j + 1}`
+		th.style.padding = '8px'
+		th.style.border = '1px solid #ddd'
+		th.style.backgroundColor = '#f4f4f4'
+		headerRow.appendChild(th)
+	}
+	table.appendChild(thead)
+
+	// Add body
+	const tbody = document.createElement('tbody')
+	for (let i = 0; i < rows; i++) {
+		const row = tbody.insertRow()
+		for (let j = 0; j < cols; j++) {
+			const cell = row.insertCell()
+			cell.innerHTML = '&nbsp;'
+			cell.style.padding = '8px'
+			cell.style.border = '1px solid #ddd'
+		}
+	}
+	table.appendChild(tbody)
+
+	emit('action', 'insertTable', table.outerHTML)
+}
+
+function handleOpenAdvanced() {
+	// The advanced table editor is now handled by the main RichText component
+	// through the insertTable command which opens the main modal
+	emit('action', 'insertTable')
+}
 </script>
 
 <template>
-	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
-		<template v-for="(action, index) in config.map(configToOption).filter(Boolean)" :key="index">
-			<Dropdown v-if="action.name === 'insertTable'" placement="bottom-start" thin flat icon="table">
-				<template #default="{ hide }">
-					<GridBox
-						:gridSize="5" @select="(value) => {
-							runAction('insertTable', value);
-							hide();
-						}"
-					/>
-				</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) }]"
-				class=""
-				tabindex="-1"
-				@click="runAction(action.name)"
-			/>
-			<span v-else-if="action.name === 'separator'" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>
-		</template>
-	</div>
+<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar" style="position: relative;">
+	<template v-for="(action, index) in config.map(configToOption).filter(Boolean)" :key="index">
+		<!-- Tables -->
+		<TableGridSelector v-if="action.name === 'insertTable' && !shouldHideAction('insertTable')" @insert="handleQuickTableInsert" @open-advanced="handleOpenAdvanced" />
+		<!-- Images -->
+		<Btn v-else-if="action.name === 'insertImage' && !shouldHideAction('insertImage')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- Videos -->
+		<Btn v-else-if="action.name === 'insertVideo' && !shouldHideAction('insertVideo')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- Embeds -->
+		<Btn v-else-if="action.name === 'insertEmbed' && !shouldHideAction('insertEmbed')" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- Alignment Menu -->
+		<Dropdown v-else-if="action.name === 'alignMenu' && !shouldHideAction('alignMenu')" placement="bottom-start" thin flat :icon="getCurrentAlignmentIcon()"
+			:class="{ 'alignment-active': isAlignmentActive() }">
+			<template #default="{ hide }">
+				<div class="flex flex-column p-025">
+					<Btn thin flat icon="format_align_left" :class="{ active: selectedStyles.has('alignLeft') }" @click="runAction('alignLeft'); hide()" />
+					<Btn thin flat icon="format_align_center" :class="{ active: selectedStyles.has('alignCenter') }" @click="runAction('alignCenter'); hide()" />
+					<Btn thin flat icon="format_align_right" :class="{ active: selectedStyles.has('alignRight') }" @click="runAction('alignRight'); hide()" />
+					<Btn thin flat icon="format_align_justify" :class="{ active: selectedStyles.has('alignJustify') }" @click="runAction('alignJustify'); hide()" />
+				</div>
+			</template>
+		</Dropdown>
+
+		<!-- Text Direction -->
+		<Btn v-else-if="action.name === 'textDirection' && !shouldHideAction('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)" />
+
+		<!-- H5 and H6 -->
+		<Btn v-else-if="(action.name === 'h5' || action.name === 'h6') && !shouldHideAction(action.name)" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name"
+			:class="[action.class, { active: selectedStyles.has(action.name) }]" class="" tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- All other buttons - check if they should be hidden by the hide array -->
+		<Btn v-else-if="action.name !== 'separator' &&
+			action.name !== 'insertTable' &&
+			action.name !== 'insertImage' &&
+			action.name !== 'insertVideo' &&
+			action.name !== 'insertEmbed' &&
+			action.name !== 'alignMenu' &&
+			action.name !== 'textDirection' &&
+			action.name !== 'h5' &&
+			action.name !== 'h6' &&
+			!shouldHideAction(action.name)" v-tooltip="action.label" :icon="action.icon" thin flat :aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]" class=""
+			tabindex="-1" @click="runAction(action.name)" />
+
+		<!-- Separator -->
+		<span v-else-if="action.name === 'separator' && shouldShowSeparator(index)" :key="`separator-${index}`" class="opacity-2 mb-025">|</span>
+	</template>
+</div>
 </template>
 
 <style scoped>
@@ -59,8 +244,28 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 	color: white;
 }
 .toolbar :deep(.active):hover {
-	color: var(--bgl-black);
+	background: var(--bgl-primary) !important;
+		color: white;
+}
+/* Headings menu styling */
+.toolbar :deep(.dropdown-content) {
+	min-width: 40px;
+}
+
+.toolbar :deep(.dropdown-content .btn) {
+	min-width: 32px;
+	height: 32px;
+	padding: 0;
+}
+/* Alignment active state */
+.alignment-active :deep(button) {
+	background: var(--bgl-primary) !important;
+	color: white !important;
+}
+
+.alignment-active :deep(button:hover) {
+	background: var(--bgl-primary) !important;
+	color: white !important;
 }
 </style>
 
-<style scoped></style>

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Btn, Dropdown } from '@bagelink/vue'
+
+
+const emit = defineEmits<{
+    insert: [rows: number, cols: number]
+    openAdvanced: []
+}>()
+
+const hoveredRow = ref(0)
+const hoveredCol = ref(0)
+
+const maxRows = 10
+const maxCols = 10
+
+const gridCells = computed(() => {
+    const cells = []
+    for (let row = 1; row <= maxRows; row++) {
+        for (let col = 1; col <= maxCols; col++) {
+            cells.push({
+                row,
+                col,
+                isActive: row <= hoveredRow.value && col <= hoveredCol.value
+            })
+        }
+    }
+    return cells
+})
+
+const selectionText = computed(() => {
+    if (hoveredRow.value === 0 || hoveredCol.value === 0) {
+        return 'Select table size'
+    }
+    return `${hoveredRow.value} × ${hoveredCol.value}`
+})
+
+const handleCellHover = (row: number, col: number) => {
+    hoveredRow.value = row
+    hoveredCol.value = col
+}
+
+const handleCellClick = (row: number, col: number, hide: () => void) => {
+    emit('insert', row, col)
+    hide()
+}
+
+const handleAdvanced = (hide: () => void) => {
+    emit('openAdvanced')
+    hide()
+}
+
+const handleMouseLeave = () => {
+    hoveredRow.value = 0
+    hoveredCol.value = 0
+}
+</script>
+
+<template>
+<Dropdown placement="bottom-start" thin flat icon="table">
+    <template #default="{ hide }">
+        <div class="table-grid-selector p-075">
+            <!-- Header -->
+            <div class="txt-center mb-075">
+                <div style="font-size: 14px; font-weight: 500; color: #333; margin-bottom: 4px;">
+                    {{ selectionText }}
+                </div>
+                <div style="font-size: 12px; color: #666;">
+                    Hover to select size
+                </div>
+            </div>
+
+            <!-- Grid -->
+            <div style="display: grid; grid-template-columns: repeat(10, 20px); grid-template-rows: repeat(10, 20px); gap: 2px; margin-bottom: 12px; direction: ltr;" @mouseleave="handleMouseLeave">
+                <div v-for="cell in gridCells" :key="`${cell.row}-${cell.col}`" @mouseenter="handleCellHover(cell.row, cell.col)" @click="handleCellClick(cell.row, cell.col, hide)" :style="{
+                    width: '20px',
+                    height: '20px',
+                    border: '1px solid #ddd',
+                    backgroundColor: cell.isActive ? 'var(--bgl-primary)' : '#fff',
+                    cursor: 'pointer',
+                                    borderRadius: '2px',
+                                    transition: 'background-color 0.1s ease'
+                                }">
+                </div>
+                </div>
+                
+                <!-- Advanced button -->
+                <div class="border-top pt-075">
+                    <Btn @click="handleAdvanced(hide)" value="Advanced Settings" icon="settings" class="bg-gray-30 color-black" />
+                </div>
+                </div>
+                </template>
+                </Dropdown>
+</template>

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

@@ -15,6 +15,7 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			'bold',
 			'italic',
 			'underline',
+			'link',
 			'h1',
 			'h2',
 			'h3',
@@ -29,7 +30,9 @@ export function useCommands(state: EditorState, debug?: { logCommand: (command:
 			'alignCenter',
 			'alignRight',
 			'alignJustify',
-			'textDirection'
+			'textDirection',
+			'ltrDirection',
+			'rtlDirection'
 		]
 
 		styleTypes.forEach((style) => {

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

@@ -1,5 +1,4 @@
 import type { EditorState, EditorDebugInterface, EditorDebuggerInstance } from '../richTextTypes'
-import { useModal } from '@bagelink/vue'
 import { reactive } from 'vue'
 import { EditorDebugger } from '../utils/debug'
 import { isStyleActive } from '../utils/selection'
@@ -34,7 +33,6 @@ function restoreIframes(doc: Document, content: string, iframes: HTMLIFrameEleme
 }
 
 export function useEditor() {
-	const modal = useModal()
 	let cleanupListeners: (() => void) | null = null
 
 	const state = reactive<EditorState>({
@@ -50,7 +48,6 @@ export function useEditor() {
 		redoStack: [],
 		rangeCount: 0,
 		range: null,
-		modal,
 		debug: undefined
 	})
 
@@ -77,7 +74,9 @@ export function useEditor() {
 				'alignCenter',
 				'alignRight',
 				'alignJustify',
-				'textDirection'
+				'textDirection',
+				'ltrDirection',
+				'rtlDirection'
 			]
 			styleTypes.forEach((style) => {
 				if (state.doc && isStyleActive(style, state.doc)) {
@@ -115,7 +114,8 @@ export function useEditor() {
 							try {
 								selection.removeAllRanges()
 								selection.addRange(range)
-							} catch (e) {
+							} catch {
+							// Range restoration failed, ignore
 							}
 						}
 					}
@@ -159,7 +159,7 @@ export function useEditor() {
 					// Update styles immediately for better responsiveness
 					updateState.styles()
 				}
-			} catch (e) {
+			} catch {
 				state.selection = null
 				state.range = null
 				state.rangeCount = 0

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

@@ -14,6 +14,7 @@ const shortcuts: KeyboardShortcut[] = [
 	{ key: 'b', command: 'bold' },
 	{ key: 'i', command: 'italic' },
 	{ key: 'u', command: 'underline' },
+	{ key: 'k', command: 'link' },
 	{ key: 'z', command: 'undo' },
 	{ key: 'z', modifiers: { shift: true }, command: 'redo' },
 	{ key: 'y', command: 'redo' },

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

@@ -33,16 +33,21 @@ export const basicToolbarConfig: ToolbarConfig = [
 	'italic',
 	'underline',
 	'separator',
-	'alignLeft',
-	'alignCenter',
-	'alignRight',
-	'alignJustify',
-	'textDirection',
+	'alignMenu',
+	'ltrDirection',
+	'rtlDirection',
+	'separator',
+	'insertTable',
 	'separator',
 	'link',
 	'image',
+	'video',
 	'embed',
 	'clear',
+	'separator',
+	'undo',
+	'redo',
+	'separator',
 	'splitView',
 	'fullScreen',
 ]
@@ -71,6 +76,7 @@ export const fullToolbarConfig: ToolbarConfig = [
 	'separator',
 	'link',
 	'image',
+	'video',
 	'embed',
 	'separator',
 	'splitView',
@@ -84,12 +90,15 @@ export const fullToolbarConfig: ToolbarConfig = [
 ]
 
 export const toolbarOptions: ToolbarOption[] = [
-	{ name: 'h1', label: 'h1', icon: 'format_h1' },
-	{ name: 'h2', label: 'h2', icon: 'format_h2' },
-	{ name: 'h3', label: 'h3', icon: 'format_h3' },
-	{ name: 'h4', label: 'h4', icon: 'format_h4' },
-	{ name: 'h5', label: 'h5', icon: 'format_h5' },
-	{ name: 'h6', label: 'h6', icon: 'format_h6' },
+	{ name: 'headingsMenu', label: 'Headings', icon: 'title' },
+	{ name: 'mediaMenu', label: 'Media', icon: 'perm_media' },
+	{ name: 'alignMenu', label: 'Alignment', icon: 'format_align_left' },
+	{ name: 'h1', label: 'Heading 1', icon: 'format_h1' },
+	{ name: 'h2', label: 'Heading 2', icon: 'format_h2' },
+	{ name: 'h3', label: 'Heading 3', icon: 'format_h3' },
+	{ name: 'h4', label: 'Heading 4', icon: 'format_h4' },
+	{ name: 'h5', label: 'Heading 5', icon: 'format_h5' },
+	{ name: 'h6', label: 'Heading 6', icon: 'format_h6' },
 	{ name: 'p', label: 'Paragraph', icon: 'format_paragraph' },
 	{ name: 'blockquote', label: 'Blockquote', icon: 'format_quote' },
 	{ name: 'bold', label: 'Bold', icon: 'format_bold' },
@@ -99,6 +108,7 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ name: 'unorderedList', label: 'Unordered List', icon: 'format_list_bulleted' },
 	{ name: 'link', label: 'Link', icon: 'add_link' },
 	{ name: 'image', label: 'Image', icon: 'add_photo_alternate' },
+	{ name: 'video', label: 'Video', icon: 'play_circle' },
 	{ name: 'embed', label: 'Embed', icon: 'media_link' },
 	{ name: 'splitView', label: 'Split View', icon: 'code' },
 	{ name: 'clear', label: 'Clear Formatting', icon: 'format_clear' },
@@ -130,4 +140,6 @@ export const toolbarOptions: ToolbarOption[] = [
 	{ 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' },
+	{ name: 'ltrDirection', label: 'Left to Right', icon: 'format_textdirection_l_to_r' },
+	{ name: 'rtlDirection', label: 'Right to Left', icon: 'format_textdirection_r_to_l' },
 ]