feat(editor): impl shape text with dom renderer (#13471)

#### PR Dependency Tree


* **PR #13464**
  * **PR #13465**
    * **PR #13471** 👈
      * **PR #13472**
        * **PR #13473**

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* DOM rendering added for groups, mind maps and connectors so group
titles/outlines and mindmap connectors are visible on canvas.
* Shapes now support right-to-left text with proper vertical alignment.
* **Improvements**
  * Connector labels scale with viewport zoom for crisper display.
* Group-related selections (including nested groups) now update visuals
consistently.
* **Performance**
* Reduced DOM churn and fewer redraws during rendering and selection
changes.
* **Refactor**
* Renderer import/export surfaces consolidated with no user-facing
behavior changes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/gfx/mindmap/src/index.ts

@@ -1,7 +1,7 @@
 export * from './adapter';
-export * from './element-renderer';
 export * from './indicator-overlay';
 export * from './interactivity';
+export * from './renderer';
 export * from './toolbar/config';
 export * from './toolbar/senior-tool';
 export * from './utils';

blocksuite/affine/gfx/mindmap/src/renderer/dom-renderer.ts

@@ -0,0 +1,65 @@
+import { DomElementRendererExtension } from '@blocksuite/affine-block-surface';
+import {
+  connectorBaseDomRenderer,
+  ConnectorPathGenerator,
+} from '@blocksuite/affine-gfx-connector';
+import type {
+  MindmapElementModel,
+  MindmapNode,
+} from '@blocksuite/affine-model';
+import type { GfxModel } from '@blocksuite/std/gfx';
+
+export const MindmapDomRendererExtension = DomElementRendererExtension(
+  'mindmap',
+  (model: MindmapElementModel, domElement, renderer) => {
+    const bound = model.elementBound;
+
+    const { zoom } = renderer.viewport;
+    // Set element size and position
+    domElement.style.width = `${bound.w * zoom}px`;
+    domElement.style.height = `${bound.h * zoom}px`;
+    domElement.style.overflow = 'visible';
+    domElement.style.pointerEvents = 'none';
+
+    const newChildren: HTMLDivElement[] = [];
+
+    const traverse = (node: MindmapNode) => {
+      const connectors = model.getConnectors(node);
+      if (!connectors) return;
+
+      connectors.reverse().forEach(result => {
+        const { connector, outdated } = result;
+        const elementGetter = (id: string) =>
+          model.surface.getElementById(id) ??
+          (model.surface.store.getModelById(id) as GfxModel);
+
+        if (outdated) {
+          ConnectorPathGenerator.updatePath(connector, null, elementGetter);
+        }
+
+        const connectorContainer = document.createElement('div');
+        connectorContainer.style.position = 'absolute';
+        connectorContainer.style.transformOrigin = 'top left';
+        const geometricStyles = {
+          left: `${(connector.x - bound.x) * zoom}px`,
+          top: `${(connector.y - bound.y) * zoom}px`,
+        };
+        const opacityStyle = { opacity: node.element.opacity };
+        Object.assign(connectorContainer.style, geometricStyles, opacityStyle);
+
+        connectorBaseDomRenderer(connector, connectorContainer, renderer);
+        newChildren.push(connectorContainer);
+      });
+
+      if (node.detail.collapsed) {
+        return;
+      } else {
+        node.children.forEach(traverse);
+      }
+    };
+
+    model.tree && traverse(model.tree);
+
+    domElement.replaceChildren(...newChildren);
+  }
+);

blocksuite/affine/gfx/mindmap/src/renderer/index.ts

@@ -0,0 +1,2 @@
+export * from './dom-renderer';
+export * from './element-renderer';

blocksuite/affine/gfx/mindmap/src/view.ts

@@ -4,9 +4,12 @@ import {
 } from '@blocksuite/affine-ext-loader';
 
 import { effects } from './effects';
-import { MindmapElementRendererExtension } from './element-renderer';
 import { MindMapIndicatorOverlay } from './indicator-overlay';
 import { MindMapDragExtension } from './interactivity';
+import {
+  MindmapDomRendererExtension,
+  MindmapElementRendererExtension,
+} from './renderer';
 import {
   mindmapToolbarExtension,
   shapeMindmapToolbarExtension,
@@ -25,6 +28,7 @@ export class MindmapViewExtension extends ViewExtensionProvider {
   override setup(context: ViewExtensionContext) {
     super.setup(context);
     context.register(MindmapElementRendererExtension);
+    context.register(MindmapDomRendererExtension);
     context.register(mindMapSeniorTool);
     context.register(mindmapToolbarExtension);
     context.register(shapeMindmapToolbarExtension);