copy button

package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ant-design/icons": "^4.6.3",
     "antd": "^4.16.13",
     "highlight.js": "^11.2.0",
     "react": "17.0.2",

src/components/CodeBlocks/Css.tsx

@@ -5,6 +5,7 @@ import { ChromePicker } from 'react-color';
 import styled from 'styled-components';
 import shallow from 'zustand/shallow';
 import { rgbToString } from './Output';
+import { SectionTitle } from './SectionTitle';
 import SliderInput from './SliderInput';
 import { useInputStore } from '~/components/store';
 
@@ -63,6 +64,8 @@ export const CssControls = () => {
 }`;
   return (
     <div>
+      <SectionTitle title="2. CSS Gradient" />
+
       <pre className="hljs">
         <code
           dangerouslySetInnerHTML={{

src/components/CodeBlocks/Filter.tsx

@@ -1,12 +1,11 @@
 import { Form, Switch } from 'antd';
 import hljs from 'highlight.js/lib/core';
-import cssLang from 'highlight.js/lib/languages/css';
 import { useEffect, useState } from 'react';
 import shallow from 'zustand/shallow';
 import { symbols, rgbToString } from './Output';
+import { SectionTitle } from './SectionTitle';
 import SliderInput from './SliderInput';
 import { useInputStore } from '~/components/store';
-hljs.registerLanguage('css', cssLang);
 
 export const FilterControls = () => {
   const [svgProps, cssProps, setFilterProps] = useInputStore(
@@ -51,6 +50,8 @@ export const FilterControls = () => {
 
   return (
     <div>
+      <SectionTitle title="3. SVG + Gradient + CSSfilter" copyText={resultCssDisplay} />
+
       <pre className="hljs">
         <code
           dangerouslySetInnerHTML={{

src/components/CodeBlocks/SectionTitle.tsx

@@ -0,0 +1,30 @@
+import { CopyOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import CopyToClipboard from '~/components/CopyToClipboard';
+interface ISectionTitle {
+  title: string;
+  copyText?: string;
+}
+export const SectionTitle: React.FC<ISectionTitle> = ({ title, copyText }) => {
+  return (
+    <TitleBar>
+      <H2>{title}</H2>
+      {copyText && (
+        <CopyToClipboard textToCopy={copyText}>
+          <Button icon={<CopyOutlined />}>Copy</Button>
+        </CopyToClipboard>
+      )}
+    </TitleBar>
+  );
+};
+
+const H2 = styled.h2`
+  margin: 28px 0 10px 0;
+`;
+const TitleBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;

src/components/CodeBlocks/Svg.tsx

@@ -2,6 +2,7 @@ import { Form } from 'antd';
 import hljs from 'highlight.js/lib/core';
 import { useEffect, useState } from 'react';
 import shallow from 'zustand/shallow';
+import { SectionTitle } from './SectionTitle';
 import SliderInput from './SliderInput';
 import { useInputStore } from '~/components/store';
 
@@ -31,6 +32,7 @@ export const SvgControls = () => {
 
   return (
     <div>
+      <SectionTitle title="1. SVG" copyText={svgString} />
       <pre className="hljs">
         <code
           dangerouslySetInnerHTML={{

src/components/CopyToClipboard/index.tsx

@@ -1,13 +1,13 @@
-import { Tooltip } from 'antd'
-import { TooltipPlacement } from 'antd/lib/tooltip'
-import React, { SyntheticEvent } from 'react'
+import { Tooltip } from 'antd';
+import { TooltipPlacement } from 'antd/lib/tooltip';
+import React, { SyntheticEvent } from 'react';
 
 interface ICopyToClipboard {
-  textToCopy: string
-  timeoutInMs?: number
-  initialText?: string | null
-  successText?: string
-  placement?: TooltipPlacement
+  textToCopy: string;
+  timeoutInMs?: number;
+  initialText?: string | null;
+  successText?: string;
+  placement?: TooltipPlacement;
 }
 
 const CopyToClipboard: React.FC<ICopyToClipboard> = ({
@@ -18,19 +18,19 @@ const CopyToClipboard: React.FC<ICopyToClipboard> = ({
   placement = 'top',
   initialText = 'Copy',
 }) => {
-  const [isCopied, setIsCopied] = React.useState(false)
+  const [isCopied, setIsCopied] = React.useState(false);
   const copyUrlToClipboard = async (e: SyntheticEvent) => {
     try {
-      await clipboardCopy(textToCopy)
-      e.stopPropagation()
-      setIsCopied(true)
+      await clipboardCopy(textToCopy);
+      e.stopPropagation();
+      setIsCopied(true);
       setTimeout(() => {
-        setIsCopied(false)
-      }, timeoutInMs)
+        setIsCopied(false);
+      }, timeoutInMs);
     } catch {
       //noop
     }
-  }
+  };
   return (
     <Tooltip title={isCopied ? successText : initialText} placement={placement}>
       {/* eslint-disable-next-line  jsx-a11y/click-events-have-key-events*/}
@@ -43,70 +43,70 @@ const CopyToClipboard: React.FC<ICopyToClipboard> = ({
         {children}
       </div>
     </Tooltip>
-  )
-}
-export default CopyToClipboard
+  );
+};
+export default CopyToClipboard;
 
 /** a modified version of https://github.com/feross/clipboard-copy
  * copy/pasted bc it's not an ES module
  * TODO: replace this with a package when there's a good one that's stable */
 function makeError() {
-  return new DOMException('The request is not allowed', 'NotAllowedError')
+  return new DOMException('The request is not allowed', 'NotAllowedError');
 }
 
 async function copyClipboardApi(text: string) {
   // Use the Async Clipboard API when available. Requires a secure browsing
   // context (i.e. HTTPS)
   if (!navigator.clipboard) {
-    throw makeError()
+    throw makeError();
   }
-  return navigator.clipboard.writeText(text)
+  return navigator.clipboard.writeText(text);
 }
 
 async function copyExecCommand(text: string) {
   // Put the text to copy into a <span>
-  const span = document.createElement('span')
-  span.textContent = text
+  const span = document.createElement('span');
+  span.textContent = text;
 
   // Preserve consecutive spaces and newlines
-  span.style.whiteSpace = 'pre'
-  span.style.webkitUserSelect = 'auto'
-  span.style.userSelect = 'all'
+  span.style.whiteSpace = 'pre';
+  span.style.webkitUserSelect = 'auto';
+  span.style.userSelect = 'all';
 
   // Add the <span> to the page
-  document.body.appendChild(span)
+  document.body.appendChild(span);
 
   // Make a selection object representing the range of text selected by the user
-  const selection = window.getSelection()
-  const range = window.document.createRange()
+  const selection = window.getSelection();
+  const range = window.document.createRange();
   if (selection) {
-    selection.removeAllRanges()
-    range.selectNode(span)
-    selection.addRange(range)
+    selection.removeAllRanges();
+    range.selectNode(span);
+    selection.addRange(range);
 
     // Copy text to the clipboard
-    let success = false
+    let success = false;
     try {
-      success = window.document.execCommand('copy')
+      success = window.document.execCommand('copy');
     } finally {
       // Cleanup
-      selection.removeAllRanges()
-      window.document.body.removeChild(span)
+      selection.removeAllRanges();
+      window.document.body.removeChild(span);
     }
 
-    if (!success) throw makeError()
+    if (!success) throw makeError();
   }
 }
 
 async function clipboardCopy(text: string) {
   try {
-    await copyClipboardApi(text)
+    await copyClipboardApi(text);
   } catch (err) {
     // ...Otherwise, use document.execCommand() fallback
     try {
-      await copyExecCommand(text)
+      await copyExecCommand(text);
     } catch (err2) {
-      throw err2 || err || makeError()
+      throw err2 || err || makeError();
     }
   }
 }

src/pages/index.tsx

@@ -16,11 +16,8 @@ const IndexPage = () => {
           <Scroll>
             <Space h={30} />
             <h1>Grainy Gradient playground</h1>
-            <h2>1. SVG</h2>
             <SvgControls />
-            <h2>2. CSS Gradient</h2>
             <CssControls />
-            <h2>3. CSS Filter</h2>
             <FilterControls />
             <Space h={60} />
           </Scroll>

src/styles/globals.css

@@ -26,4 +26,11 @@ pre {
 
 h2 {
   margin-top: 2em;
+}
+
+::selection {
+  background: lightblue; /* WebKit/Blink Browsers */
+}
+::-moz-selection {
+  background: lightblue; /* Gecko Browsers */
 }