Editing a button text

I’m trying some code to allow editing of button text:

<a href="https://www.apple.com"><button class="mybutton text-center">@text("button", default: "Button Text")</button></a>

Clicking to edit the button text isn’t very easy, would be nice if single click would insert cursor wherever in the text we click.

We’ll see what we can do, although it might be tricky to get it just right as often you want to just highlight (or drag) the Component, not edit the text :face_with_monocle:

As aside note: I see in your example you’re using a custom class of “mybutton” - you really need to be using tailwind classes. I know you are probably just messing around with things, but you really need to lean into using Tailwind!

Here’s some code for a button…

<button class="bg-brand-500 hover:bg-brand-700 text-text-900 font-heading text-xl py-2 px-4 rounded">
  Simple Button
</button>

And by using the Tailwind classes, it gives you a nice button that uses the built-in theme studio (colours and font), and this means users have a unified way of controlling its look.

Just something to keep in mind!

When clicking on an @text element - definitely want to edit it.
Don’t worry about classes in my examples I’m trying to keep code simple to focus you in on the problem :wink:

Oh, might as well mention again that @text really needs to be raw text only as using it on any other tags mutates p tags in there which is not good.

We’re working on the text editing engine, look out for some big improvements in the coming weeks.