Making text elements editable inline in canvas

[stefanuebe]

Simple example:

I have for instance a Span or H1 or similar simple element, that is nothing else then a text container.

There are two ways I could imagine editing that:

1st way: Simple click sets a text cursor as it is known from wysiwyg text editors. The respective element is focused as it is know, but simple type changes the text.

2nd way: When double clicking that in the canvas I would expect some inline editing of that element (for instance a small text field appears with some modal appearance. When hitting enter or clicking somewhere else, the value is saved, using escape cancels it.)

Same should go for elements with visible text:

• Button text
• Input field's label (including checkbox' label, checkbox group and radio button group entries, etc.)

So simplified: When I see some text and double click that text, it should immediately be inline editable.

If that is to complex for a first implementation, I personally could live with a between step, that at least set the focus to the relevant editor (in case of a pure text container: the text editor; in case of a more complex element, the related attribute in edit mode, for instance the label of a text field should focus the attribute "label").

There might be elements of course, where the above described behavior is not possible, due to whatever reasons. That's ok, I guess for most cases like labels and simple text containers, that would be already a very helpful feature :)

Steps to reproduce

A

1. Add a simple text container, like span or h1.
2. Double click it.

B

1. Add a text field from the component templates, so that it has a label
2. Double click the label.

Actual behavior

A and B - nothing happens beside the component is selected in the outline.

Expected behavior

See above

IDE, Designer and OS version

IntelliJ, Designer 4.5.0, Chrome designer, Windows 10

[Peppe]

Let's start off with making double click on a text node do the following

1) Select the parent element of the text node 2) Put focus on the text area in the text panel. 3) Preselect all text in the text area.

This means that you can double click on canvas and start typing a new value directly. It does not include inline editing (textfield being on the canvas) or editing captions and labels which are part of the comment. Those are effortwise much bigger things, so let's create new issues for those.

[stefanuebe]

Ok, but the inline thing should not be put too far aside, at least in mind, since jumping to the text editor part of the properties disrupts the visual workflow a lot (jumping from the left part to the right part and vice versa a lot of times) 🙂

[anssit]

There's an existing issue for what @Peppe described above: https://github.com/vaadin/designer/issues/2203

[stale[bot]]

Hello there!

It looks like this issue hasn't progressed lately. There are so many issues that we just can't deal them all within a reasonable timeframe.

There are a few things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are many duplicates in our issue tracker, so it is possible that the issue is already tackled.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!