Make paper.js PointText editable with a cursor

Question

I'm using an image annotation tool for a website I'm working on, and I need to type text onto the canvas using the paper.js PointText object. That part is pretty easy. I'd also like to be able to type with a visible cursor, and edit, create/change multiple lines, save it, and edit it again.

It's the part with typing with a cursor and editing in the middle of it that I'm wondering if it is even possible. Right now, I can type and delete letters, but only at the end of the text I've already created. I want to edit in the middle without deleting anything.

I'm not posting much code because my question is theoretical, and I haven't been able to find any code to try, except for the jQuery attribute contentEditable.

$(text).attr('contentEditable');

where text is a paper.PointText(position) object at position event.point.

Thanks!

Answer 1

You can try placing a contenteditable div over the canvas when you click on the PointText.

Here's an example: https://jsfiddle.net/maitreyjukar/jo2mvzu7/latest

Currently paper.js does not support word-wrap for PointText. They might provide support for it in AreaText which, hopefully, should be available shortly.