#1640 Remove react-codemirror2 and upgrade to codemirror 6

[nmgokhale]

Fixes: #1640

Release notes documentation -

Major version upgrade from Codemirror 5.x to Codemirror 6.x. This affects the code editor in Expression control.

Gruntfile changes -
We're No longer exporting lib/codemirror.css and addon/hint/show-hint.css files.

If your application is using following grunt config, please remove this grunt config.

codeMirror: {
	files: [{
		expand: true,
		flatten: false,
		cwd: "./node_modules/codemirror/",
		src: ["lib/codemirror.css", "addon/hint/show-hint.css"],
		dest: ".build/css/codemirror"
	}]
},

Also remove following stylesheets from your application's index.js file -

<link rel="stylesheet" href={`/canvas${getHashedResource("/css/codemirror/addon/hint/show-hint.css")}`} />
<link rel="stylesheet" href={`/canvas${getHashedResource("/css/codemirror/lib/codemirror.css")}`} />

CSS Changes -
Since we're no longer exporting lib/codemirror.css file, if you create a new Codemirror 6.x instance in your application, elyra-canvas codemirror CSS from this file will no longer be imported into your classnames. Please ensure all custom CSS overrides works fine in your application.

Codemirror 6.x creates a rather different DOM structure for the editor. If you're writing custom CSS for the editor, you'll probably have to change it a bit. Class names roughly correspond like this:

react-codemirror2 → elyra-CodeMirror
CodeMirror → cm-editor
CodeMirror-line → cm-line
CodeMirror-scroll → cm-scroller
CodeMirror-sizer → cm-content
CodeMirror-focused → cm-focused
CodeMirror-gutters → cm-gutters
CodeMirror-gutter → cm-gutter
CodeMirror-gutter-elt → cm-gutterElement

Please make any other changes in class names as required after inspecting "Elements" tab in the browser.

Autocompletions -
Expression control supports following languages -

• Python
• R
• SQL
• JavaScript
• CLEM

Autocompletions will start showing up as soon as you start typing in the code editor. They can also show up using ctrl + space key combination. Autocompletions will show language specific keywords, custom keywords specified here, and field names from the expression builder table.

Jest tests failures -
If you notice several jest unit tests are failing with this error -

● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
    ...

    Details:

    @elyra/canvas/canvas_modules/common-canvas/node_modules/lezer-r/dist/highlight.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { styleTags, tags as t } from "@lezer/highlight";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

Please add this config in your package.json file to fix jest tests -

"jest": {
    "transformIgnorePatterns": [
      "node_modules/@elyra/canvas/node_modules/(?!lezer-r)"
    ]
  }

Developer's Certificate of Origin 1.1

   By making a contribution to this project, I certify that:

   (a) The contribution was created in whole or in part by me and I
       have the right to submit it under the Apache License 2.0; or

   (b) The contribution is based upon previous work that, to the best
       of my knowledge, is covered under an appropriate open source
       license and I have the right under that license to submit that
       work with modifications, whether created in whole or in part
       by me, under the same open source license (unless I am
       permitted to submit under a different license), as indicated
       in the file; or

   (c) The contribution was provided directly to me by some other
       person who certified (a), (b) or (c) and I have not modified
       it.

   (d) I understand and agree that this project and the contribution
       are public and that a record of the contribution (including all
       personal information I submit with it, including my sign-off) is
       maintained indefinitely and may be redistributed consistent with
       this project or the open source license(s) involved.

[nmgokhale]

d3-* in following config didn't work. So I had to specify all d3 packages in the config.

transformIgnorePatterns": [
      "/node_modules/(?!(d3-*|lezer-r)/)"
],

[nmgokhale]

When nothing is selected, cursor is set to the end of the line. But this if loop doesn't work when I explicitly set the cursor to line 0, char 0 -

Screen.Recording.2024-02-08.at.4.08.46.PM.mov

[matthoward366]

When accessing the state is this documented? I'm thinking we need to either add 1 method to get the state to make sure it returns something or add optional chaining.

[matthoward366]

Any reason you changed the devDependencies? These should stay static since consuming applications wouldn't install them.

[matthoward366]

Are both of these internal to CodeMirror? We probably should add optional chaining in case CodeMirror changes the code and these objects don't exist.

[nmgokhale]

I will add a new method which will return this.editor?.viewState?.state

Getting the state.doc, state.selection, state.replaceSelection is documented in this migration guide - https://codemirror.net/docs/migration/

[matthoward366]

Any reason you define this here and not as a class variable?

[matthoward366]

I think this can be removed now. This should come from common-canvas.

[matthoward366]

This doesn't really help protect us. It would have to be this.getCodemirrorState()?.selection?.main?.head

Anything that has methods would have to change the object first, then call the method.

Is everything your using documented? If so, maybe we're safe to use it without optional chaining.

[nmgokhale]

Everything after this.getCodemirrorState()? is documented in migration guide and reference manual.

[matthoward366]

Looks good