diff --git a/packages/desktop-client/src/components/Notes.tsx b/packages/desktop-client/src/components/Notes.tsx index 55f7eafed2..c3ee380aaf 100644 --- a/packages/desktop-client/src/components/Notes.tsx +++ b/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 = { diff --git a/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx b/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx index 37f66c1942..84a159085d 100644 --- a/packages/desktop-client/src/components/reports/reports/MarkdownCard.tsx +++ b/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({ ) : ( * 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, +}); diff --git a/upcoming-release-notes/5850.md b/upcoming-release-notes/5850.md new file mode 100644 index 0000000000..9886f371cd --- /dev/null +++ b/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.