Add TextStyle and refactor

src/components/Chat/ChatList.tsx

@@ -466,13 +466,13 @@ export const ChatList = ({
 
       {enableMentions && (hasSecretKey || isPrivate === false) && (
         <ChatOptions
-          openQManager={openQManager}
-          messages={messages}
           goToMessage={goToMessage}
-          members={members}
-          myName={myName}
-          selectedGroup={selectedGroup}
           isPrivate={isPrivate}
+          members={members}
+          messages={messages}
+          myName={myName}
+          openQManager={openQManager}
+          selectedGroup={selectedGroup}
         />
       )}
     </Box>

src/components/Chat/ChatOptions.tsx

@@ -25,7 +25,6 @@ import {
   AppsSearchRight,
 } from '../Apps/Apps-styles';
 import IconClearInput from '../../assets/svgs/ClearInput.svg';
-import { CellMeasurerCache } from 'react-virtualized';
 import { getBaseApiReact } from '../../App';
 import { MessageDisplay } from './MessageDisplay';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -36,6 +35,7 @@ import { generateHTML } from '@tiptap/react';
 import ErrorBoundary from '../../common/ErrorBoundary';
 import { useTranslation } from 'react-i18next';
 import { isHtmlString } from '../../utils/chat';
+import TextStyle from '@tiptap/extension-text-style';
 
 const extractTextFromHTML = (htmlString = '') => {
   return convert(htmlString, {
@@ -43,11 +43,6 @@ const extractTextFromHTML = (htmlString = '') => {
   })?.toLowerCase();
 };
 
-const cache = new CellMeasurerCache({
-  fixedWidth: true,
-  defaultHeight: 50,
-});
-
 export const ChatOptions = ({
   messages: untransformedMessages,
   goToMessage,
@@ -86,6 +81,7 @@ export const ChatOptions = ({
                 Underline,
                 Highlight,
                 Mention,
+                TextStyle,
               ]);
           return {
             ...item,

src/components/Chat/TipTap.tsx

@@ -361,8 +361,8 @@ const MenuBar = memo(
 );
 
 const extensions = [
+  TextStyle,
   Color.configure({ types: [TextStyle.name, ListItem.name] }),
-  TextStyle.configure({ types: [ListItem.name] }),
   StarterKit.configure({
     bulletList: {
       keepMarks: true,