Visual Controls to manipulate properties of elements in the Visual Editor

[leandrocp]

This is a big lift for the Visual Editor but a very much needed feature to unblock users to manipulates attributes in a friendly way.

Currently the only way to change the style of components and elements in the page is adding or removing Tailwind classes, which requires UX knowledge. For example one should add the class text-red-500 to change a text color, but that's far from ideal. We can't ask our users to learn Tailwind.

So this proposal is to add Visual Controls to manipulate such attributes, either HTML attributes or Phoenix Component attributes. For example the Visual Editor should display a color wheel to manipulate colors and then generate the proper classes, or for example display a list of fonts to change fonts, or controls to change positioning and spacing to resize elements. There are many possible visual controls that we'll need to map. Besides that we also need to support visual controls for components, which means we need to expose which visual control should be enabled for each kind of attribute, for example let's suppose there's a "carousel"component to display images and one of the atts is "limit" of type number, it could be displayed as a range input instead of text input.