I am working on in–browser editor for print products. The (relevant part of) workflow goes as following:
- User sees image (technically SVG file, loaded into page DOM).
- User can select certain designated text elements on the image, discoverable by highlight on cursor hover.
- Having selected text element, user can modify text and/or color of the element, using control elements next to the image.
- User sees changes applied to the image immediately.
Now the issue is if user deletes all of the text in element then there is nothing to click on anymore. The element technically and logically performs the role of both content and clickable area.
How to handle such issue?
The variants I have considered so far:
- Prevent user from being able to completely erase text, such as making last symbol undeletable. This is just meh editing experience.
- If the text is erased replace it with some kind of placeholder value, such as
[empty]string. This doesn't work if user wants text to be gone.
- Try to preserve clickable zone in some way, such as using placeholder from (2), but making it fully transparent and only reacting to hover.
I guess I could try decouple the role of target area from text, but at the moment it would be challenging to do dynamically in editor and can't be done in advance since image files are produced by third parties.
What would be optimal from user experience point of view here?