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/connector/src/element-renderer/connector-dom.ts

@@ -1,11 +0,0 @@
-import { DomElementRendererExtension } from '@blocksuite/affine-block-surface';
-
-import { connectorDomRenderer } from './connector-dom/index.js';
-
-/**
- * Extension to register the DOM-based renderer for 'connector' elements.
- */
-export const ConnectorDomRendererExtension = DomElementRendererExtension(
-  'connector',
-  connectorDomRenderer
-);

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

@@ -1,9 +1,8 @@
 export * from './adapter';
 export * from './connector-manager';
 export * from './connector-tool';
-export * from './element-renderer';
-export { ConnectorDomRendererExtension } from './element-renderer/connector-dom';
 export * from './element-transform';
+export * from './renderer';
 export * from './text';
 export * from './toolbar/config';
 export * from './toolbar/quick-tool';

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

@@ -1,14 +1,18 @@
-import type { DomRenderer } from '@blocksuite/affine-block-surface';
+import {
+  DomElementRendererExtension,
+  type DomRenderer,
+} from '@blocksuite/affine-block-surface';
 import {
   type ConnectorElementModel,
   ConnectorMode,
   DefaultTheme,
+  type LocalConnectorElementModel,
   type PointStyle,
 } from '@blocksuite/affine-model';
 import { PointLocation, SVGPathBuilder } from '@blocksuite/global/gfx';
 
-import { isConnectorWithLabel } from '../../connector-manager.js';
-import { DEFAULT_ARROW_SIZE } from '../utils.js';
+import { isConnectorWithLabel } from '../connector-manager';
+import { DEFAULT_ARROW_SIZE } from './utils';
 
 interface PathBounds {
   minX: number;
@@ -221,8 +225,8 @@ function renderConnectorLabel(
  * @param element - The HTMLElement to apply the connector's styles to.
  * @param renderer - The main DOMRenderer instance, providing access to viewport and color utilities.
  */
-export const connectorDomRenderer = (
-  model: ConnectorElementModel,
+export const connectorBaseDomRenderer = (
+  model: ConnectorElementModel | LocalConnectorElementModel,
   element: HTMLElement,
   renderer: DomRenderer
 ): void => {
@@ -358,7 +362,21 @@ export const connectorDomRenderer = (
   element.style.height = `${model.h * zoom}px`;
   element.style.overflow = 'visible';
   element.style.pointerEvents = 'none';
-
-  // Render label if present
-  renderConnectorLabel(model, element, renderer, zoom);
 };
+
+export const connectorDomRenderer = (
+  model: ConnectorElementModel,
+  element: HTMLElement,
+  renderer: DomRenderer
+): void => {
+  connectorBaseDomRenderer(model, element, renderer);
+  renderConnectorLabel(model, element, renderer, renderer.viewport.zoom);
+};
+
+/**
+ * Extension to register the DOM-based renderer for 'connector' elements.
+ */
+export const ConnectorDomRendererExtension = DomElementRendererExtension(
+  'connector',
+  connectorDomRenderer
+);

blocksuite/affine/gfx/connector/src/renderer/element-renderer.ts

@@ -25,7 +25,7 @@ import {
 } from '@blocksuite/global/gfx';
 import { deltaInsertsToChunks } from '@blocksuite/std/inline';
 
-import { isConnectorWithLabel } from '../connector-manager.js';
+import { isConnectorWithLabel } from '../connector-manager';
 import {
   DEFAULT_ARROW_SIZE,
   getArrowOptions,
@@ -33,7 +33,7 @@ import {
   renderCircle,
   renderDiamond,
   renderTriangle,
-} from './utils.js';
+} from './utils';
 
 export const connector: ElementRenderer<
   ConnectorElementModel | LocalConnectorElementModel

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

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

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

@@ -6,9 +6,11 @@ import {
 import { ConnectionOverlay } from './connector-manager';
 import { ConnectorTool } from './connector-tool';
 import { effects } from './effects';
-import { ConnectorElementRendererExtension } from './element-renderer';
-import { ConnectorDomRendererExtension } from './element-renderer/connector-dom';
 import { ConnectorFilter } from './element-transform';
+import {
+  ConnectorDomRendererExtension,
+  ConnectorElementRendererExtension,
+} from './renderer';
 import { connectorToolbarExtension } from './toolbar/config';
 import { connectorQuickTool } from './toolbar/quick-tool';
 import { ConnectorElementView, ConnectorInteraction } from './view/view';