Upgraded markdown libraries (CMEM-5567)

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   In the `<Markdown />` component, `rehypePlugins` and `remarkPlugins` props now use PluggableList from the unified package. This may require changes if you previously used plugins not conforming to the stricter unified typings. Backward compatibility with the old plugin list type will be removed in the next major version.
+
 ## [24.1.0] - 2025-04-16
 
 ### Added

package.json

@@ -94,12 +94,12 @@
         "react-flow-renderer": "9.7.4",
         "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
         "react-inlinesvg": "^3.0.3",
-        "react-markdown": "^8.0.7",
+        "react-markdown": "^10.1.0",
         "react-syntax-highlighter": "^15.6.1",
-        "rehype-raw": "^6.1.1",
-        "remark-definition-list": "^1.2.0",
-        "remark-gfm": "^3.0.1",
-        "remark-parse": "^10.0.2",
+        "rehype-raw": "^7.0.0",
+        "remark-definition-list": "^2.0.0",
+        "remark-gfm": "^4.0.1",
+        "remark-parse": "^11.0.0",
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
         "wicg-inert": "^3.1.3",

src/cmem/markdown/Markdown.tsx

@@ -1,12 +1,19 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
-import { PluggableList } from "react-markdown/lib/react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 // @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
 import remarkTypograf from "@mavrin/remark-typograf";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
+import type { PluggableList as UnifiedPluggableList } from "unified";
+
+export type OldPluginTuple = boolean | string | object | Array<OldPluginTuple>;
+export type OldPluggable = object | Array<OldPluginTuple>;
+
+export type OldPluggableList = Array<OldPluggable>;
+
+type CompatiblePluggableList = UnifiedPluggableList | OldPluggableList;
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
@@ -36,7 +43,7 @@ export interface MarkdownProps extends TestableComponent {
      * Additional reHype plugins to execute.
      * @see https://github.com/remarkjs/react-markdown#architecture
      */
-    reHypePlugins?: PluggableList;
+    reHypePlugins?: CompatiblePluggableList;
     /**
      * Name for browser target where links withing the Markdown content are opened.
      * Set to `false` to disable this feature.
@@ -54,9 +61,9 @@ const configDefault = {
         @see https://github.com/remarkjs/react-markdown#api
     */
     // @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
-    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableList,
+    remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as UnifiedPluggableList,
     // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
-    rehypePlugins: [] as PluggableList,
+    rehypePlugins: [] as UnifiedPluggableList,
     allowedElements: [
         // default markdown
         "a",
@@ -132,14 +139,10 @@ export const Markdown = ({
         ...configDefault,
         ...configHtml,
         ...configTextOnly,
-        linkTarget: linkTargetName
-            ? (href: string, _children: any, _title: string) => {
-                  const linkTarget = href.charAt(0) !== "#" ? linkTargetName : "";
-                  return linkTarget as React.HTMLAttributeAnchorTarget;
-              }
-            : undefined,
         components: {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             code(props: any) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const { children, className, node, inline, ...rest } = props;
                 const match = /language-(\w+)/.exec(className || "");
                 return match ? (
@@ -151,22 +154,24 @@ export const Markdown = ({
                         }}
                         children={String(children).replace(/\n$/, "")}
                         language={match[1]}
+                        target={linkTargetName}
                     />
                 ) : (
-                    <code {...rest} className={className}>
+                    <code {...rest} target={linkTargetName} className={className}>
                         {children}
                     </code>
                 );
             },
         },
+        allowedElements,
     };
-    allowedElements && (reactMarkdownProperties.allowedElements = allowedElements);
-    reHypePlugins &&
+
+    if (reHypePlugins) {
         reHypePlugins.forEach(
             (plugin) => (reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin])
         );
+    }
 
-    // @ts-ignore because against the lib spec it does not allow a function for linkTarget.
     const markdownDisplay = <ReactMarkdown {...reactMarkdownProperties} />;
     return inheritBlock && !(otherProps["data-test-id"] || htmlContentBlockProps) ? (
         markdownDisplay

src/cmem/markdown/highlightSearchWords.test.ts

@@ -9,20 +9,26 @@ describe("Highlight search words reHype plugin", () => {
         const highlightSearchWordsPlugin = markdownUtils.highlightSearchWordsPluginFactory(searchQuery);
         const highlightSearchWordTransformer = highlightSearchWordsPlugin();
         const textNode = (text: string): Text => ({ type: "text", value: text });
-        const markNode = (text: string): Element => ({ type: "element", tagName: "mark", children: [textNode(text)] });
+        const markNode = (text: string): Element => ({
+            type: "element",
+            tagName: "mark",
+            properties: {},
+            children: [textNode(text)],
+        });
         const result = highlightSearchWordTransformer(
             {
                 type: "root",
                 children: [
                     {
                         type: "element",
                         tagName: "p",
+                        properties: {},
                         children: [textNode("Text with abc query words xyz.")],
                     },
                 ],
             },
             new VFile(),
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
+
             () => {}
         );
         const rootChildren = (result as Root).children;

src/cmem/markdown/highlightSearchWords.ts

@@ -25,7 +25,12 @@ const highlightSearchWordsPluginFactory = (searchQuery: string | undefined) => {
         let matchArray = multiWordRegex.exec(text);
         while (matchArray !== null) {
             result.push(createTextNode(text.slice(offset, matchArray.index)));
-            result.push({ type: "element", tagName: "mark", children: [createTextNode(matchArray[0])] });
+            result.push({
+                type: "element",
+                tagName: "mark",
+                properties: {},
+                children: [createTextNode(matchArray[0])],
+            });
             offset = multiWordRegex.lastIndex;
             matchArray = multiWordRegex.exec(text);
         }