What would it entail to do rich text rendering w/o html2canvas?

[dustinknopoff]

The docs showcase rich text editing by taking an image of a Quill editor every time the text changes. Unfortunately, for my use case this won't be possible (the editor will only be shown once a user double clicks on a text object on the canvas) but the docs mention having several Konva.Text instances as an alternative. Does anyone know, at a high level, what would this entail?

Especially with line wrapping and having a Transformer treat it all as a single element my initial attempt didn't go very well. :(

[lavrton]

Using several text elements can be very hard. Can you just store your quill editor somewhere offscreen? Like in the invisible area of the page?

[dustinknopoff]

I hadn't considered that. I'll give it a shot!

[dustinknopoff]

I'm in the middle of attempting this and it's not really the functionality I'm looking for. The text afterward is treated like an image so things like resizing just make the text super stretched instead of adjusting the number of lines it takes up. Similarly, with a button to change the alignment of the text would require re-rasterizing the offscreen editor which means communicating across Konva to sibling components frequently. This feels like it's not the right way.

It's seeming increasingly likely that I'll have to work with multiple text elements. Do you have any tips or suggestions for attempting multiple text elements (and/or some sort way of extending the Text component if that's possible?)

[lavrton]

Nah, I never tried that by myself.

[MartinDawson]

Late answer but you probably don't want to use Konva/canvas for actual user text editing. That sounds way too hard in canvas to do.

For example we use Konva.js for a spreadsheet to render cells quickly but use a DOM contentEditable div positioned absolutely over the cell for text editing.

This is how Google Sheets does it too.