diff --git a/.changeset/real-forks-type.md b/.changeset/real-forks-type.md new file mode 100644 index 0000000000..46940edf23 --- /dev/null +++ b/.changeset/real-forks-type.md @@ -0,0 +1,5 @@ +--- +"@patternfly/pfe-clipboard": patch +--- + +pfe-clipboard: add fallback check for http traffic on browsers that support navigator. diff --git a/elements/pfe-clipboard/pfe-clipboard.ts b/elements/pfe-clipboard/pfe-clipboard.ts index 10baf03457..088933cff8 100644 --- a/elements/pfe-clipboard/pfe-clipboard.ts +++ b/elements/pfe-clipboard/pfe-clipboard.ts @@ -110,6 +110,16 @@ export class PfeClipboard extends LitElement { @property({ type: String, reflect: true, attribute: 'copy-from' }) copyFrom: string|'url'|'property' = 'url'; + /** + * Specify if current site is behind [https] + */ + private _secure = window.isSecureContext; + + /** + * Specify the copy type to be used depending on security and browser support + */ + private _copyType: 'navigator' | 'queryCommand' | null = null; + /** * A setter to set the content you would like to copy. * Only works if copy-from attribute is set to property. @@ -143,6 +153,8 @@ export class PfeClipboard extends LitElement { this.dispatchEvent(deprecatedCustomEvent('pfe-clipboard:connected', { component: this })); + this._setCopyType(); + // This prevents a regression, default text used to be "Copy URL". // Now that component can copy _anything_ that's not ideal default text if (this.copyFrom === 'url' && !this.slots.hasSlotted('text')) { @@ -219,7 +231,7 @@ export class PfeClipboard extends LitElement { /** * Checks to make sure the thing we may copy exists */ - @bound private _checkForCopyTarget() { + private _checkForCopyTarget() { if (this.copyFrom === 'property') { if (!this.contentToCopy) { this.setAttribute('disabled', ''); @@ -235,6 +247,17 @@ export class PfeClipboard extends LitElement { } } + /** + * Sets copy type depending on whether or not the current site is secure + */ + private _setCopyType() { + if (this._secure && navigator.clipboard) { + this._copyType = 'navigator'; + } else { + this._copyType = 'queryCommand'; + } + } + /** * Event handler for any activation of the copy button */ @@ -380,22 +403,22 @@ export class PfeClipboard extends LitElement { if (!text) { this.logger.error('Copy function called, but no text was given to copy.'); } - if (navigator.clipboard) { - // If the Clipboard API is available then use that - await navigator.clipboard.writeText(text); - return text; - } else if (document.queryCommandEnabled('copy')) { - // If execCommand("copy") exists then use that method - const dummy = document.createElement('input'); - document.body.appendChild(dummy); - dummy.value = text; - dummy.select(); - document.execCommand('copy'); - document.body.removeChild(dummy); - return text; - } else { - throw new Error('Current browser does not support copying to the clipboard.'); + + switch (this._copyType) { + case 'navigator': + await navigator.clipboard.writeText(text); + break; + case 'queryCommand': { + const dummy = document.createElement('input'); + document.body.appendChild(dummy); + dummy.value = text; + dummy.select(); + document.execCommand('copy'); + document.body.removeChild(dummy); + break; + } } + return text; } }