feat(RichTextEditor): format toolbar [WPB-12089] (#18398)

* feat(messageRenderer): add 'list' support to markdown rendering options

* feat(RichTextEditor): format toolbar draft

* feat(RichText): draft format toolbar component

* refactor(ControlButtons): split buttons to their own components

* feat: add feature flag for message format buttons

* feat: add analytics events

* fix: message edition

* revert: edit message changes

* fix: mentions rendering

* fix(RichTextEditor): maintain markdown preview for editing messages

* fix: packages

* fix: translation typedefs

* fix: test

* fix: input bar styles

* refactor: cleanup

* fix: grid layout

* fix: message reply preview

* feat: hide gif changes behind the flag

* chore: improve comments

* feat: hide avatar showing changes behind the flag

* chore(typescript): bring back noImplicitReturns option set to true

* refactor(useToolbarState): return undefined in the useEffect instead of commenting the issue

* feat(RichTextEditor): add styles for heading 2 and 3

* fix(InputBar): update avatar visibility logic to include message format buttons

* test(ImageUploadButton): simplify props by removing redundant boolean value

* refactor(useHeadingState): simplify command registration by removing unnecessary useCallback

* refactor(useToolbarState): streamline return of update listener registration

* chore: update packages

* chore: update packages

* refacotor(EmojiPicker): reuse closing logic

* refactor(FormatToolbar): use TextFormatType for passing the formt in formatText function

* refactor(useEmojiPicker): handleClose funcitonallity

package.json

@@ -3,8 +3,12 @@
     "@datadog/browser-logs": "5.33.0",
     "@datadog/browser-rum": "5.33.0",
     "@emotion/react": "11.11.4",
-    "@lexical/history": "0.21.0",
-    "@lexical/react": "0.21.0",
+    "@lexical/code": "0.20.2",
+    "@lexical/history": "0.20.2",
+    "@lexical/list": "0.20.2",
+    "@lexical/markdown": "0.20.2",
+    "@lexical/react": "0.20.2",
+    "@lexical/rich-text": "0.20.2",
     "@mediapipe/tasks-vision": "0.10.20",
     "@wireapp/avs": "10.0.4",
     "@wireapp/avs-debugger": "0.0.7",
@@ -31,7 +35,7 @@
     "kalium-backup": "./TEMP-crossplatform-backup",
     "keyboardjs": "2.7.0",
     "knockout": "3.5.1",
-    "lexical": "0.21.0",
+    "lexical": "0.20.2",
     "libsodium-wrappers": "0.7.15",
     "linkify-it": "5.0.0",
     "long": "5.2.3",

server/config/client.config.ts

@@ -68,6 +68,7 @@ export function generateConfig(params: ConfigGeneratorParams, env: Env) {
       ENFORCE_CONSTANT_BITRATE: env.FEATURE_ENFORCE_CONSTANT_BITRATE == 'true',
       ENABLE_ENCRYPTION_AT_REST: env.FEATURE_ENABLE_ENCRYPTION_AT_REST == 'true',
       ENABLE_BLUR_BACKGROUND: env.FEATURE_ENABLE_BLUR_BACKGROUND == 'true',
+      ENABLE_MESSAGE_FORMAT_BUTTONS: env.FEATURE_ENABLE_MESSAGE_FORMAT_BUTTONS == 'true',
       FORCE_EXTRA_CLIENT_ENTROPY: env.FEATURE_FORCE_EXTRA_CLIENT_ENTROPY == 'true',
       MLS_CONFIG_KEYING_MATERIAL_UPDATE_THRESHOLD: env.FEATURE_MLS_CONFIG_KEYING_MATERIAL_UPDATE_THRESHOLD
         ? Number(env.FEATURE_MLS_CONFIG_KEYING_MATERIAL_UPDATE_THRESHOLD)

server/config/env.ts

@@ -174,6 +174,9 @@ export type Env = {
   /** Feature to enable team creation flow for individual users */
   FEATURE_ENABLE_TEAM_CREATION: string;
 
+  /** Feature to enable rich text editor */
+  FEATURE_ENABLE_MESSAGE_FORMAT_BUTTONS: string;
+
   /** Feature to enable Cross Platform Backup export */
   FEATURE_ENABLE_CROSS_PLATFORM_BACKUP_EXPORT: string;
 

src/i18n/en-US.json

@@ -1376,6 +1376,13 @@
   "replyQuoteShowMore": "Show more",
   "replyQuoteTimeStampDate": "Original message from {date}",
   "replyQuoteTimeStampTime": "Original message from {time}",
+  "richTextHeading": "Heading",
+  "richTextBold": "Bold",
+  "richTextItalic": "Italic",
+  "richTextStrikethrough": "Strikethrough",
+  "richTextUnorderedList": "Unordered list",
+  "richTextOrderedList": "Ordered list",
+  "richTextCode": "Code",
   "roleAdmin": "Admin",
   "roleOwner": "Owner",
   "rolePartner": "External",
@@ -1532,9 +1539,11 @@
   "tooltipConversationCall": "Call",
   "tooltipConversationDetailsAddPeople": "Add participants to conversation ({shortcut})",
   "tooltipConversationDetailsRename": "Change conversation name",
+  "tooltipConversationEmoji": "Select emoji",
   "tooltipConversationEphemeral": "Self-deleting message",
   "tooltipConversationEphemeralAriaLabel": "Type a self-deleting message, currently set to {time}",
   "tooltipConversationFile": "Add file",
+  "tooltipConversationHideFormatting": "Hide formatting",
   "tooltipConversationInfo": "Conversation info",
   "tooltipConversationInputMoreThanTwoUserTyping": "{user1} and {count} more people are typing",
   "tooltipConversationInputOneUserTyping": "{user1} is typing",
@@ -1545,6 +1554,7 @@
   "tooltipConversationPing": "Ping",
   "tooltipConversationSearch": "Search",
   "tooltipConversationSendMessage": "Send message",
+  "tooltipConversationShowFormatting": "Show formatting",
   "tooltipConversationVideoCall": "Video Call",
   "tooltipConversationsArchive": "Archive ({shortcut})",
   "tooltipConversationsArchived": "Show archive ({number})",

src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/EmojiPicker.tsx → src/script/components/EmojiPicker/EmojiPicker.tsx

@@ -17,16 +17,16 @@
  *
  */
 
-import {useState, useEffect, useRef, FC, RefObject} from 'react';
+import {useState, useEffect, useRef, RefObject} from 'react';
 
-import EmojiPicker, {EmojiClickData, EmojiStyle, SkinTones} from 'emoji-picker-react';
+import EmojiPickerReact, {EmojiClickData, EmojiStyle, SkinTones} from 'emoji-picker-react';
 import {createPortal} from 'react-dom';
 
 import {useClickOutside} from 'src/script/hooks/useClickOutside';
 import {isEnterKey, isEscapeKey} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 
-interface EmojiPickerContainerProps {
+interface EmojiPickerProps {
   posX: number;
   posY: number;
   onKeyPress: () => void;
@@ -35,14 +35,14 @@ interface EmojiPickerContainerProps {
   handleReactionClick: (emoji: string) => void;
 }
 
-const EmojiPickerContainer: FC<EmojiPickerContainerProps> = ({
+export const EmojiPicker = ({
   posX,
   posY,
   onKeyPress,
   resetActionMenuStates,
   wrapperRef,
   handleReactionClick,
-}) => {
+}: EmojiPickerProps) => {
   const emojiRef = useRef<HTMLDivElement>(null);
   useClickOutside(emojiRef, resetActionMenuStates, wrapperRef);
   const [style, setStyle] = useState<object>({
@@ -128,7 +128,7 @@ const EmojiPickerContainer: FC<EmojiPickerContainerProps> = ({
               event.stopPropagation();
             }}
           >
-            <EmojiPicker
+            <EmojiPickerReact
               emojiStyle={EmojiStyle.NATIVE}
               onEmojiClick={onEmojiClick}
               searchPlaceHolder={t('accessibility.emojiPickerSearchPlaceholder')}
@@ -141,5 +141,3 @@ const EmojiPickerContainer: FC<EmojiPickerContainerProps> = ({
     </>
   );
 };
-
-export {EmojiPickerContainer};