[TIL] Velog 익스텐션 만들기(1)
[TIL] Velog 익스텐션 만들기(3)
이전 글의 문제 해결
문제 해결에 앞서 velog의 texteditor는 메인 글을 작성할 때 입력된 값이 그대로 출력되는게 아닌 입력된 값을 javascript로 html 요소로 변경하여 출력하는 구조이다.
1. text editor의 하위 요소를 복사 및 붙여넣기
처음시도 한 방법은 text editor에 해당하는 tag의 하위 요소를 전부 긁어 text arr로 변환해서 localStorage에 저장하고 저장된 데이터와 맞는 버튼을 클릭 시 text editor가 생성한 테그를 삭제하고 저장된 문자열로 변경된 html 요소를 innerHTML() 메서드로 요소를 채워넣었지만 위에서 적혀있듯이 velog에서 사용하는 text editor는 입력된 값을 그대로 출력하는 방법이 아닌 입력되는 값을 javascript로 tag를 감싸 새로 구성해서 출력하는 방식이기 때문에 html 요소를 text로 변환한 후 innerHTML() 메서드를 사용하면 적용되어있던 event가 다 끊기기 때문에 데이터가 들어간것 처럼 보이지만 더이상 text editor 기능이 작동되지 않는다.
2. text editor에 text 감싸는 tag의 innerText를 찾아오자
1번은 실패 했으니 당연히 tag를 삭제 추가 하는 방법보다는 text editor의 입력된 문자열만 저장하고 붙여넣는 방법을 생각하기 시작했다.
우선 text editor에 입력된 문자열 들은
<pre class=" CodeMirror-line " role="presentation">
<span role="presentation" style="padding-right: 0.1px;">
<span class="cm-header cm-header-1">문자열이 들어옵니다.</span>
</span>
</pre>위 tag처럼 class가 CodeMirror-line이라는 테그 하위에 span으로 생성되는 것을 알 수 있었다.
접근을 위해 document.querySelector('.CodeMirror-line')으로 선택자를 주면 하위 span에서 innerText로 입력 된 문자열을 가져올 수 있었다.
공백 라인(한줄 건너뛰기)가 있으면 \n을 저장해야 하기 때문에 innerText가 빈 값인지 체크하는데 document.querySelector('.CodeMirror-line').innerText === ''로 비교 해보았지만 true가나오지 않고 false가 나오지 않았다. 다시 개발자도구를 열어 공백 라인을 확인해 보니
위 캡쳐와 같이 &ZeoroWidthSpace;로 들어가는것을 확인했다.
&ZeoroWidthSpace;인지 확인하기 위해 구글링한 결과 찾아온 innerText를 .replace(/\u200B/g, '')로 &ZeoroWidthSpace;를 공백으로 치환하고 비교를 했더니 원하는 결과값이 나왔다.
3. 원하는 값은 가져왔으니 붙여넣자.. 어떻게?
2번 처럼 템플릿 데이터는 잘 가져올 수 있게 되었다.
하지만 문제는 어떻게 해야 text editor에 저장된 데이터를 붙여넣을지 많은 고민을 했고 결국 같이 협업중인 이진호님과 이야기를 하다가 clipboard객체를 사용해 보자는 의견을 주셨고 자료도 많이 찾아주셨다.
우선 clipboard의 사용법이 완벽한 방법은 아니겠지만 살짝 소개하겠다.
// clipboard 객체 생성 시
// clipboardEvent에 어떤 동작을 할지 넘겨주고
// clipboardData 프로퍼티에 dataTransfer 객체를 생성하여 주입한다.
const clipboard = new ClipboardEvent('paste', {
clipboardData: new DataTransfer(),
});
// 생성된 clipboardEvent 객체의 프로퍼티 clipboardData
// itrams에 .add 메서드로 데이터를 넣고, 문자의 타입을 정해준다.
clipboard.clipboardData.items.add(
storagedTemplate[index].content,
'text/plain',
);
// 붙여넣기 대상에 dispatchEvent로 이벤트를 실행한다.
textArea.dispatchEvent(clipboard);- clipboard 객체 생성 시 clipboardEvent에 어떤 동작을 할지 넘겨주고 clipboardData 프로퍼티에 dataTransfer 객체를 생성하여 주입한다.
- 생성된 clipboardEvent 객체의 프로퍼티 clipboardData itrams에 .add 메서드로 데이터를 넣고, 문자의 타입을 정해준다.
- 붙여넣기 대상에 dispatchEvent로 이벤트를 실행한다.
저장된 템플릿 버튼을 클릭 시 위와 같은 방법으로 실행이된다.
하지만 어디에 붙여 넣어야 MirrorEditor가 paste 이벤트가 발생했다고 인지 할지 찾아 보던중에
위 사진 부분의 textarea에 이벤트가 발생하면 입력된 문자열을받아 tag로 감싸 반환시켜주는 역할을 하고 있었다.
문제 해결 후..
원했던 기능은 템플릿을 저장하고 불러오기까지는 완성 하였다.
하지만 velog가 spa이면서 어떤 부분에서 글쓰기로 넘어갈땐 새로고침이 되는 현상을 발견하게 되었다.........
새로고침이 되면서 페이지가 로드가 되면 오히려 편하게 버튼들을 출력할 부분 설정이 쉽지만 spa일때는 url을 감지하면서 변경되면 그 값이 write인지 확인하는 부분이 필요하다.
이 부분에대해서는 3편에서 또 작성하겠다.
시연.gif
github repository
