refactor: extract common builder

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

## Summary by CodeRabbit

- **New Features**
  - Toolbar actions related to embedding and duplicating documents are now always available without restrictions.

- **Chores**
  - Removed the feature flag controlling embed document alias features for a simpler user experience.

- **Tests**
  - Updated test setup to remove reliance on the deprecated feature flag.

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

blocksuite/affine/blocks/embed-doc/src/embed-linked-doc-block/configs/toolbar.ts

@@ -13,7 +13,6 @@ import {
   ActionPlacement,
   DocDisplayMetaProvider,
   EditorSettingProvider,
-  FeatureFlagService,
   type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
@@ -216,12 +215,7 @@ const conversionsActionGroup = {
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedLinkedDocBlockComponent);
 
-        if (
-          ctx.std
-            .get(FeatureFlagService)
-            .getFlag('enable_embed_doc_with_alias') &&
-          isGfxBlockComponent(block)
-        ) {
+        if (isGfxBlockComponent(block)) {
           const editorSetting = ctx.std.getOptional(EditorSettingProvider);
           editorSetting?.set?.(
             'docCanvasPreferView',

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/configs/toolbar.ts

@@ -17,7 +17,6 @@ import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import {
   ActionPlacement,
   EditorSettingProvider,
-  FeatureFlagService,
   type LinkEventType,
   type OpenDocMode,
   type ToolbarAction,
@@ -163,12 +162,7 @@ const conversionsActionGroup = {
       label: 'Card view',
       run(ctx) {
         const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
-        if (
-          ctx.std
-            .get(FeatureFlagService)
-            .getFlag('enable_embed_doc_with_alias') &&
-          isGfxBlockComponent(block)
-        ) {
+        if (isGfxBlockComponent(block)) {
           const editorSetting = ctx.std.getOptional(EditorSettingProvider);
           editorSetting?.set?.(
             'docCanvasPreferView',
@@ -296,8 +290,6 @@ const builtinSurfaceToolbarConfig = {
       label: 'Insert to page',
       tooltip: 'Insert to page',
       icon: InsertIntoPageIcon(),
-      when: ({ std }) =>
-        std.get(FeatureFlagService).getFlag('enable_embed_doc_with_alias'),
       run: ctx => {
         const model = ctx.getCurrentModelByType(EmbedSyncedDocModel);
         if (!model) return;
@@ -334,8 +326,6 @@ const builtinSurfaceToolbarConfig = {
       tooltip:
         'Duplicate as note to create an editable copy, the original remains unchanged.',
       icon: DuplicateIcon(),
-      when: ({ std }) =>
-        std.get(FeatureFlagService).getFlag('enable_embed_doc_with_alias'),
       run: ctx => {
         const { gfx } = ctx;
 

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

@@ -0,0 +1,11 @@
+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/element-renderer/connector-dom/index.ts

@@ -0,0 +1,367 @@
+import type { DomRenderer } from '@blocksuite/affine-block-surface';
+import {
+  type ConnectorElementModel,
+  ConnectorMode,
+  DefaultTheme,
+  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';
+
+interface PathBounds {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+}
+
+function calculatePathBounds(path: PointLocation[]): PathBounds {
+  if (path.length === 0) {
+    return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+  }
+
+  let minX = path[0][0];
+  let minY = path[0][1];
+  let maxX = path[0][0];
+  let maxY = path[0][1];
+
+  for (const point of path) {
+    minX = Math.min(minX, point[0]);
+    minY = Math.min(minY, point[1]);
+    maxX = Math.max(maxX, point[0]);
+    maxY = Math.max(maxY, point[1]);
+  }
+
+  return { minX, minY, maxX, maxY };
+}
+
+function createConnectorPath(
+  points: PointLocation[],
+  mode: ConnectorMode
+): string {
+  if (points.length < 2) return '';
+
+  const pathBuilder = new SVGPathBuilder();
+  pathBuilder.moveTo(points[0][0], points[0][1]);
+
+  if (mode === ConnectorMode.Curve) {
+    // Use bezier curves
+    for (let i = 1; i < points.length; i++) {
+      const prev = points[i - 1];
+      const curr = points[i];
+      pathBuilder.curveTo(
+        prev.absOut[0],
+        prev.absOut[1],
+        curr.absIn[0],
+        curr.absIn[1],
+        curr[0],
+        curr[1]
+      );
+    }
+  } else {
+    // Use straight lines
+    for (let i = 1; i < points.length; i++) {
+      pathBuilder.lineTo(points[i][0], points[i][1]);
+    }
+  }
+
+  return pathBuilder.build();
+}
+
+function createArrowMarker(
+  id: string,
+  style: PointStyle,
+  color: string,
+  strokeWidth: number,
+  isStart: boolean = false
+): SVGMarkerElement {
+  const marker = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'marker'
+  );
+  const size = DEFAULT_ARROW_SIZE * (strokeWidth / 2);
+
+  marker.id = id;
+  marker.setAttribute('viewBox', '0 0 20 20');
+  marker.setAttribute('refX', isStart ? '20' : '0');
+  marker.setAttribute('refY', '10');
+  marker.setAttribute('markerWidth', String(size));
+  marker.setAttribute('markerHeight', String(size));
+  marker.setAttribute('orient', 'auto');
+  marker.setAttribute('markerUnits', 'strokeWidth');
+
+  switch (style) {
+    case 'Arrow': {
+      const path = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path'
+      );
+      path.setAttribute(
+        'd',
+        isStart ? 'M 20 5 L 10 10 L 20 15 Z' : 'M 0 5 L 10 10 L 0 15 Z'
+      );
+      path.setAttribute('fill', color);
+      path.setAttribute('stroke', color);
+      marker.append(path);
+      break;
+    }
+    case 'Triangle': {
+      const path = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path'
+      );
+      path.setAttribute(
+        'd',
+        isStart ? 'M 20 7 L 12 10 L 20 13 Z' : 'M 0 7 L 8 10 L 0 13 Z'
+      );
+      path.setAttribute('fill', color);
+      path.setAttribute('stroke', color);
+      marker.append(path);
+      break;
+    }
+    case 'Circle': {
+      const circle = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'circle'
+      );
+      circle.setAttribute('cx', '10');
+      circle.setAttribute('cy', '10');
+      circle.setAttribute('r', '4');
+      circle.setAttribute('fill', color);
+      circle.setAttribute('stroke', color);
+      marker.append(circle);
+      break;
+    }
+    case 'Diamond': {
+      const path = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path'
+      );
+      path.setAttribute('d', 'M 10 6 L 14 10 L 10 14 L 6 10 Z');
+      path.setAttribute('fill', color);
+      path.setAttribute('stroke', color);
+      marker.append(path);
+      break;
+    }
+  }
+
+  return marker;
+}
+
+function renderConnectorLabel(
+  model: ConnectorElementModel,
+  container: HTMLElement,
+  renderer: DomRenderer,
+  zoom: number
+) {
+  if (!isConnectorWithLabel(model) || !model.labelXYWH) {
+    return;
+  }
+
+  const [lx, ly, lw, lh] = model.labelXYWH;
+  const {
+    labelStyle: {
+      color,
+      fontSize,
+      fontWeight,
+      fontStyle,
+      fontFamily,
+      textAlign,
+    },
+  } = model;
+
+  // Create label element
+  const labelElement = document.createElement('div');
+  labelElement.style.position = 'absolute';
+  labelElement.style.left = `${lx * zoom}px`;
+  labelElement.style.top = `${ly * zoom}px`;
+  labelElement.style.width = `${lw * zoom}px`;
+  labelElement.style.height = `${lh * zoom}px`;
+  labelElement.style.pointerEvents = 'none';
+  labelElement.style.overflow = 'hidden';
+  labelElement.style.display = 'flex';
+  labelElement.style.alignItems = 'center';
+  labelElement.style.justifyContent =
+    textAlign === 'center'
+      ? 'center'
+      : textAlign === 'right'
+        ? 'flex-end'
+        : 'flex-start';
+
+  // Style the text
+  labelElement.style.color = renderer.getColorValue(
+    color,
+    DefaultTheme.black,
+    true
+  );
+  labelElement.style.fontSize = `${fontSize * zoom}px`;
+  labelElement.style.fontWeight = fontWeight;
+  labelElement.style.fontStyle = fontStyle;
+  labelElement.style.fontFamily = fontFamily;
+  labelElement.style.textAlign = textAlign;
+  labelElement.style.lineHeight = '1.2';
+  labelElement.style.whiteSpace = 'pre-wrap';
+  labelElement.style.wordWrap = 'break-word';
+
+  // Add text content
+  if (model.text) {
+    labelElement.textContent = model.text.toString();
+  }
+
+  container.append(labelElement);
+}
+
+/**
+ * Renders a ConnectorElementModel to a given HTMLElement using DOM/SVG.
+ * This function is intended to be registered via the DomElementRendererExtension.
+ *
+ * @param model - The connector element model containing rendering properties.
+ * @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,
+  element: HTMLElement,
+  renderer: DomRenderer
+): void => {
+  const { zoom } = renderer.viewport;
+  const {
+    mode,
+    path: points,
+    strokeStyle,
+    frontEndpointStyle,
+    rearEndpointStyle,
+    strokeWidth,
+    stroke,
+  } = model;
+
+  // Clear previous content
+  element.innerHTML = '';
+
+  // Early return if no path points
+  if (!points || points.length < 2) {
+    return;
+  }
+
+  // Calculate bounds for the SVG viewBox
+  const pathBounds = calculatePathBounds(points);
+  const padding = Math.max(strokeWidth * 2, 20); // Add padding for arrows
+  const svgWidth = (pathBounds.maxX - pathBounds.minX + padding * 2) * zoom;
+  const svgHeight = (pathBounds.maxY - pathBounds.minY + padding * 2) * zoom;
+  const offsetX = pathBounds.minX - padding;
+  const offsetY = pathBounds.minY - padding;
+
+  // Create SVG element
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.style.position = 'absolute';
+  svg.style.left = `${offsetX * zoom}px`;
+  svg.style.top = `${offsetY * zoom}px`;
+  svg.style.width = `${svgWidth}px`;
+  svg.style.height = `${svgHeight}px`;
+  svg.style.overflow = 'visible';
+  svg.style.pointerEvents = 'none';
+  svg.setAttribute('viewBox', `0 0 ${svgWidth / zoom} ${svgHeight / zoom}`);
+
+  // Create defs for markers
+  const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+  svg.append(defs);
+
+  const strokeColor = renderer.getColorValue(
+    stroke,
+    DefaultTheme.connectorColor,
+    true
+  );
+
+  // Create markers for endpoints
+  let startMarkerId = '';
+  let endMarkerId = '';
+
+  if (frontEndpointStyle !== 'None') {
+    startMarkerId = `start-marker-${model.id}`;
+    const startMarker = createArrowMarker(
+      startMarkerId,
+      frontEndpointStyle,
+      strokeColor,
+      strokeWidth,
+      true
+    );
+    defs.append(startMarker);
+  }
+
+  if (rearEndpointStyle !== 'None') {
+    endMarkerId = `end-marker-${model.id}`;
+    const endMarker = createArrowMarker(
+      endMarkerId,
+      rearEndpointStyle,
+      strokeColor,
+      strokeWidth,
+      false
+    );
+    defs.append(endMarker);
+  }
+
+  // Create path element
+  const pathElement = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'path'
+  );
+
+  // Adjust points relative to the SVG coordinate system
+  const adjustedPoints = points.map(point => {
+    const adjustedPoint = new PointLocation([
+      point[0] - offsetX,
+      point[1] - offsetY,
+    ]);
+    if (point.absIn) {
+      adjustedPoint.in = [
+        point.absIn[0] - offsetX - adjustedPoint[0],
+        point.absIn[1] - offsetY - adjustedPoint[1],
+      ];
+    }
+    if (point.absOut) {
+      adjustedPoint.out = [
+        point.absOut[0] - offsetX - adjustedPoint[0],
+        point.absOut[1] - offsetY - adjustedPoint[1],
+      ];
+    }
+    return adjustedPoint;
+  });
+
+  const pathData = createConnectorPath(adjustedPoints, mode);
+  pathElement.setAttribute('d', pathData);
+  pathElement.setAttribute('stroke', strokeColor);
+  pathElement.setAttribute('stroke-width', String(strokeWidth));
+  pathElement.setAttribute('fill', 'none');
+  pathElement.setAttribute('stroke-linecap', 'round');
+  pathElement.setAttribute('stroke-linejoin', 'round');
+
+  // Apply stroke style
+  if (strokeStyle === 'dash') {
+    pathElement.setAttribute('stroke-dasharray', '12,12');
+  }
+
+  // Apply markers
+  if (startMarkerId) {
+    pathElement.setAttribute('marker-start', `url(#${startMarkerId})`);
+  }
+  if (endMarkerId) {
+    pathElement.setAttribute('marker-end', `url(#${endMarkerId})`);
+  }
+
+  svg.append(pathElement);
+  element.append(svg);
+
+  // Set element size and position
+  element.style.width = `${model.w * zoom}px`;
+  element.style.height = `${model.h * zoom}px`;
+  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/connector/src/index.ts

@@ -2,6 +2,7 @@ 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 './text';
 export * from './toolbar/config';

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

@@ -7,6 +7,7 @@ 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 { connectorToolbarExtension } from './toolbar/config';
 import { connectorQuickTool } from './toolbar/quick-tool';
@@ -24,6 +25,7 @@ export class ConnectorViewExtension extends ViewExtensionProvider {
     super.setup(context);
     context.register(ConnectorElementView);
     context.register(ConnectorElementRendererExtension);
+    context.register(ConnectorDomRendererExtension);
     if (this.isEdgeless(context.scope)) {
       context.register(ConnectorTool);
       context.register(ConnectorFilter);

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

@@ -1,6 +1,7 @@
 import type { DomRenderer } from '@blocksuite/affine-block-surface';
 import type { ShapeElementModel } from '@blocksuite/affine-model';
 import { DefaultTheme } from '@blocksuite/affine-model';
+import { SVGShapeBuilder } from '@blocksuite/global/gfx';
 
 import { manageClassNames, setStyles } from './utils';
 
@@ -9,18 +10,35 @@ function applyShapeSpecificStyles(
   element: HTMLElement,
   zoom: number
 ) {
-  if (model.shapeType === 'rect') {
-    const w = model.w * zoom;
-    const h = model.h * zoom;
-    const r = model.radius ?? 0;
-    const borderRadius =
-      r < 1 ? `${Math.min(w * r, h * r)}px` : `${r * zoom}px`;
-    element.style.borderRadius = borderRadius;
-  } else if (model.shapeType === 'ellipse') {
-    element.style.borderRadius = '50%';
-  } else {
-    element.style.borderRadius = '';
+  // Reset properties that might be set by different shape types
+  element.style.removeProperty('clip-path');
+  element.style.removeProperty('border-radius');
+  // Clear DOM for shapes that don't use SVG, or if type changes from SVG-based to non-SVG-based
+  if (model.shapeType !== 'diamond' && model.shapeType !== 'triangle') {
+    while (element.firstChild) element.firstChild.remove();
   }
+
+  switch (model.shapeType) {
+    case 'rect': {
+      const w = model.w * zoom;
+      const h = model.h * zoom;
+      const r = model.radius ?? 0;
+      const borderRadius =
+        r < 1 ? `${Math.min(w * r, h * r)}px` : `${r * zoom}px`;
+      element.style.borderRadius = borderRadius;
+      break;
+    }
+    case 'ellipse':
+      element.style.borderRadius = '50%';
+      break;
+    case 'diamond':
+      element.style.clipPath = 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)';
+      break;
+    case 'triangle':
+      element.style.clipPath = 'polygon(50% 0%, 100% 100%, 0% 100%)';
+      break;
+  }
+  // No 'else' needed to clear styles, as they are reset at the beginning of the function.
 }
 
 function applyBorderStyles(
@@ -78,6 +96,9 @@ export const shapeDomRenderer = (
   renderer: DomRenderer
 ): void => {
   const { zoom } = renderer.viewport;
+  const unscaledWidth = model.w;
+  const unscaledHeight = model.h;
+
   const fillColor = renderer.getColorValue(
     model.fillColor,
     DefaultTheme.shapeFillColor,
@@ -89,17 +110,77 @@ export const shapeDomRenderer = (
     true
   );
 
-  element.style.width = `${model.w * zoom}px`;
-  element.style.height = `${model.h * zoom}px`;
+  element.style.width = `${unscaledWidth * zoom}px`;
+  element.style.height = `${unscaledHeight * zoom}px`;
+  element.style.boxSizing = 'border-box';
 
+  // Apply shape-specific clipping, border-radius, and potentially clear innerHTML
   applyShapeSpecificStyles(model, element, zoom);
 
-  element.style.backgroundColor = model.filled ? fillColor : 'transparent';
+  if (model.shapeType === 'diamond' || model.shapeType === 'triangle') {
+    // For diamond and triangle, fill and border are handled by inline SVG
+    element.style.border = 'none'; // Ensure no standard CSS border interferes
+    element.style.backgroundColor = 'transparent'; // Host element is transparent
+
+    const strokeW = model.strokeWidth;
+
+    let svgPoints = '';
+    if (model.shapeType === 'diamond') {
+      // Generate diamond points using shared utility
+      svgPoints = SVGShapeBuilder.diamond(
+        unscaledWidth,
+        unscaledHeight,
+        strokeW
+      );
+    } else {
+      // triangle - generate triangle points using shared utility
+      svgPoints = SVGShapeBuilder.triangle(
+        unscaledWidth,
+        unscaledHeight,
+        strokeW
+      );
+    }
+
+    // Determine if stroke should be visible and its color
+    const finalStrokeColor =
+      model.strokeStyle !== 'none' && strokeW > 0 ? strokeColor : 'transparent';
+    // Determine dash array, only if stroke is visible and style is 'dash'
+    const finalStrokeDasharray =
+      model.strokeStyle === 'dash' && finalStrokeColor !== 'transparent'
+        ? '12, 12'
+        : 'none';
+    // Determine fill color
+    const finalFillColor = model.filled ? fillColor : 'transparent';
+
+    // Build SVG safely with DOM-API
+    const SVG_NS = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', '100%');
+    svg.setAttribute('height', '100%');
+    svg.setAttribute('viewBox', `0 0 ${unscaledWidth} ${unscaledHeight}`);
+    svg.setAttribute('preserveAspectRatio', 'none');
+
+    const polygon = document.createElementNS(SVG_NS, 'polygon');
+    polygon.setAttribute('points', svgPoints);
+    polygon.setAttribute('fill', finalFillColor);
+    polygon.setAttribute('stroke', finalStrokeColor);
+    polygon.setAttribute('stroke-width', String(strokeW));
+    if (finalStrokeDasharray !== 'none') {
+      polygon.setAttribute('stroke-dasharray', finalStrokeDasharray);
+    }
+    svg.append(polygon);
+
+    // Replace existing children to avoid memory leaks
+    element.replaceChildren(svg);
+  } else {
+    // Standard rendering for other shapes (e.g., rect, ellipse)
+    // innerHTML was already cleared by applyShapeSpecificStyles if necessary
+    element.style.backgroundColor = model.filled ? fillColor : 'transparent';
+    applyBorderStyles(model, element, strokeColor, zoom); // Uses standard CSS border
+  }
 
-  applyBorderStyles(model, element, strokeColor, zoom);
   applyTransformStyles(model, element);
 
-  element.style.boxSizing = 'border-box';
   element.style.zIndex = renderer.layerManager.getZIndex(model).toString();
 
   manageClassNames(model, element);

blocksuite/affine/shared/src/services/feature-flag-service.ts

@@ -19,7 +19,6 @@ export interface BlockSuiteFlags {
   enable_callout: boolean;
   enable_edgeless_scribbled_style: boolean;
   enable_table_virtual_scroll: boolean;
-  enable_embed_doc_with_alias: boolean;
   enable_turbo_renderer: boolean;
   enable_dom_renderer: boolean;
 }
@@ -45,7 +44,6 @@ export class FeatureFlagService extends StoreExtension {
     enable_callout: false,
     enable_edgeless_scribbled_style: false,
     enable_table_virtual_scroll: false,
-    enable_embed_doc_with_alias: false,
     enable_turbo_renderer: false,
     enable_dom_renderer: false,
   });

blocksuite/affine/widgets/slash-menu/src/utils.ts

@@ -95,11 +95,8 @@ export function formatDate(date: Date) {
 }
 
 export function formatTime(date: Date) {
-  // mm-dd hh:mm
-  const month = (date.getMonth() + 1).toString().padStart(2, '0');
-  const day = date.getDate().toString().padStart(2, '0');
   const hours = date.getHours().toString().padStart(2, '0');
   const minutes = date.getMinutes().toString().padStart(2, '0');
-  const strTime = `${month}-${day} ${hours}:${minutes}`;
+  const strTime = `${formatDate(date)} ${hours}:${minutes}`;
   return strTime;
 }

blocksuite/framework/global/src/__tests__/svg-path.unit.spec.ts

@@ -0,0 +1,73 @@
+import { describe, expect, test } from 'vitest';
+
+import { SVGPathBuilder, SVGShapeBuilder } from '../gfx/svg-path.js';
+
+describe('SVGPathBuilder', () => {
+  test('should build a simple path', () => {
+    const pathBuilder = new SVGPathBuilder();
+    const result = pathBuilder.moveTo(10, 20).lineTo(30, 40).build();
+
+    expect(result).toBe('M 10 20 L 30 40');
+  });
+
+  test('should build a path with curves', () => {
+    const pathBuilder = new SVGPathBuilder();
+    const result = pathBuilder
+      .moveTo(0, 0)
+      .curveTo(10, 0, 10, 10, 20, 10)
+      .build();
+
+    expect(result).toBe('M 0 0 C 10 0 10 10 20 10');
+  });
+
+  test('should build a closed path', () => {
+    const pathBuilder = new SVGPathBuilder();
+    const result = pathBuilder
+      .moveTo(0, 0)
+      .lineTo(10, 0)
+      .lineTo(5, 10)
+      .closePath()
+      .build();
+
+    expect(result).toBe('M 0 0 L 10 0 L 5 10 Z');
+  });
+
+  test('should clear commands', () => {
+    const pathBuilder = new SVGPathBuilder();
+    pathBuilder.moveTo(10, 20).lineTo(30, 40);
+    pathBuilder.clear();
+    const result = pathBuilder.moveTo(0, 0).build();
+
+    expect(result).toBe('M 0 0');
+  });
+});
+
+describe('SVGShapeBuilder', () => {
+  test('should generate diamond polygon points', () => {
+    const result = SVGShapeBuilder.diamond(100, 80, 2);
+    expect(result).toBe('50,1 99,40 50,79 1,40');
+  });
+
+  test('should generate triangle polygon points', () => {
+    const result = SVGShapeBuilder.triangle(100, 80, 2);
+    expect(result).toBe('50,1 99,79 1,79');
+  });
+
+  test('should generate diamond path', () => {
+    const result = SVGShapeBuilder.diamondPath(100, 80, 2);
+    expect(result).toBe('M 50 1 L 99 40 L 50 79 L 1 40 Z');
+  });
+
+  test('should generate triangle path', () => {
+    const result = SVGShapeBuilder.trianglePath(100, 80, 2);
+    expect(result).toBe('M 50 1 L 99 79 L 1 79 Z');
+  });
+
+  test('should handle zero stroke width', () => {
+    const diamondResult = SVGShapeBuilder.diamond(100, 80, 0);
+    expect(diamondResult).toBe('50,0 100,40 50,80 0,40');
+
+    const triangleResult = SVGShapeBuilder.triangle(100, 80, 0);
+    expect(triangleResult).toBe('50,0 100,80 0,80');
+  });
+});

blocksuite/framework/global/src/gfx/index.ts

@@ -4,4 +4,5 @@ export * from './math.js';
 export * from './model/index.js';
 export * from './perfect-freehand/index.js';
 export * from './polyline.js';
+export * from './svg-path.js';
 export * from './xywh.js';

blocksuite/framework/global/src/gfx/svg-path.ts

@@ -0,0 +1,160 @@
+interface PathCommand {
+  command: string;
+  coordinates: number[];
+}
+
+/**
+ * A utility class for building SVG path strings using command-based API.
+ * Supports moveTo, lineTo, curveTo operations and can build complete path strings.
+ */
+export class SVGPathBuilder {
+  private commands: PathCommand[] = [];
+
+  /**
+   * Move to a specific point without drawing
+   */
+  moveTo(x: number, y: number): this {
+    this.commands.push({
+      command: 'M',
+      coordinates: [x, y],
+    });
+    return this;
+  }
+
+  /**
+   * Draw a line to a specific point
+   */
+  lineTo(x: number, y: number): this {
+    this.commands.push({
+      command: 'L',
+      coordinates: [x, y],
+    });
+    return this;
+  }
+
+  /**
+   * Draw a cubic Bézier curve
+   */
+  curveTo(
+    cp1x: number,
+    cp1y: number,
+    cp2x: number,
+    cp2y: number,
+    x: number,
+    y: number
+  ): this {
+    this.commands.push({
+      command: 'C',
+      coordinates: [cp1x, cp1y, cp2x, cp2y, x, y],
+    });
+    return this;
+  }
+
+  /**
+   * Close the current path
+   */
+  closePath(): this {
+    this.commands.push({
+      command: 'Z',
+      coordinates: [],
+    });
+    return this;
+  }
+
+  /**
+   * Build the complete SVG path string
+   */
+  build(): string {
+    const pathSegments = this.commands.map(cmd => {
+      const coords = cmd.coordinates.join(' ');
+      return coords ? `${cmd.command} ${coords}` : cmd.command;
+    });
+
+    return pathSegments.join(' ');
+  }
+
+  /**
+   * Clear all commands and reset the builder
+   */
+  clear(): this {
+    this.commands = [];
+    return this;
+  }
+}
+
+/**
+ * Create SVG polygon points string for common shapes
+ */
+export class SVGShapeBuilder {
+  /**
+   * Generate diamond (rhombus) polygon points
+   */
+  static diamond(
+    width: number,
+    height: number,
+    strokeWidth: number = 0
+  ): string {
+    const halfStroke = strokeWidth / 2;
+    return [
+      `${width / 2},${halfStroke}`,
+      `${width - halfStroke},${height / 2}`,
+      `${width / 2},${height - halfStroke}`,
+      `${halfStroke},${height / 2}`,
+    ].join(' ');
+  }
+
+  /**
+   * Generate triangle polygon points
+   */
+  static triangle(
+    width: number,
+    height: number,
+    strokeWidth: number = 0
+  ): string {
+    const halfStroke = strokeWidth / 2;
+    return [
+      `${width / 2},${halfStroke}`,
+      `${width - halfStroke},${height - halfStroke}`,
+      `${halfStroke},${height - halfStroke}`,
+    ].join(' ');
+  }
+
+  /**
+   * Generate diamond path using SVGPathBuilder
+   */
+  static diamondPath(
+    width: number,
+    height: number,
+    strokeWidth: number = 0
+  ): string {
+    const halfStroke = strokeWidth / 2;
+    const pathBuilder = new SVGPathBuilder();
+
+    return pathBuilder
+      .moveTo(width / 2, halfStroke)
+      .lineTo(width - halfStroke, height / 2)
+      .lineTo(width / 2, height - halfStroke)
+      .lineTo(halfStroke, height / 2)
+      .closePath()
+      .build();
+  }
+
+  /**
+   * Generate triangle path using SVGPathBuilder
+   */
+  static trianglePath(
+    width: number,
+    height: number,
+    strokeWidth: number = 0
+  ): string {
+    const halfStroke = strokeWidth / 2;
+    const pathBuilder = new SVGPathBuilder();
+
+    return pathBuilder
+      .moveTo(width / 2, halfStroke)
+      .lineTo(width - halfStroke, height - halfStroke)
+      .lineTo(halfStroke, height - halfStroke)
+      .closePath()
+      .build();
+  }
+}

blocksuite/integration-test/src/__tests__/edgeless/connector-dom.spec.ts

@@ -0,0 +1,158 @@
+import { DomRenderer } from '@blocksuite/affine-block-surface';
+import { beforeEach, describe, expect, test } from 'vitest';
+
+import { wait } from '../utils/common.js';
+import { getSurface } from '../utils/edgeless.js';
+import { setupEditor } from '../utils/setup.js';
+
+describe('Connector rendering with DOM renderer', () => {
+  beforeEach(async () => {
+    const cleanup = await setupEditor('edgeless', [], {
+      enableDomRenderer: true,
+    });
+    return cleanup;
+  });
+
+  test('should use DomRenderer when enable_dom_renderer flag is true', async () => {
+    const surface = getSurface(doc, editor);
+    expect(surface).not.toBeNull();
+    expect(surface?.renderer).toBeInstanceOf(DomRenderer);
+  });
+
+  test('should render a connector element as a DOM node', async () => {
+    const surfaceView = getSurface(window.doc, window.editor);
+    const surfaceModel = surfaceView.model;
+
+    // Create two shapes to connect
+    const shape1Id = surfaceModel.addElement({
+      type: 'shape',
+      xywh: '[100, 100, 80, 60]',
+    });
+
+    const shape2Id = surfaceModel.addElement({
+      type: 'shape',
+      xywh: '[300, 200, 80, 60]',
+    });
+
+    // Create a connector between the shapes
+    const connectorProps = {
+      type: 'connector',
+      source: { id: shape1Id },
+      target: { id: shape2Id },
+      stroke: '#000000',
+      strokeWidth: 2,
+    };
+    const connectorId = surfaceModel.addElement(connectorProps);
+
+    await wait(100);
+
+    const connectorElement = surfaceView?.renderRoot.querySelector(
+      `[data-element-id="${connectorId}"]`
+    );
+
+    expect(connectorElement).not.toBeNull();
+    expect(connectorElement).toBeInstanceOf(HTMLElement);
+
+    // Check if SVG element is present for connector rendering
+    const svgElement = connectorElement?.querySelector('svg');
+    expect(svgElement).not.toBeNull();
+  });
+
+  test('should render connector with different stroke styles', async () => {
+    const surfaceView = getSurface(window.doc, window.editor);
+    const surfaceModel = surfaceView.model;
+
+    // Create a dashed connector
+    const connectorProps = {
+      type: 'connector',
+      source: { position: [100, 100] },
+      target: { position: [200, 200] },
+      strokeStyle: 'dash',
+      stroke: '#ff0000',
+      strokeWidth: 4,
+    };
+    const connectorId = surfaceModel.addElement(connectorProps);
+
+    // Wait for path generation and rendering
+    await wait(500);
+
+    const connectorElement = surfaceView?.renderRoot.querySelector(
+      `[data-element-id="${connectorId}"]`
+    );
+
+    expect(connectorElement).not.toBeNull();
+
+    const svgElement = connectorElement?.querySelector('svg');
+    expect(svgElement).not.toBeNull();
+
+    // Find the main path element (not the ones inside markers)
+    const pathElements = svgElement?.querySelectorAll('path');
+    // The main connector path should be the last one (after marker paths)
+    const pathElement = pathElements?.[pathElements.length - 1];
+
+    expect(pathElement).not.toBeNull();
+
+    // Check stroke-dasharray attribute
+    const strokeDasharray = pathElement!.getAttribute('stroke-dasharray');
+    expect(strokeDasharray).toBe('12,12');
+  });
+
+  test('should render connector with arrow endpoints', async () => {
+    const surfaceView = getSurface(window.doc, window.editor);
+    const surfaceModel = surfaceView.model;
+
+    const connectorProps = {
+      type: 'connector',
+      source: { position: [100, 100] },
+      target: { position: [200, 200] },
+      frontEndpointStyle: 'Triangle',
+      rearEndpointStyle: 'Arrow',
+    };
+    const connectorId = surfaceModel.addElement(connectorProps);
+
+    await wait(100);
+
+    const connectorElement = surfaceView?.renderRoot.querySelector(
+      `[data-element-id="${connectorId}"]`
+    );
+
+    expect(connectorElement).not.toBeNull();
+
+    // Check for markers in defs
+    const defsElement = connectorElement?.querySelector('defs');
+    expect(defsElement).not.toBeNull();
+
+    const markers = defsElement?.querySelectorAll('marker');
+    expect(markers?.length).toBeGreaterThan(0);
+  });
+
+  test('should remove connector DOM node when element is deleted', async () => {
+    const surfaceView = getSurface(window.doc, window.editor);
+    const surfaceModel = surfaceView.model;
+
+    expect(surfaceView.renderer).toBeInstanceOf(DomRenderer);
+
+    const connectorProps = {
+      type: 'connector',
+      source: { position: [50, 50] },
+      target: { position: [150, 150] },
+    };
+    const connectorId = surfaceModel.addElement(connectorProps);
+
+    await wait(100);
+
+    let connectorElement = surfaceView.renderRoot.querySelector(
+      `[data-element-id="${connectorId}"]`
+    );
+    expect(connectorElement).not.toBeNull();
+
+    surfaceModel.deleteElement(connectorId);
+
+    await wait(100);
+
+    connectorElement = surfaceView.renderRoot.querySelector(
+      `[data-element-id="${connectorId}"]`
+    );
+    expect(connectorElement).toBeNull();
+  });
+});

blocksuite/integration-test/src/__tests__/edgeless/shape-dom.spec.ts

@@ -30,7 +30,7 @@ describe('Shape rendering with DOM renderer', () => {
       fill: '#ff0000',
       stroke: '#000000',
     };
-    const shapeId = surfaceModel.addElement(shapeProps as any);
+    const shapeId = surfaceModel.addElement(shapeProps);
 
     await new Promise(resolve => setTimeout(resolve, 100));
     const shapeElement = surfaceView?.renderRoot.querySelector(
@@ -73,7 +73,7 @@ describe('Shape rendering with DOM renderer', () => {
       subType: 'ellipse',
       xywh: '[200, 200, 50, 50]',
     };
-    const shapeId = surfaceModel.addElement(shapeProps as any);
+    const shapeId = surfaceModel.addElement(shapeProps);
 
     await new Promise(resolve => setTimeout(resolve, 100));
 
@@ -91,4 +91,48 @@ describe('Shape rendering with DOM renderer', () => {
     );
     expect(shapeElement).toBeNull();
   });
+
+  test('should correctly render diamond shape', async () => {
+    const surfaceView = getSurface(window.doc, window.editor);
+    const surfaceModel = surfaceView.model;
+    const shapeProps = {
+      type: 'shape',
+      subType: 'diamond',
+      xywh: '[150, 150, 80, 60]',
+      fillColor: '#ff0000',
+      strokeColor: '#000000',
+      filled: true,
+    };
+    const shapeId = surfaceModel.addElement(shapeProps);
+    await wait(100);
+    const shapeElement = surfaceView?.renderRoot.querySelector<HTMLElement>(
+      `[data-element-id="${shapeId}"]`
+    );
+
+    expect(shapeElement).not.toBeNull();
+    expect(shapeElement?.style.width).toBe('80px');
+    expect(shapeElement?.style.height).toBe('60px');
+  });
+
+  test('should correctly render triangle shape', async () => {
+    const surfaceView = getSurface(window.doc, window.editor);
+    const surfaceModel = surfaceView.model;
+    const shapeProps = {
+      type: 'shape',
+      subType: 'triangle',
+      xywh: '[150, 150, 80, 60]',
+      fillColor: '#ff0000',
+      strokeColor: '#000000',
+      filled: true,
+    };
+    const shapeId = surfaceModel.addElement(shapeProps);
+    await wait(100);
+    const shapeElement = surfaceView?.renderRoot.querySelector<HTMLElement>(
+      `[data-element-id="${shapeId}"]`
+    );
+
+    expect(shapeElement).not.toBeNull();
+    expect(shapeElement?.style.width).toBe('80px');
+    expect(shapeElement?.style.height).toBe('60px');
+  });
 });

packages/frontend/component/package.json

@@ -70,7 +70,7 @@
   "devDependencies": {
     "@affine-tools/utils": "workspace:*",
     "@blocksuite/affine": "workspace:*",
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^4.0.0",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^9.0.0",

packages/frontend/core/src/modules/dnd/index.ts

@@ -2,17 +2,11 @@ import { type Framework } from '@toeverything/infra';
 
 import { DocsService } from '../doc';
 import { EditorSettingService } from '../editor-setting';
-import { FeatureFlagService } from '../feature-flag';
 import { WorkspaceScope, WorkspaceService } from '../workspace';
 import { DndService } from './services';
 
 export function configureDndModule(framework: Framework) {
   framework
     .scope(WorkspaceScope)
-    .service(DndService, [
-      DocsService,
-      WorkspaceService,
-      EditorSettingService,
-      FeatureFlagService,
-    ]);
+    .service(DndService, [DocsService, WorkspaceService, EditorSettingService]);
 }

packages/frontend/core/src/modules/dnd/services/index.ts

@@ -18,7 +18,6 @@ import { Service } from '@toeverything/infra';
 
 import type { DocsService } from '../../doc';
 import type { EditorSettingService } from '../../editor-setting';
-import type { FeatureFlagService } from '../../feature-flag';
 import { resolveLinkToDoc } from '../../navigation';
 import type { WorkspaceService } from '../../workspace';
 
@@ -35,8 +34,7 @@ export class DndService extends Service {
   constructor(
     private readonly docsService: DocsService,
     private readonly workspaceService: WorkspaceService,
-    private readonly editorSettingService: EditorSettingService,
-    private readonly featureFlagService: FeatureFlagService
+    private readonly editorSettingService: EditorSettingService
   ) {
     super();
 
@@ -186,9 +184,7 @@ export class DndService extends Service {
           return false;
         },
         onDropTargetChange: (args: MonitorDragEvent<MixedDNDData>) => {
-          if (this.featureFlagService.flags.enable_embed_doc_with_alias.value) {
-            changeDocCardView(args);
-          }
+          changeDocCardView(args);
         },
       })
     );

packages/frontend/core/src/modules/feature-flag/constant.ts

@@ -259,15 +259,6 @@ export const AFFINE_FLAGS = {
     configurable: isCanaryBuild,
     defaultState: false,
   },
-  // TODO(@L-Sun): remove this flag after the feature is released
-  enable_embed_doc_with_alias: {
-    category: 'blocksuite',
-    bsFlag: 'enable_embed_doc_with_alias',
-    displayName: 'Embed doc with alias',
-    description: 'Embed doc with alias',
-    configurable: isCanaryBuild,
-    defaultState: isCanaryBuild,
-  },
   enable_setting_subpage_animation: {
     category: 'affine',
     displayName: 'Enable Setting Subpage Animation',

packages/frontend/core/src/modules/share-menu/view/share-menu/general-access/public-page-button.tsx

@@ -21,6 +21,9 @@ export const PublicDoc = ({ disabled }: { disabled?: boolean }) => {
   const t = useI18n();
   const shareInfoService = useService(ShareInfoService);
   const isSharedPage = useLiveData(shareInfoService.shareInfo.isShared$);
+  const isRevalidating = useLiveData(
+    shareInfoService.shareInfo.isRevalidating$
+  );
 
   useEffect(() => {
     shareInfoService.shareInfo.revalidate();
@@ -135,6 +138,8 @@ export const PublicDoc = ({ disabled }: { disabled?: boolean }) => {
             contentStyle={{
               width: '100%',
             }}
+            loading={isRevalidating}
+            disabled={isRevalidating}
           >
             {isSharedPage
               ? t['com.affine.share-menu.option.link.readonly']()

tests/blocksuite/e2e/embed-synced-doc/edgeless.spec.ts

@@ -142,14 +142,6 @@ test.describe('Embed synced doc in edgeless mode', () => {
         { title: 'Page 1', content: 'hello page 1', inEdgeless: true },
       ]);
 
-      // TODO(@L-Sun): remove this after this feature is released
-      await page.evaluate(() => {
-        const { FeatureFlagService } = window.$blocksuite.services;
-        window.editor.std
-          .get(FeatureFlagService)
-          .setFlag('enable_embed_doc_with_alias', true);
-      });
-
       await switchEditorMode(page);
 
       const edgelessEmbedSyncedBlock = page.locator(

yarn.lock

@@ -313,7 +313,7 @@ __metadata:
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "npm:^1.0.3"
     "@blocksuite/affine": "workspace:*"
     "@blocksuite/icons": "npm:^2.2.12"
-    "@chromatic-com/storybook": "npm:^3.2.2"
+    "@chromatic-com/storybook": "npm:^4.0.0"
     "@emotion/react": "npm:^11.14.0"
     "@emotion/styled": "npm:^11.14.0"
     "@radix-ui/react-avatar": "npm:^1.1.2"
@@ -4579,18 +4579,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chromatic-com/storybook@npm:^3.2.2":
-  version: 3.2.6
-  resolution: "@chromatic-com/storybook@npm:3.2.6"
+"@chromatic-com/storybook@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@chromatic-com/storybook@npm:4.0.0"
   dependencies:
-    chromatic: "npm:^11.15.0"
+    "@neoconfetti/react": "npm:^1.0.0"
+    chromatic: "npm:^12.0.0"
     filesize: "npm:^10.0.12"
     jsonfile: "npm:^6.1.0"
-    react-confetti: "npm:^6.1.0"
     strip-ansi: "npm:^7.1.0"
   peerDependencies:
-    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
-  checksum: 10/90f230b0ca5aa55a68a5d816099186a8ee715c23466a54571bca4cd6c9aab80a994b27a5bee5c6aa579d4f8e0b8e6bae6eefb45d395aa4f62d4f48b48138cd99
+    storybook: ^0.0.0-0 || ^9.0.0 || ^9.1.0-0
+  checksum: 10/326d887e58ff21731d5face900e8d64387a84328ab88e2423eb5d562f6302aff462845997210788d6edfda7689c13713630bb506fe923e78d86e9e28a4e6925d
   languageName: node
   linkType: hard
 
@@ -8959,6 +8959,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@neoconfetti/react@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@neoconfetti/react@npm:1.0.0"
+  checksum: 10/71a623f2df79c773b6693fab3a252ee2d7bb1da4a8986c2d15b5ef25493835c1de64f2e44637faf823970d43d63f32227b09a6605ad23f39bc82c14d810e45cd
+  languageName: node
+  linkType: hard
+
 "@nestjs-cls/transactional-adapter-prisma@npm:^1.2.19":
   version: 1.2.20
   resolution: "@nestjs-cls/transactional-adapter-prisma@npm:1.2.20"
@@ -18530,9 +18537,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^11.15.0":
-  version: 11.28.2
-  resolution: "chromatic@npm:11.28.2"
+"chromatic@npm:^12.0.0":
+  version: 12.0.0
+  resolution: "chromatic@npm:12.0.0"
   peerDependencies:
     "@chromatic-com/cypress": ^0.*.* || ^1.0.0
     "@chromatic-com/playwright": ^0.*.* || ^1.0.0
@@ -18545,7 +18552,7 @@ __metadata:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10/d5dc1d407157fb5dcdf1e43276d64731e8a95addfc29006771b34e60b126adbe54f1357886a391195edf4ebdff515bd82af36a357009f59f141ad634afe47389
+  checksum: 10/bae3b9f68196a0c5eb52e5ca25f20f0fa7a4276ccd35215d693bb4bb19727ac58fb94f74ea4d32b3f65f70e568d28378015d5da305af88ee1acf20c271dd3f2d
   languageName: node
   linkType: hard
 
@@ -29827,17 +29834,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-confetti@npm:^6.1.0":
-  version: 6.4.0
-  resolution: "react-confetti@npm:6.4.0"
-  dependencies:
-    tween-functions: "npm:^1.2.0"
-  peerDependencies:
-    react: ^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0
-  checksum: 10/ebb5c8384f915ffcbd1083cf034acb4aa7ea3fa3db26751788f028cdbf5332eb5dea576699f79df0981e22765cd7727b7f8135856a0326f712db84570ef2f724
-  languageName: node
-  linkType: hard
-
 "react-day-picker@npm:^9.4.3":
   version: 9.7.0
   resolution: "react-day-picker@npm:9.7.0"
@@ -33312,13 +33308,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tween-functions@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "tween-functions@npm:1.2.0"
-  checksum: 10/f145f39187aacfe6e3c6bfe8452be4061a569b8e1e75c28169c55b7cdf519daa1877c79a8a2cdc902b68f49b67b8478f34818ff02529d27ae5aa0545e7fbdc06
-  languageName: node
-  linkType: hard
-
 "typanion@npm:^3.14.0, typanion@npm:^3.8.0":
   version: 3.14.0
   resolution: "typanion@npm:3.14.0"