upgrade to @neo4j-cypher/react-codemirror package (#286)

* upgrade to neo4j-cypher/react-codemirror package

* bump @neo4j-cypher/react-codemirror

* remove unused old cypher editor component

* fix integration tests (missing className)

* bump @neo4j-cypher/react-codemirror

* bump @neo4j-cypher/react-codemirror

* bump @neo4j-cypher/react-codemirror

* bump @neo4j-cypher/react-codemirror to latest

add codemirror markdown packages as an experiment

* enable switching between cypher/markdown languages

* update yarn.lock

* fix lint errors

* update @neo4j-cypher/react-codemirror to latest (fix line number text height)

* Fixed breaking integration tests

Co-authored-by: Niels de Jong <[email protected]>

cypress/integration/start_page.spec.js

@@ -47,6 +47,7 @@ describe('NeoDash E2E Tests', () => {
     cy.get('#dbpassword').type('test');
     cy.wait(100);
     cy.get('button').contains('Connect').click();
+    cy.wait(100);
   });
 
   it('initializes the dashboard', () => {

package.json

@@ -35,12 +35,15 @@
   "keywords": [],
   "author": "Neo4j Labs",
   "dependencies": {
+    "@codemirror/language-data": "^6.1.0",
+    "@codemirror/lang-markdown": "^6.0.5",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
     "@mui/material": "^5.3.0",
     "@mui/x-data-grid": "5.10.0",
+    "@neo4j-cypher/react-codemirror": "^1.0.0-next.16",
     "@nivo/bar": "^0.80.0",
     "@nivo/circle-packing": "^0.80.0",
     "@nivo/core": "^0.80.0",
@@ -53,8 +56,6 @@
     "@nivo/treemap": "^0.80.0",
     "babel-runtime": "^6.26.0",
     "classnames": "^2.3.1",
-    "codemirror": "^5.65.3",
-    "cypher-codemirror": "1.1.9",
     "d3-scale-chromatic": "^3.0.0",
     "dom-to-image": "^2.6.0",
     "leaflet": "^1.7.1",

public/style.css

@@ -49,7 +49,7 @@
     margin-left: -25px !important;
 }
 
-.autosize .ReactCodeMirror .CodeMirror {
+.autosize .cm-editor {
     height: auto;
 }
 
@@ -196,4 +196,8 @@
 
 .react-grid-layout {
     overflow-x: hidden;
-}
+}
+
+.cm-tooltip-autocomplete {
+    margin-top: 4px;
+}

src/component/editor/CodeEditorComponent.tsx

@@ -1,85 +1,42 @@
 import React from 'react';
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/addon/lint/lint.css';
-import 'codemirror/addon/hint/show-hint.css';
-import CypherEditor from './CypherEditor';
+import { CypherEditor, CypherEditorProps } from '@neo4j-cypher/react-codemirror';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+// import { languages } from '@codemirror/language-data';
+
+const markdownExtensions = [
+  markdown({
+    base: markdownLanguage, // Support GFM
+    // codeLanguages: languages
+  }),
+];
+
+import '@neo4j-cypher/codemirror/css/cypher-codemirror.css';
 
 const NeoCodeEditorComponent = ({
   value,
-  onChange = () => {},
+  onChange,
   placeholder,
   editable = true,
   language = 'cypher',
   style = { width: '100%', height: 'auto', border: '1px solid lightgray' },
 }) => {
-  const [cancelNextEdit, setCancelNextEdit] = React.useState(false);
-  const options = {
-    viewPortMargin: Infinity,
-    mode: language,
-    theme: 'cypher',
-    height: 'auto',
-    lineNumberFormatter: (line) => line,
+  const editorProps: CypherEditorProps = {
+    cypherLanguage: language === 'cypher',
+    readOnly: !editable,
+    placeholder: placeholder,
+    preExtensions: language === 'markdown' ? markdownExtensions : [],
+    value: value,
+    onValueChanged: (val) => {
+      if (editable && onChange) {
+        onChange(val);
+      }
+    },
+    className: 'ReactCodeMirror', // only used by integration tests
   };
 
-  // TODO -  we force a recreating of the editor object here in a strange way...
-  const editor =
-    language == 'cypher' ? (
-      <CypherEditor
-        options={options}
-        aria-label=''
-        readOnly={!editable}
-        value={!cancelNextEdit ? value : `${value} `}
-        onValueChange={(val, change) => {
-          // There's a bug here that causes an extra change event to be first after copy-pasting (with replacement) in the editor text box.
-          // This is a workaround for that.
-          if (cancelNextEdit) {
-            setCancelNextEdit(false);
-            onChange(value);
-            return;
-          }
-          if (change.origin == 'paste' && change.removed[0].length > 0) {
-            onChange(val);
-            setCancelNextEdit(true);
-            return;
-          }
-          if (editable && !cancelNextEdit) {
-            onChange(val);
-          }
-        }}
-        placeholder={placeholder}
-      />
-    ) : (
-      <div>
-        <CypherEditor
-          options={options}
-          readOnly={!editable}
-          aria-label=''
-          value={!cancelNextEdit ? value : `${value} `}
-          onValueChange={(val, change) => {
-            // There's a bug here that causes an extra change event to be first after copy-pasting (with replacement) in the editor text box.
-            // This is a workaround for that.
-            if (cancelNextEdit) {
-              setCancelNextEdit(false);
-              onChange(value);
-              return;
-            }
-            if (change.origin == 'paste' && change.removed[0].length > 0) {
-              onChange(val);
-              setCancelNextEdit(true);
-              return;
-            }
-            if (editable && !cancelNextEdit) {
-              onChange(val);
-            }
-          }}
-          placeholder={placeholder}
-        />
-      </div>
-    );
-
   return (
     <div className={'autosize'} style={style}>
-      {editor}
+      <CypherEditor {...editorProps} />
     </div>
   );
 };

webpack.config.js

@@ -43,6 +43,6 @@ module.exports = (env) => {
       port: 3000,
       hot: true,
     },
-    plugins: [new webpack.HotModuleReplacementPlugin()],
+    plugins: production ? [] : [new webpack.HotModuleReplacementPlugin()]
   };
 };