diff --git a/explorer/static/js/src/codemirror-config.js b/explorer/static/js/src/codemirror-config.js new file mode 100644 index 00000000..78d9cc0d --- /dev/null +++ b/explorer/static/js/src/codemirror-config.js @@ -0,0 +1,69 @@ +import { + keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor, + lineNumbers, highlightActiveLineGutter +} from "@codemirror/view" +import { + defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching, + foldGutter, foldKeymap +} from "@codemirror/language" +import {defaultKeymap, history, historyKeymap} from "@codemirror/commands" +import {searchKeymap, highlightSelectionMatches} from "@codemirror/search" +import {autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap} from "@codemirror/autocomplete" +import {lintKeymap} from "@codemirror/lint" +import { Prec } from "@codemirror/state"; +import {sql} from "@codemirror/lang-sql"; + + +const submitEventFromCM = new CustomEvent('submitEventFromCM', {}); +const submitKeymapArr = [ + { + key: "Ctrl-Enter", + run: () => { + document.dispatchEvent(submitEventFromCM); + return true; + } + }, + { + key: "Cmd-Enter", + run: () => { + document.dispatchEvent(submitEventFromCM); + return true; + } + } +] + +const submitKeymap = Prec.highest( + keymap.of( + submitKeymapArr + ) +) + + + +export const explorerSetup = (() => [ + sql(), + lineNumbers(), + highlightActiveLineGutter(), + highlightSpecialChars(), + history(), + foldGutter(), + drawSelection(), + dropCursor(), + indentOnInput(), + syntaxHighlighting(defaultHighlightStyle, {fallback: true}), + bracketMatching(), + closeBrackets(), + autocompletion(), + highlightActiveLine(), + highlightSelectionMatches(), + submitKeymap, + keymap.of([ + ...closeBracketsKeymap, + ...defaultKeymap, + ...searchKeymap, + ...historyKeymap, + ...foldKeymap, + ...completionKeymap, + ...lintKeymap + ]) +])() diff --git a/explorer/static/js/src/explorer.js b/explorer/static/js/src/explorer.js index 998ff22e..60f47e5d 100644 --- a/explorer/static/js/src/explorer.js +++ b/explorer/static/js/src/explorer.js @@ -1,25 +1,23 @@ import $ from 'jquery'; -import {basicSetup, EditorView } from "codemirror"; -import {sql} from "@codemirror/lang-sql" -import {languages} from "@codemirror/language-data" +import { EditorView } from "codemirror"; +import { languages } from "@codemirror/language-data" +import { explorerSetup } from "./codemirror-config"; import cookie from 'cookiejs'; import List from 'list.js' import 'floatthead' -import {getCsrfToken} from "./csrf"; -import {toggleFavorite} from "./favorites"; +import { getCsrfToken } from "./csrf"; +import { toggleFavorite } from "./favorites"; import {pivotJq} from "./pivot"; - function editorFromTextArea(textarea) { let view = new EditorView({ doc: textarea.value, extensions: [ - basicSetup, - sql({codeLanguages: languages}), + explorerSetup, ]}) textarea.parentNode.insertBefore(view.dom, textarea) textarea.style.display = "none" @@ -45,6 +43,10 @@ export class ExplorerEditor { this.editor = editorFromTextArea(document.getElementById("id_sql")); + document.addEventListener('submitEventFromCM', (e) => { + this.$submit.click(); + }); + pivotJq($); this.bind(); @@ -73,15 +75,12 @@ export class ExplorerEditor { return encodeURIComponent(args.join("|")); } - doCodeMirrorSubmit() { - // Captures the cmd+enter keystroke and figures out which button to trigger. - this.$submit.click(); - } - savePivotState(state) { - //let bmark = btoa(JSON.stringify(_(state).pick("aggregatorName", "rows", "cols", "rendererName", "vals"))); - //let $el = $("#pivot-bookmark"); - //$el.attr("href", $el.data("baseurl") + "#" + bmark); + const picked = (({ aggregatorName, rows, cols, rendererName, vals }) => ({ aggregatorName, rows, cols, rendererName, vals }))(state); + const jsonString = JSON.stringify(picked); + let bmark = btoa(jsonString); + let $el = $("#pivot-bookmark"); + $el.attr("href", $el.data("baseurl") + "#" + bmark); } updateQueryString(key, value, url) { @@ -303,7 +302,8 @@ export class ExplorerEditor { $(".pivot-table").pivotUI(this.$table, pivotState); if (navToPivot) { - $("#pivot-tab-label").tab("show"); + let pivotEl = document.querySelector('#nav-pivot-tab') + pivotEl.click() } setTimeout(function() {