<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TwemojiComp from 'react-twemoji';
import Twemoji from 'twemoji';
import EmojiPicker from '../emoji_picker/emoji_picker';

function replaceAll(string, search, replacement) {
  return string.replace(new RegExp(search, 'g'), replacement);
}

class ContentEditable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pickerActive: false,
      content: '',
      previewContent: '',
      pickerStyle: {
        bottom: '5px',
        right: '0px',
      },
    };
  }
  shouldComponentUpdate() {
    return true;
  }
  onChange(value, caretOffset = 0) {
    this.setState({ content: value });
    let content = value;
    let caretPos = 0;
    if (this.textarea) {
      caretPos = this.textarea.selectionStart;
    }
    content = ContentEditable.moveCaret(content, caretPos + caretOffset);
    content = content.replace(/(?:\r\n|\r|\n)/g, '<br />');
    content = content.replace(/(?:\r\n|\r|\n)/g, '<br />');
    this.setState({ previewContent: content });
  }
  static moveCaret(content, caretPos) {
    return `${content.slice(0, caretPos)}<span id="cursor">|</span>${content.slice(caretPos)}`;
  }
  getContent() {
    let content = this.state.content;
    let caretPos = 0;
    if (this.textarea) {
      caretPos = this.textarea.selectionStart;
    }
    content = ContentEditable.moveCaret(content, caretPos);
    content = content.replace(/(?:\r\n|\r|\n)/g, '<br />');
    return Twemoji.parse(content);
  }
  ontextareaClick() {
    let content = this.state.content;
    let caretPos = 0;
    if (this.textarea) {
      caretPos = this.textarea.selectionStart;
    }
    content = ContentEditable.moveCaret(content, caretPos);
    this.setState({ previewContent: content });
  }
  keyDown(e) {
    let caretPos = 0;
    if (this.textarea) {
      caretPos = this.textarea.selectionStart;
    }

    const preText = this.textarea.value.substring(0, caretPos).split(' ').pop();
    if (preText.indexOf(':') > -1) {
      const word = preText.split(':').pop();
      console.log(word); // this is the emoji
    }

    if (e.keyCode === 37 || e.keyCode === 39) {
      this.ontextareaClick();
    }
  }
  toggleEmojiPicker() {
    const emojiTrigger = this.node;
    const triggerStyles = getComputedStyle(emojiTrigger);
    const bottom = `${parseInt(triggerStyles.bottom, 10) + emojiTrigger.clientHeight + 10}px`;
    this.setState({
      pickerActive: !this.state.pickerActive,
      pickerStyle: {
        bottom,<commit_msg>Added @mention syntax<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TwemojiComp from 'react-twemoji';
import Twemoji from 'twemoji';
import EmojiPicker from '../emoji_picker/emoji_picker';

function replaceAll(string, search, replacement) {
  return string.replace(new RegExp(search, 'g'), replacement);
}

class ContentEditable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pickerActive: false,
      content: '',
      previewContent: '',
      pickerStyle: {
        bottom: '5px',
        right: '0px',
      },
    };
  }
  shouldComponentUpdate() {
    return true;
  }
  onChange(value, caretOffset = 0) {
    this.setState({ content: value });
    let content = value;
    let caretPos = 0;
    if (this.textarea) {
      caretPos = this.textarea.selectionStart;
    }
    content = ContentEditable.moveCaret(content, caretPos + caretOffset);
    content = content.replace(/(?:\r\n|\r|\n)/g, '<br />');
    content = content.replace(/(?:\r\n|\r|\n)/g, '<br />');
    this.setState({ previewContent: content });
  }
  static moveCaret(content, caretPos) {
    return `${content.slice(0, caretPos)}<span id="cursor">|</span>${content.slice(caretPos)}`;
  }
  getContent() {
    let content = this.state.content;
    let caretPos = 0;
    if (this.textarea) {
      caretPos = this.textarea.selectionStart;
    }
    content = ContentEditable.moveCaret(content, caretPos);
    content = content.replace(/(?:\r\n|\r|\n)/g, '<br />');
    return Twemoji.parse(content);
  }
  ontextareaClick() {
    let content = this.state.content;
    let caretPos = 0;
    if (this.textarea) {
      caretPos = this.textarea.selectionStart;
    }
    content = ContentEditable.moveCaret(content, caretPos);
    this.setState({ previewContent: content });
  }
  keyDown(e) {
    let caretPos = 0;
    if (this.textarea) {
      caretPos = this.textarea.selectionStart;
    }

    const preText = this.textarea.value.substring(0, caretPos).split(' ').pop();
    if (preText.indexOf(':') > -1) {
      const word = preText.split(':').pop();
      console.log(word); // this is the emoji
    } else if (preText.indexOf('@') > -1) {
      const word = preText.split('@').pop();
      console.log(word); // this is the user to tag
    }

    if (e.keyCode === 37 || e.keyCode === 39) {
      this.ontextareaClick();
    }
  }
  toggleEmojiPicker() {
    const emojiTrigger = this.node;
    const triggerStyles = getComputedStyle(emojiTrigger);
    const bottom = `${parseInt(triggerStyles.bottom, 10) + emojiTrigger.clientHeight + 10}px`;
    this.setState({
      pickerActive: !this.state.pickerActive,
      pickerStyle: {
        bottom,
{'fraction_non_alphanumeric': 0.1555345316934721, 'fraction_numerical': 0.007000946073793756, 'mean_word_length': 3.0881670533642693, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 16, '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': '10245', 'n_tokens_mistral': 1762, 'n_tokens_neox': 1715, 'n_words': 353}