Visual Page Builder improvements and fixes

leandrocp commented 7 months ago

A meta issue to keep track of actionable feedback from the recent released Visual Page Builder

v0.1 (by priority)

[x] BeaconCMS/beacon_live_admin#155
[x] BeaconCMS/beacon_live_admin#154
[x] BeaconCMS/beacon#506
[x] BeaconCMS/beacon_live_admin#131
[x] BeaconCMS/beacon_live_admin#152
[x] BeaconCMS/beacon_live_admin#151
[x] #176
[x] #205
[x] #203

Nice to have

[x] BeaconCMS/beacon_live_admin#132
[x] #193

Backlog

[ ] BeaconCMS/beacon_live_admin#133
[ ] BeaconCMS/beacon_live_admin#134
[ ] BeaconCMS/beacon_live_admin#135
[ ] BeaconCMS/beacon_live_admin#136
[ ] BeaconCMS/beacon_live_admin#137
[ ] BeaconCMS/beacon_live_admin#138
[ ] Support markdown pages - duplicate of https://github.com/BeaconCMS/beacon_live_admin/issues/95
[ ] Auto-complete Tailwind utility classes
[x] #196

Done

[x] Javascript error clicking on the edit button for a children node on the list of children on the right sidebar. BeaconCMS/beacon_live_admin#113
[x] Edit content in place (contenteditable?) (#121)
[x] Be able to preview where the component being dragged is going to land. (#118)
[x] Backlist "self_close" as a property that can be edited in the sidebar (#117)
[x] Prevent default behavior of anchors in the layout (#116)
[x] Change icon to move up and down the tree. The current one looks like an "Undo" button. (#120)

bcardarella commented 7 months ago

In the visual Page builder I'm noticing that the "viewport" of the page is scalling down due to responsive design. I think we need to account for the lack of access to full page width and put the viewport rendering at a % of what horizontal screen real-estate it does have. Otherwise I believe certain breakpoints will be triggered that you may not be able to get past to get to larger breakpoints.

This also could lead to a VPB viewport change to set to certain known viewport sizes for differnet platforms. Similar to what you get in chrome tools:

bcardarella commented 7 months ago

Should actions that navigate you off page be allowed or any phx-actions be allowed from within the VPB? Right now they are, I'm not sure what the correct experience should be here.

bcardarella commented 7 months ago

To illustrate the layout issues, here is the Netflix Calendar case study outside of the VPB:

Now here it is inside VPB:

The limited horiztonal space means the visualization of the page won't match exactly what you'd see on desktop. I suspect this could lead to breakpoint related layout issues

And as expected once the horizontal space is reclaimed within the VPB it looks like the expectation:

bcardarella commented 7 months ago

I'm wondering if you navigate within VPB if it should bring you to that page within VPB

leandrocp commented 7 months ago

I'm wondering if you navigate within VPB if it should bring you to that page within VPB

I like the idea of linking because we've discussed about linking components so editing the page you can change component parameters and a link would take you to edit the component. The same is true for layouts, we display the layout on VPB but you can't change it but a link could take you to the Layout Editor.

bcardarella commented 7 months ago

@leandrocp if we're storing the AST in ETS of the page couldn't we override how the veririfed route is being generated? So the underlying content and paths don't change, just that we hijack the verified route sigil

leandrocp commented 7 months ago

@leandrocp if we're storing the AST in ETS of the page couldn't we override how the veririfed route is being generated? So the underlying content and paths don't change, just that we hijack the verified route sigil

For the page builder we generate the AST whenever you open the Visual Editor to apply changes made on the Code Editor, so it's all in-memory. But depending on the implementation, it may not be necessary to manipulate the AST.

For eg given this link <a href="/contact">contact</a> it sends the following JSON to the Svelte app: %{"attrs" => %{"href" => "/contact"}, "content" => ["contact"], "tag" => "a"}

The Svelte app can intercept a tags (and other tags that would display internal links) and display a "Go to page/component/etc" popup or something linking to /admin/my_site/pages/%2Fcontact (/ is encoded). Note that Admin use id in routes instead of the path like in this example but it may be worth changing it anyway to simplify links inside Admin.