Enhancements: Use remark plugin in the report's Text widget (#5850)

* Add remark plugin to MarkdownCard

* Generate release note

* [autofix.ci] apply automated fixes

* Avoid duplicate css code

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

packages/desktop-client/src/components/Notes.tsx

@@ -14,75 +14,15 @@ import remarkGfm from 'remark-gfm';
 import {
   remarkBreaks,
   sequentialNewlinesPlugin,
+  markdownBaseStyles,
 } from '@desktop-client/util/markdown';
 
 const remarkPlugins = [sequentialNewlinesPlugin, remarkGfm, remarkBreaks];
 
-const markdownStyles = css({
+const markdownStyles = css(markdownBaseStyles, {
   display: 'block',
   maxWidth: 350,
   padding: 8,
-  overflowWrap: 'break-word',
-  '& p': {
-    margin: 0,
-    ':not(:first-child)': {
-      marginTop: '0.25rem',
-    },
-  },
-  '& ul, & ol': {
-    listStylePosition: 'inside',
-    margin: 0,
-    paddingLeft: 0,
-  },
-  '&>* ul, &>* ol': {
-    marginLeft: '1.5rem',
-  },
-  '& li>p': {
-    display: 'contents',
-  },
-  '& blockquote': {
-    paddingLeft: '0.75rem',
-    borderLeft: '3px solid ' + theme.markdownDark,
-    margin: 0,
-  },
-  '& hr': {
-    borderTop: 'none',
-    borderLeft: 'none',
-    borderRight: 'none',
-    borderBottom: '1px solid ' + theme.markdownNormal,
-  },
-  '& code': {
-    backgroundColor: theme.markdownLight,
-    padding: '0.1rem 0.5rem',
-    borderRadius: '0.25rem',
-  },
-  '& pre': {
-    padding: '0.5rem',
-    backgroundColor: theme.markdownLight,
-    borderRadius: '0.5rem',
-    margin: 0,
-    ':not(:first-child)': {
-      marginTop: '0.25rem',
-    },
-    '& code': {
-      background: 'inherit',
-      padding: 0,
-      borderRadius: 0,
-    },
-  },
-  '& table, & th, & td': {
-    border: '1px solid ' + theme.markdownNormal,
-  },
-  '& table': {
-    borderCollapse: 'collapse',
-    wordBreak: 'break-word',
-  },
-  '& td': {
-    padding: '0.25rem 0.75rem',
-  },
-  '& h3': {
-    fontSize: 15,
-  },
 });
 
 type NotesProps = {

packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx

@@ -4,21 +4,33 @@ import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
 
 import { Menu } from '@actual-app/components/menu';
-import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
 import { theme } from '@actual-app/components/theme';
 import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 import rehypeExternalLinks from 'rehype-external-links';
+import remarkGfm from 'remark-gfm';
 
 import { type MarkdownWidget } from 'loot-core/types/models';
 
 import { NON_DRAGGABLE_AREA_CLASS_NAME } from '@desktop-client/components/reports/constants';
 import { ReportCard } from '@desktop-client/components/reports/ReportCard';
+import {
+  remarkBreaks,
+  sequentialNewlinesPlugin,
+  markdownBaseStyles,
+} from '@desktop-client/util/markdown';
 
-const markdownStyles = css({
+const remarkPlugins = [sequentialNewlinesPlugin, remarkGfm, remarkBreaks];
+
+const markdownStyles = css(markdownBaseStyles, {
   paddingRight: 20,
-  '& h3': styles.mediumText,
+  '& table': {
+    display: 'inline-table',
+    ':not(:last-child)': {
+      marginBottom: '0.75rem',
+    },
+  },
 });
 
 type MarkdownCardProps = {
@@ -136,6 +148,7 @@ export function MarkdownCard({
         ) : (
           <Text className={markdownStyles}>
             <ReactMarkdown
+              remarkPlugins={remarkPlugins}
               rehypePlugins={[
                 [
                   rehypeExternalLinks,

packages/desktop-client/src/util/markdown.ts

@@ -1,4 +1,8 @@
 // @ts-strict-ignore
+
+import { styles } from '@actual-app/components/styles';
+import { theme } from '@actual-app/components/theme';
+import { css } from '@emotion/css';
 import { newlineToBreak } from 'mdast-util-newline-to-break';
 
 export function sequentialNewlinesPlugin() {
@@ -37,3 +41,66 @@ export function sequentialNewlinesPlugin() {
 export function remarkBreaks() {
   return newlineToBreak;
 }
+
+export const markdownBaseStyles = css({
+  overflowWrap: 'break-word',
+  '& p': {
+    margin: 0,
+    ':not(:first-child)': {
+      marginTop: '0.25rem',
+    },
+  },
+  '& ul, & ol': {
+    listStylePosition: 'inside',
+    margin: 0,
+    paddingLeft: 0,
+  },
+  '&>* ul, &>* ol': {
+    marginLeft: '1.5rem',
+  },
+  '& li>p': {
+    display: 'contents',
+  },
+  '& blockquote': {
+    paddingLeft: '0.75rem',
+    borderLeft: '3px solid ' + theme.markdownDark,
+    margin: 0,
+  },
+  '& hr': {
+    borderTop: 'none',
+    borderLeft: 'none',
+    borderRight: 'none',
+    borderBottom: '1px solid ' + theme.markdownNormal,
+  },
+  '& code': {
+    backgroundColor: theme.markdownLight,
+    padding: '0.1rem 0.5rem',
+    borderRadius: '0.25rem',
+  },
+  '& pre': {
+    padding: '0.5rem',
+    backgroundColor: theme.markdownLight,
+    textAlign: 'left',
+    borderRadius: '0.5rem',
+    margin: 0,
+    ':not(:first-child)': {
+      marginTop: '0.25rem',
+    },
+    '& code': {
+      background: 'inherit',
+      padding: 0,
+      borderRadius: 0,
+    },
+  },
+  '& table, & th, & td': {
+    border: '1px solid ' + theme.markdownNormal,
+  },
+  '& table': {
+    borderCollapse: 'collapse',
+    wordBreak: 'break-word',
+  },
+  '& td': {
+    padding: '0.25rem 0.75rem',
+  },
+  '& h3': styles.mediumText,
+});

upcoming-release-notes/5850.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [gdufay]
+---
+
+Use remark plugin to support GFM in the Text widget in report.