feat(reply): Restore @mentions entities from plain text

package.json

@@ -22,7 +22,7 @@
         "@reduxjs/toolkit": "^1.3.5",
         "@types/react-redux": "^7.1.7",
         "axios": "^0.19.2",
-        "box-ui-elements": "^12.0.0-beta.73",
+        "box-ui-elements": "^12.0.0-beta.77",
         "classnames": "^2.2.5",
         "draft-js": "0.10.5",
         "lodash": "^4.17.15",

src/components/Popups/ReplyField/ReplyField.tsx

@@ -2,10 +2,12 @@ import * as React from 'react';
 import classnames from 'classnames';
 import {
     addMention,
+    createMentionSelectorState,
     getActiveMentionForEditorState,
+    getFormattedCommentText,
 } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector';
 import fuzzySearch from 'box-ui-elements/es/utils/fuzzySearch';
-import { ContentState, DraftHandleValue, Editor, EditorState, SelectionState } from 'draft-js';
+import { DraftHandleValue, Editor, EditorState, SelectionState } from 'draft-js';
 import PopupList from './PopupList';
 import withMentionDecorator from './withMentionDecorator';
 import { Collaborator } from '../../../@types';
@@ -140,7 +142,7 @@ export default class ReplyField extends React.Component<Props, State> {
     handleChange = (nextEditorState: EditorState): void => {
         const { onChange } = this.props;
 
-        onChange(nextEditorState.getCurrentContent().getPlainText());
+        onChange(getFormattedCommentText(nextEditorState).text);
 
         // In order to get correct selection, getVirtualElement in this.updatePopupReference
         // has to be called after new texts are rendered in editor
@@ -208,8 +210,7 @@ export default class ReplyField extends React.Component<Props, State> {
 
     restoreEditor(): EditorState {
         const { cursorPosition: prevCursorPosition, value } = this.props;
-        const contentState = ContentState.createFromText(value as string);
-        const prevEditorState = withMentionDecorator(EditorState.createWithContent(contentState));
+        const prevEditorState = withMentionDecorator(createMentionSelectorState(value));
         const cursorPosition = value ? prevCursorPosition : 0;
 
         return EditorState.forceSelection(

src/components/Popups/ReplyField/__tests__/ReplyField-test.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
-import { getActiveMentionForEditorState } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector';
+import {
+    createMentionSelectorState,
+    getActiveMentionForEditorState,
+} from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector';
 import { shallow, ShallowWrapper } from 'enzyme';
-import { Editor, EditorState } from 'draft-js';
+import { ContentState, Editor, EditorState } from 'draft-js';
 import PopupList from '../PopupList';
 import ReplyField, { Props, State } from '../ReplyField';
 import { VirtualElement } from '../../Popper';
@@ -14,14 +17,13 @@ const mockMention = {
     start: 0,
 };
 
-const mockEditorState = ({
-    getCurrentContent: () => ({ getPlainText: () => 'test' }),
-    getSelection: () => ({ getFocusOffset: () => 0 }),
-} as unknown) as EditorState;
+const mockEditorState = EditorState.createEmpty();
 
 jest.mock('box-ui-elements/es/components/form-elements/draft-js-mention-selector', () => ({
     addMention: jest.fn(() => mockEditorState),
+    createMentionSelectorState: jest.fn(() => mockEditorState),
     getActiveMentionForEditorState: jest.fn(() => mockMention),
+    getFormattedCommentText: jest.fn(() => ({ hasMention: false, text: 'test' })),
 }));
 
 describe('components/Popups/ReplyField', () => {
@@ -42,39 +44,6 @@ describe('components/Popups/ReplyField', () => {
     const getWrapper = (props = {}): ShallowWrapper<Props, State, ReplyField> =>
         shallow(<ReplyField {...defaults} {...props} />);
 
-    describe('restoreEditor()', () => {
-        test('should restore value and cursor position', () => {
-            const wrapper = getWrapper({ cursorPosition: 1, value: 'test' });
-
-            const editorState = wrapper.instance().restoreEditor();
-
-            expect(editorState.getCurrentContent().getPlainText()).toEqual('test');
-            expect(editorState.getSelection().getFocusOffset()).toEqual(1);
-        });
-
-        test('should reset cursor position if value is empty', () => {
-            const wrapper = getWrapper({ cursorPosition: 1 });
-            const editorState = wrapper.instance().restoreEditor();
-
-            expect(editorState.getSelection().getFocusOffset()).toEqual(0);
-        });
-    });
-
-    describe('render()', () => {
-        test('should render the editor with right props', () => {
-            const wrapper = getWrapper();
-
-            expect(wrapper.prop('className')).toBe('ba-Popup-field ba-ReplyField');
-        });
-
-        test('should render PopupList if popupreference is not null', () => {
-            const wrapper = getWrapper();
-            wrapper.setState({ popupReference: document.createElement('div') });
-
-            expect(wrapper.exists(PopupList)).toBe(true);
-        });
-    });
-
     describe('event handlers', () => {
         test('should handle the editor change event', () => {
             const wrapper = getWrapper();
@@ -348,4 +317,43 @@ describe('components/Popups/ReplyField', () => {
             expect(setActiveItemSpy).toBeCalledWith(0);
         });
     });
+
+    describe('restoreEditor()', () => {
+        test('should restore value and cursor position', () => {
+            const wrapper = getWrapper({ cursorPosition: 1, value: 'test' });
+
+            createMentionSelectorState.mockImplementationOnce((value: string) =>
+                EditorState.createWithContent(ContentState.createFromText(value)),
+            );
+            const editorState = wrapper.instance().restoreEditor();
+
+            expect(editorState.getCurrentContent().getPlainText()).toEqual('test');
+            expect(editorState.getSelection().getFocusOffset()).toEqual(1);
+        });
+
+        test('should reset cursor position if value is empty', () => {
+            const wrapper = getWrapper({ cursorPosition: 1 });
+
+            const editorState = wrapper.instance().restoreEditor();
+
+            expect(editorState.getSelection().getFocusOffset()).toEqual(0);
+        });
+    });
+
+    describe('render()', () => {
+        test('should render the editor with right props', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.prop('className')).toBe('ba-Popup-field ba-ReplyField');
+        });
+
+        test('should render PopupList if popupreference is not null', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.exists(PopupList)).toBe(false);
+
+            wrapper.setState({ popupReference: document.createElement('div') });
+            expect(wrapper.exists(PopupList)).toBe(true);
+        });
+    });
 });

yarn.lock

@@ -2968,10 +2968,10 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-box-ui-elements@^12.0.0-beta.73:
-  version "12.0.0-beta.73"
-  resolved "https://registry.yarnpkg.com/box-ui-elements/-/box-ui-elements-12.0.0-beta.73.tgz#2081ecce9276c9123a11f9ab4109af52ba1e1575"
-  integrity sha512-Jw8VnPtEYu/1kzhDo7YHwWTYxiMu+4ff0uay7v2q1cX2zIGQo11cwyCrmfv6v1aYsfBDJeZjq4SklpmErDgRdA==
+box-ui-elements@^12.0.0-beta.77:
+  version "12.0.0-beta.77"
+  resolved "https://registry.yarnpkg.com/box-ui-elements/-/box-ui-elements-12.0.0-beta.77.tgz#bdddab73a30f60d555b671b46a0d0402b4a3d24b"
+  integrity sha512-msxjvfQS2iMfafd7B+8C4cSdefjzseKPTOdR7JQTIg7Trg3fq2BUq+7TyhMJ45U/XUkUweB/AZjClH+2MRayzw==
 
 brace-expansion@^1.1.7:
   version "1.1.11"