wordpaste가 Word 수식을 편집 가능한 형태로 붙여넣는다

wordpaste는 크기가 3.6 kB이고 의존성이 없다. Word에서 붙여넣은 수식을 이미지가 아니라 편집 가능한 형태로 남긴다.

이 도구는 Word와 Google Docs에서 복사한 내용을 편집기에 붙여넣을 때 불필요한 서식을 정리하는 JavaScript 라이브러리다. 개발자가 편집기에 연결하면 수식은 LaTeX로 변환해 수정할 수 있고, 문서의 서식 찌꺼기는 제거된다.

wordpaste는 어떻게 동작하나?

붙여넣기 정리 기능은 편집기에 전달되는 HTML을 다듬는 필터에 빗대면 이해하기 쉽다. 실제로는 transformPastedHTML() 함수가 클립보드 HTML을 처리하며, Tiptap·ProseMirror·Lexical이나 일반 contenteditable 편집기 등에서 쓸 수 있다.

데모에서는 Word의 수식과 텍스트·이미지, LibreOffice의 MathML, 어두운 테마의 Google Docs 내용을 선택해 시험할 수 있다. 오른쪽 편집기에서 수식을 눌러 수정하거나 Word에서 바로 붙여넣을 수 있다. 왼쪽의 Edit HTML 탭에서 클립보드 HTML을 바꾸면 결과가 갱신된다. 모든 작업은 브라우저에서 이뤄지며 내용은 업로드되지 않는다.

무엇을 보존하고 무엇을 바꾸나?

Word가 클립보드에 넣는 수백 개의 mso- 스타일 선언, 조건부 주석, <o:p> 태그와 빈 span을 제거한다. 색상·강조 표시·글꼴 종류와 크기는 버리지만, 굵게·기울임·밑줄·위첨자와 아래첨자·링크·목록·표·텍스트 정렬은 유지한다.

Word의 수식은 화면 캡처 이미지와 실제 <m:oMath> 표시를 함께 클립보드에 넣는다. 편집기들이 이미지를 가져가는 경우가 많지만, wordpaste는 표시를 읽어 LaTeX로 바꾼다. LibreOffice의 MathML도 처리한다. .docx 파일을 다룰 때 쓸 수 있도록 OMML에서 LaTeX로 변환하는 기능도 별도로 제공한다.

Word 목록은 각 항목을 글머리 기호나 번호가 글자에 붙은 문단으로 보낸다. wordpaste는 그 표식을 읽어 중첩 구조와 1. a. i. 번호 순서를 갖춘 실제 <ul>·<ol> 목록으로 재구성한다.

Google Docs 붙여넣기는 굵게·기울임을 인라인 스타일로 저장하고, 텍스트 색상도 가져온다. 굵기를 나타내지 않는 font-weight:normal 스타일을 단순히 제거하면 내용 전체가 굵게 보일 수 있는데, wordpaste는 이 문제와 굵게·기울임 스타일, 색상 처리를 다룬다. 다만 Google Docs의 수식은 클립보드에 이미 이미지로 들어가므로 복구할 수 없다.

편집기에 연결하려면 무엇을 확인하나?

Tiptap, ProseMirror, Lexical, Quill, React, Next.js, Vue와 일반 HTML 편집기에서 쓸 수 있다. Outlook, Excel, LibreOffice도 처리하며 일반 웹페이지의 HTML은 그대로 둔다. 설치 명령은 다음과 같다.

npm i wordpaste

Tiptap과 ProseMirror에서는 같은 함수를 편집기 옵션에 연결한다.

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { transformPastedHTML } from 'wordpaste';

new Editor({
 element,
 extensions: [StarterKit],
 editorProps: { transformPastedHTML },
});

사이트에는 Tiptap, React, Vue, ProseMirror, Lexical, 일반 JavaScript용으로 설치나 빌드 없이 열 수 있는 단일 HTML 예제가 있다.

wordpaste는 보안 필터가 아니다. <script>, 인라인 이벤트 처리기, javascript: 주소는 그대로 통과한다. Tiptap·ProseMirror·Lexical에서는 편집기 스키마가 이를 제거하지만, 결과를 직접 innerHTML에 넣는다면 먼저 DOMPurify로 정화해야 한다. 원문은 각 편집기나 라이브러리의 구체적인 지원 버전 범위는 밝히지 않는다.