Use 'text' instead of 'plaintext' to just render monospaced text

storybookjs · May 25, 2023 · f26a28d · f26a28d
1 parent 3bc6572
commit f26a28d
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 10 deletions.
diff --git a/code/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.input.mdx b/code/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.input.mdx
@@ -1,3 +1,3 @@
 import { Story, Meta } from '@storybook/addon-docs';
 
-<Story name="plaintext">Plain text</Story>;
+<Story name="text">Plain text</Story>;
diff --git a/code/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.output.snapshot b/code/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.output.snapshot
@@ -6,6 +6,6 @@ export default {};
 export const Plaintext = () => 'Plain text';
 
 Plaintext.story = {
-  name: 'plaintext',
+  name: 'text',
 };"
 `;
diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx
@@ -44,7 +44,7 @@ export const CodeOrSourceMdx: FC<CodeOrSourceMdxProps> = ({ className, children,
   const language = className && className.split('-');
   return (
     <Source
-      language={((language && language[1]) as SupportedLanguage) || 'plaintext'}
+      language={((language && language[1]) as SupportedLanguage) || 'text'}
       format={false}
       code={children as string}
       {...rest}

diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
@@ -27,11 +27,14 @@ export type SyntaxHighlighterFormatTypes = boolean | 'dedent' | BuiltInParserNam
 // the reason these a COPIED is the types for this package are defining modules by filename
 // which will not match one we've localized type-definitions
 type LineTagPropsFunction = (lineNumber: number) => React.HTMLProps<HTMLElement>;
+
+export type SupportedLanguage = 'text' | keyof typeof supportedLanguages;
+
 export interface SyntaxHighlighterBaseProps {
   children?: React.ReactNode;
   codeTagProps?: React.HTMLProps<HTMLElement>;
   customStyle?: any;
-  language?: keyof typeof supportedLanguages;
+  language?: SupportedLanguage;
   lineNumberStyle?: any;
   lineProps?: LineTagPropsFunction | React.HTMLProps<HTMLElement>;
   showLineNumbers?: boolean;
@@ -40,6 +43,4 @@ 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,9 +17,8 @@ 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/light';
+import ReactSyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
 // @ts-expect-error (Converted from ts-ignore)
 import { createElement } from 'react-syntax-highlighter/dist/esm/index';
 
@@ -46,7 +45,6 @@ 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
@@ -61,7 +61,7 @@ export const Code = ({
     <StyledSyntaxHighlighter
       bordered
       copyable
-      language={(language?.[1] as SupportedLanguage) ?? 'plaintext'}
+      language={(language?.[1] as SupportedLanguage) ?? 'text'}
       format={false}
       {...props}
     >