<commit_before>var React = require('react')
var django = require('django')

var ckGet = function (id) {
  return window.CKEDITOR.instances[id]
}

var ckReplace = function (id, config) {
  return window.CKEDITOR.replace(id, config)
}

var Paragraph = React.createClass({
  add: function () {
    this.props.addParagraphBeforeIndex(this.props.index)
  },
  delete: function () {
    this.props.deleteParagraph(this.props.index)
  },
  up: function () {
    this.props.moveParagraphUp(this.props.index)
  },
  down: function () {
    this.props.moveParagraphDown(this.props.index)
  },
  handleNameChange: function (e) {
    var index = this.props.index
    var text = e.target.value
    this.props.updateParagraphName(index, text)
  },
  ckEditorDestroy: function () {
    var id = 'id_paragraphs-' + this.props.id + '-text'
    var editor = ckGet(id)
    if (editor) {
      editor.destroy()
    }
  },
  ckEditorCreate: function () {
    var id = 'id_paragraphs-' + this.props.id + '-text'
    if (!ckGet(id)) {
      var editor = ckReplace(id, this.props.config)
      editor.on('change', function (e) {
        var text = e.editor.getData()
        var index = this.props.index
        this.props.updateParagraphText(index, text)
      }.bind(this))
      editor.setData(this.props.paragraph.text)
    }
  },
  componentWillUpdate: function (nextProps) {
    this.ckEditorDestroy()
  },
  componentDidUpdate: function (prevProps) {
    this.ckEditorCreate()
  },
  componentDidMount: function () {
    this.ckEditorCreate()
  },
  componentWillUnmount: function () {
    this.ckEditorCreate()
  },
  render: function () {
    var ckEditorToolbarsHeight = 60  // measured on example editor
    return (
      <div>
        <button
          className="button"
          onClick={this.add}
          type="button">
          <i className="fa fa-plus" /> {django.gettext('add a new paragraph')}
        </button>

        <div className="commenting-paragraph">
          <label
            htmlFor={'id_paragraphs-' + this.props.id + '-name'}>
            {django.gettext('Headline:')}
          </label>
          <input<commit_msg>only reload ckeditor if index increases<commit_after>var React = require('react')
var django = require('django')

var ckGet = function (id) {
  return window.CKEDITOR.instances[id]
}

var ckReplace = function (id, config) {
  return window.CKEDITOR.replace(id, config)
}

var Paragraph = React.createClass({
  add: function () {
    this.props.addParagraphBeforeIndex(this.props.index)
  },
  delete: function () {
    this.props.deleteParagraph(this.props.index)
  },
  up: function () {
    this.props.moveParagraphUp(this.props.index)
  },
  down: function () {
    this.props.moveParagraphDown(this.props.index)
  },
  handleNameChange: function (e) {
    var index = this.props.index
    var text = e.target.value
    this.props.updateParagraphName(index, text)
  },
  ckEditorDestroy: function () {
    var id = 'id_paragraphs-' + this.props.id + '-text'
    var editor = ckGet(id)
    if (editor) {
      editor.destroy()
    }
  },
  ckEditorCreate: function () {
    var id = 'id_paragraphs-' + this.props.id + '-text'
    if (!ckGet(id)) {
      var editor = ckReplace(id, this.props.config)
      editor.on('change', function (e) {
        var text = e.editor.getData()
        var index = this.props.index
        this.props.updateParagraphText(index, text)
      }.bind(this))
      editor.setData(this.props.paragraph.text)
    }
  },
  componentWillUpdate: function (nextProps) {
    if (nextProps.index > this.props.index) {
      this.ckEditorDestroy()
    }
  },
  componentDidUpdate: function (prevProps) {
    if (this.props.index > prevProps.index) {
      this.ckEditorCreate()
    }
  },
  componentDidMount: function () {
    this.ckEditorCreate()
  },
  componentWillUnmount: function () {
    this.ckEditorCreate()
  },
  render: function () {
    var ckEditorToolbarsHeight = 60  // measured on example editor
    return (
      <div>
        <button
          className="button"
          onClick={this.add}
          type="button">
          <i className="fa fa-plus" /> {django.gettext('add a new paragraph')}
        </button>

        <div className="commenting-paragraph">
          <label
            htmlFor={'id_paragraphs-' + this.props.id + '-name'}>
            {django.gettext('Headline:')}
          </label>
          <input
{'fraction_non_alphanumeric': 0.13960891314233742, 'fraction_numerical': 0.0009095043201455207, 'mean_word_length': 2.684254606365159, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, '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': '5610463', 'n_tokens_mistral': 1415, 'n_tokens_neox': 1399, 'n_words': 272}