In the last post I wrapped CodeMirror v6 with a react component. However, it still looked like a plain <textarea> when it should be looking like a code editor.

CodeMirror’s  base setup has a grocery store’s worth of extensions to get started with full-fledged code editor. I have a much humbler objective, so I picked out the two extensions that I thought would be applicable to my use case:

• @codemirror/highlight
• @codemirror/matchbrackets

CodeMirror on its own is oblivious to code syntax and requires a set of rules to label segments of code. Fortunately, the @codemirror/lang-javascrip``t extension contains the rules for tagging JavaScript/JSX and TypeScript/TSX.

npm i \
@codemirror/highlight \
@codemirror/matchbrackets \
@codemirror/lang-javascript

I created a new file ~/components/editor/extensions.ts and import the relevant extensions. Most extensions will be the returned value of a function call. Some, like defaultHighlightStyle.fallback, will be values.

#typescript-with-react #codemirror #material-ui #typescript