Adam Bem
ea83e95a00
Reviewed-on: #277 Reviewed-by: Mikolaj Widla <widlam@noreply.example.com> Co-authored-by: Adam Bem <adam.bem@zoho.eu> Co-committed-by: Adam Bem <adam.bem@zoho.eu>
87 lines
1.6 KiB
Vue
87 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { onBeforeUpdate, inject } from 'vue'
|
|
import { Codemirror } from 'vue-codemirror'
|
|
import { oneDark } from '@codemirror/theme-one-dark'
|
|
import { espresso } from 'thememirror';
|
|
import {xml} from '@codemirror/lang-xml'
|
|
import {json} from '@codemirror/lang-json'
|
|
import {html} from '@codemirror/lang-html'
|
|
|
|
const props= defineProps({
|
|
code : {
|
|
type: String,
|
|
required: true
|
|
},
|
|
config: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(
|
|
[
|
|
'update:updatedCode'
|
|
]
|
|
)
|
|
|
|
const theme : string = inject('theme')!;
|
|
let extensions = parseExtensions();
|
|
|
|
onBeforeUpdate( () => { extensions = parseExtensions(); } )
|
|
|
|
function dataUpdated(newData:String){
|
|
emit('update:updatedCode',newData)
|
|
}
|
|
|
|
function selectTheme() {
|
|
if (isDarkModeSet())
|
|
return oneDark;
|
|
else
|
|
return espresso;
|
|
}
|
|
|
|
function isDarkModeSet(){
|
|
return localStorage.theme == "dark";
|
|
}
|
|
|
|
function parseExtensions(){
|
|
return [
|
|
selectTheme(),
|
|
parseLanguage(props.config.language),
|
|
]
|
|
}
|
|
|
|
function parseLanguage(name: String){
|
|
switch(name.toUpperCase()){
|
|
case "JSON": {
|
|
return json();
|
|
}
|
|
case "HTML": {
|
|
return html();
|
|
}
|
|
default: {
|
|
return xml();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="editor w-full h-full rounded-2xl overflow-x-auto">
|
|
|
|
<codemirror
|
|
:key="theme"
|
|
style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
|
|
:model-value="code"
|
|
@update:model-value="dataUpdated"
|
|
:extensions="extensions"
|
|
:disabled="config.disabled"
|
|
/>
|
|
|
|
</div>
|
|
</template>
|