fix copy for latest safari

frontend/app/common/copy.test.ts

@@ -0,0 +1,25 @@
+import { doc } from 'prettier';
+import { copy } from './copy';
+
+describe('copy to clipboard', () => {
+  it('should call `execCommand` for old browser', async () => {
+    document.execCommand = jest.fn(() => true);
+
+    await copy('text');
+    expect(document.execCommand).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call `clipboard.write` for new browser', async () => {
+    const clipboardWrite = jest.fn(() => Promise.resolve());
+    window.ClipboardItem = jest.fn();
+
+    Object.defineProperty(navigator, 'clipboard', {
+      value: {
+        write: clipboardWrite,
+      },
+    });
+
+    await copy('text');
+    expect(clipboardWrite).toHaveBeenCalledTimes(1);
+  });
+});

frontend/app/common/copy.ts

@@ -1,4 +1,10 @@
-export function copy(content: string): boolean {
+export async function copy(content: string): Promise<void> {
+  // Use new API for modern browsers
+  if ('clipboard' in window.navigator) {
+    const blob = new Blob([content], { type: 'text/plain' });
+    return navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+  }
+
   // We use `div` instead of `input` or `textarea` because we want to copy styles
   const container = document.createElement('div');
   const previouslyFocusedElement = document.activeElement as HTMLElement;
@@ -14,7 +20,7 @@ export function copy(content: string): boolean {
 
   document.body.appendChild(container);
 
-  let selection = window.getSelection();
+  const selection = window.getSelection();
   // save original selection
   const originalRange = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
   const range = document.createRange();
@@ -26,8 +32,6 @@ export function copy(content: string): boolean {
     selection.addRange(range);
   }
 
-  document.execCommand('copy');
-
   let success = false;
   try {
     success = document.execCommand('copy');
@@ -49,5 +53,5 @@ export function copy(content: string): boolean {
     previouslyFocusedElement.focus();
   }
 
-  return success;
+  return success ? Promise.resolve() : Promise.reject();
 }

frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx

@@ -153,6 +153,7 @@ export const SubscribeByEmailForm: FunctionComponent = () => {
             break;
         }
       } catch (e) {
+        // @ts-ignore
         setError(extractErrorMessageFromResponse(e, intl));
       } finally {
         setLoading(false);
@@ -213,6 +214,7 @@ export const SubscribeByEmailForm: FunctionComponent = () => {
       previousStep.current = Step.Subscribed;
       setStep(Step.Unsubscribed);
     } catch (e) {
+      // @ts-ignore
       setError(extractErrorMessageFromResponse(e, intl));
     } finally {
       setLoading(false);

frontend/app/components/comment-form/comment-form.tsx

@@ -217,6 +217,7 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
       this.setState({
         isDisabled: false,
         isErrorShown: true,
+        // @ts-ignore
         errorMessage: extractErrorMessageFromResponse(e, this.props.intl),
       });
       return;

frontend/app/components/comment/comment.tsx

@@ -308,12 +308,16 @@ export class Comment extends Component<CommentProps, State> {
     parentCommentNode.scrollIntoView();
   };
 
-  copyComment = () => {
-    const username = this.props.data.user.name;
+  copyComment = async () => {
+    const { name } = this.props.data.user;
     const time = getLocalDatetime(this.props.intl, new Date(this.props.data.time));
-    const text = this.textNode.current?.textContent || '';
+    const text = this.textNode.current?.textContent ?? '';
 
-    copy(`<b>${username}</b>&nbsp;${time}<br>${text.replace(/\n+/g, '<br>')}`);
+    try {
+      await copy(`${name} ${time}\n${text}`);
+    } catch (e) {
+      console.log(e);
+    }
 
     this.setState({ isCopied: true }, () => {
       setTimeout(() => this.setState({ isCopied: false }), 3000);