From 61b0cf9843838f8258f06c55f5cf4f0dac32bc07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= Date: Mon, 26 Apr 2021 10:25:00 +0200 Subject: [PATCH] Fixup for markdown copy button (#1902) Somehow the essential changes were missing in the original commit (788787d). --- .../ui-components/src/SyntaxHighlighter.tsx | 32 +- .../src/__snapshots__/storyshots.test.ts.snap | 494 +++++------------- 2 files changed, 161 insertions(+), 365 deletions(-) diff --git a/scm-ui/ui-components/src/SyntaxHighlighter.tsx b/scm-ui/ui-components/src/SyntaxHighlighter.tsx index 64887b23cc..23831de209 100644 --- a/scm-ui/ui-components/src/SyntaxHighlighter.tsx +++ b/scm-ui/ui-components/src/SyntaxHighlighter.tsx @@ -31,9 +31,21 @@ import { useLocation } from "react-router-dom"; import { urls } from "@scm-manager/ui-api"; import createSyntaxHighlighterRenderer from "./SyntaxHighlighterRenderer"; import useScrollToElement from "./useScrollToElement"; +import styled from "styled-components"; +import { useTranslation } from "react-i18next"; +import copyToClipboard from "./CopyToClipboard"; const LINE_NUMBER_URL_HASH_REGEX = /^#line-(.*)$/; +const Container = styled.div` + position: relative; +`; +const TopRightButton = styled.button` + position: absolute; + top: 0; + right: 0; +`; + type Props = { language?: string; value: string; @@ -44,6 +56,8 @@ type Props = { const SyntaxHighlighter: FC = ({ language = defaultLanguage, showLineNumbers = true, value, permalink }) => { const location = useLocation(); const [contentRef, setContentRef] = useState(); + const [copied, setCopied] = useState(false); + const [t] = useTranslation("commons"); useScrollToElement( contentRef, @@ -56,6 +70,10 @@ const SyntaxHighlighter: FC = ({ language = defaultLanguage, showLineNumb value ); + const copy = () => { + copyToClipboard(value).then(() => setCopied(true)); + }; + const createLinePermaLink = (lineNumber: number) => window.location.protocol + "//" + @@ -64,17 +82,25 @@ const SyntaxHighlighter: FC = ({ language = defaultLanguage, showLineNumb const defaultRenderer = createSyntaxHighlighterRenderer(createLinePermaLink, showLineNumbers); + let valueWithoutTrailingLineBreak = value; + if (value && value.length > 1 && value.endsWith("\n")) { + valueWithoutTrailingLineBreak = value.substr(0, value.length - 1); + } + return ( -
+ - {value} + {valueWithoutTrailingLineBreak} -
+ + + + ); }; diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index f8ed215e2d..307c345315 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -4613,7 +4613,9 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `

-
+ 
                   Code without Language!
-
-
- - - - - 2 - - - - - -
+
@@ -5781,7 +5762,9 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip

-
+ 
                   }
                 
-                
-                  
-
-                
-              
-
-
- - - - - 16 - - - -
+
@@ -14879,7 +14836,9 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = ` -
+ 
                 </plugins>
 
-              
-
-
- - - - - 12 - - - -
+
@@ -16461,7 +16400,9 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip

-
+ 
                   }
                 
-                
-                  
-
-                
-              
-
-
- - - - - 16 - - - -
+
@@ -17844,7 +17759,9 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = ` -
+ 
                   >
                 
-                
-                  
-
-                
-              
-
-
- - - - - 24 - - - -
+
@@ -75396,7 +75287,9 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
-
+ 
               }
             
-            
-              
-
-            
-          
-
-
- - - - - 18 - - - -
+
`; @@ -76804,7 +76671,9 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
-
+ 
               }
             
-            
-              
-
-            
-          
-
-
- - - - - 32 - - - -
+
`; @@ -79756,7 +79599,9 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
-
+ 
               ;
             
-            
-              
-
-            
-          
-
-
- - - - - 8 - - - -
+
`; @@ -80603,7 +80422,9 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
-
+ 
                dolore cillum. Esse laboris consequat dolor anim exercitation tempor aliqua deserunt velit magna laboris. Culpa culpa minim duis amet mollit do quis amet commodo nulla irure.
-
-
- - - - - 172 - - - - - -
+
`; @@ -88607,7 +88407,9 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
-
+ 
               )
             
-            
-              
-
-            
-          
-
-
- - - - - 21 - - - -
+
`; @@ -90105,7 +89881,9 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
-
+ 
               }
             
-            
-              
-
-            
-          
-
-
- - -
+
`;