Editable Text in Konva

[ChenMatsu]

Currently, when drag text into canvas, the stage renders Text which is a component from React-Konva. The rest of the elements in sidebar are all images, and created by Image which also comes from React-Konva. What could be a better method to implement an editable text in canvas with Transformer is enabled at the same time?

I am trying to work with React-Quill, but yet have a solution now.

[ChenMatsu]

By using React-Quill via ref, we can bind div or textarea to connect, however, it results in multiple Konva Texts with the same text.

  const textareaEditor = quillRef.current.getEditor();
  quillRef.current.hookEditor(textareaEditor);

[ChenMatsu]

Adding

inside ReactQuill will prevent Konva Texts updated the same outputs which probably has something to do with ref in depth.

  <ReactQuill
      ref={quillRef}
      modules={{
          toolbar: toolbar,
      }}>
      <div style={{ display: "none" }} />
  </ReactQuill>