@bagelink/vue 1.5.15 → 1.5.20

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'
@@ -41,6 +41,8 @@ const props = defineProps<{
 	autofocus?: boolean
 	// Text color
 	textColor?: string
+	// Font size
+	fontSize?: number | string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -52,15 +54,111 @@ 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 ('undefined' !== typeof document) {
+		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 && 0 < inputColor.length && '#000' !== inputColor ? 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 ('undefined' !== typeof document) {
+		themeObserver = new MutationObserver((mutations) => {
+			let shouldUpdate = false
+			mutations.forEach((mutation) => {
+				if ('attributes' === mutation.type) {
+					const { attributeName } = mutation
+					if ('data-theme' === attributeName 
+						|| 'class' === attributeName 
+						|| 'style' === attributeName) {
+						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 ('undefined' !== typeof window) {
+	(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
-	if (props.basic) return false
+	if (props.hideToolbar) {return false}
+	if (props.basic) {return false}
 	return true
 })
 
 const shouldShowInlineToolbar = computed(() => {
-	if (props.hideInlineToolbar) return false
+	if (props.hideInlineToolbar) {return false}
 	return true
 })
 
@@ -239,7 +337,7 @@ const tablePreviewHtml = computed(() => {
 				border: ${form.borderWidth}px solid ${form.borderColor};
 				text-align: ${form.alignment};
 				${form.fixedLayout ? `width: ${100 / form.cols}%;` : ''}
-				${form.alternateRows && i % 2 === 1
+				${form.alternateRows && 1 === i % 2
 					? `background-color: ${form.alternateRowBgColor}; color: ${form.alternateRowTextColor};`
 					: `background-color: ${form.cellBgColor}; color: ${form.cellTextColor};`}
 			`
@@ -301,7 +399,7 @@ function detectAndSetDirection() {
 // Function to get current direction based on content
 function getCurrentDirection() {
 	const { doc } = editor.state
-	if (!doc?.body) return 'ltr'
+	if (!doc?.body) {return 'ltr'}
 
 	const allText = doc.body.textContent || ''
 	const firstChars = allText.trim().substring(0, 10)
@@ -312,7 +410,7 @@ function getCurrentDirection() {
 
 // Helper function to update content with history tracking
 function updateContentWithHistory(doc: Document, skipHistory = false) {
-	if (!doc) return
+	if (!doc) {return}
 
 	const newContent = doc.body.innerHTML
 	if (newContent !== editor.state.content) {
@@ -322,7 +420,7 @@ function updateContentWithHistory(doc: Document, skipHistory = false) {
 			// Clear redo stack when new content is added
 			editor.state.redoStack = []
 			// Limit undo stack size to prevent memory issues
-			if (editor.state.undoStack.length > 50) {
+			if (50 < editor.state.undoStack.length) {
 				editor.state.undoStack.shift()
 			}
 		}
@@ -374,10 +472,10 @@ function showInlineToolbarForSelection() {
 	}
 
 	const { doc } = editor.state
-	if (!doc) return
+	if (!doc) {return}
 
 	const selection = doc.getSelection()
-	if (!selection || selection.rangeCount === 0) {
+	if (!selection || 0 === selection.rangeCount) {
 		hideInlineToolbar()
 		return
 	}
@@ -431,14 +529,14 @@ function hideInlineToolbar() {
 
 // Function to run inline toolbar action
 function runInlineAction(actionName: string) {
-	if (!inlineToolbarSelection.value) return
+	if (!inlineToolbarSelection.value) {return}
 
 	const { doc } = editor.state
-	if (!doc) return
+	if (!doc) {return}
 
 	// Get the stored range
 	const storedRange = (inlineToolbarSelection.value as any)._storedRange as Range
-	if (!storedRange) return
+	if (!storedRange) {return}
 
 	// Restore selection using the stored range
 	const selection = doc.getSelection()
@@ -453,7 +551,7 @@ function runInlineAction(actionName: string) {
 	// Keep the toolbar visible but update the stored selection
 	setTimeout(() => {
 		const newSelection = doc.getSelection()
-		if (newSelection && newSelection.rangeCount > 0) {
+		if (newSelection && 0 < newSelection.rangeCount) {
 			const newRange = newSelection.getRangeAt(0)
 			if (!newRange.collapsed) {
 				; (inlineToolbarSelection.value as any)._storedRange = newRange.cloneRange()
@@ -474,7 +572,7 @@ function showTooltipMessage(message: string, x?: number, y?: number) {
 	// If coordinates not provided, try to get cursor position
 	if (x === undefined || y === undefined) {
 		const selection = editor.state.doc?.getSelection()
-		if (selection && selection.rangeCount > 0) {
+		if (selection && 0 < selection.rangeCount) {
 			const range = selection.getRangeAt(0)
 			const rect = range.getBoundingClientRect()
 			// Get iframe offset
@@ -510,20 +608,20 @@ function openLinkModal(selection: Selection, range: Range, existingLink: HTMLAnc
 	pendingLinkData = { selection, range, existingLink }
 	linkForm.value = {
 		url: existingLink?.href || '',
-		openInNewTab: existingLink?.target !== '_self'
+		openInNewTab: '_self' !== existingLink?.target
 	}
 	showLinkModal.value = true
 }
 
 // Function to submit link
 function submitLink() {
-	if (!pendingLinkData || !linkForm.value.url) return
+	if (!pendingLinkData || !linkForm.value.url) {return}
 
 	const { selection, range, existingLink } = pendingLinkData
 	const { url, openInNewTab } = linkForm.value
 	const { doc } = editor.state
 
-	if (!doc) return
+	if (!doc) {return}
 
 	if (existingLink) {
 		// Update existing link
@@ -570,7 +668,7 @@ function submitLink() {
 
 // Function to visit link
 function visitLink() {
-	if (!linkForm.value.url || !isValidUrl(linkForm.value.url)) return
+	if (!linkForm.value.url || !isValidUrl(linkForm.value.url)) {return}
 
 	let url = linkForm.value.url.trim()
 
@@ -588,7 +686,7 @@ function visitLink() {
 
 // Function to validate URL
 function isValidUrl(url: string): boolean {
-	if (!url || url.trim() === '') return false
+	if (!url || '' === url.trim()) {return false}
 
 	try {
 		URL.canParse(url)
@@ -607,12 +705,12 @@ function isValidUrl(url: string): boolean {
 // Function to open image modal
 function openImageModal(existingImage: HTMLElement | null = null) {
 	const { doc } = editor.state
-	if (!doc) return
+	if (!doc) {return}
 
 	// Get current selection for new images
 	if (!existingImage) {
 		const selection = doc.getSelection()
-		if (!selection || !selection.rangeCount) return
+		if (!selection || !selection.rangeCount) {return}
 		const range = selection.getRangeAt(0)
 		pendingImageData = { selection, range, existingImage: null }
 	} else {
@@ -656,10 +754,10 @@ function openImageModal(existingImage: HTMLElement | null = null) {
 
 // Function to submit image
 function submitImage() {
-	if (!imageForm.value.src || !pendingImageData) return
+	if (!imageForm.value.src || !pendingImageData) {return}
 
 	const { doc } = editor.state
-	if (!doc) return
+	if (!doc) {return}
 
 	const { existingImage } = pendingImageData
 
@@ -682,7 +780,7 @@ function submitImage() {
 
 	if (imageForm.value.height) {
 		img.setAttribute('data-height', imageForm.value.height)
-		if (imageForm.value.height.includes('%') || imageForm.value.height.includes('px') || imageForm.value.height.includes('vh') || imageForm.value.height.includes('rem') || imageForm.value.height.includes('em') || imageForm.value.height === 'auto') {
+		if (imageForm.value.height.includes('%') || imageForm.value.height.includes('px') || imageForm.value.height.includes('vh') || imageForm.value.height.includes('rem') || imageForm.value.height.includes('em') || 'auto' === imageForm.value.height) {
 			img.style.height = imageForm.value.height
 		} else {
 			img.style.height = `${imageForm.value.height}px`
@@ -713,7 +811,7 @@ function submitImage() {
 	// Create or update figure/image - always wrap in figure
 	let elementToUpdate: HTMLElement
 	if (existingImage) {
-		if (existingImage.tagName.toLowerCase() === 'img') {
+		if ('img' === existingImage.tagName.toLowerCase()) {
 			// Converting standalone image to figure (always)
 			const figure = doc.createElement('figure')
 			figure.className = 'image-figure'
@@ -778,12 +876,12 @@ function submitImage() {
 // Function to open embed modal
 function openEmbedModal(existingEmbed: HTMLElement | null = null) {
 	const { doc } = editor.state
-	if (!doc) return
+	if (!doc) {return}
 
 	// Get current selection for new embeds
 	if (!existingEmbed) {
 		const selection = doc.getSelection()
-		if (!selection || !selection.rangeCount) return
+		if (!selection || !selection.rangeCount) {return}
 		const range = selection.getRangeAt(0)
 		pendingEmbedData = { selection, range, existingEmbed: null }
 	} else {
@@ -837,10 +935,10 @@ function extractEmbedUrl(input: string): string {
 
 // Function to submit embed
 function submitEmbed() {
-	if (!embedForm.value.src || !pendingEmbedData) return
+	if (!embedForm.value.src || !pendingEmbedData) {return}
 
 	const { doc } = editor.state
-	if (!doc) return
+	if (!doc) {return}
 
 	const { existingEmbed } = pendingEmbedData
 
@@ -917,12 +1015,12 @@ function submitEmbed() {
 // Function to open video modal
 function openVideoModal(existingVideo: HTMLElement | null = null) {
 	const { doc } = editor.state
-	if (!doc) return
+	if (!doc) {return}
 
 	// Get current selection for new videos
 	if (!existingVideo) {
 		const selection = doc.getSelection()
-		if (!selection || !selection.rangeCount) return
+		if (!selection || !selection.rangeCount) {return}
 		const range = selection.getRangeAt(0)
 		pendingVideoData = { selection, range, existingVideo: null }
 	} else {
@@ -937,14 +1035,14 @@ function openVideoModal(existingVideo: HTMLElement | null = null) {
 	if (existingVideo) {
 		// Populate form with existing video data
 		const container = existingVideo.querySelector('.video-container')
-		const isCustom = container?.getAttribute('data-custom-aspect-ratio') === 'true'
+		const isCustom = 'true' === container?.getAttribute('data-custom-aspect-ratio')
 		videoForm.value = {
 			src: container?.getAttribute('data-video-src') || '',
 			width: container?.getAttribute('data-width') || '',
-			autoplay: container?.getAttribute('data-autoplay') === 'true',
-			mute: container?.getAttribute('data-mute') === 'true',
-			controls: container?.getAttribute('data-controls') === 'true',
-			loop: container?.getAttribute('data-loop') === 'true',
+			autoplay: 'true' === container?.getAttribute('data-autoplay'),
+			mute: 'true' === container?.getAttribute('data-mute'),
+			controls: 'true' === container?.getAttribute('data-controls'),
+			loop: 'true' === container?.getAttribute('data-loop'),
 			aspectRatio: isCustom ? 'custom' : (container?.getAttribute('data-aspect-ratio') || '16:9'),
 			customWidth: container?.getAttribute('data-custom-width') || '',
 			customHeight: container?.getAttribute('data-custom-height') || '',
@@ -973,7 +1071,7 @@ function openVideoModal(existingVideo: HTMLElement | null = null) {
 
 // Function to validate video URL
 function isValidVideoUrl(url: string): boolean {
-	if (!url || url.trim() === '') return false
+	if (!url || '' === url.trim()) {return false}
 
 	try {
 		// Check for iframe tags
@@ -1008,23 +1106,23 @@ function isValidVideoUrl(url: string): boolean {
 	}
 }
 function submitVideo() {
-	if (!videoForm.value.src || !pendingVideoData) return
+	if (!videoForm.value.src || !pendingVideoData) {return}
 
 	const { doc } = editor.state
-	if (!doc) return
+	if (!doc) {return}
 
 	const { existingVideo } = pendingVideoData
 
 	// Calculate aspect ratio
 	let { aspectRatio } = videoForm.value
-	const isCustom = videoForm.value.aspectRatio === 'custom'
+	const isCustom = 'custom' === videoForm.value.aspectRatio
 	if (isCustom && videoForm.value.customWidth && videoForm.value.customHeight) {
 		aspectRatio = `${videoForm.value.customWidth}:${videoForm.value.customHeight}`
 	}
 
 	// Auto-adjust aspect ratio for YouTube Shorts
 	const isYoutubeShort = videoForm.value.src.includes('youtube.com/shorts/')
-	if (isYoutubeShort && aspectRatio === '16:9') {
+	if (isYoutubeShort && '16:9' === aspectRatio) {
 		aspectRatio = '9:16'
 	}
 
@@ -1072,8 +1170,8 @@ function submitVideo() {
 	const description = doc.createElement('div')
 	description.className = 'video-placeholder-description'
 	let platformText = 'video'
-	if (isYoutube) platformText = 'YouTube video'
-	else if (isVimeo) platformText = 'Vimeo video'
+	if (isYoutube) {platformText = 'YouTube video'}
+	else if (isVimeo) {platformText = 'Vimeo video'}
 	description.textContent = platformText
 
 	// Try to get YouTube thumbnail if possible
@@ -1162,7 +1260,7 @@ function submitVideo() {
 
 // Function to delete video
 function deleteVideo() {
-	if (!pendingVideoData?.existingVideo) return
+	if (!pendingVideoData?.existingVideo) {return}
 
 	const { existingVideo } = pendingVideoData
 	existingVideo.remove()
@@ -1181,9 +1279,9 @@ function detectTableAlignment(table: HTMLTableElement): 'left' | 'center' | 'rig
 
 	console.log('Table margins:', { marginLeft, marginRight })
 
-	if (marginLeft === 'auto' && marginRight === 'auto') {
+	if ('auto' === marginLeft && 'auto' === marginRight) {
 		return 'center'
-	} else if (marginLeft === 'auto' && marginRight === '0') {
+	}if (marginLeft === 'auto' && marginRight === '0') {
 		return 'right'
 	} else {
 		return 'left'
@@ -1192,12 +1290,12 @@ function detectTableAlignment(table: HTMLTableElement): 'left' | 'center' | 'rig
 
 function openTableEditor(existingTable: HTMLTableElement | null = null) {
 	const { doc } = editor.state
-	if (!doc) return
+	if (!doc) {return}
 
 	// Get current selection for new tables
 	if (!existingTable) {
 		const selection = doc.getSelection()
-		if (!selection || !selection.rangeCount) return
+		if (!selection || !selection.rangeCount) {return}
 		const range = selection.getRangeAt(0)
 		pendingTableData = { selection, range, existingTable: null }
 	} else {
@@ -1219,11 +1317,11 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 		let alternateRowBg = '#f9f9f9'
 		let alternateRowTextColor = '#333333'
 
-		if (tbody && tbody.rows.length >= 2) {
+		if (tbody && 2 <= tbody.rows.length) {
 			const firstRow = tbody.rows[0]
 			const secondRow = tbody.rows[1]
 
-			if (firstRow.cells.length > 0 && secondRow.cells.length > 0) {
+			if (0 < firstRow.cells.length && 0 < secondRow.cells.length) {
 				const firstCell = firstRow.cells[0] as HTMLElement
 				const secondCell = secondRow.cells[0] as HTMLElement
 
@@ -1241,7 +1339,7 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 
 		tableForm.value = {
 			rows: tbody ? tbody.rows.length : 3,
-			cols: tbody && tbody.rows.length > 0 ? tbody.rows[0].cells.length : 3,
+			cols: tbody && 0 < tbody.rows.length ? tbody.rows[0].cells.length : 3,
 			width: Number.parseInt(existingTable.style.width) || 100,
 			borderWidth: Number.parseInt(existingTable.style.borderWidth) || 1,
 			borderColor: existingTable.style.borderColor || '#dddddd',
@@ -1254,7 +1352,7 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 			alternateRows: hasAlternatingRows,
 			alternateRowBgColor: alternateRowBg,
 			alternateRowTextColor,
-			fixedLayout: existingTable.style.tableLayout === 'fixed' || true, // ברירת מחדל true
+			fixedLayout: 'fixed' === existingTable.style.tableLayout || true, // ברירת מחדל true
 			alignment: detectTableAlignment(existingTable),
 			direction: existingTable.dir || 'ltr'
 		}
@@ -1284,10 +1382,10 @@ function openTableEditor(existingTable: HTMLTableElement | null = null) {
 
 // Function to submit table changes
 function submitTable() {
-	if (!pendingTableData) return
+	if (!pendingTableData) {return}
 
 	const { doc } = editor.state
-	if (!doc) return
+	if (!doc) {return}
 
 	if (pendingTableData.existingTable) {
 		// Update existing table instead of creating new one
@@ -1347,7 +1445,7 @@ function submitTable() {
 				const cells = row.querySelectorAll('td')
 				cells.forEach((cell) => {
 					const cellEl = cell as HTMLElement
-					if (tableForm.value.alternateRows && i % 2 === 1) {
+					if (tableForm.value.alternateRows && 1 === i % 2) {
 						// Alternate rows: use special colors
 						cellEl.style.backgroundColor = tableForm.value.alternateRowBgColor
 						cellEl.style.color = tableForm.value.alternateRowTextColor
@@ -1372,7 +1470,7 @@ function submitTable() {
 
 // Function to create new table (moved from submitTable)
 function createNewTable(doc: Document) {
-	if (!pendingTableData) return
+	if (!pendingTableData) {return}
 
 	// Create new table with current settings
 	const table = doc.createElement('table')
@@ -1392,10 +1490,10 @@ function createNewTable(doc: Document) {
 	// Don't set textAlign on table - let it inherit from document direction
 	// table.style.textAlign = tableForm.value.alignment
 
-	if (tableForm.value.alignment === 'center') {
+	if ('center' === tableForm.value.alignment) {
 		table.style.marginLeft = 'auto'
 		table.style.marginRight = 'auto'
-	} else if (tableForm.value.alignment === 'right') {
+	} else if ('right' === tableForm.value.alignment) {
 		table.style.marginLeft = 'auto'
 		table.style.marginRight = '0'
 	} else {
@@ -1448,7 +1546,7 @@ function createNewTable(doc: Document) {
 			}
 
 			// Apply background and text colors
-			if (tableForm.value.alternateRows && i % 2 === 1) {
+			if (tableForm.value.alternateRows && 1 === i % 2) {
 				// Alternate rows: use special colors
 				cell.style.backgroundColor = tableForm.value.alternateRowBgColor
 				cell.style.color = tableForm.value.alternateRowTextColor
@@ -1492,7 +1590,7 @@ function createNewTable(doc: Document) {
 
 // Function to delete table
 function deleteTable() {
-	if (!pendingTableData?.existingTable) return
+	if (!pendingTableData?.existingTable) {return}
 
 	const { existingTable } = pendingTableData
 	existingTable.remove()
@@ -1521,7 +1619,7 @@ function applyDefaultTableSettings(table: HTMLTableElement) {
 		const headers = table.querySelectorAll('th')
 		const cells = table.querySelectorAll('td')
 
-		if (headers.length > 0) {
+		if (0 < headers.length) {
 			const colWidth = `${100 / headers.length}%`
 			headers.forEach((th) => {
 				if (!(th as HTMLElement).style.width) {
@@ -1530,7 +1628,7 @@ function applyDefaultTableSettings(table: HTMLTableElement) {
 			})
 		}
 
-		if (cells.length > 0 && headers.length === 0) {
+		if (0 < cells.length && 0 === headers.length) {
 			// If no headers, use first row to determine column count
 			const firstRow = table.querySelector('tr')
 			if (firstRow) {
@@ -1560,7 +1658,7 @@ function applyDefaultTableSettings(table: HTMLTableElement) {
 
 // Function to delete image
 function deleteImage() {
-	if (!pendingImageData?.existingImage) return
+	if (!pendingImageData?.existingImage) {return}
 
 	const { existingImage } = pendingImageData
 	existingImage.remove()
@@ -1572,7 +1670,7 @@ function deleteImage() {
 
 // Function to delete embed
 function deleteEmbed() {
-	if (!pendingEmbedData?.existingEmbed) return
+	if (!pendingEmbedData?.existingEmbed) {return}
 
 	const { existingEmbed } = pendingEmbedData
 	existingEmbed.remove()
@@ -1595,19 +1693,19 @@ function deleteEmbed() {
 // Table manipulation functions
 function mergeCellRight() {
 	const { doc } = editor.state
-	if (!doc || !contextMenuCell.value) return
+	if (!doc || !contextMenuCell.value) {return}
 
 	const cell = contextMenuCell.value
 	const row = cell.parentElement as HTMLTableRowElement
 	const cellIndex = Array.from(row.cells).indexOf(cell)
 	const table = cell.closest('table') as HTMLTableElement
-	const isRTL = table?.dir === 'rtl'
+	const isRTL = 'rtl' === table?.dir
 
 	// In RTL, "right" means the previous cell, in LTR it means the next cell
 	const targetIndex = isRTL ? cellIndex - 1 : cellIndex + 1
 	const targetCell = row.cells[targetIndex]
 
-	if (targetCell && targetIndex >= 0 && targetIndex < row.cells.length) {
+	if (targetCell && 0 <= targetIndex && targetIndex < row.cells.length) {
 		// Combine content
 		if (targetCell.innerHTML.trim()) {
 			cell.innerHTML += ` ${targetCell.innerHTML}`
@@ -1627,7 +1725,7 @@ function mergeCellRight() {
 
 function mergeCellDown() {
 	const { doc } = editor.state
-	if (!doc || !contextMenuCell.value) return
+	if (!doc || !contextMenuCell.value) {return}
 
 	const cell = contextMenuCell.value
 	const table = cell.closest('table') as HTMLTableElement
@@ -1663,15 +1761,15 @@ function mergeCellDown() {
 
 function splitCell() {
 	const { doc } = editor.state
-	if (!doc || !contextMenuCell.value) return
+	if (!doc || !contextMenuCell.value) {return}
 
 	const cell = contextMenuCell.value
 	const table = cell.closest('table') as HTMLTableElement
-	const isRTL = table?.dir === 'rtl'
+	const isRTL = 'rtl' === table?.dir
 	const colspan = Number.parseInt(cell.getAttribute('colspan') || '1')
 	const rowspan = Number.parseInt(cell.getAttribute('rowspan') || '1')
 
-	if (colspan > 1) {
+	if (1 < colspan) {
 		// Split horizontally
 		cell.setAttribute('colspan', '1')
 		const row = cell.parentElement as HTMLTableRowElement
@@ -1692,7 +1790,7 @@ function splitCell() {
 				}
 			}
 		}
-	} else if (rowspan > 1) {
+	} else if (1 < rowspan) {
 		// Split vertically
 		cell.setAttribute('rowspan', '1')
 		const row = cell.parentElement as HTMLTableRowElement
@@ -1724,7 +1822,7 @@ function splitCell() {
 
 function insertRowAbove() {
 	const { doc } = editor.state
-	if (!doc || !contextMenuCell.value) return
+	if (!doc || !contextMenuCell.value) {return}
 
 	const cell = contextMenuCell.value
 	const row = cell.parentElement as HTMLTableRowElement
@@ -1751,7 +1849,7 @@ function insertRowAbove() {
 
 function insertRowBelow() {
 	const { doc } = editor.state
-	if (!doc || !contextMenuCell.value) return
+	if (!doc || !contextMenuCell.value) {return}
 
 	const cell = contextMenuCell.value
 	const row = cell.parentElement as HTMLTableRowElement
@@ -1778,7 +1876,7 @@ function insertRowBelow() {
 
 function deleteRow() {
 	const { doc } = editor.state
-	if (!doc || !contextMenuCell.value) return
+	if (!doc || !contextMenuCell.value) {return}
 
 	const cell = contextMenuCell.value
 	const row = cell.parentElement as HTMLTableRowElement
@@ -1788,7 +1886,7 @@ function deleteRow() {
 	const tbody = table.querySelector('tbody') || table
 	const rows = tbody.querySelectorAll('tr')
 
-	if (rows.length <= 1) {
+	if (1 >= rows.length) {
 		alert('Cannot delete the last row')
 		return
 	}
@@ -1799,7 +1897,7 @@ function deleteRow() {
 
 function insertColumnLeft() {
 	const { doc } = editor.state
-	if (!doc || !contextMenuCell.value) return
+	if (!doc || !contextMenuCell.value) {return}
 
 	const cell = contextMenuCell.value
 	const table = cell.closest('table') as HTMLTableElement
@@ -1808,7 +1906,7 @@ function insertColumnLeft() {
 	// Add new cell to each row at the same index
 	const rows = table.querySelectorAll('tr')
 	rows.forEach((row) => {
-		const newCell = doc.createElement(row.parentElement?.tagName === 'THEAD' ? 'th' : 'td')
+		const newCell = doc.createElement('THEAD' === row.parentElement?.tagName ? 'th' : 'td')
 		newCell.innerHTML = '&nbsp;'
 		newCell.style.padding = '8px'
 		newCell.style.border = '1px solid #ddd'
@@ -1825,7 +1923,7 @@ function insertColumnLeft() {
 
 function insertColumnRight() {
 	const { doc } = editor.state
-	if (!doc || !contextMenuCell.value) return
+	if (!doc || !contextMenuCell.value) {return}
 
 	const cell = contextMenuCell.value
 	const table = cell.closest('table') as HTMLTableElement
@@ -1834,7 +1932,7 @@ function insertColumnRight() {
 	// Add new cell to each row after the current index
 	const rows = table.querySelectorAll('tr')
 	rows.forEach((row) => {
-		const newCell = doc.createElement(row.parentElement?.tagName === 'THEAD' ? 'th' : 'td')
+		const newCell = doc.createElement('THEAD' === row.parentElement?.tagName ? 'th' : 'td')
 		newCell.innerHTML = '&nbsp;'
 		newCell.style.padding = '8px'
 		newCell.style.border = '1px solid #ddd'
@@ -1852,7 +1950,7 @@ function insertColumnRight() {
 
 function deleteColumn() {
 	const { doc } = editor.state
-	if (!doc || !contextMenuCell.value) return
+	if (!doc || !contextMenuCell.value) {return}
 
 	const cell = contextMenuCell.value
 	const table = cell.closest('table') as HTMLTableElement
@@ -1860,7 +1958,7 @@ function deleteColumn() {
 
 	// Check if this is the only column
 	const firstRow = table.querySelector('tr')
-	if (firstRow && firstRow.cells.length <= 1) {
+	if (firstRow && 1 >= firstRow.cells.length) {
 		alert('Cannot delete the last column')
 		return
 	}
@@ -1878,18 +1976,18 @@ function deleteColumn() {
 
 // Table context menu functions
 const canMergeRight = computed(() => {
-	if (!contextMenuCell.value) return false
+	if (!contextMenuCell.value) {return false}
 	const cell = contextMenuCell.value
 	const row = cell.parentElement as HTMLTableRowElement
 	const cellIndex = Array.from(row.cells).indexOf(cell)
 	const table = cell.closest('table') as HTMLTableElement
-	const isRTL = table?.dir === 'rtl'
+	const isRTL = 'rtl' === table?.dir
 	const targetIndex = isRTL ? cellIndex - 1 : cellIndex + 1
-	return targetIndex >= 0 && targetIndex < row.cells.length
+	return 0 <= targetIndex && targetIndex < row.cells.length
 })
 
 const canMergeDown = computed(() => {
-	if (!contextMenuCell.value) return false
+	if (!contextMenuCell.value) {return false}
 	const cell = contextMenuCell.value
 	const table = cell.closest('table') as HTMLTableElement
 	const rows = Array.from(table.rows)
@@ -1899,11 +1997,11 @@ const canMergeDown = computed(() => {
 })
 
 const canSplit = computed(() => {
-	if (!contextMenuCell.value) return false
+	if (!contextMenuCell.value) {return false}
 	const cell = contextMenuCell.value
 	const colspan = Number.parseInt(cell.getAttribute('colspan') || '1')
 	const rowspan = Number.parseInt(cell.getAttribute('rowspan') || '1')
-	return colspan > 1 || rowspan > 1
+	return 1 < colspan || 1 < rowspan 
 })
 
 function handleTableContextMenu(event: MouseEvent) {
@@ -1935,9 +2033,9 @@ const hasRTL = $computed(() => /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(
 
 // Computed property to handle height prop
 const editorHeight = $computed(() => {
-	if (typeof props.height === 'number') {
+	if ('number' === typeof props.height) {
 		return `${props.height}px`
-	} else if (typeof props.height === 'string') {
+	}if (typeof props.height === 'string') {
 		return props.height
 	}
 	return '240px' // default height
@@ -2005,16 +2103,16 @@ function setupTableEditButtons(doc: Document) {
 			if (table.style.marginLeft && table.style.marginRight) {
 				// Detect current alignment
 				let alignment = 'left'
-				if (table.style.marginLeft === 'auto' && table.style.marginRight === 'auto') {
+				if ('auto' === table.style.marginLeft && 'auto' === table.style.marginRight) {
 					alignment = 'center'
-				} else if (table.style.marginLeft === 'auto') {
+				} else if ('auto' === table.style.marginLeft) {
 					alignment = 'right'
 				}
 
 				// Apply flex alignment to wrapper
-				if (alignment === 'center') {
+				if ('center' === alignment) {
 					wrapper.style.alignItems = 'center'
-				} else if (alignment === 'right') {
+				} else if ('right' === alignment) {
 					wrapper.style.alignItems = 'flex-end'
 				} else {
 					wrapper.style.alignItems = 'flex-start'
@@ -2092,14 +2190,14 @@ function setupAutoWrapping(doc: Document) {
 		}
 
 		// If body is completely empty, add a paragraph and return
-		if (!doc.body.innerHTML.trim() || doc.body.innerHTML === '') {
+		if (!doc.body.innerHTML.trim() || '' === doc.body.innerHTML) {
 			const direction = getCurrentDirection()
 			doc.body.innerHTML = `<p dir="${direction}"><br></p>`
 			return
 		}
 
 		// Mark body as being normalized to prevent recursive processing
-		if (doc.body.dataset.normalizing === 'true') {
+		if ('true' === doc.body.dataset.normalizing) {
 			return
 		}
 		doc.body.dataset.normalizing = 'true'
@@ -2115,7 +2213,7 @@ function setupAutoWrapping(doc: Document) {
 					const parent = node.parentNode as HTMLElement
 					return (parent === doc.body
 						&& node.textContent?.trim()
-						&& node.textContent.trim().length > 0)
+						&& 0 < node.textContent.trim().length)
 						? NodeFilter.FILTER_ACCEPT
 						: NodeFilter.FILTER_REJECT
 				}
@@ -2164,13 +2262,13 @@ function setupAutoWrapping(doc: Document) {
 			const paras = Array.from(doc.body.querySelectorAll('p'))
 			for (let i = 0; i < paras.length; i++) {
 				const current = paras[i]
-				const isEmpty = !current.textContent?.trim() || current.innerHTML === '<br>'
+				const isEmpty = !current.textContent?.trim() || '<br>' === current.innerHTML
 
 				if (isEmpty) {
 					// Only remove if we have consecutive empty paragraphs at the end
 					const isLastPara = i === paras.length - 1
-					const prevPara = i > 0 ? paras[i - 1] : null
-					const isPrevEmpty = prevPara && (!prevPara.textContent?.trim() || prevPara.innerHTML === '<br>')
+					const prevPara = 0 < i ? paras[i - 1] : null
+					const isPrevEmpty = prevPara && (!prevPara.textContent?.trim() || '<br>' === prevPara.innerHTML)
 
 					// Keep at least one empty paragraph for cursor placement
 					if (isPrevEmpty && !isLastPara) {
@@ -2193,7 +2291,7 @@ function setupAutoWrapping(doc: Document) {
 		detectAndSetDirection()
 
 		// Handle complete content deletion immediately
-		if (!doc.body.innerHTML.trim() || doc.body.innerHTML === '') {
+		if (!doc.body.innerHTML.trim() || '' === doc.body.innerHTML) {
 			if (props.placeholder) {
 				addPlaceholder()
 			} else {
@@ -2220,9 +2318,9 @@ function setupAutoWrapping(doc: Document) {
 
 	// Handle Enter key
 	doc.addEventListener('keydown', (e) => {
-		if (e.key === 'Enter') {
+		if ('Enter' === e.key) {
 			const selection = doc.getSelection()
-			if (!selection || !selection.rangeCount) return
+			if (!selection || !selection.rangeCount) {return}
 
 			const range = selection.getRangeAt(0)
 
@@ -2248,13 +2346,13 @@ function setupAutoWrapping(doc: Document) {
 			}
 			paragraph = (paragraph as Element).closest('p,h1,h2,h3,h4,h5,h6') as HTMLElement
 
-			if (!paragraph) return
+			if (!paragraph) {return}
 
 			// Check if current paragraph is empty and previous paragraph is also empty
 			const currentIsEmpty = !paragraph.textContent?.trim()
 			const prevSibling = (paragraph as Element).previousElementSibling as HTMLElement
 			const prevIsEmpty = prevSibling
-				&& (prevSibling.tagName === 'P')
+				&& ('P' === prevSibling.tagName)
 				&& !prevSibling.textContent?.trim()
 
 			// If both current and previous paragraphs are empty, don't create another empty paragraph
@@ -2344,7 +2442,7 @@ function setupAutoWrapping(doc: Document) {
 	})	// Add a MutationObserver to catch structural changes that might create loose text
 	const observer = new MutationObserver((mutations) => {
 		for (const mutation of mutations) {
-			if (mutation.type === 'childList') {
+			if ('childList' === mutation.type) {
 				// Check if any loose text nodes were added to body
 				Array.from(mutation.addedNodes).forEach((addedNode) => {
 					if (addedNode.nodeType === Node.TEXT_NODE
@@ -2360,7 +2458,7 @@ function setupAutoWrapping(doc: Document) {
 					// Check if a table was added
 					else if (addedNode.nodeType === Node.ELEMENT_NODE) {
 						const element = addedNode as HTMLElement
-						if (element.tagName === 'TABLE') {
+						if ('TABLE' === element.tagName) {
 							console.log('MutationObserver detected new table:', element)
 							setTimeout(() => {
 								console.log('Applying default table settings...')
@@ -2378,7 +2476,7 @@ function setupAutoWrapping(doc: Document) {
 							}
 
 							// Also apply direction to list items if it's a list
-							if (element.tagName === 'UL' || element.tagName === 'OL') {
+							if ('UL' === element.tagName || 'OL' === element.tagName) {
 								const listItems = element.querySelectorAll('li')
 								listItems.forEach((li) => {
 									if (!li.dir) {
@@ -2445,7 +2543,7 @@ function setupAutoWrapping(doc: Document) {
 
 			// Get current selection
 			const selection = doc.getSelection()
-			if (!selection) return
+			if (!selection) {return}
 
 			// Create a range that selects the entire link
 			const range = doc.createRange()
@@ -2455,7 +2553,7 @@ function setupAutoWrapping(doc: Document) {
 
 			// Populate the form with existing link data
 			linkForm.value.url = link.href
-			linkForm.value.openInNewTab = link.target === '_blank'
+			linkForm.value.openInNewTab = '_blank' === link.target
 
 			// Store the link data for editing
 			pendingLinkData = {
@@ -2509,16 +2607,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 +2619,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;
@@ -2624,7 +2722,7 @@ async function initEditor() {
 
 		// Write the complete HTML document to the iframe
 		const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document
-		if (!doc) return
+		if (!doc) {return}
 
 		// First write the content
 		doc.open()
@@ -2653,7 +2751,7 @@ async function initEditor() {
 			}
 
 			// Also apply direction to list items
-			if (htmlElement.tagName === 'UL' || htmlElement.tagName === 'OL') {
+			if ('UL' === htmlElement.tagName || 'OL' === htmlElement.tagName) {
 				const listItems = htmlElement.querySelectorAll('li')
 				listItems.forEach((li) => {
 					const listItem = li as HTMLElement
@@ -2677,7 +2775,7 @@ async function initEditor() {
 				// Clear all formatting by removing styles and replacing with plain text
 				const elements = doc.body.querySelectorAll('*')
 				elements.forEach((el) => {
-					if (el.tagName !== 'P' && el.tagName !== 'BR') {
+					if ('P' !== el.tagName && 'BR' !== el.tagName) {
 						const textContent = el.textContent || ''
 						if (textContent.trim()) {
 							const p = doc.createElement('p')
@@ -2686,10 +2784,10 @@ async function initEditor() {
 						} else {
 							el.remove()
 						}
-					} else if (el.tagName === 'P') {
+					} else if ('P' === el.tagName) {
 						// Remove all attributes from paragraphs
 						Array.from(el.attributes).forEach((attr) => {
-							if (attr.name !== 'dir') {
+							if ('dir' !== attr.name) {
 								el.removeAttribute(attr.name)
 							}
 						})
@@ -2713,7 +2811,7 @@ async function initEditor() {
 		doc.addEventListener('click', (e) => {
 			setTimeout(() => {
 				const selection = doc.getSelection()
-				if (!selection || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed) {
+				if (!selection || 0 === selection.rangeCount || selection.getRangeAt(0).collapsed) {
 					hideInlineToolbar()
 				}
 			}, 10)
@@ -2724,7 +2822,7 @@ async function initEditor() {
 			if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Escape'].includes(e.key)) {
 				setTimeout(() => {
 					const selection = doc.getSelection()
-					if (!selection || selection.rangeCount === 0 || selection.getRangeAt(0).collapsed) {
+					if (!selection || 0 === selection.rangeCount || selection.getRangeAt(0).collapsed) {
 						hideInlineToolbar()
 					}
 				}, 10)
@@ -2818,11 +2916,16 @@ async function initEditor() {
 		}
 
 		// Only focus if autofocus is explicitly set to true
-		if (props.autofocus === true) {
+		if (true === props.autofocus) {
 			doc.body.focus()
 		}
 
 		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,11 +2934,74 @@ 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 || null === iframe.value.contentDocument) {
+		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 fontSize = props.fontSize ? ('number' === typeof props.fontSize ? `${props.fontSize}px` : props.fontSize) : '16px'
+
+	const css = `
+		:root {
+			--input-color: ${currentInputColor.value || '#000'};
+			--richtext-font-size: ${fontSize};
+		}
+		body {
+			color: ${currentTextColor.value} !important;
+			font-size: ${fontSize} !important;
+		}
+		
+		/* Ensure all text elements inherit the color and font size */
+		p, h1, h2, h3, h4, h5, h6, div, span, li, td, th {
+			color: inherit !important;
+			font-size: 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) {
 		// Only reset if content change is significant (not just minor edits)
-		if (!oldValue || Math.abs(newValue.length - oldValue.length) > 50) {
+		if (!oldValue || 50 < Math.abs(newValue.length - oldValue.length)) {
 			hasInitialized.value = false
 			// For external changes, update content directly but then push to history
 			editor.state.content = newValue
@@ -2870,10 +3036,10 @@ watch(() => editor.state.content, (newValue) => {
 watch(() => tableForm.value.alignment, (newAlignment) => {
 	if (pendingTableData?.existingTable) {
 		const table = pendingTableData.existingTable
-		if (newAlignment === 'center') {
+		if ('center' === newAlignment) {
 			table.style.marginLeft = 'auto'
 			table.style.marginRight = 'auto'
-		} else if (newAlignment === 'right') {
+		} else if ('right' === newAlignment) {
 			table.style.marginLeft = 'auto'
 			table.style.marginRight = '0'
 		} else {
@@ -2894,13 +3060,13 @@ function handleGlobalClick() {
 }
 
 // Add event listener when component mounts
-if (typeof window !== 'undefined') {
+if ('undefined' !== typeof window) {
 	window.addEventListener('click', handleGlobalClick)
 }
 
 // Cleanup event listener
 onBeforeUnmount(() => {
-	if (typeof window !== 'undefined') {
+	if ('undefined' !== typeof window) {
 		window.removeEventListener('click', handleGlobalClick)
 	}
 })
@@ -3412,7 +3578,6 @@ defineExpose({
 	min-width: calc(var(--input-height) * 3);
 	width: 100%;
 }
-
 .rich-text-editor--basic .content-area:hover {
 	outline-color: rgba(0, 0, 0, 0.05);
 	box-shadow: inset 0 0 8px #00000018;
@@ -3423,6 +3588,7 @@ defineExpose({
 .content-area span,
 .content-area li {
 	line-height: 1.65;
+	font-size: var(--richtext-font-size, 16px);
 }
 </style>
 
@@ -3452,6 +3618,7 @@ defineExpose({
 .preview-area {
 	flex: 1;
 	background: var(--bgl-richtext-color);
+	font-size: var(--richtext-font-size, 16px);
 }
 
 .split-view {
@@ -3465,6 +3632,7 @@ defineExpose({
 	border: none;
 	outline: none;
 	background: transparent;
+	font-size: var(--richtext-font-size, 16px);
 }
 
 .html-editor {