MIT · zero dependencies · 3.6 kB

Paste from Word without the mess

Word's clipboard HTML is full of invisible styling, dead image links, and equations flattened into screenshots. wordpaste cleans all of it — and keeps the equations editable.

npm i wordpaste npm ↗ GitHub Docs OMML → LaTeX

Sample:

Without wordpaste what a typical editor keeps
With wordpaste a real editor — click an equation

Loading the editor…

Both panels are live. The right one is a real Tiptap editor — click any equation to change it, or paste straight from Word. The left one's Edit HTML tab lets you change the clipboard HTML by hand and watch the result update. Everything runs in your browser; nothing is uploaded.

The code doing it

That is the whole integration. The same one line works in raw ProseMirror, because they share the prop.

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

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

Runnable examples

Single HTML files — no install, no build. Click one to load it below.

Open this example in its own tab ↗

Open an example directly: Tiptap · React · Vue · ProseMirror · Lexical · Vanilla JavaScript

The problems this solves

How do I stop Word formatting coming through on paste?

Intercept the paste, run the clipboard HTML through transformPastedHTML(), insert the result. Colour, highlight, font family and font size are dropped so the source document's design cannot leak into your app. Bold, italic, underline, super/subscript, links, lists, tables and text-align survive.

What are all the mso- styles and class=MsoNormal?

Word writes its own private formatting language onto the clipboard — hundreds of mso- declarations, conditional comments, <o:p> tags and empty spans. None of it means anything to a browser. It is stripped here.

Why do Word equations turn into pictures?

Word puts an equation on the clipboard twice: as a screenshot and as real <m:oMath> markup. Editors take the picture, so nobody can edit the maths again. wordpaste reads the markup instead and converts OMML — and LibreOffice's MathML — to LaTeX you can still change. If you are working with .docx files rather than a paste, the converter is available on its own: OMML to LaTeX.

Why do Word lists paste as plain paragraphs?

Word does not send a list as a list. Every item is a <p> with the bullet or number frozen into the text, so reordering leaves the numbering wrong forever. wordpaste reads those markers and rebuilds real <ul> and <ol>, with nesting and the original 1. a. i. sequence.

Why does a Google Docs paste come out all bold, or unreadable on a dark theme?

Docs wraps every paste in <b style="font-weight:normal"> — strip that style naively and the whole paste turns bold. It also stores bold and italic as inline styles, and pastes your document's text colour, which is why light text lands invisible on a light editor. All three are handled. Its equations are already images on the clipboard, so those cannot be recovered by anyone.

Does it work with Tiptap, ProseMirror, Lexical or plain contenteditable?

All of them, and Quill, React, Next.js and Vue — it is one function with no framework inside it. See the runnable examples above. It also handles Outlook, Excel and LibreOffice, and leaves ordinary web HTML alone.

Is it a sanitiser?

No. It removes formatting junk, not dangerous markup — <script>, inline event handlers and javascript: URLs pass straight through. Inside Tiptap, ProseMirror or Lexical the schema drops those anyway. If you insert the output yourself with innerHTML, run DOMPurify first.