Commit Graph

55 Commits

Author SHA1 Message Date
Mirone
cd63e0ed8b feat(editor): replace slot with rxjs subject (#10768) 2025-03-12 11:29:24 +09:00
Saul-Mirone
7ae9daa6f6 refactor(editor): use lodash (#10657) 2025-03-06 17:11:12 +08:00
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`](c178debf2d/blocksuite/affine/shared/src/services/toolbar-service/config.ts).

1.  Add toolbar configuration file to a block type, such as bookmark block: [`config.ts`](c178debf2d/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](c178debf2d/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](c178debf2d/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
Flrande
bd62634a76 feat(editor): add callout block (#10563)
- Add `CalloutBlockModel `
- Implement `CalloutBlockComponent `
- Integrate with slash menu (/)
2025-03-05 09:28:51 +00:00
Saul-Mirone
66d9d576e0 refactor(editor): add gfx entry in bs global package (#10612) 2025-03-04 12:46:50 +00:00
Saul-Mirone
a587abca85 feat(editor): add block meta service (#10561) 2025-03-03 06:13:06 +00:00
fundon
caa4dfedfc fix(editor): adjust black and white in shape text color palettes to pure black and pure white (#10450)
Closes: [BS-2697](https://linear.app/affine-design/issue/BS-2697/检查shape-text-color黑白不映射的pr合并状态)

https://github.com/user-attachments/assets/732612e9-5e43-453f-aef2-5f32f5a08614
2025-02-27 06:05:42 +00:00
Saul-Mirone
ce87dcf58e feat(editor): schema extension (#10447)
1. **Major Architectural Change: Schema Management**
   - Moved from `workspace.schema` to `store.schema` throughout the codebase
   - Removed schema property from Workspace and Doc interfaces
   - Added `BlockSchemaExtension` pattern across multiple block types

2. **Block Schema Extensions Added**
   - Added new `BlockSchemaExtension` to numerous block types including:
     - DataView, Surface, Attachment, Bookmark, Code
     - Database, Divider, EdgelessText, Embed blocks (Figma, Github, HTML, etc.)
     - Frame, Image, Latex, List, Note, Paragraph
     - Root, Surface Reference, Table blocks

3. **Import/Export System Updates**
   - Updated import functions to accept `schema` parameter:
     - `importHTMLToDoc`
     - `importHTMLZip`
     - `importMarkdownToDoc`
     - `importMarkdownZip`
     - `importNotionZip`
   - Modified export functions to use new schema pattern

4. **Test Infrastructure Updates**
   - Updated test files to use new schema extensions
   - Modified test document creation to include schema extensions
   - Removed direct schema registration in favor of extensions

5. **Service Layer Changes**
   - Updated various services to use `getAFFiNEWorkspaceSchema()`
   - Modified transformer initialization to use document schema
   - Updated collection initialization patterns

6. **Version Management**
   - Removed version-related properties and methods from:
     - `WorkspaceMetaImpl`
     - `TestMeta`
     - `DocImpl`
   - Removed `blockVersions` and `workspaceVersion/pageVersion`

7. **Store and Extension Updates**
   - Added new store extensions and adapters
   - Updated store initialization patterns
   - Added new schema-related functionality in store extension

This PR represents a significant architectural shift in how schemas are managed, moving from a workspace-centric to a store-centric approach, while introducing a more extensible block schema system through `BlockSchemaExtension`. The changes touch multiple layers of the application including core functionality, services, testing infrastructure, and import/export capabilities.
2025-02-26 11:31:29 +00:00
doouding
a0a97d0751 fix: drag connector and group element (#10385) 2025-02-24 06:13:05 +00:00
forehalo
2e0f0c624a chore: set base version to 0.20 (#10382) 2025-02-24 04:44:42 +00:00
donteatfriedrice
2d41c2ff8d chore: bump theme (#10358) 2025-02-24 10:08:47 +08:00
Saul-Mirone
22e4bd8c20 refactor: move image proxy middleware and adapter extensions (#10345)
### TL;DR
Moved image proxy middleware and adapter extensions to their respective packages and introduced a new spec provider for adapter registration.

### What changed?
- Relocated `defaultImageProxyMiddleware` from blocks to `@blocksuite/affine-block-image`
- Moved `PresentTool` from fragment-frame-panel to block-frame
- Created new adapter extension specs for HTML, Markdown, and Notion HTML
- Introduced a spec provider pattern for adapter registration
- Removed direct transformer references from RootService
- Updated imports across affected files to use new locations

### How to test?
1. Verify image proxy functionality works in exports and imports
2. Test HTML, Markdown, and Notion HTML adapters still function correctly
3. Confirm presentation mode works with the relocated PresentTool
4. Check that all file import/export operations continue to work as expected

### Why make this change?
This reorganization improves code modularity by placing features in their logical packages and introduces a more maintainable pattern for adapter registration. The spec provider pattern makes it easier to manage and extend adapter functionality while reducing coupling between components.
2025-02-21 09:01:57 +00:00
donteatfriedrice
2b11941c0e chore: bump theme (#10290) 2025-02-19 11:37:19 +00:00
L-Sun
e639f08b71 chore(editor): remove page block feature flag (#10251) 2025-02-18 09:25:05 +00:00
zzj3720
b6f8027e1b fix(editor): extra line breaks and spaces when parsing table from html (#10190)
close: BS-2562, BS-2569
2025-02-14 12:13:00 +00:00
L-Sun
3ada4bee0d chore(editor): adjust min width of edgeless note (#10153)
Close [BS-2499](https://linear.app/affine-design/issue/BS-2499/所有notes最小宽度调整为218px)

### What changes
- adjusted min width of edgeless note
  - placeholder show ellipsis in min edgeless note
- refactored somes button of `change-note-button.ts` with `isPageBlock`
2025-02-13 12:40:14 +00:00
doouding
f89fcf82f8 feat: edgeless dnd (#9988)
### Changed
- Support edgelss dnd
- Simplify the drag-handle state
2025-02-12 12:37:06 +00:00
Saul-Mirone
dbf0f9dc20 refactor(editor): remove global types in edgeless (#10092)
Closes: [BS-2553](https://linear.app/affine-design/issue/BS-2553/remove-global-types-in-edgeless)
2025-02-11 12:09:44 +00:00
Saul-Mirone
39eb8625d6 refactor(editor): remove block models global type (#10086) 2025-02-11 11:00:57 +00:00
Saul-Mirone
652865c7cf refactor(editor): remove global types in model (#10082)
Closes: [BS-2249](https://linear.app/affine-design/issue/BS-2249/remove-global-types-in-model)

```ts
// before
matchFlavours(model, ['affine:page']);
// after
matchFlavours(model, [PageBlockModel]);
```
2025-02-11 08:18:57 +00:00
Saul-Mirone
c6b8f2b584 refactor(editor): flat data for table block (#10010)
close: BS-2548
2025-02-10 19:09:33 +00:00
fundon
d03744688b refactor(editor): move embed-card-modal to components (#10037) 2025-02-10 10:56:13 +00:00
Oleg
d4f0c53a0c feat(core): frame editor settings (#9970)
Co-authored-by: L-Sun <zover.v@gmail.com>
Co-authored-by: Mirone <Saul-Mirone@outlook.com>
2025-02-10 15:23:32 +08:00
L-Sun
459972fe6c fix(editor): add missing zod schema for edgeless frame (#10024)
Related to https://github.com/toeverything/AFFiNE/pull/9970#discussion_r1944971309

### What changes:
- Add missing zod shcema for edgeless basic props
- Change `applyLastProps` to generic function for better return type inference of
- Fix: add `ZodIntersection` case to `makeDeepOptional`
2025-02-07 12:49:59 +00:00
zzj3720
5a5779c05a feat(editor): simple table block (#9740)
close: BS-2122, BS-2125, BS-2124, BS-2420, PD-2073, BS-2126, BS-2469, BS-2470, BS-2478, BS-2471
2025-01-24 10:07:57 +00:00
doodlewind
872a578bf7 refactor(editor): move zod schema with model for non surface blocks (#9876) 2025-01-23 10:57:49 +00:00
Saul-Mirone
f744002808 refactor(editor): add schema on block model (#9815) 2025-01-21 03:56:10 +00:00
doodlewind
14ca171a18 chore(web): bump theme (#9801) 2025-01-20 13:51:24 +00:00
donteatfriedrice
df910d7013 feat(editor): add affine inline footnote (#9745)
[BS-2369](https://linear.app/affine-design/issue/BS-2369/新增-affinetextattribute-footnote)  [BS-2370](https://linear.app/affine-design/issue/BS-2370/支持-footnote-自定义渲染行内内容) [BS-2372](https://linear.app/affine-design/issue/BS-2372/提供-footnoteconfigextension) [BS-2375](https://linear.app/affine-design/issue/BS-2375/footnote-自定义渲染-popup)

### Add new AffineTextAttribute: footnote

```
/**
 * FootNote is used to reference a doc, attachment or url.
 */
export interface AffineTextAttributes {
  ...
  footnote?: {
    label: string; // label of the footnote
    reference: {
      type: 'doc' | 'attachment' | 'url'; // type of reference
      docId?: string; // the id of the reference doc
      url?: string; //  the url of the reference network resource
      blobId?: string; // the id of the reference attachment
      fileName?: string; // the name of the reference attachment
      fileType?: string; // the type of the reference attachment
    }
  } | null
}
```

### FootNoteNodeConfigProvider Extension

#### FootNoteNodeConfig Type Definition

```
type FootNoteNodeRenderer = (
  footnote: FootNote,
  std: BlockStdScope
) => TemplateResult<1>;

type FootNotePopupRenderer = (
  footnote: FootNote,
  std: BlockStdScope,
  abortController: AbortController
) => TemplateResult<1>;

export interface FootNoteNodeConfig {
  customNodeRenderer?: FootNoteNodeRenderer;
  customPopupRenderer?: FootNotePopupRenderer;
  interactive?: boolean;
  hidePopup?: boolean;
}
```

#### FootNoteNodeConfigProvider Class

```
export class FootNoteNodeConfigProvider {
  private _customNodeRenderer?: FootNoteNodeRenderer;
  private _customPopupRenderer?: FootNotePopupRenderer;
  private _hidePopup: boolean;
  private _interactive: boolean;

  get customNodeRenderer() {
    return this._customNodeRenderer;
  }

  get customPopupRenderer() {
    return this._customPopupRenderer;
  }

  get doc() {
    return this.std.store;
  }

  get hidePopup() {
    return this._hidePopup;
  }

  get interactive() {
    return this._interactive;
  }

  constructor(
    config: FootNoteNodeConfig,
    readonly std: BlockStdScope
  ) {
    this._customNodeRenderer = config.customNodeRenderer;
    this._customPopupRenderer = config.customPopupRenderer;
    this._hidePopup = config.hidePopup ?? false;
    this._interactive = config.interactive ?? true;
  }

  setCustomNodeRenderer(renderer: FootNoteNodeRenderer) {
    this._customNodeRenderer = renderer;
  }

  setCustomPopupRenderer(renderer: FootNotePopupRenderer) {
    this._customPopupRenderer = renderer;
  }

  setHidePopup(hidePopup: boolean) {
    this._hidePopup = hidePopup;
  }

  setInteractive(interactive: boolean) {
    this._interactive = interactive;
  }
}
```

#### FootNoteNodeConfigProvider Extension

```
export const FootNoteNodeConfigIdentifier =
  createIdentifier<FootNoteNodeConfigProvider>('AffineFootNoteNodeConfig');

export function FootNoteNodeConfigExtension(
  config: FootNoteNodeConfig
): ExtensionType {
  return {
    setup: di => {
      di.addImpl(
        FootNoteNodeConfigIdentifier,
        provider =>
          new FootNoteNodeConfigProvider(config, provider.get(StdIdentifier))
      );
    },
  };
}
```

The footnote node can be extended by this extension.

### FootnoteInlineSpec

```
export const FootNoteInlineSpecExtension = InlineSpecExtension(
  'footnote',
  provider => {
    const std = provider.get(StdIdentifier);
    const config =
      provider.getOptional(FootNoteNodeConfigIdentifier) ?? undefined;
    return {
      name: 'footnote',
      schema: FootNoteSchema.optional().nullable().catch(undefined),
      match: delta => {
        return !!delta.attributes?.footnote;
      },
      renderer: ({ delta }) => {
        return html`<affine-footnote-node
          .delta=${delta}
          .std=${std}
          .config=${config}
        ></affine-footnote-node>`;
      },
      embed: true,
    };
  }
);
```
2025-01-17 09:38:43 +00:00
CatsJuice
7d1d167858 chore: bump theme (#9732) 2025-01-17 09:22:15 +00:00
fundon
7e5e6031e8 chore(editor): update default colors of shape (#9633)
Closes: [PD-2176](https://linear.app/affine-design/issue/PD-2176/edgeless-shape默认颜色调整)

* updates shape's text color to the `#000000ff` and custom button should be selected by default in color picker
* updates shape background default color palette to `medium`

<img width="727" alt="Screenshot 2025-01-13 at 11 07 14" src="https://github.com/user-attachments/assets/81962741-0dbc-4990-8eec-db5e48624305" />
<img width="444" alt="Screenshot 2025-01-13 at 11 07 09" src="https://github.com/user-attachments/assets/2d119e33-635e-4bd4-826f-e3094c8a3fa2" />

<img width="764" alt="Screenshot 2025-01-13 at 11 08 14" src="https://github.com/user-attachments/assets/09f5c778-0e25-4972-8529-8d8323c27594" />
2025-01-13 10:19:58 +00:00
Brooooooklyn
e72371d15c style: use typescript resolver for eslint import plugin (#9662) 2025-01-13 05:56:29 +00:00
forehalo
c0ed74dfed chore: standardize tsconfig (#9568) 2025-01-08 04:07:56 +00:00
L-Sun
440239809c refactor(editor): refactor page note empty checker (#9570)
Close [BS-2320](https://linear.app/affine-design/issue/BS-2320/内容为空的状态判断)
2025-01-07 11:24:40 +00:00
Saul-Mirone
c22804766d chore(editor): remove common utils in surface block (#9527) 2025-01-06 02:41:39 +00:00
Saul-Mirone
c773982ced refactor(editor): rename store api (#9518) 2025-01-04 12:51:56 +00:00
Saul-Mirone
8b6c81f76d refactor(editor): reduce dependency to doc collection (#9492) 2025-01-03 01:59:25 +00:00
fundon
d97c4b5632 fix(editor): wrong style of mindmap in dark mode (#9462)
<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/87aa060a-12c3-46dc-85fd-28980ba5b2bd.mov">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/87aa060a-12c3-46dc-85fd-28980ba5b2bd.mov">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/8ypiIKZXudF5a0tIgIzf/87aa060a-12c3-46dc-85fd-28980ba5b2bd.mov">Screen Recording 2024-12-31 at 18.05.36.mov</video>
2024-12-31 11:54:13 +00:00
Saul-Mirone
0f03c3fc5e fix(editor): missing resource files in exported snapshot zip (#9450)
Closes: [BS-2280](https://linear.app/affine-design/issue/BS-2280/导出-zip-snapshot-丢失-blob)
2024-12-31 05:13:44 +00:00
Saul-Mirone
397a48380e refactor(editor): simplify tsconfig (#9439) 2024-12-30 16:15:34 +00:00
Saul-Mirone
a9f890017e fix(editor): missing dependencies (#9436) 2024-12-30 14:10:37 +00:00
fundon
580e3eb13c chore(editor): use colors from default theme instead (#9425) 2024-12-30 09:41:00 +00:00
fundon
b9f2650369 feat(editor): store real color values in edgeless (#9254)
### What's Changed!

* adds theme type: `ThemeSchema`
* adds default theme: `DefaultTheme`
* stores real color values
2024-12-30 03:36:35 +00:00
fundon
a5641ae608 feat(editor): update edgeless color palette (#9243)
Closes: [BS-1475](https://linear.app/affine-design/issue/BS-1475/颜色主题更新) [BS-1803](https://linear.app/affine-design/issue/BS-1803/fill-color色板影响的yuan素) [BS-1804](https://linear.app/affine-design/issue/BS-1804/border-color色板影响的yuan素) [BS-1815](https://linear.app/affine-design/issue/BS-1815/连线文字配色略瞎)

### What's Changed

* refactor `EdgelessLineWidthPanel` component, the previous width is fixed and cannot be used in the new design
* refactor `EdgelessColorPanel` and `EdgelessColorButton` components, make them simple and reusable
* delete redundant `EdgelessOneRowColorPanel` component
* unity and update color palette, if the previously set color is not in the latest color palette, the custom color button will be selected
2024-12-30 03:36:34 +00:00
forehalo
12542f51f9 chore: bump base version to 0.19.0 2024-12-28 00:27:50 +08:00
Saul-Mirone
2b27d62b0e refactor(editor): cleanup ts-expect-error (#9369) 2024-12-27 05:14:23 +00:00
doodlewind
9a29ac4a5c fix(editor): sentry-332848caa68e4679b403d56881e3c0e3 (#9343) 2024-12-26 10:26:31 +00:00
doodlewind
9b3a2fc0de fix(editor): sentry-624432d8f1e6420ca9c5023a051f4332 (#9342)
Close https://toeverything.sentry.io/issues/6091618868/?project=4506307500179456
2024-12-26 09:59:06 +00:00
Saul-Mirone
90173b2fa3 chore(editor): remove typedoc json (#9324) 2024-12-26 05:13:41 +00:00
donteatfriedrice
338835a4aa fix(editor): limit max width when uploading or pasting image into edgeless (#9273)
[BS-2180](https://linear.app/affine-design/issue/BS-2180/白板中粘贴图片,限定一下最大宽度)
2024-12-24 06:28:59 +00:00