Merge pull request #13 from gogumaa/trial/monacoEditor

Try to adopt Monace editor instead of Ace editor
gogumaa · Nov 28, 2019 · 8271317 · 8271317
2 parents 97357c0 + 22a733f
commit 8271317
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 110 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+# In progress
+
+## Setup local environment
+
+* Make a copy of *.env.example* and rename it as *.env*
+* Set ZEPL_API_PORT and ZEPL_WS_PORT for forwarding the api and websocket calls
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,22 +35,22 @@
     "@fortawesome/free-solid-svg-icons": "5.11.2",
     "@fortawesome/react-fontawesome": "0.1.7",
     "@hot-loader/react-dom": "16.8.6",
-    "ace-builds": "1.4.7",
     "bootstrap": "4.3.1",
     "connected-react-router": "6.4.0",
     "functional-immutable": "1.0.1",
     "history": "4.9.0",
     "immutable": "4.0.0-rc.12",
     "lodash": "4.17.14",
+    "monaco-editor": "0.17.1",
     "object-assign": "4.1.1",
     "prop-types": "15.7.2",
     "re-reselect": "3.4.0",
     "react": "16.8.6",
-    "react-ace": "8.0.0",
     "react-bootstrap": "1.0.0-beta.9",
     "react-dom": "16.8.6",
     "react-hot-loader": "4.8.4",
     "react-input-autosize": "2.2.2",
+    "react-monaco-editor": "0.32.1",
     "react-redux": "7.0.3",
     "react-redux-immutable": "1.3.0",
     "react-router-dom": "5.0.0",
@@ -112,6 +112,7 @@
     "json-loader": "0.5.7",
     "mini-css-extract-plugin": "0.6.0",
     "mockdate": "2.0.2",
+    "monaco-editor-webpack-plugin": "1.7.0",
     "node-sass": "4.12.0",
     "opn-cli": "4.1.0",
     "postcss-loader": "3.0.0",

diff --git a/src/components/Notebook/Paragraph.jsx b/src/components/Notebook/Paragraph.jsx
@@ -2,38 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux-immutable';
-// Import ace-builds and the AceEditor Component
-import AceEditor from "react-ace";
-// language supported:
-// "text", <= default
-// "python",
-// "r",
-// "markdown",
-// "sql",
-// "scala",
-// "sh",
-// lazy load all ace-builds mode with webpack async
-import "ace-builds/src-noconflict/mode-text";
-import "ace-builds/src-noconflict/snippets/text";
-import "ace-builds/src-noconflict/mode-python";
-import "ace-builds/src-noconflict/snippets/python";
-import "ace-builds/src-noconflict/mode-r";
-import "ace-builds/src-noconflict/snippets/r";
-import "ace-builds/src-noconflict/mode-markdown";
-import "ace-builds/src-noconflict/snippets/markdown";
-import "ace-builds/src-noconflict/mode-sql";
-import "ace-builds/src-noconflict/snippets/sql";
-import "ace-builds/src-noconflict/mode-scala";
-import "ace-builds/src-noconflict/snippets/scala";
-import "ace-builds/src-noconflict/mode-sh";
-import "ace-builds/src-noconflict/snippets/sh";
-// theme
-import "ace-builds/src-noconflict/theme-chrome";
-import "ace-builds/src-noconflict/keybinding-emacs";
-// For autocompletion
-import "ace-builds/src-noconflict/ext-language_tools";
-
-import identity from "lodash/fp/identity";
+import MonacoEditor from 'react-monaco-editor';
 
 import * as currentNotebookSelectors from '~/dux/currentNotebook/selectors';
 
@@ -43,64 +12,38 @@ const Container = styled.div`
   border-radius: 3px;
   box-shadow: none;
   padding: 10px 24px;
-  margin-top: 5px; 
+  margin-top: 5px;
 `;
 
-const INITIAL_EDITOR_MODE = "text"; // default
+const LINE_HEIGHT = 18;
+const PADDING = 50;
+// const INITIAL_EDITOR_MODE = "text"; // default
 const Paragraph = ({
   editorText,
   paragraphId,
   lineNumbers,
   editorLanguage,
-}) => (
-  <Container>
-    <AceEditor
-      minLines={1}
-      width="100%"
-      // onLoad={this.onLoad}
-      maxLines={Infinity}
-      onChange={identity}
-      onBlur={identity}
-      // onPaste={(_) => {
-      //   this.handleChange(editorText, _, true);
-      // }}
-      // onFocus={this.handleFocus}
-      // highlightActiveLine={isFocused}
-      mode={editorLanguage || INITIAL_EDITOR_MODE}
-      theme="chrome"
-      name={`${paragraphId}__ace-editor`}
-      // https://zeplteam.atlassian.net/browse/ZEPL-5136
-      // ace_editor ace-chrome should be added to do not miss it as default className
-      className={`editor ace_editor ace-chrome`}// ${addOnClassName} ${autoCompleteLoaderClass}`}
-      value={editorText}
-      commands={[{
-        name: "indentOrAutocomplete",
-        bindKey: { win: "Tab", mac: "Tab" },
-        exec: editor => (
-          shouldIndent(editor)
-            ? editor.indent()
-            : editor.execCommand("startAutocomplete")
-        ),
-      }]}
-      setOptions={{
-        showGutter: Boolean(lineNumbers),
-        enableBasicAutocompletion: true,
-        // enableBasicAutocompletion: [
-        //   this.remoteAutocomplete.call(this),
-        //   this.intpAutocomplete.call(this),
-        // ],
-        enableSnippets: false,
-        showLineNumbers: Boolean(lineNumbers),
-        tabSize: 4,
-        // readOnly: disableEditor,
-        cursorStyle: "smooth",
-      }}
-      editorProps={{
-        $blockScrolling: Infinity,
-      }}
-    />
-  </Container>
-);
+}) => {
+  // todo - find better logic to set editor height
+  const height = ((editorText.split('\n').length) * LINE_HEIGHT) + PADDING;
+  return (
+    <Container>
+      <MonacoEditor
+        automaticLayout
+        height={height}
+        // width="100%"
+        // height="500"
+        language={editorLanguage}
+        value={editorText}
+        options={{
+          selectOnLineNumbers: true,
+        }}
+        onChange={arg => console.warn({arg})}
+        // editorDidMount={::this.editorDidMount}
+      />
+    </Container>
+  );
+};
 
 Paragraph.propTypes = {
   editorText: PropTypes.string,