nocodb/packages/nc-gui/components/monaco/MonacoSqlEditor.vue

<template>
  <v-container
    class="ma-0 pa-0"
    style="height:calc(100% - 50px)"
    fluid
    :style="cssStyle ? cssStyle : ''"
  >
    <monaco-editor
      ref="editor"
      v-model="codeLocal"
      style="height: 100% "
      class="editor card"
      theme="vs-dark"
      lang="sql"
      :minimap="minimap"
      :read-only="readOnly"
      :actions="actions"
      :tables="tables"
      :column-names="columnNames"
      :column-name-cbk="columnNameCbk"
      @selection="selectionFn"
    />
  </v-container>
</template>

<script>
import sqlFormatter from 'sql-formatter'
import MonacoEditor from './index.js'

const monaco = require('monaco-editor')
export default {
  ssr: false,
  components: {
    MonacoEditor
    // sqlFormatter
  },
  props: ['code', 'cssStyle', 'readOnly', 'heading', 'tables', 'columnNames', 'columnNameCbk'],
  data() {
    const vm = this
    return {
      codeLocal: `${this.code || ''}`,
      selection: null,
      minimap: {
        enabled: true
      },
      actions: [{
        // An unique identifier of the contributed action.
        id: 'x-sql-pretify',
        // A label of the action that will be presented to the user.
        label: 'Format SQL',
        // An optional array of keybindings for the action.
        keybindings: [
          monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KEY_L
        ],
        // A precondition for this action.
        precondition: null,
        // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
        keybindingContext: null,
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        // Method that will be executed when the action is triggered.
        // @param editor The editor instance is passed in as a convinience
        run(ed) {
          vm.pretify()
        }
      }, {
        // An unique identifier of the contributed action.
        id: 'x-sql-execute',
        // A label of the action that will be presented to the user.
        label: 'Run Query',
        // An optional array of keybindings for the action.
        keybindings: [
          monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter
        ],
        // A precondition for this action.
        precondition: null,
        // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
        keybindingContext: null,
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        // Method that will be executed when the action is triggered.
        // @param editor The editor instance is passed in as a convinience
        run(ed) {
          vm.$emit('execute', ed)
        }
      }, {
        id: 'x-sql-run-all',
        label: 'Run All',
        keybindings: [
          monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.Enter
        ],
        precondition: null,
        keybindingContext: null,
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        run(ed) {
          vm.$emit('runAll', ed)
        }
      }, {
        id: 'x-sql-bookmark',
        label: 'Bookmark Query',
        keybindings: [
          monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_B
        ],
        precondition: null,
        keybindingContext: null,
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        run(ed) {
          vm.$emit('bookmark', ed)
        }
      }, {
        id: 'x-sql-search',
        label: 'Search Query History',
        keybindings: [
          monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_P
        ],
        precondition: null,
        keybindingContext: null,
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        run(ed) {
          vm.$emit('searchHistory', ed)
        }
      }, {
        id: 'x-sql-toggle-bookmark',
        label: 'Show/Hide Bookmarks',
        keybindings: [
          monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K
        ],
        precondition: null,
        keybindingContext: null,
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        run(ed) {
          vm.$emit('toggleBookmark', ed)
        }
      }, {
        id: 'x-sql-file-open',
        label: 'Open File',
        keybindings: [
          monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_O
        ],
        precondition: null,
        keybindingContext: null,
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        run(ed) {
          vm.$emit('openFile', ed)
        }
      }, {
        id: 'x-sql-save-file',
        label: 'Save File',
        keybindings: [
          monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S
        ],
        precondition: null,
        keybindingContext: null,
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        run(ed) {
          vm.$emit('saveFile', ed)
        }
      }, {
        id: 'x-sql-clear-editor',
        label: 'Clear Editor',
        keybindings: [
          monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_N
        ],
        precondition: null,
        keybindingContext: null,
        contextMenuGroupId: 'navigation',
        contextMenuOrder: 1.5,
        run(ed) {
          vm.$emit('clearEditor', ed)
        }
      }]

    }
  },
  computed: {},
  watch: {
    codeLocal(newValue) {
      // INFO: for updating value of prop `code` in parent comp
      // console.log("update:code Event Emitted", newValue);
      this.$emit('update:code', newValue)
    },
    code(newValue) {
      this.codeLocal = newValue
    }
  },
  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() {
      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
        }
      })
    },
    getCurrentQuery() {
      return this.$refs.editor.getCurrentQuery()
    },
    getAllContent() {
      return this.$refs.editor.getAllContent()
    },
    focus() {
      this.$refs.editor.focus()
    }
  }
}
</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/>.
 *
 */
-->