mirror of
https://github.com/xlmnxp/extractify.zip.git
synced 2024-11-23 17:13:12 +03:00
41 lines
926 B
Vue
41 lines
926 B
Vue
{67c4fc37faf6d98109c52841d388d81761e2d280 true 926 text-editor.vue 0xc001f13ea0}
<script lang="ts" setup>
|
|
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
|
|
import { ref, onMounted } from 'vue'
|
|
import { FilesManager } from '~/composables/files-manager';
|
|
import { iFile } from '~/composables/worker/7zip-manager';
|
|
|
|
interface Props {
|
|
file: iFile,
|
|
filesManager: FilesManager
|
|
}
|
|
|
|
const editor = ref()
|
|
|
|
let { file, filesManager } = defineProps<Props>()
|
|
|
|
// files manager
|
|
onMounted(async () => {
|
|
const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
|
|
if(!file) return;
|
|
let fileContent = await filesManager.getFileContent(file.path);
|
|
monaco.editor.create(editor.value, {
|
|
value: fileContent?.toString()!,
|
|
language: file.extension,
|
|
readOnly: true,
|
|
theme: darkMode ? 'vs-dark' : 'vs-light'
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div id="editor" ref="editor"></div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
#editor {
|
|
width: 100vw;
|
|
height: calc(100vh - 120px);
|
|
}
|
|
</style>
|