refactor(editor): edgeless element toolbar with new pattern (#10511)

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

@@ -52,7 +52,7 @@ export function createBuiltinToolbarConfigForExternal(
       {
         id: 'a.preview',
         content(ctx) {
-          const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+          const model = ctx.getCurrentModel();
           if (!model || !isExternalEmbedModel(model)) return null;
 
           const { url } = model.props;
@@ -72,7 +72,7 @@ export function createBuiltinToolbarConfigForExternal(
             id: 'inline',
             label: 'Inline view',
             run(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
               if (!model || !isExternalEmbedModel(model)) return;
 
               const { title, caption, url: link } = model.props;
@@ -105,7 +105,7 @@ export function createBuiltinToolbarConfigForExternal(
             id: 'card',
             label: 'Card view',
             disabled(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
               if (!model || !isExternalEmbedModel(model)) return true;
 
               const { url } = model.props;
@@ -116,7 +116,7 @@ export function createBuiltinToolbarConfigForExternal(
               return options?.viewType === 'card';
             },
             run(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
               if (!model || !isExternalEmbedModel(model)) return;
 
               const { url, caption } = model.props;
@@ -165,7 +165,7 @@ export function createBuiltinToolbarConfigForExternal(
             id: 'embed',
             label: 'Embed view',
             disabled(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
               if (!model || !isExternalEmbedModel(model)) return false;
 
               const { url } = model.props;
@@ -176,7 +176,7 @@ export function createBuiltinToolbarConfigForExternal(
               return options?.viewType === 'embed';
             },
             when(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
               if (!model || !isExternalEmbedModel(model)) return false;
 
               const { url } = model.props;
@@ -187,7 +187,7 @@ export function createBuiltinToolbarConfigForExternal(
               return options?.viewType === 'embed';
             },
             run(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
               if (!model || !isExternalEmbedModel(model)) return;
 
               const { url, caption } = model.props;
@@ -231,7 +231,7 @@ export function createBuiltinToolbarConfigForExternal(
           },
         ],
         content(ctx) {
-          const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+          const model = ctx.getCurrentModel();
           if (!model || !isExternalEmbedModel(model)) return null;
 
           const { url } = model.props;
@@ -322,10 +322,7 @@ export function createBuiltinToolbarConfigForExternal(
         tooltip: 'Caption',
         icon: CaptionIcon(),
         run(ctx) {
-          const component = ctx.getCurrentBlockComponentBy(
-            BlockSelection,
-            klass
-          );
+          const component = ctx.getCurrentBlockComponentBy(klass);
           if (!component) return;
 
           component.captionEditor?.show();
@@ -378,10 +375,7 @@ export function createBuiltinToolbarConfigForExternal(
         label: 'Reload',
         icon: ResetIcon(),
         run(ctx) {
-          const component = ctx.getCurrentBlockComponentBy(
-            BlockSelection,
-            klass
-          );
+          const component = ctx.getCurrentBlockComponentBy(klass);
           component?.refreshData();
         },
       },

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

@@ -37,7 +37,6 @@ export const builtinToolbarConfig = {
       tooltip: 'Open this doc',
       run(ctx) {
         const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
           EmbedHtmlBlockComponent
         );
         component?.open();
@@ -99,7 +98,6 @@ export const builtinToolbarConfig = {
       icon: CaptionIcon(),
       run(ctx) {
         const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
           EmbedHtmlBlockComponent
         );
         component?.captionEditor?.show();

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

@@ -27,9 +27,6 @@ import * as Y from 'yjs';
 import { EmbedIframeBlockComponent } from '../embed-iframe-block';
 
 const trackBaseProps = {
-  segment: 'doc',
-  page: 'doc editor',
-  module: 'toolbar',
   category: 'bookmark',
   type: 'card view',
 };
@@ -156,7 +153,6 @@ export const builtinToolbarConfig = {
       icon: CaptionIcon(),
       run(ctx) {
         const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
           EmbedIframeBlockComponent
         );
         component?.captionEditor?.show();
@@ -210,7 +206,6 @@ export const builtinToolbarConfig = {
       icon: ResetIcon(),
       run(ctx) {
         const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
           EmbedIframeBlockComponent
         );
         component?.refreshData().catch(console.error);

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

@@ -38,7 +38,6 @@ export const builtinToolbarConfig = {
       id: 'a.doc-title',
       content(ctx) {
         const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
           EmbedLinkedDocBlockComponent
         );
         if (!component) return null;
@@ -63,7 +62,6 @@ export const builtinToolbarConfig = {
           label: 'Inline view',
           run(ctx) {
             const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
               EmbedLinkedDocBlockComponent
             );
             component?.covertToInline();
@@ -89,7 +87,6 @@ export const builtinToolbarConfig = {
           label: 'Embed view',
           disabled(ctx) {
             const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
               EmbedLinkedDocBlockComponent
             );
             if (!component) return true;
@@ -108,7 +105,6 @@ export const builtinToolbarConfig = {
           },
           run(ctx) {
             const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
               EmbedLinkedDocBlockComponent
             );
             component?.convertToEmbed();
@@ -208,7 +204,6 @@ export const builtinToolbarConfig = {
       icon: CaptionIcon(),
       run(ctx) {
         const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
           EmbedLinkedDocBlockComponent
         );
         component?.captionEditor?.show();

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

@@ -50,7 +50,6 @@ export const builtinToolbarConfig = {
       ],
       content(ctx) {
         const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
           EmbedSyncedDocBlockComponent
         );
         if (!component) return null;
@@ -117,14 +116,13 @@ export const builtinToolbarConfig = {
           label: 'Inline view',
           run(ctx) {
             const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
               EmbedSyncedDocBlockComponent
             );
             component?.covertToInline();
 
             // Clears
-            ctx.reset();
             ctx.select('note');
+            ctx.reset();
 
             ctx.track('SelectedView', {
               ...trackBaseProps,
@@ -138,7 +136,6 @@ export const builtinToolbarConfig = {
           label: 'Card view',
           run(ctx) {
             const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
               EmbedSyncedDocBlockComponent
             );
             component?.convertToCard();
@@ -192,7 +189,6 @@ export const builtinToolbarConfig = {
       icon: CaptionIcon(),
       run(ctx) {
         const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
           EmbedSyncedDocBlockComponent
         );
         component?.captionEditor?.show();