Visual Page Builder improvements and fixes

[leandrocp]

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

v0.1 (by priority)

• Components sidebar stops working after a while #155
• Fix element selection on page builder #154
• Review blueprint components beacon#506
• Page Builder - enable the editor on New pages #131
• Resize Content input text to fit more text #152
• Support require on tailwind config #151
• Allow moving elements after it was dropped into the page #176
• Dropping a dragged object into invalid target breaks the component sidebar #205
• Improve target placement #203

Nice to have

• Allow components to be moved up the page tree #132
• Display a "X" or trash icon on the element boundary when hovering it to allow deleting the element #193

Backlog

• Prevent the user from loosing unsaved changes when navigating away #133
• Breakpoint manager #134
• Component linking - selecting a components should allow users to go edit the component in the Component Editor #135
• Layout linking - redirect to edit the component in the Component Editor #136
• Links should redirect to edit the page in the visual editor #137
• Migrate LiveSvelte from esbuild to vite #138
• Support markdown pages - duplicate of Editor: Improve UX/UI for markdown #95
• Auto-complete Tailwind utility classes
• Embedded video elements should display attrs when selected #196

Done

• Javascript error clicking on the edit button for a children node on the list of children on the right sidebar. Bugfix on recursive element find  #113
• Edit content in place (contenteditable?) (Allow edition using content editable #121)
• Be able to preview where the component being dragged is going to land. (Preview where the dragged element is going to land and how it is going to look #118)
• Backlist "self_close" as a property that can be edited in the sidebar (Self_close is not an editable attribute, is just for internal use #117)
• Prevent default behavior of anchors in the layout (Prevent layout links to navigate the user to a different page #116)
• Change icon to move up and down the tree. The current one looks like an "Undo" button. (Improve level up icon #120)

[bcardarella]

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]

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]

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]

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

[leandrocp]

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]

@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]

@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.

[amy-l-nitrate]

When adding a new component to the page, I have the option of adding a new class. However, I don't know what "classes" are available. It's a free text box and there are no class options to select. "Class" is not a term a non-tech user would know and without examples, it is confusing as to what is possible with this option.

[amy-l-nitrate]

"Link" component (found in Basics) is not functional. I was unable to drag and drop a link anywhere on a page.

[leandrocp]

When adding a new component to the page, I have the option of adding a new class. However, I don't know what "classes" are available.

Would autocomplete with all possible tailwind classes help?

[amy-l-nitrate]

When adding a new component to the page, I have the option of adding a new class. However, I don't know what "classes" are available.

Would autocomplete with all possible tailwind classes help?

Yes, that would help.

[amy-l-nitrate]

I know you said this only works for HEEx pages so the blog does not apply. Being able to use a visual editor with Markdown will be helpful because we would be able to preview blog posts. The blog is the part of the website that is updated most frequently for us, and I assume, for many companies. I would want that feature enabled if I were paying for this software.

[amy-l-nitrate]

As mentioned in the call today, some visual indication of WHERE my component is able to be placed is essential. As it is now, I select one, drag it over to where I want it to be, release, and then have to go find it. Usually shoved to the bottom. It feels arbitrary as to where components are placed inside any given page.

[amy-l-nitrate]

When adding text copy to a page, I will want to see more than a few words at a time. This content box is far too small to be helpful or useful. Most text is several lines long. At minimum, a paragraph view is needed.

[amy-l-nitrate]

What does BASE mean? I think this is a term that makes sense to engineers building this system but doesn't make sense to a marketer using it.

[amy-l-nitrate]

Not sure if this is a future release, but I can't seem to use the visual editor to create a page from scratch. I can only edit existing pages made up of HEEx components.

[cwgandarilla]

Trying to add stats or signups results in this text and nothing else.

[cwgandarilla]

When trying to edit an H1 with multiple styles, there sometimes isn't an option to edit the first word:

[cwgandarilla]

After being on the page for a few minutes, I lose the ability to select any of the components to add to the page.

[absowoot]

With a fresh install of both beacon and beacon_live_admin I'm receiving the following JS error while using the page builder in Chrome Version 123.0.6312.124 on Mac Sonoma 14.4.1:

Uncaught (in promise) ReferenceError: require is not defined at...

let plugin = require('tailwindcss/plugin')

This breaks the page builder editing experience as well: