<commit_before>import React from 'react';
import ReactDOM from 'react-dom';
import Frame from 'react-frame-component';

import JSMode from '!!raw!codemirror/mode/javascript/javascript';
import JS from '!!raw!codemirror';
import CSS from '!!raw!codemirror/lib/codemirror.css';
import JSBeautify from 'js-beautify';
import JSBeautifyCode from '!!raw!js-beautify/js/lib/beautify';

export class Editor extends React.Component {

  render() {

    const {mode, onChange, value} = this.props;

    return (
      <Frame ref="iframe" className="editor-frame">
        <textarea ref="text" onChange={ this.changed.bind(this) } defaultValue={ JSBeautify.js(value, { 'indent_size': 2}) } />
      </Frame>
    );
  }

  componentDidMount() {
    const mode = this.props.mode === 'javascript' ? '{ name: "javascript", json: true }' : `"${this.props.mode}"`;
    const body = ReactDOM.findDOMNode(this.refs.iframe).contentWindow.document.body;
    const style = document.createElement('style');
    const script = document.createElement('script');
    const extra = `
      ;
      var textArea = document.body.children[0].children[0].children[0];
      var cm = CodeMirror.fromTextArea(textArea, {
        lineNumbers: true,
        mode: ${mode}
      });
      
      cm.on('change', function (editor, change) {
          var value = cm.getValue();
          
          if (change.origin === 'paste') {
            if (window.js_beautify) {
              var cursorPosition = cm.getCursor();
              var formattedValue = window.js_beautify(cm.getValue(), { 'indent_size': 2 });
              cm.setValue(formattedValue);
              cm.setCursor(cursorPosition);
            }
          }
      
          textArea.innerHTML = value;
          
          var event = new Event('input', { bubbles: true });
          textArea.dispatchEvent(event);
        });
    `;

    script.innerHTML = JS + JSBeautifyCode + JSMode + extra;
    style.innerHTML = CSS + `.CodeMirror { height: 100vh; }`;

    body.appendChild(style);
    body.appendChild(script);
  }

  changed(e) {
    this.props.onChange(this.refs.text.value);
  }
}
<commit_msg>fix(Code Editor): Fix json beautify failing when recieving an empty string<commit_after>import React from 'react';
import ReactDOM from 'react-dom';
import Frame from 'react-frame-component';

import JSMode from '!!raw!codemirror/mode/javascript/javascript';
import JS from '!!raw!codemirror';
import CSS from '!!raw!codemirror/lib/codemirror.css';
import JSBeautify from 'js-beautify';
import JSBeautifyCode from '!!raw!js-beautify/js/lib/beautify';

export class Editor extends React.Component {

  render() {

    const {mode, onChange, value} = this.props;

    return (
      <Frame ref="iframe" className="editor-frame">
        <textarea ref="text" onChange={ this.changed.bind(this) } defaultValue={ JSBeautify.js(value || '', { 'indent_size': 2}) } />
      </Frame>
    );
  }

  componentDidMount() {
    const mode = this.props.mode === 'javascript' ? '{ name: "javascript", json: true }' : `"${this.props.mode}"`;
    const body = ReactDOM.findDOMNode(this.refs.iframe).contentWindow.document.body;
    const style = document.createElement('style');
    const script = document.createElement('script');
    const extra = `
      ;
      var textArea = document.body.children[0].children[0].children[0];
      var cm = CodeMirror.fromTextArea(textArea, {
        lineNumbers: true,
        mode: ${mode}
      });
      
      cm.on('change', function (editor, change) {
          var value = cm.getValue();
          
          if (change.origin === 'paste') {
            if (window.js_beautify) {
              var cursorPosition = cm.getCursor();
              var formattedValue = window.js_beautify(cm.getValue(), { 'indent_size': 2 });
              cm.setValue(formattedValue);
              cm.setCursor(cursorPosition);
            }
          }
      
          textArea.innerHTML = value;
          
          var event = new Event('input', { bubbles: true });
          textArea.dispatchEvent(event);
        });
    `;

    script.innerHTML = JS + JSBeautifyCode + JSMode + extra;
    style.innerHTML = CSS + `.CodeMirror { height: 100vh; }`;

    body.appendChild(style);
    body.appendChild(script);
  }

  changed(e) {
    this.props.onChange(this.refs.text.value);
  }
}

{'fraction_non_alphanumeric': 0.1436476827299977, 'fraction_numerical': 0.0036891860733225734, 'mean_word_length': 2.7300085984522786, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1178651', 'n_tokens_mistral': 1340, 'n_tokens_neox': 1301, 'n_words': 274}