1c8d25bc29
feat: add ElementTransformManager for edgeless element basic manipulation ( #10824 )
...
### Overview:
We've been working with some legacy code in the default-tool and edgeless-selected-rect modules, which are responsible for fundamental operations like moving, resizing, and rotating elements. Currently, these operations are hardcoded, making it challenging to extend functionalities without diving deep into the code.
### What's Changing:
Introducing `ElementTransformManager` to streamline the handling of basic transformations (move, resize, rotate) while allowing the business logic to dictate when these actions occur.
Providing two ways to extend the transformations behaviour:
- Extends inside element view definition: Elements can decide how to handle move/resize events, such as enforcing size constraints.
- Extension mechanism provided by this manager: Adjust or completely override default drag behaviors, like snapping elements into alignment.
### Code Examples:
Delegate element movement to TransformManager:
```typescript
class DefaultTool {
override dragStart(event) {
if(this.dragType === DragType.ContentMoving) {
const transformManager = this.std.get(TransformManagerIdentifier);
transformManager.startDrag({ selectedElements, event });
}
}
}
```
Enforce minimum width inside view definition:
```typescript
class EdgelessNoteBlock extends GfxBlockComponent {
onResizeDelta({ dw, dh }) {
const bound = this.model.elementBound;
bound.w = Math.min(MAX_WIDTH, bound.w + dw);
bound.h = Math.min(MAX_HEIGHT, bound.h + dh);
this.model.xywh = bound.serialize();
}
}
```
Use extension to implement element snapping:
```typescript
import { TransformerExtension } from '@blocksuite/std/gfx';
// Just extends the TransformerExtension
class SnapManager extends TransformerExtension {
static override key = 'snap-manager';
onDragInitialize() {
return {
onDragMove(context) {
const { dx, dy } = this.getAlignmentMoveDistance(context.elements);
context.dx = dx;
context.dy = dy;
}
}
}
}
```
### Others
The migration will be divided into several PRs. This PR mostly focus on refactoring elements movement part of `default-tool`.
- Delegate elements movement to `TransformManager`
- Rewrite the default tool extension into `TransformManager` extension
- Add drag handler interface to gfx view (both `GfxBlockComponent` and `GfxElementModelView`) to allow element to define how it gonna react on drag
2025-03-19 15:30:06 +00:00
c98f0900cc
refactor(editor): edgeless mindmap toolbar config extension ( #10803 )
2025-03-19 14:50:55 +00:00
7f34667b78
refactor(editor): edgeless connector toolbar config extension ( #10798 )
2025-03-19 14:50:55 +00:00
f6e32d8894
feat(editor): add embed iframe provider miro ( #10996 )
2025-03-19 13:57:30 +00:00
ee65d66d67
refactor(editor): remove code block service ( #11010 )
2025-03-19 13:38:10 +00:00
c1e16aeaa7
refactor(editor): remove paragraph service ( #11003 )
2025-03-19 13:38:09 +00:00
03ffc688c3
refactor(editor): edgeless brush toolbar config extension ( #10796 )
2025-03-19 12:34:19 +00:00
c44a339bd9
refactor(editor): edgeless group toolbar config extension ( #10787 )
2025-03-19 12:34:19 +00:00
f87cc0f599
refactor(editor): edgeless frame toolbar config extension ( #10769 )
2025-03-19 12:34:18 +00:00
e320552594
refactor(editor): edgeless note toolbar config extension ( #10719 )
2025-03-19 12:34:18 +00:00
b5406fa57a
refactor(editor): edgeless image toolbar config extension ( #10718 )
2025-03-19 12:34:18 +00:00
e686a6aecc
refactor(editor): edgeless internal embed card toolbar config extension ( #10717 )
2025-03-19 12:34:17 +00:00
9211fbf68c
refactor(editor): move surface-ref toolbar to its block folder ( #10938 )
2025-03-19 10:54:22 +00:00
0442430971
refactor(editor): edgeless html embed card toolbar config extension ( #10716 )
2025-03-19 05:03:00 +00:00
7f4b56e05c
refactor(editor): edgeless external embed card toolbar config extension ( #10712 )
2025-03-19 04:05:36 +00:00
68bc2db560
fix(editor): descendant elements are missing in edgelessToCanvas ( #10933 )
...
### Before
### After
2025-03-19 03:35:06 +00:00
a118cbd036
fix(editor): chat panel text render link preview base url ( #10791 )
...
fix AF-2322
2025-03-19 03:19:09 +00:00
3a2d386275
feat(editor): support add embed iframe block in mobile ( #10955 )
...
To close [BS-2664](https://linear.app/affine-design/issue/BS-2664/iframe-embed-block-移动端支持 )
2025-03-19 02:58:51 +00:00
d8567e669a
refactor(editor): edgeless bookmark toolbar config extension ( #10711 )
2025-03-19 02:24:26 +00:00
251d1d8782
refactor(editor): edgeless attacment toolbar config extension ( #10710 )
2025-03-19 00:52:22 +00:00
3cce147c60
refactor(editor): improve query methods in toolbar context ( #10714 )
2025-03-19 00:52:22 +00:00
02d707feab
fix(editor): adapt font size in turbo renderer ( #10858 )
2025-03-18 19:01:48 +00:00
cb37d25d7b
refactor(editor): edgeless element toolbar with new pattern ( #10511 )
2025-03-18 15:36:25 +00:00
3939cc1c52
feat(editor): support file column and member column for database block ( #10932 )
...
close: BS-2630, BS-2631, BS-2629, BS-2632, BS-2635
2025-03-18 14:51:45 +00:00
321e3449ec
fix(editor): block can be null in widget ( #10959 )
...
Closes: [BS-2826](https://linear.app/affine-design/issue/BS-2826/typeerror-thisblock-is-null )
2025-03-18 10:58:19 +00:00
ef00a158fc
docs(editor): improve documentation for store class ( #10949 )
2025-03-18 07:57:58 +00:00
83af78d9ee
chore(editor): update icon color of link doc card ( #10943 )
...
Close [BS-2679](https://linear.app/affine-design/issue/BS-2679/card-view-icon-color-incorrect )
2025-03-18 05:00:26 +00:00
9f3cf271e3
feat(editor): support user provided role and role schema ( #10939 )
...
Let me analyze the key changes in this diff:
1. **Role System Changes**:
- Changed from a fixed enum of roles (`root`, `hub`, `content`) to a more flexible string-based system
- Removed strict role hierarchy validation rules (hub/content/root relationships)
- Added support for role-based matching using `@` prefix (e.g., `@root`, `@content`)
2. **Schema Validation Updates**:
- Added new `_matchFlavourOrRole` method to handle both flavour and role-based matching
- Updated `_validateParent` to consider both roles and flavours when validating parent-child relationships
- Simplified `_validateRole` by removing specific role hierarchy constraints
3. **Block Schema Changes**:
- Updated parent/children references in various block schemas to use the new `@` prefix notation
- Changed parent definitions from `['affine:page']` to `['@root']` in several blocks
- Updated children definitions to use role-based references (e.g., `['@content']`)
4. **Test Updates**:
- Added new test cases for role-based schema validation
- Introduced new test block schemas (`TestRoleBlockSchema`, `TestParagraphBlockSchema`) to verify role-based functionality
This appears to be a significant architectural change that makes the block schema system more flexible by:
1. Moving away from hardcoded role hierarchies
2. Introducing a more dynamic role-based relationship system
3. Supporting both flavour-based and role-based parent-child relationships
4. Using the `@` prefix convention to distinguish role references from flavour references
The changes make the system more extensible while maintaining backward compatibility with existing flavour-based relationships.
2025-03-18 01:58:59 +00:00
3de7d85eea
feat(editor): improve api for store, and add docs ( #10941 )
2025-03-17 16:30:59 +00:00
3dbeebd6ba
fix(editor): background of surface-ref disappeared when it was re-rendered ( #10931 )
...
This PR fixed the background of surface-ref dis
2025-03-17 14:00:17 +00:00
cc8ec72f2c
feat(editor): insert a mindmap slash menu action ( #10930 )
...
Close [BS-2516](https://linear.app/affine-design/issue/BS-2516/添加mind-map入口 )
2025-03-17 13:19:56 +00:00
d80f1e8067
feat(editor): insert a blank frame slash menu action ( #10899 )
...
Close [BS-2517](https://linear.app/affine-design/issue/BS-2517/%E6%B7%BB%E5%8A%A0frame%E5%85%A5%E5%8F%A3 )
### What changes:
- add a insert blank frame action to slash menu
- move `EdgelessFrameManager` and `FrameOverlay` extensions to `FrameBlockSpec`
- make `FrameBlockSpec` as a part of `CommonBlockSpecs` such that we can use `EdgelessFrameManager` to create a frame more easily
https://github.com/user-attachments/assets/ddff5866-8933-4ce5-aaf4-873661407ee4
2025-03-17 10:32:55 +00:00
6eb34d70c1
feat(editor): support bookmark block convert to embed iframe block ( #10907 )
2025-03-17 05:00:55 +00:00
7e6ff8d9c6
chore(editor): remove unused npm scripts ( #10895 )
2025-03-16 17:48:49 +00:00
d7d512084e
feat(editor): embed iframe error status card in surface ( #10869 )
...
To close [BS-2806](https://linear.app/affine-design/issue/BS-2806/iframe-embed-block-edgeless-loading-and-error-status )
2025-03-16 09:05:04 +00:00
7ecb1f510d
feat(editor): embed iframe loading status card in surface ( #10868 )
2025-03-16 09:05:04 +00:00
26285f7dcb
feat(editor): unify block props api ( #10888 )
...
Closes: [BS-2707](https://linear.app/affine-design/issue/BS-2707/统一使用props获取和更新block-prop )
2025-03-16 05:48:34 +00:00
8f9e5bf0aa
fix(editor): minor ui bugs ( #10841 )
...
Co-authored-by: Mirone <Saul-Mirone@outlook.com >
2025-03-15 19:15:56 +09:00
1d4ee1e383
feat(editor): support embed iframe block in edgeless ( #10830 )
...
To close:
[BS-2665](https://linear.app/affine-design/issue/BS-2665/iframe-embed-block-edgeless-mode-支持 )
[BS-2666](https://linear.app/affine-design/issue/BS-2666/iframe-embed-block-edgeless-toolbar )
[BS-2667](https://linear.app/affine-design/issue/BS-2667/iframe-embed-block-edgeless-mode-拖拽调整支持 )
[BS-2789](https://linear.app/affine-design/issue/BS-2789/iframe-embed-block-edgeless-block-component )
2025-03-15 09:23:02 +00:00
99fdfe821a
fix(editor): improve type declaration definition ( #10866 )
...
Closes: [BS-2809](https://linear.app/affine-design/issue/BS-2809/改进继承自抽象类的类型后-createidentifier-类型定义 )
### What's Changed!
* Improved type declaration definition
2025-03-14 10:38:17 +00:00
d8dfea6ccf
fix(editor): type import in vite worker env ( #10856 )
...
The dependencies of `@blocksuite/affine-gfx-turbo-renderer` in work is now all type imports.
2025-03-14 10:22:58 +00:00
b8452f56a8
feat(editor): block painter extension ( #10847 )
2025-03-14 05:26:58 +00:00
be9f44fc4f
fix(editor): worker loading in webpack env ( #10832 )
...
### TL;DR
Created dedicated worker entry points to avoid dynamic imports.
### What changed?
- Painters are provided during worker initialization
- Removed `ParagraphPaintConfigExtension` and the associated configuration system
- Created dedicated worker entry points in both the integration test and frontend packages
- Modified `ViewportLayoutPainter` to accept painters in its constructor
- Updated the `TurboRendererConfig` interface to require a `painterWorkerEntry` function
### Why make this change?
Webpack support. Extension objects in main thread are not available to be passed into workers. Dynamic painter path import is hard to support in webpack environment. With the [webpack-ignore](https://webpack.js.org/api/module-methods/#webpackignore ) rule, there are still build errors in webpack.
2025-03-14 05:26:57 +00:00
05f3069efd
feat(editor): add i18n support for block meta display ( #10831 )
2025-03-13 11:28:56 +00:00
8ac687628c
chore(editor): at menu stays open when left right arrow keys are pressed ( #10806 )
...
Close [BS-2644](https://linear.app/affine-design/issue/BS-2644/menu-support )
2025-03-13 06:14:35 +00:00
c023b724d0
refactor(editor): generic layout type support for turbo renderer ( #10766 )
...
This PR refactored the turbo renderer architecture to support multiple block layout types.
- New base class `BlockLayoutPainter` and `BlockLayoutProvider` are introduced for writing extendable per-block layout querying and painting logic.
- Paragraph-specific lines are all moved into dedicated classes (`ParagraphLayoutProvider` and `ParagraphLayoutPainter`) under the `/variants/paragraph` dir.
- The `renderer-utils.ts` doesn't contain paragraph-specific logic now.
- The `text-utils.ts` is also now scoped for paragraph only.
- Worker messages are now strongly typed.
Upcoming PR should further implement the block registration system using extension API. The `variants` dir could still exist, since there will be similar rendering logic that can be reused among block types (i.e., between paragraph block and list block).
2025-03-13 05:18:12 +00:00
d2c62602a4
feat(editor): support embed iframe block ( #10740 )
...
To close:
[BS-2660](https://linear.app/affine-design/issue/BS-2660/slash-menu-支持-iframe-embed )
[BS-2661](https://linear.app/affine-design/issue/BS-2661/iframe-embed-block-model-and-block-component )
[BS-2662](https://linear.app/affine-design/issue/BS-2662/iframe-embed-block-toolbar )
[BS-2768](https://linear.app/affine-design/issue/BS-2768/iframe-embed-block-loading-和-error-态 )
[BS-2670](https://linear.app/affine-design/issue/BS-2670/iframe-embed-block-导出 )
# PR Description
# Add Embed Iframe Block Support
## Overview
This PR introduces a new `EmbedIframeBlock` to enhance content embedding capabilities within our editor. This block allows users to seamlessly embed external content from various providers (Google Drive, Spotify, etc.) directly into their docs.
## New Blocks
### EmbedIframeBlock
The core block that renders embedded iframe content. This block:
* Displays external content within a secure iframe
* Handles loading states with visual feedback
* Provides error handling with edit and retry options
* Supports customization of width, height, and other iframe attributes
### Supporting Components
* **EmbedIframeCreateModal**: Modal interface for creating new iframe embeds
* **EmbedIframeLinkEditPopup**: UI for editing existing embed links
* **EmbedIframeLoadingCard**: Visual feedback during content loading
* **EmbedIframeErrorCard**: Error handling with retry functionality
## New Store Extensions
### EmbedIframeConfigExtension
This extension provides configuration for different embed providers:
```typescript
/**
* The options for the iframe
* @example
* {
* defaultWidth: '100%',
* defaultHeight: '152px',
* style: 'border-radius: 8px;',
* allow: 'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
* }
* =>
* <iframe
* width="100%"
* height="152px"
* style="border-radius: 8px;"
* allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
* ></iframe>
*/
export type IframeOptions = {
defaultWidth?: string;
defaultHeight?: string;
style?: string;
referrerpolicy?: string;
scrolling?: boolean;
allow?: string;
allowFullscreen?: boolean;
};
/**
* Define the config of an embed iframe block provider
*/
export type EmbedIframeConfig = {
/**
* The name of the embed iframe block provider
*/
name: string;
/**
* The function to match the url
*/
match: (url: string) => boolean;
/**
* The function to build the oEmbed URL for fetching embed data
*/
buildOEmbedUrl: (url: string) => string | undefined;
/**
* Use oEmbed URL directly as iframe src without fetching oEmbed data
*/
useOEmbedUrlDirectly: boolean;
/**
* The options for the iframe
*/
options?: IframeOptions;
};
export const EmbedIframeConfigIdentifier =
createIdentifier<EmbedIframeConfig>('EmbedIframeConfig');
export function EmbedIframeConfigExtension(
config: EmbedIframeConfig
): ExtensionType & {
identifier: ServiceIdentifier<EmbedIframeConfig>;
} {
const identifier = EmbedIframeConfigIdentifier(config.name);
return {
setup: di => {
di.addImpl(identifier, () => config);
},
identifier,
};
}
```
**example:**
```typescript
// blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/providers/spotify.ts
const SPOTIFY_DEFAULT_WIDTH = '100%';
const SPOTIFY_DEFAULT_HEIGHT = '152px';
// https://developer.spotify.com/documentation/embeds/reference/oembed
const spotifyEndpoint = 'https://open.spotify.com/oembed ';
const spotifyUrlValidationOptions: EmbedIframeUrlValidationOptions = {
protocols: ['https:'],
hostnames: ['open.spotify.com', 'spotify.link'],
};
const spotifyConfig = {
name: 'spotify',
match: (url: string) =>
validateEmbedIframeUrl(url, spotifyUrlValidationOptions),
buildOEmbedUrl: (url: string) => {
const match = validateEmbedIframeUrl(url, spotifyUrlValidationOptions);
if (!match) {
return undefined;
}
const encodedUrl = encodeURIComponent(url);
const oEmbedUrl = `${spotifyEndpoint}?url=${encodedUrl}`;
return oEmbedUrl;
},
useOEmbedUrlDirectly: false,
options: {
defaultWidth: SPOTIFY_DEFAULT_WIDTH,
defaultHeight: SPOTIFY_DEFAULT_HEIGHT,
allow:
'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
style: 'border-radius: 12px;',
allowFullscreen: true,
},
};
// add the config extension to store
export const SpotifyEmbedConfig = EmbedIframeConfigExtension(spotifyConfig);
```
**Key features:**
* Provider registration and discovery
* URL pattern matching
* Provider-specific embed options (width, height, features)
### EmbedIframeService
This service provides abilities to handle URL validation, data fetching, and block creation
**Type:**
```typescript
/**
* Service for handling embeddable URLs
*/
export interface EmbedIframeProvider {
/**
* Check if a URL can be embedded
* @param url URL to check
* @returns true if the URL can be embedded, false otherwise
*/
canEmbed: (url: string) => boolean;
/**
* Build a API URL for fetching embed data
* @param url URL to build API URL
* @returns API URL if the URL can be embedded, undefined otherwise
*/
buildOEmbedUrl: (url: string) => string | undefined;
/**
* Get the embed iframe config
* @param url URL to get embed iframe config
* @returns Embed iframe config if the URL can be embedded, undefined otherwise
*/
getConfig: (url: string) => EmbedIframeConfig | undefined;
/**
* Get embed iframe data
* @param url URL to get embed iframe data
* @returns Embed iframe data if the URL can be embedded, undefined otherwise
*/
getEmbedIframeData: (url: string) => Promise<EmbedIframeData | null>;
/**
* Parse an embeddable URL and add an EmbedIframeBlock to doc
* @param url Original url to embed
* @param parentId Parent block ID
* @param index Optional index to insert at
* @returns Created block id if successful, undefined if the URL cannot be embedded
*/
addEmbedIframeBlock: (
props: Partial<EmbedIframeBlockProps>,
parentId: string,
index?: number
) => string | undefined;
}
```
**Implemetation:**
```typescript
export class EmbedIframeService
extends StoreExtension
implements EmbedIframeProvider
{
static override key = 'embed-iframe-service';
private readonly _configs: EmbedIframeConfig[];
constructor(store: Store) {
super(store);
this._configs = Array.from(
store.provider.getAll(EmbedIframeConfigIdentifier).values()
);
}
canEmbed = (url: string): boolean => {
return this._configs.some(config => config.match(url));
};
buildOEmbedUrl = (url: string): string | undefined => {
return this._configs.find(config => config.match(url))?.buildOEmbedUrl(url);
};
getConfig = (url: string): EmbedIframeConfig | undefined => {
return this._configs.find(config => config.match(url));
};
getEmbedIframeData = async (
url: string,
signal?: AbortSignal
): Promise<EmbedIframeData | null> => {
try {
const config = this._configs.find(config => config.match(url));
if (!config) {
return null;
}
const oEmbedUrl = config.buildOEmbedUrl(url);
if (!oEmbedUrl) {
return null;
}
// if the config useOEmbedUrlDirectly is true, return the url directly as iframe_url
if (config.useOEmbedUrlDirectly) {
return {
iframe_url: oEmbedUrl,
};
}
// otherwise, fetch the oEmbed data
const response = await fetch(oEmbedUrl, { signal });
if (!response.ok) {
console.warn(
`Failed to fetch oEmbed data: ${response.status} ${response.statusText}`
);
return null;
}
const data = await response.json();
return data as EmbedIframeData;
} catch (error) {
if (error instanceof Error && error.name !== 'AbortError') {
console.error('Error fetching embed iframe data:', error);
}
return null;
}
};
addEmbedIframeBlock = (
props: Partial<EmbedIframeBlockProps>,
parentId: string,
index?: number
): string | undefined => {
const blockId = this.store.addBlock(
'affine:embed-iframe',
props,
parentId,
index
);
return blockId;
};
}
```
**Usage:**
```typescript
// Usage example
const embedIframeService = this.std.get(EmbedIframeService);
// Check if a URL can be embedded
const canEmbed = embedIframeService.canEmbed(url);
// Get embed data for a URL
const embedData = await embedIframeService.getEmbedIframeData(url);
// Add an embed iframe block to the document
const block = embedIframeService.addEmbedIframeBlock({
url,
iframeUrl: embedData.iframe_url,
title: embedData.title,
description: embedData.description
}, parentId, index);
```
**Key features:**
* URL validation and transformation
* Provider-specific data fetching
* Block creation and management
## Adaptations
### Toolbar Integration
Added toolbar actions for embedded content:
* Copy link
* Edit embed title and description
* Toggle between inline/card views
* Add caption
* And more
### Slash Menu Integration
Added a new slash menu option for embedding content:
* Embed item for inserting embed iframe block
* Conditional rendering based on feature flags
### Adapters
Implemented adapters for various formats:
* **HTML Adapter**: Exports embed original urls as html links
* **Markdown Adapter**: Exports embed original urls as markdown links
* **Plain Text Adapter**: Exports embed original urls as link text
## To Be Continued:
- [ ] **UI Optimization**
- [ ] **Edgeless Mode Support**
- [ ] **Mobile Support**
2025-03-13 04:11:46 +00:00
98a3cf8516
feat(core): update blocksuite icons ( #10805 )
2025-03-13 03:55:55 +00:00
01151ec18f
refactor(editor): add runtime type checks to database cell values ( #10770 )
2025-03-12 09:22:41 +00:00
d823792f85
refactor(editor): simplify color picker ( #10776 )
...
### What's Changed!
* Added `enableCustomColor` property into `EdgelessColorPickerButton` component
* Removed redundant code
2025-03-12 05:17:04 +00:00
doouding
