[Bug]: cursor should stick at the end in text wrap mode

[Vishal-Patil-Gslab]

What happened?

Currently when text wrap is enable the cursor jumps to middle while typing and also spaces are not preserve
Please find attached video https://screenrec.com/share/MCZlKosU3h

Version

3.3.0

What browsers are you seeing the problem on?

No response

What operating system are you seeing the problem on?

No response

[kumilingus]

Using the textWrap property with the TextEditor is not currently supported.

We'll most likely fix the position of the cursor for the following textWrap configuration only.

textWrap: {
   height: null, // no height restriction
   preserveSpaces: true, // do not collapse spaces
}

If you limit the height of the text, the text will eventually overflow the area and scrollbars will need to be displayed. That is not a feature of SVG - rendering custom scrollbars and clipping the text would be required.

For the other cases, you might need to use a different approach:

1. switch off the text wrapping before you start editing the text. switch it back after you stop editing the text.
2. render a <textarea> above the element as shown here or here.
3. use the <foreignObject> and set contenteditable on its content. The foreignObject example is here. Note, that there will be a better support for foreign objects in version v3.7.

[Vishal-Patil-Gslab]

thanks @kumilingus for the different approaches with little bit of tweaks the text area approach will works for us.

also this is bit of off topic but do you have any upgrade documentation that points out any breaking changes while upgrading from one version to another. we are now on version 3.3.0 and using it with reactjs +typescript

[kumilingus]

We're on version v3.6 and we follow the semantic versioning. There should be no breaking changes.

[artem-kliuev]

@kumilingus hey, any updates on this? Faced same issue on v4.0.0. If textWrap option provided the caret is not working as expected with TextEditor. We using it with rect with growing height, not width, and textWrap is required here to prevent width changes.