TL;DR

  • MIT 라이선스·의존성 없음·3.6kB인 wordpaste가 Word와 Google Docs의 클립보드 HTML을 정리하고, 지원되는 수식을 편집 가능한 상태로 변환함.
  • mso- 스타일, 조건부 주석, 빈 요소 등 브라우저에 불필요한 Word 서식을 제거하면서 굵게·기울임·밑줄·링크·목록·표·정렬은 보존함.
  • Word 목록 표시를 실제 중첩 목록으로 재구성하고, OMML과 LibreOffice MathML 수식을 LaTeX로 변환함.
  • Tiptap, ProseMirror, Lexical, Quill, React, Next.js, Vue와 일반 contenteditable에서 사용할 수 있으며, Outlook·Excel·LibreOffice도 처리하고 일반 웹 HTML은 그대로 둠.
  • 브라우저에서 동작하며 콘텐츠를 업로드하지 않지만, 보안 정화 기능은 아니므로 직접 innerHTML에 삽입할 때는 DOMPurify가 필요함.

Word와 Google Docs 붙여넣기 정리

  • Word 클립보드 HTML에는 보이지 않는 스타일, 작동하지 않는 이미지 링크, 스크린샷으로 평탄화된 수식이 포함될 수 있으며, wordpaste는 이를 정리하면서 수식을 편집 가능한 상태로 보존함.
  • 설치 명령은 npm i wordpaste임.
  • 데모는 Word 수식·텍스트와 이미지, LibreOffice MathML, Google Docs 다크 테마 붙여넣기를 다루며, 결과를 편집하고 HTML을 확인하는 기능을 제공함.
  • 오른쪽 패널은 실제 Tiptap 편집기로, 수식을 클릭해 수정하거나 Word에서 바로 붙여넣을 수 있음. 왼쪽 패널에서는 클립보드 HTML을 직접 편집하고 결과 변화를 확인할 수 있음.
  • 전체 처리는 브라우저 안에서 이뤄지며 데이터가 업로드되지 않음.

코드에서 적용하기

  • wordpaste의 transformPastedHTML을 편집기의 editorProps에 전달하면 붙여넣기 HTML을 변환할 수 있음.
  • 이 한 줄의 통합 방식은 같은 속성을 공유하는 원시 ProseMirror에서도 작동하며, Tiptap에서는 StarterKit 확장과 함께 사용할 수 있음.

실행 가능한 예제

  • 설치나 빌드가 필요 없는 단일 HTML 파일 예제를 제공함.
  • 예제 대상은 Tiptap, React, Vue, ProseMirror, Lexical, Vanilla JavaScript임.
  • 각 예제는 별도 탭에서 열거나 페이지에서 직접 실행할 수 있음.

해결하는 문제

  • Word 서식 유입: 붙여넣기를 가로채 클립보드 HTML에 transformPastedHTML()을 실행한 뒤 결과를 삽입함. 색상, 하이라이트, 글꼴과 글꼴 크기는 제거해 원본 문서 디자인이 앱에 번지지 않도록 하며, 굵게·기울임·밑줄·위첨자·아래첨자·링크·목록·표·텍스트 정렬은 보존함.
  • Word 전용 스타일: Word가 클립보드에 쓰는 수백 개의 mso- 선언, 조건부 주석, <o:p> 태그와 빈 span을 제거함. 해당 요소들은 브라우저에서 의미가 없음.
  • Word 수식: Word는 수식을 스크린샷과 실제 <m:oMath> 마크업 두 가지 형태로 클립보드에 넣지만, 편집기는 대개 이미지를 사용해 수식을 다시 편집할 수 없게 됨. wordpaste는 마크업을 읽어 OMML과 LibreOffice MathML을 편집 가능한 LaTeX로 변환함. 붙여넣기가 아닌 .docx 파일을 처리할 때는 OMML-라텍스 변환기를 별도로 사용할 수 있음.
  • Word 목록: Word는 목록을 목록 요소로 보내지 않고, 글머리 기호나 번호가 텍스트에 고정된 <p>로 보냄. wordpaste는 표시 기호를 읽어 실제 <ul>과 <ol>로 재구성하며, 중첩과 원래의 1. a. i. 번호 체계를 보존함.
  • Google Docs 서식: Docs는 붙여넣기를 <b style="font-weight:normal">로 감싸므로 해당 스타일을 단순 제거하면 전체 텍스트가 굵게 표시될 수 있음. 굵게·기울임이 인라인 스타일로 저장되는 문제와 문서의 글자색이 붙여넣기에 따라오는 문제도 처리함. 클립보드에 이미 이미지로 들어오는 Docs 수식은 복원할 수 없음.
  • 호환성: Tiptap, ProseMirror, Lexical, 일반 contenteditable, Quill, React, Next.js, Vue에서 사용할 수 있음. 프레임워크에 종속되지 않는 단일 함수이며 Outlook, Excel, LibreOffice도 처리하고 일반 웹 HTML은 변경하지 않음.

보안 정화 기능 여부

  • wordpaste는 서식 잡동사니를 제거하지만 위험한 마크업을 제거하는 정화기는 아님. <script>, 인라인 이벤트 핸들러와 javascript: URL은 그대로 통과함.
  • Tiptap, ProseMirror, Lexical 내부에서는 스키마가 해당 요소를 제거하지만, 출력물을 직접 innerHTML로 삽입하는 경우 먼저 DOMPurify를 실행해야 함.