<commit_before>/*
 * Copyright (c) 2016, Globo.com (https://github.com/globocom)
 *
 * License: MIT
 */

import React, {Component} from "react";
import {Editor, RichUtils} from "draft-js";

import Icons from "./icons";
import Toolbar from "./toolbar";
import {getSelectionRange, getSelectedBlockElement, getSelectionCoords} from "./utils";


export default class Megadraft extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toolbar: {show: false}
    };

    this.actions = [
      {type: "inline", label: "B", style: "BOLD", icon: Icons.BoldIcon},
      {type: "inline", label: "I", style: "ITALIC", icon: Icons.ItalicIcon},
      {type: "separator", label: null, style: null, icon: Icons.SeparatorIcon},
      {type: "block", label: "UL", style: "unordered-list-item", icon: Icons.ULIcon},
      {type: "block", label: "OL", style: "ordered-list-item", icon: Icons.OLIcon},
      {type: "block", label: "H2", style: "header-two", icon: Icons.H2Icon},
      {type: "block", label: "QT", style: "blockquote", icon: Icons.BlockQuoteIcon}
    ];
  }

  onChange(editorState) {
    if (!editorState.getSelection().isCollapsed()) {
      const selectionRange = getSelectionRange();
      const selectionCoords = getSelectionCoords(selectionRange);
      this.setState({
        toolbar: {
          show: true,
          position: {
            top: selectionCoords.offsetTop,
            left: selectionCoords.offsetLeft
          }
        }
      });
    } else {
      this.setState({toolbar: {show: false}});
    }

    const selectionRange = getSelectionRange();
    let selectedBlock;
    if (selectionRange) {
      selectedBlock = getSelectedBlockElement(selectionRange);
    }

    this.setState({selectedBlock, selectionRange});
    this.props.onChange(editorState);
  }

  handleKeyCommand(command) {
    const {editorState} = this.props;
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      this.props.onChange(newState);
      return true;
    }
    return false;
  }

  showToolbar(editorState) {
    if (this.state.toolbar.show) {
      return (
        <Toolbar
          editorState={editorState}
          onChange={::this.onChange}
          toolbar={this.state.toolbar}
          actions={this.actions}/>
      );
    } else {
      return null;
    }
  }

  render() {
    const {editorState} = this.props;
    return (
      <div className="megadraft"><commit_msg>Adds setimmediate handling to the toolbar mount<commit_after>/*
 * Copyright (c) 2016, Globo.com (https://github.com/globocom)
 *
 * License: MIT
 */

import React, {Component} from "react";
import {Editor, RichUtils} from "draft-js";

import Icons from "./icons";
import Toolbar from "./toolbar";
import {getSelectionRange, getSelectedBlockElement, getSelectionCoords} from "./utils";


export default class Megadraft extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toolbar: {show: false}
    };

    this.actions = [
      {type: "inline", label: "B", style: "BOLD", icon: Icons.BoldIcon},
      {type: "inline", label: "I", style: "ITALIC", icon: Icons.ItalicIcon},
      {type: "separator", label: null, style: null, icon: Icons.SeparatorIcon},
      {type: "block", label: "UL", style: "unordered-list-item", icon: Icons.ULIcon},
      {type: "block", label: "OL", style: "ordered-list-item", icon: Icons.OLIcon},
      {type: "block", label: "H2", style: "header-two", icon: Icons.H2Icon},
      {type: "block", label: "QT", style: "blockquote", icon: Icons.BlockQuoteIcon}
    ];
  }

  onChange(editorState) {

    const selectionRange = getSelectionRange();
    let selectedBlock;
    if (selectionRange) {
      selectedBlock = getSelectedBlockElement(selectionRange);
    }

    this.setState({selectedBlock, selectionRange});
    this.props.onChange(editorState);
  }

  setBarPosition() {
    if (!this.props.editorState.getSelection().isCollapsed()) {
      const selectionRange = getSelectionRange();
      const selectionCoords = getSelectionCoords(selectionRange);

      if (!this.state.toolbar.position ||
          this.state.toolbar.position.top !== selectionCoords.offsetTop ||
          this.state.toolbar.position.left !== selectionCoords.offsetLeft) {
        this.setState({
          toolbar: {
            show: true,
            position: {
              top: selectionCoords.offsetTop,
              left: selectionCoords.offsetLeft
            }
          }
        });
      }
    } else {
      if (this.state.toolbar.show) {
        this.setState({toolbar: {show: false}});
      }
    }
  }

  componentDidUpdate() {
    if (this.updatingPosition) {
      clearImmediate(this.updatingPosition);
    }
    this.updatingPosition = null ;
    this.updatingPosition = setImmediate(() => {
      return this.setBarPosition();
    });
  }

  handleKeyCommand(command) {
    const {editorState} = this.props;
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      this.props.onChange(newState);
      return true;
    }
    return false;
  }

  showToolbar(editorState) {
    if (this.state.toolbar.show) {
      return (
        <Toolbar
          editorState={editorState}
          onChange={::this.onChange}
          toolbar={this.state.toolbar}
          actions={this.actions}/>
      );
    } else {
      return null;
    }
  }

  render() {
    const {editorState} = this.props;
    return (
      <div className="megadraft">
{'fraction_non_alphanumeric': 0.14096276112624886, 'fraction_numerical': 0.0021798365122615805, 'mean_word_length': 2.823611111111111, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 8, 'https://': 2, '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': '1727721', 'n_tokens_mistral': 1693, 'n_tokens_neox': 1662, 'n_words': 362}