/* eslint-disable */ // import assign from "nano-assign"; // import sqlAutoCompletions from "./sqlAutoCompletions"; // import {ext} from "vee-validate/dist/rules.esm"; export default { name: "MonacoSingleLineEditor", props: { value: { default: "", type: String }, theme: { type: String, default: "vs" }, language: String, options: Object, readOnly: Boolean, amdRequire: { type: Function }, sqlType: String, actions: Array, tables: Array, columnNames: Object, columnNameCbk: Function, lineDecorationsWidth: 0, scrollbar: { vertical: 'hidden' }, env: String }, model: { event: "change" }, watch: { value(val) { if (val !== this.editor.getValue()) this.editor.setValue(val) } }, data() { return { tokRef: null, completionItemProvider: null, envValues: [] } }, mounted() { 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.completionItemProvider = monaco.languages.registerCompletionItemProvider("sql", { // async provideCompletionItems(model, position) { // // console.log(sqlAutoCompletions(monaco).actions[0]) // console.log(model === vm.editor,model,vm.editor) // return model === vm.editor.getModel() ? {suggestions: await vm.getLiveSuggestionsList(model, position)} : {}; // } // }); this.initMonaco(monaco); setTimeout( () => this.editor.layout(),100); } }, unmounted() { }, beforeDestroy() { this.editor && this.editor.dispose(); }, methods: { initMonaco(monaco) { const initValue = this.value.replace(/\n/g, ' '); /*----------------------------------------SAMPLE JS START*/ // Register a new language monaco.languages.register({id: 'mySpecialLanguage'}); // Register a tokens provider for the language this.tokRef = monaco.languages.setMonarchTokensProvider('mySpecialLanguage', { tokenizer: { root: [ [new RegExp('{{\\s*(' + this.envValues.join('|') + ')\\s*}}'), "custom-valid"], [/{{\s*\w+\s*}}/, "custom-invalid"] ] } }); // Define a new theme that contains only rules that match this language monaco.editor.defineTheme('myCoolTheme', { base: 'vs-dark', inherit: true, rules: [ {token: 'custom-valid', foreground: '4CAF50', fontStyle: 'bold'}, {token: 'custom-invalid', foreground: 'ff0000', fontStyle: 'bold red wavy underline'} ] }); // Register a completion item provider for the new language // monaco.languages.registerCompletionItemProvider('', { // provideCompletionItems: // }); ; /*----------------------------------------SAMPLE CSS END*/ monaco.languages.setLanguageConfiguration('mySpecialLanguage', { onEnterRules: [ { action: { beforeText: /.*/, appendText: '' } } ] }) const cssFormatProvider = { provideDocumentFormattingEdits(model, options, token) { return [{ text: model.getValue().replace(/\n/g, ' '), range: model.getFullModelRange() }]; } }; const languageId = 'mySpecialLanguage'; monaco.languages.registerDocumentFormattingEditProvider(languageId, cssFormatProvider); this.editor = monaco.editor.create(this.$el, { theme: 'myCoolTheme', value: initValue, language: 'mySpecialLanguage', lineNumbers: 'off', codeLens: false, disableLayerHinting: true, minimap: { enabled: false }, glyphMargin: false, "autoIndent": true, lineHeight: '46px', }); // this.editor.addCommand(monaco.KeyCode.Enter, function (accessor) { // this.editor.trigger('bla', 'type', {text: ''}); // }); // var model = monaco.editor.createModel(code, "mySpecialLanguage"); // // // // this.editor = monaco.editor.create(this.$el, options); // // // // configure the JSON language support with schemas and schema associations // monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ // validate: true, // }); // // // this.editor = monaco.editor.create(this.$el, { // model: model // }); // this.editor.onDidChangeModelContent(event => { const value = this.editor.getValue(); if (this.value !== value) { this.$emit("change", value.replace(/\n/g,' '), event); } }); }, getMonaco() { return this.editor; }, getMonacoModule() { return this.monaco; }, getLiveSuggestionsList(model, position) { const textUntilPosition = model.getValueInRange({ startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column }); let suggestions = []; let match; if ( (match = textUntilPosition.match(/{{\s*(\w*)$/)) ) { // (match[1] ? this.envValues.filter(env => env.indexOf(match[1]) > -1) : suggestions = this.envValues.map(name => ({ insertText: name, label: name })); } return suggestions; } }, render(h) { return h("div"); }, created() { const vm = this; const monaco = require("monaco-editor"); if (this.$store.getters['project/GtrProjectJson']) this.envValues = [...Object.keys(this.$store.getters['project/GtrProjectJson'].api), ...(this.$store.getters['project/GtrProjectJson'].envs ? Object.keys(this.$store.getters['project/GtrProjectJson'].envs[this.env].api) : [])]; this.$store.watch( (state) => state.project.unserializedList, (unserializedList) => { if (this.tokRef) this.tokRef.dispose(); this.envValues = [...Object.keys(this.$store.getters['project/GtrProjectJson'].api), ...(this.$store.getters['project/GtrProjectJson'].envs ? Object.keys(this.$store.getters['project/GtrProjectJson'].envs[this.env].api) : [])]; console.log('============', this.envValues) this.tokRef = monaco.languages.setMonarchTokensProvider('mySpecialLanguage', { tokenizer: { root: [ [new RegExp('{{\\s*(' + this.envValues.join('|') + ')\\s*}}'), "custom-valid"], [/{{\s*\w+\s*}}/, "custom-invalid"] ] } }); } ) this.completionItemProvider = monaco.languages.registerCompletionItemProvider("mySpecialLanguage", { async provideCompletionItems(model, position) { return model === vm.editor.getModel() ? {suggestions: await vm.getLiveSuggestionsList(model, position)} : {}; } }); }, destroyed() { if (this.completionItemProvider) this.completionItemProvider.dispose(); } }; /** * @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/>. * */