How to create an editable label?

I have a “Title” that (when the edit mode in my app is enabled) should be editable.
The goal is to not change the title visually, but when it is tapped/clicked → there will be a | cursor.

Currently the title is still a simple text-slot. (the title text is stored in a db)

Should I turn it from a text-slot into a TextInput(the one that comes with Plasmic)? While disabling it somehow per default and letting the placeholder show the title.
Or have both a text-slot and a TextInput and make them look the same and switch them out during edit mode.
(My TextInput is currently used in a Searchbar component and has it’s styling designed for that. But I could duplicate it and change it to look like the title.)

This all seems kinda hacky. Maybe you have thought about sth like this before and have a better idea?

Usually (whether in Plasmic or in code) you would implement this using both elements, a text slot and a text input, and swap them - your latter approach

thanks @yang

fyi, the link to your docs from the optimization panel needs to be corrected.
it currently starts with


And I would make it more prominent.
eg. a big blue button that says “Read more about how you can customise segments”

after you’ve fleshed out the docs