A component that uses the editable text component

EditableTextUsage.jsx

import React, { useState } from "react";
import { Group, Rect } from "react-konva";
import { EditableText } from "./EditableText";

export function EditableTextUsage({ selected, setSelected }) {
  const [isEditing, setIsEditing] = useState(false);
  const [isTransforming, setIsTransforming] = useState(false);
  const [text, setText] = useState("Click to resize. Double click to edit.");
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);

  useEffect(() => {
    if (!selected && isEditing) {
      setIsEditing(false);
    } else if (!selected && isTransforming) {
      setIsTransforming(false);
    }
  }, [selected, isEditing, isTransforming]);

  function toggleEdit() {
    setIsEditing(!isEditing);
    setSelected(!isEditing);
  }

  function toggleTransforming() {
    setIsTransforming(!isTransforming);
    setSelected(!isTransforming);
  }
  
  function onTextResize(newWidth, newHeight) {
    setWidth(newWidth);
    setHeight(newHeight);
  }
  
  function onTextChange(value) {
    setText(value)
  }

return (
  <EditableText
    x={0}
    y={0}
    text={text}
    width={width}
    height={height}
    onResize={onTextResize}
    isEditing={isEditing}
    isTransforming={isTransforming}
    onToggleEdit={toggleEdit}
    onToggleTransform={toggleTransforming}
    onChange={onTextChange}
  />
);
}

Hi Colin @colinfwren !

I forked in codesandbox.io your excellent work to develop it further.
The hurdle I encountered is how to edit only a specific note without affecting the text of the other notes, when we have more than one notes

Here you can find the code:

https://codesandbox.io/s/react-konva-editable-resizable-text-forked-kz1uuo?file=/src/StickyNote.jsx

Looking forward to your kind help