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

blocksuite/affine/block-edgeless-text/package.json

@@ -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/affine/block-edgeless-text/src/edgeless-text-block.ts

@@ -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.std.command;
-
+            const blockSelections = this.model.children.map(
-            const command = this.host.command;
+              child =>
-            const blockSelections = this.model.children.map(child =>
+                this.std.selection.create('block', {
-              this.host.selection.create('block', {
+                  blockId: child.id,
-                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 { disposables, std } = this;
-    const edgelessSelection = rootService.selection;
+    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', [
+        std.selection.setGroup('note', [
-          this.rootService.selectionManager.create('text', {
+          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/affine/block-edgeless-text/src/effects.ts

@@ -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/affine/block-edgeless-text/tsconfig.json

@@ -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

@@ -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,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,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,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

@@ -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

@@ -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

@@ -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,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

@@ -55,6 +55,9 @@
     {
       "path": "../affine/block-image"
     },
+    {
+      "path": "../affine/block-edgeless-text"
+    },
     {
       "path": "../affine/data-view"
     },

tools/utils/src/workspace.gen.ts

@@ -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

@@ -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

@@ -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:*"