<commit_before>import React from 'react';
import Markdown from '../components/Markdown';

// Taken from `react-contenteditable` module

export default class ContentEditable extends React.Component {
  constructor(props) {
    super();
    this.emitChange = this.emitChange.bind(this);
    this.lastHtml = props.html;
  }

  render() {
    const { disabled, format, className, tagName, ...props } = this.props;

    if (format === 'markdown' && disabled) {
      return (<Markdown {...this.props} value={html} />);
    }

    const html = this.props.html || '';

    return React.createElement(
      tagName || 'div',
      {
        ...props,
        className: `ContentEditable ${!disabled ? 'ContentEditable--enabled' : ''} ${className}`,
        ref: (e) => this.htmlEl = e,
        onInput: this.emitChange,
        onBlur: this.props.onBlur || this.emitChange,
        contentEditable: !disabled,
        dangerouslySetInnerHTML: {__html: html.replace(/\n/g, '<br />\n')}
      },
      this.props.children);
  }

  shouldComponentUpdate(nextProps) {
    // We need not rerender if the change of props simply reflects the user's
    // edits. Rerendering in this case would make the cursor/caret jump.
    return (
      // Rerender if there is no element yet... (somehow?)
      !this.htmlEl
      // ...or if html really changed... (programmatically, not by user edit)
      || ( nextProps.html !== this.htmlEl.innerHTML
        && nextProps.html !== this.props.html )
      // ...or if editing is enabled or disabled.
      || this.props.disabled !== nextProps.disabled
    );
  }

  componentDidUpdate() {
    const { 
      html = ''
    } = this.props;

    if ( this.htmlEl && html !== this.htmlEl.innerHTML ) {
      // Perhaps React (whose VDOM gets outdated because we often prevent
      // rerendering) did not update the DOM. So we update it manually now.
      this.htmlEl.innerHTML = html.replace(/\n/g,'<br />\n');
    }
  }

  emitChange(evt) {
    if (!this.htmlEl) return;
    const html = this.htmlEl.innerHTML;
    if (this.props.onChange && html !== this.lastHtml) {
      evt.target = { value: html };
      this.props.onChange(evt);
    }
    this.lastHtml = html;
  }
}<commit_msg>Fix for long description that disappeared (#480)<commit_after>import React from 'react';
import Markdown from '../components/Markdown';

// Taken from `react-contenteditable` module

export default class ContentEditable extends React.Component {
  constructor(props) {
    super();
    this.emitChange = this.emitChange.bind(this);
    this.lastHtml = props.html;
  }

  render() {
    const { disabled, format, className, tagName, ...props } = this.props;

    const html = this.props.html || '';

    if (format === 'markdown' && disabled) {
      return (<Markdown {...this.props} value={html} />);
    }

    return React.createElement(
      tagName || 'div',
      {
        ...props,
        className: `ContentEditable ${!disabled ? 'ContentEditable--enabled' : ''} ${className}`,
        ref: (e) => this.htmlEl = e,
        onInput: this.emitChange,
        onBlur: this.props.onBlur || this.emitChange,
        contentEditable: !disabled,
        dangerouslySetInnerHTML: {__html: html.replace(/\n/g, '<br />\n')}
      },
      this.props.children);
  }

  shouldComponentUpdate(nextProps) {
    // We need not rerender if the change of props simply reflects the user's
    // edits. Rerendering in this case would make the cursor/caret jump.
    return (
      // Rerender if there is no element yet... (somehow?)
      !this.htmlEl
      // ...or if html really changed... (programmatically, not by user edit)
      || ( nextProps.html !== this.htmlEl.innerHTML
        && nextProps.html !== this.props.html )
      // ...or if editing is enabled or disabled.
      || this.props.disabled !== nextProps.disabled
    );
  }

  componentDidUpdate() {
    const { 
      html = ''
    } = this.props;

    if ( this.htmlEl && html !== this.htmlEl.innerHTML ) {
      // Perhaps React (whose VDOM gets outdated because we often prevent
      // rerendering) did not update the DOM. So we update it manually now.
      this.htmlEl.innerHTML = html.replace(/\n/g,'<br />\n');
    }
  }

  emitChange(evt) {
    if (!this.htmlEl) return;
    const html = this.htmlEl.innerHTML;
    if (this.props.onChange && html !== this.lastHtml) {
      evt.target = { value: html };
      this.props.onChange(evt);
    }
    this.lastHtml = html;
  }
}
{'fraction_non_alphanumeric': 0.14420273603947073, 'fraction_numerical': 0.0006727965911639381, 'mean_word_length': 2.481654957064793, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 11, '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': '2482182', 'n_tokens_mistral': 1372, 'n_tokens_neox': 1332, 'n_words': 360}