Initial Monaco Editor implementation

build_scripts/webpack-plugins.js

@@ -29,6 +29,7 @@ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
   .BundleAnalyzerPlugin
 const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 const manifestGeneration = require('./generate-manifest-helpers')
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 
@@ -91,6 +92,38 @@ module.exports = () => {
     new ForkTsCheckerNotifierWebpackPlugin({
       title: 'TypeScript',
       excludeWarnings: false
+    }),
+    new MonacoWebpackPlugin({
+      features: [
+        '!accessibilityHelp',
+        '!anchorSelect',
+        '!caretOperations',
+        '!clipboard',
+        '!codeAction',
+        '!codelens',
+        '!colorDetector',
+        '!contextmenu',
+        '!coreCommands',
+        '!cursorUndo',
+        '!dnd',
+        '!fontZoom',
+        '!gotoError',
+        '!gotoLine',
+        '!gotoSymbol',
+        '!iPadShowKeyboard',
+        '!inspectTokens',
+        '!links',
+        '!parameterHints',
+        '!quickHelp',
+        '!referenceSearch',
+        '!snippets',
+        '!toggleHighContrast',
+        '!toggleTabFocusMode',
+        '!transpose',
+        '!unusualLineTerminators',
+        '!viewportSemanticTokens'
+      ],
+      languages: []
     })
   ]
 

build_scripts/webpack.config.js

@@ -62,19 +62,32 @@ module.exports = {
         splitChunks: {
           cacheGroups: {
             vendor: {
-              test: /[\\/]node_modules[\\/](react|react-dom|@firebase|d3|codemirror|faker|remark-mdx|@mdx-js)[\\/]/,
+              test: /[\\/]node_modules[\\/](react|react-dom|@firebase|d3)[\\/]/,
               name: 'vendor',
-              chunks: 'all'
+              chunks: 'all',
+              enforce: true
+            },
+            'cypher-editor': {
+              test: /[\\/]node_modules[\\/](antlr4|codemirror|cypher-codemirror|cypher-editor-support)[\\/]/,
+              name: 'cypher-editor',
+              chunks: 'all',
+              enforce: true
+            },
+            mdx: {
+              test: /[\\/]node_modules[\\/](@babel|@literal-jsx|@mdx-js|acorn|acorn-jsx|hast-util-raw|mdast-util-to-hast|remark-mdx|remark-parse)[\\/]/,
+              name: 'mdx',
+              chunks: 'all',
+              enforce: true
             },
-            'cypher-codemirror': {
-              test: /[\\/]node_modules[\\/](cypher-codemirror|cypher-editor-support)[\\/]/,
-              name: 'cypher-codemirror',
+            monaco: {
+              test: /[\\/]node_modules[\\/](monaco-editor)[\\/]/,
+              name: 'monaco',
               chunks: 'all',
               enforce: true
             },
-            ui: {
+            'relate-by-ui': {
               test: /[\\/]node_modules[\\/](@relate-by-ui|semantic-ui-react)[\\/]/,
-              name: 'ui',
+              name: 'relate-by-ui',
               chunks: 'all',
               enforce: true
             },

jest.config.js

@@ -15,17 +15,19 @@ module.exports = {
     '/node_modules/'
   ],
   transformIgnorePatterns: [
-    '/node_modules/(?!lodash-es|@neo4j/browser-lambda-parser|react-dnd|dnd-core)'
+    '/node_modules/(?!lodash-es|@neo4j/browser-lambda-parser|react-dnd|dnd-core|monaco-editor)'
   ],
   moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|html)$':
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|html|css)$':
       '<rootDir>/test_utils/__mocks__/fileMock.js',
     '\\.(css|less)$': '<rootDir>/test_utils/__mocks__/styleMock.js',
     '^browser-styles(.*)$': '<rootDir>/src/browser/styles$1',
     '^browser-components(.*)$': '<rootDir>/src/browser/components$1',
     '^browser-hooks(.*)$': '<rootDir>/src/browser/hooks$1',
     'worker-loader': '<rootDir>/test_utils/__mocks__/workerLoaderMock.js',
-    'project-root(.*)$': '<rootDir>$1'
+    'project-root(.*)$': '<rootDir>$1',
+    '^monaco-editor$':
+      '<rootDir>/node_modules/monaco-editor/esm/vs/editor/editor.main.js'
   },
   modulePaths: ['<rootDir>/src', '<rootDir>/src/shared'],
   collectCoverageFrom: [

package.json

@@ -67,14 +67,16 @@
     "@hot-loader/react-dom": "^16.8.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
     "@testing-library/jest-dom": "^5.3.0",
-    "@testing-library/react": "^9.0.1",
+    "@testing-library/react": "^10.4.9",
     "@testing-library/react-hooks": "^2.0.1",
+    "@types/antlr4": "^4.7.2",
     "@types/apollo-upload-client": "^14.1.0",
     "@types/jest": "^24.9.0",
     "@types/lodash-es": "^4.17.3",
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
+    "@types/redux-mock-store": "^1.0.2",
     "@types/styled-components": "^5.1.1",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^3.9.0",
@@ -115,6 +117,7 @@
     "lint-staged": "^4.1.3",
     "mini-css-extract-plugin": "^0.4.4",
     "mockdate": "^2.0.5",
+    "monaco-editor-webpack-plugin": "^1.9.0",
     "ncp": "^2.0.0",
     "nock": "^12.0.3",
     "postcss": "^6.0.11",
@@ -150,12 +153,14 @@
     "@relate-by-ui/css": "1.0.5",
     "@relate-by-ui/relatable": "1.0.1",
     "@relate-by-ui/saved-scripts": "^1.0.5",
+    "antlr4": "^4.8.0",
     "apollo-upload-client": "^14.1.2",
     "ascii-data-table": "^2.1.1",
     "canvg": "^1.5.3",
     "codemirror": "^5.29.0",
     "core-js": "3",
     "cypher-codemirror": "1.1.6",
+    "cypher-editor-support": "^1.1.6",
     "d3": "3",
     "dateformat": "^3.0.3",
     "deepmerge": "^2.1.1",
@@ -166,6 +171,7 @@
     "jsonic": "^0.3.0",
     "jszip": "^3.2.2",
     "lodash-es": "^4.17.15",
+    "monaco-editor": "^0.20.0",
     "neo4j-driver": "^4.1.0",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",

src/browser/custom.d.ts

@@ -38,3 +38,26 @@ declare module 'suber' {
   const createBus: () => Bus
   export { Bus, createBus }
 }
+
+declare module 'cypher-editor-support/src/_generated/CypherLexer' {
+  export class CypherLexer extends (await import('antlr4/index.js')).Lexer {
+    constructor(input: unknown)
+    channelNames: string[]
+    modeNames: string[]
+    literalNames: string[]
+    symbolicNames: string[]
+    ruleNames: string[]
+    grammarFileName: string;
+    [key: string]: number
+  }
+}
+
+declare module 'cypher-editor-support' {
+  export function parse(
+    input: string
+  ): {
+    referencesListener: {
+      queriesAndCommands: { getText: () => string; start: { line: number } }[]
+    }
+  }
+}