Extending TipTap

[richdynamix]

Is there a way to extend the TipTap editor to allow some custom HTML?

During an import from Bard in Statamic to TipTap in Filament, our figure element is just being set as a img tag as it seems the figure is not supported in the default setup. This is also noticed when adding an image via the Curator picker, the image is rendered as just a img with an alt tag, but doesn't add a figure with caption when the image has it saved correctly.

I would like to add additional media types such as twitter embedded tweets, currently this is just a blockquote with the accompanying script tag, but as TipTap doesn't recognise the script tag, it is stripped out from the saved HTML.

[awcodes]

It's not documented, since it's still a work in progress, but you can make your own extensions. Give it a go https://gist.github.com/awcodes/fb0425c4a2afd0fc8c3318784d9a53fb

[richdynamix]

Brilliant! Thank you, I will give this a go.

[christopher87]

Hello,

I have tried to create my own extension with your example. But I guess it didn't find the JS file, because I have an error that says :

module.esm.js:421 Alpine Expression Error: editor(...).chain(...).focus(...).setPhrase is not a function

I have just copy/paste your code, change extension name on each file, and change command name ("setPharse" instead "setHurdle")

Did I miss something ?

I would like to create a custom menu with submenus like Hurdle, on click on submenu it displays a sentence.
I would like to reproduce this thing I have done on TinyMCE :

Thanks in advance.

[awcodes]

Are you on v2 or v3?

[christopher87]

I use v2, I am afraid that v3 (Filament) is not stable enough for production and I don't know if all the plugins I use are compatible with v3.

[awcodes]

I wouldn't recommend v3 for production yet, either.

I can't think of anything that would have changed in v2 that would keep it from working.

Can you share all the code you implemented in a gist?