Forráskód Böngészése

[editor] Emit value change event from the AceEditor component

Johan Ahlen 5 éve
szülő
commit
f3c4bbe790

+ 15 - 2
desktop/core/src/desktop/js/apps/notebook2/components/aceEditor/AceEditor.vue

@@ -44,13 +44,18 @@
   import { defer } from 'utils/hueUtils';
   import I18n from 'utils/i18n';
 
+  //taken from https://www.cs.tut.fi/~jkorpela/chars/spaces.html
+  const UNICODES_TO_REMOVE = /[\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u200B\u202F\u205F\u3000\uFEFF]/gi;
+
+  const removeUnicodes = (value: string) => value.replace(UNICODES_TO_REMOVE, ' ');
+
   @Component({
     components: { AceAutocomplete },
     methods: { I18n }
   })
   export default class AceEditor extends Vue {
     @Prop()
-    value!: string;
+    initialValue!: string;
     @Prop()
     id!: string;
     @Prop()
@@ -71,7 +76,7 @@
       if (!editorElement) {
         return;
       }
-      editorElement.textContent = this.value;
+      editorElement.textContent = this.initialValue;
       const editor = <Ace.Editor>ace.edit(editorElement);
 
       const resizeAce = () => {
@@ -298,6 +303,10 @@
       //   processErrorsAndWarnings('error', newErrors);
       // });
 
+      const triggerChange = () => {
+        this.$emit('value-changed', removeUnicodes(editor.getValue()));
+      };
+
       editor.commands.addCommand({
         name: 'execute',
         bindKey: { win: 'Ctrl-Enter', mac: 'Command-Enter|Ctrl-Enter' },
@@ -306,12 +315,16 @@
             this.aceLocationHandler.refreshStatementLocations();
           }
           if (this.editor && this.executor.activeExecutable) {
+            triggerChange();
             await this.executor.activeExecutable.reset();
             await this.executor.activeExecutable.execute();
           }
         }
       });
 
+      editor.on('change', triggerChange);
+      editor.on('blur', triggerChange);
+
       window.setTimeout(() => {
         this.$emit('ace-created', editor);
       }, 3000);

+ 6 - 0
desktop/core/src/desktop/js/apps/notebook2/components/aceEditor/AceEditorKoBridge.vue

@@ -22,6 +22,8 @@
       :id="editorId"
       :executor="executor"
       :ace-options="aceOptions"
+      :initial-value="value"
+      @value-changed="valueChanged"
       @ace-created="aceCreated"
     />
   </div>
@@ -70,6 +72,10 @@
       }
     }
 
+    valueChanged(value: string): void {
+      this.$el.dispatchEvent(new CustomEvent('value-changed', { bubbles: true, detail: value }));
+    }
+
     aceCreated(editor: Ace.Editor): void {
       this.$el.dispatchEvent(new CustomEvent('ace-created', { bubbles: true, detail: editor }));
     }

+ 3 - 1
desktop/core/src/desktop/js/apps/notebook2/components/aceEditor/__snapshots__/AceEditor.test.ts.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AceEditor.vue should render 1`] = `
-<div>
+<div
+  value="some query"
+>
   <div
     class="ace-editor ace_editor ace-hue"
     id="some-id"

+ 3 - 0
desktop/libs/notebook/src/notebook/templates/editor_components2.mako

@@ -904,6 +904,9 @@
           vueEvents: {
             'ace-created': function (event) {
               ace(event.detail);
+            },
+            'value-changed': function (event) {
+              statement_raw(event.detail);
             }
           },
           vueKoProps: {