feat(json-crdt-peritext-ui): 🎸 enable copy buttom

Author: streamich

package.json

@@ -106,6 +106,7 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "benchmark": "^2.1.4",
+    "clipboard-copy": "^4.0.1",
     "collaborative-editor": "^2.8.0",
     "collaborative-input": "^1.6.1",
     "collaborative-ui": "^1.6.0",

src/json-crdt-peritext-ui/plugins/toolbar/components/CopyButton/index.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {useT} from 'use-t';
+import {BasicButton, BasicButtonProps} from 'nice-ui/lib/2-inline-block/BasicButton';
+import {Iconista} from 'nice-ui/lib/icons/Iconista';
+import {BasicTooltip, BasicTooltipProps} from 'nice-ui/lib/4-card/BasicTooltip';
+import useMountedState from 'react-use/lib/useMountedState';
+const copy = require('clipboard-copy'); // eslint-disable-line
+
+const anchor = {horizontal: true, center: true};
+
+export interface CopyButtonProps extends BasicButtonProps {
+  onCopy: () => string;
+  tooltip?: Partial<BasicTooltipProps>;
+}
+
+export const CopyButton: React.FC<CopyButtonProps> = ({onCopy, tooltip, ...rest}) => {
+  const [t] = useT();
+  const isMounted = useMountedState();
+  const [copied, setCopied] = React.useState(false);
+
+  const handleClick = (e: React.MouseEvent) => {
+    setCopied(true);
+    copy(onCopy());
+    setTimeout(() => {
+      if (isMounted()) setCopied(false);
+    }, 2000);
+    rest.onClick?.(e);
+  };
+
+  return (
+    <BasicTooltip
+      anchor={anchor}
+      show={copied || void 0}
+      renderTooltip={copied ? () => t('Copied!') : () => t('Copy')}
+      {...tooltip}
+    >
+      <BasicButton {...rest} onClick={handleClick}>
+        <Iconista
+          key={copied ? 'check' : 'copy'}
+          set={copied ? 'atlaskit' : 'lucide'}
+          icon={copied ? 'check' : 'copy'}
+          width={16}
+          height={16}
+        />
+      </BasicButton>
+    </BasicTooltip>
+  );
+};

src/json-crdt-peritext-ui/plugins/toolbar/components/UrlDisplayLayout.tsx

@@ -9,6 +9,7 @@ import {Iconista} from 'nice-ui/lib/icons/Iconista';
 import {Split} from 'nice-ui/lib/3-list-item/Split';
 import {BasicTooltip} from 'nice-ui/lib/4-card/BasicTooltip';
 import {useT} from 'use-t';
+import {CopyButton} from './CopyButton';
 
 const iconColumn = 40;
 
@@ -86,11 +87,7 @@ export const UrlDisplayLayout: React.FC<UrlDisplayLayoutProps> = ({url}) => {
           </div>
         </div>
         <div className={buttonGroupClass}>
-          <BasicTooltip nowrap renderTooltip={() => t('Copy')}>
-            <BasicButton width={48} height={48} round>
-              <Iconista width={16} height={16} set={'lucide'} icon='copy' />
-            </BasicButton>
-          </BasicTooltip>
+          <CopyButton width={48} height={48} round onCopy={() => url} tooltip={{anchor: {}}} />
           <BasicTooltip nowrap renderTooltip={() => t('Open')}>
             <BasicButton width={48} height={48} round>
               <Iconista width={16} height={16} set={'lucide'} icon='external-link' />