Prometheus: Changes brace-insertion behavior to be less annoying (#18698)

* Changes brace-insertion behavior to be less annoying

* Removes use of braces plugin

* Revert "Removes use of braces plugin"

This reverts commit 4cf4a6073bb77ec7ed569c6917db9bbf2b3fd176.

public/app/features/explore/slate-plugins/braces.test.ts

@@ -19,42 +19,6 @@ describe('braces', () => {
     expect(Plain.serialize(change.value)).toEqual('()');
   });
 
-  it('adds closing braces around a value', () => {
-    const change = Plain.deserialize('foo').change();
-    const event = new window.KeyboardEvent('keydown', { key: '(' });
-    handler(event, change);
-    expect(Plain.serialize(change.value)).toEqual('(foo)');
-  });
-
-  it('adds closing braces around the following value only', () => {
-    const change = Plain.deserialize('foo bar ugh').change();
-    let event;
-    event = new window.KeyboardEvent('keydown', { key: '(' });
-    handler(event, change);
-    expect(Plain.serialize(change.value)).toEqual('(foo) bar ugh');
-
-    // Wrap bar
-    change.move(5);
-    event = new window.KeyboardEvent('keydown', { key: '(' });
-    handler(event, change);
-    expect(Plain.serialize(change.value)).toEqual('(foo) (bar) ugh');
-
-    // Create empty parens after (bar)
-    change.move(4);
-    event = new window.KeyboardEvent('keydown', { key: '(' });
-    handler(event, change);
-    expect(Plain.serialize(change.value)).toEqual('(foo) (bar)() ugh');
-  });
-
-  it('adds closing braces outside a selector', () => {
-    const change = Plain.deserialize('sumrate(metric{namespace="dev", cluster="c1"}[2m])').change();
-    let event;
-    change.move(3);
-    event = new window.KeyboardEvent('keydown', { key: '(' });
-    handler(event, change);
-    expect(Plain.serialize(change.value)).toEqual('sum(rate(metric{namespace="dev", cluster="c1"}[2m]))');
-  });
-
   it('removes closing brace when opening brace is removed', () => {
     const change = Plain.deserialize('time()').change();
     let event;

public/app/features/explore/slate-plugins/braces.ts

+// @ts-ignore
+import { Change } from 'slate';
+
 const BRACES: any = {
   '[': ']',
   '{': '}',
   '(': ')',
 };
 
-const NON_SELECTOR_SPACE_REGEXP = / (?![^}]+})/;
-
 export default function BracesPlugin() {
   return {
-    onKeyDown(event: any, change: { value?: any; insertText?: any; deleteBackward?: any }) {
+    onKeyDown(event: KeyboardEvent, change: Change) {
       const { value } = change;
-      if (!value.isCollapsed) {
-        return undefined;
-      }
 
       switch (event.key) {
+        case '(':
         case '{':
         case '[': {
           event.preventDefault();
-          // Insert matching braces
-          change
-            .insertText(`${event.key}${BRACES[event.key]}`)
-            .move(-1)
-            .focus();
-          return true;
-        }
 
-        case '(': {
-          event.preventDefault();
-          const text = value.anchorText.text;
-          const offset = value.anchorOffset;
-          const delimiterIndex = text.slice(offset).search(NON_SELECTOR_SPACE_REGEXP);
-          const length = delimiterIndex > -1 ? delimiterIndex + offset : text.length;
-          const forward = length - offset;
-          // Insert matching braces
-          change
-            .insertText(event.key)
-            .move(forward)
-            .insertText(BRACES[event.key])
-            .move(-1 - forward)
-            .focus();
+          const { startOffset, startKey, endOffset, endKey, focusOffset } = value.selection;
+          const text: string = value.focusText.text;
+
+          // If text is selected, wrap selected text in parens
+          if (value.isExpanded) {
+            change
+              .insertTextByKey(startKey, startOffset, event.key)
+              .insertTextByKey(endKey, endOffset + 1, BRACES[event.key])
+              .moveEnd(-1);
+          } else if (
+            focusOffset === text.length ||
+            text[focusOffset] === ' ' ||
+            Object.values(BRACES).includes(text[focusOffset])
+          ) {
+            change.insertText(`${event.key}${BRACES[event.key]}`).move(-1);
+          } else {
+            change.insertText(event.key);
+          }
+
           return true;
         }