chore: upgrade syntax highlighting dependencies, prism-react-renderer to v2, react-live to v4 (#9316)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

packages/create-docusaurus/templates/classic-typescript/package.json

@@ -19,7 +19,7 @@
     "@docusaurus/preset-classic": "3.0.0-beta.0",
     "@mdx-js/react": "^2.3.0",
     "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

packages/create-docusaurus/templates/classic/docusaurus.config.js

@@ -4,8 +4,10 @@
 // There are various equivalent ways to declare your Docusaurus config.
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
+const {themes} = require('prism-react-renderer');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {

packages/create-docusaurus/templates/classic/package.json

@@ -18,7 +18,7 @@
     "@docusaurus/preset-classic": "3.0.0-beta.0",
     "@mdx-js/react": "^2.3.0",
     "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

packages/docusaurus-theme-classic/package.json

@@ -39,7 +39,7 @@
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.26",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.1.0",
     "prismjs": "^1.29.0",
     "react-router-dom": "^5.3.4",
     "rtlcss": "^4.1.0",

packages/docusaurus-theme-classic/src/__tests__/options.test.ts

@@ -11,8 +11,7 @@ import {
   normalizeThemeConfig,
   normalizePluginOptions,
 } from '@docusaurus/utils-validation';
-import theme from 'prism-react-renderer/themes/github';
+import {themes} from 'prism-react-renderer';
-import darkTheme from 'prism-react-renderer/themes/dracula';
 import {ThemeConfigSchema, DEFAULT_CONFIG, validateOptions} from '../options';
 import type {Options, PluginOptions} from '@docusaurus/theme-classic';
 import type {ThemeConfig} from '@docusaurus/theme-common';
@@ -36,8 +35,8 @@ describe('themeConfig', () => {
   it('accepts valid theme config', () => {
     const userConfig = {
       prism: {
-        theme,
+        theme: themes.github,
-        darkTheme,
+        darkTheme: themes.dracula,
         defaultLanguage: 'javaSCRIPT',
         additionalLanguages: ['koTLin', 'jaVa'],
         magicComments: [
@@ -579,7 +578,7 @@ describe('themeConfig', () => {
       const prismConfig = {
         prism: {
           additionalLanguages: ['kotlin', 'java'],
-          theme: darkTheme,
+          theme: themes.dracula,
           magicComments: [],
         },
       };
@@ -590,7 +589,7 @@ describe('themeConfig', () => {
       const prismConfig2 = {
         prism: {
           additionalLanguages: [],
-          theme: darkTheme,
+          theme: themes.dracula,
           magicComments: [
             {
               className: 'a',
@@ -606,7 +605,7 @@ describe('themeConfig', () => {
       const prismConfig3 = {
         prism: {
           additionalLanguages: [],
-          theme: darkTheme,
+          theme: themes.dracula,
           magicComments: [
             {
               className: 'a',

packages/docusaurus-theme-classic/src/deps.d.ts

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-declare module 'prism-react-renderer/prism' {
-  import type * as PrismNamespace from 'prismjs';
-
-  const Prism: typeof PrismNamespace;
-  export default Prism;
-}

packages/docusaurus-theme-classic/src/options.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import defaultPrismTheme from 'prism-react-renderer/themes/palenight';
+import {themes} from 'prism-react-renderer';
 import {Joi, URISchema} from '@docusaurus/utils-validation';
 import type {Options, PluginOptions} from '@docusaurus/theme-classic';
 import type {ThemeConfig} from '@docusaurus/theme-common';
@@ -14,6 +14,7 @@ import type {
   OptionValidationContext,
 } from '@docusaurus/types';
 
+const defaultPrismTheme = themes.palenight;
 const DEFAULT_DOCS_CONFIG: ThemeConfig['docs'] = {
   versionPersistence: 'localStorage',
   sidebar: {

packages/docusaurus-theme-classic/src/prism-include-languages.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import Prism from 'prism-react-renderer/prism';
+import {Prism} from 'prism-react-renderer';
 import prismIncludeLanguages from '@theme/prism-include-languages';
 
 prismIncludeLanguages(Prism);

packages/docusaurus-theme-classic/src/theme-classic.d.ts

@@ -400,23 +400,20 @@ declare module '@theme/CodeBlock/Content/String' {
 }
 
 declare module '@theme/CodeBlock/Line' {
-  import type {ComponentProps} from 'react';
+  import type {
-  import type Highlight from 'prism-react-renderer';
+    LineInputProps,
-
+    LineOutputProps,
-  // Lib does not make this easy
+    Token,
-  type RenderProps = Parameters<
+    TokenInputProps,
-    ComponentProps<typeof Highlight>['children']
+    TokenOutputProps,
-  >[0];
+  } from 'prism-react-renderer';
-  type GetLineProps = RenderProps['getLineProps'];
-  type GetTokenProps = RenderProps['getTokenProps'];
-  type Token = RenderProps['tokens'][number][number];
 
   export interface Props {
     readonly line: Token[];
     readonly classNames: string[] | undefined;
     readonly showLineNumbers: boolean;
-    readonly getLineProps: GetLineProps;
+    readonly getLineProps: (input: LineInputProps) => LineOutputProps;
-    readonly getTokenProps: GetTokenProps;
+    readonly getTokenProps: (input: TokenInputProps) => TokenOutputProps;
   }
 
   export default function CodeBlockLine(props: Props): JSX.Element;

packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx

@@ -15,7 +15,7 @@ import {
   containsLineNumbers,
   useCodeWordWrap,
 } from '@docusaurus/theme-common/internal';
-import Highlight, {defaultProps, type Language} from 'prism-react-renderer';
+import {Highlight, type Language} from 'prism-react-renderer';
 import Line from '@theme/CodeBlock/Line';
 import CopyButton from '@theme/CodeBlock/CopyButton';
 import WordWrapButton from '@theme/CodeBlock/WordWrapButton';
@@ -74,16 +74,16 @@ export default function CodeBlockString({
       {title && <div className={styles.codeBlockTitle}>{title}</div>}
       <div className={styles.codeBlockContent}>
         <Highlight
-          {...defaultProps}
           theme={prismTheme}
           code={code}
           language={(language ?? 'text') as Language}>
-          {({className, tokens, getLineProps, getTokenProps}) => (
+          {({className, style, tokens, getLineProps, getTokenProps}) => (
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
               ref={wordWrap.codeBlockRef}
-              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}>
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
+              style={style}>
               <code
                 className={clsx(
                   styles.codeBlockLines,

packages/docusaurus-theme-classic/src/theme/prism-include-languages.ts

@@ -26,6 +26,10 @@ export default function prismIncludeLanguages(
   globalThis.Prism = PrismObject;
 
   additionalLanguages.forEach((lang) => {
+    if (lang === 'php') {
+      // eslint-disable-next-line global-require
+      require('prismjs/components/prism-markup-templating.js');
+    }
     // eslint-disable-next-line global-require, import/no-dynamic-require
     require(`prismjs/components/prism-${lang}`);
   });

packages/docusaurus-theme-common/package.json

@@ -42,7 +42,7 @@
     "@types/react-router-config": "*",
     "clsx": "^1.2.1",
     "parse-numeric-range": "^1.3.0",
-    "prism-react-renderer": "^1.3.5",
+    "prism-react-renderer": "^2.1.0",
     "tslib": "^2.6.0",
     "utility-types": "^3.10.0"
   },

packages/docusaurus-theme-common/src/utils/codeBlockUtils.ts

@@ -7,7 +7,7 @@
 
 import type {CSSProperties} from 'react';
 import rangeParser from 'parse-numeric-range';
-import type {PrismTheme} from 'prism-react-renderer';
+import type {PrismTheme, PrismThemeEntry} from 'prism-react-renderer';
 
 const codeBlockTitleRegex = /title=(?<quote>["'])(?<title>.*?)\1/;
 const metastringLinesRangeRegex = /\{(?<range>[\d,-]+)\}/;
@@ -254,14 +254,14 @@ export function parseLines(
 }
 
 export function getPrismCssVariables(prismTheme: PrismTheme): CSSProperties {
-  const mapping: {[name: keyof PrismTheme['plain']]: string} = {
+  const mapping: PrismThemeEntry = {
     color: '--prism-color',
     backgroundColor: '--prism-background-color',
   };
 
   const properties: {[key: string]: string} = {};
   Object.entries(prismTheme.plain).forEach(([key, value]) => {
-    const varName = mapping[key];
+    const varName = mapping[key as keyof PrismThemeEntry];
     if (varName && typeof value === 'string') {
       properties[varName] = value;
     }

packages/docusaurus-theme-live-codeblock/package.json

@@ -30,7 +30,7 @@
     "@philpl/buble": "^0.19.7",
     "clsx": "^1.2.1",
     "fs-extra": "^11.1.1",
-    "react-live": "2.2.3",
+    "react-live": "^4.1.5",
     "tslib": "^2.6.0"
   },
   "devDependencies": {

packages/docusaurus-theme-live-codeblock/src/deps.d.ts

@@ -7,7 +7,8 @@
 
 declare module '@philpl/buble' {
   import type {TransformOptions as OriginalTransformOptions} from 'buble';
-  // eslint-disable-next-line import/no-extraneous-dependencies, no-restricted-syntax
+
+  // eslint-disable-next-line no-restricted-syntax
   export * from 'buble';
   export const features: string[];
   export type TransformOptions = OriginalTransformOptions & {

packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts

@@ -18,9 +18,10 @@ declare module '@docusaurus/theme-live-codeblock' {
 
 declare module '@theme/Playground' {
   import type {Props as BaseProps} from '@theme/CodeBlock';
-  import type {LiveProviderProps} from 'react-live';
+  import type {LiveProvider} from 'react-live';
 
   type CodeBlockProps = Omit<BaseProps, 'className' | 'language' | 'title'>;
+  type LiveProviderProps = React.ComponentProps<typeof LiveProvider>;
 
   export interface Props extends CodeBlockProps, LiveProviderProps {
     children: string;

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx

@@ -13,7 +13,6 @@ import CodeBlock, {type Props} from '@theme-init/CodeBlock';
 const withLiveEditor = (Component: typeof CodeBlock) => {
   function WrappedComponent(props: Props) {
     if (props.live) {
-      // @ts-expect-error: we have deliberately widened the type of language prop
       return <Playground scope={ReactLiveScope} {...props} />;
     }
 

packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx

@@ -115,7 +115,6 @@ export default function Playground({
 
   return (
     <div className={styles.playgroundContainer}>
-      {/* @ts-expect-error: type incompatibility with refs */}
       <LiveProvider
         code={children.replace(/\n$/, '')}
         noInline={noInline}

packages/docusaurus/src/client/exports/__tests__/Interpolate.test.tsx

@@ -31,7 +31,6 @@ describe('interpolate', () => {
       object: {hello: 'world'},
       array: ['Hello'],
     };
-    // @ts-expect-error: test
     expect(interpolate(text, values)).toMatchInlineSnapshot(
       `"42 Hello [object Object] Hello"`,
     );
@@ -52,7 +51,6 @@ describe('interpolate', () => {
     // Should we emit warnings in such case?
     const text = 'Hello {name} how are you {unprovidedValue}?';
     const values = {name: 'Sébastien', extraValue: 'today'};
-    // @ts-expect-error: test
     expect(interpolate(text, values)).toMatchInlineSnapshot(
       `"Hello Sébastien how are you {unprovidedValue}?"`,
     );
@@ -62,7 +60,6 @@ describe('interpolate', () => {
     // Should we emit warnings in such case?
     const text = 'Hello {name} how are you {day}?';
     expect(interpolate(text)).toEqual(text);
-    // @ts-expect-error: test
     expect(interpolate(text, {})).toEqual(text);
   });
 
@@ -86,7 +83,6 @@ describe('interpolate', () => {
       extraUselessValue1: <div>test</div>,
       extraUselessValue2: 'hi',
     };
-    // @ts-expect-error: test
     expect(interpolate(text, values)).toMatchSnapshot();
   });
 });
@@ -128,7 +124,6 @@ describe('<Interpolate>', () => {
     expect(() =>
       renderer.create(
         <Interpolate>
-          {/* @ts-expect-error: for test */}
           <span>aaa</span>
         </Interpolate>,
       ),
@@ -136,7 +131,6 @@ describe('<Interpolate>', () => {
       `"The Docusaurus <Interpolate> component only accept simple string values. Received: React element"`,
     );
     expect(() =>
-      // @ts-expect-error: test
       renderer.create(<Interpolate>{null}</Interpolate>),
     ).toThrowErrorMatchingInlineSnapshot(
       `"The Docusaurus <Interpolate> component only accept simple string values. Received: object"`,

packages/docusaurus/src/server/__tests__/configValidation.test.ts

@@ -477,7 +477,7 @@ describe('config warning and error', () => {
       url: 'https://mysite.com/someSubpath',
     });
     expect(error).toBeDefined();
-    expect(error.message).toBe(
+    expect(error?.message).toBe(
       'The url is not supposed to contain a sub-path like "/someSubpath". Please use the baseUrl field for sub-paths.',
     );
   });

website/docs/api/themes/theme-configuration.mdx

@@ -799,12 +799,14 @@ By default, we use [Palenight](https://github.com/FormidableLabs/prism-react-ren
 Example configuration:
 
 ```js title="docusaurus.config.js"
+const {themes} = require('prism-react-renderer');
+
 module.exports = {
   themeConfig: {
     prism: {
       // highlight-start
-      theme: require('prism-react-renderer/themes/github'),
+      theme: themes.github,
-      darkTheme: require('prism-react-renderer/themes/dracula'),
+      darkTheme: themes.dracula,
       // highlight-end
     },
   },

website/docs/guides/markdown-features/markdown-features-code-blocks.mdx

@@ -64,11 +64,13 @@ By default, the Prism [syntax highlighting theme](https://github.com/FormidableL
 For example, if you prefer to use the `dracula` highlighting theme:
 
 ```js title="docusaurus.config.js"
+const {themes} = require('prism-react-renderer');
+
 module.exports = {
   themeConfig: {
     prism: {
       // highlight-next-line
-      theme: require('prism-react-renderer/themes/dracula'),
+      theme: themes.dracula,
     },
   },
 };

website/docusaurus.config.js

@@ -478,7 +478,15 @@ module.exports = async function createConfigAsync() {
           content: `⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus">Twitter ${TwitterSvg}</a>`,
         },
         prism: {
-          additionalLanguages: ['java', 'latex', 'PHp'],
+          additionalLanguages: [
+            'java',
+            'latex',
+            'PHp',
+            'bash',
+            'diff',
+            'json',
+            'scss',
+          ],
           magicComments: [
             {
               className: 'theme-code-block-highlighted-line',

website/src/utils/prismDark.mjs

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import darkTheme from 'prism-react-renderer/themes/vsDark/index.cjs.js';
+import {themes} from 'prism-react-renderer';
+
+const darkTheme = themes.vsDark;
 
 export default {
   plain: {

website/src/utils/prismLight.mjs

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import lightTheme from 'prism-react-renderer/themes/github/index.cjs.js';
+import {themes} from 'prism-react-renderer';
+
+const lightTheme = themes.github;
 
 export default {
   ...lightTheme,

yarn.lock

@@ -4879,18 +4879,6 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
-buble@0.19.6:
-  version "0.19.6"
-  resolved "https://registry.yarnpkg.com/buble/-/buble-0.19.6.tgz#915909b6bd5b11ee03b1c885ec914a8b974d34d3"
-  integrity sha512-9kViM6nJA1Q548Jrd06x0geh+BG2ru2+RMDkIHHgJY/8AcyCs34lTHwra9BX7YdPrZXd5aarkpr/SY8bmPgPdg==
-  dependencies:
-    chalk "^2.4.1"
-    magic-string "^0.25.1"
-    minimist "^1.2.0"
-    os-homedir "^1.0.1"
-    regexpu-core "^4.2.0"
-    vlq "^1.0.0"
-
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
@@ -5540,6 +5528,11 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^5.0.0, commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -5599,16 +5592,6 @@ compare-func@^2.0.0:
     array-ify "^1.0.0"
     dot-prop "^5.1.0"
 
-component-props@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/component-props/-/component-props-1.1.1.tgz#f9b7df9b9927b6e6d97c9bd272aa867670f34944"
-  integrity sha512-69pIRJs9fCCHRqCz3390YF2LV1Lu6iEMZ5zuVqqUn+G20V9BNXlMs0cWawWeW9g4Ynmg29JmkG6R7/lUJoGd1Q==
-
-component-xor@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/component-xor/-/component-xor-0.0.4.tgz#c55d83ccc1b94cd5089a4e93fa7891c7263e59aa"
-  integrity sha512-ZIt6sla8gfo+AFVRZoZOertcnD5LJaY2T9CKE2j13NJxQt/mUafD69Bl7/Y4AnpI2LGjiXH7cOfJDx/n2G9edA==
-
 compressible@~2.0.16:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@@ -5864,11 +5847,6 @@ core-js-pure@^3.30.2:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.31.1.tgz#73d154958881873bc19381df80bddb20c8d0cdb5"
   integrity sha512-w+C62kvWti0EPs4KPMCMVv9DriHSXfQOCQ94bGGBiEW5rrbtt/Rz8n5Krhfw9cpFyzXBjf3DB3QnPdEzGDY4Fw==
 
-core-js@^2.4.1:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-js@^3.31.1:
   version "3.31.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.31.1.tgz#f2b0eea9be9da0def2c5fece71064a7e5d687653"
@@ -6846,14 +6824,6 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-iterator@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad"
-  integrity sha512-7dsMOQI07EMU98gQM8NSB3GsAiIeBYIPKpnxR3c9xOvdvBjChAcOM0iJ222I3p5xyiZO9e5oggkNaCusuTdYig==
-  dependencies:
-    component-props "1.1.1"
-    component-xor "0.0.4"
-
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
@@ -8323,6 +8293,18 @@ glob@7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^10.2.2:
   version "10.3.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.3.tgz#8360a4ffdd6ed90df84aa8d52f21f452e86a123b"
@@ -10906,7 +10888,7 @@ lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.0.0.tgz#b9e2a6a72a129d81ab317202d93c7691df727e61"
   integrity sha512-svTf/fzsKHffP42sujkO/Rjs37BCIsQVRCeNYIm9WN8rgT7ffoUnRtZCqU+6BqcSBdv8gwJeTz8knJpgACeQMw==
 
-magic-string@^0.25.0, magic-string@^0.25.1, magic-string@^0.25.2, magic-string@^0.25.7:
+magic-string@^0.25.0, magic-string@^0.25.2, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
   integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==
@@ -12101,7 +12083,7 @@ mute-stream@0.0.8, mute-stream@~0.0.4:
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
-mz@^2.4.0:
+mz@^2.4.0, mz@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
   integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
@@ -13221,7 +13203,7 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pirates@^4.0.4, pirates@^4.0.5:
+pirates@^4.0.1, pirates@^4.0.4, pirates@^4.0.5:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
@@ -13644,10 +13626,13 @@ pretty-time@^1.1.0:
   resolved "https://registry.yarnpkg.com/pretty-time/-/pretty-time-1.1.0.tgz#ffb7429afabb8535c346a34e41873adf3d74dd0e"
   integrity sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==
 
-prism-react-renderer@^1.0.1, prism-react-renderer@^1.3.5:
+prism-react-renderer@^2.0.6, prism-react-renderer@^2.1.0:
-  version "1.3.5"
+  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz#786bb69aa6f73c32ba1ee813fbe17a0115435085"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-2.1.0.tgz#a2f418451647412ea73d18cfe363fea20e419f9d"
-  integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==
+  integrity sha512-I5cvXHjA1PVGbGm1MsWCpvBCRrYyxEri0MC7/JbfIfYfcXAxHyO5PaUjs3A8H5GW6kJcLhTHxxMaOZZpRZD2iQ==
+  dependencies:
+    "@types/prismjs" "^1.26.0"
+    clsx "^1.2.1"
 
 prismjs@^1.29.0:
   version "1.29.0"
@@ -13724,7 +13709,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -14009,18 +13994,14 @@ react-lite-youtube-embed@^2.3.52:
   resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.3.52.tgz#7f8125a03e7a940745b63d11abd6821ffe1babe5"
   integrity sha512-G010PvCavA4EqL8mZ/Sv9XXiHnjMfONW+lmNeCRnSEPluPdptv2lZ0cNlngrj7K9j7luc8pbpyrmNpKbD9VMmw==
 
-react-live@2.2.3:
+react-live@^4.1.5:
-  version "2.2.3"
+  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/react-live/-/react-live-2.2.3.tgz#260f99194213799f0005e473e7a4154c699d6a7c"
+  resolved "https://registry.yarnpkg.com/react-live/-/react-live-4.1.5.tgz#a4fa4cfdcad763503a209a29bace3339764fdfb1"
-  integrity sha512-tpKruvfytNETuzO3o1mrQUj180GVrq35IE8F5gH1NJVPt4szYCx83/dOSCOyjgRhhc3gQvl0pQ3k/CjOjwJkKQ==
+  integrity sha512-ul3Zwvqvh6KTg8j7xGCT26+c8J9vQ+LFUrZCbrrrzEExuVB/39s1GKG3NsywnL+aGAjpfnUTaVCe7KlKIvVPiw==
   dependencies:
-    buble "0.19.6"
+    prism-react-renderer "^2.0.6"
-    core-js "^2.4.1"
+    sucrase "^3.31.0"
-    dom-iterator "^1.0.0"
+    use-editable "^2.3.3"
-    prism-react-renderer "^1.0.1"
-    prop-types "^15.5.8"
-    react-simple-code-editor "^0.10.0"
-    unescape "^1.0.1"
 
 react-loadable-ssr-addon-v5-slorber@^1.0.1:
   version "1.0.1"
@@ -14085,11 +14066,6 @@ react-shallow-renderer@^16.15.0:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
 
-react-simple-code-editor@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373"
-  integrity sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA==
-
 react-test-renderer@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.2.0.tgz#1dd912bd908ff26da5b9fca4fd1c489b9523d37e"
@@ -14366,7 +14342,7 @@ regexp.prototype.flags@^1.4.3, regexp.prototype.flags@^1.5.0:
     define-properties "^1.2.0"
     functions-have-names "^1.2.3"
 
-regexpu-core@^4.2.0, regexpu-core@^4.5.4:
+regexpu-core@^4.5.4:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.8.0.tgz#e5605ba361b67b1718478501327502f4479a98f0"
   integrity sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==
@@ -15783,6 +15759,19 @@ stylis@^4.1.3:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
   integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
 
+sucrase@^3.31.0:
+  version "3.34.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
+  integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -16213,6 +16202,11 @@ ts-dedent@^2.2.0:
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 tsconfig-paths@^3.14.1:
   version "3.14.2"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
@@ -16411,13 +16405,6 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-unescape@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/unescape/-/unescape-1.0.1.tgz#956e430f61cad8a4d57d82c518f5e6cc5d0dda96"
-  integrity sha512-O0+af1Gs50lyH1nUu3ZyYS1cRh01Q/kUKatTOkSs7jukXE6/NebucDVxyiDsA9AQ4JC1V1jUH9EO8JX2nMDgGQ==
-  dependencies:
-    extend-shallow "^2.0.1"
-
 unherit@^1.0.4:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
@@ -16745,6 +16732,11 @@ use-composed-ref@^1.3.0:
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
   integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
 
+use-editable@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/use-editable/-/use-editable-2.3.3.tgz#a292fe9ba4c291cd28d1cc2728c75a5fc8d9a33f"
+  integrity sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==
+
 use-isomorphic-layout-effect@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
@@ -16899,11 +16891,6 @@ vfile@^5.0.0:
     unist-util-stringify-position "^3.0.0"
     vfile-message "^3.0.0"
 
-vlq@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.1.tgz#c003f6e7c0b4c1edd623fd6ee50bbc0d6a1de468"
-  integrity sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==
-
 vscode-languageserver-textdocument@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.8.tgz#9eae94509cbd945ea44bca8dcfe4bb0c15bb3ac0"