fix(editor): incorrect z-index in dom renderer (#13465)

#### 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

* **Bug Fixes**
* Improved stacking order across canvas elements (shapes, connectors,
brush, highlighter), reducing unexpected overlap.
* Corrected z-index application for placeholders and fully rendered
elements to ensure consistent layering during edits.
* **Refactor**
* Centralized z-index handling for canvas elements to provide
predictable, uniform layering behavior across the app.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/surface/src/renderer/dom-renderer.ts

@@ -298,7 +298,10 @@ export class DomRenderer {
       viewportBounds,
       zoom
     );
-    Object.assign(domElement.style, geometricStyles);
+    const zIndexStyle = {
+      'z-index': this.layerManager.getZIndex(elementModel),
+    };
+    Object.assign(domElement.style, geometricStyles, zIndexStyle);
     Object.assign(domElement.style, PLACEHOLDER_RESET_STYLES);
 
     // Clear classes specific to shapes, if applicable
@@ -335,7 +338,10 @@ export class DomRenderer {
       zoom
     );
     const opacityStyle = getOpacity(elementModel);
-    Object.assign(domElement.style, geometricStyles, opacityStyle);
+    const zIndexStyle = {
+      'z-index': this.layerManager.getZIndex(elementModel),
+    };
+    Object.assign(domElement.style, geometricStyles, opacityStyle, zIndexStyle);
 
     this._renderElement(elementModel, domElement);
   }

blocksuite/affine/gfx/brush/src/renderer/dom/brush.ts

@@ -65,8 +65,5 @@ export const BrushDomRendererExtension = DomElementRendererExtension(
     domElement.style.height = `${h * zoom}px`;
     domElement.style.overflow = 'visible';
     domElement.style.pointerEvents = 'none';
-
-    // Set z-index for layering
-    domElement.style.zIndex = renderer.layerManager.getZIndex(model).toString();
   }
 );

blocksuite/affine/gfx/brush/src/renderer/dom/highlighter.ts

@@ -69,8 +69,5 @@ export const HighlighterDomRendererExtension = DomElementRendererExtension(
     domElement.style.height = `${h * zoom}px`;
     domElement.style.overflow = 'visible';
     domElement.style.pointerEvents = 'none';
-
-    // Set z-index for layering
-    domElement.style.zIndex = renderer.layerManager.getZIndex(model).toString();
   }
 );

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

@@ -359,9 +359,6 @@ export const connectorDomRenderer = (
   element.style.overflow = 'visible';
   element.style.pointerEvents = 'none';
 
-  // Set z-index for layering
-  element.style.zIndex = renderer.layerManager.getZIndex(model).toString();
-
   // Render label if present
   renderConnectorLabel(model, element, renderer, zoom);
 };

blocksuite/affine/gfx/shape/src/element-renderer/shape-dom/index.ts

@@ -181,8 +181,6 @@ export const shapeDomRenderer = (
 
   applyTransformStyles(model, element);
 
-  element.style.zIndex = renderer.layerManager.getZIndex(model).toString();
-
   manageClassNames(model, element);
   applyShadowStyles(model, element, renderer);
 };

blocksuite/framework/std/src/gfx/layer.ts

@@ -57,7 +57,7 @@ export type CanvasLayer = BaseLayer<GfxPrimitiveElementModel> & {
   type: 'canvas';
 
   /**
-   * The z-index of canvas layer.
+   * The z-index of the first element in this canvas layer.
    *
    * A canvas layer renders all the elements in a single canvas,
    *  this property is used to render the canvas with correct z-index.
@@ -165,8 +165,7 @@ export class LayerManager extends GfxExtension {
         ];
         curLayer.zIndex = currentCSSZindex;
         layers.push(curLayer as LayerManager['layers'][number]);
-        currentCSSZindex +=
+        currentCSSZindex += curLayer.elements.length;
-          curLayer.type === 'block' ? curLayer.elements.length : 1;
       }
     };
     const addLayer = (type: 'canvas' | 'block') => {

blocksuite/framework/std/src/utils/layer.ts

@@ -12,11 +12,7 @@ import type { SurfaceBlockModel } from '../gfx/model/surface/surface-model.js';
 
 export function getLayerEndZIndex(layers: Layer[], layerIndex: number) {
   const layer = layers[layerIndex];
-  return layer
+  return layer ? layer.zIndex + layer.elements.length - 1 : 0;
-    ? layer.type === 'block'
-      ? layer.zIndex + layer.elements.length - 1
-      : layer.zIndex
-    : 0;
 }
 
 export function updateLayersZIndex(layers: Layer[], startIdx: number) {
@@ -27,7 +23,7 @@ export function updateLayersZIndex(layers: Layer[], startIdx: number) {
     const curLayer = layers[i];
 
     curLayer.zIndex = curIndex;
-    curIndex += curLayer.type === 'block' ? curLayer.elements.length : 1;
+    curIndex += curLayer.elements.length;
   }
 }
 

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

@@ -200,7 +200,7 @@ test('layer zindex should update correctly when elements changed', async () => {
     expect(service.layer.layers[1].zIndex).toBe(3);
 
     expect(service.layer.layers[2].type).toBe('block');
-    expect(service.layer.layers[2].zIndex).toBe(4);
+    expect(service.layer.layers[2].zIndex).toBe(5);
   };
   assert2StepState();