Hello.
I’m linking a textBlock to a Panel to edit text. When I try to edit the text, if the original text’s length is long, it extends beyond the textarea, and it still appears in the background. I’ve tried various properties of the textBlock to solve this issue, but I can’t figure it out. How can I resolve this?
I will attach a picture of the issue I am experiencing here.
When the user edits text with the TextEditingTool and its text editor (by default a textarea), the diagram does not change until the user successfully finishes editing. That is why the original text remains visible when the textarea doesn’t cover the whole TextBlock.
You could customize the text editor so that the textarea always hides the whole TextBlock, or you could temporarily make the TextBlock.stroke “transparent”. There are other possibilities too. What do you want to happen?
I want the textarea to always hide the whole TextBlock.
You’ll need to customize the text editor. Copy extensions/TextEditor.js into your project and modify the input listener to:
textarea.addEventListener('input', (e) => {
const tool = TextEditor.tool;
if (tool.textBlock === null) return;
const tempText = tool.measureTemporaryTextBlock(textarea.value);
const scale = textarea.textScale;
textarea.style.width = 20 + Math.max(tool.textBlock.measuredBounds.width, tempText.measuredBounds.width) * scale + 'px';
textarea.rows = Math.max(tool.textBlock.lineCount, tempText.lineCount);
}, false);
Load this file and install the custom text editor with something like:
myDiagram.toolManager.textEditingTool.defaultTextEditor = window.TextEditor;
I have some errors.
“‘HTMLTextAreaElement’ type does not have the ‘textScale’ property.”
“‘Window & typeof globalThis’ type does not have the ‘TextEditor’ property.”
Or how can I make the TextBlock.stroke “transparent” temporarily?
textScale is set initially in show.
window.TextEditor is defined when extensions/TextEditor.js is loaded.
Why don’t you like this solution? It precisely meets your requirements: “I want the textarea to always hide the whole TextBlock.”
But you can implement changing the TextBlock.stroke by overriding TextEditingTool.doActivate and doDeactivate.