<commit_before>import React from 'react';
const md = require('../../utils/markdown_it.js').default();
import InputMixin from '../../mixins/input_mixin.cjsx';
import TrixEditor from 'react-trix';

const TextAreaInput = React.createClass({
  displayName: 'TextAreaInput',

  propTypes: {
    onChange: React.PropTypes.func,
    onFocus: React.PropTypes.func,
    onBlur: React.PropTypes.func,
    value: React.PropTypes.string,
    value_key: React.PropTypes.string,
    editable: React.PropTypes.bool,
    id: React.PropTypes.string,
    focus: React.PropTypes.bool,
    placeholder: React.PropTypes.string,
    autoExpand: React.PropTypes.bool,
    wysiwyg: React.PropTypes.bool,
    markdown: React.PropTypes.bool,
    rows: React.PropTypes.string,
    className: React.PropTypes.string
  },

  mixins: [InputMixin],

  getInitialState() {
    return { value: this.props.value };
  },

  _handleChange(e) {
    this.onChange(e);
    return this.setState({ value: e.target.innerHTML });
  },

  render() {
    let inputElement;
    let rawHtml;

    // ////////////
    // Edit mode //
    // ////////////
    if (this.props.editable) {
      // Use Trix if props.wysiwyg, otherwise, use a basic textarea.
      if (this.props.wysiwyg) {
        inputElement = (
          <TrixEditor
            value={this.state.value}<commit_msg>Documentation for TextAreaInput<commit_after>import React from 'react';
const md = require('../../utils/markdown_it.js').default();
import InputMixin from '../../mixins/input_mixin.cjsx';
import TrixEditor from 'react-trix';

// This is a flexible text input box. It switches between edit and read mode,
// and can either provide a wysiwyg editor or a plain text editor.
const TextAreaInput = React.createClass({
  displayName: 'TextAreaInput',

  propTypes: {
    onChange: React.PropTypes.func,
    onFocus: React.PropTypes.func,
    onBlur: React.PropTypes.func,
    value: React.PropTypes.string,
    value_key: React.PropTypes.string,
    editable: React.PropTypes.bool, // switch between read and edit mode
    id: React.PropTypes.string,
    focus: React.PropTypes.bool,
    placeholder: React.PropTypes.string,
    autoExpand: React.PropTypes.bool, // start with one line and expand as needed — plain text only
    rows: React.PropTypes.string, // set the number of rows — plain text only
    wysiwyg: React.PropTypes.bool, // use Trix editor instead of plain text
    markdown: React.PropTypes.bool, // render value as Markdown when in read mode
    className: React.PropTypes.string
  },

  mixins: [InputMixin],

  getInitialState() {
    return { value: this.props.value };
  },

  _handleChange(e) {
    this.onChange(e);
    return this.setState({ value: e.target.innerHTML });
  },

  render() {
    let inputElement;
    let rawHtml;

    // ////////////
    // Edit mode //
    // ////////////
    if (this.props.editable) {
      // Use Trix if props.wysiwyg, otherwise, use a basic textarea.
      if (this.props.wysiwyg) {
        inputElement = (
          <TrixEditor
            value={this.state.value}
{'fraction_non_alphanumeric': 0.13631905851585485, 'fraction_numerical': 0.0, 'mean_word_length': 2.7592137592137593, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 3, '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': '5323523', 'n_tokens_mistral': 960, 'n_tokens_neox': 945, 'n_words': 237}