I was just wondering… When I think how easy it is in a visual editor to edit visual things in code, I often dive into a class to write some rules myself. Where I can see all my Tailwind classes applied.
Well… If the new design tool can inject those classes visually, which you HAVE to use to add Tailwind classes, can it than also directly inject those classes in the Monaco editor? It’s Open Source, so…
It does that after all, injecting and appending/deleting/editing classes inline, so why not do that directly inside Pinegrow? It’s inception, yes, but the right kind if you ask me; a kind of design system in itself to ‘manually’ write out the actual code, with a visual aid.
Makes perfect sense if you ask me and I would love it already if it could only ADD new classes. That would change the whole idea of an IDE for me; a visual editor to help you code, with live editable previews.
Same tool, same system, different UX; It would mean that if you put Pinegrow on an iPad, and would restrict how people use it, this is how I would do it to make you actually productive without the need for a keyboard.
Hi @BonoBoos,
I’m a little confused about what you want. The visual editor adds Tailwind CSS classes, but you also want something like intellisense within the editor? So you type the first few letters of the class and it autofills? Maybe you could clarify a bit.
Cheers,
Bob
Sure, just think of the floating design tool as a way to insert tailwind classes in the actual code, so it just injects the class you want to add.
So no keyboard at all, just using your mouse to put the cursor on the place you need, then you click & add the class you want from the visual editor.
That’s it, no Intellisense; the design tool is that already and restricts you nicely to use anything outside of Tailwind in your markup, or leave Pinegrow for that matter.
Yes, the throws a message saying “select an element first”, meaning I have to select a visual element to add the code where my cursor is.
Unless I’m missing something, putting your cursor on the position you want and then selecting the TW class you want to add doesn’t work.
It’s not a weird idea if that’s what you’re suggesting otherwise. Look at this very window that I’m replying in; it has a design toolbar fixed at the top so I can style my message and do all sorts of things.
Sorry @BonoBoos,
No offense meant. When I did a quick test I selected an element on the page first to identify where in the code the element was. At that point I clicked into the class attribute and selected some items on the toolbar and they were added. I forgot that changing the cursor position no longer selects a new item on the page without either right-clicking or using a hot key.
Cheers,
Bob
Hi @BonoBoos,
Not fully the solution you are looking for, but at least on Mac you can select elements within the Code Editor (Monoco) by holding the option key when clicking with the mouse. I assume that would be the alt key on Windows, not sure about Linux. Don’t have either of my other two boxes easily available for testing. Once you ‘option-click’ the toolbar will add the expected classes. Not quite keyboard free, but closer to the keyboardless editing in the Code Editor!
Cheers,
Bob
