Merge branch 'canary' into fix/issue-11515

fix(edgeless): accept persisted shape proxy when mounting text editor
fix(edgeless): guard null shape element when mounting text editor
2026-03-25 00:30:08 +08:00 · 2026-03-11 15:08:09 +08:00 · 2026-02-27 16:10:30 +08:00 · 2026-02-27 10:55:42 +08:00 · 2026-02-26 15:26:18 +08:00 · 2026-02-26 15:14:23 +08:00
7 changed files with 977 additions and 1179 deletions
--- a/blocksuite/affine/gfx/shape/src/text/edgeless-shape-text-editor.ts
+++ b/blocksuite/affine/gfx/shape/src/text/edgeless-shape-text-editor.ts
@@ -3,11 +3,8 @@ import {
  EdgelessCRUDIdentifier,
  TextUtils,
 } from '@blocksuite/affine-block-surface';
-import {
-  MindmapElementModel,
-  ShapeElementModel,
-  TextResizing,
-} from '@blocksuite/affine-model';
+import type { ShapeElementModel } from '@blocksuite/affine-model';
+import { MindmapElementModel, 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
-      .get(EdgelessCRUDIdentifier)
-      .updateElement(shapeElement.id, { text });
+    crud.updateElement(updatedElement.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);

--- a/blocksuite/affine/shared/src/utils/print-to-pdf.ts
+++ b/blocksuite/affine/shared/src/utils/print-to-pdf.ts
@@ -17,14 +17,7 @@ export async function printToPdf(
  return new Promise<void>((resolve, reject) => {
    const iframe = document.createElement('iframe');
    document.body.append(iframe);
-    // Use a hidden but rendering-enabled state instead of display: none
-    Object.assign(iframe.style, {
-      visibility: 'hidden',
-      position: 'absolute',
-      width: '0',
-      height: '0',
-      border: 'none',
-    });
+    iframe.style.display = 'none';
    iframe.srcdoc = '<!DOCTYPE html>';
    iframe.onload = async () => {
      if (!iframe.contentWindow) {
@@ -35,44 +28,6 @@ export async function printToPdf(
        reject(new Error('Root element not defined, unable to print pdf'));
        return;
      }
-
-      const doc = iframe.contentWindow.document;
-
-      doc.write(`<!DOCTYPE html><html><head><style>@media print {
-                html, body {
-                  height: initial !important;
-                  overflow: initial !important;
-                  print-color-adjust: exact;
-                  -webkit-print-color-adjust: exact;
-                  color: #000 !important;
-                  background: #fff !important;
-                  color-scheme: light !important;
-                }
-                ::-webkit-scrollbar { 
-                  display: none; 
-                }
-                :root, body {
-                  --affine-text-primary: #000 !important;
-                  --affine-text-secondary: #111 !important;
-                  --affine-text-tertiary: #333 !important;
-                  --affine-background-primary: #fff !important;
-                  --affine-background-secondary: #fff !important;
-                  --affine-background-tertiary: #fff !important;
-                }
-                body, [data-theme='dark'] {
-                  color: #000 !important;
-                  background: #fff !important;
-                }
-                body * {
-                  color: #000 !important;
-                  -webkit-text-fill-color: #000 !important;
-                }
-                :root {
-                  --affine-note-shadow-box: none !important;
-                  --affine-note-shadow-sticker: none !important;
-                }
-              }</style></head><body></body></html>`);
-      doc.close();
      iframe.contentWindow.document
        .write(`<!DOCTYPE html><html><head><style>@media print {
              html, body {
@@ -116,7 +71,7 @@ export async function printToPdf(
      for (const element of document.styleSheets) {
        try {
          for (const cssRule of element.cssRules) {
-            const target = doc.styleSheets[0];
+            const target = iframe.contentWindow.document.styleSheets[0];
            target.insertRule(cssRule.cssText, target.cssRules.length);
          }
        } catch (e) {
@@ -131,33 +86,12 @@ export async function printToPdf(
        }
      }

-      // Recursive function to find all canvases, including those in shadow roots
-      const findAllCanvases = (root: Node): HTMLCanvasElement[] => {
-        const canvases: HTMLCanvasElement[] = [];
-        const traverse = (node: Node) => {
-          if (node instanceof HTMLCanvasElement) {
-            canvases.push(node);
-          }
-          if (node instanceof HTMLElement || node instanceof ShadowRoot) {
-            node.childNodes.forEach(traverse);
-          }
-          if (node instanceof HTMLElement && node.shadowRoot) {
-            traverse(node.shadowRoot);
-          }
-        };
-        traverse(root);
-        return canvases;
-      };
-
      // convert all canvas to image
      const canvasImgObjectUrlMap = new Map<string, string>();
-      const allCanvas = findAllCanvases(rootElement);
+      const allCanvas = rootElement.getElementsByTagName('canvas');
      let canvasKey = 1;
-      const canvasToKeyMap = new Map<HTMLCanvasElement, string>();
-
      for (const canvas of allCanvas) {
-        const key = canvasKey.toString();
-        canvasToKeyMap.set(canvas, key);
+        canvas.dataset['printToPdfCanvasKey'] = canvasKey.toString();
        canvasKey++;
        const canvasImgObjectUrl = await new Promise<Blob | null>(resolve => {
          try {
@@ -172,42 +106,20 @@ export async function printToPdf(
          );
          continue;
        }
-        canvasImgObjectUrlMap.set(key, URL.createObjectURL(canvasImgObjectUrl));
+        canvasImgObjectUrlMap.set(
+          canvas.dataset['printToPdfCanvasKey'],
+          URL.createObjectURL(canvasImgObjectUrl)
+        );
      }

-      // Recursive deep clone that flattens Shadow DOM into Light DOM
-      const deepCloneWithShadows = (node: Node): Node => {
-        const clone = doc.importNode(node, false);
-
-        if (
-          clone instanceof HTMLCanvasElement &&
-          node instanceof HTMLCanvasElement
-        ) {
-          const key = canvasToKeyMap.get(node);
-          if (key) {
-            clone.dataset['printToPdfCanvasKey'] = key;
-          }
-        }
-
-        const appendChildren = (source: Node) => {
-          source.childNodes.forEach(child => {
-            (clone as Element).append(deepCloneWithShadows(child));
-          });
-        };
-
-        if (node instanceof HTMLElement && node.shadowRoot) {
-          appendChildren(node.shadowRoot);
-        }
-        appendChildren(node);
-
-        return clone;
-      };
-
-      const importedRoot = deepCloneWithShadows(rootElement) as HTMLDivElement;
+      const importedRoot = iframe.contentWindow.document.importNode(
+        rootElement,
+        true
+      ) as HTMLDivElement;

      // force light theme in print iframe
-      doc.documentElement.dataset.theme = 'light';
-      doc.body.dataset.theme = 'light';
+      iframe.contentWindow.document.documentElement.dataset.theme = 'light';
+      iframe.contentWindow.document.body.dataset.theme = 'light';
      importedRoot.dataset.theme = 'light';

      // draw saved canvas image to canvas
@@ -226,67 +138,17 @@ export async function printToPdf(
        }
      }

-      // Remove lazy loading from all images and force reload
-      const allImages = importedRoot.querySelectorAll('img');
-      allImages.forEach(img => {
-        img.removeAttribute('loading');
-        const src = img.getAttribute('src');
-        if (src) img.setAttribute('src', src);
-      });
-
-      // append to iframe
-      doc.body.append(importedRoot);
+      // append to iframe and print
+      iframe.contentWindow.document.body.append(importedRoot);

      await options.beforeprint?.(iframe);

-      // Robust image waiting logic
-      const waitForImages = async (container: HTMLElement) => {
-        const images: HTMLImageElement[] = [];
-        const view = container.ownerDocument.defaultView;
-        if (!view) return;
-
-        const findImages = (root: Node) => {
-          if (root instanceof view.HTMLImageElement) {
-            images.push(root);
-          }
-          if (
-            root instanceof view.HTMLElement ||
-            root instanceof view.ShadowRoot
-          ) {
-            root.childNodes.forEach(findImages);
-          }
-          if (root instanceof view.HTMLElement && root.shadowRoot) {
-            findImages(root.shadowRoot);
-          }
-        };
-
-        findImages(container);
-
-        await Promise.all(
-          images.map(img => {
-            if (img.complete) {
-              if (img.naturalWidth === 0) {
-                console.warn('Image failed to load:', img.src);
-              }
-              return Promise.resolve();
-            }
-            return new Promise(resolve => {
-              img.onload = resolve;
-              img.onerror = resolve;
-            });
-          })
-        );
-      };
-
-      await waitForImages(importedRoot);
-
-      // browser may take some time to load font or other resources
-      await (doc.fonts?.ready ??
-        new Promise<void>(resolve => {
-          setTimeout(() => {
-            resolve();
-          }, 1000);
-        }));
+      // browser may take some time to load font
+      await new Promise<void>(resolve => {
+        setTimeout(() => {
+          resolve();
+        }, 1000);
+      });

      iframe.contentWindow.onafterprint = async () => {
        iframe.remove();
--- a/blocksuite/integration-test/src/tests/edgeless/mindmap.spec.ts
+++ b/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',
--- a/packages/frontend/core/src/modules/i18n/entities/i18n.ts
+++ b/packages/frontend/core/src/modules/i18n/entities/i18n.ts
@@ -54,22 +54,13 @@ export class I18n extends Entity {
  constructor(private readonly cache: GlobalCache) {
    super();
    this.i18n.on('languageChanged', (language: Language) => {
-      this.applyDocumentLanguage(language);
+      document.documentElement.lang = language;
      this.cache.set('i18n_lng', language);
    });
  }

  init() {
-    const language = this.currentLanguageKey$.value ?? 'en';
-    this.applyDocumentLanguage(language);
-    this.changeLanguage(language);
-  }
-
-  private applyDocumentLanguage(language: Language) {
-    document.documentElement.lang = language;
-    document.documentElement.dir = SUPPORTED_LANGUAGES[language]?.rtl
-      ? 'rtl'
-      : 'ltr';
+    this.changeLanguage(this.currentLanguageKey$.value ?? 'en');
  }

  changeLanguage = effect(
--- a/packages/frontend/i18n/src/resources/ar.json
+++ b/packages/frontend/i18n/src/resources/ar.json
--- a/packages/frontend/i18n/src/resources/index.ts
+++ b/packages/frontend/i18n/src/resources/index.ts
@@ -32,7 +32,6 @@ export const SUPPORTED_LANGUAGES: Record<
    name: string;
    originalName: string;
    flagEmoji: string;
-    rtl?: boolean;
    resource:
      | LanguageResource
      | (() => Promise<{ default: Partial<LanguageResource> }>);
@@ -150,21 +149,18 @@ export const SUPPORTED_LANGUAGES: Record<
    name: 'Urdu',
    originalName: 'اردو',
    flagEmoji: '🇵🇰',
-    rtl: true,
    resource: () => import('./ur.json'),
  },
  ar: {
    name: 'Arabic',
    originalName: 'العربية',
    flagEmoji: '🇸🇦',
-    rtl: true,
    resource: () => import('./ar.json'),
  },
  fa: {
    name: 'Persian',
    originalName: 'فارسی',
    flagEmoji: '🇮🇷',
-    rtl: true,
    resource: () => import('./fa.json'),
  },
  uk: {
--- a/tools/cli/src/rspack-shared/template.html
+++ b/tools/cli/src/rspack-shared/template.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" dir="ltr">
+<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
Author	SHA1	Message	Date
DarkSky	b586fc0dea	Merge branch 'canary' into fix/issue-11515	2026-03-11 15:08:09 +08:00
catsjuice	4b57d9581a	fix(edgeless): accept persisted shape proxy when mounting text editor	2026-02-27 16:10:30 +08:00
catsjuice	b177024818	fix(edgeless): guard null shape element when mounting text editor	2026-02-27 10:55:42 +08:00
catsjuice	8ae9994443	test: cover mindmap IME composition resize hook	2026-02-26 15:26:18 +08:00
catsjuice	505505a1e7	fix: update mindmap node size during IME composition Fixes toeverything/AFFiNE#11515	2026-02-26 15:14:23 +08:00