feat: Fix issue with wrap long lines and styles applied together.

starzel · Jul 14, 2022 · cb0cf3c · cb0cf3c
1 parent df25a75
commit cb0cf3c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/src/components/Block/DefaultView.jsx b/src/components/Block/DefaultView.jsx
@@ -7,7 +7,9 @@ import clipboardSVG from '@plone/volto/icons/copy.svg';
 
 const CodeView = (props) => {
   const { data } = props;
-  const className = `code-block-wrapper ${data.style}`;
+  const { style, showLineNumbers, wrapLongLines } = data;
+  const styleWrap = wrapLongLines ? 'wrapLongLines' : '';
+  const className = `code-block-wrapper ${style} ${styleWrap}`;
   const [copied, copy, setCopied] = useCopy(data.code);
 
   const copyText = () => {
@@ -35,8 +37,8 @@ const CodeView = (props) => {
             <SyntaxHighlighter
               language={data.language}
               useInlineStyles={false}
-              showLineNumbers={data.showLineNumbers}
-              wrapLongLines={data.wrapLongLines}
+              showLineNumbers={showLineNumbers}
+              wrapLongLines={wrapLongLines}
             >
               {data.code}
             </SyntaxHighlighter>

diff --git a/src/components/Block/DefaultView.stories.jsx b/src/components/Block/DefaultView.stories.jsx
@@ -6,11 +6,13 @@ import Wrapper from '@plone/volto/storybook';
 const codePython =
   'import requests\nresp = requests.get("https://plone.org")\nassert resp.status_code == 200';
 
+const codeLongLines = '# Code to show how wrap long lines would work\n\ntext = "This is a really, really, really, really long line including a lot of words and letters and a text that should not make any sense, but should be long, very long"\n\nprint(text)'
+
 const StoryComponent = injectIntl(({ children, ...args }) => {
   const { language, style, code, showLineNumbers, wrapLongLines } = args;
   return (
     <Wrapper>
-      <div>
+      <div style={{ maxWidth: '1000px', margin: 'auto' }}>
         <CodeView
           data={{
             language: language,
@@ -39,6 +41,21 @@ LightStyle.args = {
   code: codePython,
 };
 
+export const LongLines = StoryComponent.bind({});
+LongLines.args = {
+  language: 'python',
+  style: 'dark',
+  code: codeLongLines,
+};
+
+export const LongLinesNoLineNumbers = StoryComponent.bind({});
+LongLinesNoLineNumbers.args = {
+  language: 'python',
+  style: 'dark',
+  showLineNumbers: false,
+  code: codeLongLines,
+};
+
 export default {
   title: 'Public/Blocks/CodeBlock',
   component: CodeView,

diff --git a/src/theme/main.less b/src/theme/main.less
@@ -28,6 +28,14 @@
       }
     }
 
+    &.wrapLongLines {
+      code {
+        > span {
+          display: block !important;
+        }
+      }
+    }
+
     .hljs {
       padding: 10px;
     }