@bagelink/vue 0.0.986 → 0.0.988

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

@@ -0,0 +1,440 @@
+<script setup lang="ts">
+import type { Directive } from 'vue'
+import { Btn, Dropdown, copyText } from '@bagelink/vue'
+import hljs from 'highlight.js'
+import { defineEmits, defineProps, nextTick, onMounted, watch } from 'vue'
+import { type CodeTheme, type Language, codeLanguages } from './CodeTypes'
+import { formatCode } from './format'
+import './themes/themes-base16.css'
+import './themes/themes.css'
+
+const {
+	showLineNumbers = false,
+	modelValue = '',
+	theme = 'github-dark',
+	tabSpaces = 2,
+	wrap = true,
+	readOnly = false,
+	autofocus = false,
+	header = true,
+	width = '400px',
+	height = '600px',
+	maxWidth,
+	minWidth,
+	maxHeight,
+	minHeight,
+	borderRadius = '12px',
+	languages = ['javascript'],
+	displayLanguage = true,
+	copyCode = true,
+	fontSize = '17px',
+	padding = '20px'
+} = defineProps<{
+	showLineNumbers?: boolean
+	modelValue?: string
+	theme?: CodeTheme
+	tabSpaces?: number
+	wrap?: boolean
+	readOnly?: boolean
+	autofocus?: boolean
+	header?: boolean
+	width?: string
+	height?: string
+	maxWidth?: string
+	minWidth?: string
+	maxHeight?: string
+	minHeight?: string
+	borderRadius?: string
+	languages?: Language[]
+	displayLanguage?: boolean
+	copyCode?: boolean
+	fontSize?: string
+	padding?: string
+}>()
+
+const emit = defineEmits(['update:modelValue', 'lang', 'content', 'textarea', 'search'])
+
+let scrollBarWidth = $ref(0)
+let scrollBarHeight = $ref(0)
+let top = $ref(0)
+let left = $ref(0)
+let currentLanguage = $ref(languages[0])
+let content = $ref(formatCode(modelValue, currentLanguage))
+let cursorPosition = $ref(0)
+let insertTab = $ref(false)
+let lineNum = $ref(0)
+let lineNumsWidth = $ref(0)
+let scrolling = $ref(false)
+let textareaHeight = $ref(0)
+const langListHeight = $ref('200px') // Define langListHeight with a default value
+
+const textarea = $ref<HTMLTextAreaElement>()
+const code = $ref<HTMLElement>()
+const lineNums = $ref<HTMLElement>()
+
+const languageClass = $computed(() => `hljs language-${currentLanguage}`)
+const languageTitle = $computed(() => codeLanguages[currentLanguage as Language])
+const tabWidth = $computed(() => ' '.repeat(tabSpaces))
+const scroll = $computed(() => height !== 'auto')
+
+const showLineNums = $computed(() => showLineNumbers || wrap)
+
+const autoClosePairs = {
+	'(': ')',
+	'[': ']',
+	'{': '}',
+	'"': '"',
+	'\'': '\'',
+	'`': '`'
+}
+
+function updateValue(e: Event) {
+	const target = e.target as HTMLTextAreaElement
+	const char = target.value[target.selectionStart - 1]
+
+	if (char && autoClosePairs[char as keyof typeof autoClosePairs]) {
+		const closingChar = autoClosePairs[char as keyof typeof autoClosePairs]
+		const cursorPos = target.selectionStart
+		target.value = target.value.slice(0, cursorPos) + closingChar + target.value.slice(cursorPos)
+		target.selectionStart = cursorPos
+		target.selectionEnd = cursorPos
+	}
+	const cursorPos = target.selectionStart
+	content = target.value
+	emit('update:modelValue', content)
+	nextTick(() => {
+		target.setSelectionRange(cursorPos, cursorPos)
+	})
+}
+
+function changeLang(lang: Language) {
+	currentLanguage = lang
+	emit('lang', lang)
+}
+
+function tab() {
+	if (document.execCommand('insertText')) {
+		document.execCommand('insertText', false, tabWidth)
+	} else {
+		const cursorPos = textarea?.selectionStart ?? 0
+		content
+			= content.substring(0, cursorPos) + tabWidth + content.substring(cursorPos)
+		cursorPosition = cursorPos + tabWidth.length
+		insertTab = true
+	}
+}
+
+function calcScrollDistance(e: Event) {
+	const target = e.target as HTMLTextAreaElement
+	code?.setAttribute('scrolling', 'true')
+	scrolling = true
+	top = -target.scrollTop
+	left = -target.scrollLeft
+}
+
+function resizer() {
+	const textareaResizer = new ResizeObserver((entries) => {
+		const target = entries[0].target as HTMLElement
+		scrollBarWidth = target.offsetWidth - target.clientWidth
+		scrollBarHeight = target.offsetHeight - target.clientHeight
+		textareaHeight = target.offsetHeight
+	})
+	if (textarea) {
+		textareaResizer.observe(textarea)
+	}
+
+	const lineNumsResizer = new ResizeObserver((entries) => {
+		lineNumsWidth = (entries[0].target as HTMLElement).offsetWidth
+	})
+	if (lineNums) {
+		lineNumsResizer.observe(lineNums)
+	}
+}
+
+function getLineNum() {
+	const str = textarea!.value
+	let lineNumCount = 0
+	let position = str.indexOf('\n')
+	while (position !== -1) {
+		lineNumCount++
+		position = str.indexOf('\n', position + 1)
+	}
+	const firstChild = lineNums!.firstChild as HTMLElement
+	const singleLineHeight = firstChild!.offsetHeight
+	const heightNum = Math.floor(textareaHeight / singleLineHeight) - 1
+	lineNum = height === 'auto' ? lineNumCount : Math.max(lineNumCount, heightNum)
+}
+
+watch(() => modelValue, (newVal) => {
+	if (newVal !== undefined) {
+		content = newVal
+	}
+})
+
+onMounted(() => {
+	emit('lang', languages[0])
+	emit('content', content)
+	emit('textarea', textarea)
+	resizer()
+})
+
+watch(() => insertTab, (newVal) => {
+	if (newVal) {
+		textarea!.setSelectionRange(cursorPosition, cursorPosition)
+		insertTab = false
+	}
+})
+
+watch(() => showLineNumbers, (newVal) => {
+	if (newVal) {
+		if (scrolling) scrolling = false
+		else getLineNum()
+	}
+})
+
+const highlight: Directive = {
+	mounted(el, binding) {
+		el.textContent = binding
+		hljs.highlightElement(el)
+	},
+	updated(el, binding) {
+		if (el.getAttribute('data-scrolling') === 'true') {
+			el.setAttribute('data-scrolling', 'false')
+		} else {
+			el.textContent = binding
+			hljs.highlightElement(el)
+		}
+	},
+}
+
+defineExpose({ highlight })
+</script>
+
+<template>
+	<div
+		:theme="theme" class="code-editor" :class="{
+			'hide-header': !header,
+			'scroll': scroll,
+			'read-only': readOnly,
+			'wrap': wrap,
+		}" :style="{
+			width,
+			height,
+			maxWidth,
+			minWidth,
+			maxHeight,
+			minHeight,
+		}"
+	>
+		<div class="hljs" :style="{ borderRadius }">
+			<div
+				v-if="header" class="p-025 flex space-between" :class="{ border: showLineNums }"
+				:style="{ borderRadius: `${borderRadius} ${borderRadius} 0 0` }"
+			>
+				<Dropdown v-if="displayLanguage" :value="languageTitle" flat thin :disabled="languages.length <= 1">
+					<ul class="lang-list hljs" :style="{ height: langListHeight }">
+						<li v-for="(lang, index) in languages" :key="index" @click="changeLang(lang)">
+							{{ codeLanguages[lang] }}
+						</li>
+					</ul>
+				</Dropdown>
+				<Btn v-if="copyCode" v-tooltip.left="'Copy'" class="color-white" flat thin icon="content_copy" @click="copyText(content)" />
+			</div>
+			<div class="code-area" :style="{ borderRadius: header ? `0 0 ${borderRadius} ${borderRadius}` : borderRadius }">
+				<div
+					v-if="showLineNums" ref="lineNums" class="line-nums hljs" :style="{
+						fontSize,
+						paddingTop: header ? '10px' : padding,
+						paddingBottom: padding,
+						top: `${top}px`,
+					}"
+				>
+					<div>1</div>
+					<div v-for="num in lineNum" :key="num">
+						{{ num + 1 }}
+					</div>
+					<div>&nbsp;</div>
+				</div>
+				<textarea
+					ref="textarea" title="textarea" :readOnly="readOnly" :style="{
+						fontSize,
+						padding: !header ? padding : lineNums ? `10px ${padding} ${padding}` : `0 ${padding} ${padding}`,
+						marginLeft: showLineNums ? `${lineNumsWidth}px` : '0',
+						width: showLineNums ? `calc(100% - ${lineNumsWidth}px)` : '100%',
+					}" :autofocus="autofocus" spellcheck="false" :value="content"
+					@keydown.tab.prevent.stop="tab" @scroll="calcScrollDistance" @input="updateValue"
+				/>
+				<pre
+					:style="{
+						paddingRight: `${scrollBarWidth}px`,
+						paddingBottom: `${scrollBarHeight}px`,
+						marginLeft: showLineNums ? `${lineNumsWidth}px` : '0',
+						width: showLineNums ? `calc(100% - ${lineNumsWidth}px)` : '100%',
+					}"
+				>
+        <code
+          ref="code"
+          :innerHTML="hljs.highlight(content, { language: currentLanguage }).value"
+          :class="languageClass"
+          :style="{
+          	top: `${top}px`,
+          	left: `${left}px`,
+          	fontSize,
+          	padding: !header ? padding : lineNums ? `10px ${padding} ${padding}` : `0 ${padding} ${padding}`,
+          }"
+/>
+      </pre>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style>
+.code-editor {
+	position: relative;
+}
+
+.code-editor>div {
+	width: 100%;
+	height: 100%;
+}
+
+.code-editor .code-area {
+	position: relative;
+	z-index: 0;
+	text-align: left;
+	overflow: hidden;
+}
+
+/* Common styles for text elements */
+.code-editor .code-area>textarea,
+.code-editor .code-area>pre>code,
+.code-editor .line-nums>div {
+	font-family: Consolas, Monaco, monospace;
+	line-height: 1.5;
+}
+
+.code-editor .code-area>textarea:focus-within {
+	background: rgba(255, 255, 255, 0.05);
+}
+
+/* Textarea styles */
+.code-editor .code-area>textarea {
+	position: absolute;
+	z-index: 1;
+	inset: 0;
+	box-sizing: border-box;
+	caret-color: rgb(127, 127, 127);
+	color: transparent;
+	white-space: pre;
+	word-wrap: normal;
+	border: 0;
+	width: 100%;
+	height: 100%;
+	background: none;
+	resize: none;
+	outline: none;
+}
+
+/* Pre and code styles */
+.code-editor .code-area>pre {
+	box-sizing: border-box;
+	position: relative;
+	margin: 0;
+	font-size: 0;
+}
+
+.code-editor .code-area>pre>code {
+	display: block;
+	position: relative;
+	overflow-x: visible !important;
+	background: none;
+	margin: 0;
+	box-sizing: border-box;
+}
+
+/* Wrap styles */
+.code-editor.wrap .code-area>textarea,
+.code-editor.wrap .code-area>pre>code {
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	word-break: break-all;
+}
+
+/* Scroll styles */
+.code-editor.scroll .code-area {
+	height: calc(100% - 34px);
+}
+
+.code-editor.hide-header.scroll .code-area {
+	height: 100%;
+}
+
+.code-editor.scroll .code-area>textarea {
+	overflow: auto;
+}
+
+/* Language list styles */
+.code-editor .list {
+	user-select: none;
+	height: 100%;
+	font-family: sans-serif;
+}
+
+.code-editor .list>.lang-list {
+	border-radius: 5px;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+	font-size: 13px;
+	overflow: auto;
+}
+
+.code-editor .list>.lang-list>li {
+	padding: 0 12px;
+	line-height: 30px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	transition: background 0.16s ease;
+}
+
+.code-editor .list>.lang-list>li:first-child {
+	padding-top: 5px;
+}
+
+.code-editor .list>.lang-list>li:last-child {
+	padding-bottom: 5px;
+}
+
+.code-editor .list>.lang-list>li:hover {
+	background: rgba(160, 160, 160, 0.4);
+}
+
+/* Line numbers */
+.code-editor .line-nums {
+	min-width: 36px;
+	position: absolute;
+	left: 0;
+	padding: 0 8px;
+	text-align: right;
+	opacity: 0.3;
+}
+
+.code-editor .line-nums::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	border-right: 1px solid currentColor;
+	opacity: 0.5;
+}
+
+.code-editor .header.border::after {
+	content: "";
+	position: absolute;
+	inset: auto 0 0;
+	height: 1px;
+	background: currentColor;
+	opacity: 0.15;
+}
+</style>

package/src/components/form/inputs/CodeEditor/format.ts

@@ -0,0 +1,98 @@
+const format = {
+	html: (html: string) => {
+		const formatted = []
+		const reg = /(>)(<)(\/*)/g
+		const tab = '  '
+		let level = 0
+
+		html = html.replace(reg, '$1\n$2$3')
+
+		const lines = html.split('\n')
+
+		for (const line of lines) {
+			if (line.match(/<\/\w+/) && !line.match(/\/>/)) {
+				level--
+			}
+			formatted.push(tab.repeat(Math.max(level, 0)) + line)
+			if (line.match(/<\w[^>]*[^/]>/)) {
+				level++
+			}
+		}
+		return formatted.join('\n')
+	},
+	json: (jsonString: string, indent = 4) => {
+		try {
+			const jsonObject = JSON.parse(jsonString)
+			return JSON.stringify(jsonObject, null, indent)
+		} catch (error) {
+			return `Invalid JSON: ${(error as Error).message}`
+		}
+	},
+	javascript: (jsCode: string, indent = 4) => {
+		try {
+			const tab = ' '.repeat(indent)
+			let formatted = ''
+			let level = 0
+			let inString = ''
+
+			for (let i = 0; i < jsCode.length; i++) {
+				const char = jsCode[i]
+				const nextChar = jsCode[i + 1]
+				if (char === '"' || char === '\'' || char === '`') {
+					formatted += char
+					if (inString.length && inString === char) {
+						inString = ''
+					} else if (!inString.length) {
+						inString = char
+					}
+					continue
+				}
+				if (inString) {
+					formatted += char
+					continue
+				}
+				if (char === '{' || char === '[') {
+					formatted += `${char}\n${tab.repeat(++level)}`
+					continue
+				}
+				if (char === '}' || char === ']') {
+					formatted += `\n${tab.repeat(--level)}${char}`
+					continue
+				}
+				if (char === ';' || char === ',') {
+					formatted += `${char}\n${tab.repeat(level)}`
+					continue
+				}
+				if (char === '\n') {
+					formatted += `\n${tab.repeat(level)}`
+					continue
+				}
+				if (
+					(char === ')' && nextChar === '{') ||
+					(char === ')' && nextChar === ' ')
+				) {
+					formatted += `${char}\n${tab.repeat(level)}`
+					continue
+				}
+				formatted += char
+			}
+
+			return formatted
+		} catch (error) {
+			return `Error formatting JavaScript: ${(error as Error).message}`
+		}
+	}
+}
+
+export function formatCode(code: string, language: string) {
+	switch (language) {
+		case 'html':
+			return format.html(code)
+		case 'json':
+			return format.json(code)
+		case 'javascript':
+			return format.javascript(code)
+		default:
+			return code
+	}
+}