Fieldtype like Bard from Statamic

[Mikie]

Hey, would also love this. More links below:

Some other options:
https://github.com/madebymany/sir-trevor-js
https://github.com/vigetlabs/colonel-kurtz
https://editorjs.io
https://docs.slatejs.org

HN discussion on this topic:
https://news.ycombinator.com/item?id=19555633

WSIWYG type editor lists:
https://github.com/JefMari/awesome-wysiwyg
https://gist.github.com/manigandham/65543a0bc2bf7006a487

What bard is build with:
https://prosemirror.net
https://tiptap.scrumpy.io

Maybe we could all band together and buy an enterprise license for froala to allow redistribution:
https://www.froala.com/wysiwyg-editor/examples

Squarespace, despite being buggy and bloated, is actually quite an amazing application and a good example of complicated layout building ui.

At the very least, it would be nice to have a split pane preview mode for matrix repeater that wasn't an overlay, eg like in that bard demo.

[Pete]

I'm dredging up an old topic here but had a need to go and look for something like this - not for a ProcessWire field - and ended up deciding TipTap looked like the best bet.

It also turns out that Invisioncommunity (the forum software in use here) also uses TipTap: https://invisioncommunity.com/forums/topic/478170-invision-community-5-the-all-new-editor/ (so expect this forum to use that editor when we finally upgrade to v5 as there is no choice when upgrading forums unlike the unlimited choice you get in ProcessWire 😅).

Now I am interested in a TipTap field for ProcessWire for a few article-heavy websites where we have mostly text but sometimes need to add in an image, a CTA block (some editable per article, some locked), image/text in a column with some settings and as far as I can tell TipTap allows for all of this because you can just build any widget you want and make them drag-droppable.

Before I get too far down this rabbit hole has anyone investigated this sort of thing since 2019? Searching the word "editor" on the forum naturally returns a lot of results, many of which not actually related to alternative rich text editors I'm basically interested in the simplicity of having just one editor versus repeater matrix pages where it's not technically needed a lot of the time.

I did also look at editor.js which looked really cool but that one doesn't seem to have been updated in years and TipTap is both open source and has some big customers so will still be here in a few years. my brain got confused because some folders were last changed 2 years ago but it is still in development and also looks good - possibly better in fact as the demo on the homepage is already more the way I envisioned.

[BrendonKoz]

I think experimenting with a block-style editor would be great. In the very large discussion over WYSIWYG editors (I don't recall of this was a 2025 wishlist, or a discussion of the future of TinyMCE/CKEditor, but it had a LOT of paginated responses), a few people even experimented in creating a proof-of-concept with editor.js, showing their results. I gave it a shot but determined the end result (interface) was too cumbersome for most of my users (and I usually try to aim for a very low bar as a standard; less complaints / support needed). Even in the demo (tried today) I was able to cause a rendering bug in both of the editors mentioned (TipTap, Editor.js) above.

That said, if a true module is attempted to be released, since they render and use JSON as the underlying structure, I would recommend using a similar database structure to TinyMCE and/or CKEditor, and save the HTML-rendered output in a field just in case someone wished to switch back to a standard text editor for a particular field. (Unfortunately that means only one-way compatibility, however - and increased storage costs/size...so maybe an option for that in the module.)

[Pete]

I think having seen Kirby CMS' blocks editor last week that that sort of UI with the JSON storage behind the scenes could be the way to go.

I think some mashup of the JSON storage from one of those editors, Kirby's UI and the way the Pro Custom Fields module has its fields configured would be the perfect blend and then get rid of the need for Repeater Matrix for a lot of things. Some limitations would be that you have to store images/files somewhere but it's easy enough I guess to just have a field for each that acts as a bucket and the block editor references them. If the UI was advanced enough they could be there but hidden or something.

I'll see if I can track down that other discussion - sounds interesting, thanks Brendon!

[BrendonKoz]

The largest problem with the JSON-type WYSIWYG implementation of editors is that they all have their own custom implementations and conventions of how they represent the DOM via JSON. Quill was one of the first (that I was aware of) to have a complete and somewhat sane implementation therein. That said, since that seems to be the way editors are moving in general, I think it makes sense to go in that direction as well, but choosing should be made with care, determining as many pros and cons of features and technical decisions for the choice as possible.

The topic that covers editor.js is: https://processwire.com/talk/topic/24876-pw-30170-– core-updates/

There was another one (I believe the next update by Ryan in News & Announcements) that partially continued the discussion, but most of it, if I'm remembering correctly, was here.

Statamic's Bard uses TipTap, and prior to that used ProseMirror (TipTap uses ProseMirror under-the-hood which is likely why they were able to easily switch to TipTap; the same underlying JSON representation).

EDIT:
I think @jploch's module, PAGEGRID, originated out of that discussion. 🙂

[Pete]

Thanks - yes I forgot about PageGrid.

[howdytom]

I really like Kirby Block UI. Matrix repeater is pretty close to it, but it is missing some nice Icons.

[AndZyk]

12 hours ago, howdytom said:

I really like Kirby Block UI. Matrix repeater is pretty close to it, but it is missing some nice Icons.

You can set custom icons for your Repeater Matrix elements in the item header. 😉

https://processwire.com/blog/posts/new-repeater-and-repeater-matrix-features/#custom-icons-for-repeater-types

[howdytom]

Wow, I missed that. That is the beauty of the friendly ProcessWire Community. You always learn something new. Thank you!