diff --git a/demo/index.tsx b/demo/index.tsx
index 406cc7a3..07b40c79 100644
--- a/demo/index.tsx
+++ b/demo/index.tsx
@@ -4,42 +4,6 @@ import { render } from 'react-dom'
 
 import { MattersArticleEditor, MattersCommentEditor } from '../src'
 
-const demoMentionUsers = [
-  { id: v4(), displayName: 'user1', userName: 'user1' },
-  { id: v4(), displayName: 'user2', userName: 'user2' },
-]
-
-const DemoMentionList = ({
-  mentionLoading,
-  mentionSelection,
-  mentionUsers,
-}) => {
-  const style = {
-    width: '100%',
-    padding: '0.8rem 1rem',
-    textAlign: 'left' as const,
-  }
-
-  const handleMentionClick = (user: any) => mentionSelection(user)
-
-  return (
-    <>
-      {mentionUsers.map((user) => {
-        return (
-          <button
-            key={user.id}
-            type="button"
-            onClick={() => handleMentionClick(user)}
-            style={style}
-          >
-            {user.userName}
-          </button>
-        )
-      })}
-    </>
-  )
-}
-
 const App = () => {
   const eventName = 'demo-event'
 
@@ -65,11 +29,6 @@ const App = () => {
     return { id: v4(), path: source }
   }
 
-  const mentionKeywordChange = (keyword: string) => {
-    // TODO: add search mention user api
-    // here we use defined demoMentionUsers for demo.
-  }
-
   React.useEffect(() => {
     window.addEventListener(eventName, (data: any) => {
       // TODO: Process data and hook your notifier.
@@ -88,10 +47,6 @@ const App = () => {
         enableToolbar={true}
         eventName={eventName}
         language="zh_hant"
-        mentionLoading={false}
-        mentionKeywordChange={mentionKeywordChange}
-        mentionUsers={demoMentionUsers}
-        mentionListComponent={DemoMentionList}
         readOnly={false}
         theme="bubble"
         titleDefaultValue=""
@@ -103,10 +58,6 @@ const App = () => {
         editorUpdate={(params) => setCommentContent(params.content)}
         eventName={eventName}
         language="en"
-        mentionLoading={false}
-        mentionKeywordChange={mentionKeywordChange}
-        mentionUsers={demoMentionUsers}
-        mentionListComponent={DemoMentionList}
         readOnly={false}
         theme="bubble"
         texts={{
diff --git a/src/article.tsx b/src/article.tsx
index 11116c36..838ece58 100644
--- a/src/article.tsx
+++ b/src/article.tsx
@@ -3,7 +3,6 @@ import React from 'react'
 import ReactQuill, { Quill } from 'react-quill'
 
 import Util from './blots/Util'
-import MattersEditorMention from './components/Mention'
 import MattersEditorSummary from './components/Summary'
 import MattersEditorTitle from './components/Title'
 import MattersEditorToolbar from './components/Toolbar'
@@ -23,10 +22,6 @@ interface Props {
   enableToolbar?: boolean
   eventName: string
   language: Language
-  mentionLoading: boolean
-  mentionKeywordChange: (keyword: string) => void
-  mentionUsers: any
-  mentionListComponent: any
   readOnly: boolean
   summaryDefaultValue?: string
   summaryReadOnly?: boolean
@@ -41,7 +36,6 @@ interface Props {
 
 interface State {
   content: string
-  mentionInstance: any
   toolbarPosition: number
   toolbarVisible: boolean
 }
@@ -53,13 +47,11 @@ export class MattersArticleEditor extends React.Component<Props, State> {
   private baseConfig: Record<string, any> = {}
 
   private editorReference = React.createRef<ReactQuill>()
-  private mentionReference = React.createRef<HTMLElement>()
 
   constructor(props: Props) {
     super(props)
     this.state = {
       content: this.props.editorContent,
-      mentionInstance: null,
       toolbarPosition: 0,
       toolbarVisible: false,
     }
@@ -179,18 +171,6 @@ export class MattersArticleEditor extends React.Component<Props, State> {
   handleImageDrop = async (file: any): Promise<ResultData> =>
     this.props.editorUpload({ file })
 
-  handleMentionChange = (keyword: string) => {
-    this.props.mentionKeywordChange(keyword)
-  }
-
-  handleMentionSelection = ({ id, userName, displayName }) => {
-    this.state.mentionInstance.insertMention({
-      id,
-      displayName,
-      userName,
-    })
-  }
-
   eventDispatcher = (event: string, data: any) => {
     if (this.props.eventName && window) {
       window.dispatchEvent(new CustomEvent(event, { detail: { ...data } }))
@@ -212,9 +192,6 @@ export class MattersArticleEditor extends React.Component<Props, State> {
     }
   }
 
-  storeMentionInstance = (instance: any) =>
-    this.setState({ mentionInstance: instance })
-
   render() {
     const classes = this.props.readOnly ? 'u-area-disable' : ''
 
@@ -226,12 +203,6 @@ export class MattersArticleEditor extends React.Component<Props, State> {
         handleImageDrop: this.handleImageDrop,
         texts: this.texts,
       },
-      mention: {
-        mentionContainer:
-          this.mentionReference && this.mentionReference.current,
-        handleMentionChange: this.handleMentionChange,
-        storeMentionInstance: this.storeMentionInstance,
-      },
     }
 
     if (this.props.enableReviseMode) {
@@ -281,13 +252,6 @@ export class MattersArticleEditor extends React.Component<Props, State> {
             uploadAudioSizeLimit={this.props.uploadAudioSizeLimit}
             uploadImageSizeLimit={this.props.uploadImageSizeLimit}
           />
-          <MattersEditorMention
-            mentionLoading={this.props.mentionLoading}
-            mentionListComponent={this.props.mentionListComponent}
-            mentionSelection={this.handleMentionSelection}
-            mentionUsers={this.props.mentionUsers}
-            reference={this.mentionReference}
-          />
         </div>
       </>
     )
diff --git a/src/comment.tsx b/src/comment.tsx
index 0e3eeec1..4836f5e4 100644
--- a/src/comment.tsx
+++ b/src/comment.tsx
@@ -2,7 +2,6 @@ import _debounce from 'lodash/debounce'
 import React from 'react'
 import ReactQuill, { Quill } from 'react-quill'
 
-import MattersEditorMention from './components/Mention'
 import { FORMAT_CONFIG, MODULE_CONFIG } from './configs/comment'
 import { DEBOUNCE_DELAY, LANGUAGE } from './enums/common'
 import { TEXT, Texts } from './enums/text'
@@ -13,10 +12,6 @@ interface Props {
   editorUpdate: (params: Params) => void
   eventName: string
   language: Language
-  mentionLoading: boolean
-  mentionKeywordChange: (keyword: string) => void
-  mentionUsers: any
-  mentionListComponent: any
   readOnly: boolean
   theme: string
   texts?: Texts
@@ -25,20 +20,17 @@ interface Props {
 
 interface State {
   content: string
-  mentionInstance: any
 }
 
 export class MattersCommentEditor extends React.Component<Props, State> {
   private instance: Quill | null = null
   private editorReference = React.createRef<ReactQuill>()
-  private mentionReference = React.createRef<HTMLElement>()
   private texts: Texts = null
 
   constructor(props: Props) {
     super(props)
     this.state = {
       content: this.props.editorContent,
-      mentionInstance: null,
     }
 
     this.texts = {
@@ -71,18 +63,6 @@ export class MattersCommentEditor extends React.Component<Props, State> {
     })
   }
 
-  handleMentionChange = (keyword: string) => {
-    this.props.mentionKeywordChange(keyword)
-  }
-
-  handleMentionSelection = ({ id, userName, displayName }) => {
-    this.state.mentionInstance.insertMention({
-      id,
-      displayName,
-      userName,
-    })
-  }
-
   eventDispatcher = (event: string, data: any) => {
     if (this.props.eventName && window) {
       window.dispatchEvent(new CustomEvent(event, { detail: { ...data } }))
@@ -105,18 +85,9 @@ export class MattersCommentEditor extends React.Component<Props, State> {
     }
   }
 
-  storeMentionInstance = (instance: any) =>
-    this.setState({ mentionInstance: instance })
-
   render() {
     const modulesConfig = {
       ...MODULE_CONFIG,
-      mention: {
-        mentionContainer:
-          this.mentionReference && this.mentionReference.current,
-        handleMentionChange: this.handleMentionChange,
-        storeMentionInstance: this.storeMentionInstance,
-      },
     }
 
     return (
@@ -134,14 +105,6 @@ export class MattersCommentEditor extends React.Component<Props, State> {
             bounds="#editor-comment-container"
             scrollingContainer={this.props.scrollingContainer}
           />
-
-          <MattersEditorMention
-            mentionLoading={this.props.mentionLoading}
-            mentionListComponent={this.props.mentionListComponent}
-            mentionSelection={this.handleMentionSelection}
-            mentionUsers={this.props.mentionUsers}
-            reference={this.mentionReference}
-          />
         </div>
       </>
     )
diff --git a/src/components/Mention/index.tsx b/src/components/Mention/index.tsx
deleted file mode 100644
index 1e9b4060..00000000
--- a/src/components/Mention/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react'
-
-import SVGSpinner from '../../icons/Spinner'
-
-/**
- * This component is a mention list container which will be visible when typing `@`.
- *
- * Usage:
- *   <MattersEditorMention
- *     mentionLoading={false}
- *     mentionListComponent={() => (<div></div>)}
- *     mentionUsers={[]}
- *     reference={}
- *   />
- */
-
-interface Props {
-  mentionLoading: boolean
-  mentionListComponent: any
-  mentionSelection: any
-  mentionUsers: any[]
-  reference: React.RefObject<HTMLElement>
-}
-
-export default ({
-  mentionLoading,
-  mentionListComponent,
-  mentionSelection,
-  mentionUsers,
-  reference,
-}: Props) => {
-  const hasMention = mentionUsers.length <= 0 && !mentionLoading
-
-  return (
-    <section className="mention-container" ref={reference}>
-      {hasMention
-        ? null
-        : mentionListComponent({
-            mentionLoading,
-            mentionSelection,
-            mentionUsers,
-          })}
-    </section>
-  )
-}