Add copy-to-clipboard-button to all code blocks (#566)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

Co-authored-by: mrdrogdrog <mr.drogdrog@gmail.com>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

CHANGELOG.md

@@ -41,6 +41,7 @@
 - Code blocks with 'csv' as language render as tables.
 - Code blocks with 'markmap' are rendered as a mind map (see [the projects website](https://markmap.js.org/repl)).
 - All images can be clicked to show them in full screen.
+- Code blocks have a 'Copy code to clipboard' button.
 - Code blocks with 'vega-lite' as language are rendered as [vega-lite diagrams](https://vega.github.io/vega-lite/examples/).
 
 ### Changed

package.json

@@ -31,6 +31,7 @@
         "@types/react-router": "5.1.8",
         "@types/react-router-bootstrap": "0.24.5",
         "@types/react-router-dom": "5.1.5",
+        "@types/uuid": "^8.3.0",
         "@typescript-eslint/eslint-plugin": "3.10.1",
         "@typescript-eslint/parser": "3.10.1",
         "abcjs": "5.12.0",
@@ -98,6 +99,7 @@
         "typescript": "4.0.3",
         "use-media": "1.4.0",
         "use-resize-observer": "6.1.0",
+        "uuid": "^8.3.0",
         "vega": "5.15.0",
         "vega-embed": "6.12.2",
         "vega-lite": "4.15.0"

public/locales/en.json

@@ -4,6 +4,9 @@
         "title": "Collaborative markdown notes"
     },
     "renderer": {
+        "highlightCode": {
+            "copyCode": "Copy code to clipboard"
+        },
         "flowchart": {
             "invalidSyntax": "Invalid flowchart.js syntax!"
         },
@@ -126,7 +129,6 @@
             "issueTracker": "Found a bug? Fill an issue!",
             "sourceCode": "Read the source code",
             "versionInfo": "Version info",
-            "successfullyCopied": "Copied!",
             "serverVersion": "Server version",
             "clientVersion": "Client version",
             "title": "You are using"
@@ -379,7 +381,9 @@
         "or": "or",
         "and": "and",
         "avatarOf": "avatar of '{{name}}'",
-        "why": "Why?"
+        "why": "Why?",
+        "successfullyCopied": "Copied!",
+        "copyError": "Error while copying!"
     },
     "login": {
         "chooseMethod": "Choose method",

src/components/common/copyable-field/copyable-field.tsx

@@ -1,52 +0,0 @@
-import React, { Fragment, useCallback, useRef, useState } from 'react'
-import { Button, FormControl, InputGroup, Overlay, Tooltip } from 'react-bootstrap'
-import { Trans, useTranslation } from 'react-i18next'
-import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
-
-export interface CopyableFieldProps {
-  content: string
-}
-
-export const CopyableField: React.FC<CopyableFieldProps> = ({ content }) => {
-  useTranslation()
-  const inputField = useRef<HTMLInputElement>(null)
-  const [showCopiedTooltip, setShowCopiedTooltip] = useState(false)
-
-  const copyToClipboard = useCallback((content: string) => {
-    navigator.clipboard.writeText(content).then(() => {
-      setShowCopiedTooltip(true)
-      setTimeout(() => { setShowCopiedTooltip(false) }, 2000)
-    }).catch(() => {
-      console.error("couldn't copy")
-    })
-  }, [])
-
-  const selectContent = useCallback(() => {
-    if (!inputField.current) {
-      return
-    }
-    inputField.current.focus()
-    inputField.current.setSelectionRange(0, inputField.current.value.length)
-  }, [inputField])
-
-  return (
-    <Fragment>
-      <Overlay target={inputField} show={showCopiedTooltip} placement="top">
-        {(props) => (
-          <Tooltip id={'copied_' + content} {...props}>
-            <Trans i18nKey={'landing.versionInfo.successfullyCopied'}/>
-          </Tooltip>
-        )}
-      </Overlay>
-
-      <InputGroup className="my-3">
-        <FormControl readOnly={true} ref={inputField} className={'text-center'} value={content} onMouseEnter={selectContent} />
-        <InputGroup.Append>
-          <Button variant="outline-secondary" onClick={() => copyToClipboard(content)} title={'Copy'}>
-            <ForkAwesomeIcon icon='files-o'/>
-          </Button>
-        </InputGroup.Append>
-      </InputGroup>
-    </Fragment>
-  )
-}

src/components/common/copyable/copy-overlay.tsx

@@ -0,0 +1,56 @@
+import React, { RefObject, useCallback, useEffect, useState } from 'react'
+import { Overlay, Tooltip } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { v4 as uuid } from 'uuid'
+import { ShowIf } from '../show-if/show-if'
+
+export interface CopyOverlayProps {
+  content: string
+  clickComponent: RefObject<HTMLElement>
+}
+
+export const CopyOverlay: React.FC<CopyOverlayProps> = ({ content, clickComponent }) => {
+  useTranslation()
+  const [showCopiedTooltip, setShowCopiedTooltip] = useState(false)
+  const [error, setError] = useState(false)
+  const [tooltipId] = useState<string>(() => uuid())
+
+  const copyToClipboard = useCallback((content: string) => {
+    navigator.clipboard.writeText(content).then(() => {
+      setError(false)
+    }).catch(() => {
+      setError(true)
+      console.error("couldn't copy")
+    }).finally(() => {
+      setShowCopiedTooltip(true)
+      setTimeout(() => { setShowCopiedTooltip(false) }, 2000)
+    })
+  }, [])
+
+  useEffect(() => {
+    if (clickComponent && clickComponent.current) {
+      clickComponent.current.addEventListener('click', () => copyToClipboard(content))
+      const clickComponentSaved = clickComponent.current
+      return () => {
+        if (clickComponentSaved) {
+          clickComponentSaved.removeEventListener('click', () => copyToClipboard(content))
+        }
+      }
+    }
+  }, [clickComponent, copyToClipboard, content])
+
+  return (
+    <Overlay target={clickComponent} show={showCopiedTooltip} placement="top">
+      {(props) => (
+        <Tooltip id={`copied_${tooltipId}`} {...props}>
+          <ShowIf condition={error}>
+            <Trans i18nKey={'common.copyError'}/>
+          </ShowIf>
+          <ShowIf condition={!error}>
+            <Trans i18nKey={'common.successfullyCopied'}/>
+          </ShowIf>
+        </Tooltip>
+      )}
+    </Overlay>
+  )
+}

src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx

@@ -0,0 +1,26 @@
+import React, { Fragment, useRef } from 'react'
+import { Button } from 'react-bootstrap'
+import { Variant } from 'react-bootstrap/types'
+import { useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
+import { CopyOverlay } from '../copy-overlay'
+
+export interface CopyToClipboardButtonProps {
+  content: string
+  size?: 'sm' | 'lg'
+  variant?: Variant
+}
+
+export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({ content, size = 'sm', variant = 'dark' }) => {
+  const { t } = useTranslation()
+  const button = useRef<HTMLButtonElement>(null)
+
+  return (
+    <Fragment>
+      <Button ref={button} size={size} variant={variant} title={t('renderer.highlightCode.copyCode')}>
+        <ForkAwesomeIcon icon='files-o'/>
+      </Button>
+      <CopyOverlay content={content} clickComponent={button}/>
+    </Fragment>
+  )
+}

src/components/common/copyable/copyable-field/copyable-field.tsx

@@ -0,0 +1,28 @@
+import React, { Fragment, useRef } from 'react'
+import { Button, FormControl, InputGroup } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
+import { CopyOverlay } from '../copy-overlay'
+
+export interface CopyableFieldProps {
+  content: string
+}
+
+export const CopyableField: React.FC<CopyableFieldProps> = ({ content }) => {
+  useTranslation()
+  const button = useRef<HTMLButtonElement>(null)
+
+  return (
+    <Fragment>
+      <InputGroup className="my-3">
+        <FormControl readOnly={true} className={'text-center'} value={content} />
+        <InputGroup.Append>
+          <Button variant="outline-secondary" ref={button} title={'Copy'}>
+            <ForkAwesomeIcon icon='files-o'/>
+          </Button>
+        </InputGroup.Append>
+      </InputGroup>
+      <CopyOverlay content={content} clickComponent={button}/>
+    </Fragment>
+  )
+}

src/components/editor/document-bar/buttons/share-link-button.tsx

@@ -1,9 +1,9 @@
 import React, { Fragment, useState } from 'react'
 import { Modal } from 'react-bootstrap'
 import { Trans } from 'react-i18next'
-import { CopyableField } from '../../../common/copyable-field/copyable-field'
-import { CommonModal } from '../../../common/modals/common-modal'
+import { CopyableField } from '../../../common/copyable/copyable-field/copyable-field'
 import { TranslatedIconButton } from '../../../common/icon-button/translated-icon-button'
+import { CommonModal } from '../../../common/modals/common-modal'
 
 export const ShareLinkButton: React.FC = () => {
   const [showReadOnly, setShowReadOnly] = useState(false)

src/components/landing-layout/footer/version-info.tsx

@@ -1,3 +1,4 @@
+import equal from 'fast-deep-equal'
 import React, { Fragment, useState } from 'react'
 import { Button, Col, Modal, Row } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
@@ -5,10 +6,9 @@ import { useSelector } from 'react-redux'
 import { Link } from 'react-router-dom'
 import { ApplicationState } from '../../../redux'
 import frontendVersion from '../../../version.json'
+import { CopyableField } from '../../common/copyable/copyable-field/copyable-field'
 import { TranslatedExternalLink } from '../../common/links/translated-external-link'
 import { ShowIf } from '../../common/show-if/show-if'
-import { CopyableField } from '../../common/copyable-field/copyable-field'
-import equal from 'fast-deep-equal'
 
 export const VersionInfo: React.FC = () => {
   const [show, setShow] = useState(false)

src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx

@@ -1,6 +1,8 @@
 import hljs from 'highlight.js'
 import React, { Fragment, useMemo } from 'react'
 import ReactHtmlParser from 'react-html-parser'
+import { CopyToClipboardButton } from '../../../../common/copyable/copy-to-clipboard-button/copy-to-clipboard-button'
+import '../../../utils/button-inside.scss'
 import './highlighted-code.scss'
 
 export interface HighlightedCodeProps {
@@ -42,18 +44,22 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
   }, [code, language])
 
   return (
-    <code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
-      {
-        highlightedCode
-          .map((line, index) => {
-            return <Fragment key={index}>
-              <span className={'linenumber'} data-line-number={(startLineNumber || 1) + index}/>
-              <div className={'codeline'}>
-                {line}
-              </div>
-            </Fragment>
-          })
-      }
-
-    </code>)
+    <Fragment>
+      <code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
+        {
+          highlightedCode
+            .map((line, index) => (
+              <Fragment key={index}>
+                <span className={'linenumber'} data-line-number={(startLineNumber || 1) + index}/>
+                <div className={'codeline'}>
+                  {line}
+                </div>
+              </Fragment>
+            ))
+        }
+      </code>
+      <div className={'text-right button-inside'}>
+        <CopyToClipboardButton content={code}/>
+      </div>
+    </Fragment>)
 }

src/components/markdown-renderer/utils/button-inside.scss

@@ -0,0 +1,3 @@
+.button-inside {
+  margin-top: -31px;
+}

yarn.lock

@@ -2355,6 +2355,11 @@
   dependencies:
     "@types/jest" "*"
 
+"@types/uuid@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.0.tgz#215c231dff736d5ba92410e6d602050cce7e273f"
+  integrity sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==
+
 "@types/warning@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
@@ -14014,6 +14019,11 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.0.tgz#ab738085ca22dc9a8c92725e459b1d507df5d6ea"
+  integrity sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ==
+
 v8-compile-cache@^2.0.3:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"