fix: Task - Mark down is not copied when task preview is copied to clipboard.

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react';
 import type {TextProps} from 'react-native';
 import {HTMLContentModel, HTMLElementModel, RenderHTMLConfigProvider, TRenderEngineProvider} from 'react-native-render-html';
+import type {TNode} from 'react-native-render-html';
 import useThemeStyles from '@hooks/useThemeStyles';
 import convertToLTR from '@libs/convertToLTR';
 import FontUtils from '@styles/utils/FontUtils';
@@ -108,9 +109,9 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
                 contentModel: HTMLContentModel.block,
                 getMixedUAStyles: (tnode) => {
                     if (tnode.attributes.isemojisonly === undefined) {
-                        return;
+                        return HTMLEngineUtils.isChildOfTaskTitle(tnode as TNode) ? {} : styles.blockquote;
                     }
-                    return styles.onlyEmojisTextLineHeight;
+                    return HTMLEngineUtils.isChildOfTaskTitle(tnode as TNode) ? {} : {...styles.blockquote, ...styles.onlyEmojisTextLineHeight};
                 },
             }),
         }),
@@ -126,6 +127,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             styles.onlyEmojisText,
             styles.onlyEmojisTextLineHeight,
             styles.taskTitleMenuItem,
+            styles.blockquote,
         ],
     );
     /* eslint-enable @typescript-eslint/naming-convention */

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx

@@ -35,9 +35,20 @@ function PreRenderer({TDefaultRenderer, onPressIn, onPressOut, onLongPress, ...d
     const {translate} = useLocalize();
     const isLast = defaultRendererProps.renderIndex === defaultRendererProps.renderLength - 1;
 
+    const isChildOfTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(defaultRendererProps.tnode);
     const isInsideTaskTitle = HTMLEngineUtils.isChildOfTaskTitle(defaultRendererProps.tnode);
     const fontSize = StyleUtils.getCodeFontSize(false, isInsideTaskTitle);
 
+    if (isChildOfTaskTitle) {
+        return (
+            <TDefaultRenderer
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...defaultRendererProps}
+                style={styles.taskTitleMenuItem}
+            />
+        );
+    }
+
     return (
         <View style={isLast ? styles.mt2 : styles.mv2}>
             <ShowContextMenuContext.Consumer>

src/components/ReportActionItem/TaskView.tsx

@@ -18,12 +18,12 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import convertToLTR from '@libs/convertToLTR';
 import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
 import {getAvatarsForAccountIDs, getPersonalDetailsForAccountIDs} from '@libs/OptionsListUtils';
 import Parser from '@libs/Parser';
 import {getDisplayNameForParticipant, getDisplayNamesWithTooltips, isCompletedTaskReport, isOpenTaskReport} from '@libs/ReportUtils';
+import StringUtils from '@libs/StringUtils';
 import {isActiveTaskEditRoute} from '@libs/TaskUtils';
 import {callFunctionIfActionIsAllowed} from '@userActions/Session';
 import {canActionTask as canActionTaskUtil, canModifyTask as canModifyTaskUtil, clearTaskErrors, completeTask, reopenTask, setTaskReport} from '@userActions/Task';
@@ -45,8 +45,11 @@ function TaskView({report}: TaskViewProps) {
     useEffect(() => {
         setTaskReport(report);
     }, [report]);
-    const titleWithoutImage = Parser.replace(Parser.htmlToMarkdown(report?.reportName ?? ''), {disabledRules: [...CONST.TASK_TITLE_DISABLED_RULES]});
-    const taskTitle = `<task-title>${convertToLTR(titleWithoutImage)}</task-title>`;
+
+    const taskTitleWithoutPre = StringUtils.removePreCodeBlock(report?.reportName);
+    const titleWithoutImage = Parser.replace(Parser.htmlToMarkdown(taskTitleWithoutPre), {disabledRules: [...CONST.TASK_TITLE_DISABLED_RULES]});
+    const taskTitle = `<task-title>${titleWithoutImage}</task-title>`;
+
     const assigneeTooltipDetails = getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(report?.managerID ? [report?.managerID] : [], personalDetails), false);
 
     const isOpen = isOpenTaskReport(report);

src/libs/ReportUtils.ts

@@ -4574,7 +4574,7 @@ function getReportNameInternal({
     }
 
     if (isTaskReport(report)) {
-        return Parser.htmlToText(report?.reportName ?? '');
+        return Parser.htmlToText(report?.reportName ?? '').trim();
     }
 
     if (isChatThread(report)) {

src/libs/StringUtils.ts

@@ -106,4 +106,11 @@ function removeDoubleQuotes(text = '') {
     return text.replace(/"/g, '');
 }
 
-export default {sanitizeString, isEmptyString, removeInvisibleCharacters, normalizeAccents, normalizeCRLF, lineBreaksToSpaces, getFirstLine, removeDoubleQuotes};
+/**
+ * Remove pre tag from the html
+ */
+function removePreCodeBlock(text = '') {
+    return text.replace(/<pre[^>]*>|<\/pre>/g, '');
+}
+
+export default {sanitizeString, isEmptyString, removeInvisibleCharacters, normalizeAccents, normalizeCRLF, lineBreaksToSpaces, getFirstLine, removeDoubleQuotes, removePreCodeBlock};

src/libs/TaskUtils.ts

@@ -52,22 +52,23 @@ function getTaskReportActionMessage(action: OnyxEntry<ReportAction>): Pick<Messa
     }
 }
 
-function getTaskTitleFromReport(taskReport: OnyxEntry<Report>, fallbackTitle = ''): string {
+function getTaskTitleFromReport(taskReport: OnyxEntry<Report>, fallbackTitle = '', shouldReturnMarkdown = false): string {
     // We need to check for reportID, not just reportName, because when a receiver opens the task for the first time,
     // an optimistic report is created with the only property - reportName: 'Chat report',
     // and it will be displayed as the task title without checking for reportID to be present.
     const title = taskReport?.reportID && taskReport.reportName ? taskReport.reportName : fallbackTitle;
-    return Parser.htmlToText(title);
+
+    return shouldReturnMarkdown ? Parser.htmlToMarkdown(title) : Parser.htmlToText(title).trim();
 }
 
-function getTaskTitle(taskReportID: string | undefined, fallbackTitle = ''): string {
+function getTaskTitle(taskReportID: string | undefined, fallbackTitle = '', shouldReturnMarkdown = false): string {
     const taskReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`];
-    return getTaskTitleFromReport(taskReport, fallbackTitle);
+    return getTaskTitleFromReport(taskReport, fallbackTitle, shouldReturnMarkdown);
 }
 
-function getTaskCreatedMessage(reportAction: OnyxEntry<ReportAction>) {
+function getTaskCreatedMessage(reportAction: OnyxEntry<ReportAction>, shouldReturnMarkdown = false) {
     const taskReportID = reportAction?.childReportID;
-    const taskTitle = getTaskTitle(taskReportID, reportAction?.childReportName);
+    const taskTitle = getTaskTitle(taskReportID, reportAction?.childReportName, shouldReturnMarkdown);
     return taskTitle ? translateLocal('task.messages.created', {title: taskTitle}) : '';
 }
 

src/pages/home/report/ContextMenu/ContextMenuActions.tsx

@@ -502,7 +502,7 @@ const ContextMenuActions: ContextMenuAction[] = [
                         setClipboardMessage(displayMessage);
                     }
                 } else if (isCreatedTaskReportAction(reportAction)) {
-                    const taskPreviewMessage = getTaskCreatedMessage(reportAction);
+                    const taskPreviewMessage = getTaskCreatedMessage(reportAction, true);
                     Clipboard.setString(taskPreviewMessage);
                 } else if (isMemberChangeAction(reportAction)) {
                     const logMessage = getMemberChangeMessageFragment(reportAction, getReportName).html ?? '';

src/styles/index.ts

@@ -181,17 +181,6 @@ const webViewStyles = (theme: ThemeColors) =>
                 flexShrink: 1,
             },
 
-            blockquote: {
-                borderLeftColor: theme.border,
-                borderLeftWidth: 4,
-                paddingLeft: 12,
-                marginTop: 4,
-                marginBottom: 4,
-
-                // Overwrite default HTML margin for blockquotes
-                marginLeft: 0,
-            },
-
             pre: {
                 ...baseCodeTagStyles(theme),
                 paddingVertical: 8,
@@ -276,6 +265,16 @@ const styles = (theme: ThemeColors) =>
             boxShadow: variables.popoverMenuShadow,
             paddingVertical: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING,
         },
+        blockquote: {
+            borderLeftColor: theme.border,
+            borderLeftWidth: 4,
+            paddingLeft: 12,
+            marginTop: 4,
+            marginBottom: 4,
+
+            // Overwrite default HTML margin for blockquotes
+            marginLeft: 0,
+        },
 
         h1: {
             fontSize: variables.fontSizeLarge,
@@ -3487,13 +3486,6 @@ const styles = (theme: ThemeColors) =>
             ...spacing.ml4,
         },
 
-        blockquote: {
-            borderLeftColor: theme.border,
-            borderLeftWidth: 4,
-            paddingLeft: 12,
-            marginVertical: 4,
-        },
-
         noSelect: {
             boxShadow: 'none',
             // After https://github.com/facebook/react-native/pull/46284 RN accepts only 3 options and undefined