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

[abadfr]

I'm experiencing the same issue on Chrome and Firefox. Apart from issues related to the Shape element, I can also add unwanted text on the note editor, though the selection issue only happens on the Shape element. I'm just using code from the examples.

import { createEmptyDoc, EdgelessEditor, AffineEditorContainer } from '@blocksuite/presets';
import { effects as blocksEffects } from '@blocksuite/blocks/effects';
import { effects as presetsEffects } from '@blocksuite/presets/effects';
import '@toeverything/theme/style.css';


const blocksuite = function(dom) {

    const doc = createEmptyDoc().init();
    const editor = new AffineEditorContainer();
    editor.mode = 'edgeless'
    editor.doc = doc;
    dom.append(editor);
}

const main = () => {
    
    blocksEffects();
    presetsEffects();

   wrapper = document.querySelector('.container')
   blocksuite(wrapper)

}

[abadfr]

The Shape editor is set to unmount when the inlineEditorContainer is blurred, but it turns out the inlineEditorContainer doesn't get focus in the first place, so the unmount callback doesn't get triggered. The document.activeElement is still the affine-edgeless-root component even when typing in the Shape editor.

This doesn't happen in the BlockSuite playground though. There, the focus goes to inlineEditorContainer so the unmount callback fires.

Maybe it's also worth noting that v0.16 works fine. Only in v0.17 did this issue start.

[KhangGEH]

Found the solution:

/**
 * Add this extension to the Specs.
 */
const override_doc_mode_extension = (
  editor: AffineEditorContainer
): ExtensionType => {
  const DOC_MODE = 'edgeless'; // fixed to edgeless mode
  const doc_slots = new Map<string, Slot<DocMode>>();
  const service: DocModeProvider = {
    setPrimaryMode: (_mode: DocMode, doc_id: string): void => {
      doc_slots.get(doc_id)?.emit(DOC_MODE);
    },
    getPrimaryMode: (_doc_id: string): DocMode => {
      return DOC_MODE;
    },
    togglePrimaryMode: (_doc_id: string): DocMode => {
      return DOC_MODE;
    },
    onPrimaryModeChange: (
      handler: (mode: DocMode) => void,
      doc_id: string
    ): Disposable => {
      if (!doc_slots.has(doc_id)) {
        doc_slots.set(doc_id, new Slot<DocMode>());
      }
      return doc_slots.get(doc_id)!.on(handler);
    },
    setEditorMode: (_mode: DocMode): void => {
      editor.switchEditor(DOC_MODE);
    },
    getEditorMode: (): DocMode | null => editor.mode,
  };
  return DocModeExtension(service);
};

Some blocks need to query doc mode through this extension to decide correct behavior (including the edgeless-shape-text-editor blur() event). This should be the default extension in BlockSuite and there is another way to override this if needed. Buy here we are, have to implement this essential Extension ourselves...