fix: upgrade richtext mention

package.json

@@ -150,7 +150,7 @@
   },
   "dependencies": {
     "@draft-js-plugins/editor": "^4.1.0",
-    "@draft-js-plugins/mention": "^4.6.1",
+    "@draft-js-plugins/mention": "^5.2.1",
     "@popperjs/core": "^2.4.0",
     "@types/draft-js": "^0.11.8",
     "@types/react-datepicker": "^4.3.4",

src/components/RichTextEditor/index.jsx

@@ -13,6 +13,7 @@ import MentionAction from './MentionAction';
 import FileUploadAction from './FileUploadAction';
 import MentionEntry from './MentionEntry';
 import FilePreviewList from './FilePreviewList';
+import Popover from '../Popover';
 import './styles.scss';
 
 const { EditorState, Modifier, convertToRaw, RichUtils } = draftJs;
@@ -52,9 +53,15 @@ const RichTextEditor = ({
         placement: 'bottom-start',
         strategy: 'fixed',
         modifiers: [
-          { name: 'flip', enabled: false },
+          { name: 'flip', enabled: true },
           { name: 'preventOverflow', enabled: false },
           { name: 'hide', enabled: false },
+          {
+            name: 'offset',
+            options: {
+              offset: [-12, 12],
+            },
+          },
         ],
       },
       theme: {
@@ -147,6 +154,18 @@ const RichTextEditor = ({
             suggestions={suggestions}
             onSearchChange={handleMentionSearchChange}
             entryComponent={MentionEntry}
+            popoverContainer={({ children, ...rest }) => {
+              const { popperOptions, store } = rest;
+              return (
+                <Popover.WithRef
+                  popoverClassNames="aui--mention"
+                  refElement={store.getReferenceElement()}
+                  {...popperOptions}
+                  popoverContent={children}
+                  isOpen={true}
+                />
+              );
+            }}
           />
         )}
       </div>

src/components/RichTextEditor/styles.scss

@@ -89,9 +89,18 @@
   }
 }
 
+.aui--mention {
+  .popover-content {
+    padding: 0;
+    overflow-y: auto;
+    max-height: 250px;
+  }
+}
+
 .aui--mention-entry {
   background-color: $color-white;
-  width: 350px;
+  width: auto;
+  min-width: 250px;
 
   &__is-focused {
     background: $color-blue-light;
@@ -103,7 +112,11 @@
     align-items: center;
 
     &__left {
-      margin: 5px 20px;
+      margin: 5px 10px 5px 20px;
+    }
+
+    &__right {
+      margin: 0 10px;
     }
 
     .mention-entry--title,