replace react-markdown with react-markdown-customkeyprop

packages/app/next.config.js

@@ -23,7 +23,7 @@ const getTranspilePackages = () => {
   const packages = [
     ...listScopedPackages(['@growi'], { ignorePackageNames: ['@growi/app'] }),
     // listing ESM packages until experimental.esmExternals works correctly to avoid ERR_REQUIRE_ESM
-    'react-markdown',
+    'react-markdown-customkeyprop',
     'unified',
     'markdown-table',
     'character-entities-html4',

packages/app/package.json

@@ -163,7 +163,7 @@
     "react-error-boundary": "^3.1.4",
     "react-i18next": "^12.2.0",
     "react-image-crop": "^8.3.0",
-    "react-markdown": "^8.0.3",
+    "react-markdown-customkeyprop": "^8.0.6-customkeyprop.0",
     "react-multiline-clamp": "^2.0.0",
     "react-scroll": "^1.8.7",
     "react-syntax-highlighter": "^15.5.0",

packages/app/src/components/Page/RevisionRenderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from 'react-markdown-customkeyprop';
 
 import type { RendererOptions } from '~/services/renderer/renderer';
 import loggerFactory from '~/utils/logger';

packages/app/src/components/PagePresentationModal.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import type { PresentationProps } from '@growi/presentation';
 import { useFullScreen } from '@growi/ui';
 import dynamic from 'next/dynamic';
-import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
+import type { ReactMarkdownOptions } from 'react-markdown-customkeyprop/lib/react-markdown';
 import {
   Modal, ModalBody,
 } from 'reactstrap';

packages/app/src/components/TableOfContents.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 
 import { pagePathUtils } from '@growi/core';
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from 'react-markdown-customkeyprop';
 
 import { useCurrentPagePath } from '~/stores/page';
 import { useTocOptions } from '~/stores/renderer';

packages/app/src/services/renderer/renderer.tsx

@@ -7,9 +7,9 @@ import growiDirective from '@growi/remark-growi-directive';
 import { Lsx, LsxImmutable } from '@growi/remark-lsx/components';
 import * as lsxGrowiPlugin from '@growi/remark-lsx/services/renderer';
 import type { Schema as SanitizeOption } from 'hast-util-sanitize';
-import type { SpecialComponents } from 'react-markdown/lib/ast-to-react';
-import type { NormalComponents } from 'react-markdown/lib/complex-types';
-import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
+import type { SpecialComponents } from 'react-markdown-customkeyprop/lib/ast-to-react';
+import type { NormalComponents } from 'react-markdown-customkeyprop/lib/complex-types';
+import type { ReactMarkdownOptions } from 'react-markdown-customkeyprop/lib/react-markdown';
 import katex from 'rehype-katex';
 import raw from 'rehype-raw';
 import sanitize, { defaultSchema as rehypeSanitizeDefaultSchema } from 'rehype-sanitize';
@@ -72,7 +72,7 @@ const baseSanitizeSchema = {
     iframe: ['allow', 'referrerpolicy', 'sandbox', 'src', 'srcdoc'],
     // The special value 'data*' as a property name can be used to allow all data properties.
     // see: https://github.com/syntax-tree/hast-util-sanitize/
-    '*': ['class', 'className', 'style', 'data*'],
+    '*': ['key', 'class', 'className', 'style', 'data*'],
   },
 };
 

packages/presentation/package.json

@@ -23,7 +23,7 @@
     "eslint-plugin-regex": "^1.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-markdown": "^8.0.3",
+    "react-markdown-customkeyprop": "^8.0.6-customkeyprop.0",
     "reveal.js": "^4.4.0"
   }
 }

packages/presentation/src/components/Slides.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Marp } from '@marp-team/marp-core';
 import { Element } from '@marp-team/marpit';
 import Head from 'next/head';
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
+import { ReactMarkdown } from 'react-markdown-customkeyprop/lib/react-markdown';
 
 import type { PresentationOptions } from '../consts';
 import * as extractSections from '../services/renderer/extract-sections';

packages/presentation/src/consts/index.ts

@@ -1,4 +1,4 @@
-import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown';
+import type { ReactMarkdownOptions } from 'react-markdown-customkeyprop/lib/react-markdown';
 import type { Options as RevealOptions } from 'reveal.js';
 
 export type PresentationOptions = {

yarn.lock

@@ -17881,10 +17881,10 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-markdown@^8.0.3:
-  version "8.0.5"
-  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.5.tgz#c9a70a33ca9aeeafb769c6582e7e38843b9d70ad"
-  integrity sha512-jGJolWWmOWAvzf+xMdB9zwStViODyyFQhNB/bwCerbBKmrTmgmA599CGiOlP58OId1IMoIRsA8UdI1Lod4zb5A==
+react-markdown-customkeyprop@^8.0.6-customkeyprop.0:
+  version "8.0.6-customkeyprop.0"
+  resolved "https://registry.yarnpkg.com/react-markdown-customkeyprop/-/react-markdown-customkeyprop-8.0.6-customkeyprop.0.tgz#050a05dc204745f063ac44b1174b834468cc0112"
+  integrity sha512-9L03/4rhGM9K78c9FT1AXeyk0R5esghGmVOxXcpoaZeSI+zMLJ6spP5B2URHPqVahPk+YTgQso/Ba53a6R+oaQ==
   dependencies:
     "@types/hast" "^2.0.0"
     "@types/prop-types" "^15.0.0"