Why do we need the react editor? 

There is a large range of code-based editors like CodeMirror, Monaco, Ace, etc., that provide us with the ability to insert a fully equipped code editor into our website. But in the off chance that you need a simple editor that provides the feature of syntax highlighting without any of the added and more x=complex features, a simple code editor is the way to go for you. The extra features are sometimes capable of being overkill as they usually do not come with a small bundle size footprint. The React Editor library has only one goal and that is to provide a simple code editor with syntax highlighting support without any of the extra features. It is perfect for simple embeds and forms where the user can submit codes. 

 

 What are a few features of the React Editor? 

–       The react editor helps us highlight modular syntax with the help of a third-party library. 

–       The app provides the feature of a customizable indentation that allows you to indent line or select text by simply using the tab key. 

–       It also provides automatic indentation on new lines. 

–       The app also has a feature that allows you to wrap selected text using parens, brackets or quotes. 

–       It also allows you to undo whole words instead of consuming time by erasing every individual letter. 

–       Accessibility has also been made easy by the use of Ctrl+Shift+M for Mac devices. Another possible command is Ctrl+M that allows you to toggle by capturing the tab key. 

 

Installation process- 

To install the app, use the code given below: 

npm install react-simple-code-editor

 

another possible code to do so is: 

yarn add react-simple-code-editor

 

How to use the app: 

In order to use the editor, you require a third-party library that provides you with the feature of Syntax highlighting. For example, by using prismjs, it will look similar to the code shown below:

It is important for you to keep in mind that depending on your syntax highlighter, you might have to include additional CSS for syntax highlighting to work. 

 

Props used for the react editor

This editor accepts all the props that a text area accepts. Along with that, you can also pass the props given below: 

value (string) –

The current value of the editor is the code that is currently visible. We should label it as a controlled prop.

 

onValueChange (string => mixed) –

When the value of the editor is changed, a callback is called to action. You will need to manually update the prop value when this action occurs. 

 

highlight (string => string | React.Node)-

This is the callback that will receive a text to highlight. You will need to return an HTML string or a React element with syntax highlighting with the use of a library such as prismjs. 

 

tabSize (number) –

These determine the number of characters to insert while still pressing the tab key. An example of this is that when you need a 4 space indentation, the tab size will be 4 and the insert spaces will be true. The default setting should be kept at 2. 

 

insertSpaces (boolean) –

This determines whether or not you want to use spaces for indentation. The default setting for this is true. If you change this to false, you may also want to change the tab size and set it to 1. 

 

ignoreTabKey (boolean) –

In a case where the editor chooses to ignore, they should press the tab key so that keyboard users can tab past the editor. Users can also toggle this behavior by using Ctrl+Shift+M for mac devices and Ctrl+M (as mentioned above) when using manually when the setting is false. The setting is kept at false by default. 

 

padding (number) – 

This is the optional padding feature for code. The default value for this is 0. 

 

textareaId (string) –

This creates an id to underline the text area and can be useful for setting a label.

 

textareaClassName (string) –

In order to have more precise controls over the styles, a className for the underlying text area can be very useful.

 

preClassName (string)-

Along with the text area, a classname for the underlying pre can also provide more precise control of the styles. 

 

Demo for the process- 

A demo for this process can be found on this website. The link for the same is given below: 

satya164.github.io/react-simple-code-editor

 

How does it work?

The app first overlays a syntax that is highlighted as <pre> block over a  <textarea>. When you type, select, copy text or make other moves, you go on to interact with the underlying <textarea>. This is why the experience feels so native. The approach that we use here is very simple and convenient as compared to other editors who re-implement the behavior. 

The process of syntax highlighting can be done with the use of any third party library as long as it returns the result in HTML and gives full control to the user.

The vanilla text area does not support the inserting of tab characters for indentation. This is why we try to re-implement the process by listening to key down events and then programmatically update the text. One problem to programmatically update the text is that we lose the undo stack and hence we need to maintain our own undo stack. 

As a result of this, we can also implement improved undo behavior such as undoing whole words similar to editors like VSCode. 

 

What are the Limitations of the program? 

Due to the way the program works, there are certain limitations that occur. 

  1. One drawback is that the syntax that we highlight cannot belong to a different font family, font weight, font style, line height, etc. for its content. Because the editor works by aligning the highlighted code over a text area, changing anything that affects the layout can very easily misalign it.
  2. The undo/redo items browser’s context menu is incompatible in nature with the custom undo stack. However, other full-featured editors do not support the browser’s undo/redo menu items either.
  3. This editor is not optimal for high performance and large documents and this can indirectly affect the typing speed.
  4. In the text area, the text can hide in the text area with the help of -WebKit-text-fill-color: transparent. This works on all the modern browsers (even non-WebKit ones such as Firefox and Edge). On IE 10+, we use color: transparent which does not hide the cursor. The text may appear bolder in unsupported browsers. 

Contributions- 

During the process of developing, you can run the example app to test your changes: 

yarn example

 

You need to make sure your code passes Flow and ESLint. Run the code given below to verify: 

yarn flow

yarn lint

In order to fix formatting errors, run the code given below: 

yarn lint — –fix

 

 

 

 

Leave a comment