From 1a215390e20c12affbcb83a5bf32a25543ac7da5 Mon Sep 17 00:00:00 2001 From: Enrico Ros Date: Thu, 15 Aug 2024 20:33:01 -0700 Subject: [PATCH] Render of highlighted Markdown --- package-lock.json | 6 +++++ package.json | 1 + src/common/styles/agi.effects.css | 24 +++++++++++++++++++ .../markdown/CustomMarkdownRenderer.tsx | 20 ++++++++++++---- 4 files changed, 47 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index ae2e7792d..270eaab41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,6 +52,7 @@ "react-timeago": "^7.2.0", "rehype-katex": "^7.0.0", "remark-gfm": "^4.0.0", + "remark-mark-highlight": "^0.1.1", "remark-math": "^6.0.0", "sharp": "^0.33.4", "superjson": "^2.2.1", @@ -7774,6 +7775,11 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/remark-mark-highlight": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/remark-mark-highlight/-/remark-mark-highlight-0.1.1.tgz", + "integrity": "sha512-ot2AE37OKO2YQTcqyZ8VatEGJV/7CXk/RPJHk2TEVm04pT+JLCnoQb4Yj1vdOv2y4ZK45cDylj19gYVHqHz7Tw==" + }, "node_modules/remark-math": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-6.0.0.tgz", diff --git a/package.json b/package.json index cc92f98b2..bfedc6701 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "react-timeago": "^7.2.0", "rehype-katex": "^7.0.0", "remark-gfm": "^4.0.0", + "remark-mark-highlight": "^0.1.1", "remark-math": "^6.0.0", "sharp": "^0.33.4", "superjson": "^2.2.1", diff --git a/src/common/styles/agi.effects.css b/src/common/styles/agi.effects.css index 121bd0f80..884bf124b 100644 --- a/src/common/styles/agi.effects.css +++ b/src/common/styles/agi.effects.css @@ -14,6 +14,9 @@ } } + +/* Spinning effect, used while re-rendering images */ + .agi-border-4 { /* config */ --border-width: 4px; @@ -48,6 +51,27 @@ animation: rotation-loop 2.5s linear infinite; } + +/* Simple highlight, used for tags and ==highlighted== text */ +.agi-highlight { + /*background-color: rgb(var(--agi-color-mark-highlight-channel));*/ + background: linear-gradient( + 104deg, + rgba(var(--agi-color-mark-highlight-channel) / 0), + rgba(var(--agi-color-mark-highlight-channel) / 1) 0.9%, + rgba(var(--agi-color-mark-highlight-channel) / 1) 99.1%, + rgba(var(--agi-color-mark-highlight-channel) / 0) + ); +} + +[data-joy-color-scheme="dark"] .agi-highlight { + --agi-color-mark-highlight-channel: 0 0 184; +} + +[data-joy-color-scheme="light"] .markdown-body { + --agi-color-mark-highlight-channel: 255 255 0; +} + /*.agi-highlight-yellow {*/ /* background: linear-gradient(104deg, rgba(255,255,132,0) 0.9%, rgba(255,255,132,1) 2.4%, rgba(255,252,132,1) 50%, rgba(255,255,132,1) 97.6%, rgba(255,255,132,0) 99.1%);*/ /* color: red;*/ diff --git a/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx b/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx index 38f25b2a8..b06dd944a 100644 --- a/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx +++ b/src/modules/blocks/markdown/CustomMarkdownRenderer.tsx @@ -6,6 +6,7 @@ import { Components as ReactMarkdownComponents, default as ReactMarkdown } from import { default as rehypeKatex } from 'rehype-katex'; import { default as remarkGfm } from 'remark-gfm'; import { default as remarkMath } from 'remark-math'; +import { remarkMark } from 'remark-mark-highlight'; import { Button } from '@mui/joy'; import DownloadIcon from '@mui/icons-material/Download'; @@ -26,9 +27,14 @@ const LinkRenderer = ({ children, node, ...props }: LinkRendererProps) => ( // Mark Renderer adds a yellow background to the text -const MarkRenderer = ({ children }: { children: React.ReactNode }) => ( - {children} -); +function MarkRenderer({ children }: { children: React.ReactNode }) { + // Mark by default has a yellow background, but we want to set a custom class here, so we can style it + return ( + + {children} + + ); +} // TableRenderer adds a CSV Download Link @@ -106,12 +112,14 @@ function _extractTableData(children: React.JSX.Element) { const reactMarkdownComponents = { a: LinkRenderer, // override the link renderer to add target="_blank" + mark: MarkRenderer, // renders the tag table: TableRenderer, // override the table renderer to show the download CSV links // math/inlineMath components are not needed, rehype-katex handles this automatically } as ReactMarkdownComponents; const remarkPluginsStable: UnifiedPluggable[] = [ remarkGfm, // GitHub Flavored Markdown + remarkMark, // Mark-Highlight, for ==yellow== [remarkMath, { singleDollarTextMath: false }], // Math ]; @@ -127,8 +135,12 @@ const rehypePluginsStable: UnifiedPluggable[] = [ * with other markdown syntax. */ const preprocessMarkdown = (markdownText: string) => markdownText + // Replace LaTeX delimiters with $$...$$ .replace(/\s\\\((.*?)\\\)/gs, (_match, p1) => ` $$${p1}$$`) // Replace inline LaTeX delimiters \( and \) with $$ - .replace(/\s\\\[(.*?)\\]/gs, (_match, p1) => ` $$${p1}$$`); // Replace block LaTeX delimiters \[ and \] with $$ + .replace(/\s\\\[(.*?)\\]/gs, (_match, p1) => ` $$${p1}$$`) // Replace block LaTeX delimiters \[ and \] with $$ + // Replace ... with ==...==, but not in multiple lines, or if preceded by a backtick (disabled, was (?(.+?)<\/mark>/g, (_match, p1) => ` ==${p1}==`); + export default function CustomMarkdownRenderer(props: { content: string }) { return (