Post

Any tips on achieving the following? I have a tiptap editor, and I want all styles stripped from text and links when I paste them into the editor. I plan to apply custom styles to the pasted links, but the key point is that I don't want any styles to carry over.

26/11/24, 7:01 pm0 reposts1 like

Konnor Rogers

@konnorrogers.com

26 Nov 2024

How much time do you have 😉

Konnor Rogers

@konnorrogers.com

26 Nov 2024

So I'm *pretty* sure TipTap does not have any conveniences around pasting. So in order to do so you have to create a TipTap extension wrapper around a ProseMirror plugin. In the ProseMirror plugin you'll have access to `handlePaste`, the other option is an `appendTransaction` to strip styles.

prosemirror.netProseMirror Reference manual

Konnor Rogers

@konnorrogers.com

26 Nov 2024

tiptap.dev/docs/editor/... You'll probably need to scour ProseMirror docs / forum to see how handlePaste can modify pasted contents. It may even be `transformPastedText` or `transformPastedHTML` Here's where "the joy of discovery" happens 😅 prosemirror.net/docs/ref/#vi...

tiptap.devExtend extensions | Tiptap Editor DocsExtend an already existing extension in Tiptap to add new features and functionalities to your editor. More in the docs!

Jesper Christiansen

@jesper.dev

26 Nov 2024

This is great! Thanks, Konnor! I had made it so far to know about handlePaste, but `transformPastedText` and `transformPastedHTML` is new to me - I'll dig deeper on this. Thank you!!

😬

Not sure how/if it applies to TipTap, but the WordPress editor (Gutenberg) does a fantastic job of this! It’s all React underneath, maybe steal from there?

Konnor Rogers

@konnorrogers.com

26 Nov 2024

Due to ProseMirrors document model, im not really confident it would be directly useful. A lot of the problem is just finding the right ProseMirror hooks and proper node traversal + transform

Casper Klenz-Kitenge

@cabgfx.com

26 Nov 2024

I cede the floor 🫡 also, thanks for always chiming in on these particulars around editors and such! so so important that hard won experience like yours is shared and passed on to the community at large! 🙏