Export SupportedLanguage and add plaintext support for SyntaxHighlighter

storybookjs · May 25, 2023 · 1d3e176 · 1d3e176
1 parent 324279b
commit 1d3e176
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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
@@ -17,6 +17,7 @@ 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';
 // @ts-expect-error (Converted from ts-ignore)
@@ -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
@@ -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}
     >