Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-17 01:56:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): extract edgeless text (#9375)

Browse Source
This commit is contained in:
Saul-Mirone
2024-12-27 10:48:12 +00:00
parent 5c4058cd73
commit 80dc0e8271
20 changed files with 165 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/block-edgeless-text/package.json
+43
View File
@@ -0,0 +1,43 @@
{
"name": "@blocksuite/affine-block-edgeless-text",
"description": "Edgeless text block for BlockSuite.",
"type": "module",
"scripts": {
"build": "tsc",
"test:unit": "nx vite:test --run --passWithNoTests",
"test:unit:coverage": "nx vite:test --run --coverage",
"test:e2e": "playwright test"
},
"sideEffects": false,
"keywords": [],
"author": "toeverything",
"license": "MIT",
"dependencies": {
"@blocksuite/affine-block-surface": "workspace:*",
"@blocksuite/affine-components": "workspace:*",
"@blocksuite/affine-model": "workspace:*",
"@blocksuite/affine-shared": "workspace:*",
"@blocksuite/block-std": "workspace:*",
"@blocksuite/global": "workspace:*",
"@blocksuite/icons": "^2.1.75",
"@blocksuite/inline": "workspace:*",
"@blocksuite/store": "workspace:*",
"@floating-ui/dom": "^1.6.10",
"@lit/context": "^1.1.2",
"@preact/signals-core": "^1.8.0",
"@toeverything/theme": "^1.1.1",
"lit": "^3.2.0",
"minimatch": "^10.0.1",
"zod": "^3.23.8"
},
"exports": {
".": "./src/index.ts",
"./effects": "./src/effects.ts"
},
"files": [
"src",
"dist",
"!src/__tests__",
"!dist/__tests__"
]
}
blocksuite/blocks/src/edgeless-text-block/commands/index.ts → blocksuite/affine/block-edgeless-text/src/commands/index.ts
View File
blocksuite/blocks/src/edgeless-text-block/commands/insert-edgeless-text.ts → blocksuite/affine/block-edgeless-text/src/commands/insert-edgeless-text.ts
View File
blocksuite/blocks/src/edgeless-text-block/edgeless-text-block.ts → blocksuite/affine/block-edgeless-text/src/edgeless-text-block.ts
+16 -22
View File
@@ -9,8 +9,6 @@ import { css, html } from 'lit';
import { query, state } from 'lit/decorators.js';
import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
import type { EdgelessRootService } from '../root-block/index.js';
export const EDGELESS_TEXT_BLOCK_MIN_WIDTH = 50;
export const EDGELESS_TEXT_BLOCK_MIN_HEIGHT = 50;
@@ -43,10 +41,6 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
this._updateH();
});
get rootService() {
return this.std.getService('affine:page') as EdgelessRootService;
}
private _updateH() {
const bound = Bound.deserialize(this.model.xywh);
const rect = this._textContainer.getBoundingClientRect();
@@ -92,35 +86,35 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
this.model.propsUpdated.on(({ key }) => {
this.updateComplete
.then(() => {
if (!this.host) return;
const command = this.host.command;
const blockSelections = this.model.children.map(child =>
this.host.selection.create('block', {
blockId: child.id,
})
);
const command = this.std.command;
const blockSelections = this.model.children.map(
child =>
this.std.selection.create('block', {
blockId: child.id,
})
// FIXME: BS-2216
) as never;
if (key === 'fontStyle') {
command.exec('formatBlock', {
blockSelections,
styles: {
italic: null,
},
} as never,
});
} else if (key === 'color') {
command.exec('formatBlock', {
blockSelections,
styles: {
color: null,
},
} as never,
});
} else if (key === 'fontWeight') {
command.exec('formatBlock', {
blockSelections,
styles: {
bold: null,
},
} as never,
});
}
})
@@ -132,8 +126,8 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
override firstUpdated(props: Map<string, unknown>) {
super.firstUpdated(props);
const { disposables, rootService } = this;
const edgelessSelection = rootService.selection;
const { disposables, std } = this;
const edgelessSelection = this.gfx.selection;
disposables.add(
edgelessSelection.slots.updated.on(() => {
@@ -185,8 +179,8 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
}
if (newParagraphId) {
this.rootService.selectionManager.setGroup('note', [
this.rootService.selectionManager.create('text', {
std.selection.setGroup('note', [
std.selection.create('text', {
from: {
blockId: newParagraphId,
index: 0,
@@ -201,7 +195,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
disposables.addFromEvent(this._textContainer, 'focusout', () => {
if (!this._editing) return;
this.rootService.selectionManager.clear();
this.std.selection.clear();
});
let composingWidth = EDGELESS_TEXT_BLOCK_MIN_WIDTH;
blocksuite/blocks/src/edgeless-text-block/edgeless-text-spec.ts → blocksuite/affine/block-edgeless-text/src/edgeless-text-spec.ts
View File
blocksuite/affine/block-edgeless-text/src/effects.ts
+17
View File
@@ -0,0 +1,17 @@
import type { insertEdgelessTextCommand } from './commands/insert-edgeless-text';
import { EdgelessTextBlockComponent } from './edgeless-text-block';
export function effects() {
customElements.define('affine-edgeless-text', EdgelessTextBlockComponent);
}
declare global {
namespace BlockSuite {
interface CommandContext {
textId?: string;
}
interface Commands {
insertEdgelessText: typeof insertEdgelessTextCommand;
}
}
}
blocksuite/blocks/src/edgeless-text-block/index.ts → blocksuite/affine/block-edgeless-text/src/index.ts
View File
blocksuite/affine/block-edgeless-text/tsconfig.json
+35
View File
@@ -0,0 +1,35 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src/",
"outDir": "./dist/",
"noEmit": false
},
"include": ["./src"],
"references": [
{
"path": "../../framework/global"
},
{
"path": "../../framework/store"
},
{
"path": "../../framework/block-std"
},
{
"path": "../../framework/inline"
},
{
"path": "../model"
},
{
"path": "../components"
},
{
"path": "../shared"
},
{
"path": "../block-surface"
}
]
}
blocksuite/blocks/package.json
+1
View File
@@ -16,6 +16,7 @@
"dependencies": {
"@blocksuite/affine-block-attachment": "workspace:*",
"@blocksuite/affine-block-bookmark": "workspace:*",
"@blocksuite/affine-block-edgeless-text": "workspace:*",
"@blocksuite/affine-block-embed": "workspace:*",
"@blocksuite/affine-block-frame": "workspace:*",
"@blocksuite/affine-block-image": "workspace:*",
blocksuite/blocks/src/_specs/group/edgeless.ts
+1 -1
View File
@@ -1,8 +1,8 @@
import { EdgelessTextBlockSpec } from '@blocksuite/affine-block-edgeless-text';
import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
import { LatexBlockSpec } from '@blocksuite/affine-block-latex';
import { EdgelessSurfaceBlockSpec } from '@blocksuite/affine-block-surface';
import { EdgelessTextBlockSpec } from '../../edgeless-text-block/index.js';
import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
import { EdgelessSurfaceRefBlockSpec } from '../../surface-ref-block/surface-ref-spec.js';
blocksuite/blocks/src/_specs/preset/edgeless-specs.ts
+1 -1
View File
@@ -1,3 +1,4 @@
import { EdgelessTextBlockSpec } from '@blocksuite/affine-block-edgeless-text';
import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
import { LatexBlockSpec } from '@blocksuite/affine-block-latex';
import {
@@ -7,7 +8,6 @@ import {
import { FontLoaderService } from '@blocksuite/affine-shared/services';
import type { ExtensionType } from '@blocksuite/block-std';
import { EdgelessTextBlockSpec } from '../../edgeless-text-block/edgeless-text-spec.js';
import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
import {
EdgelessFrameManager,
blocksuite/blocks/src/_specs/preset/preview-specs.ts
+1 -1
View File
@@ -1,3 +1,4 @@
import { EdgelessTextBlockSpec } from '@blocksuite/affine-block-edgeless-text';
import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
import { LatexBlockSpec } from '@blocksuite/affine-block-latex';
import {
@@ -19,7 +20,6 @@ import {
} from '@blocksuite/block-std';
import { literal } from 'lit/static-html.js';
import { EdgelessTextBlockSpec } from '../../edgeless-text-block/index.js';
import { PreviewEdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
import { PageRootService } from '../../root-block/page/page-root-service.js';
import {
blocksuite/blocks/src/effects.ts
+2 -7
View File
@@ -1,5 +1,6 @@
import { effects as blockAttachmentEffects } from '@blocksuite/affine-block-attachment/effects';
import { effects as blockBookmarkEffects } from '@blocksuite/affine-block-bookmark/effects';
import { effects as blockEdgelessTextEffects } from '@blocksuite/affine-block-edgeless-text/effects';
import { effects as blockEmbedEffects } from '@blocksuite/affine-block-embed/effects';
import { effects as blockFrameEffects } from '@blocksuite/affine-block-frame/effects';
import { effects as blockImageEffects } from '@blocksuite/affine-block-image/effects';
@@ -64,8 +65,6 @@ import {
HeaderAreaTextCellEditing,
} from './database-block/properties/title/text.js';
import { DividerBlockComponent } from './divider-block/index.js';
import type { insertEdgelessTextCommand } from './edgeless-text-block/commands/insert-edgeless-text.js';
import { EdgelessTextBlockComponent } from './edgeless-text-block/index.js';
import { EdgelessAutoCompletePanel } from './root-block/edgeless/components/auto-complete/auto-complete-panel.js';
import { EdgelessAutoComplete } from './root-block/edgeless/components/auto-complete/edgeless-auto-complete.js';
import { EdgelessToolIconButton } from './root-block/edgeless/components/buttons/tool-icon-button.js';
@@ -260,6 +259,7 @@ export function effects() {
blockDatabaseEffects();
blockSurfaceRefEffects();
blockLatexEffects();
blockEdgelessTextEffects();
componentCaptionEffects();
componentContextMenuEffects();
@@ -293,7 +293,6 @@ export function effects() {
'affine-database-rich-text-cell-editing',
RichTextCellEditing
);
customElements.define('affine-edgeless-text', EdgelessTextBlockComponent);
customElements.define('center-peek', CenterPeek);
customElements.define('database-datasource-note-renderer', NoteRenderer);
customElements.define('database-datasource-block-renderer', BlockRenderer);
@@ -528,14 +527,10 @@ export function effects() {
declare global {
namespace BlockSuite {
interface Commands {
insertEdgelessText: typeof insertEdgelessTextCommand;
}
interface CommandContext {
focusBlock?: BlockComponent | null;
anchorBlock?: BlockComponent | null;
updatedBlocks?: BlockModel[];
textId?: string;
}
interface BlockConfigs {
'affine:code': CodeBlockConfig;
blocksuite/blocks/src/index.ts
+1 -1
View File
@@ -20,7 +20,6 @@ export * from './code-block/index.js';
export * from './data-view-block/index.js';
export * from './database-block/index.js';
export * from './divider-block/index.js';
export * from './edgeless-text-block/index.js';
export { EdgelessTemplatePanel } from './root-block/edgeless/components/toolbar/template/template-panel.js';
export type {
Template,
@@ -46,6 +45,7 @@ export {
export * from './surface-ref-block/index.js';
export * from '@blocksuite/affine-block-attachment';
export * from '@blocksuite/affine-block-bookmark';
export * from '@blocksuite/affine-block-edgeless-text';
export * from '@blocksuite/affine-block-embed';
export * from '@blocksuite/affine-block-frame';
export * from '@blocksuite/affine-block-image';
blocksuite/blocks/src/root-block/edgeless/components/rects/edgeless-selected-rect.ts
+2 -2
View File
@@ -1,3 +1,5 @@
import type { EdgelessTextBlockComponent } from '@blocksuite/affine-block-edgeless-text';
import { EDGELESS_TEXT_BLOCK_MIN_WIDTH } from '@blocksuite/affine-block-edgeless-text';
import {
EMBED_HTML_MIN_HEIGHT,
EMBED_HTML_MIN_WIDTH,
@@ -59,8 +61,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { isMindmapNode } from '../../../../_common/edgeless/mindmap/index.js';
import type { EdgelessTextBlockComponent } from '../../../../edgeless-text-block/edgeless-text-block.js';
import { EDGELESS_TEXT_BLOCK_MIN_WIDTH } from '../../../../edgeless-text-block/edgeless-text-block.js';
import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
import type {
EdgelessFrameManager,
blocksuite/blocks/src/root-block/edgeless/edgeless-keyboard.ts
+1 -1
View File
@@ -1,3 +1,4 @@
import { EdgelessTextBlockComponent } from '@blocksuite/affine-block-edgeless-text';
import {
ConnectorElementModel,
ConnectorMode,
@@ -27,7 +28,6 @@ import {
isSingleMindMapNode,
} from '../../_common/edgeless/mindmap/index.js';
import { LassoMode } from '../../_common/types.js';
import { EdgelessTextBlockComponent } from '../../edgeless-text-block/edgeless-text-block.js';
import { PageKeyboardManager } from '../keyboard/keyboard-manager.js';
import { GfxBlockModel } from './block-model.js';
import type { EdgelessRootBlockComponent } from './edgeless-root-block.js';
blocksuite/blocks/tsconfig.json
+3
View File
@@ -55,6 +55,9 @@
{
"path": "../affine/block-image"
},
{
"path": "../affine/block-edgeless-text"
},
{
"path": "../affine/data-view"
},
tools/utils/src/workspace.gen.ts
+16
View File
@@ -42,6 +42,20 @@ export const PackageList = [
'blocksuite/framework/store',
],
},
{
location: 'blocksuite/affine/block-edgeless-text',
name: '@blocksuite/affine-block-edgeless-text',
workspaceDependencies: [
'blocksuite/affine/block-surface',
'blocksuite/affine/components',
'blocksuite/affine/model',
'blocksuite/affine/shared',
'blocksuite/framework/block-std',
'blocksuite/framework/global',
'blocksuite/framework/inline',
'blocksuite/framework/store',
],
},
{
location: 'blocksuite/affine/block-embed',
name: '@blocksuite/affine-block-embed',
@@ -210,6 +224,7 @@ export const PackageList = [
workspaceDependencies: [
'blocksuite/affine/block-attachment',
'blocksuite/affine/block-bookmark',
'blocksuite/affine/block-edgeless-text',
'blocksuite/affine/block-embed',
'blocksuite/affine/block-frame',
'blocksuite/affine/block-image',
@@ -555,6 +570,7 @@ export type PackageName =
| '@blocksuite/affine'
| '@blocksuite/affine-block-attachment'
| '@blocksuite/affine-block-bookmark'
| '@blocksuite/affine-block-edgeless-text'
| '@blocksuite/affine-block-embed'
| '@blocksuite/affine-block-frame'
| '@blocksuite/affine-block-image'
tsconfig.project.json
+1
View File
@@ -9,6 +9,7 @@
{ "path": "./blocksuite/affine/all" },
{ "path": "./blocksuite/affine/block-attachment" },
{ "path": "./blocksuite/affine/block-bookmark" },
{ "path": "./blocksuite/affine/block-edgeless-text" },
{ "path": "./blocksuite/affine/block-embed" },
{ "path": "./blocksuite/affine/block-frame" },
{ "path": "./blocksuite/affine/block-image" },
yarn.lock
+24
View File
@@ -3289,6 +3289,29 @@ __metadata:
languageName: unknown
linkType: soft
"@blocksuite/affine-block-edgeless-text@workspace:*, @blocksuite/affine-block-edgeless-text@workspace:blocksuite/affine/block-edgeless-text":
version: 0.0.0-use.local
resolution: "@blocksuite/affine-block-edgeless-text@workspace:blocksuite/affine/block-edgeless-text"
dependencies:
"@blocksuite/affine-block-surface": "workspace:*"
"@blocksuite/affine-components": "workspace:*"
"@blocksuite/affine-model": "workspace:*"
"@blocksuite/affine-shared": "workspace:*"
"@blocksuite/block-std": "workspace:*"
"@blocksuite/global": "workspace:*"
"@blocksuite/icons": "npm:^2.1.75"
"@blocksuite/inline": "workspace:*"
"@blocksuite/store": "workspace:*"
"@floating-ui/dom": "npm:^1.6.10"
"@lit/context": "npm:^1.1.2"
"@preact/signals-core": "npm:^1.8.0"
"@toeverything/theme": "npm:^1.1.1"
lit: "npm:^3.2.0"
minimatch: "npm:^10.0.1"
zod: "npm:^3.23.8"
languageName: unknown
linkType: soft
"@blocksuite/affine-block-embed@workspace:*, @blocksuite/affine-block-embed@workspace:blocksuite/affine/block-embed":
version: 0.0.0-use.local
resolution: "@blocksuite/affine-block-embed@workspace:blocksuite/affine/block-embed"
@@ -3600,6 +3623,7 @@ __metadata:
dependencies:
"@blocksuite/affine-block-attachment": "workspace:*"
"@blocksuite/affine-block-bookmark": "workspace:*"
"@blocksuite/affine-block-edgeless-text": "workspace:*"
"@blocksuite/affine-block-embed": "workspace:*"
"@blocksuite/affine-block-frame": "workspace:*"
"@blocksuite/affine-block-image": "workspace:*"