Syntax highlighting using React without JSX

Question

I want to build a React form with a text field that has very simple syntax highlighting, but I'd like to do it without JSX. Is there a way to use DraftJS without JSX?

Answer 1

You can do it without Draft.js by using a div with contenteditable="true". Here's what I've worked out so far. For this example, the highlighting rule is that vowels should be highlighted in green.

It works reasonably well, but I still need to add code to keep the selection in the right spot.

Is there a way to use DraftJS instead? Is there an easier way to do this?

var SpanEditor = React.createClass({
    handleChange: function(event) {
      for (
          var i = 0;
          i < this.contentSpan.childNodes.length;
          i++) {
        var child = this.contentSpan.childNodes[i];
        if (child.childNodes.length > 1) {
          while (child.childNodes.length > 0) {
              var grandchild = child.childNodes[0];
            child.removeChild(grandchild);
            if (grandchild.nodeName == '#text') {
              var grandchildText = grandchild;
              grandchild = document.createElement(
                'span');
              grandchild.appendChild(grandchildText);
            }
            this.contentSpan.insertBefore(
              grandchild,
              child);
          }
          this.contentSpan.removeChild(child);
          child = this.contentSpan.childNodes[i];
        }
        if (child.nodeName == 'SPAN') {
          var childText = child.textContent,
              childClass = child.className;
          for (var j = 0; j < childText.length; j++) {
            var c = childText.charAt(j),
                className = (
                    'aeiouAEIOU'.indexOf(c) >= 0
                    ? 'vowel'
                    : '');
            if (className != childClass) {
              if (j == 0) {
                  child.className = className;
              }
              else {
                  var newChild = document.createElement(
                    'span');
                newChild.className = childClass;
                newChild.appendChild(
                  document.createTextNode(
                    childText.substring(0, j)));
                child.childNodes[0].nodeValue = (
                  childText.substring(j));
                child.className = className;
                this.contentSpan.insertBefore(
                  newChild,
                  child);
                j = childText.length;
              }
            }
          }
        }
      }
    },
    mountContentSpan: function(span) {
      this.contentSpan = span;
      var child = document.createElement('span');
      child.appendChild(document.createTextNode(
        'Type something.'));
      this.contentSpan.appendChild(child);
      this.handleChange();
    },
    render: function() {
      return React.createElement(
        'span',
        {
          id: 'z',
          onInput: this.handleChange,
          contentEditable: true,
          suppressContentEditableWarning: true,
          ref: this.mountContentSpan
        });
    }
  });

  var rootElement =
    React.createElement('div', {}, 
      React.createElement(
        'p',
        {},
        'Edit the next paragraph.'),
      React.createElement(SpanEditor)
    )

  ReactDOM.render(
    rootElement,
    document.getElementById('react-app'))

span.vowel {
  background-color: lime;
}

<div id="react-app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>