diff --git a/components/codeMirror.vue b/components/codeMirror.vue
index 6b3f583..961c932 100644
--- a/components/codeMirror.vue
+++ b/components/codeMirror.vue
@@ -12,6 +12,7 @@
+
@@ -23,29 +24,116 @@ import { EditorState } from "@codemirror/state"
// import {javascript} from "@codemirror/lang-javascript"
const props = defineProps<{
- data: string
+ data: string,
+ type?: string,
}>()
const show = ref(true)
const cmRootRef = ref()
-onMounted(() => {
- if (!cmRootRef.value) {
- return
+const isLoading = ref(true)
+
+const rows = computed(() => {
+ if (!props.data) {
+ return 5
}
- new EditorView({
+ const lines = props.data.split('\n')
+ console.log({
+ L: lines.length,
+ })
+ return lines.length - 2 > 0 ? lines.length - 2 : 1
+})
+
+const useLangExtensions = async () => {
+ const ext = props.type
+ switch (ext) {
+ case 'js':
+ case 'jsx':
+ case 'ts':
+ case 'tsx':
+ const { javascript } = await import('@codemirror/lang-javascript')
+ return [
+ javascript({
+ jsx: ext.substring(2, 3) === 'x',
+ typescript: ext.substring(0, 2) === 'js'
+ })
+ ]
+ break
+ case 'css':
+ case 'scss':
+ const { sass } = await import('@codemirror/lang-sass')
+ return [sass()]
+ break
+ case 'html':
+ const { html } = await import('@codemirror/lang-html')
+ return [html()]
+ break
+ case 'py':
+ const { python } = await import('@codemirror/lang-python')
+ return [python()]
+ break
+ case 'go':
+ const { go } = await import('@codemirror/lang-go')
+ return [go()]
+ break
+ case 'json':
+ const { json } = await import('@codemirror/lang-json')
+ return [json()]
+ break
+ case 'md':
+ const { markdown } = await import('@codemirror/lang-markdown')
+ return [markdown()]
+ break
+ case 'yaml':
+ const { yaml } = await import('@codemirror/lang-yaml')
+ return [yaml()]
+ break
+ case 'vue':
+ const { vue } = await import('@codemirror/lang-vue')
+ return [vue()]
+ break
+ case 'xml':
+ const { xml } = await import('@codemirror/lang-xml')
+ return [xml()]
+ break
+ default:
+ return []
+ }
+}
+
+let cm: EditorView
+
+onMounted(async () => {
+ const langExtensions = await useLangExtensions()
+ cm = new EditorView({
parent: cmRootRef.value,
doc: props.data,
extensions: [
basicSetup,
EditorState.readOnly.of(true),
+ ...langExtensions
],
})
+ isLoading.value = false
+})
+
+onUpdated(() => {
+ cm.dispatch({
+ changes: {
+ from: 0,
+ to: cm.state.doc.length,
+ insert: props.data,
+ },
+ })
+})
+
+onBeforeUnmount(() => {
+ cm.destroy()
})
-