Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-04 19:15:33 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
d2b45783eaae2255c48311e31fb796e7b200c36d
AFFiNE-Mirror/tsconfig.json
T
fundon ec9bd1f383 feat(editor): add toolbar registry extension (#9572) 
### What's Changed!

#### Added
Manage various types of toolbars uniformly in one place.

* `affine-toolbar-widget`
* `ToolbarRegistryExtension`

The toolbar currently supports and handles several scenarios:

1.  Select blocks: `BlockSelection`
2. Select text: `TextSelection` or `NativeSelection`
3. Hover a link: `affine-link` and `affine-reference`

#### Removed
Remove redundant toolbar implementations.

* `attachment` toolbar
* `bookmark` toolbar
* `embed` toolbar
* `formatting` toolbar
* `affine-link` toolbar
* `affine-reference` toolbar

### How to migrate?

Here is an example that can help us migrate some unrefactored toolbars:

Check out the more detailed types of [`ToolbarModuleConfig`](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/blocksuite/affine/shared/src/services/toolbar-service/config.ts).

1.  Add toolbar configuration file to a block type, such as bookmark block: [`config.ts`](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/blocksuite/affine/block-bookmark/src/configs/toolbar.ts)

```ts
export const builtinToolbarConfig = {
  actions: [
    {
      id: 'a.preview',
      content(ctx) {
        const model = ctx.getCurrentModelBy(BlockSelection, BookmarkBlockModel);
        if (!model) return null;

        const { url } = model;

        return html`<affine-link-preview .url=${url}></affine-link-preview>`;
      },
    },
    {
      id: 'b.conversions',
      actions: [
        {
          id: 'inline',
          label: 'Inline view',
          run(ctx) {
          },
        },
        {
          id: 'card',
          label: 'Card view',
          disabled: true,
        },
        {
          id: 'embed',
          label: 'Embed view',
          disabled(ctx) {
          },
          run(ctx) {
          },
        },
      ],
      content(ctx) {
      },
    } satisfies ToolbarActionGroup<ToolbarAction>,
    {
      id: 'c.style',
      actions: [
        {
          id: 'horizontal',
          label: 'Large horizontal style',
        },
        {
          id: 'list',
          label: 'Small horizontal style',
        },
      ],
      content(ctx) {
      },
    } satisfies ToolbarActionGroup<ToolbarAction>,
    {
      id: 'd.caption',
      tooltip: 'Caption',
      icon: CaptionIcon(),
      run(ctx) {
      },
    },
    {
      placement: ActionPlacement.More,
      id: 'a.clipboard',
      actions: [
        {
          id: 'copy',
          label: 'Copy',
          icon: CopyIcon(),
          run(ctx) {
          },
        },
        {
          id: 'duplicate',
          label: 'Duplicate',
          icon: DuplicateIcon(),
          run(ctx) {
          },
        },
      ],
    },
    {
      placement: ActionPlacement.More,
      id: 'b.refresh',
      label: 'Reload',
      icon: ResetIcon(),
      run(ctx) {
      },
    },
    {
      placement: ActionPlacement.More,
      id: 'c.delete',
      label: 'Delete',
      icon: DeleteIcon(),
      variant: 'destructive',
      run(ctx) {
      },
    },
  ],
} as const satisfies ToolbarModuleConfig;
```

2. Add configuration extension to a block spec: [bookmark's spec](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/blocksuite/affine/block-bookmark/src/bookmark-spec.ts)

```ts
const flavour = BookmarkBlockSchema.model.flavour;

export const BookmarkBlockSpec: ExtensionType[] = [
  ...,
  ToolbarModuleExtension({
    id: BlockFlavourIdentifier(flavour),
    config: builtinToolbarConfig,
  }),
].flat();
```

3. If the bock type already has a toolbar configuration built in, we can customize it in the following ways:

Check out the [editor's config](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/packages/frontend/core/src/blocksuite/extensions/editor-config/index.ts#L51C4-L54C8) file.

```ts
// Defines a toolbar configuration for the bookmark block type
const customBookmarkToolbarConfig = {
  actions: [
    ...
  ]
} as const satisfies ToolbarModuleConfig;

// Adds it into the editor's config
 ToolbarModuleExtension({
    id: BlockFlavourIdentifier('custom:affine:bookmark'),
    config: customBookmarkToolbarConfig,
 }),
```

4. If we want to extend the global:

```ts
// Defines a toolbar configuration
const customWildcardToolbarConfig = {
  actions: [
    ...
  ]
} as const satisfies ToolbarModuleConfig;

// Adds it into the editor's config
 ToolbarModuleExtension({
    id: BlockFlavourIdentifier('custom:affine:*'),
    config: customWildcardToolbarConfig,
 }),
```

Currently, only most toolbars in page mode have been refactored. Next is edgeless mode.
2025-03-06 06:46:03 +00:00

127 lines
5.0 KiB
JSON
Raw Blame History

{
"compilerOptions": {
// Strictness
"strict": true,
"verbatimModuleSyntax": true,
"exactOptionalPropertyTypes": false,
"noFallthroughCasesInSwitch": true,
"noImplicitOverride": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noPropertyAccessFromIndexSignature": false,
"noUncheckedIndexedAccess": false,
"skipLibCheck": true,
// Modules
"module": "ESNext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"typeRoots": ["./tools/@types", "./node_modules/@types"],
// Emit
"lib": ["ES2024"],
"target": "ES2024",
"useDefineForClassFields": false,
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"importsNotUsedAsValues": "remove",
// Interop Constraints
"forceConsistentCasingInFileNames": true,
"allowSyntheticDefaultImports": true,
"isolatedModules": true,
// Composite
"composite": true,
// NOTE(@forehalo):
// We now "fully" resolve package exports by standard "exports" field in package.json
// but core's exports are lit bit complex, so we left it here and will fix it when repos reorganization is done
"paths": {
"@affine/core/*": ["./packages/frontend/core/src/*"]
}
},
"include": [],
"files": [],
"exclude": ["node_modules", "target", "dist", "lib"],
// NOTE(@forehalo):
// The references are generated by the cli, do not modify it manually
// COMMAND: `yarn affine init`
"references": [
{ "path": "./blocksuite/affine/all" },
{ "path": "./blocksuite/affine/block-attachment" },
{ "path": "./blocksuite/affine/block-bookmark" },
{ "path": "./blocksuite/affine/block-callout" },
{ "path": "./blocksuite/affine/block-code" },
{ "path": "./blocksuite/affine/block-data-view" },
{ "path": "./blocksuite/affine/block-database" },
{ "path": "./blocksuite/affine/block-divider" },
{ "path": "./blocksuite/affine/block-edgeless-text" },
{ "path": "./blocksuite/affine/block-embed" },
{ "path": "./blocksuite/affine/block-frame" },
{ "path": "./blocksuite/affine/block-image" },
{ "path": "./blocksuite/affine/block-latex" },
{ "path": "./blocksuite/affine/block-list" },
{ "path": "./blocksuite/affine/block-note" },
{ "path": "./blocksuite/affine/block-paragraph" },
{ "path": "./blocksuite/affine/block-root" },
{ "path": "./blocksuite/affine/block-surface" },
{ "path": "./blocksuite/affine/block-surface-ref" },
{ "path": "./blocksuite/affine/block-table" },
{ "path": "./blocksuite/affine/components" },
{ "path": "./blocksuite/affine/data-view" },
{ "path": "./blocksuite/affine/fragment-frame-panel" },
{ "path": "./blocksuite/affine/fragment-outline" },
{ "path": "./blocksuite/affine/model" },
{ "path": "./blocksuite/affine/shared" },
{ "path": "./blocksuite/affine/widget-drag-handle" },
{ "path": "./blocksuite/affine/widget-edgeless-auto-connect" },
{ "path": "./blocksuite/affine/widget-frame-title" },
{ "path": "./blocksuite/affine/widget-remote-selection" },
{ "path": "./blocksuite/affine/widget-scroll-anchoring" },
{ "path": "./blocksuite/affine/widget-toolbar" },
{ "path": "./blocksuite/blocks" },
{ "path": "./blocksuite/framework/block-std" },
{ "path": "./blocksuite/framework/global" },
{ "path": "./blocksuite/framework/inline" },
{ "path": "./blocksuite/framework/store" },
{ "path": "./blocksuite/framework/sync" },
{ "path": "./blocksuite/integration-test" },
{ "path": "./blocksuite/playground" },
{ "path": "./blocksuite/tests-legacy" },
{ "path": "./packages/backend/native" },
{ "path": "./packages/backend/server" },
{ "path": "./packages/common/debug" },
{ "path": "./packages/common/env" },
{ "path": "./packages/common/infra" },
{ "path": "./packages/common/nbstore" },
{ "path": "./packages/frontend/admin" },
{ "path": "./packages/frontend/apps/android" },
{ "path": "./packages/frontend/apps/electron" },
{ "path": "./packages/frontend/apps/electron-renderer" },
{ "path": "./packages/frontend/apps/ios" },
{ "path": "./packages/frontend/apps/mobile" },
{ "path": "./packages/frontend/apps/web" },
{ "path": "./packages/frontend/component" },
{ "path": "./packages/frontend/core" },
{ "path": "./packages/frontend/electron-api" },
{ "path": "./packages/frontend/graphql" },
{ "path": "./packages/frontend/i18n" },
{ "path": "./packages/frontend/media-capture-playground" },
{ "path": "./packages/frontend/native" },
{ "path": "./packages/frontend/track" },
{ "path": "./tests/affine-cloud" },
{ "path": "./tests/affine-cloud-copilot" },
{ "path": "./tests/affine-desktop" },
{ "path": "./tests/affine-desktop-cloud" },
{ "path": "./tests/affine-local" },
{ "path": "./tests/affine-mobile" },
{ "path": "./tests/kit" },
{ "path": "./tools/cli" },
{ "path": "./tools/playstore-auto-bump" },
{ "path": "./tools/utils" }
]
}
Reference in New Issue View Git Blame Copy Permalink