From 45a60cbafef2647d1ed58f3d300783b5be5ebc46 Mon Sep 17 00:00:00 2001
From: Michael Ramos <mdramos8@gmail.com>
Date: Sat, 1 Aug 2026 01:49:57 -0700
Subject: [PATCH 1/2] fix(ui): fall back to legacy copy in insecure browser
 contexts

navigator.clipboard only exists in secure contexts. Remote mode serves
plain HTTP on a non-localhost host, so every bare
navigator.clipboard.writeText call threw TypeError and copy buttons
silently broke.

Add copyTextToClipboard(text): Promise<boolean> to
packages/ui/utils/clipboard.ts: it tries the async Clipboard API
(guarded against synchronous throws), falls back to the existing
copy-event plus execCommand path, reports success as a boolean, and
never throws. copyTextWithFallback now returns whether the copy
happened and accepts an optional focusOwner; copyTextPreservingFocus
keeps its exported signature and behavior unchanged.

Route all bare call sites through the helper, preserving each site's
UX: Copied states only flip on success, error toasts and console
errors remain for the failure case, fire-and-forget sites stay
fire-and-forget. GoalSetupSurface gains the fallback and keeps its
error surface for the all-strategies-failed case.

Add DOM-gated unit tests for the helper and register them in CI.

Closes #1173
---
 .github/workflows/test.yml                    |   1 +
 packages/editor/App.tsx                       |  13 +-
 packages/review-editor/App.tsx                |  26 ++--
 .../review-editor/components/CopyButton.tsx   |   6 +-
 .../review-editor/components/FileTreeNode.tsx |   7 +-
 .../components/ReviewSidebar.tsx              |   8 +-
 packages/ui/components/AnnotationToolbar.tsx  |  16 +--
 packages/ui/components/CodeFilePopout.tsx     |   8 +-
 packages/ui/components/ExportModal.tsx        |   8 +-
 packages/ui/components/MenuVersionSection.tsx |   8 +-
 packages/ui/components/OpenInAppButton.tsx    |   7 +-
 packages/ui/components/Viewer.tsx             |   8 +-
 packages/ui/components/blocks/CodeBlock.tsx   |   8 +-
 packages/ui/components/blocks/TablePopout.tsx |  15 +--
 .../ui/components/blocks/TableToolbar.tsx     |  15 +--
 .../goal-setup/GoalSetupSurface.tsx           |   5 +-
 packages/ui/components/settings/HooksTab.tsx  |   4 +-
 packages/ui/hooks/useArchive.ts               |   3 +-
 packages/ui/utils/clipboard.test.ts           | 125 ++++++++++++++++++
 packages/ui/utils/clipboard.ts                |  33 ++++-
 20 files changed, 232 insertions(+), 92 deletions(-)
 create mode 100644 packages/ui/utils/clipboard.test.ts

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index f2df339cc..aed0fe265 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -48,6 +48,7 @@ jobs:
           packages/ui/annotationDraftPersistence.test.tsx
           packages/ui/codeAnnotationDraftPersistence.test.tsx
           packages/ui/components/html-viewer/srcdoc.test.ts
+          packages/ui/utils/clipboard.test.ts
           packages/ui/components/InlineMarkdown.resolveLinkedDoc.test.tsx
           packages/ui/components/MarkdownDiff.frozen.test.tsx
           packages/ui/components/MarkdownEditor.extensions.test.tsx
diff --git a/packages/editor/App.tsx b/packages/editor/App.tsx
index 4382b9146..34ab8ff21 100644
--- a/packages/editor/App.tsx
+++ b/packages/editor/App.tsx
@@ -25,6 +25,7 @@ import { getCallbackConfig, CallbackAction, executeCallback } from '@plannotator
 import { useAgents } from '@plannotator/ui/hooks/useAgents';
 import { useActiveSection } from '@plannotator/ui/hooks/useActiveSection';
 import { storage } from '@plannotator/ui/utils/storage';
+import { copyTextToClipboard } from '@plannotator/ui/utils/clipboard';
 import { configStore, useConfigValue } from '@plannotator/ui/config';
 import { CompletionOverlay } from '@plannotator/ui/components/CompletionOverlay';
 import { useUpdateCheck } from '@plannotator/ui/hooks/useUpdateCheck';
@@ -3829,10 +3830,9 @@ const App: React.FC = () => {
   // (utils/agentInstructions.ts) so it's easy to edit independently of UI code.
   const handleCopyAgentInstructions = async () => {
     const payload = buildPlanAgentInstructions(window.location.origin);
-    try {
-      await navigator.clipboard.writeText(payload);
+    if (await copyTextToClipboard(payload)) {
       toast.success('Agent instructions copied');
-    } catch {
+    } else {
       toast.error('Failed to copy');
     }
   };
@@ -3845,10 +3845,9 @@ const App: React.FC = () => {
       toast.error('Failed to create share link');
       return;
     }
-    try {
-      await navigator.clipboard.writeText(url);
+    if (await copyTextToClipboard(url)) {
       toast.success('Share link copied');
-    } catch {
+    } else {
       toast.error('Failed to copy');
     }
   };
@@ -4726,7 +4725,7 @@ const App: React.FC = () => {
             onClose={() => setIsPanelOpen(false)}
             onQuickCopy={async () => {
               const output = getCurrentFeedbackPayload();
-              await navigator.clipboard.writeText(wrapCopiedFeedback(output));
+              await copyTextToClipboard(wrapCopiedFeedback(output));
             }}
             onShare={canShareCurrentSession ? () => { setIsPanelOpen(false); setInitialExportTab('share'); setShowExport(true); } : undefined}
             otherFileAnnotations={otherFileAnnotations}
diff --git a/packages/review-editor/App.tsx b/packages/review-editor/App.tsx
index ec97c9614..7fb8a2f8d 100644
--- a/packages/review-editor/App.tsx
+++ b/packages/review-editor/App.tsx
@@ -107,6 +107,7 @@ import { TextShimmer } from '@plannotator/ui/components/TextShimmer';
 import type { PRMetadata } from '@plannotator/shared/pr-types';
 import type { PRDiffScope, PRDiffScopeOption, PRStackInfo, PRStackTree } from '@plannotator/shared/pr-stack';
 import { altKey } from '@plannotator/ui/utils/platform';
+import { copyTextToClipboard } from '@plannotator/ui/utils/clipboard';
 import { TourDialog } from './components/tour/TourDialog';
 import { DEMO_TOUR_ID } from './demoTour';
 import { GuideScreen } from './components/guide/GuideScreen';
@@ -620,10 +621,9 @@ const ReviewApp: React.FC = () => {
   // module (utils/reviewAgentInstructions.ts) so it's easy to edit independently.
   const handleCopyAgentInstructions = useCallback(async () => {
     const payload = buildReviewAgentInstructions(window.location.origin);
-    try {
-      await navigator.clipboard.writeText(payload);
+    if (await copyTextToClipboard(payload)) {
       toast.success('Agent instructions copied');
-    } catch {
+    } else {
       toast.error('Failed to copy');
     }
   }, []);
@@ -2483,12 +2483,11 @@ const ReviewApp: React.FC = () => {
   // Copy raw diff to clipboard
   const handleCopyDiff = useCallback(async () => {
     if (!diffData) return;
-    try {
-      await navigator.clipboard.writeText(diffData.rawPatch);
+    if (await copyTextToClipboard(diffData.rawPatch)) {
       setCopyRawDiffStatus('success');
       setTimeout(() => setCopyRawDiffStatus('idle'), 2000);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
       setCopyRawDiffStatus('error');
       setTimeout(() => setCopyRawDiffStatus('idle'), 2000);
     }
@@ -2523,12 +2522,11 @@ const ReviewApp: React.FC = () => {
       setShowNoAnnotationsDialog(true);
       return;
     }
-    try {
-      await navigator.clipboard.writeText(feedbackMarkdown);
+    if (await copyTextToClipboard(feedbackMarkdown)) {
       setCopyFeedback('Feedback copied!');
       setTimeout(() => setCopyFeedback(null), 2000);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
       setCopyFeedback('Failed to copy');
       setTimeout(() => setCopyFeedback(null), 2000);
     }
@@ -3661,8 +3659,8 @@ const ReviewApp: React.FC = () => {
               </div>
               <div className="p-4 border-t border-border flex justify-end gap-2">
                 <button
-                  onClick={async () => {
-                    await navigator.clipboard.writeText(feedbackMarkdown);
+                  onClick={() => {
+                    void copyTextToClipboard(feedbackMarkdown);
                   }}
                   className="px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:opacity-90 transition-colors"
                 >
@@ -3708,7 +3706,7 @@ const ReviewApp: React.FC = () => {
                 <div>
                   <span className="text-[10px] uppercase tracking-wider text-muted-foreground/60 font-semibold">Path</span>
                   <button
-                    onClick={() => navigator.clipboard.writeText((agentCwd || gitContext?.cwd)!)}
+                    onClick={() => { void copyTextToClipboard((agentCwd || gitContext?.cwd)!); }}
                     className="mt-1 w-full text-left font-mono text-xs bg-muted/50 border border-border/50 rounded-md px-3 py-2 text-foreground hover:bg-muted transition-colors cursor-pointer break-all"
                     title="Click to copy"
                   >
diff --git a/packages/review-editor/components/CopyButton.tsx b/packages/review-editor/components/CopyButton.tsx
index 5053fac16..c8004979a 100644
--- a/packages/review-editor/components/CopyButton.tsx
+++ b/packages/review-editor/components/CopyButton.tsx
@@ -1,5 +1,6 @@
 import type React from 'react';
 import { useState } from 'react';
+import { copyTextToClipboard } from '@plannotator/ui/utils/clipboard';
 
 interface CopyButtonProps {
   text: string;
@@ -29,12 +30,9 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ text, className = '', va
 
   const handleCopy = async (e: React.MouseEvent) => {
     e.stopPropagation();
-    try {
-      await navigator.clipboard.writeText(text);
+    if (await copyTextToClipboard(text)) {
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
-    } catch {
-      // Clipboard API may not be available
     }
   };
 
diff --git a/packages/review-editor/components/FileTreeNode.tsx b/packages/review-editor/components/FileTreeNode.tsx
index 97b7d9d6c..577453659 100644
--- a/packages/review-editor/components/FileTreeNode.tsx
+++ b/packages/review-editor/components/FileTreeNode.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ContextMenu } from '@base-ui/react/context-menu';
 import type { FileTreeNode as TreeNode } from '../utils/buildFileTree';
 import { ViewedControl, ChangeTypeLetter, StageControl, AnnotationBadge, DiffCounts, CommittedDot } from './FileRowBits';
+import { copyTextToClipboard } from '@plannotator/ui/utils/clipboard';
 
 interface FileTreeNodeProps {
   node: TreeNode;
@@ -186,20 +187,20 @@ export const FileTreeNodeItem: React.FC<FileTreeNodeProps> = ({
         <ContextMenu.Positioner className="z-50">
           <ContextMenu.Popup className="min-w-[160px] bg-popover text-popover-foreground border border-border rounded shadow-lg overflow-hidden py-1 transition-opacity data-starting-style:opacity-0 data-ending-style:opacity-0">
           <ContextMenu.Item
-            onClick={() => navigator.clipboard.writeText(node.path)}
+            onClick={() => { void copyTextToClipboard(node.path); }}
             className="flex items-center gap-2 mx-1 px-2 py-1.5 text-xs rounded cursor-pointer outline-none text-foreground/80 data-[highlighted]:bg-muted data-[highlighted]:text-foreground"
           >
             Copy path
           </ContextMenu.Item>
           <ContextMenu.Item
-            onClick={() => navigator.clipboard.writeText(node.name)}
+            onClick={() => { void copyTextToClipboard(node.name); }}
             className="flex items-center gap-2 mx-1 px-2 py-1.5 text-xs rounded cursor-pointer outline-none text-foreground/80 data-[highlighted]:bg-muted data-[highlighted]:text-foreground"
           >
             Copy filename
           </ContextMenu.Item>
           {repoRoot && (
             <ContextMenu.Item
-              onClick={() => navigator.clipboard.writeText(`${repoRoot.replace(/\/$/, '')}/${node.path}`)}
+              onClick={() => { void copyTextToClipboard(`${repoRoot.replace(/\/$/, '')}/${node.path}`); }}
               className="flex items-center gap-2 mx-1 px-2 py-1.5 text-xs rounded cursor-pointer outline-none text-foreground/80 data-[highlighted]:bg-muted data-[highlighted]:text-foreground"
             >
               Copy full path
diff --git a/packages/review-editor/components/ReviewSidebar.tsx b/packages/review-editor/components/ReviewSidebar.tsx
index 84ac7ad5d..5f89c4440 100644
--- a/packages/review-editor/components/ReviewSidebar.tsx
+++ b/packages/review-editor/components/ReviewSidebar.tsx
@@ -16,6 +16,7 @@ import type { AIChatEntry } from '../hooks/useAIChat';
 import type { AgentJobInfo, AgentCapabilities } from '@plannotator/ui/types';
 import type { DiffFile } from '../types';
 import type { AIProviderOption } from '@plannotator/ui/utils/aiProvider';
+import { copyTextToClipboard } from '@plannotator/ui/utils/clipboard';
 import { artifactAnchorLabel, artifactAnnotationQuote } from '../utils/artifactAnnotations';
 
 export type ReviewSidebarTab = 'annotations' | 'ai' | 'agents';
@@ -181,12 +182,11 @@ export const ReviewSidebar: React.FC<ReviewSidebarProps> = /* React.memo */({
 
   const handleQuickCopy = async () => {
     if (!feedbackMarkdown) return;
-    try {
-      await navigator.clipboard.writeText(feedbackMarkdown);
+    if (await copyTextToClipboard(feedbackMarkdown)) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch (e) {
-      console.error('Failed to copy:', e);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
diff --git a/packages/ui/components/AnnotationToolbar.tsx b/packages/ui/components/AnnotationToolbar.tsx
index 22c954125..18ba378a5 100644
--- a/packages/ui/components/AnnotationToolbar.tsx
+++ b/packages/ui/components/AnnotationToolbar.tsx
@@ -3,6 +3,7 @@ import { AnnotationType } from "../types";
 import { createPortal } from "react-dom";
 import { useDismissOnOutsideAndEscape } from "../hooks/useDismissOnOutsideAndEscape";
 import { type QuickLabel, getQuickLabels } from "../utils/quickLabels";
+import { copyTextToClipboard } from "../utils/clipboard";
 import { FloatingQuickLabelPicker } from "./FloatingQuickLabelPicker";
 
 type PositionMode = 'center-above' | 'top-right';
@@ -72,19 +73,10 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
       const codeEl = element.querySelector('code');
       textToCopy = codeEl?.textContent || element.textContent || '';
     }
-    try {
-      await navigator.clipboard.writeText(textToCopy);
-    } catch {
-      const textarea = document.createElement('textarea');
-      textarea.value = textToCopy;
-      textarea.style.cssText = 'position:fixed;opacity:0';
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand('copy');
-      textarea.remove();
+    if (await copyTextToClipboard(textToCopy)) {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
     }
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1500);
   };
 
   // Update position on scroll/resize
diff --git a/packages/ui/components/CodeFilePopout.tsx b/packages/ui/components/CodeFilePopout.tsx
index b45404183..d1db3fe27 100644
--- a/packages/ui/components/CodeFilePopout.tsx
+++ b/packages/ui/components/CodeFilePopout.tsx
@@ -6,6 +6,7 @@ import { useTheme } from './ThemeProvider';
 import { CommentPopover } from './CommentPopover';
 import { ImageThumbnail } from './ImageThumbnail';
 import type { CodeAnnotation, ImageAttachment } from '../types';
+import { copyTextToClipboard } from '../utils/clipboard';
 
 export interface CodeFileAnnotationInput {
   filePath: string;
@@ -457,12 +458,11 @@ export const CodeFilePopout: React.FC<CodeFilePopoutProps> = ({
   }, [onAddAnnotation, openCommentForRange]);
 
   const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(contents);
+    if (await copyTextToClipboard(contents)) {
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
diff --git a/packages/ui/components/ExportModal.tsx b/packages/ui/components/ExportModal.tsx
index cd745362e..33e7ae3eb 100644
--- a/packages/ui/components/ExportModal.tsx
+++ b/packages/ui/components/ExportModal.tsx
@@ -11,6 +11,7 @@ import { getObsidianSettings, getEffectiveVaultPath } from '../utils/obsidian';
 import { getBearSettings } from '../utils/bear';
 import { getOctarineSettings } from '../utils/octarine';
 import { wrapFeedbackForAgent } from '../utils/parser';
+import { copyTextToClipboard } from '../utils/clipboard';
 import { OverlayScrollArea } from './OverlayScrollArea';
 
 /** POST body shape sent to the notes endpoint (mirrors what the Notes tab builds today). */
@@ -123,12 +124,11 @@ export const ExportModal: React.FC<ExportModalProps> = ({
   const isOctarineReady = octarineSettings.enabled && octarineSettings.workspace.trim().length > 0;
 
   const handleCopy = async (text: string, which: 'short' | 'full' | 'annotations') => {
-    try {
-      await navigator.clipboard.writeText(text);
+    if (await copyTextToClipboard(text)) {
       setCopied(which);
       setTimeout(() => setCopied(false), 2000);
-    } catch (e) {
-      console.error('Failed to copy:', e);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
diff --git a/packages/ui/components/MenuVersionSection.tsx b/packages/ui/components/MenuVersionSection.tsx
index 2caa5ff60..05dc9f883 100644
--- a/packages/ui/components/MenuVersionSection.tsx
+++ b/packages/ui/components/MenuVersionSection.tsx
@@ -3,6 +3,7 @@ import { TextShimmer } from './TextShimmer';
 import type { UpdateInfo } from '../hooks/useUpdateCheck';
 import type { Origin } from '@plannotator/core/agents';
 import { isWindows } from '../utils/platform';
+import { copyTextToClipboard } from '../utils/clipboard';
 
 const PI_INSTALL_COMMAND = 'pi install npm:@plannotator/pi-extension';
 
@@ -32,12 +33,11 @@ export const MenuVersionSection: React.FC<MenuVersionSectionProps> = ({
   const hasUpdate = !!updateInfo?.updateAvailable;
 
   const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(getInstallCommand(origin, isWSL));
+    if (await copyTextToClipboard(getInstallCommand(origin, isWSL))) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch (e) {
-      console.error('Failed to copy:', e);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
diff --git a/packages/ui/components/OpenInAppButton.tsx b/packages/ui/components/OpenInAppButton.tsx
index 28084e749..cf6535fee 100644
--- a/packages/ui/components/OpenInAppButton.tsx
+++ b/packages/ui/components/OpenInAppButton.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ChevronDown, Check, Copy, MoreHorizontal } from 'lucide-react';
 import { AppIcon } from './icons/AppIcon';
 import { getLastOpenInApp, setLastOpenInApp } from '../utils/storage';
+import { copyTextToClipboard } from '../utils/clipboard';
 import type { OpenInKind } from '@plannotator/core/open-in-apps';
 import {
   DropdownMenu,
@@ -163,11 +164,7 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
   };
 
   const copyText = async (text: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-    } catch {
-      /* ignore */
-    }
+    await copyTextToClipboard(text);
     setMenuOpen(false);
   };
 
diff --git a/packages/ui/components/Viewer.tsx b/packages/ui/components/Viewer.tsx
index a274eaca1..7e90e30b4 100644
--- a/packages/ui/components/Viewer.tsx
+++ b/packages/ui/components/Viewer.tsx
@@ -4,6 +4,7 @@ import hljs from 'highlight.js';
 import { AnnotationType, type Block, type Annotation, type EditorMode, type InputMethod, type ImageAttachment, type ActionsLabelMode } from '../types';
 import { computeListIndices, groupBlocks, type Frontmatter } from '../utils/parser';
 import { buildHeadingSlugMap } from '../utils/slugify';
+import { copyTextToClipboard } from '../utils/clipboard';
 import { BlockRenderer } from './BlockRenderer';
 import { CodeBlock } from './blocks/CodeBlock';
 import { TableBlock } from './blocks/TableBlock';
@@ -239,12 +240,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   const globalCommentButtonRef = useRef<HTMLButtonElement>(null);
 
   const handleCopyPlan = async () => {
-    try {
-      await navigator.clipboard.writeText(markdown);
+    if (await copyTextToClipboard(markdown)) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch (e) {
-      console.error('Failed to copy:', e);
+    } else {
+      console.error('Failed to copy');
     }
   };
   const containerRef = useRef<HTMLDivElement>(null);
diff --git a/packages/ui/components/blocks/CodeBlock.tsx b/packages/ui/components/blocks/CodeBlock.tsx
index 16bc6e442..18ac4db1e 100644
--- a/packages/ui/components/blocks/CodeBlock.tsx
+++ b/packages/ui/components/blocks/CodeBlock.tsx
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect, useCallback } from 'react';
 import hljs from 'highlight.js';
 import 'highlight.js/styles/github-dark.css';
 import type { Block } from '../../types';
+import { copyTextToClipboard } from '../../utils/clipboard';
 
 interface CodeBlockProps {
   block: Block;
@@ -26,12 +27,11 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ block, onHover, onLeave })
   }, [block.content, block.language]);
 
   const handleCopy = useCallback(async () => {
-    try {
-      await navigator.clipboard.writeText(block.content);
+    if (await copyTextToClipboard(block.content)) {
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   }, [block.content]);
 
diff --git a/packages/ui/components/blocks/TablePopout.tsx b/packages/ui/components/blocks/TablePopout.tsx
index 0a6853215..5bb4936b9 100644
--- a/packages/ui/components/blocks/TablePopout.tsx
+++ b/packages/ui/components/blocks/TablePopout.tsx
@@ -10,6 +10,7 @@ import {
   type SortingState,
 } from '@tanstack/react-table';
 import type { Block } from '../../types';
+import { copyTextToClipboard } from '../../utils/clipboard';
 import { InlineMarkdown } from '../InlineMarkdown';
 import { PopoutDialog } from '../PopoutDialog';
 import { parseTableContent, buildCsvFromRows, buildMarkdownTable } from './TableBlock';
@@ -99,22 +100,20 @@ const TablePopoutImpl: React.FC<TablePopoutProps> = ({
     );
 
   const handleCopyMarkdown = async () => {
-    try {
-      await navigator.clipboard.writeText(buildMarkdownTable(headers, getVisibleRowsData()));
+    if (await copyTextToClipboard(buildMarkdownTable(headers, getVisibleRowsData()))) {
       setCopiedMd(true);
       setTimeout(() => setCopiedMd(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
   const handleCopyCsv = async () => {
-    try {
-      await navigator.clipboard.writeText(buildCsvFromRows(headers, getVisibleRowsData()));
+    if (await copyTextToClipboard(buildCsvFromRows(headers, getVisibleRowsData()))) {
       setCopiedCsv(true);
       setTimeout(() => setCopiedCsv(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
diff --git a/packages/ui/components/blocks/TableToolbar.tsx b/packages/ui/components/blocks/TableToolbar.tsx
index 4796b141a..3f1df099c 100644
--- a/packages/ui/components/blocks/TableToolbar.tsx
+++ b/packages/ui/components/blocks/TableToolbar.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { buildCsv } from './TableBlock';
+import { copyTextToClipboard } from '../../utils/clipboard';
 
 interface TableToolbarProps {
   element: HTMLElement;
@@ -52,22 +53,20 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
   }, [element]);
 
   const handleCopyMarkdown = async () => {
-    try {
-      await navigator.clipboard.writeText(markdown);
+    if (await copyTextToClipboard(markdown)) {
       setCopiedMd(true);
       setTimeout(() => setCopiedMd(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
   const handleCopyCsv = async () => {
-    try {
-      await navigator.clipboard.writeText(buildCsv(markdown));
+    if (await copyTextToClipboard(buildCsv(markdown))) {
       setCopiedCsv(true);
       setTimeout(() => setCopiedCsv(false), 1500);
-    } catch (err) {
-      console.error('Failed to copy:', err);
+    } else {
+      console.error('Failed to copy');
     }
   };
 
diff --git a/packages/ui/components/goal-setup/GoalSetupSurface.tsx b/packages/ui/components/goal-setup/GoalSetupSurface.tsx
index 7547ba468..9b9ae54ca 100644
--- a/packages/ui/components/goal-setup/GoalSetupSurface.tsx
+++ b/packages/ui/components/goal-setup/GoalSetupSurface.tsx
@@ -22,6 +22,7 @@ import { ConfirmDialog } from '../ConfirmDialog';
 import { CommentPopover } from '../CommentPopover';
 import { Button } from '../core/button';
 import { Textarea } from '../core/textarea';
+import { copyTextToClipboard } from '../../utils/clipboard';
 
 interface GoalSetupSurfaceProps {
   bundle: GoalSetupBundle;
@@ -67,10 +68,10 @@ async function submitGoalSetup(payload: unknown): Promise<void> {
 }
 
 async function copyGoalSetupText(text: string): Promise<void> {
-  if (!navigator.clipboard?.writeText) {
+  const copied = await copyTextToClipboard(text);
+  if (!copied) {
     throw new Error('Clipboard is unavailable in this browser');
   }
-  await navigator.clipboard.writeText(text);
 }
 
 function useGoalSetupCopy(onError: (message: string) => void) {
diff --git a/packages/ui/components/settings/HooksTab.tsx b/packages/ui/components/settings/HooksTab.tsx
index 8ad68e4be..b2920eb10 100644
--- a/packages/ui/components/settings/HooksTab.tsx
+++ b/packages/ui/components/settings/HooksTab.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { FAVICON_PNG_DATA_URL } from '@plannotator/core/favicon';
+import { copyTextToClipboard } from '../../utils/clipboard';
 
 interface HooksStatus {
   pfmReminder: { enabled: boolean };
@@ -22,7 +23,8 @@ const CopyPathButton: React.FC<{ filePath: string }> = ({ filePath }) => {
   const [copied, setCopied] = useState(false);
 
   const copy = () => {
-    navigator.clipboard.writeText(filePath).then(() => {
+    void copyTextToClipboard(filePath).then((ok) => {
+      if (!ok) return;
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     });
diff --git a/packages/ui/hooks/useArchive.ts b/packages/ui/hooks/useArchive.ts
index 808bcaa9a..aa7ba961b 100644
--- a/packages/ui/hooks/useArchive.ts
+++ b/packages/ui/hooks/useArchive.ts
@@ -10,6 +10,7 @@ import type { ArchivedPlan } from "@plannotator/core/storage-types";
 import type { UseLinkedDocReturn } from "./useLinkedDoc";
 import type { ViewerHandle } from "../components/Viewer";
 import type { Annotation } from "../types";
+import { copyTextToClipboard } from "../utils/clipboard";
 import { getPlanSaveSettings } from "../utils/planSave";
 
 export interface UseArchiveOptions {
@@ -148,7 +149,7 @@ export function useArchive(options: UseArchiveOptions): UseArchiveReturn {
   }, [setSubmitted]);
 
   const copy = useCallback(() => {
-    navigator.clipboard.writeText(markdown);
+    void copyTextToClipboard(markdown);
   }, [markdown]);
 
   const clearSelection = useCallback(() => {
diff --git a/packages/ui/utils/clipboard.test.ts b/packages/ui/utils/clipboard.test.ts
new file mode 100644
index 000000000..3e3b03533
--- /dev/null
+++ b/packages/ui/utils/clipboard.test.ts
@@ -0,0 +1,125 @@
+/**
+ * Unit tests for copyTextToClipboard (issue #1173).
+ *
+ * navigator.clipboard only exists in secure browser contexts. Remote-mode
+ * Plannotator serves plain HTTP on a non-localhost host, so every bare
+ * `navigator.clipboard.writeText(...)` call used to throw. These tests pin
+ * the helper's contract: try the async Clipboard API, fall back to the
+ * legacy copy-event / execCommand path, report success as a boolean, and
+ * never throw.
+ *
+ * Requires DOM_TESTS=1 (happy-dom preload). Run:
+ *   DOM_TESTS=1 bun test packages/ui/utils/clipboard.test.ts
+ */
+import { describe, test, expect, afterEach, mock } from 'bun:test';
+import { copyTextToClipboard } from './clipboard';
+
+const hasDom = typeof document !== 'undefined';
+
+type AnyRecord = Record<string, unknown>;
+
+const restorers: Array<() => void> = [];
+
+/** Override a property (saving whatever was there) and restore it afterEach. */
+function override(target: object, key: string, value: unknown): void {
+  const original = Object.getOwnPropertyDescriptor(target, key);
+  Object.defineProperty(target, key, { value, configurable: true, writable: true });
+  restorers.push(() => {
+    if (original) Object.defineProperty(target, key, original);
+    else delete (target as AnyRecord)[key];
+  });
+}
+
+afterEach(() => {
+  while (restorers.length > 0) restorers.pop()!();
+});
+
+describe('copyTextToClipboard', () => {
+  test.skipIf(!hasDom)('navigator.clipboard undefined: falls back and returns the execCommand result', async () => {
+    override(navigator, 'clipboard', undefined);
+    const execCommand = mock(() => true);
+    override(document, 'execCommand', execCommand);
+
+    await expect(copyTextToClipboard('hello')).resolves.toBe(true);
+    expect(execCommand).toHaveBeenCalledWith('copy');
+  });
+
+  test.skipIf(!hasDom)('navigator.clipboard undefined and execCommand reports failure: resolves false', async () => {
+    override(navigator, 'clipboard', undefined);
+    const execCommand = mock(() => false);
+    override(document, 'execCommand', execCommand);
+
+    await expect(copyTextToClipboard('hello')).resolves.toBe(false);
+    // First the copy-event attempt, then the hidden-textarea retry.
+    expect(execCommand.mock.calls.length).toBe(2);
+  });
+
+  test.skipIf(!hasDom)('writeText rejects: falls back to the legacy path', async () => {
+    const writeText = mock(() => Promise.reject(new Error('insecure context')));
+    override(navigator, 'clipboard', { writeText });
+    const execCommand = mock(() => true);
+    override(document, 'execCommand', execCommand);
+
+    await expect(copyTextToClipboard('hello')).resolves.toBe(true);
+    expect(writeText).toHaveBeenCalledWith('hello');
+    expect(execCommand).toHaveBeenCalledWith('copy');
+  });
+
+  test.skipIf(!hasDom)('writeText throws synchronously: falls back to the legacy path', async () => {
+    const writeText = mock(() => {
+      throw new Error('restricted embed');
+    });
+    override(navigator, 'clipboard', { writeText });
+    const execCommand = mock(() => true);
+    override(document, 'execCommand', execCommand);
+
+    await expect(copyTextToClipboard('hello')).resolves.toBe(true);
+    expect(execCommand).toHaveBeenCalledWith('copy');
+  });
+
+  test.skipIf(!hasDom)('writeText resolves: returns true without invoking the fallback', async () => {
+    const writeText = mock(() => Promise.resolve());
+    override(navigator, 'clipboard', { writeText });
+    const execCommand = mock(() => true);
+    override(document, 'execCommand', execCommand);
+
+    await expect(copyTextToClipboard('hello')).resolves.toBe(true);
+    expect(writeText).toHaveBeenCalledWith('hello');
+    expect(execCommand).not.toHaveBeenCalled();
+  });
+
+  test.skipIf(!hasDom)('everything fails: resolves false and never throws', async () => {
+    const writeText = mock(() => Promise.reject(new Error('denied')));
+    override(navigator, 'clipboard', { writeText });
+    const execCommand = mock(() => {
+      throw new Error('execCommand denied');
+    });
+    override(document, 'execCommand', execCommand);
+
+    await expect(copyTextToClipboard('hello')).resolves.toBe(false);
+  });
+
+  test.skipIf(!hasDom)('fallback copy event carries the text payload', async () => {
+    override(navigator, 'clipboard', undefined);
+    // Simulate a real execCommand('copy'): dispatch a copy event so the
+    // helper's listener runs, then report success only if it set data.
+    let captured: string | null = null;
+    const execCommand = mock((command: string) => {
+      if (command !== 'copy') return false;
+      const event = new Event('copy', { cancelable: true }) as ClipboardEvent;
+      Object.defineProperty(event, 'clipboardData', {
+        value: {
+          setData: (_type: string, data: string) => {
+            captured = data;
+          },
+        },
+      });
+      document.dispatchEvent(event);
+      return captured !== null;
+    });
+    override(document, 'execCommand', execCommand);
+
+    await expect(copyTextToClipboard('payload text')).resolves.toBe(true);
+    expect(captured).toBe('payload text');
+  });
+});
diff --git a/packages/ui/utils/clipboard.ts b/packages/ui/utils/clipboard.ts
index 1af939efa..37df49d34 100644
--- a/packages/ui/utils/clipboard.ts
+++ b/packages/ui/utils/clipboard.ts
@@ -1,4 +1,4 @@
-function copyTextWithFallback(text: string, focusOwner: HTMLElement): void {
+function copyTextWithFallback(text: string, focusOwner?: HTMLElement): boolean {
   const activeElement = document.activeElement instanceof HTMLElement
     ? document.activeElement
     : null;
@@ -30,23 +30,26 @@ function copyTextWithFallback(text: string, focusOwner: HTMLElement): void {
     document.body.appendChild(textarea);
     textarea.select();
     try {
-      document.execCommand('copy');
+      copied = document.execCommand('copy');
     } catch {
       // Clipboard access can be denied by the embedding browser. The caller
       // still regains the same document focus and selection below.
+      copied = false;
     }
     textarea.remove();
   }
 
   if (activeElement?.isConnected) {
     activeElement.focus({ preventScroll: true });
-  } else if (focusOwner.isConnected) {
+  } else if (focusOwner?.isConnected) {
     focusOwner.focus({ preventScroll: true });
   }
   if (selection && savedRanges.length > 0) {
     selection.removeAllRanges();
     savedRanges.forEach((range) => selection.addRange(range));
   }
+
+  return copied;
 }
 
 /**
@@ -71,3 +74,27 @@ export function copyTextPreservingFocus(
   }
   copyTextWithFallback(text, focusOwner);
 }
+
+/**
+ * Copy text to the clipboard, falling back to the legacy copy-event /
+ * execCommand path when the async Clipboard API is unavailable (insecure
+ * contexts such as remote-mode plain HTTP) or rejects. Resolves `true` when
+ * a copy strategy succeeded and `false` otherwise. Never throws.
+ */
+export async function copyTextToClipboard(text: string): Promise<boolean> {
+  try {
+    const clipboardWrite = navigator.clipboard?.writeText(text);
+    if (clipboardWrite) {
+      await clipboardWrite;
+      return true;
+    }
+  } catch {
+    // Clipboard API absent, threw synchronously, or rejected — fall back to
+    // the legacy copy-event path below.
+  }
+  try {
+    return copyTextWithFallback(text);
+  } catch {
+    return false;
+  }
+}

From 9c54237a18dfdce59554fa89d19a11b4070e893d Mon Sep 17 00:00:00 2001
From: Michael Ramos <mdramos8@gmail.com>
Date: Sat, 1 Aug 2026 02:26:10 -0700
Subject: [PATCH 2/2] fix(ui): address clipboard fallback review findings

Review follow-ups for the insecure-context clipboard fallback:

1. Tag the fallback textarea with data-clipboard-fallback and whitelist
   it in PopoutDialog's ANNOTATION_SELECTORS so the transient focus
   shift during a fallback copy no longer closes popout dialogs
   (TablePopout copy buttons, CodeFilePopout copy contents).

2. Widen AnnotationPanel's onQuickCopy prop to Promise<void | boolean>.
   A false resolution now suppresses the Copied flash; void resolution
   stays success so existing hosts keep today's behavior. The editor
   quick-copy site returns the helper's boolean.

3. In copyTextWithFallback, only flag the copy-event path as success
   when clipboardData was present and setData actually ran, and only
   when execCommand also reported success. A null clipboardData no
   longer calls preventDefault, so the textarea retry still runs.

4. Add tests pinning that the fallback runs synchronously when
   navigator.clipboard is absent (execCommand fires before the call
   returns, keeping it inside the user-gesture window), that a copy
   event without clipboardData is not treated as success, and that the
   fallback textarea carries the PopoutDialog focus-out marker and is
   removed after the copy resolves.

5. GoalSetupSurface surfaces the real writeText rejection message when
   the Clipboard API exists but fails and the fallback also fails; the
   generic unavailable message is reserved for the API-absent case.
---
 packages/editor/App.tsx                       |  2 +-
 packages/ui/components/AnnotationPanel.tsx    |  8 ++-
 packages/ui/components/PopoutDialog.tsx       |  7 ++-
 .../goal-setup/GoalSetupSurface.tsx           | 18 +++++-
 packages/ui/utils/clipboard.test.ts           | 62 +++++++++++++++++++
 packages/ui/utils/clipboard.ts                | 14 ++++-
 6 files changed, 102 insertions(+), 9 deletions(-)

diff --git a/packages/editor/App.tsx b/packages/editor/App.tsx
index 34ab8ff21..c00668ee7 100644
--- a/packages/editor/App.tsx
+++ b/packages/editor/App.tsx
@@ -4725,7 +4725,7 @@ const App: React.FC = () => {
             onClose={() => setIsPanelOpen(false)}
             onQuickCopy={async () => {
               const output = getCurrentFeedbackPayload();
-              await copyTextToClipboard(wrapCopiedFeedback(output));
+              return copyTextToClipboard(wrapCopiedFeedback(output));
             }}
             onShare={canShareCurrentSession ? () => { setIsPanelOpen(false); setInitialExportTab('share'); setShowExport(true); } : undefined}
             otherFileAnnotations={otherFileAnnotations}
diff --git a/packages/ui/components/AnnotationPanel.tsx b/packages/ui/components/AnnotationPanel.tsx
index 6aefd7868..6981ff114 100644
--- a/packages/ui/components/AnnotationPanel.tsx
+++ b/packages/ui/components/AnnotationPanel.tsx
@@ -66,7 +66,10 @@ interface PanelProps {
   editorAnnotations?: EditorAnnotation[];
   onDeleteEditorAnnotation?: (id: string) => void;
   onClose?: () => void;
-  onQuickCopy?: () => Promise<void>;
+  /** Copy the full feedback payload. May resolve a success boolean; resolving
+    *  `false` suppresses the "Copied" flash. A void resolution (existing hosts)
+    *  is treated as success, preserving the original behavior. */
+  onQuickCopy?: () => Promise<void | boolean>;
   onShare?: () => void;
   otherFileAnnotations?: { count: number; files: number };
   onOtherFileAnnotationsClick?: () => void;
@@ -249,7 +252,8 @@ export const AnnotationPanel: React.FC<PanelProps> = ({
           {onQuickCopy && (
             <button
               onClick={async () => {
-                await onQuickCopy();
+                const result = await onQuickCopy();
+                if (result === false) return;
                 setCopiedText(true);
                 setTimeout(() => setCopiedText(false), 2000);
               }}
diff --git a/packages/ui/components/PopoutDialog.tsx b/packages/ui/components/PopoutDialog.tsx
index f2e80f8f2..8d97f8b61 100644
--- a/packages/ui/components/PopoutDialog.tsx
+++ b/packages/ui/components/PopoutDialog.tsx
@@ -1,10 +1,15 @@
 import React, { useCallback } from 'react';
 import { Dialog } from '@base-ui/react/dialog';
 
-const ANNOTATION_SELECTORS = [
+export const ANNOTATION_SELECTORS = [
   '.annotation-toolbar',
   '[data-comment-popover="true"]',
   '[data-floating-picker="true"]',
+  // Transient hidden textarea created by the legacy clipboard fallback
+  // (packages/ui/utils/clipboard.ts). It briefly steals focus during copy;
+  // without this guard the focus-out close reason would dismiss the popout
+  // whenever a copy button inside it falls back to execCommand.
+  '[data-clipboard-fallback="true"]',
 ];
 
 interface PopoutDialogProps {
diff --git a/packages/ui/components/goal-setup/GoalSetupSurface.tsx b/packages/ui/components/goal-setup/GoalSetupSurface.tsx
index 9b9ae54ca..614b97512 100644
--- a/packages/ui/components/goal-setup/GoalSetupSurface.tsx
+++ b/packages/ui/components/goal-setup/GoalSetupSurface.tsx
@@ -68,10 +68,22 @@ async function submitGoalSetup(payload: unknown): Promise<void> {
 }
 
 async function copyGoalSetupText(text: string): Promise<void> {
-  const copied = await copyTextToClipboard(text);
-  if (!copied) {
-    throw new Error('Clipboard is unavailable in this browser');
+  let writeError: unknown;
+  try {
+    const clipboardWrite = navigator.clipboard?.writeText(text);
+    if (clipboardWrite) {
+      await clipboardWrite;
+      return;
+    }
+  } catch (err) {
+    writeError = err;
   }
+  // Clipboard API absent or rejected: try the legacy copy-event fallback.
+  if (await copyTextToClipboard(text)) return;
+  // All strategies failed. When the API existed but rejected, surface its
+  // real error; use the generic message only when the API was absent.
+  if (writeError instanceof Error) throw writeError;
+  throw new Error('Clipboard is unavailable in this browser');
 }
 
 function useGoalSetupCopy(onError: (message: string) => void) {
diff --git a/packages/ui/utils/clipboard.test.ts b/packages/ui/utils/clipboard.test.ts
index 3e3b03533..f6d048b5e 100644
--- a/packages/ui/utils/clipboard.test.ts
+++ b/packages/ui/utils/clipboard.test.ts
@@ -13,6 +13,7 @@
  */
 import { describe, test, expect, afterEach, mock } from 'bun:test';
 import { copyTextToClipboard } from './clipboard';
+import { ANNOTATION_SELECTORS } from '../components/PopoutDialog';
 
 const hasDom = typeof document !== 'undefined';
 
@@ -99,6 +100,67 @@ describe('copyTextToClipboard', () => {
     await expect(copyTextToClipboard('hello')).resolves.toBe(false);
   });
 
+  test.skipIf(!hasDom)('fallback runs synchronously when navigator.clipboard is absent', () => {
+    // execCommand('copy') is only honored inside the user-gesture window, so
+    // the fallback must fire before the call returns its promise. An inserted
+    // await ahead of the fallback would defer it past the gesture and
+    // silently break every insecure-context copy. Pin the synchronicity:
+    // assert the spy fired BEFORE the returned promise is awaited.
+    override(navigator, 'clipboard', undefined);
+    const execCommand = mock(() => true);
+    override(document, 'execCommand', execCommand);
+
+    const promise = copyTextToClipboard('sync payload');
+    expect(execCommand).toHaveBeenCalledWith('copy');
+    return promise.then((result) => expect(result).toBe(true));
+  });
+
+  test.skipIf(!hasDom)('copy event without clipboardData is not treated as success', async () => {
+    override(navigator, 'clipboard', undefined);
+    // Simulate a browser whose synthetic copy event has no clipboardData:
+    // the handler must not preventDefault or flag success, so the helper
+    // proceeds to the hidden-textarea retry (second execCommand call).
+    let dispatched = 0;
+    const execCommand = mock((command: string) => {
+      if (command !== 'copy') return false;
+      dispatched += 1;
+      if (dispatched === 1) {
+        const event = new Event('copy', { cancelable: true });
+        document.dispatchEvent(event);
+        // Native copy "succeeded", but our payload was never written.
+        return !event.defaultPrevented;
+      }
+      return false; // textarea retry also fails
+    });
+    override(document, 'execCommand', execCommand);
+
+    await expect(copyTextToClipboard('hello')).resolves.toBe(false);
+    expect(execCommand.mock.calls.length).toBe(2);
+  });
+
+  test.skipIf(!hasDom)('fallback textarea is tagged for PopoutDialog focus-out guard', async () => {
+    override(navigator, 'clipboard', undefined);
+    // First execCommand call fails (copy-event path), forcing the textarea
+    // path; the second call runs while the textarea is in the DOM, where we
+    // assert it carries the marker PopoutDialog whitelists.
+    let sawTaggedTextarea = false;
+    let call = 0;
+    const execCommand = mock(() => {
+      call += 1;
+      if (call === 1) return false;
+      const textarea = document.querySelector('textarea[data-clipboard-fallback="true"]');
+      sawTaggedTextarea = textarea !== null &&
+        ANNOTATION_SELECTORS.some((sel) => textarea.closest(sel) !== null);
+      return true;
+    });
+    override(document, 'execCommand', execCommand);
+
+    await expect(copyTextToClipboard('hello')).resolves.toBe(true);
+    expect(sawTaggedTextarea).toBe(true);
+    // The transient textarea must be gone once the copy resolves.
+    expect(document.querySelector('[data-clipboard-fallback="true"]')).toBeNull();
+  });
+
   test.skipIf(!hasDom)('fallback copy event carries the text payload', async () => {
     override(navigator, 'clipboard', undefined);
     // Simulate a real execCommand('copy'): dispatch a copy event so the
diff --git a/packages/ui/utils/clipboard.ts b/packages/ui/utils/clipboard.ts
index 37df49d34..d437930cf 100644
--- a/packages/ui/utils/clipboard.ts
+++ b/packages/ui/utils/clipboard.ts
@@ -10,13 +10,19 @@ function copyTextWithFallback(text: string, focusOwner?: HTMLElement): boolean {
   let copied = false;
 
   const handleCopy = (event: ClipboardEvent) => {
+    // Without clipboardData there is nothing to write into; leave the native
+    // copy untouched (preventDefault would only suppress it) and stay
+    // unsuccessful so the textarea path below runs.
+    if (!event.clipboardData) return;
     event.preventDefault();
-    event.clipboardData?.setData('text/plain', text);
+    event.clipboardData.setData('text/plain', text);
     copied = true;
   };
   document.addEventListener('copy', handleCopy);
   try {
-    copied = document.execCommand('copy') || copied;
+    // Success requires BOTH: our handler actually wrote the payload via
+    // setData, AND execCommand reported the copy command ran.
+    copied = document.execCommand('copy') && copied;
   } catch {
     copied = false;
   } finally {
@@ -26,6 +32,10 @@ function copyTextWithFallback(text: string, focusOwner?: HTMLElement): boolean {
   if (!copied) {
     const textarea = document.createElement('textarea');
     textarea.style.cssText = 'position:fixed;opacity:0;pointer-events:none';
+    // Marker so focus-sensitive surfaces (PopoutDialog's focus-out close
+    // guard) can recognize the transient fallback textarea and not treat the
+    // focus shift as leaving the dialog.
+    textarea.setAttribute('data-clipboard-fallback', 'true');
     textarea.value = text;
     document.body.appendChild(textarea);
     textarea.select();