Merge pull request #264 from eccenca/feature/upgrade-markdown-libs-CMEM-5567

Upgraded markdown libraries (CMEM-5567)

Author: andreas-schultz

CHANGELOG.md

@@ -18,6 +18,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `delayDisplayChildren` property: set a time (in ms) to delay the actual rendering of elements inside the actions container. When enabled the containing `OverviewItem` can be displayed faster. Can be used e.g. to boost performance when rendering `OverviewItemActions` with `hiddenInteractions` set to `true`.
     -   `delaySkeleton` property to set the placeholder/skeleton as long as the delayed display is waiting to get processed
 -   `intent` property to `Button`, `FieldItem`, `FieldSet`, `Notification`, and `Spinner`
+-   `<Button />`, `<FieldItem />`, `<FieldSet />`, `<Notification />`, `<Spinner />`
+    -   `intent` property: align intent state usage with other components
+
+### Deprecated
+
+-   `<Markdown />`
+    -   `reHypePlugins` property 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.
 
 ### Fixed
 
@@ -30,6 +37,22 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   `IntentBlueprint`: BlueprintJS intent types, also available by `DefinitionsBlueprint`
     -   `TableDataContainerProps`, `TableSimpleContainerProps`, `TableHeadProps`, `TableBodyProps`, `TableExpandedRowProps`, `TableHeaderProps` and `DataTableRenderProps` as interfaces for diverse table components
 
+### Usage with old application bundlers
+
+Old bundlers like webpack4 do not support the `exports` field from `package.json`, so it cannot resolve the correct files that need to be imported from the packages if they do not come with alternate configs like `modules` or `main`. Our latest markdown update introduced a few of those packages. So you need to extend your aliases (in webpack4 it is managed in `config.resolve.alias`) like:
+
+```
+{
+    "devlop": "devlop/lib/default.js",
+    "unist-util-visit-parents/do-not-use-color": "unist-util-visit-parents/lib/color.js",
+    "vfile/do-not-use-conditional-minpath": "vfile/lib/minpath.browser.js",
+    "vfile/do-not-use-conditional-minproc": "vfile/lib/minproc.browser.js",
+    "vfile/do-not-use-conditional-minurl": "vfile/lib/minurl.browser.js",
+}
+```
+
+If you use Jest then you can use the same aliases for the `moduleNameMapper` config, if necessary.
+
 ## [24.1.0] - 2025-04-16
 
 ### Added

package.json

@@ -94,12 +94,14 @@
         "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-markdown-deprecated": "npm:react-markdown@^8.0.7",
         "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-external-links": "^3.0.0",
+        "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",
@@ -176,7 +178,8 @@
     },
     "resolutions": {
         "**/@types/react": "^17.0.85",
-        "node-sass-package-importer/**/postcss": "^8.4.49"
+        "node-sass-package-importer/**/postcss": "^8.4.49",
+        "hast-util-from-parse5": "8.0.0"
     },
     "husky": {
         "hooks": {

src/cmem/markdown/Markdown.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 import ReactMarkdown from "react-markdown";
-import { PluggableList } from "react-markdown/lib/react-markdown";
+/**
+ * Recreate the old type to provide support until next major
+ */
+import { PluggableList as PluggableListDeprecated } from "react-markdown-deprecated/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 rehypeExternalLinks from "rehype-external-links";
 import rehypeRaw from "rehype-raw";
 import { remarkDefinitionList } from "remark-definition-list";
 import remarkGfm from "remark-gfm";
+import { PluggableList as PluggableListUnified } from "unified";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
+type PluggableList = PluggableListUnified | PluggableListDeprecated;
 
 export interface MarkdownProps extends TestableComponent {
     children: string;
@@ -35,6 +41,7 @@ export interface MarkdownProps extends TestableComponent {
     /**
      * Additional reHype plugins to execute.
      * @see https://github.com/remarkjs/react-markdown#architecture
+     * @deprecated (v25) this property won't support `PluggableList` from "react-markdown/lib/react-markdown" with the next major version, only the one from `unified` will be supported then.
      */
     reHypePlugins?: PluggableList;
     /**
@@ -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 PluggableListUnified,
     // @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
-    rehypePlugins: [] as PluggableList,
+    rehypePlugins: [] as PluggableListUnified,
     allowedElements: [
         // default markdown
         "a",
@@ -110,6 +117,13 @@ export const Markdown = ({
     htmlContentBlockProps,
     ...otherProps
 }: MarkdownProps) => {
+    const configHtmlExternalLinks = {
+        rel: ["nofollow"],
+        target: linkTargetName,
+    };
+
+    configDefault.rehypePlugins = configDefault.rehypePlugins.concat([[rehypeExternalLinks, configHtmlExternalLinks]]);
+
     const configHtml = allowHtml
         ? {
               rehypePlugins: [...configDefault.rehypePlugins].concat([rehypeRaw]),
@@ -132,14 +146,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 ? (
@@ -159,14 +169,15 @@ export const Markdown = ({
                 );
             },
         },
+        allowedElements,
     };
-    allowedElements && (reactMarkdownProperties.allowedElements = allowedElements);
-    reHypePlugins &&
-        reHypePlugins.forEach(
-            (plugin) => (reactMarkdownProperties.rehypePlugins = [...reactMarkdownProperties.rehypePlugins, plugin])
+
+    if (reHypePlugins) {
+        reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(
+            reHypePlugins as PluggableListUnified
         );
+    }
 
-    // @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);
         }