feat: Migrate input bar to Lexical

package.json

@@ -3,6 +3,8 @@
     "@datadog/browser-logs": "^4.50.0",
     "@datadog/browser-rum": "^4.50.0",
     "@emotion/react": "11.11.1",
+    "@lexical/history": "0.12.2",
+    "@lexical/react": "0.12.2",
     "@wireapp/avs": "9.4.14",
     "@wireapp/core": "42.9.4",
     "@wireapp/lru-cache": "3.8.1",
@@ -18,7 +20,7 @@
     "countly-sdk-web": "23.6.1",
     "date-fns": "2.30.0",
     "dexie-batch": "0.4.3",
-    "emoji-picker-react": "^4.5.2",
+    "emoji-picker-react": "4.5.2",
     "highlight.js": "11.8.0",
     "http-status-codes": "2.3.0",
     "jimp": "0.22.10",
@@ -27,6 +29,7 @@
     "jszip": "3.10.1",
     "keyboardjs": "2.7.0",
     "knockout": "3.5.1",
+    "lexical": "0.12.2",
     "libsodium-wrappers": "0.7.13",
     "linkify-it": "4.0.1",
     "long": "5.2.3",

src/script/components/AppContainer/hooks/useTheme.ts

@@ -17,19 +17,16 @@
  *
  */
 
-import {useCallback, useEffect} from 'react';
-
 import type {WebappProperties} from '@wireapp/api-client/lib/user/data';
-import {amplify} from 'amplify';
 
 import {WebAppEvents} from '@wireapp/webapp-events';
 
+import {useUserPropertyChange} from 'src/script/hooks/useUserProperty';
+
 const THEMES_CLASS_PREFIX = 'theme-';
 
 export type Theme = WebappProperties['settings']['interface']['theme'];
 
-const listenedEvents = [WebAppEvents.PROPERTIES.UPDATE.INTERFACE.THEME, WebAppEvents.PROPERTIES.UPDATED];
-
 function setTheme(theme: Theme) {
   const classes = document.body.className
     .split(' ')
@@ -39,16 +36,6 @@ function setTheme(theme: Theme) {
 }
 
 export function useTheme(getTheme: () => Theme) {
-  const updateTheme = useCallback(() => {
-    setTheme(getTheme());
-  }, [getTheme]);
-
-  updateTheme();
-
-  useEffect(() => {
-    listenedEvents.forEach(event => amplify.subscribe(event, updateTheme));
-    return () => {
-      listenedEvents.forEach(event => amplify.unsubscribe(event, updateTheme));
-    };
-  }, [updateTheme]);
+  setTheme(getTheme());
+  useUserPropertyChange(getTheme, WebAppEvents.PROPERTIES.UPDATE.INTERFACE.THEME, setTheme);
 }

src/script/components/Conversation/Conversation.tsx

@@ -521,7 +521,8 @@ export const Conversation: FC<ConversationProps> = ({
           />
 
           <InputBar
-            conversationEntity={activeConversation}
+            key={activeConversation?.id}
+            conversation={activeConversation}
             conversationRepository={repositories.conversation}
             eventRepository={repositories.event}
             messageRepository={repositories.message}