Proof of concept: turning the TipTap editor into a real page builder with drag&drop

[empiricompany]

Hi everyone,

The TipTap editor in Maho is already great: blocks, columns, bento grids, accordions, widgets, variables and directives make it possible to compose quite rich content.

That made me wonder: with a few small additions, could it become a real page builder?

To explore the idea I built a proof of concept as a standalone module, with no core patches:

https://github.com/empiricompany/maho-design-mode/

What the proof of concept does

• Adds a Design Mode button next to Fullscreen in the editor toolbar. It opens a full-screen shell with a rail of blocks on the left and the content on the right.
• The rail exposes what the core already knows - columns, bento grids, accordion/tabs, image, slideshow, widget, variable, table and inserts them with the same editor commands, so the saved markup and the sanitization path stay the same.
• Blocks can be inserted with a click at the caret or by dragging them into the content. The drop line is as wide as the container that will receive the block, and that container is outlined, so it is clear whether the drop lands in a nested cell or at page level.
• A move handle on every block, nested ones included, reorders blocks inside a column or takes a block out of its container. Today the core DragHandle does this only for top-level blocks, because it runs without its nested mode.
• A new CTA component: a button next to Link in the toolbar opens a small dialog (label, link, daisyUI variant, size, wide/full width, new tab).

This is a proof of concept, I would like to know whether this is something you would consider integrating into the core.

[empiricompany]

Quick update on the same proof of concept: the editor now has a live preview next to it.

• Edit on the left, the real storefront page on the right: links, forms and the theme's own JS all work, so you can click through the page while you edit.
• Store view selector grouped by website (same shape as the system configuration store switcher), mobile/tablet/desktop presets, a draggable splitter, scroll sync, and "open in window".
• The reload control turns into a stop button while a page is loading and cancels it; edits refresh the preview when you stop typing, one request at a time and only if the content changed.
• The preview is rendered by the storefront itself, so what you see is the page a visitor gets. The editor content is handed over through a short-lived, token-signed cache entry: no POST to the page, no form key, nothing written to the database.

Still a standalone module with no core patches: https://github.com/empiricompany/maho-design-mode/

[fballiano]

@empiricompany this is super nice!!!! I'd gladly introduce it in the core for sure! would you want me to convert it into a PR?

[empiricompany]

You are free to do what you want! But the code is very vibecoded and should be checked.

I would also like to integrate monaco editor as done here https://github.com/empiricompany/openmage-mm_monacoeditor
with automatic compilation of tailwind classes would be great!