@bagelink/vue 1.5.13 → 1.5.17

package/package.json

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

package/src/components/RouterWrapper.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Icon } from '@bagelink/vue'
+import Loading from './Loading.vue'
 </script>
 
 <template>
 	<RouterView v-slot="{ Component, route }">
 		<slot v-if="!Component">
-			<div class="w-100p h-100p flex justify-content-center">
-				<Icon name="border_clear" size="4" />
+			<div class="w-100p h-100vh flex justify-content-center">
+				<Loading />
 			</div>
 		</slot>
 		<transition v-else :duration="300" name="slide-fade" mode="out-in" appear>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ToolbarConfig } from './richTextTypes'
 import { CodeEditor, copyText, Btn, Modal, BglVideo, Icon, Card, ColorInput } from '@bagelink/vue'
-import { watch, onUnmounted, onBeforeUnmount, ref, computed, useAttrs } from 'vue'
+import { watch, onUnmounted, onBeforeUnmount, onMounted, ref, computed, useAttrs } from 'vue'
 import CheckInput from '../CheckInput.vue'
 import NumberInput from '../NumberInput.vue'
 import SelectInput from '../SelectInput.vue'
@@ -52,6 +52,102 @@ const editor = useEditor()
 const isInitializing = ref(false)
 const hasInitialized = ref(false)
 const commands = useCommands(editor.state, editor.state.debug)
+
+// Reactive theme colors with forced reactivity
+const forceUpdate = ref(0)
+const currentInputColor = computed(() => {
+	// Force reactivity by using forceUpdate
+	void forceUpdate.value
+
+	if (typeof document !== 'undefined') {
+		const computedStyle = getComputedStyle(document.documentElement)
+		const color = computedStyle.getPropertyValue('--input-color').trim()
+		console.log('🎨 currentInputColor computed:', color, 'forceUpdate:', forceUpdate.value)
+		return color || '#000'
+	}
+	return '#000'
+})
+
+const currentTextColor = computed(() => {
+	const inputColor = currentInputColor.value
+	const textColor = props.textColor || (inputColor && inputColor.length > 0 && inputColor !== '#000' ? inputColor : 'inherit')
+	console.log('🎨 currentTextColor computed:', textColor, 'from inputColor:', inputColor)
+	return textColor
+})
+
+// Set up theme observation with MutationObserver
+let themeObserver: MutationObserver | null = null
+
+onMounted(() => {
+	if (typeof document !== 'undefined') {
+		themeObserver = new MutationObserver((mutations) => {
+			let shouldUpdate = false
+			mutations.forEach((mutation) => {
+				if (mutation.type === 'attributes') {
+					const { attributeName } = mutation
+					if (attributeName === 'data-theme'
+						|| attributeName === 'class'
+						|| attributeName === 'style') {
+						shouldUpdate = true
+					}
+				}
+			})
+
+			if (shouldUpdate) {
+				console.log('🔄 Theme change detected, forcing update')
+				forceUpdate.value++
+
+				// Also directly update iframe if initialized
+				if (hasInitialized.value) {
+					setTimeout(() => {
+						updateIframeColors()
+					}, 50)
+				}
+			}
+		})
+
+		// Watch for attribute changes on document element
+		themeObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ['data-theme', 'class', 'style']
+		})
+
+		// Also watch body for theme class changes
+		if (document.body) {
+			themeObserver.observe(document.body, {
+				attributes: true,
+				attributeFilter: ['class', 'data-theme']
+			})
+		}
+	}
+})
+
+onBeforeUnmount(() => {
+	themeObserver?.disconnect()
+})
+
+// Global testing functions
+if (typeof window !== 'undefined') {
+	(window as any).testRichTextTheme = () => {
+		console.log('🧪 Testing RichText theme:', {
+			currentInputColor: currentInputColor.value,
+			currentTextColor: currentTextColor.value,
+			hasInitialized: hasInitialized.value,
+			hasIframe: !!iframe.value,
+			cssVar: getComputedStyle(document.documentElement).getPropertyValue('--input-color')
+		})
+
+		if (hasInitialized.value) {
+			updateIframeColors()
+		}
+	}
+
+	(window as any).forceRichTextUpdate = () => {
+		console.log('🔄 Forcing RichText update')
+		forceUpdate.value++
+	}
+}
+
 // Computed properties for UI control
 const shouldShowToolbar = computed(() => {
 	if (props.hideToolbar) return false
@@ -2509,16 +2605,11 @@ async function initEditor() {
 	isInitializing.value = true
 
 	try {
-		// Get the --input-color CSS variable from the parent page
-		const computedStyle = getComputedStyle(document.documentElement)
-		const inputColor = computedStyle.getPropertyValue('--input-color').trim()
-		const defaultTextColor = inputColor || 'inherit'
-
 		// Use basic embedded styles for better compatibility
 		// We copy CSS variables to the iframe so it can use them
 		const editorStylesContent = `
 			:root {
-				--input-color: ${inputColor || '#000'};
+				--input-color: ${currentInputColor.value || '#000'};
 			}
 			body {
 				margin: 0;
@@ -2526,11 +2617,16 @@ async function initEditor() {
 				min-height: 200px;
 				font-family: sans-serif !important;
 				line-height: 1.5;
-				color: ${props.textColor || (inputColor ? 'var(--input-color)' : 'inherit')};
+				color: ${currentTextColor.value};
 				background: transparent;
 				max-width: 1060px;
 				margin: 0 auto;
 			}
+			
+			/* Ensure all text elements inherit the theme color */
+			p, h1, h2, h3, h4, h5, h6, div, span, li, td, th {
+				color: inherit !important;
+			}
 			table {
 				border-collapse: collapse;
 				margin-bottom: 1rem;
@@ -2823,6 +2919,11 @@ async function initEditor() {
 		}
 
 		hasInitialized.value = true
+
+		// Update colors after initialization
+		setTimeout(() => {
+			updateIframeColors()
+		}, 100)
 	} catch (error) {
 		// Keep only this error log for debugging critical issues
 		console.error('Error during editor initialization:', error)
@@ -2831,6 +2932,64 @@ async function initEditor() {
 	}
 }
 
+// Function to update CSS colors in the iframe
+function updateIframeColors() {
+	console.log('🎯 updateIframeColors called', {
+		hasIframe: !!iframe.value,
+		hasContentDocument: !!iframe.value?.contentDocument,
+		hasInitialized: hasInitialized.value
+	})
+
+	if (!iframe.value?.contentDocument || iframe.value.contentDocument === null) {
+		console.warn('❌ No iframe or contentDocument')
+		return
+	}
+
+	const doc = iframe.value.contentDocument
+	let styleElement = doc.getElementById('editor-theme-styles') as HTMLStyleElement
+
+	if (!styleElement) {
+		styleElement = doc.createElement('style')
+		styleElement.id = 'editor-theme-styles'
+		doc.head.appendChild(styleElement)
+		console.log('✅ Created new style element')
+	}
+
+	const css = `
+		:root {
+			--input-color: ${currentInputColor.value || '#000'};
+		}
+		body {
+			color: ${currentTextColor.value} !important;
+		}
+		
+		/* Ensure all text elements inherit the color */
+		p, h1, h2, h3, h4, h5, h6, div, span, li, td, th {
+			color: inherit !important;
+		}
+	`
+
+	styleElement.textContent = css
+	console.log('🎨 Updated iframe colors:', {
+		inputColor: currentInputColor.value,
+		textColor: currentTextColor.value,
+		css: css.trim()
+	})
+}
+
+// Watch for theme changes and update iframe colors
+watch([currentInputColor, currentTextColor], (newValues, oldValues) => {
+	console.log('🔄 Colors changed:', {
+		newValues,
+		oldValues,
+		hasInitialized: hasInitialized.value
+	})
+
+	if (hasInitialized.value) {
+		updateIframeColors()
+	}
+}, { flush: 'post' })
+
 // Reset initialization state when content changes significantly
 watch(() => props.modelValue, (newValue, oldValue) => {
 	if (newValue !== editor.state.content) {

package/src/components/form/inputs/TextInput.vue

@@ -72,7 +72,7 @@ function autoResizeTextarea() {
 
 	const textarea = input as HTMLTextAreaElement
 	textarea.style.height = 'auto'
-	textarea.style.height = (textarea.scrollHeight + 1) + 'px'
+	textarea.style.height = `${textarea.scrollHeight + 1}px`
 }
 
 function updateInputVal() {
@@ -81,17 +81,17 @@ function updateInputVal() {
 	debouncedEmit()
 
 	if (props.autoheight) {
-		nextTick(() => autoResizeTextarea())
+		nextTick(() => { autoResizeTextarea() })
 	}
 }
 
 watch(
 	() => props.modelValue,
-	newVal => {
+	(newVal) => {
 		if (newVal !== inputVal) {
 			inputVal = newVal
 			if (props.autoheight) {
-				nextTick(() => autoResizeTextarea())
+				nextTick(() => { autoResizeTextarea() })
 			}
 		}
 	},
@@ -119,55 +119,27 @@ onMounted(async () => {
 
 <template>
 	<div
-		class="bagel-input text-input"
-		:class="{
+		class="bagel-input text-input" :class="{
 			dense,
 			small,
 			shrink,
 			code,
 			textInputIconWrap: icon,
 			txtInputIconStart: iconStart,
-}"
-		:title="title"
+		}" :title="title"
 	>
 		<label :for="id">
 			{{ label }} <span v-if="required && label">*</span>
 
 			<input
-				v-if="!multiline && !autoheight && !code && inputRows < 2"
-				:id
-				ref="input"
-				v-model.trim="inputVal"
-				:name
-				:title
-				:autocomplete
-				:type
-				:rows="1"
-				:placeholder="placeholder || label"
-				:disabled
-				:required
-				:pattern
-				v-bind="nativeInputAttrs"
-				@focusout="onFocusout"
-				@focus="onFocus"
-				@input="updateInputVal"
-			/>
+				v-if="!multiline && !autoheight && !code && inputRows < 2" :id ref="input" v-model.trim="inputVal"
+				:name :title :autocomplete :type :rows="1" :placeholder="placeholder || label" :disabled :required
+				:pattern v-bind="nativeInputAttrs" @focusout="onFocusout" @focus="onFocus" @input="updateInputVal"
+			>
 			<textarea
-				v-else
-				:id
-				ref="input"
-				v-model="inputVal"
-				:name
-				:title
-				:type
-				:rows="inputRows"
-				:placeholder="placeholder || label"
-				:disabled
-				:required
-				:pattern
-				v-bind="nativeInputAttrs"
-				@input="updateInputVal"
-				@focusout="onFocusout"
+				v-else :id ref="input" v-model="inputVal" :name :title :type :rows="inputRows"
+				:placeholder="placeholder || label" :disabled :required :pattern v-bind="nativeInputAttrs"
+				@input="updateInputVal" @focusout="onFocusout"
 			/>
 			<p v-if="helptext" class="opacity-7 light">{{ helptext }}</p>
 			<Icon v-if="iconStart" class="iconStart" :icon="iconStart" />
@@ -236,7 +208,8 @@ onMounted(async () => {
 	line-height: 0;
 }
 
-.textInputIconWrap input {
+.textInputIconWrap input,
+.textInputIconWrap textarea {
 	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
 }