feat: markdown preview setting

package.json

@@ -10,14 +10,15 @@
     "@lexical/react": "0.21.0",
     "@lexical/rich-text": "0.21.0",
     "@mediapipe/tasks-vision": "0.10.20",
+    "@wireapp/api-client": "file:.yalc/@wireapp/api-client",
     "@wireapp/avs": "10.0.4",
     "@wireapp/avs-debugger": "0.0.7",
     "@wireapp/commons": "5.4.0",
     "@wireapp/core": "46.15.5",
     "@wireapp/react-ui-kit": "9.28.1",
     "@wireapp/store-engine-dexie": "2.1.15",
     "@wireapp/telemetry": "0.1.4",
-    "@wireapp/webapp-events": "0.27.0",
+    "@wireapp/webapp-events": "file:.yalc/@wireapp/webapp-events",
     "amplify": "https://github.com/wireapp/amplify#head=master",
     "beautiful-react-hooks": "5.0.2",
     "classnames": "2.5.1",

src/i18n/en-US.json

@@ -1344,6 +1344,8 @@
   "preferencesOptionsFontSizeSmall": "Small",
   "preferencesOptionsInputLevelDetected": "Audio detected from microphone",
   "preferencesOptionsInputLevelNotDetected": "No audio detected from microphone",
+  "preferencesOptionsMarkdownPreview": "Preview text formatting",
+  "preferencesOptionsMarkdownPreviewDetails": "When this is on, you can select various formatting options and see the chosen format while typing a message. Otherwise, you need to use markdown commands. This setting applies to all your devices.",
   "preferencesOptionsNotifications": "Notifications",
   "preferencesOptionsNotificationsNone": "Off",
   "preferencesOptionsNotificationsObfuscate": "Hide details",

src/script/components/InputBar/InputBar.tsx

@@ -542,6 +542,11 @@ export const InputBar = ({
     };
   }, [pastedFile]);
 
+  const showMarkdownPreview = useUserPropertyValue<boolean>(
+    () => propertiesRepository.getPreference(PROPERTIES_TYPE.INTERFACE.MARKDOWN_PREVIEW),
+    WebAppEvents.PROPERTIES.UPDATE.INTERFACE.MARKDOWN_PREVIEW,
+  );
+
   const controlButtonsProps = {
     conversation: conversation,
     disableFilesharing: !isFileSharingSendingEnabled,
@@ -554,6 +559,7 @@ export const InputBar = ({
     onSelectFiles: uploadFiles,
     onSelectImages: uploadImages,
     showGiphyButton: showGiphyButton,
+    showFormatButton: messageFormatButtonsEnabled && showMarkdownPreview,
     isFormatActive: formatToolbar.open,
     onFormatClick: formatToolbar.handleClick,
     isEmojiActive: emojiPicker.open,
@@ -582,7 +588,7 @@ export const InputBar = ({
         <div
           className={cx(`${conversationInputBarClassName}__input input-bar-container`, {
             [`${conversationInputBarClassName}__input--editing`]: isEditing,
-            'input-bar-container--with-toolbar': formatToolbar.open,
+            'input-bar-container--with-toolbar': formatToolbar.open && showMarkdownPreview,
           })}
         >
           {!isOutgoingRequest && (
@@ -621,6 +627,7 @@ export const InputBar = ({
                   onUpdate={setMessageContent}
                   hasLocalEphemeralTimer={hasLocalEphemeralTimer}
                   showFormatToolbar={formatToolbar.open}
+                  showMarkdownPreview={showMarkdownPreview}
                   saveDraftState={saveDraft}
                   loadDraftState={loadDraft}
                   onShiftTab={onShiftTab}

src/script/components/InputBar/components/InputBarControls/ControlButtons.tsx

@@ -41,6 +41,7 @@ export type ControlButtonsProps = {
   isFormatActive: boolean;
   isEmojiActive: boolean;
   showGiphyButton?: boolean;
+  showFormatButton: boolean;
   onClickPing: () => void;
   onSelectFiles: (files: File[]) => void;
   onSelectImages: (files: File[]) => void;
@@ -59,6 +60,7 @@ const ControlButtons: React.FC<ControlButtonsProps> = ({
   isFormatActive,
   isEmojiActive,
   showGiphyButton,
+  showFormatButton,
   onClickPing,
   onSelectFiles,
   onSelectImages,
@@ -67,8 +69,6 @@ const ControlButtons: React.FC<ControlButtonsProps> = ({
   onFormatClick,
   onEmojiClick,
 }) => {
-  const messageFormatButtonsEnabled = Config.getConfig().FEATURE.ENABLE_MESSAGE_FORMAT_BUTTONS;
-
   if (isEditing) {
     return (
       <li>
@@ -80,13 +80,13 @@ const ControlButtons: React.FC<ControlButtonsProps> = ({
   if (input.length === 0) {
     return (
       <>
-        {messageFormatButtonsEnabled && (
+        {showFormatButton && (
           <>
             <li>
               <FormatTextButton isActive={isFormatActive} onClick={onFormatClick} />
             </li>
             <li>
-              <EmojiButton isActive={isEmojiActive} onClick={onEmojiClick} />
+              <EmojiButton isActive={isEmojiActive} hasRoundedCorners={!showFormatButton} onClick={onEmojiClick} />
             </li>
           </>
         )}
@@ -95,7 +95,7 @@ const ControlButtons: React.FC<ControlButtonsProps> = ({
           <>
             <li>
               <ImageUploadButton
-                hasRoundedCorners={!messageFormatButtonsEnabled}
+                hasRoundedCorners={!showFormatButton}
                 onSelectImages={onSelectImages}
                 acceptedImageTypes={Config.getConfig().ALLOWED_IMAGE_TYPES}
               />
@@ -122,17 +122,17 @@ const ControlButtons: React.FC<ControlButtonsProps> = ({
     <>
       {showGiphyButton && !disableFilesharing && (
         <>
-          {messageFormatButtonsEnabled && (
+          {showFormatButton && (
             <>
               <li>
                 <FormatTextButton isActive={isFormatActive} onClick={onFormatClick} />
               </li>
               <li>
-                <EmojiButton isActive={isEmojiActive} onClick={onEmojiClick} />
+                <EmojiButton isActive={isEmojiActive} hasRoundedCorners={!showFormatButton} onClick={onEmojiClick} />
               </li>
             </>
           )}
-          <GiphyButton onGifClick={onGifClick} hasRoundedLeftCorner={!messageFormatButtonsEnabled} />
+          <GiphyButton onGifClick={onGifClick} hasRoundedLeftCorner={!showFormatButton} />
         </>
       )}
     </>

src/script/components/InputBar/components/InputBarControls/EmojiButton/EmojiButton.tsx

@@ -27,14 +27,16 @@ import {t} from 'Util/LocalizerUtil';
 
 interface EmojiButtonProps {
   isActive: boolean;
+  hasRoundedCorners: boolean;
   onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 
-export const EmojiButton = ({isActive, onClick}: EmojiButtonProps) => {
+export const EmojiButton = ({isActive, hasRoundedCorners, onClick}: EmojiButtonProps) => {
   return (
     <button
       className={cx('controls-right-button no-radius', {
         active: isActive,
+        'buttons-group-button-left': hasRoundedCorners,
       })}
       type="button"
       onClick={onClick}