Catch navigator.clipboard errors (#7942)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/common/util/copy-clipboard.ts

@@ -1,12 +1,17 @@
-export const copyToClipboard = (str) => {
+export const copyToClipboard = async (str) => {
   if (navigator.clipboard) {
-    navigator.clipboard.writeText(str);
-  } else {
-    const el = document.createElement("textarea");
-    el.value = str;
-    document.body.appendChild(el);
-    el.select();
-    document.execCommand("copy");
-    document.body.removeChild(el);
+    try {
+      await navigator.clipboard.writeText(str);
+      return;
+    } catch {
+      // just continue with the fallback coding below
+    }
   }
+
+  const el = document.createElement("textarea");
+  el.value = str;
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand("copy");
+  document.body.removeChild(el);
 };

src/panels/config/automation/ha-automation-editor.ts

@@ -395,9 +395,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     return cleanConfig;
   }
 
-  private async _copyYaml() {
+  private async _copyYaml(): Promise<void> {
     if (this._editor?.yaml) {
-      copyToClipboard(this._editor.yaml);
+      await copyToClipboard(this._editor.yaml);
+      showToast(this, {
+        message: this.hass.localize("ui.common.copied_clipboard"),
+      });
     }
   }
 

src/panels/config/info/system-health-card.ts

@@ -197,7 +197,7 @@ class SystemHealthCard extends LitElement {
     });
   }
 
-  private _copyInfo(ev: CustomEvent<ActionDetail>): void {
+  private async _copyInfo(ev: CustomEvent<ActionDetail>): Promise<void> {
     const github = ev.detail.index === 1;
     let haContent: string | undefined;
     const domainParts: string[] = [];
@@ -250,13 +250,15 @@ class SystemHealthCard extends LitElement {
       }
     }
 
-    copyToClipboard(
+    await copyToClipboard(
       `${github ? "## " : ""}System Health\n${haContent}\n\n${domainParts.join(
         "\n\n"
       )}`
     );
 
-    showToast(this, { message: this.hass.localize("ui.common.copied") });
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
+    });
   }
 
   static get styles(): CSSResult {

src/panels/config/logs/dialog-system-log-detail.ts

@@ -2,7 +2,6 @@ import "../../../components/ha-header-bar";
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiContentCopy, mdiClose } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import type { PaperTooltipElement } from "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
   CSSResult,
@@ -10,10 +9,10 @@ import {
   internalProperty,
   LitElement,
   property,
-  query,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-dialog";
 import "../../../components/ha-svg-icon";
 import {
@@ -27,6 +26,7 @@ import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import type { SystemLogDetailDialogParams } from "./show-dialog-system-log-detail";
 import { formatSystemLogTime } from "./util";
+import { showToast } from "../../../util/toast";
 
 class DialogSystemLogDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -35,8 +35,6 @@ class DialogSystemLogDetail extends LitElement {
 
   @internalProperty() private _manifest?: IntegrationManifest;
 
-  @query("paper-tooltip") private _toolTip?: PaperTooltipElement;
-
   public async showDialog(params: SystemLogDetailDialogParams): Promise<void> {
     this._params = params;
     this._manifest = undefined;
@@ -83,15 +81,6 @@ class DialogSystemLogDetail extends LitElement {
           <mwc-icon-button id="copy" @click=${this._copyLog} slot="actionItems">
             <ha-svg-icon .path=${mdiContentCopy}></ha-svg-icon>
           </mwc-icon-button>
-          <paper-tooltip
-            slot="actionItems"
-            manual-mode
-            for="copy"
-            position="left"
-            animation-delay="0"
-            offset="4"
-            >${this.hass.localize("ui.common.copied")}</paper-tooltip
-          >
         </ha-header-bar>
         <div class="contents">
           <p>
@@ -162,23 +151,15 @@ class DialogSystemLogDetail extends LitElement {
     }
   }
 
-  private _copyLog(): void {
+  private async _copyLog(): Promise<void> {
     const copyElement = this.shadowRoot?.querySelector(
       ".contents"
     ) as HTMLElement;
 
-    const selection = window.getSelection()!;
-    const range = document.createRange();
-
-    range.selectNodeContents(copyElement);
-    selection.removeAllRanges();
-    selection.addRange(range);
-
-    document.execCommand("copy");
-    window.getSelection()!.removeAllRanges();
-
-    this._toolTip!.show();
-    setTimeout(() => this._toolTip?.hide(), 3000);
+    await copyToClipboard(copyElement.innerText);
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
+    });
   }
 
   static get styles(): CSSResult[] {

src/panels/config/script/ha-script-editor.ts

@@ -544,9 +544,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     return this._config;
   }
 
-  private async _copyYaml() {
+  private async _copyYaml(): Promise<void> {
     if (this._editor?.yaml) {
-      copyToClipboard(this._editor.yaml);
+      await copyToClipboard(this._editor.yaml);
+      showToast(this, {
+        message: this.hass.localize("ui.common.copied_clipboard"),
+      });
     }
   }
 

src/translations/en.json

@@ -291,7 +291,8 @@
       "successfully_saved": "Successfully saved",
       "successfully_deleted": "Successfully deleted",
       "error_required": "Required",
-      "copied": "Copied"
+      "copied": "Copied",
+      "copied_clipboard": "Copied to clipboard"
     },
     "components": {
       "logbook": {