a46bb446e2
fix(editor): should keep color on custom color button ( #11773 )
...
Closes: [BS-3167](https://linear.app/affine-design/issue/BS-3167/自定义按钮显示错误 )
2025-04-17 12:21:39 +00:00
afdc40b510
feat(editor): add shortcut to highlighter tool ( #11604 )
...
Closes: [BS-3092](https://linear.app/affine-design/issue/BS-3092/highlighter-快捷键 )
### What's Changed!
* Added shortcut `⇧ P` to highlighter tool
[Screen Recording 2025-04-10 at 16.33.30.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/38aadc08-ed18-4b48-9d91-b4876d14a2d3.mov " />](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/38aadc08-ed18-4b48-9d91-b4876d14a2d3.mov )
2025-04-11 13:08:59 +00:00
bcd1cd2629
fix(editor): the switch button style set in the TOC does not effect ( #11622 )
...
Co-authored-by: Chen <99816898+donteatfriedrice@users.noreply.github.com >
2025-04-11 11:22:24 +08:00
c57f41805f
fix(editor): should auto close dropdown menus on toolbar ( #11522 )
...
Closes: [BS-2524](https://linear.app/affine-design/issue/BS-2524/切换-block-后，刷新-toolbar-时，应该自动关闭已经打开的-dropdown )
2025-04-09 01:29:44 +00:00
238ec59dd2
fix(editor): image icon color ( #11536 )
...
Closes: BS-2166
2025-04-08 09:18:26 +00:00
eb0bcd9b99
fix(editor): improve menu content UX on toolbar ( #11491 )
...
* Added scrollbar style
* Used `padding` instead of `offset`
2025-04-07 06:30:07 +00:00
f2646796fc
refactor(editor): remove unused modal ( #11428 )
2025-04-03 04:21:20 +00:00
03dd073cb4
fix(editor): add recent open doc with mode button ( #11419 )
...
Closes: [BS-3013](https://linear.app/affine-design/issue/BS-3013/open-doc-分开两个按钮：一个快捷按钮和一个菜单 )
Split into two buttons: `recent open doc with mode button` and `open doc with dropdown menu`.
2025-04-03 02:06:14 +00:00
b53b2acfe3
fix(ios): mobile modal occlusion issues ( #11427 )
...
Close [BS-2925](https://linear.app/affine-design/issue/BS-2925/移动端-dialog-遮挡相关 )
2025-04-03 01:51:57 +00:00
2026f12daa
fix(editor): improve color preview in custom tab of color picker ( #11411 )
...
Closes: [BS-3002](https://linear.app/affine-design/issue/BS-3002/color-picker-上-lightdark-按钮颜色丢失 )
[Screen Recording 2025-04-02 at 17.19.34.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/13288c59-ef11-4cbb-aec7-934a8a689feb.mov " />](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/13288c59-ef11-4cbb-aec7-934a8a689feb.mov )
2025-04-03 01:38:27 +00:00
fde97dcf78
fix(editor): improve some experiences on note toolbar ( #11413 )
...
Closes: [BS-3004](https://linear.app/affine-design/issue/BS-3004/page-block-ui-adjust )
2025-04-02 13:11:33 +00:00
7f98420061
chore: allow cursor in none-contenteditable blocks ( #11366 )
2025-04-01 13:20:08 +00:00
f374f2695f
fix(core): add shortcuts to open doc dropdown menu ( #11358 )
...
Closes: [BS-2992](https://linear.app/affine-design/issue/BS-2992/走查toolbar上的open-in-button )
[Screen Recording 2025-04-01 at 16.37.57.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/cf4b1baf-aa2c-4f37-9c62-f7202d0f7c42.mov " />](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/cf4b1baf-aa2c-4f37-9c62-f7202d0f7c42.mov )
2025-04-01 12:39:13 +00:00
eac8f32f4c
refactor(editor): basic styles of font and panel ( #11290 )
...
* Updated `border-radius` of panel to `8px`. [BS-2901](https://linear.app/affine-design/issue/BS-2901/meta-info-ui-issue ) [BS-2810](https://linear.app/affine-design/issue/BS-2810/toolbarpicker-圆角更新为-8px )
* Refactored basic styles of font and panel.
<img width="549" alt="Screenshot 2025-03-31 at 12 56 36" src="https://github.com/user-attachments/assets/4a827e1e-f802-4251-a563-4a34b891a5e3 " />
2025-04-01 01:35:59 +00:00
51dddc10be
fix: template panel tooltip overflow ( #11304 )
...
Close #10171
Fixes [BS-2577](https://linear.app/affine-design/issue/BS-2577/title-overflow-in-edgeless-mode-in-web-interface )
2025-03-31 09:51:33 +00:00
205cd7a86d
refactor(editor): rename block-std to std ( #11250 )
...
Closes: BS-2946
2025-03-28 07:20:34 +00:00
e2c752d56f
feat(editor): inner toolbar layout for block ( #11243 )
...
Close [BS-2808](https://linear.app/affine-design/issue/BS-2808/组件内-toolbar-重构 )
2025-03-28 03:47:37 +00:00
2c4278058b
feat(editor): add highlighter ( #10573 )
...
Closes: [BS-2909](https://linear.app/affine-design/issue/BS-2909/新增highlighter )
### What's Changed!
Currently the highlighter tool is very similar to brush, but for the future, it's a standalone module.
* Added `Highlighter` element model
* Added `Highlighter` tool
* Added `Highlighter` entry to the global toolbar
2025-03-27 08:53:26 +00:00
91876301bf
refactor(editor): adjust min-width of context-menu ( #11078 )
...
fix: BS-2686
2025-03-26 07:48:17 +00:00
a2e3d318ba
refactor(editor): adjust ui of surface-ref inner toolbar ( #11129 )
...
Close [BS-2803](https://linear.app/affine-design/issue/BS-2803/inserted-frame-ui%E8%B0%83%E6%95%B4 )
Close [BS-2815](https://linear.app/affine-design/issue/BS-2815/inserted-group-ui调整 )
### What Changes
- Add an inner toolbar for hovered `surface-ref-block`
- Simplify viewport related codes of `surface-ref-block`
- Expose popover floating options from `affine-menu-button`
https://github.com/user-attachments/assets/916b0a22-6271-4a6f-b338-6630e0426967
2025-03-25 03:48:12 +00:00
63762b75a1
feat(core): save recent open mode of internal links ( #11086 )
...
Closes: [BS-2865](https://linear.app/affine-design/issue/BS-2865/internal-links-保存用户最近的打开方式 )
Added `openDocMode` in settings.
https://github.com/user-attachments/assets/a452da73-83e4-4ef5-9b57-58291fc22785
2025-03-24 06:12:47 +00:00
dd2e423112
fix(editor): add placeholder for input of database context menu ( #11079 )
...
fix: BS-2594
2025-03-21 12:27:18 +00:00
27a8afa33f
chore(editor): remove redundant line styles components ( #10980 )
...
* Moved `edgeless-line-styles-panel` and `edgeless-line-width-panel` into components pkg
2025-03-20 09:48:02 +00:00
da63d51b7e
refactor(editor): group and expose parameters of createButtonPopper ( #10999 )
2025-03-20 08:37:59 +00:00
8b995ea420
chore(editor): remove edgeless element toolbar ( #10900 )
2025-03-20 02:08:21 +00:00
831f290f84
refactor(editor): edgeless toolbar chevron down icon ( #10898 )
2025-03-20 02:08:20 +00:00
a7acd5c5b1
refactor(editor): fix edgeless toolbar theme ( #10897 )
2025-03-20 02:08:20 +00:00
e4b8b367ce
refactor(editor): edgeless toolbar add frame action ( #10880 )
2025-03-20 02:08:17 +00:00
54bc60aa4d
refactor(editor): edgeless shape toolbar config extension ( #10821 )
2025-03-20 02:08:16 +00:00
7f34667b78
refactor(editor): edgeless connector toolbar config extension ( #10798 )
2025-03-19 14:50:55 +00:00
e320552594
refactor(editor): edgeless note toolbar config extension ( #10719 )
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
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
cb37d25d7b
refactor(editor): edgeless element toolbar with new pattern ( #10511 )
2025-03-18 15:36:25 +00:00
d5a5df5e49
test(editor): move blocksuite test to tests folder ( #10917 )
2025-03-17 06:40:25 +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
b238aa3182
fix(editor): clamp method in color picker ( #10840 )
...
Related to https://github.com/toeverything/AFFiNE/pull/10577
2025-03-13 19:37:37 +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
cd63e0ed8b
feat(editor): replace slot with rxjs subject ( #10768 )
2025-03-12 11:29:24 +09:00
006bdd29b8
fix(editor): clip content within menu ( #10764 )
...
Closes: [BS-2796](https://linear.app/affine-design/issue/BS-2796/menu-中内容被剪切的问题 )
2025-03-11 12:39:59 +00:00
aa690e6c91
refactor(editor): move color panel into color picker ( #10758 )
2025-03-11 09:37:09 +00:00
6244bbbd11
refactor(editor): move getTooltipWithShortcut to affine-tooltip-content-with-shortcut ( #10743 )
...
I'm refactoring the edgeless note toolbar config extension and find that I need to move this.
https://github.com/toeverything/AFFiNE/blob/cac05e720aae491681f69883c34691da24675073/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-note-button.ts#L525
2025-03-10 11:58:58 +00:00
fe5f0f62ec
feat(editor): rich text package ( #10689 )
...
This PR performs a significant architectural refactoring by extracting rich text functionality into a dedicated package. Here are the key changes:
1. **New Package Creation**
- Created a new package `@blocksuite/affine-rich-text` to house rich text related functionality
- Moved rich text components, utilities, and types from `@blocksuite/affine-components` to this new package
2. **Dependency Updates**
- Updated multiple block packages to include the new `@blocksuite/affine-rich-text` as a direct dependency:
- block-callout
- block-code
- block-database
- block-edgeless-text
- block-embed
- block-list
- block-note
- block-paragraph
3. **Import Path Updates**
- Refactored all imports that previously referenced rich text functionality from `@blocksuite/affine-components/rich-text` to now use `@blocksuite/affine-rich-text`
- Updated imports for components like:
- DefaultInlineManagerExtension
- RichText types and interfaces
- Text manipulation utilities (focusTextModel, textKeymap, etc.)
- Reference node components and providers
4. **Build Configuration Updates**
- Added references to the new rich text package in the `tsconfig.json` files of all affected packages
- Maintained workspace dependencies using the `workspace:*` version specifier
The primary motivation appears to be:
1. Better separation of concerns by isolating rich text functionality
2. Improved maintainability through more modular package structure
3. Clearer dependencies between packages
4. Potential for better tree-shaking and bundle optimization
This is primarily an architectural improvement that should make the codebase more maintainable and better organized.
2025-03-07 04:08:47 +00:00
2e86bfffae
feat(editor): life cycle ext ( #10668 )
2025-03-06 12:28:55 +00:00
84e2dda3f8
refactor(editor): separate lit and slot in global ( #10666 )
2025-03-06 10:24:59 +00:00
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
2b30d756e2
refactor(editor): replace debounce and throttle with lodash ( #10639 )
2025-03-06 04:46:52 +00:00
bd62634a76
feat(editor): add callout block ( #10563 )
...
- Add `CalloutBlockModel `
- Implement `CalloutBlockComponent `
- Integrate with slash menu (/)
2025-03-05 09:28:51 +00:00
b8ecfbdae6
refactor(editor): remove assertExists ( #10615 )
2025-03-05 00:13:08 +00:00
fundon
