diff --git a/packages/nc-gui/components/monaco/CustomMonacoEditor.js b/packages/nc-gui/components/monaco/CustomMonacoEditor.js new file mode 100644 index 0000000000..f984ef5667 --- /dev/null +++ b/packages/nc-gui/components/monaco/CustomMonacoEditor.js @@ -0,0 +1,125 @@ +/* eslint-disable */ +// import assign from "nano-assign"; +// import sqlAutoCompletions from "./sqlAutoCompletions"; +// import {ext} from "vee-validate/dist/rules.esm"; + + +export default { + name: "CustomMonacoEditor", + + props: { + value: { + default: "", + type: String + }, + theme: { + type: String, + default: "vs-dark" + }, + lang: {type:String, default: 'typescript'}, + readOnly:Boolean + }, + + model: { + event: "change" + }, + watch: { + value(newVal) { + if (newVal !== this.editor.getValue()) { + if (typeof newVal === 'object') { + this.editor.setValue(JSON.stringify(newVal, 0, 2)); + } else { + this.editor.setValue(newVal); + } + } + } + }, + + mounted() { + this.$nextTick(() => { + if (this.amdRequire) { + this.amdRequire(["vs/editor/editor.main"], () => { + this.initMonaco(window.monaco); + }); + } else { + // ESM format so it can't be resolved by commonjs `require` in eslint + // eslint-disable import/no-unresolved + const monaco = require("monaco-editor"); + // monaco.editor.defineTheme('monokai', require('./Cobalt.json')) + // monaco.editor.setTheme('monokai') + + this.monaco = monaco; + this.initMonaco(monaco); + } + }); + }, + unmounted() { + + }, + + beforeDestroy() { + this.editor && this.editor.dispose(); + }, + + methods: { + resizeLayout() { + this.editor.layout(); + }, + initMonaco(monaco) { + const code = this.value; + const model = monaco.editor.createModel(code, this.lang ||"json"); + + this.editor = monaco.editor.create(this.$el, { + model: model, + theme: this.theme, + }); + + this.editor.onDidChangeModelContent(event => { + const value = this.editor.getValue(); + if (this.value !== value) { + this.$emit("change", value, event); + } + }); + this.editor.updateOptions({ readOnly: this.readOnly }) + }, + + getMonaco() { + return this.editor; + }, + getMonacoModule() { + return this.monaco; + }, + + + }, + + render(h) { + return h("div"); + }, + created() { + }, + destroyed() { + } +}; +/** + * @copyright Copyright (c) 2021, Xgene Cloud Ltd + * + * @author Naveen MR + * @author Pranav C Balan + * + * @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 . + * + */ diff --git a/packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue b/packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue new file mode 100644 index 0000000000..04c879c5f7 --- /dev/null +++ b/packages/nc-gui/components/project/spreadsheet/components/codeSnippet.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue index f8552449dd..3bb938b43f 100644 --- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue +++ b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue @@ -61,7 +61,9 @@ > {{ viewIcons[view.type].icon }} - mdi-table + + mdi-table + @@ -77,7 +79,7 @@ @click.stop @keydown.enter.stop="updateViewName(view, i)" @blur="updateViewName(view, i)" - /> + > @@ -207,7 +213,9 @@ @click="openCreateViewDlg(viewTypes.GALLERY)" > - mdi-camera-image + + mdi-camera-image + @@ -217,7 +225,9 @@ - mdi-plus + + mdi-plus + @@ -251,7 +261,9 @@ - mdi-plus + + mdi-plus + @@ -261,6 +273,10 @@ +
+ +
+