Add customization panel from craft.js

[tennox]

Love this, but I'm thinking: wouldn't it be even more amazing if the customization panel that craft.js has included would be available?

Is there a reason it's not included? Is it complicated to set up?

[LiveDuo]

Hey @tennox,

It's indeed not a trivial task to integrate. The example on Craft.js' website makes it look simple but is far more complicated in practise, in the example case the customisations are integrated on one specific component. Destack has ~200 components though and we can't integrate these customisations for all of them.

The only way to get this customisations is to dynamically apply them to the HTML sub-elements of the components which is similar to what we do in the case of text, image and links/buttons. We'd have to parse div-like elements to add padding/margins and text-like elements to add colours and typography.

The good thing is that we have the parsing part, we'd still need the part to "intelligently" save the props and render them when necessary and there's some deciding into which components should customisable and which not.

---

For reference:

Editors has two designs, section-based and HTML-based.

Craft.js is designed so that different sections have props and you can create toolbars to edit these props. A prop could be any CSS-like property (eg. padding, margin or colour) or any other property you might need to save (eg. Destack saves the action type a link has that can be a link to a url or API request or a form submission). Note these props "belong" to each section and not to each individual component, to have component-based props you'd have to manage them yourself.

Grapes.js has a HTML centric design and saves all edits based on the exact HTML component that is edited. This way is easier to make low level customisations such as custom CSS for each component but makes it harder to have sections and manage components together such as submitting forms and have a simpler high level page builder.

[LiveDuo]

@tennox Version 3 is out and it's now HTML-based. You can easily change the HTML either in DevTools or by updating the template file.