Merge branch 'canary' into fix/issue-11515

Fixes toeverything/AFFiNE#11515

blocksuite/affine/gfx/shape/src/text/edgeless-shape-text-editor.ts

@@ -3,11 +3,8 @@ import {
   EdgelessCRUDIdentifier,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
-import {
+import type { ShapeElementModel } from '@blocksuite/affine-model';
-  MindmapElementModel,
+import { MindmapElementModel, TextResizing } from '@blocksuite/affine-model';
-  ShapeElementModel,
-  TextResizing,
-} from '@blocksuite/affine-model';
 import type { RichText } from '@blocksuite/affine-rich-text';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { getSelectedRect } from '@blocksuite/affine-shared/utils';
@@ -29,7 +26,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 import * as Y from 'yjs';
 
 export function mountShapeTextEditor(
-  shapeElement: ShapeElementModel,
+  shapeElement: { id: string; text?: Y.Text } | null | undefined,
   edgeless: BlockComponent
 ) {
   const mountElm = edgeless.querySelector('.edgeless-mount-point');
@@ -43,24 +40,27 @@ export function mountShapeTextEditor(
   const gfx = edgeless.std.get(GfxControllerIdentifier);
   const crud = edgeless.std.get(EdgelessCRUDIdentifier);
 
+  if (!shapeElement?.id) {
+    console.error('Cannot mount text editor on an invalid shape element');
+    return;
+  }
+
   const updatedElement = crud.getElementById(shapeElement.id);
 
-  if (!(updatedElement instanceof ShapeElementModel)) {
+  if (!updatedElement || !('id' in updatedElement)) {
     console.error('Cannot mount text editor on a non-shape element');
     return;
   }
 
   gfx.tool.setTool(DefaultTool);
   gfx.selection.set({
-    elements: [shapeElement.id],
+    elements: [updatedElement.id],
     editing: true,
   });
 
-  if (!shapeElement.text) {
+  if (!updatedElement.text) {
     const text = new Y.Text();
-    edgeless.std
+    crud.updateElement(updatedElement.id, { text });
-      .get(EdgelessCRUDIdentifier)
-      .updateElement(shapeElement.id, { text });
   }
 
   const shapeEditor = new EdgelessShapeTextEditor();
@@ -280,6 +280,21 @@ export class EdgelessShapeTextEditor extends WithDisposable(ShadowlessElement) {
             this._unmount();
           }
         );
+
+        this.disposables.addFromEvent(
+          this.inlineEditorContainer,
+          'compositionupdate',
+          () => {
+            this._updateElementWH();
+          }
+        );
+        this.disposables.addFromEvent(
+          this.inlineEditorContainer,
+          'compositionend',
+          () => {
+            this._updateElementWH();
+          }
+        );
       })
       .catch(console.error);
 

blocksuite/integration-test/src/__tests__/edgeless/mindmap.spec.ts

@@ -1,8 +1,9 @@
 import type { MindMapView } from '@blocksuite/affine/gfx/mindmap';
+import { mountShapeTextEditor } from '@blocksuite/affine/gfx/shape';
 import { LayoutType, type MindmapElementModel } from '@blocksuite/affine-model';
 import { Bound } from '@blocksuite/global/gfx';
 import type { GfxController } from '@blocksuite/std/gfx';
-import { beforeEach, describe, expect, test } from 'vitest';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { click, pointermove, wait } from '../utils/common.js';
 import { getDocRootBlock } from '../utils/edgeless.js';
@@ -36,6 +37,39 @@ describe('mindmap', () => {
     return cleanup;
   });
 
+  test('should update mindmap node editor size on compositionupdate', async () => {
+    const mindmapId = gfx.surface!.addElement({
+      type: 'mindmap',
+      children: {
+        text: 'root',
+      },
+    });
+    const mindmap = () => gfx.getElementById(mindmapId) as MindmapElementModel;
+
+    const root = getDocRootBlock(window.doc, window.editor, 'edgeless');
+    const rootNode = mindmap().tree.element;
+
+    mountShapeTextEditor(rootNode, root);
+    await wait();
+
+    const shapeEditor = root.querySelector('edgeless-shape-text-editor') as
+      | (HTMLElement & { inlineEditorContainer?: HTMLElement })
+      | null;
+
+    expect(shapeEditor).not.toBeNull();
+
+    const updateSpy = vi.spyOn(shapeEditor as any, '_updateElementWH');
+
+    const compositionUpdate = new CompositionEvent('compositionupdate', {
+      data: '拼',
+      bubbles: true,
+    });
+
+    shapeEditor!.inlineEditorContainer?.dispatchEvent(compositionUpdate);
+
+    expect(updateSpy).toHaveBeenCalled();
+  });
+
   test('delete the root node should remove all children', async () => {
     const tree = {
       text: 'root',