@bagelink/vue 1.2.79 → 1.2.81

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -7,10 +7,9 @@ declare global {
 	}
 }
 import { appendStyle, appendScript } from '@bagelink/vue'
-import { nextTick, onMounted, watch } from 'vue'
+import { onMounted, ref, computed, watch } from 'vue'
 
-// Props
-const { language, readonly = false, modelValue = '', autodetect, ignoreIllegals = true, label, height = '300px' } = defineProps<{
+interface CodeEditorProps {
 	language?: Language
 	readonly?: boolean
 	modelValue?: string
@@ -18,39 +17,50 @@ const { language, readonly = false, modelValue = '', autodetect, ignoreIllegals
 	ignoreIllegals?: boolean
 	label?: string
 	height?: string
-}>()
+}
+// Props with default values
+const props = withDefaults(defineProps<CodeEditorProps>(), {
+	language: 'html',
+	readonly: false,
+	modelValue: '',
+	autodetect: true,
+	ignoreIllegals: true,
+	label: '',
+	height: '240px'
+})
 
 const emit = defineEmits(['update:modelValue'])
+// State
+const code = ref(props.modelValue || '')
+const editorRef = ref<HTMLDivElement>()
+const loaded = ref(false)
+const hljs = ref<HilightJS | null>(null)
+// Computed
+const maxHeight = computed(() => {
+	const h = props.height ?? '240px'
+	return h.match(/^\d+$/) ? `${h}px` : h
+})
 
-let hljs = $ref<HilightJS | null>(null)
+const formattedCode = computed(() => {
+	if (!hljs.value) return escapeHtml(code.value)
 
-let elHeight = $ref(height)
-// State and refs
-let code = $ref('')
-const textarea = $ref<HTMLTextAreaElement>()
-let loaded = $ref(false)
+	try {
+		const lang = props.language || ''
 
-// Computed properties
-const cannotDetectLanguage = $computed(() => {
-	const lang = language || ''
-	return !(autodetect ?? !lang) && !hljs?.getLanguage(lang)
-})
+		if (lang && !props.autodetect && !hljs.value.getLanguage(lang)) {
+			console.warn(`The language "${lang}" is not available.`)
+			return escapeHtml(code.value)
+		}
 
-const className = $computed(() => {
-	if (cannotDetectLanguage) return ''
-	return `hljs ${language || ''}`
-})
+		const result = props.autodetect
+			? hljs.value.highlightAuto(code.value)
+			: hljs.value.highlight(code.value, { language: lang, ignoreIllegals: props.ignoreIllegals })
 
-const highlightedCode = $computed(() => {
-	if (cannotDetectLanguage) {
-		console.warn(`The language "${language}" you specified could not be found.`)
-		return escapeHtml(code)
+		return result.value || escapeHtml(code.value)
+	} catch (error) {
+		console.error('Highlighting error:', error)
+		return escapeHtml(code.value)
 	}
-	const lang = language || ''
-	const result = autodetect
-		? hljs?.highlightAuto(code)
-		: hljs?.highlight(code, { language: lang, ignoreIllegals })
-	return result?.value || ''
 })
 
 // Methods
@@ -67,113 +77,165 @@ function escapeHtml(unsafe: string) {
 	})
 }
 
+function handleInput(e: Event) {
+	const target = e.target as HTMLTextAreaElement
+	code.value = target.value
+	emit('update:modelValue', code.value)
+}
+
 function handleTab(event: KeyboardEvent) {
+	if (event.key !== 'Tab') return
+
+	event.preventDefault()
 	const target = event.target as HTMLTextAreaElement
 	const start = target.selectionStart
-	const tab = '  '
-	code = code.slice(0, start) + tab + code.slice(start)
-	nextTick(() => {
-		target.selectionStart = target.selectionEnd = start + tab.length
-	})
-}
+	const end = target.selectionEnd
 
-function adjustHeight() {
-	if (textarea?.scrollHeight && textarea.scrollHeight > Number.parseInt(elHeight)) {
-		elHeight = `${textarea.scrollHeight}px`
-	}
+	// Add tab or indent selected text
+	const newValue = `${code.value.substring(0, start)}  ${code.value.substring(end)}`
+	code.value = newValue
+	emit('update:modelValue', code.value)
+
+	// Move cursor position after the inserted tab
+	setTimeout(() => {
+		target.selectionStart = target.selectionEnd = start + 2
+	}, 0)
 }
 
 // Lifecycle
 onMounted(async () => {
-	// Append scripts and styles for Highlight.js
-	await appendScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js', { id: 'hljs-cdn' })
-	await appendStyle('https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css')
-
-	// Initialize hljs
-	if (window.hljs) {
-		hljs = window.hljs as HilightJS
-		loaded = true
-	} else {
-		console.error('Highlight.js failed to load.')
+	try {
+		// Load highlight.js
+		await appendScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js', { id: 'hljs-cdn' })
+		await appendStyle('https://cdn.jsdelivr.net/npm/highlight.js/styles/atom-one-dark.min.css')
+
+		if (window.hljs) {
+			hljs.value = window.hljs
+			loaded.value = true
+		} else {
+			console.error('Failed to load highlight.js')
+		}
+	} catch (error) {
+		console.error('Error loading highlight.js:', error)
 	}
 })
 
-watch(() => modelValue, (newVal) => {
-	adjustHeight()
-	if (newVal !== code) {
-		code = newVal
+// Watch for external modelValue changes
+watch(() => props.modelValue, (newVal) => {
+	if (newVal !== undefined && newVal !== code.value) {
+		code.value = newVal
 	}
 }, { immediate: true })
 </script>
 
 <template>
-	<div class="mb-05">
-		<label v-if="label" class="label txt-start">{{ label }}</label>
-		<div v-if="loaded" class="code-editor-wrap grid rounded p-1 overflow hm-300px ltr  txt-start relative h-100p">
-			<div class="relative block h-100" :style="{ height: `calc(${elHeight} - 2rem)` }">
-				<pre class=" overflow-hidden absolute inset-0 p-0 m-0  h-100  codeText">
-					<code class="absolute inset-0" :class="className" v-html="highlightedCode" />
-				</pre>
+	<div class="code-editor-container ltr" :style="{ maxHeight }">
+		<label v-if="label" class="label">{{ label }}</label>
+		<div
+			v-if="loaded"
+			ref="editorRef"
+			class="code-editor-grandpa"
+		>
+			<div class="editor-content-papa relative">
+				<pre class="code-display" wrap><code v-html="formattedCode" /></pre>
 				<textarea
 					v-if="!readonly"
-					ref="textarea"
-					v-model="code"
-					class="code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none txt-start"
+					:value="code"
+					class="code-input"
 					spellcheck="false"
-					placeholder="Write your code here"
-					aria-label="Code Editor"
-					data-gramm="false"
-					@keydown.tab.prevent="handleTab"
-					@input="emit('update:modelValue', code)"
+					autocomplete="off"
+					autocorrect="off"
+					autocapitalize="off"
+					@input="handleInput"
+					@keydown="handleTab"
 				/>
 			</div>
 		</div>
 	</div>
 </template>
 
-<style>
-pre code.hljs{
-	padding: 0 !important;
-	inset: 0 !important;
-	position: absolute;
+<style scoped>
+.code-editor-container {
+	margin-bottom: 0.5rem;
+	height: 100%;
 }
-</style>
 
-<style scoped>
-.codeText{
-  font-family: monospace;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  caret-color: var(--bgl-white);
-  color: var(--bgl-white);
+.label {
+	display: block;
+	text-align: left;
+	margin-bottom: 0.25rem;
 }
-.code-editor-wrap {
-  background: #282c34;
-  height: max-content;
+
+.code-editor-grandpa {
+	background: #22252A;
+	border-radius: 0.25rem;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	padding: 1ch;
+	padding-inline-start: 2ch;
 }
-.code-editor-wrap:focus-within, .code-editor-wrap:focus-visible, .code-editor-wrap:focus {
-    box-shadow: inset 0 0 10px #00000021;
-	outline: solid 1px var(--border-color);
-	/* outline: -webkit-focus-ring-color auto 1px; */
 
+.code-editor-grandpa:focus-within {
+	outline: solid 1px var(--border-color, #4f575f);
+	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
 }
 
-.code-editor-wrap:focus-within:has(textarea:focus) + .label,
-.label:has(+ .code-editor-wrap:focus-within) {
-	color: var(--bgl-primary) !important;
+.editor-content-papa {
+	position: relative;
+	width: 100%;
+	padding-bottom: calc(100% - 5lh);
+}
+.code-display,
+.code-input {
+	inset: 0;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	font-family: monospace;
+	font-size: 1em;
+	line-height: 1.5;
+	tab-size: 2;
+	word-break: keep-all;
+	text-align: left;
 }
 
-.code-editor {
-  color: transparent;
-  resize: none;
+.code-display {
+	position: relative;
+	color:  #fff;
+	pointer-events: none;
+	z-index: 1;
 }
 
-.code-editor::selection {
-  background: #2466bc30;
-  color: inherit;
+.code-display code {
+	display: block;
+	background: transparent !important;
+	padding: 0 !important;
 }
 
-.code-editor:focus {
-  outline: none;
+.code-input {
+	position: absolute;
+	background: transparent;
+	color: transparent;
+	caret-color:  #fff;
+	border: none;
+	resize: none;
+	outline: none;
+	z-index: 2;
+}
+
+.code-input::selection {
+	background-color: rgba(36, 102, 188, 0.3);
+	color: transparent;
+}
+</style>
+
+<style>
+/* Global styles */
+pre code.hljs {
+	padding: 0 !important;
+	background: transparent !important;
 }
 </style>

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

@@ -15,6 +15,9 @@ const editor = useEditor()
 const isInitializing = ref(false)
 const hasInitialized = ref(false)
 
+// Initialize content from modelValue
+editor.state.content = props.modelValue
+
 // Initialize debugger if debug mode is enabled
 if (props.debug) {
 	editor.initDebugger()
@@ -83,6 +86,9 @@ async function initEditor() {
 		// Set default direction based on content
 		doc.body.dir = hasRTL ? 'rtl' : 'ltr'
 
+		// Ensure editor.state.content is set to the current HTML content
+		editor.state.content = doc.body.innerHTML
+
 		editor.init(doc)
 		useEditorKeyboard(doc, commands)
 
@@ -92,6 +98,8 @@ async function initEditor() {
 			p.dir = doc.body.dir
 			p.innerHTML = '<br>'
 			doc.body.appendChild(p)
+			// Update state.content after changes
+			editor.state.content = doc.body.innerHTML
 		} else {
 			// Convert any direct text nodes to paragraphs
 			const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT)
@@ -112,6 +120,8 @@ async function initEditor() {
 					doc.body.removeChild(textNode)
 				}
 			})
+			// Update state.content after cleanup
+			editor.state.content = doc.body.innerHTML
 		}
 
 		doc.body.focus()
@@ -168,7 +178,7 @@ watch(() => editor.state.content, (newValue) => {
 					v-if="editor.state.isSplitView"
 					v-model="editor.state.content"
 					language="html"
-					class="code-editor"
+					:height="editor.state.isFullscreen ? 'calc(100vh - 4rem)' : '250px'"
 					@update:modelValue="editor.updateState.content('html')"
 				/>
 			</div>
@@ -196,12 +206,6 @@ watch(() => editor.state.content, (newValue) => {
 .content-area li{
 	line-height: 1.65;
 }
-
-.code-editor {
-	flex: 1;
-	min-height: 240px !important;
-	height: 100%;
-}
 </style>
 
 <style scoped>
@@ -213,7 +217,7 @@ watch(() => editor.state.content, (newValue) => {
 
 .editor-container {
 	display: flex;
-	gap: 1rem;
+	gap: 0.5rem;
 }
 
 .content-area,
@@ -274,9 +278,6 @@ watch(() => editor.state.content, (newValue) => {
 	height: 100%;
 	overflow-y: auto;
 }
-.fullscreen-mode .code-editor{
-	height: 100% !important;
-}
 
 .debug-controls {
 	display: flex;

package/src/utils/index.ts

@@ -124,26 +124,51 @@ export function sleep(ms: number = 100) {
 	return new Promise(resolve => setTimeout(resolve, ms))
 }
 
-export function appendScript(src: string, options?: { id?: string }): Promise<void> {
-	return new Promise((resolve, reject) => {
-		if (options?.id) {
-			if (document.getElementById(options.id)) {
-				resolve()
-				return
-			}
-		} else if (document.querySelector(`script[src="${src}"]`)) {
-			resolve()
-			return
-		}
+// Keep track of loading scripts
+const scriptsLoading = new Map<string, Promise<void>>()
+
+export async function appendScript(src: string, options?: { id?: string }): Promise<void> {
+	const scriptId = options?.id || src
+	await sleep(1)
+	// If this script is already loading, return the existing promise
+	if (scriptsLoading.has(scriptId)) {
+		return scriptsLoading.get(scriptId)!
+	}
+
+	// Check if script is already in the document
+	if (options?.id && document.getElementById(options.id)) {
+		return Promise.resolve()
+	} else if (document.querySelector(`script[src="${src}"]`)) {
+		return Promise.resolve()
+	}
+
+	// Create a new loading promise for this script
+	const loadingPromise = new Promise<void>((resolve, reject) => {
 		const script = document.createElement('script')
 		script.src = src
 		if (options?.id) {
 			script.id = options.id
 		}
-		script.onload = () => { resolve() }
-		script.onerror = reject
+
+		script.onload = () => {
+			resolve()
+			// Remove from loading scripts map when done
+			scriptsLoading.delete(scriptId)
+		}
+
+		script.onerror = (err) => {
+			reject(err)
+			// Remove from loading scripts map on error
+			scriptsLoading.delete(scriptId)
+		}
+
 		document.head.append(script)
 	})
+
+	// Store the loading promise for this script
+	scriptsLoading.set(scriptId, loadingPromise)
+
+	return loadingPromise
 }
 
 export function appendStyle(src: string): Promise<void> {