106 lines
2.6 KiB
Vue
106 lines
2.6 KiB
Vue
<template>
|
|
<div ref="editorRef" class="aks-code-editor" :class="{ 'is-disabled': disabled }" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue'
|
|
import { EditorView, basicSetup } from 'codemirror'
|
|
import { EditorState } from '@codemirror/state'
|
|
import { html } from '@codemirror/lang-html'
|
|
import { css } from '@codemirror/lang-css'
|
|
import { javascript } from '@codemirror/lang-javascript'
|
|
import { oneDark } from '@codemirror/theme-one-dark'
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: String, default: '' },
|
|
language: { type: String, default: 'html' },
|
|
disabled: { type: Boolean, default: false },
|
|
rows: { type: Number, default: 8 },
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const editorRef = ref(null)
|
|
const view = shallowRef(null)
|
|
let updating = false
|
|
|
|
function resolveLang(lang) {
|
|
switch (lang) {
|
|
case 'css': return css()
|
|
case 'js':
|
|
case 'javascript': return javascript()
|
|
case 'html':
|
|
default: return html()
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (!editorRef.value) return
|
|
const state = EditorState.create({
|
|
doc: props.modelValue || '',
|
|
extensions: [
|
|
basicSetup,
|
|
resolveLang(props.language),
|
|
oneDark,
|
|
EditorView.updateListener.of((update) => {
|
|
if (update.docChanged && !updating) {
|
|
const val = update.state.doc.toString()
|
|
emit('update:modelValue', val)
|
|
}
|
|
}),
|
|
EditorView.editable.of(!props.disabled),
|
|
EditorState.readOnly.of(props.disabled),
|
|
],
|
|
})
|
|
view.value = new EditorView({ state, parent: editorRef.value })
|
|
})
|
|
|
|
watch(() => props.modelValue, (newVal) => {
|
|
if (!view.value) return
|
|
const current = view.value.state.doc.toString()
|
|
if (newVal !== current) {
|
|
updating = true
|
|
view.value.dispatch({
|
|
changes: { from: 0, to: current.length, insert: newVal || '' },
|
|
})
|
|
updating = false
|
|
}
|
|
})
|
|
|
|
watch(() => props.disabled, (val) => {
|
|
if (!view.value) return
|
|
view.value.dispatch({
|
|
effects: [
|
|
EditorView.editable.reconfigure(EditorView.editable.of(!val)),
|
|
EditorState.readOnly.reconfigure(EditorState.readOnly.of(val)),
|
|
],
|
|
})
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (view.value) {
|
|
view.value.destroy()
|
|
view.value = null
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.aks-code-editor {
|
|
border: 1px solid var(--n-border-color, #e0e0e6);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
min-height: calc(var(--rows, 8) * 22px);
|
|
}
|
|
.aks-code-editor :deep(.cm-editor) {
|
|
font-size: 13px;
|
|
}
|
|
.aks-code-editor :deep(.cm-editor.cm-focused) {
|
|
outline: none;
|
|
}
|
|
.aks-code-editor.is-disabled {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|