Adding a Code Editor to your React App

For the last couple of weeks, I have been working on implementing the idea of Web Handlers in ChatCraft. And last week, I finished setting up the initial functionality where users can save their configurations to extend ChatCraft's web handling capabilities.

Since the configuration is done in YAML, this week I decided to enhance that feature by replacing the regular TextArea element I was using for saving configurations with a dedicated Code Editor for a developer friendly experience, which I'll be talking about in this post.

Table of Contents

 1. How it looked before
 2. Replacing with a Code Editor
       2.1. Adding to ChatCraft
 3. Conclusion

How it looked before

Before talking about what code editor component I used for this purpose, here's what the configuration modal looked like before this change.

Replacing with a Code Editor

Now imagine you were forced to write your code in notepad. Naturally, it wouldn't be a pleasant experience 😝

So our users don't have to go through that pain, I used a library called react-codemirror to replace it with a code editor written for the web.

From the official CodeMirror documentation:

CodeMirror is a code editor component for the web. It can be used in websites to implement a text input field with support for many editing features, and has a rich programming interface to allow further extension.

This editor is highly configurable

and supports a whole bunch of languages

And it is super simple to add it to our projects.

Adding to ChatCraft

The first step whenever we want to use an external package is, of course 🥁🥁🥁

1. to install that package.

npm install @uiw/react-codemirror --save

2. Next, just use the component wherever you need in your code like so

import ReactCodeMirror from "@uiw/react-codemirror";


ReactCodeMirror
  value={webHandlerConfig}
  theme={colorMode}
  height={editorHeight}
  onChange={handleConfigValueChange}
/>

3. Lastly, you need to set the language extension that you want to be supported by the code editor.

What I noticed is that these language extension packages follow a pattern of the format

"@codemirror/lang-<language_name_here>"

Since I was dealing with YAML, I installed the following package

npm install @codemirror/lang-yaml

and in the JSX, just add to the extensions property of ReactCodeMirror.

import { yaml } from "@codemirror/lang-yaml";
...
...
ReactCodeMirror
  value={webHandlerConfig}
  theme={colorMode}
  extensions={[yaml()]}
  height={editorHeight}
  onChange={handleConfigValueChange}
/>

And that's all it took to make it look like this 🤩

Conclusion

This was a brief overview of how you can use CodeMirror editor in your React Applications.

For full documentation, you can visit
https://codemirror.net/docs/

This also went to ChatCraft's 1.8.0 release which happened this week.

Hope this post offered some value to you.
I am planning to work on some other cool stuff next week.

Will be writing on it soon!