diff --git a/src/common/util/copy-clipboard.ts b/src/common/util/copy-clipboard.ts index 3c89e40982..1708858c85 100644 --- a/src/common/util/copy-clipboard.ts +++ b/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); }; diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index fed4eb04a5..996daed173 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/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 { if (this._editor?.yaml) { - copyToClipboard(this._editor.yaml); + await copyToClipboard(this._editor.yaml); + showToast(this, { + message: this.hass.localize("ui.common.copied_clipboard"), + }); } } diff --git a/src/panels/config/info/system-health-card.ts b/src/panels/config/info/system-health-card.ts index 95947cce0d..44b3d4d3e3 100644 --- a/src/panels/config/info/system-health-card.ts +++ b/src/panels/config/info/system-health-card.ts @@ -197,7 +197,7 @@ class SystemHealthCard extends LitElement { }); } - private _copyInfo(ev: CustomEvent): void { + private async _copyInfo(ev: CustomEvent): Promise { 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 { diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts index 320657f8c4..e3acd3f5f1 100644 --- a/src/panels/config/logs/dialog-system-log-detail.ts +++ b/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 { this._params = params; this._manifest = undefined; @@ -83,15 +81,6 @@ class DialogSystemLogDetail extends LitElement { - ${this.hass.localize("ui.common.copied")}

@@ -162,23 +151,15 @@ class DialogSystemLogDetail extends LitElement { } } - private _copyLog(): void { + private async _copyLog(): Promise { 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[] { diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 8683d5d31f..76c0f886b0 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/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 { if (this._editor?.yaml) { - copyToClipboard(this._editor.yaml); + await copyToClipboard(this._editor.yaml); + showToast(this, { + message: this.hass.localize("ui.common.copied_clipboard"), + }); } } diff --git a/src/translations/en.json b/src/translations/en.json index 31afc3d882..3dab7355de 100755 --- a/src/translations/en.json +++ b/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": {