<commit_before>import { Editor } from '@tinymce/tinymce-react';
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import InputHOC from '../high_order/input_hoc.jsx';
const md = require('../../utils/markdown_it.js').default({ openLinksExternally: true });

// 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 = createReactClass({
  displayName: 'TextAreaInput',

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

  handleRichTextEditorChange(e) {
    this.props.onChange(
      { target: { value: e.target.getContent() } }
    );
  },

  render() {
    let inputElement;
    let rawHtml;

    // ////////////
    // Edit mode //
    // ////////////
    if (this.props.editable) {
      let inputClass;
      if (this.props.invalid) {
        inputClass = 'invalid';
      }

      // Use TinyMCE if props.wysiwyg, otherwise, use a basic textarea.
      if (this.props.wysiwyg) {
        inputElement = (
          <Editor
            initialValue={this.props.value}
            onChange={this.handleRichTextEditorChange}
            className={inputClass}
            init={{
              height: 250,
              plugins: 'code link',
              branding: false,
              inline: true,
              default_link_target: '_blank',
              relative_urls: false
            }}
          />
        );
      } else {
        inputElement = (
          <textarea
            className={inputClass}
            id={this.props.id}
            rows={this.props.rows || '8'}
            value={this.props.value || ''}<commit_msg>Enable lists plugin for text editor<commit_after>import { Editor } from '@tinymce/tinymce-react';
import React from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import InputHOC from '../high_order/input_hoc.jsx';
const md = require('../../utils/markdown_it.js').default({ openLinksExternally: true });

// 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 = createReactClass({
  displayName: 'TextAreaInput',

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

  handleRichTextEditorChange(e) {
    this.props.onChange(
      { target: { value: e.target.getContent() } }
    );
  },

  render() {
    let inputElement;
    let rawHtml;

    // ////////////
    // Edit mode //
    // ////////////
    if (this.props.editable) {
      let inputClass;
      if (this.props.invalid) {
        inputClass = 'invalid';
      }

      // Use TinyMCE if props.wysiwyg, otherwise, use a basic textarea.
      if (this.props.wysiwyg) {
        inputElement = (
          <Editor
            initialValue={this.props.value}
            onChange={this.handleRichTextEditorChange}
            className={inputClass}
            init={{
              height: 250,
              plugins: 'code link lists',
              branding: false,
              inline: true,
              default_link_target: '_blank',
              relative_urls: false
            }}
          />
        );
      } else {
        inputElement = (
          <textarea
            className={inputClass}
            id={this.props.id}
            rows={this.props.rows || '8'}
            value={this.props.value || ''}
{'fraction_non_alphanumeric': 0.11729706757331067, 'fraction_numerical': 0.0016999575010624734, 'mean_word_length': 2.173971679028995, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 5, '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': '372226', 'n_tokens_mistral': 1317, 'n_tokens_neox': 1324, 'n_words': 378}