Merge pull request #3108 from metabase/sql-bracket-matching

Add bracket/paren/braces matching to SQL editor

frontend/src/metabase/lib/ace/sql_behaviour.js

+/*global ace*/
+/* eslint "no-redeclare": 0 */
+
+// Modified from https://github.com/ajaxorg/ace/blob/b8804b1e9db1f7f02337ca884f4780f3579cc41b/lib/ace/mode/behaviour/cstyle.js
+
+/* ***** BEGIN LICENSE BLOCK *****
+ * Distributed under the BSD license:
+ *
+ * Copyright (c) 2010, Ajax.org B.V.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *     * Redistributions of source code must retain the above copyright
+ *       notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ *     * Neither the name of Ajax.org B.V. nor the
+ *       names of its contributors may be used to endorse or promote products
+ *       derived from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+ace.require(["ace/lib/oop", "ace/mode/behaviour", "ace/token_iterator", "ace/lib/lang"],
+function(oop, { Behaviour }, { TokenIterator }, lang) {
+
+    var SAFE_INSERT_IN_TOKENS =
+        ["text", "paren.rparen", "punctuation.operator"];
+    var SAFE_INSERT_BEFORE_TOKENS =
+        ["text", "paren.rparen", "punctuation.operator", "comment"];
+
+    var context;
+    var contextCache = {};
+    var initContext = function(editor) {
+        var id = -1;
+        if (editor.multiSelect) {
+            id = editor.selection.index;
+            if (contextCache.rangeCount != editor.multiSelect.rangeCount)
+                contextCache = {rangeCount: editor.multiSelect.rangeCount};
+        }
+        if (contextCache[id])
+            return context = contextCache[id];
+        context = contextCache[id] = {
+            autoInsertedBrackets: 0,
+            autoInsertedRow: -1,
+            autoInsertedLineEnd: "",
+            maybeInsertedBrackets: 0,
+            maybeInsertedRow: -1,
+            maybeInsertedLineStart: "",
+            maybeInsertedLineEnd: ""
+        };
+    };
+
+    var getWrapped = function(selection, selected, opening, closing) {
+        var rowDiff = selection.end.row - selection.start.row;
+        return {
+            text: opening + selected + closing,
+            selection: [
+                    0,
+                    selection.start.column + 1,
+                    rowDiff,
+                    selection.end.column + (rowDiff ? 0 : 1)
+                ]
+        };
+    };
+
+    var SQLBehaviour = function() {
+        function createInsertDeletePair(name, opening, closing) {
+            this.add(name, "insertion", function(state, action, editor, session, text) {
+                if (text == opening) {
+                    initContext(editor);
+                    var selection = editor.getSelectionRange();
+                    var selected = session.doc.getTextRange(selection);
+                    if (selected !== "" && editor.getWrapBehavioursEnabled()) {
+                        return getWrapped(selection, selected, opening, closing);
+                    } else if (SQLBehaviour.isSaneInsertion(editor, session)) {
+                        SQLBehaviour.recordAutoInsert(editor, session, closing);
+                        return {
+                            text: opening + closing,
+                            selection: [1, 1]
+                        };
+                    }
+                } else if (text == closing) {
+                    initContext(editor);
+                    var cursor = editor.getCursorPosition();
+                    var line = session.doc.getLine(cursor.row);
+                    var rightChar = line.substring(cursor.column, cursor.column + 1);
+                    if (rightChar == closing) {
+                        var matching = session.$findOpeningBracket(closing, {column: cursor.column + 1, row: cursor.row});
+                        if (matching !== null && SQLBehaviour.isAutoInsertedClosing(cursor, line, text)) {
+                            SQLBehaviour.popAutoInsertedClosing();
+                            return {
+                                text: '',
+                                selection: [1, 1]
+                            };
+                        }
+                    }
+                }
+            });
+
+            this.add(name, "deletion", function(state, action, editor, session, range) {
+                var selected = session.doc.getTextRange(range);
+                if (!range.isMultiLine() && selected == opening) {
+                    initContext(editor);
+                    var line = session.doc.getLine(range.start.row);
+                    var rightChar = line.substring(range.start.column + 1, range.start.column + 2);
+                    if (rightChar == closing) {
+                        range.end.column++;
+                        return range;
+                    }
+                }
+            });
+        }
+
+        createInsertDeletePair.call(this, "braces", "{", "}");
+        createInsertDeletePair.call(this, "parens", "(", ")");
+        createInsertDeletePair.call(this, "brackets", "[", "]");
+
+        this.add("string_dquotes", "insertion", function(state, action, editor, session, text) {
+            if (text == '"' || text == "'") {
+                if (this.lineCommentStart && this.lineCommentStart.indexOf(text) != -1)
+                    return;
+                initContext(editor);
+                var quote = text;
+                var selection = editor.getSelectionRange();
+                var selected = session.doc.getTextRange(selection);
+                if (selected !== "" && selected !== "'" && selected != '"' && editor.getWrapBehavioursEnabled()) {
+                    return getWrapped(selection, selected, quote, quote);
+                } else if (!selected) {
+                    var cursor = editor.getCursorPosition();
+                    var line = session.doc.getLine(cursor.row);
+                    var leftChar = line.substring(cursor.column-1, cursor.column);
+                    var rightChar = line.substring(cursor.column, cursor.column + 1);
+
+                    var token = session.getTokenAt(cursor.row, cursor.column);
+                    var rightToken = session.getTokenAt(cursor.row, cursor.column + 1);
+                    // We're escaped.
+                    if (leftChar == "\\" && token && /escape/.test(token.type))
+                        return null;
+
+                    var stringBefore = token && /string|escape/.test(token.type);
+                    var stringAfter = !rightToken || /string|escape/.test(rightToken.type);
+
+                    var pair;
+                    if (rightChar == quote) {
+                        pair = stringBefore !== stringAfter;
+                        if (pair && /string\.end/.test(rightToken.type))
+                            pair = false;
+                    } else {
+                        if (stringBefore && !stringAfter)
+                            return null; // wrap string with different quote
+                        if (stringBefore && stringAfter)
+                            return null; // do not pair quotes inside strings
+                        var wordRe = session.$mode.tokenRe;
+                        wordRe.lastIndex = 0;
+                        var isWordBefore = wordRe.test(leftChar);
+                        wordRe.lastIndex = 0;
+                        var isWordAfter = wordRe.test(leftChar);
+                        if (isWordBefore || isWordAfter)
+                            return null; // before or after alphanumeric
+                        if (rightChar && !/[\s;,.})\]\\]/.test(rightChar))
+                            return null; // there is rightChar and it isn't closing
+                        pair = true;
+                    }
+                    return {
+                        text: pair ? quote + quote : "",
+                        selection: [1,1]
+                    };
+                }
+            }
+        });
+
+        this.add("string_dquotes", "deletion", function(state, action, editor, session, range) {
+            var selected = session.doc.getTextRange(range);
+            if (!range.isMultiLine() && (selected == '"' || selected == "'")) {
+                initContext(editor);
+                var line = session.doc.getLine(range.start.row);
+                var rightChar = line.substring(range.start.column + 1, range.start.column + 2);
+                if (rightChar == selected) {
+                    range.end.column++;
+                    return range;
+                }
+            }
+        });
+
+    };
+
+
+    SQLBehaviour.isSaneInsertion = function(editor, session) {
+        var cursor = editor.getCursorPosition();
+        var iterator = new TokenIterator(session, cursor.row, cursor.column);
+
+        // Don't insert in the middle of a keyword/identifier/lexical
+        if (!this.$matchTokenType(iterator.getCurrentToken() || "text", SAFE_INSERT_IN_TOKENS)) {
+            // Look ahead in case we're at the end of a token
+            var iterator2 = new TokenIterator(session, cursor.row, cursor.column + 1);
+            if (!this.$matchTokenType(iterator2.getCurrentToken() || "text", SAFE_INSERT_IN_TOKENS))
+                return false;
+        }
+
+        // Only insert in front of whitespace/comments
+        iterator.stepForward();
+        return iterator.getCurrentTokenRow() !== cursor.row ||
+            this.$matchTokenType(iterator.getCurrentToken() || "text", SAFE_INSERT_BEFORE_TOKENS);
+    };
+
+    SQLBehaviour.$matchTokenType = function(token, types) {
+        return types.indexOf(token.type || token) > -1;
+    };
+
+    SQLBehaviour.recordAutoInsert = function(editor, session, bracket) {
+        var cursor = editor.getCursorPosition();
+        var line = session.doc.getLine(cursor.row);
+        // Reset previous state if text or context changed too much
+        if (!this.isAutoInsertedClosing(cursor, line, context.autoInsertedLineEnd[0]))
+            context.autoInsertedBrackets = 0;
+        context.autoInsertedRow = cursor.row;
+        context.autoInsertedLineEnd = bracket + line.substr(cursor.column);
+        context.autoInsertedBrackets++;
+    };
+
+    SQLBehaviour.recordMaybeInsert = function(editor, session, bracket) {
+        var cursor = editor.getCursorPosition();
+        var line = session.doc.getLine(cursor.row);
+        if (!this.isMaybeInsertedClosing(cursor, line))
+            context.maybeInsertedBrackets = 0;
+        context.maybeInsertedRow = cursor.row;
+        context.maybeInsertedLineStart = line.substr(0, cursor.column) + bracket;
+        context.maybeInsertedLineEnd = line.substr(cursor.column);
+        context.maybeInsertedBrackets++;
+    };
+
+    SQLBehaviour.isAutoInsertedClosing = function(cursor, line, bracket) {
+        return context.autoInsertedBrackets > 0 &&
+            cursor.row === context.autoInsertedRow &&
+            bracket === context.autoInsertedLineEnd[0] &&
+            line.substr(cursor.column) === context.autoInsertedLineEnd;
+    };
+
+    SQLBehaviour.isMaybeInsertedClosing = function(cursor, line) {
+        return context.maybeInsertedBrackets > 0 &&
+            cursor.row === context.maybeInsertedRow &&
+            line.substr(cursor.column) === context.maybeInsertedLineEnd &&
+            line.substr(0, cursor.column) == context.maybeInsertedLineStart;
+    };
+
+    SQLBehaviour.popAutoInsertedClosing = function() {
+        context.autoInsertedLineEnd = context.autoInsertedLineEnd.substr(1);
+        context.autoInsertedBrackets--;
+    };
+
+    SQLBehaviour.clearMaybeInsertedClosing = function() {
+        if (context) {
+            context.maybeInsertedBrackets = 0;
+            context.maybeInsertedRow = -1;
+        }
+    };
+
+    oop.inherits(SQLBehaviour, Behaviour);
+
+    exports.SQLBehaviour = SQLBehaviour;
+});

frontend/src/metabase/query_builder/NativeQueryEditor.jsx

@@ -3,6 +3,8 @@
 
 import React, { Component, PropTypes } from "react";
 
+import { SQLBehaviour } from "metabase/lib/ace/sql_behaviour";
+
 import _ from "underscore";
 import { assocIn } from "icepick";
 
@@ -82,7 +84,7 @@ export default class NativeQueryEditor extends Component {
     }
 
     componentDidUpdate() {
-        var editor = ace.edit("id_sql");
+        let editor = ace.edit("id_sql");
         if (editor.getValue() !== this.props.query.native.query) {
             // This is a weird hack, but the purpose is to avoid an infinite loop caused by the fact that calling editor.setValue()
             // will trigger the editor 'change' event, update the query, and cause another rendering loop which we don't want, so
@@ -96,11 +98,15 @@ export default class NativeQueryEditor extends Component {
         if (this.state.modeInfo && editor.getSession().$modeId !== this.state.modeInfo.mode) {
             console.log('Setting ACE Editor mode to:', this.state.modeInfo.mode);
             editor.getSession().setMode(this.state.modeInfo.mode);
+            // monkey patch the mode to add our bracket/paren/braces-matching behavior
+            if (!editor.getSession().$mode.$behaviour) {
+                editor.getSession().$mode.$behaviour = new SQLBehaviour();
+            }
         }
     }
 
     loadAceEditor() {
-        var editor = ace.edit("id_sql");
+        let editor = ace.edit("id_sql");
 
         // listen to onChange events
         editor.getSession().on('change', this.onChange);
@@ -118,7 +124,7 @@ export default class NativeQueryEditor extends Component {
             editor: editor
         });
 
-        var aceLanguageTools = ace.require('ace/ext/language_tools');
+        let aceLanguageTools = ace.require('ace/ext/language_tools');
         editor.setOptions({
             enableBasicAutocompletion: true,
             enableSnippets: true,
@@ -193,7 +199,7 @@ export default class NativeQueryEditor extends Component {
         let modeInfo = getModeInfo(this.props.query, this.props.databases);
 
         // we only render a db selector if there are actually multiple to choose from
-        var dataSelectors = [];
+        let dataSelectors = [];
         if (this.state.showEditor && this.props.databases && (this.props.databases.length > 1 || modeInfo.requiresTable)) {
             if (this.props.databases.length > 1) {
                 dataSelectors.push(
@@ -238,7 +244,7 @@ export default class NativeQueryEditor extends Component {
             dataSelectors = <span className="p2 text-grey-4">{'This question is written in ' + modeInfo.description + '.'}</span>;
         }
 
-        var editorClasses, toggleEditorText, toggleEditorIcon;
+        let editorClasses, toggleEditorText, toggleEditorIcon;
         if (this.state.showEditor) {
             editorClasses = "";
             toggleEditorText = "Hide Editor";