Old text is visible while editing text

GoJS
#1

Hi!

I have a textBlock in the group node that can be edited.
When editing that text the old text, which I am trying to edit, is still showing up in the background. It only causes the issue when I delete text completely and the width of the textBlock shrinks.

I tried adding minWidth of the textBlock, but that doesn’t work as it lives inside a container that when text is empty shrinks as well making textBlock go beyond the containers boarders. Setting opacity to zero doesn’t work too as it keeps it invisible when textBlock is out of focus.

My question is, whether there is a way to hide the text on the background while editing is in progress?

Thank you!

#2

I believe that the <textarea> used by the built-in text editor (https://gojs.net/latest/extensions/TextEditor.js) is opaque. So during editing you cannot see through the editor to the TextBlock and other GraphObjects behind the editor.

I suppose if the editor (i.e. textarea) is smaller than the TextBlock, you could see some of the TextBlock. If that is the problem, you could customize your editor so that the textarea never gets narrower or shorter than the TextBlock.

#3

OK. How do I go about making sure that the text area never gets narrower or shorter than the textBlock?

Cheers!

#4

Copy the text editor defined in extensions/TextEditor.js or extensionsJSM/TextEditor.ts and demonstrated in extensions/TextEditor.html or extensionsJSM/TextEditor.html into your project. Note how its “input” event handler sets the width of the textarea. Modify the code to meet your needs.

#5

Excellent! Thank you!