react-simple-code-editor

What is react-simple-code-editor?

react-simple-code-editor is a lightweight code editor component for React applications. It provides a simple and customizable way to integrate a code editor into your React projects, supporting syntax highlighting and other basic code editing functionalities.

What are react-simple-code-editor's main functionalities?

Basic Code Editing

This feature allows you to create a basic code editor with syntax highlighting for JavaScript. The code sample demonstrates how to set up the editor, handle code changes, and apply syntax highlighting using Prism.js.

import React, { useState } from 'react';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';

const CodeEditor = () => {
  const [code, setCode] = useState('// Write your code here');

  return (
    <Editor
      value={code}
      onValueChange={code => setCode(code)}
      highlight={code => highlight(code, languages.js)}
      padding={10}
      style={{
        fontFamily: 'monospace',
        fontSize: 12,
      }}
    />
  );
};

export default CodeEditor;

Custom Styling

This feature demonstrates how to apply custom styling to the code editor. The code sample shows how to change the font size, background color, border, and padding to create a more customized appearance.

import React, { useState } from 'react';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';

const CustomStyledEditor = () => {
  const [code, setCode] = useState('// Write your code here');

  return (
    <Editor
      value={code}
      onValueChange={code => setCode(code)}
      highlight={code => highlight(code, languages.js)}
      padding={10}
      style={{
        fontFamily: 'monospace',
        fontSize: 14,
        backgroundColor: '#f5f5f5',
        border: '1px solid #ddd',
        borderRadius: '4px',
        padding: '10px'
      }}
    />
  );
};

export default CustomStyledEditor;

Other packages similar to react-simple-code-editor

react-ace

react-ace is a React component for the Ace code editor. It provides a more feature-rich and customizable code editing experience compared to react-simple-code-editor, including support for multiple themes, keybindings, and language modes.

react-codemirror2

react-codemirror2 is a React wrapper for the CodeMirror code editor. It offers extensive customization options, a wide range of language modes, and various add-ons for enhanced functionality. It is more feature-complete than react-simple-code-editor but also more complex to set up.

react-monaco-editor

react-monaco-editor is a React component for the Monaco Editor, which powers Visual Studio Code. It provides a highly advanced code editing experience with features like IntelliSense, multiple cursors, and rich language support. It is more powerful and feature-rich compared to react-simple-code-editor.

README

react-simple-code-editor

Simple no-frills code editor with syntax highlighting.

Why

Several browser based code editors such as Ace, CodeMirror, Monaco etc. provide the ability to embed a full-featured code editor in your web page. However, if you just need a simple editor with syntax highlighting without any of the extra features, they can be overkill as they don't usually have a small bundle size footprint. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.

Features

• Modular syntax highlighting with third party library
• Indent line or selected text by pressing tab key, with customizable indentation
• Automatic indent on new lines
• Wrap selected text in parens, brackets, or quotes
• Undo whole words instead of letter by letter
• Accessible, use Ctrl+Shift+M (Mac) / Ctrl+M to toggle capturing tab key

Installation

npm install react-simple-code-editor

or

yarn add react-simple-code-editor

Usage

You need to use the editor with a third party library which provides syntax highlighting. For example, it'll look like following with prismjs:

import React from 'react';
import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs/components/prism-core';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism.css'; //Example style, you can use another

function App() {
  const [code, setCode] = React.useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <Editor
      value={code}
      onValueChange={code => setCode(code)}
      highlight={code => highlight(code, languages.js)}
      padding={10}
      style={{
        fontFamily: '"Fira code", "Fira Mono", monospace',
        fontSize: 12,
      }}
    />
  );
}

Note that depending on your syntax highlighter, you might have to include additional CSS for syntax highlighting to work.

Props

The editor accepts all the props accepted by textarea. In addition, you can pass the following props:

• value (string): Current value of the editor i.e. the code to display. This must be a controlled prop.
• onValueChange (string => mixed): Callback which is called when the value of the editor changes. You'll need to update the value prop when this is called.
• highlight (string => string | React.Node): Callback which will receive text to highlight. You'll need to return an HTML string or a React element with syntax highlighting using a library such as prismjs.
• tabSize (number): The number of characters to insert when pressing tab key. For example, for 4 space indentation, tabSize will be 4 and insertSpaces will be true. Default: 2.
• insertSpaces (boolean): Whether to use spaces for indentation. Default: true. If you set it to false, you might also want to set tabSize to 1.
• ignoreTabKey (boolean): Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. Users can toggle this behaviour using Ctrl+Shift+M (Mac) / Ctrl+M manually when this is false. Default: false.
• padding (number): Optional padding for code. Default: 0.
• textareaId (string): An ID for the underlying textarea, can be useful for setting a label.
• textareaClassName (string): A className for the underlying textarea, can be useful for more precise control of its styles.
• preClassName (string): A className for the underlying pre, can be useful for more precise control of its styles.

Demo

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

How it works

It works by overlaying a syntax highlighted <pre> block over a <textarea>. When you type, select, copy text etc., you interact with the underlying <textarea>, so the experience feels native. This is a very simple approach compared to other editors which re-implement the behaviour.

The syntax highlighting can be done by any third party library as long as it returns HTML and is fully controllable by the user.

The vanilla <textarea> doesn't support inserting tab characters for indentation, so we re-implement it by listening to keydown events and programmatically updating the text. One caveat with programmatically updating the text is that we lose the undo stack, so we need to maintain our own undo stack. As a result, we can also implement improved undo behaviour such as undoing whole words similar to editors like VSCode.

Limitations

Due to the way it works, it has certain limitations:

• The syntax highlighted code cannot have different font family, font weight, font style, line height etc. for its content. Since the editor works by aligning the highlighted code over a <textarea>, changing anything that affects the layout can misalign it.
• The custom undo stack is incompatible with undo/redo items browser's context menu. However, other full featured editors don't support browser's undo/redo menu items either.
• The editor is not optimized for performance and large documents can affect the typing speed.
• We hide text in the textarea using -webkit-text-fill-color: transparent, which works in all modern browsers (even non-webkit ones such as Firefox and Edge). On IE 10+, we use color: transparent which doesn't hide the cursor. Text may appear bolder in unsupported browsers.

Contributing

While developing, you can run the example app to test your changes:

yarn example

Make sure your code passes TypeScript and ESLint. Run the following to verify:

yarn typescript
yarn lint

To fix formatting errors, run the following:

yarn lint -- --fix