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/frameworks

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!