<commit_before>import React, { Component } from 'react';
import { action } from '@kadira/storybook';
import { DraftJSEditor, Renderer, defaultBlocks } from '../../src';

const draftRenderer = new Renderer(defaultBlocks);

class SetStateExample extends Component {
  state = {
    content: {
      entityMap: {},
      blocks: [
        {
          text: '',
          type: 'unstyled',
          depth: 0,
          inlineStyleRanges: [],
          entityRanges: [],
        },
      ],
    },
  };

  onChange = content => {
    action('onChange')(content); // Log to storybook's "action-logger"
    this.setState({ content });
  };

  render() {
    return (
      <div>
        <h1>@synapsestudios/draftjs-editor</h1>
        <p className="p text-center">
          A customized WYSIWYG editor utilizing Facebook's Draft.js library
        </p>
        <p className="p text-center">
          View this project on
          {' '}
          <a href="https://github.com/synapsestudios/draftjs-editor" target="_blank">Github</a>
        </p>
        <DraftJSEditor
          content={this.state.content || null}
          onChange={this.onChange}
          placeholder="Tell a story..."
          customBlocks={defaultBlocks}
          customBlockControls={Object.keys(defaultBlocks)}
        />
        {this.state.content<commit_msg>Fix red highlighting in GitHub diff<commit_after>import React, { Component } from 'react';
import { action } from '@kadira/storybook';
import { DraftJSEditor, Renderer, defaultBlocks } from '../../src';

const draftRenderer = new Renderer(defaultBlocks);

class SetStateExample extends Component {
  state = {
    content: {
      entityMap: {},
      blocks: [
        {
          text: '',
          type: 'unstyled',
          depth: 0,
          inlineStyleRanges: [],
          entityRanges: [],
        },
      ],
    },
  };

  onChange = content => {
    action('onChange')(content); // Log to storybook's "action-logger"
    this.setState({ content });
  };

  render() {
    return (
      <div>
        <h1>@synapsestudios/draftjs-editor</h1>
        <p className="p text-center">
          {`A customized WYSIWYG editor utilizing Facebook's Draft.js library`}
        </p>
        <p className="p text-center">
          View this project on
          {' '}
          <a href="https://github.com/synapsestudios/draftjs-editor" target="_blank">Github</a>
        </p>
        <DraftJSEditor
          content={this.state.content || null}
          onChange={this.onChange}
          placeholder="Tell a story..."
          customBlocks={defaultBlocks}
          customBlockControls={Object.keys(defaultBlocks)}
        />
        {this.state.content
{'fraction_non_alphanumeric': 0.13798219584569732, 'fraction_numerical': 0.002225519287833828, 'mean_word_length': 2.1433566433566433, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 25, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, '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': '7374609', 'n_tokens_mistral': 788, 'n_tokens_neox': 779, 'n_words': 164}