edgeless-shape-text-editor didn't get called blur() or unmounted correctly when editing text for Shape element in Edgeless Editor

[KhangGEH]

Demo:

BlockSuite.Example.-.Personal.-.Microsoft.Edge.2025-01-07.14-56-04.mp4

If there is only Shape elements on the Editor, the edgeless-shape-text-editor get unmounted correctly (as show when I edit the first Shape). But as soon as there is an EdgelessTextBlock or a NoteBlock get added to the Editor, it doesn't work anymore (2nd shape). The remained edgeless-shape-text-editor also block the functionality of selection on the Editor, make it unusable.

I am using a basic setup with no other Frontend Framework:

import { effects as blocksEffects } from "@blocksuite/blocks/effects";
import { effects as presetsEffects } from "@blocksuite/presets/effects";

blocksEffects();
presetsEffects();

function initEditor() {
  const schema = new Schema();
  schema.register(AffineSchemas);

  const collection = new DocCollection(options);
  collection.start();
  collection.meta.initialize();
  const doc = collection.createDoc();
  doc.load(() => {});
  doc.resetHistory();

  const pageBlockId = doc.addBlock("affine:page", {
    title: new Text("Test"),
  });
  const surfactId = doc.addBlock("affine:surface", {}, pageBlockId);

  const editor = new AffineEditorContainer();
  editor.doc = doc;

  editor.mode = "edgeless";

  return { editor, collection };
}

const { editor } = initEditor();
const app = document.getElementById("app");

app.appendChild(editor);

Blocksuite version: 0.19.5