Add markdown support for version reminders (#1826)

* add reactmarkdown Signed-off-by: Sajid Alam <[email protected]> * Update package.json Signed-off-by: Sajid Alam <[email protected]> * Update package.json Signed-off-by: Sajid Alam <[email protected]> * change to markdown-it Signed-off-by: Sajid Alam <[email protected]> * Update RELEASE.md Signed-off-by: Sajid Alam <[email protected]> * add simple backtick replace with codeblock Signed-off-by: Sajid Alam <[email protected]> * Update RELEASE.md Signed-off-by: Sajid Alam <[email protected]> --------- Signed-off-by: Sajid Alam <[email protected]>
kedro-org · Apr 3, 2024 · e3d4040 · e3d4040
1 parent df5a187
commit e3d4040
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -12,6 +12,7 @@ Please follow the established format:
 - Add support for `JSONDataset` preview. (#1800)
 - Increase Kedro-Viz timeout. (#1803)
 - Remove demo data source and update feature hints. (#1804)
+- Add markdown support for backticks in the pop-up reminder. (#1826)
 
 # Release 8.0.1 
 

diff --git a/src/components/update-reminder/update-reminder.js b/src/components/update-reminder/update-reminder.js
@@ -11,6 +11,11 @@ import CloseIcon from '../icons/close';
 
 import './update-reminder.scss';
 
+function replaceBackticksWithCodeBlocks(text) {
+  const regex = /`([^`]+)`/g;
+  return text.replace(regex, '<code>$1</code>');
+}
+
 const UpdateReminder = ({ isOutdated, versions, visibleMetaSidebar }) => {
   const [dismissed, setDismissed] = useState(false);
   const [expand, setExpand] = useState(false);
@@ -101,11 +106,19 @@ const UpdateReminder = ({ isOutdated, versions, visibleMetaSidebar }) => {
                 className="update-reminder-expanded-content--feature"
                 key={feature.title}
               >
-                <h4>{feature.title}</h4>
+                <h4
+                  dangerouslySetInnerHTML={{
+                    __html: replaceBackticksWithCodeBlocks(feature.title),
+                  }}
+                ></h4>
                 {feature.image.length > 0 && (
                   <img alt={feature.title} src={feature.image} />
                 )}
-                <p>{feature.copy}</p>
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: replaceBackticksWithCodeBlocks(feature.copy),
+                  }}
+                ></p>
                 {feature.buttonLink.length > 0 && (
                   <a href={feature.buttonLink} rel="noreferrer" target="_blank">
                     <Button size="small">{feature.buttonText}</Button>