wordpaste: cleaning Microsoft Word / Google Docs paste before $generateNodesFromDOM, with equations as LaTeX

[smrifat1411]

Sharing a small library I use with Lexical: wordpaste takes the clipboard text/html from Microsoft Word, LibreOffice Writer, Google Docs, Outlook or Excel and returns clean HTML. Real nested lists with numbering instead of "1." frozen in the text, tables and alignment kept, colours and fonts dropped, and Word's OMML equations turned into LaTeX in a data-latex attribute.

With Lexical it sits in a PASTE_COMMAND handler before $generateNodesFromDOM; the example page shows the ten lines: https://smrifat1411.github.io/wordpaste/examples/lexical.html

4.3 kB gzipped, zero dependencies, MIT: https://github.com/smrifat1411/wordpaste

Lexical already has its own experimental Word list import, so if you use that, the part you'd get from wordpaste is the rest: Google Docs' bold wrapper, Outlook, LibreOffice, and the equations.

[etrepum]

#9312 should make this a bit easier to hook in

[smrifat1411]

That's much cleaner than overriding PASTE_COMMAND. If I'm reading the PR right, the whole hook becomes:

configExtension(ClipboardImportExtension, {
  $importMimeType: {
    'text/html': [(html, _selection, $next) => $next(transformPastedHTML(html))],
  },
})

with ClipboardDOMImportExtension in dependencies to do the actual import.

One question before I put this in the README: does this handler sit above the ClipboardDOMImportExtension one simply because it's registered later in dependencies, or should the order be made explicit?

I'll update the Lexical example once #9312 lands.

[etrepum]

There are two examples in the #9312 now, one that requires the new ClipboardDOMImportExtension pipeline (simpler) and one that should work for apps that are still on static importDOM. This is the one for the latter case adapted to wordpaste:

import {
  type ClipboardDOMImportExtension,
  ClipboardImportExtension,
} from '@lexical/clipboard';
import {configExtension, declarePeerDependency, defineExtension} from 'lexical';
import {transformPastedHTML} from 'wordpaste';

export const WordpasteExtension = defineExtension({
  name: 'wordpaste',
  dependencies: [
    configExtension(ClipboardImportExtension, {
      $importMimeType: {
        'text/html': [
          (html, _selection, $next) => $next(transformPastedHTML(html)),
        ],
      },
    }),
  ],
  peerDependencies: [
    declarePeerDependency<typeof ClipboardDOMImportExtension>(
      '@lexical/clipboard/DOMImport',
    ),
  ],
});

It would be a bit less syntax to do it without the type import of ClipboardDOMImportExtension but this will let it fail type checking if there's a mismatch in the name of the peer dependency.

[smrifat1411]

Thanks, that answers the ordering question. I'll use the peer dependency version in the README since it covers both importers, and switch the example page over once this is in a release.