<commit_before>import React from 'react'
import withClickOutside from 'react-click-outside'
import dynamic from 'next/dynamic'

import MarkDownRender from 'components/MarkDownRender'
import { debounce } from 'utils'
import ReplyToBar from './ReplyToBar'
import ReplyEditorHeader from './ReplyEditorHeader'

import {
  Wrapper,
  InputEditorWrapper,
  PreviewWrapper,
} from './styles/comment_reply_editor'

import EditorFooter from './EditorFooter'

import * as logic from './logic'

const DynamicBodyEditor = dynamic({
  loader: () => import('components/MarkdownEditor'),
  /* eslint-disable */
  loading: () => <div>loading</div>,
  /* eslint-enable */
})

class CommentReplyEditor extends React.Component {
  /* eslint-disable */
  handleClickOutside() {
    logic.closeReplyBox()
    logic.onCommentInputBlur()
  }
  /* eslint-enable */

  render() {
    const {
      referUsers,
      show,
      isEdit,
      accountInfo,
      showReplyPreview,
      mentionList,
      restProps: { countCurrent, replyContent, replyToComment, replying },
    } = this.props

    return (
      <Wrapper>
        <ReplyEditorHeader
          accountInfo={accountInfo}
          countCurrent={countCurrent}
          referUsers={referUsers}
          showPreview={showReplyPreview}
        />

        {!isEdit && <ReplyToBar comment={replyToComment} />}

        {show ? (
          <div className="comment-reply-editor">
            <InputEditorWrapper>
              <DynamicBodyEditor
                mentionList={mentionList}
                onChange={debounce(logic.onReplyInputChange, 450)}
                onMention={logic.onMention}
                body={replyContent}
              />
            </InputEditorWrapper>
          </div>
        ) : (
          <PreviewWrapper>
            <MarkDownRender body={replyContent} />
          </PreviewWrapper>
        )}
        <EditorFooter
          loading={replying}
          showPreview={showReplyPreview}
          onCreate={logic.createReplyComment}
          onBackEdit={logic.replyBackToEditor}
          onPreview={logic.replyCommentPreview}
        />
      </Wrapper>
    )
  }
}

export default withClickOutside(CommentReplyEditor)
<commit_msg>fix(comments): missing mention UX in update/replyer<commit_after>import React from 'react'
import withClickOutside from 'react-click-outside'
import dynamic from 'next/dynamic'

import MarkDownRender from 'components/MarkDownRender'
import { debounce } from 'utils'
import ReplyToBar from './ReplyToBar'
import ReplyEditorHeader from './ReplyEditorHeader'

import {
  Wrapper,
  InputEditorWrapper,
  PreviewWrapper,
} from './styles/comment_reply_editor'

import EditorFooter from './EditorFooter'

import * as logic from './logic'

const DynamicBodyEditor = dynamic({
  loader: () => import('components/MarkdownEditor'),
  /* eslint-disable */
  loading: () => <div>loading</div>,
  /* eslint-enable */
})

class CommentReplyEditor extends React.Component {
  /* eslint-disable */
  handleClickOutside() {
    logic.closeReplyBox()
    logic.onCommentInputBlur()
  }
  /* eslint-enable */

  render() {
    const {
      referUsers,
      show,
      isEdit,
      accountInfo,
      showReplyPreview,
      mentionList,
      restProps: { countCurrent, replyContent, replyToComment, replying },
    } = this.props

    return (
      <Wrapper>
        <ReplyEditorHeader
          accountInfo={accountInfo}
          countCurrent={countCurrent}
          referUsers={referUsers}
          showPreview={showReplyPreview}
        />

        {!isEdit && <ReplyToBar comment={replyToComment} />}

        {show ? (
          <div className="comment-reply-editor">
            <InputEditorWrapper>
              <DynamicBodyEditor
                mentionList={mentionList}
                onChange={debounce(logic.onReplyInputChange, 450)}
                onMention={logic.onMention}
                onMentionSearch={logic.onMentionSearch}
                body={replyContent}
              />
            </InputEditorWrapper>
          </div>
        ) : (
          <PreviewWrapper>
            <MarkDownRender body={replyContent} />
          </PreviewWrapper>
        )}
        <EditorFooter
          loading={replying}
          showPreview={showReplyPreview}
          onCreate={logic.createReplyComment}
          onBackEdit={logic.replyBackToEditor}
          onPreview={logic.replyCommentPreview}
        />
      </Wrapper>
    )
  }
}

export default withClickOutside(CommentReplyEditor)

{'fraction_non_alphanumeric': 0.10696848646249445, 'fraction_numerical': 0.0013315579227696406, 'mean_word_length': 2.448355011476664, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 37, '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': '7379182', 'n_tokens_mistral': 1259, 'n_tokens_neox': 1212, 'n_words': 228}