Merge pull request #877 from HaikuTeam/fix-monaco-snippet-crash

fix: prevent crashes when choosing monaco snippets with mouse
HaikuTeam · Oct 23, 2018 · 0291d3b · 0291d3b
2 parents 8f6a0ef + 067589e
commit 0291d3b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/changelog/public/latest.json b/changelog/public/latest.json
@@ -4,7 +4,8 @@
       "FIRST!"
     ],
     "Fixes": [
-      "Fixes crashes related to direct selection on specific SVG assets."
+      "Fixes crashes related to direct selection on specific SVG assets.",
+      "Fixes crashes when selecting autocompletion items with the mouse."
     ]
   }
 }
diff --git a/packages/haiku-creator/src/react/components/EventHandlerEditor/Snippets.js b/packages/haiku-creator/src/react/components/EventHandlerEditor/Snippets.js
@@ -161,18 +161,28 @@ class Snippets extends React.PureComponent {
     this.props.editor.pushUndoStop();
   }
 
+  setPlusRef = (element) => {
+    this._plus = element
+  }
+
+  setRightGradientDivRef = (element) => {
+    this._rightGradientDiv = element
+  }
+
+  launchPopoverMenu = (event) => {
+    PopoverMenu.launch({event, items: this.snippetOptions});
+  }
+
   render () {
     return (
       <div>
-        <div style={STYLES.wrapper} ref={(element) => (this._plus = element)}
-          onClick={(event) => {
-            PopoverMenu.launch({event, items: this.snippetOptions});
-          }}>
+        <div style={STYLES.wrapper} ref={this.setPlusRef}
+          onClick={this.launchPopoverMenu}>
           <div style={STYLES.button}>
             +
           </div>
         </div>
-        <div style={STYLES.rightGradientDiv} ref={(element) => (this._rightGradientDiv = element)} />
+        <div style={STYLES.rightGradientDiv} ref={this.setRightGradientDivRef} />
       </div>
     );
   }

diff --git a/packages/haiku-creator/src/react/components/EventHandlerEditor/index.js b/packages/haiku-creator/src/react/components/EventHandlerEditor/index.js
@@ -126,6 +126,21 @@ class EventHandlerEditor extends React.PureComponent {
 
   // Define our own autocompletion items
     this.completionDisposer = monaco.languages.registerCompletionItemProvider('javascript', {
+      // FIXME: ugly hack to prevent crashes in monaco, this is [officially fixed in vscode][1]
+      // but we have to wait until [monaco is released again][2].
+      //
+      // [1]: https://github.com/Microsoft/vscode/pull/57617
+      // [2]: https://github.com/Microsoft/monaco-editor/issues/1139
+      resolveCompletionItem (item, token) {
+        for (const element of document.querySelectorAll('.monaco-list-row .contents')) {
+          element.addEventListener('mousedown', (mouseDownEvent) => {
+            mouseDownEvent.preventDefault();
+            mouseDownEvent.stopImmediatePropagation();
+          });
+        }
+
+        return item;
+      },
       provideCompletionItems (model, position) {
 
         // Get text from whole line until autocomplete position