Adding a Code Editor to your React App
Tags: webdev, react, opensource, javascript
Published: 2024-04-08 01:36:14

For the last couple of weeks, I have been working on implementing the idea of [Web Handlers](https://dev.to/amnish04/iterating-on-web-handlers-implementation-1e30#how-it-works) in [ChatCraft](https://chatcraft.org/). 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](https://www.redhat.com/en/topics/automation/what-is-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
&nbsp;1. [How it looked before](#how-it-looked-before)
&nbsp;2. [Replacing with a Code Editor](#replacing-with-a-code-editor)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.1. [Adding to ChatCraft](#adding-to-chatcraft)
&nbsp;3. [Conclusion](#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.

![Old Look for Web Handlers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xoczuvl6gbfwngknuyx6.png)

## 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](https://uiwjs.github.io/react-codemirror/) to replace it with a code editor written for the web.

> From the official [CodeMirror](https://codemirror.net) 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**

![CodeMirror](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7ggijb4o9bu7s8dx9up.png)

and **supports** a whole bunch of **languages**

![Language Support](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvufg0pyjd81aeyz4gd8.png)

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

```tsx
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.

```tsx
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 🤩

![ChatCraft Web Handlers config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovye222dopea74tlm2tc.png)

## 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](https://github.com/tarasglek/chatcraft.org/releases/tag/v1.8.0) which happened this week.

![ChatCraft 1.8.0 Release](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bmq1ij9az8ruxfnt2ky.png)

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!