Merge pull request #3010 from glific/lexical-update

Updated version of lexical packages

package.json

@@ -18,7 +18,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@glific/flow-editor": "^1.26.3-10",
-    "@lexical/react": "^0.13.1",
+    "@lexical/react": "^0.17.0",
     "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.15.20",
     "@mui/x-date-pickers": "^7.7.0",
@@ -40,8 +40,8 @@
     "i18next-browser-languagedetector": "^8.0.0",
     "interweave": "^13.1.0",
     "interweave-autolink": "^5.1.1",
-    "lexical": "^0.13.1",
-    "lexical-beautiful-mentions": "^0.1.35",
+    "lexical": "^0.17.0",
+    "lexical-beautiful-mentions": "^0.1.38",
     "pino": "^9.2.0",
     "pino-logflare": "^0.4.2",
     "react": "^18.3.1",

src/components/UI/Form/EmojiInput/Editor.test.tsx

@@ -13,6 +13,16 @@ const handleChange = vi.fn();
 
 (window as any).IntersectionObserver = mockIntersectionObserver;
 
+vi.mock('lexical-beautiful-mentions', async (importOriginal) => {
+  const actual = (await importOriginal()) as typeof import('lexical-beautiful-mentions');
+  return {
+    ...actual,
+    BeautifulMentionsPlugin: ({ children }: any) => <div>{children}</div>,
+    BeautifulMentionsMenuProps: {},
+    BeautifulMentionsMenuItemProps: {},
+  };
+});
+
 const wrapper = (
   <LexicalWrapper>
     <Editor

src/components/UI/Form/EmojiInput/EmojiInput.test.tsx

@@ -15,6 +15,16 @@ const mockIntersectionObserver = class {
 
 (window as any).IntersectionObserver = mockIntersectionObserver;
 
+vi.mock('lexical-beautiful-mentions', async (importOriginal) => {
+  const actual = (await importOriginal()) as typeof import('lexical-beautiful-mentions');
+  return {
+    ...actual,
+    BeautifulMentionsPlugin: ({ children }: any) => <div>{children}</div>,
+    BeautifulMentionsMenuProps: {},
+    BeautifulMentionsMenuItemProps: {},
+  };
+});
+
 const wrapper = (
   <LexicalWrapper>
     <EmojiInput

src/containers/InteractiveMessage/InteractiveMessage.test.tsx

@@ -82,6 +82,16 @@ vi.mock('components/UI/EmojiPicker/EmojiPicker', async (importOriginal) => {
   };
 });
 
+vi.mock('lexical-beautiful-mentions', async (importOriginal) => {
+  const actual = (await importOriginal()) as typeof import('lexical-beautiful-mentions');
+  return {
+    ...actual,
+    BeautifulMentionsPlugin: ({ children }: any) => <div>{children}</div>,
+    BeautifulMentionsMenuProps: {},
+    BeautifulMentionsMenuItemProps: {},
+  };
+});
+
 const mockData = [...mocks, ...mocks];
 
 setUserSession(JSON.stringify({ organization: { id: '1' }, roles: ['Admin'] }));

src/containers/Template/Form/HSM/HSM.test.tsx

@@ -15,6 +15,16 @@ beforeEach(() => {
   vi.restoreAllMocks();
 });
 
+vi.mock('lexical-beautiful-mentions', async (importOriginal) => {
+  const actual = (await importOriginal()) as typeof import('lexical-beautiful-mentions');
+  return {
+    ...actual,
+    BeautifulMentionsPlugin: ({ children }: any) => <div>{children}</div>,
+    BeautifulMentionsMenuProps: {},
+    BeautifulMentionsMenuItemProps: {},
+  };
+});
+
 describe('Edit mode', () => {
   test('HSM form is loaded correctly in edit mode', async () => {
     const MOCKS = [...mocks, getHSMTemplateTypeText, getHSMTemplateTypeText];

src/containers/Template/Form/SpeedSend/SpeedSend.test.tsx

@@ -7,6 +7,8 @@ import { SPEED_SENDS_MOCKS } from 'containers/Template/Template.test.helper';
 import { setUserSession } from 'services/AuthService';
 import { SpeedSend } from './SpeedSend';
 import * as Notification from 'common/notification';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { BeautifulMentionNode } from 'lexical-beautiful-mentions';
 
 setUserSession(JSON.stringify({ roles: ['Admin'] }));
 
@@ -25,6 +27,16 @@ afterEach(() => {
   cleanup();
 });
 
+vi.mock('lexical-beautiful-mentions', async (importOriginal) => {
+  const actual = (await importOriginal()) as typeof import('lexical-beautiful-mentions');
+  return {
+    ...actual,
+    BeautifulMentionsPlugin: ({ children }: any) => <div>{children}</div>,
+    BeautifulMentionsMenuProps: {},
+    BeautifulMentionsMenuItemProps: {},
+  };
+});
+
 describe('SpeedSend', () => {
   test('cancel button should redirect to SpeedSendlist page', async () => {
     const { container, getByText } = render(
@@ -53,10 +65,18 @@ describe('SpeedSend', () => {
     const { container } = render(
       <MockedProvider mocks={mocks} addTypename={false}>
         <MemoryRouter>
-          <Routes>
-            <Route path="/" element={<SpeedSend />} />
-            <Route path="/speed-send" element={<SpeedSendList />} />
-          </Routes>
+          <LexicalComposer
+            initialConfig={{
+              namespace: 'template-input',
+              onError: (error) => console.log(error),
+              nodes: [BeautifulMentionNode],
+            }}
+          >
+            <Routes>
+              <Route path="/" element={<SpeedSend />} />
+              <Route path="/speed-send" element={<SpeedSendList />} />
+            </Routes>
+          </LexicalComposer>
         </MemoryRouter>
       </MockedProvider>
     );

src/containers/Template/Form/Template.test.tsx

@@ -11,6 +11,17 @@ import { HSM_TEMPLATE_MOCKS, templateFormHSMFormFields } from './Template.test.h
 beforeEach(() => {
   vi.restoreAllMocks();
 });
+
+vi.mock('lexical-beautiful-mentions', async (importOriginal) => {
+  const actual = (await importOriginal()) as typeof import('lexical-beautiful-mentions');
+  return {
+    ...actual,
+    BeautifulMentionsPlugin: ({ children }: any) => <div>{children}</div>,
+    BeautifulMentionsMenuProps: {},
+    BeautifulMentionsMenuItemProps: {},
+  };
+});
+
 const defaultMocks = [
   ...TEMPLATE_MOCKS,
   ...TEMPLATE_MOCKS,