Merge pull request #9360 from tomilaurell/next

cssresources-addon: Do not use SyntaxHighlighter with the very long code-content.
storybookjs · Jan 9, 2020 · cd7fc66 · cd7fc66
2 parents 6ce622f + 07f43d3
commit cd7fc66
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json
@@ -36,6 +36,7 @@
     "@storybook/api": "5.3.0-rc.12",
     "@storybook/components": "5.3.0-rc.12",
     "@storybook/core-events": "5.3.0-rc.12",
+    "@storybook/theming": "5.3.0-rc.12",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3"

diff --git a/addons/cssresources/src/css-resource-panel.tsx b/addons/cssresources/src/css-resource-panel.tsx
@@ -1,7 +1,8 @@
 import React, { Component, Fragment } from 'react';
-import { SyntaxHighlighter } from '@storybook/components';
+import { SyntaxHighlighter, Placeholder, Spaced, Icons } from '@storybook/components';
 import { STORY_RENDERED } from '@storybook/core-events';
 import { API } from '@storybook/api';
+import { styled } from '@storybook/theming';
 
 import { EVENTS, PARAM_KEY } from './constants';
 import { CssResource } from './CssResource';
@@ -20,6 +21,27 @@ interface CssResourceLookup {
   [key: string]: CssResource;
 }
 
+const maxLimitToUseSyntaxHighlighter = 100000;
+
+const PlainCode = styled.pre({
+  textAlign: 'left',
+  fontWeight: 'normal',
+});
+
+const Warning = styled.div({
+  display: 'flex',
+  padding: '10px',
+  justifyContent: 'center',
+  alignItems: 'center',
+  background: '#fff3cd',
+  fontSize: 12,
+  '& svg': {
+    marginRight: 10,
+    width: 24,
+    height: 24,
+  },
+});
+
 export class CssResourcePanel extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -96,7 +118,20 @@ export class CssResourcePanel extends Component<Props, State> {
                 <input type="checkbox" checked={picked} onChange={this.onChange} id={id} />
                 <span>#{id}</span>
               </label>
-              {code ? <SyntaxHighlighter language="html">{code}</SyntaxHighlighter> : null}
+              {code && code.length < maxLimitToUseSyntaxHighlighter && (
+                <SyntaxHighlighter language="html">{code}</SyntaxHighlighter>
+              )}
+              {code && code.length >= maxLimitToUseSyntaxHighlighter && (
+                <Placeholder>
+                  <Spaced row={1}>
+                    <PlainCode>{code.substring(0, maxLimitToUseSyntaxHighlighter)} ...</PlainCode>
+                    <Warning>
+                      <Icons icon="alert" />
+                      Rest of the content cannot be displayed
+                    </Warning>
+                  </Spaced>
+                </Placeholder>
+              )}
             </div>
           ))}
       </div>