[WIP] React FC conversion for editor file retry + codemirror update

[nahbee10]

Fixes #issue-number

Changes:

• using EditorView along with editorView as a react state instead of cmInstance.current
• using view.dispatch when changes need to be applied to the view instead of calling the function directly from the instance
• change linter/emmet usage style to accommodate the updates from codemirror 6
• will work on creating separate hook(useCodemirror) to set up the codemirror view to clean up the code
• add mobile editor
• apply p5 theme color
• TODO: add custom color picker
• TODO: implement emmet
• TODO: connect/implement search
• TODO: refactor the code into smaller chunks
• TODO: add back the debouncer
• TODO: add lintMessage and fontSize to dependency array for useEffect
• TODO: fix style discrepancy issue on each theme

I have verified that this pull request:

• [x] has no linting errors (npm run lint)
• [x] has no test errors (npm run test)
• [x] is from a uniquely-named feature branch and is up to date with the develop branch.
• [ ] is descriptively named and links to an issue number, i.e. Fixes #123

[release-com[bot]]

Release Environments

This Environment is provided by Release, learn more! To see the status of the Environment click on Environment Status below.

• p5.js-web-editor
  • app-tedfc53.release.editor.p5js.org/
  • preview-tedfc53.release.editor.p5js.org/

:wrench:Environment Status : https://app.release.com/public/Processing%20Foundation/env-fdb9d83e1a

[nahbee10]

Hi @lindapaiste Glad to meet you since I was also closely looking at your code when I'm preparing to work on this feature. First I apologize that since I didn't mean to close your PR. @raclim and I talked about closing my other old editor conversion/codemirror update PR yesterday and I accidentally closed yours. Now I reopened it. So sorry about that!
And thanks for reviewing the PR. I've been working on codemirror upgrade as a part of the pr05 program with updating the p5 editor codebase using React functional component. While i'm working on that, I also realized that it needs a lot care for state management and custom components handling missing/changed features from the upgrade. Had a better understanding about how much effort you put in the draft PR after I actually worked on upgrading the codebase. I'll address the comments you left and consider carefully the amount of works need to be done for building custom features.

[lindapaiste]

@nahbee10 I'd guess that I have it around 70% done in that other PR (so you can imagine my frustration). I would recommend that you make a checklist with all of the behaviors and styles which need to be re-implemented when upgrading to v6. In particular: all of the addons that are imported, the addons that we uploaded and modified, the options that we set, and the keyboard shortcuts. Then you can run the branch for my draft and see which ones I have and have not addressed. I left a bunch of //TODO comments that you can look at to see what needs to be done.

[khanniie]

Just wanted to provide a little more info about the test fixes in case anyone is curious!

The jest/babel changes are meant to address this error that we were formerly getting:

-  Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

The problematic import in question was the newly introduced emmetio/codemirror6-plugin, which only compiles to a ECMAScript module, which is not enabled by default in Jest, as specified in the above error message.

What we do to fix this is:

• Have babel-jest configured to transform the emmetio module to commonjs by using "transformIgnorePatterns"
• Specify a babel configuration file for the tests. not sure why it is not automatically being detected but looks like others are experiencing the same thing: https://github.com/jestjs/jest/issues/8006

I also updated Jest in case that helped since it looks like a lot of new features had been introduced.

The other changes in the same CL are just small test error fixes but nothing interesting : )