README

CodeEditor

A generic React component for building customized code editors, based on Draft.js.

Demo

This simple C++ editor demo. exercises all the capabilities of the component, which right now are:

Automatic indentation inside blocks (delimited by { and }); you can set the indent size.
Customizable syntax highlighting.
Automatically closing a block and starting a new line when the user opens a block (i.e. inserting a '}' automatically).
Passing a callback for when the code is changed.

Usage

This is the entire code of the demo page:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CodeEditor demo</title>
    <script type="text/javascript" src="bundle.js"></script>
    <style type="text/css">
      #editor {
        width: 100%;
        height: 100%;
      }
    </style>
    <script type="text/javascript">
      function loadEditor() {
        var editor = document.getElementById("editor");
        CodeEditor.render(editor, {
          style: {
           width: '50%',
           height: '20em',
           border: '1px solid black',
           fontFamily: 'monospace',
           fontSize: '2em',
          },
          autoIndent: true,
          autoCloseBlocks: true,
          highlightingRules: [
            // Some keywords
            {
              regex: 'return|do|while|for|if|else|template|struct|class|using|namespace',
              style: {fontWeight: 'bold'},
            },
            // Some types
            {
              regex: 'int|char|void|short|unsigned|long|size_t|clock_t',
              style: {fontWeight: 'bold', color: '#000088'},
            },
            // Pre-processor lines
            {
              regex: '^#.*

,
              style: {color: 'green'},
            },
            // Strings
            {
              regex: '"[^"]*"',
              style: {color: 'red'},
            }
          ],
          initialCode: ("#include <iostream>\n" +
                        "using namespace std;\n" +
                        "int main(){\n" +
                        "    cout << \"Hello, world!\" << endl;\n" +
                        "    return 0;\n" +
                        "}\n"),
          indentSize: 4,
          onChange: function(code) { console.log("Code:===\n" + code + "\n===\n"); },
        });
      }
    </script>
  </head>
  <h1>Code Editor demo - C++ code editor</h1>
  <body onload="loadEditor();">
    <div id="editor"></div>
  </body>
</html>

Contributing

There are a number of other features that could be added without much effort:

Line numbers
Support for other indentation rules (like Python's)
Generic block delimiters

If you would like to implement any of these (or any other suggestions, of course), I'd be happy to review and merge your changes. Please create an issue stating what you would like to add and we can discuss it there.

License

MIT. Basically, do anything you want provided you keep the copyright notice.

codeeditor

Usage no npm install needed!