<commit_before>/* @flow */

import React, { Component } from 'react';
import {
  Editor,
  EditorState,
  CompositeDecorator,
} from 'draft-js';
import hashtagStrategy from './hashtagStrategy';
import Hashtag from './Hashtag';
import Sticker from './Sticker';
import styles from './styles';
import addSticker from './modifiers/addSticker';
import removeSticker from './modifiers/removeSticker';

const compositeDecorator = new CompositeDecorator([
  {
    strategy: hashtagStrategy,
    component: Hashtag,
  },
]);

type UnicornEditorState = {
  editorState: any,
}

export default class UnicornEditor extends Component {

  state: UnicornEditorState = {
    editorState: EditorState.createEmpty(compositeDecorator),
  };

  onChange: Function = (editorState: Object): void => {
    // console.log(editorState.toJS());
    this.setState({
      editorState,
    });
  };

  myBlockRenderer = (contentBlock) => {
    const type = contentBlock.getType();
    if (type === 'sticker') {
      return {
        component: Sticker,
        props: {
          onRemove: (blockKey) => {
            const newState = removeSticker(this.state.editorState, blockKey);
            this.setState({
              editorState: newState,
            });
          },
        },
      };
    }

    return undefined;
  };

  focus: Function = (): void => {
    this.refs.editor.focus();
  };

  logState: Function = (): void => {
    console.log(this.state.editorState.toJS()); // eslint-disable-line no-console
  };

  addSticker: Function = (): void => {
    // TODO fix selection for adding & remove

    const { editorState } = this.state;

    this.setState({
      editorState: addSticker(editorState),
    });
  };

  render() {
    return (
      <div style={styles.root}>
        <div style={styles.editor} onClick={this.focus}>
          <Editor
            blockRendererFn={this.myBlockRenderer}
            editorState={this.state.editorState}
            onChange={this.onChange}
            placeholder="I'm a Unicorn Input!"
            ref="editor"
            spellCheck
          />
        </div>
        <button
          onClick={this.addSticker}
          type="button"
        >
          Add a Unicorn
        </button>
        <input
          onClick={this.logState}
          style={styles.button}
          type="button"
          value="Log State"<commit_msg>remove logState button<commit_after>/* @flow */

import React, { Component } from 'react';
import {
  Editor,
  EditorState,
  CompositeDecorator,
} from 'draft-js';
import hashtagStrategy from './hashtagStrategy';
import Hashtag from './Hashtag';
import Sticker from './Sticker';
import styles from './styles';
import addSticker from './modifiers/addSticker';
import removeSticker from './modifiers/removeSticker';

const compositeDecorator = new CompositeDecorator([
  {
    strategy: hashtagStrategy,
    component: Hashtag,
  },
]);

type UnicornEditorState = {
  editorState: any,
}

export default class UnicornEditor extends Component {

  state: UnicornEditorState = {
    editorState: EditorState.createEmpty(compositeDecorator),
  };

  onChange: Function = (editorState: Object): void => {
    // console.log(editorState.toJS());
    this.setState({
      editorState,
    });
  };

  myBlockRenderer = (contentBlock) => {
    const type = contentBlock.getType();
    if (type === 'sticker') {
      return {
        component: Sticker,
        props: {
          onRemove: (blockKey) => {
            const newState = removeSticker(this.state.editorState, blockKey);
            this.setState({
              editorState: newState,
            });
          },
        },
      };
    }

    return undefined;
  };

  focus: Function = (): void => {
    this.refs.editor.focus();
  };

  addSticker: Function = (): void => {
    // TODO fix selection for adding & remove

    this.setState({
      editorState: addSticker(this.state.editorState),
    });
  };

  render() {
    return (
      <div style={styles.root}>
        <div style={styles.editor} onClick={this.focus}>
          <Editor
            blockRendererFn={this.myBlockRenderer}
            editorState={this.state.editorState}
            onChange={this.onChange}
            placeholder="I'm a Unicorn Input!"
            ref="editor"
            spellCheck
          />
        </div>
        <button
          onClick={this.addSticker}
          type="button"
        >
          Add a Unicorn
        </button>
        <input
          style={styles.button}
          type="button"
          value="Log State"
{'fraction_non_alphanumeric': 0.12817703768624014, 'fraction_numerical': 0.0, 'mean_word_length': 2.2818116462976277, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 26, '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': '2622172', 'n_tokens_mistral': 1326, 'n_tokens_neox': 1308, 'n_words': 283}