Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-12-24 01:09:48 +01:00
Code Issues Packages Projects Releases Activity

Fixup for markdown copy button (#1902)

Browse Source 
Somehow the essential changes were missing in the
original commit (788787d).
This commit is contained in:
René Pfeuffer
2021-04-26 10:25:00 +02:00
parent 788787db5b
commit 61b0cf9843
2 changed files with 161 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
scm-ui/ui-components/src/SyntaxHighlighter.tsx
View File

@@ -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<Props> = ({ language = defaultLanguage, showLineNumbers = true, value, permalink }) => {
const location = useLocation();
const [contentRef, setContentRef] = useState<HTMLElement | null>();
const [copied, setCopied] = useState(false);
const [t] = useTranslation("commons");
useScrollToElement(
contentRef,
@@ -56,6 +70,10 @@ const SyntaxHighlighter: FC<Props> = ({ 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<Props> = ({ 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 (
<div ref={setContentRef}>
<Container ref={setContentRef}>
<ReactSyntaxHighlighter
showLineNumbers={false}
language={determineLanguage(language)}
style={highlightingTheme}
renderer={defaultRenderer}
>
{value}
{valueWithoutTrailingLineBreak}
</ReactSyntaxHighlighter>
</div>
<TopRightButton title={t("syntaxHighlighting.copyButton")} onClick={copy}>
<i className={copied ? "fa fa-clipboard-check" : "fa fa-clipboard"} />
</TopRightButton>
</Container>
);
};

494
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -4613,7 +4613,9 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
</p>
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -4694,41 +4696,20 @@ exports[`Storyshots MarkdownView Code without Lang 1`] = `
style={Object {}}
>
Code without Language!
</span>
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-2"
>
<span
aria-label="sources.content.copyPermalink"
className="tooltip has-tooltip-right"
data-tooltip="sources.content.copyPermalink"
>
<i
aria-label="sources.content.copyPermalink"
className="fas fa-fw fa-link has-text-secondary"
onClick={[Function]}
onKeyPress={[Function]}
/>
</span>
<span
className="linenumber react-syntax-highlighter-line-number"
onClick={[Function]}
>
2
</span>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
</div>
</div>
@@ -5781,7 +5762,9 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
</p>
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -6929,45 +6912,19 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
>
}
</span>
<span
style={Object {}}
>
</span>
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-16"
>
<span
aria-label="sources.content.copyPermalink"
className="tooltip has-tooltip-right"
data-tooltip="sources.content.copyPermalink"
>
<i
aria-label="sources.content.copyPermalink"
className="fas fa-fw fa-link has-text-secondary"
onClick={[Function]}
onKeyPress={[Function]}
/>
</span>
<span
className="linenumber react-syntax-highlighter-line-number"
onClick={[Function]}
>
16
</span>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
@@ -14879,7 +14836,9 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -15252,39 +15211,19 @@ exports[`Storyshots MarkdownView Inline Xml 1`] = `
>
&lt;/plugins&gt;
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-12"
>
<span
aria-label="sources.content.copyPermalink"
className="tooltip has-tooltip-right"
data-tooltip="sources.content.copyPermalink"
>
<i
aria-label="sources.content.copyPermalink"
className="fas fa-fw fa-link has-text-secondary"
onClick={[Function]}
onKeyPress={[Function]}
/>
</span>
<span
className="linenumber react-syntax-highlighter-line-number"
onClick={[Function]}
>
12
</span>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
@@ -16461,7 +16400,9 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
</p>
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -17609,45 +17550,19 @@ Deserunt officia esse aliquip consectetur duis ut labore laborum commodo aliquip
>
}
</span>
<span
style={Object {}}
>
</span>
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-16"
>
<span
aria-label="sources.content.copyPermalink"
className="tooltip has-tooltip-right"
data-tooltip="sources.content.copyPermalink"
>
<i
aria-label="sources.content.copyPermalink"
className="fas fa-fw fa-link has-text-secondary"
onClick={[Function]}
onKeyPress={[Function]}
/>
</span>
<span
className="linenumber react-syntax-highlighter-line-number"
onClick={[Function]}
>
16
</span>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
@@ -17844,7 +17759,9 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
</h1>
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -19256,45 +19173,19 @@ exports[`Storyshots MarkdownView Xml Code Block 1`] = `
>
&gt;
</span>
<span
style={Object {}}
>
</span>
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-24"
>
<span
aria-label="sources.content.copyPermalink"
className="tooltip has-tooltip-right"
data-tooltip="sources.content.copyPermalink"
>
<i
aria-label="sources.content.copyPermalink"
className="fas fa-fw fa-link has-text-secondary"
onClick={[Function]}
onKeyPress={[Function]}
/>
</span>
<span
className="linenumber react-syntax-highlighter-line-number"
onClick={[Function]}
>
24
</span>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
</div>
</div>
@@ -75396,7 +75287,9 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
<div
className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
>
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -76757,45 +76650,19 @@ exports[`Storyshots SyntaxHighlighter Go 1`] = `
>
}
</span>
<span
style={Object {}}
>
</span>
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-18"
>
<span
aria-label="sources.content.copyPermalink"
className="tooltip has-tooltip-right"
data-tooltip="sources.content.copyPermalink"
>
<i
aria-label="sources.content.copyPermalink"
className="fas fa-fw fa-link has-text-secondary"
onClick={[Function]}
onKeyPress={[Function]}
/>
</span>
<span
className="linenumber react-syntax-highlighter-line-number"
onClick={[Function]}
>
18
</span>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
</div>
`;
@@ -76804,7 +76671,9 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
<div
className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
>
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -79709,45 +79578,19 @@ exports[`Storyshots SyntaxHighlighter Java 1`] = `
>
}
</span>
<span
style={Object {}}
>
</span>
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-32"
>
<span
aria-label="sources.content.copyPermalink"
className="tooltip has-tooltip-right"
data-tooltip="sources.content.copyPermalink"
>
<i
aria-label="sources.content.copyPermalink"
className="fas fa-fw fa-link has-text-secondary"
onClick={[Function]}
onKeyPress={[Function]}
/>
</span>
<span
className="linenumber react-syntax-highlighter-line-number"
onClick={[Function]}
>
32
</span>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
</div>
`;
@@ -79756,7 +79599,9 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
<div
className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
>
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -80556,45 +80401,19 @@ exports[`Storyshots SyntaxHighlighter Javascript 1`] = `
>
;
</span>
<span
style={Object {}}
>
</span>
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-8"
>
<span
aria-label="sources.content.copyPermalink"
className="tooltip has-tooltip-right"
data-tooltip="sources.content.copyPermalink"
>
<i
aria-label="sources.content.copyPermalink"
className="fas fa-fw fa-link has-text-secondary"
onClick={[Function]}
onKeyPress={[Function]}
/>
</span>
<span
className="linenumber react-syntax-highlighter-line-number"
onClick={[Function]}
>
8
</span>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
</div>
`;
@@ -80603,7 +80422,9 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
<div
className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
>
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -88564,41 +88385,20 @@ exports[`Storyshots SyntaxHighlighter Markdown 1`] = `
style={Object {}}
>
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.
</span>
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-172"
>
<span
aria-label="sources.content.copyPermalink"
className="tooltip has-tooltip-right"
data-tooltip="sources.content.copyPermalink"
>
<i
aria-label="sources.content.copyPermalink"
className="fas fa-fw fa-link has-text-secondary"
onClick={[Function]}
onKeyPress={[Function]}
/>
</span>
<span
className="linenumber react-syntax-highlighter-line-number"
onClick={[Function]}
>
172
</span>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
</div>
`;
@@ -88607,7 +88407,9 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
<div
className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
>
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -90058,45 +89860,19 @@ exports[`Storyshots SyntaxHighlighter Python 1`] = `
>
)
</span>
<span
style={Object {}}
>
</span>
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-21"
>
<span
aria-label="sources.content.copyPermalink"
className="tooltip has-tooltip-right"
data-tooltip="sources.content.copyPermalink"
>
<i
aria-label="sources.content.copyPermalink"
className="fas fa-fw fa-link has-text-secondary"
onClick={[Function]}
onKeyPress={[Function]}
/>
</span>
<span
className="linenumber react-syntax-highlighter-line-number"
onClick={[Function]}
>
21
</span>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
</div>
`;
@@ -90105,7 +89881,9 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
<div
className="SyntaxHighlighterstories__Spacing-sc-1dcldp5-0 jbrCso"
>
<div>
<div
className="SyntaxHighlighter__Container-ks8t62-0 icIltA"
>
<pre
style={
Object {
@@ -92452,27 +92230,19 @@ exports[`Storyshots SyntaxHighlighter Without line numbers 1`] = `
>
}
</span>
<span
style={Object {}}
>
</span>
</span>
</div>
<div
className="SyntaxHighlighterRenderer__RowContainer-sc-12li0bg-0 dsgsZc"
id="line-32"
>
<span
style={Object {}}
>
</span>
</div>
</code>
</pre>
<button
className="SyntaxHighlighter__TopRightButton-ks8t62-1 grhlRj"
onClick={[Function]}
title="syntaxHighlighting.copyButton"
>
<i
className="fa fa-clipboard"
/>
</button>
</div>
</div>
`;