<commit_before>var React = require('react/addons');
var defaults = require('lodash.defaults');
var render = require('../../lib/render.jsx');
var Binding = require('../../lib/binding.jsx');

var TextBlock = require('../../blocks/text.jsx');
var Range = require('../../components/range/range.jsx');
var ColorGroup = require('../../components/color-group/color-group.jsx');
var {CheckboxSet, Radio} = require('../../components/option-panel/option-panel.jsx');


var textStyleOptions = [
  {
    id: 'fontWeight',
    icon: '../../img/B.svg',
    uncheckedLabel: 'normal',
    checkedLabel: 'bold'
  },
  {
    id: 'fontStyle',
    icon: '../../img/I.svg',
    uncheckedLabel: 'normal',
    checkedLabel: 'italic'
  },
  {
    id: 'textDecoration',
    icon: '../../img/U.svg',
    uncheckedLabel: 'none',
    checkedLabel: 'underline'
  }
];

var textAlignOptions = ['left', 'center', 'right'].map(e => {
  return {
    value: e,
    icon: '../../img/align-'+e+'.svg'
  };
});

var TextEditor = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function () {
    var props = this.props.element || {};
    return defaults(props, TextBlock.defaults);
  },
  componentDidUpdate: function () {
    this.props.save(this.state);
  },
  editText: function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    this.refs.element.toggleEditing();
    // calls our setEditing function after changing state
  },
  stopEditing: function(evt) {
    this.refs.element.stopEditing();
  },
  setEditing: function(boolval) {
    this.setState({
      editing: boolval
    });
  },
  updateText: function (text) {
    this.setState({
      innerHTML: text
    });
  },
  render: function () {
    return (
      <div id="editor" onClick={this.stopEditing}>
        <div className="editor-preview">
          <TextBlock {...this.state} ref="element" active={true} updateText={this.updateText} setEditMode={this.setEditing} />
        </div>
        <div className="editor-options">
          <div className="form-group">
            <button className="btn btn-block" onClick={this.editText}>{ this.state.editing? "Done" : "Edit text"}</button>
          </div>
          <div className="form-group">
            <label>Font</label>
            <select className="select" valueLink={this.linkState('fontFamily')}>
              <option value="Roboto">Roboto</option>
              <option value="Bitter">Bitter</option>
              <option value="Pacifico">Pacifico</option>
            </select>
          </div>
          <div className="form-group">
            <label>Color</label>
            <ColorGroup id="color" linkState={this.linkState} />
          </div>
          <div className="form-group">
            <label>Text Style</label>
            <CheckboxSet options={textStyleOptions} linkState={this.linkState} />
          </div>
          <div className="form-group">
            <label>Text Alignment</label>
            <Radio id="textAlign" options={textAlignOptions} linkState={this.linkState} />
          </div>
        </div>
      </div>
    );
  }
});

module.exports = TextEditor;<commit_msg>Hide keyboard on pressing arrow<commit_after>var React = require('react/addons');
var defaults = require('lodash.defaults');
var render = require('../../lib/render.jsx');
var Binding = require('../../lib/binding.jsx');

var TextBlock = require('../../blocks/text.jsx');
var Range = require('../../components/range/range.jsx');
var ColorGroup = require('../../components/color-group/color-group.jsx');
var {CheckboxSet, Radio} = require('../../components/option-panel/option-panel.jsx');


var textStyleOptions = [
  {
    id: 'fontWeight',
    icon: '../../img/B.svg',
    uncheckedLabel: 'normal',
    checkedLabel: 'bold'
  },
  {
    id: 'fontStyle',
    icon: '../../img/I.svg',
    uncheckedLabel: 'normal',
    checkedLabel: 'italic'
  },
  {
    id: 'textDecoration',
    icon: '../../img/U.svg',
    uncheckedLabel: 'none',
    checkedLabel: 'underline'
  }
];

var textAlignOptions = ['left', 'center', 'right'].map(e => {
  return {
    value: e,
    icon: '../../img/align-'+e+'.svg'
  };
});

var TextEditor = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function () {
    var props = this.props.element || {};
    return defaults(props, TextBlock.defaults);
  },
  componentDidUpdate: function () {
    this.props.save(this.state);
  },
  editText: function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    this.refs.element.toggleEditing();
    // calls our setEditing function after changing state
  },
  stopEditing: function(evt) {
    this.refs.element.stopEditing();
  },
  setEditing: function(boolval) {
    this.setState({
      editing: boolval
    });
  },
  updateText: function (text) {
    this.setState({
      innerHTML: text
    });
  },
  render: function () {
    return (
      <div id="editor" onClick={this.stopEditing}>
        <form>
          <div className="editor-preview">
            <TextBlock {...this.state} ref="element" active={true} updateText={this.updateText} setEditMode={this.setEditing} />
          </div>
          <div className="editor-options">
            <div className="form-group">
              <button className="btn btn-block" onClick={this.editText}>{ this.state.editing? "Done" : "Edit text"}</button>
            </div>
            <div className="form-group">
              <label>Font</label>
              <select className="select" valueLink={this.linkState('fontFamily')}>
                <option value="Roboto">Roboto</option>
                <option value="Bitter">Bitter</option>
                <option value="Pacifico">Pacifico</option>
              </select>
            </div>
            <div className="form-group">
              <label>Color</label>
              <ColorGroup id="color" linkState={this.linkState} />
            </div>
            <div className="form-group">
              <label>Text Style</label>
              <CheckboxSet options={textStyleOptions} linkState={this.linkState} />
            </div>
            <div className="form-group">
              <label>Text Alignment</label>
              <Radio id="textAlign" options={textAlignOptions} linkState={this.linkState} />
            </div>
          </div>
        </form>
      </div>
    );
  }
});

module.exports = TextEditor;
{'fraction_non_alphanumeric': 0.17661808493966463, 'fraction_numerical': 0.0, 'mean_word_length': 2.4836244541484715, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 83, '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': '234352', 'n_tokens_mistral': 1926, 'n_tokens_neox': 1931, 'n_words': 351}