https://ecolaw.or.kr/assets/controllers/base/clipboard_controller-cd4925ca.js

1import { Controller } from '@hotwired/stimulus';
2// 보안 이슈로 clipboard api는 ssl에서만 작동됩니다.
3//https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard
4
5/**
6 * @domain DOM 유틸
7 * @concern 클립보드 복사
8 * @description Clipboard API로 지정한 텍스트를 클립보드에 복사하고, 성공/실패 메시지를 status 타깃(없으면 alert)으로 알린다. 두 문구는 사이트 언어로 번역해야 하므로 뷰가 넘긴다. (HTTPS 환경에서만 동작)
9 */
10export default class extends Controller {
11  static targets = ['status'];
12
13  static values = {
14    successMessage: {
15      type: String,
16      default: '',
17    },
18    errorMessage: {
19      type: String,
20      default: '',
21    },
22    content: {
23      type: String,
24      default: '',
25    },
26  };
27
28  async copy(event) {
29    event.preventDefault();
30    try {
31      await window.navigator.clipboard.writeText(this.contentValue);
32      this.notify(this.successMessageValue);
33    } catch (error) {
34      this.notify(this.errorMessageValue);
35    }
36  }
37
38  // status 타깃에는 빈 문구도 써서, 앞선 실패 문구가 남지 않게 한다.
39  notify(message) {
40    if (this.hasStatusTarget) this.statusTarget.textContent = message;
41    else if (message) alert(message);
42  }
43}