ClipBoard API 제대로 사용하기

타 팀과 업무를 수행할 때 iframe으로 연동되어 있는 부분에 대한 시스템 내용을 클립보드로 복사해야 하는 업무가 생겼다.

 

브릿징 작업을 통해 listener 메시지로 내용에 대한 값을 받아 왔는데 포맷이 일반 텍스트와 HTML 텍스트 두 가지로 내려주신 것이었다.

 

기존 구현되어져 있는 부분은 text로도 삽입이 가능하지만 가끔 텍스트에 같이 들어오는 "\n", "\w"와 같은 이스케이프 문자열들이 그대로 삽입이 되기 때문에 html로 직접 애플리케이션에 삽입하는 것이 편했다.

 

그러나 "복사한 값을 우리의 애플리케이션에서 사용하지 않고 다른 곳에서 쓴다면?" 이라는 의문점이 들기 시작했고, 이 부분 말고도 놓치는 부분이 있을까 싶어서 연동해 주신 담당자분께 문의를 드렸다.

 

대화 내용

........??...??.?

 

두 개의 포맷을 클립보드에 전부 넣으면 된다는 답변을 주셨다.

 

내가 아는 클립보드는 하나를 새로 복사를 하면 다른 하나는 휘발성이라 사라질텐데 어떻게 두 개 동시에 넣지..?

라는 생각에 잠기게 되었다.

 

이것저것 찾아본 결과..!

 

시스템 클립보드에서 붙여넣기 이벤트가 실행되었을 때, 클립보드는 자신이 가지고 있는 데이터를 전부 전달하게 된다.

 

그리고 앱 자체에서 파싱 가능한 데이터를 우선 선별 작업을 진행하고, 어떤 클립보드 데이터를 선택할지 결정한 후 자신의 앱이 받아들일 수 있는 형태로 삽입하게 된다. (ex. 메모장 앱은 파서가 없고 앱 자체적으로 텍스트만 취급한다)

 

결과적으로는... 여러 포맷을 삽입할 수 있다는 것이었다.

 

그렇게 다시 이것 저것 검색을 시작해서 방법을 찾아냈다..!!

 

const htmlData = '<p>This is an <strong>example</strong> HTML snippet.</p>';
const textData = 'This is an example text.';

navigator.clipboard.write([
  new ClipboardItem({ text: new Blob([htmlData], { type: 'text/html' }) }),
  new ClipboardItem({ text: textData })
])
  .then(() => {
    console.log('클립보드 복사 완료');
  })
  .catch((error) => {
    console.error('클립 보드 복사 실패 :', error);
  });

이렇게 clipboard api에 배열 안에 인자로 전달을 하면 가능하다는 것이다.

 

그렇게 성공의 기대를 안고 실행한 결과...

 

DOM Exception: Type text not supported on write.

해당 오류가 발생하였다.

 

앱 자체에서 구현할 때 최신 clipboard API를 막은 듯한 느낌이었다.(정확히는 잘 모르겠는데 아시는 분이 계시다면 댓글 주시면 감사하겠습니다ㅠㅠ)

 

그래서 예전 방식을 사용하여 재 구현 해보도록 했다.

 

const data = {
  html: '<p>This is an <strong>example</strong> HTML snippet.</p>',
  text: 'This is an example text.'
}
const obj = JSON.parse(data);
document.oncopy = e => {
  e.preventDefault();
  const dT = e.clipboardData;
  dT.setData('text/plain', obj.text);
  dT.setData('text/html', obj.html)
}
document.execCommand('copy');

이렇게 구현하니 정상적으로 HTML값과 텍스트 값이 삽입이 되었다!

결론. 이 세상엔 모르는게 너무 많다..