In react-konva (the HTML canvas lib), How can I emulate a classical editable <input > and get or read the string value entered there?

Question

Considering this (buggy until other questions are answered) demo from here: https://codesandbox.io/s/kanbanboard-lackofcarddnd-doce75?file=/src/index.js where the red < Text /> emulates a button that inserts a < CustomCardContainer /> based on the 2nd that I wish it could be editable and readable as an < input >, I would ask:

How can I emulate an input and read its value where a string in {rows}x{cols} format is expected? Edit: I'm not closed on just a DOM < input >, I'm open to any HTML canvas way in react for a text to be entered and get its value. I just want get the string value.

Until now I hard-coded the value in line 86 with let inputValue = "10x2"; but would like to insert < CustomCardContainer /> of different sizes in order to achieve this result from here: sectioned custom kanban board

Answer 1

https://konvajs.org/docs/sandbox/Editable_Text.html

"Konva has not support for such case. We recommend to edit the user input outside of your canvas with native DOM elements such as input or textarea."

you can use contenteditable attribute for the textarea.

 const pseudoInput = document.getElementById('input'); pseudoInput.addEventListener('keyup', (e) => { console.log(e.target.innerHTML.split('x')); })

 <div contenteditable id="input">10x20</div>