@bagelink/vue 1.4.139 → 1.4.145

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

@@ -19,30 +19,32 @@ export function formatting(state: EditorState) {
 		// 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()) {
-				const span = doc.createElement('span') as HTMLSpanElement
-				if (command === 'underline') span.style.textDecoration = 'underline'
-				else if (command === 'bold') span.style.fontWeight = 'bold'
-				else if (command === 'italic') span.style.fontStyle = 'italic'
-
-				if (isRTL) span.dir = 'rtl'
-				range.surroundContents(span)
+				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
 
-			const span = doc.createElement('span')
-			if (command === 'bold') span.style.fontWeight = 'bold'
-			else if (command === 'italic') span.style.fontStyle = 'italic'
-			else if (command === 'underline') span.style.textDecoration = 'underline'
+			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(span)
-			} catch (e) {
+				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()
-				span.appendChild(fragment)
-				range.insertNode(span)
+				element.appendChild(fragment)
+				range.insertNode(element)
 			}
 		}
 	}

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

@@ -1,5 +1,4 @@
 import type { ModalApi } from '../../../../../plugins/useModal'
-
 import type { EditorState } from '../richTextTypes'
 import { bagelFormUtils as frm } from '../../../../../utils'
 
@@ -53,87 +52,154 @@ export function insertImage(modal: ModalApi, state: EditorState) {
 }
 
 export function insertLink(modal: ModalApi, state: EditorState) {
-	const { range, doc } = state
-	if (!range || !doc) return
+	const { doc } = state
+	if (!doc) {
+		console.log('No doc found')
+		return
+	}
 
-	modal.showModalForm({
-		title: 'Insert Link',
-		schema: [
-			{ id: 'url', $el: 'text', label: 'URL' },
-			{ id: 'openInNewTab', $el: 'check', label: 'Open in new tab' },
-		],
-		onSubmit: (data: { url: string, openInNewTab: boolean }) => {
-			if (data.url) {
-				const anchor = doc.createElement('a')
-				anchor.href = data.url
-				if (data.openInNewTab) anchor.target = '_blank'
-				range.surroundContents(anchor)
-				state.content = doc.body.innerHTML
+	// Get current selection
+	const selection = doc.getSelection()
+	if (!selection || !selection.rangeCount) {
+		console.log('No selection found')
+		return
+	}
+
+	let range = selection.getRangeAt(0)
+
+	// If no text is selected, try to select word at cursor
+	if (range.collapsed) {
+		const success = selectWordAtCursor(doc, range)
+		if (!success) {
+			console.log('Failed to select word at cursor')
+			// Show a helpful tooltip to the user
+			const showTooltipMessage = (state as any).showTooltipMessage
+			if (showTooltipMessage) {
+				showTooltipMessage('To add a link, please select text first or place cursor within a word')
+			} else {
+				// Fallback to alert if tooltip system is not available
+				alert('To add a link, please select text first or place the cursor within a word you want to turn into a link.')
 			}
+			return
 		}
-	})
+		// Get the updated range after word selection
+		range = selection.getRangeAt(0)
+	}
+
+	// Check if we're editing an existing link
+	const commonAncestor = range.commonAncestorContainer
+	const parentElement = commonAncestor.nodeType === Node.TEXT_NODE
+		? commonAncestor.parentElement
+		: commonAncestor as Element
+
+	const existingLink = parentElement?.closest('a')
+
+	// Use the new modal function if available
+	if ((state as any).openLinkModal) {
+		(state as any).openLinkModal(selection, range, existingLink)
+		return
+	}
+
+	// Fallback - just show an alert if modal is not available
+	console.warn('Link modal not available - openLinkModal function not found')
+	alert('Link functionality requires proper modal setup')
 }
 
-export interface InsertImbedModalData { url: string, width?: number, height?: number, allowFullscreen?: boolean }
+// Helper function to select word at cursor
+function selectWordAtCursor(doc: Document, range: Range): boolean {
+	if (!range.collapsed) return true // Already has selection
+
+	let textNode = range.startContainer
+	let offset = range.startOffset
+
+	// If we're in an element node, try to find a text node
+	if (textNode.nodeType !== Node.TEXT_NODE) {
+		const element = textNode as Element
+		if (element.childNodes.length > 0 && offset < element.childNodes.length) {
+			const childNode = element.childNodes[offset]
+			if (childNode.nodeType === Node.TEXT_NODE) {
+				textNode = childNode
+				offset = 0
+			} else {
+				return false
+			}
+		} else {
+			return false
+		}
+	}
+
+	const text = textNode.textContent || ''
+	if (!text) return false
+
+	// Find word boundaries - support Hebrew, English, and numbers
+	let start = offset
+	let end = offset
+
+	// Define word characters (Hebrew, English, numbers)
+	const wordRegex = /[\u0590-\u05FF\u0600-\u06FF\w]/
+
+	// Move start backwards to find beginning of word
+	while (start > 0 && wordRegex.test(text[start - 1])) {
+		start--
+	}
+
+	// Move end forwards to find end of word
+	while (end < text.length && wordRegex.test(text[end])) {
+		end++
+	}
+
+	// If we found a word
+	if (start < end) {
+		range.setStart(textNode, start)
+		range.setEnd(textNode, end)
+
+		const selection = doc.getSelection()
+		if (selection) {
+			selection.removeAllRanges()
+			selection.addRange(range)
+		}
+		return true
+	}
+
+	return false
+}
+
+export interface InsertImbedModalData {
+	src: string
+	width: number
+	height: number
+	allowfullscreen: boolean
+}
 
 export function insertEmbed(modal: ModalApi, state: EditorState) {
 	const { range, doc } = state
 	if (!range || !doc) return
 
-	modal.showModalForm<InsertImbedModalData
-	>({
-		title: 'Insert Embed',
+	modal.showModalForm<InsertImbedModalData>({
+		title: 'Embed iframe',
 		schema: [
-			{ id: 'url', $el: 'text', label: 'URL', attrs: { placeholder: 'Enter URL (YouTube, Vimeo, etc.)' } },
+			{ id: 'src', $el: 'text', label: 'Source URL' },
 			frm.frmRow(
-				frm.numField('width', 'Width', { min: 200, placeholder: '560' }),
-				frm.numField('height', 'Height', { min: 200, placeholder: '315' })
+				frm.numField('width', 'Width', { min: 1 }),
+				frm.numField('height', 'Height', { min: 1 }),
 			),
-			{ id: 'allowFullscreen', $el: 'check', label: 'Allow Fullscreen', attrs: { value: true } },
+			{ id: 'allowfullscreen', $el: 'check', label: 'Allow Fullscreen' },
 		],
-		onSubmit: (data: { url: string, width?: number, height?: number, allowFullscreen?: boolean }) => {
-			if (!data.url) return
-
-			// Convert common video URLs to embed URLs
-			const url = new URL(data.url)
-			let embedUrl = data.url
-
-			// YouTube
-			if (url.hostname.includes('youtube.com') || url.hostname === 'youtu.be') {
-				const videoId = url.hostname === 'youtu.be'
-					? url.pathname.slice(1)
-					: url.searchParams.get('v')
-				if (videoId) {
-					embedUrl = `https://www.youtube.com/embed/${videoId}`
-				}
-			}
-			// Vimeo
-			else if (url.hostname.includes('vimeo.com')) {
-				const videoId = url.pathname.split('/').pop()
-				if (videoId) {
-					embedUrl = `https://player.vimeo.com/video/${videoId}`
-				}
-			}
+		onSubmit: (data: InsertImbedModalData) => {
+			if (data.src) {
+				const iframe = doc.createElement('iframe')
+				Object.assign(iframe, {
+					src: data.src,
+					width: data.width || 560,
+					height: data.height || 315,
+					allowfullscreen: data.allowfullscreen || false,
+					frameborder: '0'
+				})
 
-			const iframe = doc.createElement('iframe')
-			Object.assign(iframe, {
-				src: embedUrl,
-				width: data.width || 560,
-				height: data.height || 315,
-				frameBorder: '0',
-				allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
-				allowFullscreen: data.allowFullscreen
-			})
-
-			// Create a wrapper div for proper alignment and spacing
-			const wrapper = doc.createElement('div')
-			wrapper.style.textAlign = 'center'
-			wrapper.style.margin = '1em 0'
-			wrapper.appendChild(iframe)
-
-			range.deleteContents()
-			range.insertNode(wrapper)
-			state.content = doc.body.innerHTML
+				range.collapse(false)
+				range.insertNode(iframe)
+				state.content = doc.body.innerHTML
+			}
 		}
 	})
 }

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

@@ -25,26 +25,23 @@ export function isStyleActive(style: string, doc: Document) {
 
 	// Define style checkers for different formatting types
 	const styleCheckers: { [key: string]: (el: Element) => boolean } = {
-		// Text formatting - check for elements or inline styles
+		// Text formatting - check for elements only, not CSS styles
 		bold: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			if (tagName === 'strong' || tagName === 'b') return true
-			const styles = window.getComputedStyle(el)
-			return styles.fontWeight === 'bold' || styles.fontWeight === '700'
+			// Only consider <b> and <strong> tags, not CSS bold styling
+			return tagName === 'strong' || tagName === 'b'
 		},
 
 		italic: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			if (tagName === 'em' || tagName === 'i') return true
-			const styles = window.getComputedStyle(el)
-			return styles.fontStyle === 'italic'
+			// Only consider <i> and <em> tags, not CSS italic styling
+			return tagName === 'em' || tagName === 'i'
 		},
 
 		underline: (el) => {
 			const tagName = el.tagName?.toLowerCase()
-			if (tagName === 'u') return true
-			const styles = window.getComputedStyle(el)
-			return styles.textDecoration.includes('underline')
+			// Only consider <u> tag, not CSS underline styling
+			return tagName === 'u'
 		},
 
 		// Block elements
@@ -66,6 +63,38 @@ export function isStyleActive(style: string, doc: Document) {
 		unorderedList: (el) => {
 			// Check if we're inside an unordered list
 			return !!el.closest('ul')
+		},
+
+		// Text alignment
+		alignLeft: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'start'
+		},
+		alignCenter: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'center'
+		},
+		alignRight: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'end'
+		},
+		alignJustify: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.style.textAlign === 'justify'
+		},
+
+		// Text direction
+		textDirection: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.dir === 'rtl'
+		},
+		ltrDirection: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.dir === 'ltr'
+		},
+		rtlDirection: (el) => {
+			const paragraph = el.closest('p, h1, h2, h3, h4, h5, h6')
+			return (paragraph as HTMLElement)?.dir === 'rtl'
 		}
 	}
 
@@ -141,7 +170,7 @@ export function restoreSelection(
 	try {
 		range.setStart(info.originalStart, info.originalStartOffset)
 		range.setEnd(info.originalEnd, info.originalEndOffset)
-	} catch (e) {
+	} catch {
 		if (fallbackNode) {
 			range.selectNodeContents(fallbackNode)
 		}

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

@@ -209,7 +209,7 @@ export function deleteColumn(range: Range) {
 	}
 }
 
-export function alignColumn(range: Range, alignment: 'left' | 'center' | 'right' | 'justify') {
+export function alignColumn(range: Range, alignment: 'start' | 'center' | 'end' | 'justify') {
 	const cell = range.startContainer.parentElement?.closest('td')
 	if (!cell) return
 

package/src/components/index.ts

@@ -2,6 +2,7 @@ export { default as Accordion } from './Accordion.vue'
 export { default as AccordionItem } from './AccordionItem.vue'
 export { default as AddressSearch } from './AddressSearch.vue'
 export { default as Alert } from './Alert.vue'
+export * from './analytics'
 export { default as Avatar } from './Avatar.vue'
 export { default as Badge } from './Badge.vue'
 export { default as BglVideo } from './BglVideo.vue'

package/src/components/layout/AppContent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject } from 'vue'
+import { inject, computed, onMounted, ref } from 'vue'
 import { Btn, PageTitle } from '@bagelink/vue'
 
 interface Props {
@@ -25,22 +25,30 @@ const menuState = inject('menuState') as {
 }
 
 // Inject sidebar card style state
-const sidebarCardStyle = inject('sidebarCardStyle', { value: true })
+const sidebarCardStyle = inject('sidebarCardStyle', { value: false })
+
+// Computed property to check if sidebar has card style
+const hasSidebarCard = computed(() => {
+	// Check if there's an AppSidebar with card class in the DOM
+	const sidebar = document.querySelector('.app-sidebar .card')
+	return sidebar !== null || sidebarCardStyle?.value
+})
 </script>
 
 <template>
 	<div class="app-content h-100p flex column" :class="{
-	'paddingAppContent': sidebarCardStyle?.value,
+	'paddingAppContent': hasSidebarCard,
 	}">
 		<!-- Header -->
-		<header class="app-header flex align-items-center space-between py-1 min-h60px w-100p  m_flex-wrap" :class="{
+		<header class="app-header flex align-items-center space-between py-1 m_pt-025 m_pb-05 min-h60px w-100p  m_flex-wrap" :class="{
 			'border-bottom': border,
-			'px-1': !sidebarCardStyle?.value,
-																		}">
+	'px-1': !hasSidebarCard,
+	'm_px-1': hasSidebarCard
+}">
 			<!-- Left Side -->
-			<div class="flex align-items-center gap-col-075 m_flex-wrap">
+			<div class="flex align-items-center gap-col-075 m_flex-wrap m_pe-075">
 				<!-- Menu Toggle Button -->
-				<Btn v-if="showMenuButton" flat icon="dock_to_right" @click="menuState.toggleMenu" />
+				<Btn v-if="showMenuButton" flat icon="dock_to_right" class="menuToggleButton" @click="menuState.toggleMenu" />
 		
 				<!-- Back Button -->
 				<Btn v-if="showBackButton" flat icon="arrow_back" :to="backTo" class="back-btn" />
@@ -60,21 +68,21 @@ const sidebarCardStyle = inject('sidebarCardStyle', { value: true })
 			</div>
 		
 			<!-- Right Side -->
-			<div class="flex align-items-center gap-row-05 m_flex-grow-1">
+			<div class="flex align-items-center gap-row-05 m_flex-grow-1 endNavTools">
 				<slot name="header-right" />
 			</div>
 		</header>
 		
 		<!-- Page Content -->
-		<main class="pageContent flex-grow overflow py-1 w-100p m_p-05 m_scrollbar-gutter-stable-both m_vw100" :class="{
-			'px-1': !sidebarCardStyle?.value,
+		<main class="pageContent flex-grow overflow pt-1 pb-05 w-100p m_p-05 m_scrollbar-gutter-stable-both m_vw100" :class="{
+			'px-1': !hasSidebarCard,
 								}">
 			<slot name="content">
 				<!-- Default slot for content without explicit template -->
 				<slot />
 			</slot>
 		</main>
-	</div>
+		</div>
 </template>
 
 <style>
@@ -98,27 +106,19 @@ const sidebarCardStyle = inject('sidebarCardStyle', { value: true })
 </style>
 
 <style scoped>
-.paddingAppContent {
-	padding-inline-start: 0.5rem;
-	padding-inline-end: 1rem;
-}
-
-body:has(.sidebar-collapsed) .paddingAppContent {
-	padding-inline-start: 1.5rem;
-}
 .app-content {
-	height: 100vh;
+height: 100vh;
 }
-
+				
 .app-header {
-	flex-shrink: 0;
+flex-shrink: 0;
 }
-
+				
 main {
-	min-height: 0; /* חשוב לאפשר overflow נכון */
+min-height: 0;
 }
 @media screen and (max-width: 910px) {
-	.paddingAppContent {
+	.app-header {
 		padding-inline: 0.5rem;
 	}
 }

package/src/components/layout/AppLayout.vue

@@ -38,11 +38,11 @@ function closeOnMobile() {
 // Computed styles for main content margin
 const mainContentStyles = computed(() => {
 	if (isMobile.value) {
-		return { marginLeft: '0' }
+		return { marginInlineStart: '0' }
 	}
 	const collapsedWidth = props.sidebarCardStyle ? '82px' : '66px'
 	return {
-		marginLeft: isOpen.value ? props.sidebarWidth : collapsedWidth
+		marginInlineStart: isOpen.value ? props.sidebarWidth : collapsedWidth
 	}
 })
 
@@ -56,6 +56,9 @@ provide('menuState', {
 	sidebarCollapsedWidth: props.sidebarCardStyle ? '82px' : '66px'
 })
 
+// Provide sidebar card style based on prop
+provide('sidebarCardStyle', { value: props.sidebarCardStyle })
+
 // Initialize
 onMounted(() => {
 	checkMobile()
@@ -101,6 +104,14 @@ onUnmounted(() => {
 	height: 100vh;
 	overflow: hidden;
 }
+.app-layout:has(.cardWrapSide) {
+	padding-inline-start: 0.5rem;
+	padding-inline-end: 1rem;
+}
+
+.app-layout:has(.sidebar-collapsed .cardWrapSide) {
+	padding-inline-start: 1.5rem;
+}
 
 /* Overlay for mobile */
 .overlay {
@@ -114,11 +125,18 @@ onUnmounted(() => {
 .main-content {
 	flex: 1;
 	overflow: hidden;
-	transition: margin-left 400ms ease;
+	transition: margin-inline-start 400ms ease;
 		min-height: 100vh
 	}
 	
 	.page-content {
 		overflow: auto;
 	}
+@media screen and (max-width: 910px) {
+	.app-layout:has(.cardWrapSide),
+	.app-layout:has(.sidebar-collapsed .cardWrapSide) {
+		padding-inline-start: 0rem;
+		padding-inline-end: 0rem;
+	}
+}
 </style>

package/src/components/layout/AppSidebar.vue

@@ -65,7 +65,7 @@ const sidebarStyles = computed(() => {
 	let width = '280px'
 
 	if (!menuState.isMobile.value) {
-		const collapsedWidth = props.card ? '82px' : '76px'
+		const collapsedWidth = props.card ? '82px' : '68px'
 		width = menuState.isOpen.value ? menuState.sidebarWidth : collapsedWidth
 	}
 
@@ -100,7 +100,7 @@ function logout() {
 	...(props.card && { borderRadius: 'var(--card-border-radius)' }),
 }"
 			:class="{
-				card: props.card,
+	'card cardWrapSide': props.card,
 	'ps-05': !menuState.isOpen.value,
 				'scrollbar-gutter-both': menuState.isOpen.value,
 	aside_frame: props.frame,
@@ -267,5 +267,8 @@ function logout() {
 	.sidebar-mobile-closed {
 		transform: translateX(-100%);
 	}
+				[dir="rtl"] .sidebar-mobile-closed {
+					transform: translateX(100%);
+				}
 }
 </style>