<commit_before># ship-components-texteditor
[React](http://facebook.github.io/react/) rich text editor built on [draft-js](https://facebook.github.io/draft-js/). Exports a commonjs module that can be used with [webpack](http://webpack.github.io/). Source is in ES6 and is compiled down to ES5 using [Babel](https://babeljs.io/).

[![npm](https://img.shields.io/npm/v/ship-components-texteditor.svg?maxAge=2592000)](https://www.npmjs.com/package/ship-components-texteditor)
[![dependencies](https://img.shields.io/david/ship-components/ship-components-texteditor.svg?style=flat)](https://david-dm.org/ship-components/ship-components-texteditor)
[![devDependencies](https://img.shields.io/david/dev/ship-components/ship-components-texteditor.svg?style=flat)](https://david-dm.org/ship-components/ship-components-texteditor?type=dev)

## Usage

### ES6/JSX (Recommended)
The component is written using ES6/JSX therefore Babel is recommended to use it. The below example is based on using [webpack](http://webpack.github.io/) and [babel-loader](https://github.com/babel/babel-loader).
```js
import React from 'react';
import TextEditor from 'ship-components-texteditor';

class Examples extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      basic: '<p>This is <b>some </b><u><b>sample</b></u> <i><b>text</b></i></p>'
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(key, event) {
    this.setState({
      [key]: event.target.value
    });
  }

  render() {
    return (
      <div>
        <h1>{'<TextEditor /> Examples'}</h1>
        <div className='example-group'>
          <h2>Basic (HTML)</h2>
          <TextEditor
            editable
            type='html'
            inlineStyles={new Immutable.Set(['BOLD', 'UNDERLINE', 'ITALIC'])}
            onChange={this.handleChange.bind(this, 'basic')}
            value={this.state.basic}
          />
        </div>
      </div>
    );
  }
}

```

## Examples and Development
Examples can be found in the `examples/` folder. A development server can be run with:

```shell
$ npm install
$ npm start
```

This will live reload any changes you make and serve them at http://localhost:8080.
<commit_msg>Updates the readme file with instructions on how to use forceUpdate method<commit_after># ship-components-texteditor
[React](http://facebook.github.io/react/) rich text editor built on [draft-js](https://facebook.github.io/draft-js/). Exports a commonjs module that can be used with [webpack](http://webpack.github.io/). Source is in ES6 and is compiled down to ES5 using [Babel](https://babeljs.io/).

[![npm](https://img.shields.io/npm/v/ship-components-texteditor.svg?maxAge=2592000)](https://www.npmjs.com/package/ship-components-texteditor)
[![dependencies](https://img.shields.io/david/ship-components/ship-components-texteditor.svg?style=flat)](https://david-dm.org/ship-components/ship-components-texteditor)
[![devDependencies](https://img.shields.io/david/dev/ship-components/ship-components-texteditor.svg?style=flat)](https://david-dm.org/ship-components/ship-components-texteditor?type=dev)

## Usage

### ES6/JSX (Recommended)
The component is written using ES6/JSX therefore Babel is recommended to use it. The below example is based on using [webpack](http://webpack.github.io/) and [babel-loader](https://github.com/babel/babel-loader).
```js
import React from 'react';
import TextEditor from 'ship-components-texteditor';

class Examples extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      basic: '<p>This is <b>some </b><u><b>sample</b></u> <i><b>text</b></i></p>'
    };

    this.handleChange = this.handleChange.bind(this);
  }

  <!-- Cause the text editor to update its internal state -->
  forceUpdateState() {
    return this.refs.editor.forceUpdateState();
  }

  handleChange(key, event) {
    this.setState({
      [key]: event.target.value
    });
  }

  render() {
    return (
      <div>
        <h1>{'<TextEditor /> Examples'}</h1>
        <div className='example-group'>
          <h2>Basic (HTML)</h2>
          <TextEditor
            ref='editor'
            editable
            type='html'
            inlineStyles={new Immutable.Set(['BOLD', 'UNDERLINE', 'ITALIC'])}
            onChange={this.handleChange.bind(this, 'basic')}
            value={this.state.basic}
          />
        </div>
      </div>
    );
  }
}

```

#### Note (Using forceUpdateState)
The function needs to be called in order to update the TextEditor internal state. Add the following code to the parent class to update TextEditor when the text value is changed. You may also need to implement the onFocus and / or onBlur methods to prevent the TextEditor from updating the internal state while user is typing which will cause double typing or cursur jumps around.
```js
forceUpdateState() {
    if (this.refs.editor && typeof this.refs.editor.forceUpdateState === 'function') {
      this.refs.editor.forceUpdateState();
    } else if (process.env.NODE_ENV !== 'production') {
      console.warn('this.refs.editor.forceUpdateState is not a function');
    }
  }

  ```

## Examples and Development
Examples can be found in the `examples/` folder. A development server can be run with:

```shell
$ npm install
$ npm start
```

This will live reload any changes you make and serve them at http://localhost:8080.

{'fraction_non_alphanumeric': 0.15141955835962145, 'fraction_numerical': 0.007051401002041195, 'mean_word_length': 3.4841930116472546, 'pattern_counts': {'":': 0, '<': 48, '<?xml version=': 0, '>': 48, 'https://': 18, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1708946', 'n_tokens_mistral': 1707, 'n_tokens_neox': 1624, 'n_words': 401}