@bagelink/vue 0.0.996 → 0.0.1000

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

@@ -1,133 +1,162 @@
 <script setup lang="ts">
-import hljsVuePlugin from '@highlightjs/vue-plugin'
-import { nextTick, watch } from 'vue'
-import 'highlight.js/lib/common'
-import 'highlight.js/styles/atom-one-dark.css'
+import type { Language, HilightJS } from './CodeTypes'
 
-const { readonly = false, language, modelValue = '' } = defineProps<{
-	language?: string
+declare global {
+	interface Window {
+		hljs: HilightJS
+	}
+}
+import { appendStyle, appendScript } from '@bagelink/vue'
+import { nextTick, onMounted, watch } from 'vue'
+
+// Props
+const { language, readonly = false, modelValue = '', autodetect, ignoreIllegals = true } = defineProps<{
+	language?: Language
 	readonly?: boolean
 	modelValue?: string
+	autodetect?: boolean
+	ignoreIllegals?: boolean
 }>()
 
+const emit = defineEmits(['update:modelValue'])
+
+let hljs = $ref<HilightJS | null>(null)
+
+// State and refs
 let code = $ref('')
+const textarea = $ref<HTMLTextAreaElement>()
+let height = $ref('300px')
+let loaded = $ref(false)
+
+// Computed properties
+const cannotDetectLanguage = $computed(() => {
+	const lang = language || ''
+	return !(autodetect ?? !lang) && !hljs?.getLanguage(lang)
+})
 
-function tabKeyDown(event: KeyboardEvent) {
+const className = $computed(() => {
+	if (cannotDetectLanguage) return ''
+	return `hljs ${language || ''}`
+})
+
+const highlightedCode = $computed(() => {
+	if (cannotDetectLanguage) {
+		console.warn(`The language "${language}" you specified could not be found.`)
+		return escapeHtml(code)
+	}
+	const lang = language || ''
+	const result = autodetect
+		? hljs?.highlightAuto(code)
+		: hljs?.highlight(code, { language: lang, ignoreIllegals })
+	return result?.value || ''
+})
+
+// Methods
+function escapeHtml(unsafe: string) {
+	return unsafe.replace(/[&<>"']/g, (m) => {
+		const replacements: { [key: string]: string } = {
+			'&': '&amp;',
+			'<': '&lt;',
+			'>': '&gt;',
+			'"': '&quot;',
+			'\'': '&#039;'
+		}
+		return replacements[m] || ''
+	})
+}
+
+function handleTab(event: KeyboardEvent) {
 	const target = event.target as HTMLTextAreaElement
 	const start = target.selectionStart
-	const end = target.selectionEnd
 	const tab = '  '
-	code = code.slice(0, start) + tab + code.slice(end)
+	code = code.slice(0, start) + tab + code.slice(start)
 	nextTick(() => {
-		target.selectionStart = target.selectionEnd = start + 2
+		target.selectionStart = target.selectionEnd = start + tab.length
 	})
 }
 
-const textarea = $ref<HTMLInputElement>()
-let height = $ref('300px')
-
-function setHeight() {
-	if (!textarea) return
-	const { scrollHeight } = textarea
-	height = `${scrollHeight}px`
+function adjustHeight() {
+	if (textarea?.scrollHeight && textarea.scrollHeight > 300) {
+		height = `${textarea.scrollHeight}px`
+	}
 }
 
-const Highlightjs = hljsVuePlugin.component
-watch(() => code, setHeight, { immediate: true })
-watch(() => modelValue, (value) => {
-	if (value !== code) code = value
+// 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.')
+	}
+})
+
+watch(() => modelValue, (newVal) => {
+	adjustHeight()
+	if (newVal !== code) {
+		code = newVal
+	}
 }, { immediate: true })
 </script>
 
 <template>
-	<div class="code-editor-wrap ltr radius-1">
+	<div v-if="loaded" class="code-editor-wrap grid rounded p-1 overflow hm-300px ">
 		<div class="relative block h-100" :style="{ height }">
-			<div class="numbers absolute inset-0 py-1 px-05 txt16 line-height-15 overflow-hidden z-1 w50px txt-start opacity-3 color-gray">
-				<div
-					v-for="(_, index) in code.split('\n')"
-					:key="index"
-					class="number txt-end"
-				>
-					{{ index + 1 }}
-				</div>
-			</div>
-			<Highlightjs
-				class="highlighted-code absolute inset-0"
-				:autodetect="!language"
-				:code="code"
-				:wrap="true"
-				:language="language"
-			/>
+			<pre class=" overflow-hidden absolute inset-0 p-0 m-0  h-100  codeText">
+				<code :class="className" v-html="highlightedCode" />
+			</pre>
 			<textarea
 				v-if="!readonly"
 				ref="textarea"
 				v-model="code"
-				:spellcheck="false"
-				class="code-editor absolute inset-0 overflow-hidden bg-transparent line-height-15 border-none m-0"
+				class="code-editor absolute inset-0 bg-transparent overflow-hidden h-100 p-0 m-0 codeText border-none"
+				spellcheck="false"
 				placeholder="Write your code here"
 				aria-label="Code Editor"
 				data-gramm="false"
-				@input="$emit('update:modelValue', code)"
-				@keydown.tab.prevent="tabKeyDown"
+				@keydown.tab.prevent="handleTab"
+				@input="emit('update:modelValue', code)"
 			/>
 		</div>
 	</div>
 </template>
 
 <style>
-.code-editor-wrap{
-	background: #282c34;
-	overflow: scroll;
-	display: grid;
-	max-height: 300px;
+pre code.hljs{
+    padding: 0 !important;
+	inset: 0 !important;
+	position: absolute;
 }
+</style>
 
-.numbers {
-	font-family: monospace;
-	border-inline-end: 1px solid var(--bgl-gray);
-}
-.number{
-	scale: 0.9;
+<style scoped>
+.codeText{
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  caret-color: var(--bgl-white);
 }
-/* Highlight.js styles */
-.highlighted-code {
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	overflow: hidden;
-	margin: 0;
-	padding: 0;
+.code-editor-wrap {
+  background: #282c34;
+  height: max-content;
 }
 
-.highlighted-code code {
-	padding-left: 70px !important;
-	overflow: hidden !important;
-}
-
-/* Textarea aligned with Highlight.js */
 .code-editor {
-	font-family: monospace;
-	color: transparent;
-	resize: none;
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	caret-color: var(--bgl-white);
-	font-size: 16px;
-	padding: 1rem;
-	padding-left: 70px !important;
-
-}
-
-.code-editor::-moz-selection {
-	background: #2466bc30;
-	color: inherit;
+  color: transparent;
+  resize: none;
 }
 
 .code-editor::selection {
-	background: #2466bc30;
-	color: inherit;
+  background: #2466bc30;
+  color: inherit;
 }
 
 .code-editor:focus {
-	outline: none;
+  outline: none;
 }
 </style>

package/src/utils/index.ts

@@ -111,22 +111,43 @@ export function sleep(ms: number = 100) {
 	return new Promise(resolve => setTimeout(resolve, ms))
 }
 
-export function appendScript(src: string): Promise<void> {
+export function appendScript(src: string, options?: { id?: string }): Promise<void> {
 	return new Promise((resolve, reject) => {
-		if (document.querySelector(`script[src="${src}"]`)) {
+		if (options?.id) {
+			if (document.getElementById(options.id)) {
+				resolve()
+				return
+			}
+		} else if (document.querySelector(`script[src="${src}"]`)) {
 			resolve()
 			return
 		}
 		const script = document.createElement('script')
 		script.src = src
-		script.onload = () => {
-			resolve()
+		if (options?.id) {
+			script.id = options.id
 		}
+		script.onload = () => { resolve() }
 		script.onerror = reject
 		document.head.append(script)
 	})
 }
 
+export function appendStyle(src: string): Promise<void> {
+	return new Promise((resolve, reject) => {
+		if (document.querySelector(`link[href="${src}"]`)) {
+			resolve()
+			return
+		}
+		const link = document.createElement('link')
+		link.href = src
+		link.rel = 'stylesheet'
+		link.onload = () => { resolve() }
+		link.onerror = reject
+		document.head.append(link)
+	})
+}
+
 export function normalizeURL(url: string) {
 	if (url.startsWith('https://')) return url
 	url = url.replace(/http:\/\//, '')