无法突出显示组内 FabricJS 文本框中的文本

Question

我正在尝试使用 FabricJS 创建便签。便利贴由矩形背景和放置在组内的文本框组成。我希望能够使用鼠标突出显示文本框中的文本（当文本框处于编辑模式时）但由于某种原因我不能。

现场演示： https://jsfiddle.net/mp_10/8e5pxsq0/

// FabicJS Version 5.3.1
const canvasContainer = document.getElementById("canvas-container");
const canvasWidth = canvasContainer.clientWidth;
const canvasHeight = canvasContainer.clientHeight;

const canvas = new fabric.Canvas("canvas", {
  width: canvasWidth,
  height: canvasHeight,
  backgroundColor: "#2D2D2D",
});

fabric.Object.prototype.cornerSize = 8;
fabric.Object.prototype.cornerStyle = "rec";
fabric.Object.prototype.cornerColor = "#2D2D2D";
fabric.Object.prototype.cornerStrokeColor = "rgba(141, 181, 244, 1)";
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.borderColor = "rgba(141, 181, 244, 1)";
fabric.Object.prototype.objectCaching = false;

canvas.selectionLineWidth = 1;
canvas.selectionBorderColor = "white";
canvas.selectionColor = "rgba(255, 255, 255, 0.1)";

// Get the initial canvas styles
var json = JSON.stringify(canvas.toDatalessJSON());

// Load the initial canvas styles into the FabricJS canvas object
canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

// Define canvas size
function updateCanvasSize() {
  const canvasWidth = canvasContainer.clientWidth;
  const canvasHeight = canvasContainer.clientHeight;

  // Update canvas size
  canvas.setDimensions({
    width: canvasWidth,
    height: canvasHeight,
  });
}

// Update the canvas size when the window is resized
window.addEventListener("resize", updateCanvasSize);

// Set the initial canvas size
updateCanvasSize();

// Sticky notes
let textBox = {
  isEditing: false,
};

// Event listener for sticky note button
const stickyNoteBtn = document.getElementById("stickyNote");
stickyNoteBtn.addEventListener("click", createStickyNote);

// Sticky note function
function createStickyNote() {

  // Create sticky note object
  canvas.on("mouse:down", function (opt) {
    const pointer = canvas.getPointer(opt.e);
    const color = 'white'

    // sticky note object properties
    textBox = new fabric.Textbox("", {
      left: pointer.x + 24,
      top: pointer.y + 24,
      width: 302,
      fontSize: 18,
      fontFamily: "Arial",
      fill: "black",
      textAlign: "left",
      hasControls: false,
      hasBorders: false,
      splitByGrapheme: true,
      hoverCursor: 'text',
      selectable: true
    });

    const rect = new fabric.Rect({
      left: pointer.x,
      top: pointer.y,
      width: 350,
      height: 350,
      fill: color,
      rx: 0,
      ry: 0,
    });

    const group = new fabric.Group([rect, textBox], {
      hasControls: true,
      hasBorders: true,
    });

    group.on("mousedown", function (opt) {
      const clickedObject = opt.target;
    
      if (!group.selected && !textBox.isEditing) {
        group.selected = true;
        canvas.setActiveObject(group);
      } else if (group.selected && !textBox.isEditing) {
        canvas.setActiveObject(textBox);
        textBox.enterEditing();
        group.selected = false;
      } else {
        group.selected = false;
      }
    });
    
    // Reset the custom property when the group is deselected
    canvas.on("before:selection:cleared", function (opt) {
      if (opt.target && opt.target.type === "group") {
        opt.target.selected = false;
      }
    });
    
    textBox.on("editing:exited", function () {
      console.log("Editing exited");
      rect.set({
        stroke: null,
        strokeWidth: 0,
      });
      canvas.renderAll();
      textBox.isEditing = false;
    });

    textBox.on("editing:entered", function () {
      console.log("Editing entered");
      rect.set({
        stroke: "rgba(141, 181, 244, 1)",
        strokeWidth: 2,
      });
      canvas.renderAll();
      textBox.isEditing = true;
    });

    group.on("moving", function () {
      if (textBox.isEditing) {
        textBox.exitEditing();
      }
      canvas.setActiveObject(group);
    });
    
    canvas.on("mouse:wheel", function () {
      if (textBox.isEditing) {
        textBox.initDelayedCursor(true);
      }
    });

    group.on("moved", function () {
      setTimeout(() => {
        canvas.setActiveObject(group);
      }, 0);
    });

    // Add the sticky note to the canvas
    canvas.add(group);
    canvas.setActiveObject(textBox);
    textBox.enterEditing();
    canvas.renderAll();

    // Reset event handlers to the previous state
    resetEventHandlers();

    function resetEventHandlers() {
      // Remove the current event handler for 'mouse:down'
      canvas.off("mouse:down");
    }
  });
}

我尝试添加所有类型的事件监听器，但都没有用。似乎有某种冲突。