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

This commit is contained in:
fundon
2025-03-18 15:36:25 +00:00
parent 3939cc1c52
commit cb37d25d7b
31 changed files with 838 additions and 367 deletions
@@ -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();
},
},
@@ -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();
@@ -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);
@@ -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();
@@ -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();