Export SupportedLanguage and add plaintext support for SyntaxHighlighter

code/ui/blocks/src/blocks/mdx.tsx

@@ -1,6 +1,7 @@
 import type { FC, MouseEvent, PropsWithChildren, SyntheticEvent } from 'react';
 import React, { useContext } from 'react';
 import { NAVIGATE_URL } from '@storybook/core-events';
+import type { SupportedLanguage } from '@storybook/components';
 import { Code, components, Icons, nameSpaceClassNames } from '@storybook/components';
 import { global } from '@storybook/global';
 import { styled } from '@storybook/theming';
@@ -43,7 +44,7 @@ export const CodeOrSourceMdx: FC<CodeOrSourceMdxProps> = ({ className, children,
   const language = className && className.split('-');
   return (
     <Source
-      language={(language && language[1]) || 'plaintext'}
+      language={((language && language[1]) as SupportedLanguage) || 'plaintext'}
       format={false}
       code={children as string}
       {...rest}

code/ui/blocks/src/components/Source.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps, FunctionComponent } from 'react';
 import React from 'react';
 import { styled, ThemeProvider, convert, themes, ignoreSsrWarning } from '@storybook/theming';
+import type { SupportedLanguage } from '@storybook/components';
 import { SyntaxHighlighter } from '@storybook/components';
 
 import { EmptyBlock } from './EmptyBlock';
@@ -32,7 +33,7 @@ export interface SourceCodeProps {
   /**
    * The language the syntax highlighter uses for your story’s code
    */
-  language?: string;
+  language?: SupportedLanguage;
   /**
    * Use this to override the content of the source block.
    */

code/ui/components/src/index.ts

@@ -36,6 +36,7 @@ export type {
   SyntaxHighlighterFormatTypes,
   SyntaxHighlighterProps,
   SyntaxHighlighterRendererProps,
+  SupportedLanguage,
 } from './syntaxhighlighter/syntaxhighlighter-types';
 export { SyntaxHighlighter } from './syntaxhighlighter/lazy-syntaxhighlighter';
 export { createCopyToClipboardFunction } from './syntaxhighlighter/syntaxhighlighter';

code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts

@@ -40,4 +40,6 @@ export interface SyntaxHighlighterBaseProps {
   useInlineStyles?: boolean;
 }
 
+export type SupportedLanguage = keyof typeof supportedLanguages;
+
 export type SyntaxHighlighterProps = SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps;

code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx

@@ -17,8 +17,9 @@ import md from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
 import yml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
 import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
 import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
+import plaintext from 'react-syntax-highlighter/dist/esm/languages/hljs/plaintext';
 
-import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
+import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light';
 // @ts-expect-error (Converted from ts-ignore)
 import { createElement } from 'react-syntax-highlighter/dist/esm/index';
 
@@ -45,6 +46,7 @@ export const supportedLanguages = {
   tsx,
   typescript,
   graphql,
+  plaintext,
 };
 
 Object.entries(supportedLanguages).forEach(([key, val]) => {

code/ui/components/src/typography/elements/Code.tsx

@@ -4,6 +4,7 @@ import React, { Children } from 'react';
 import { SyntaxHighlighter } from '../../syntaxhighlighter/syntaxhighlighter';
 import { isReactChildString } from '../lib/isReactChildString';
 import { codeCommon } from '../lib/common';
+import type { SupportedLanguage } from '../../syntaxhighlighter/syntaxhighlighter-types';
 
 const isInlineCodeRegex = /[\n\r]/g;
 
@@ -60,7 +61,7 @@ export const Code = ({
     <StyledSyntaxHighlighter
       bordered
       copyable
-      language={(language?.[1] as any) ?? 'plaintext'}
+      language={(language?.[1] as SupportedLanguage) ?? 'plaintext'}
       format={false}
       {...props}
     >