refactor(editor): inner toolbar surface-ref block with extension (#11246)

This PR refactor `surface-ref` toolbar with `ToolbarExtension`

blocksuite/affine/blocks/block-surface-ref/src/components/index.ts

@@ -0,0 +1 @@
+export { SurfaceRefToolbarTitle } from './surface-ref-toolbar-title';

blocksuite/affine/blocks/block-surface-ref/src/components/surface-ref-toolbar-title.ts

@@ -0,0 +1,68 @@
+import {
+  FrameBlockModel,
+  GroupElementModel,
+  MindmapElementModel,
+  ShapeElementModel,
+} from '@blocksuite/affine-model';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { ShadowlessElement } from '@blocksuite/block-std';
+import type { GfxModel } from '@blocksuite/block-std/gfx';
+import {
+  EdgelessIcon,
+  FrameIcon,
+  GroupIcon,
+  MindmapIcon,
+} from '@blocksuite/icons/lit';
+import { css, html, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class SurfaceRefToolbarTitle extends ShadowlessElement {
+  static override styles = css`
+    surface-ref-toolbar-title {
+      display: flex;
+      padding: 2px 4px;
+      margin-right: auto;
+      align-items: center;
+      gap: 4px;
+      border-radius: 2px;
+      background: ${unsafeCSSVarV2('button/iconButtonSolid')};
+
+      svg {
+        color: ${unsafeCSSVarV2('icon/primary')};
+        width: 16px;
+        height: 16px;
+      }
+
+      span {
+        color: ${unsafeCSSVarV2('text/primary')};
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 20px;
+      }
+    }
+  `;
+
+  @property({ attribute: false })
+  accessor referenceModel: GfxModel | null = null;
+
+  override render() {
+    const { referenceModel } = this;
+    let title = '';
+    let icon: TemplateResult = EdgelessIcon();
+    if (referenceModel instanceof GroupElementModel) {
+      title = referenceModel.title.toString();
+      icon = GroupIcon();
+    } else if (referenceModel instanceof FrameBlockModel) {
+      title = referenceModel.props.title.toString();
+      icon = FrameIcon();
+    } else if (referenceModel instanceof MindmapElementModel) {
+      const rootElement = referenceModel.tree.element;
+      if (rootElement instanceof ShapeElementModel) {
+        title = rootElement.text?.toString() ?? '';
+      }
+      icon = MindmapIcon();
+    }
+
+    return html`${icon}<span>${title}</span>`;
+  }
+}