From 3bc6572a4b3becc0e0015b2e67107ae779b3ef9a Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Thu, 25 May 2023 14:40:41 +0200
Subject: [PATCH] Export SupportedLanguage and add plaintext support for
 SyntaxHighlighter

---
 code/ui/blocks/src/blocks/mdx.tsx                             | 3 ++-
 code/ui/blocks/src/components/Source.tsx                      | 3 ++-
 code/ui/components/src/index.ts                               | 1 +
 .../src/syntaxhighlighter/syntaxhighlighter-types.ts          | 2 ++
 .../ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx | 4 +++-
 code/ui/components/src/typography/elements/Code.tsx           | 3 ++-
 6 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx
index 3c1c69f87fc2..d8ab2bf87832 100644
--- a/code/ui/blocks/src/blocks/mdx.tsx
+++ b/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}
diff --git a/code/ui/blocks/src/components/Source.tsx b/code/ui/blocks/src/components/Source.tsx
index 4d72f2f45aed..0b9689a467dd 100644
--- a/code/ui/blocks/src/components/Source.tsx
+++ b/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.
    */
diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts
index c654094f1b61..6adab00a883d 100644
--- a/code/ui/components/src/index.ts
+++ b/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';
diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
index 287b37b4bcb7..5e7b47e569c0 100644
--- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
+++ b/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;
diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index e0c0f869a370..34de4a208dbf 100644
--- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/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]) => {
diff --git a/code/ui/components/src/typography/elements/Code.tsx b/code/ui/components/src/typography/elements/Code.tsx
index 58a64544950d..829491efe397 100644
--- a/code/ui/components/src/typography/elements/Code.tsx
+++ b/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}
     >