mirror of https://github.com/nocodb/nocodb
135 lines
3.6 KiB
135 lines
3.6 KiB
<template> |
|
<v-container class="ma-0 pa-0" fluid> |
|
<v-col cols="12" class="px-0"> |
|
<v-toolbar text height="42" class="grey--text"> |
|
{{ heading }} |
|
<v-spacer /> |
|
<x-btn tooltip="Prettify SQL" small outlined btn.class="grey--text" @click="pretify"> Prettify </x-btn> |
|
</v-toolbar> |
|
<monaco-editor |
|
ref="editor" |
|
v-model="codeLocal" |
|
:style="cssStyle ? cssStyle : ''" |
|
class="editor card" |
|
theme="vs-dark" |
|
lang="sql" |
|
:minimap="minimap" |
|
:read-only="readOnly" |
|
@selection="selectionFn" |
|
/> |
|
</v-col> |
|
</v-container> |
|
</template> |
|
|
|
<script> |
|
import sqlFormatter from 'sql-formatter'; |
|
import MonacoEditor from './index.js'; |
|
|
|
export default { |
|
ssr: false, |
|
components: { |
|
MonacoEditor, |
|
// sqlFormatter |
|
}, |
|
props: ['code', 'cssStyle', 'readOnly', 'heading'], |
|
data() { |
|
return { |
|
codeLocal: `${this.code || ''}`, |
|
selection: null, |
|
minimap: { |
|
enabled: true, |
|
}, |
|
}; |
|
}, |
|
computed: {}, |
|
watch: { |
|
codeLocal(newValue) { |
|
// INFO: for updating value of prop `code` in parent comp |
|
this.$emit('update:code', newValue); |
|
}, |
|
code(newValue) { |
|
this.codeLocal = newValue; |
|
}, |
|
}, |
|
beforeCreate() { |
|
// console.log(MonacoEditor) |
|
}, |
|
created() { |
|
// |
|
}, |
|
methods: { |
|
selectionFn() { |
|
const editor = this.$refs.editor.getMonaco(); |
|
const range = editor.getSelection(); |
|
const selectedText = editor.getModel().getValueInRange(range); |
|
this.selection = selectedText; |
|
this.selectionRange = range; |
|
}, |
|
pretify() { |
|
// console.log("this.code", this.code); |
|
const editor = this.$refs.editor.getMonaco(); |
|
|
|
if (this.selection && this.selectionRange) { |
|
const op = { |
|
identifier: 'prettifySelection', |
|
range: this.selectionRange, |
|
text: sqlFormatter.format(this.selection), |
|
forceMoveMarkers: true, |
|
}; |
|
editor.executeEdits('sqlFormatter', [op]); |
|
this.selection = null; |
|
this.selectionRange = null; |
|
} else { |
|
// console.log("selected format before:: ", this.codeLocal); |
|
const op = { |
|
identifier: 'prettifyDoc', |
|
range: editor.getModel().getFullModelRange(), |
|
text: sqlFormatter.format(this.codeLocal || ''), |
|
forceMoveMarkers: true, |
|
}; |
|
editor.executeEdits('sqlFormatter', [op]); |
|
} |
|
}, |
|
toggleMiniMap() { |
|
const editor = this.$refs.editor.getMonaco(); |
|
this.minimap.enabled = !this.minimap.enabled; |
|
editor.updateOptions({ |
|
minimap: { |
|
enabled: this.minimap.enabled, |
|
}, |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style> |
|
.editor { |
|
/* width: 100%; |
|
height: 800px; */ |
|
} |
|
</style> |
|
<!-- |
|
/** |
|
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
|
* |
|
* @author Naveen MR <oof1lab@gmail.com> |
|
* @author Pranav C Balan <pranavxc@gmail.com> |
|
* |
|
* @license GNU AGPL version 3 or any later version |
|
* |
|
* This program is free software: you can redistribute it and/or modify |
|
* it under the terms of the GNU Affero General Public License as |
|
* published by the Free Software Foundation, either version 3 of the |
|
* License, or (at your option) any later version. |
|
* |
|
* This program is distributed in the hope that it will be useful, |
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
* GNU Affero General Public License for more details. |
|
* |
|
* You should have received a copy of the GNU Affero General Public License |
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
* |
|
*/ |
|
-->
|
|
|