refactor(editor): extract bookmark block (#9304)

blocksuite/affine/block-bookmark/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@blocksuite/affine-block-bookmark",
+  "description": "Bookmark 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-embed": "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-bookmark/src/bookmark-block.ts

@@ -9,10 +9,11 @@ import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
-import { BOOKMARK_MIN_WIDTH } from '../root-block/edgeless/utils/consts.js';
 import type { BookmarkBlockService } from './bookmark-service.js';
 import { refreshBookmarkUrlData } from './utils.js';
 
+export const BOOKMARK_MIN_WIDTH = 450;
+
 export class BookmarkBlockComponent extends CaptionedBlockComponent<
   BookmarkBlockModel,
   BookmarkBlockService

blocksuite/affine/block-bookmark/src/commands/insert-bookmark.ts

@@ -1,3 +1,5 @@
+import '@blocksuite/affine-block-embed/effects';
+
 import { insertEmbedCard } from '@blocksuite/affine-block-embed';
 import type { EmbedCardStyle } from '@blocksuite/affine-model';
 import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';

blocksuite/affine/block-bookmark/src/effects.ts

@@ -0,0 +1,25 @@
+import { BookmarkBlockComponent } from './bookmark-block';
+import { BookmarkEdgelessBlockComponent } from './bookmark-edgeless-block';
+import type { BookmarkBlockService } from './bookmark-service';
+import type { insertBookmarkCommand } from './commands/insert-bookmark';
+import { BookmarkCard } from './components/bookmark-card';
+
+export function effects() {
+  customElements.define(
+    'affine-edgeless-bookmark',
+    BookmarkEdgelessBlockComponent
+  );
+  customElements.define('affine-bookmark', BookmarkBlockComponent);
+  customElements.define('bookmark-card', BookmarkCard);
+}
+
+declare global {
+  namespace BlockSuite {
+    interface Commands {
+      insertBookmark: typeof insertBookmarkCommand;
+    }
+    interface BlockServices {
+      'affine:bookmark': BookmarkBlockService;
+    }
+  }
+}

blocksuite/affine/block-bookmark/src/index.ts

@@ -0,0 +1,4 @@
+export * from './adapters';
+export * from './bookmark-block';
+export * from './bookmark-service';
+export * from './bookmark-spec';

blocksuite/affine/block-bookmark/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-embed"
+    }
+  ]
+}

blocksuite/affine/block-embed/typedoc.json

@@ -1,4 +0,0 @@
-{
-  "extends": ["../../../typedoc.base.json"],
-  "entryPoints": ["src/index.ts"]
-}

blocksuite/blocks/package.json

@@ -14,6 +14,7 @@
   "author": "toeverything",
   "license": "MIT",
   "dependencies": {
+    "@blocksuite/affine-block-bookmark": "workspace:*",
     "@blocksuite/affine-block-embed": "workspace:*",
     "@blocksuite/affine-block-list": "workspace:*",
     "@blocksuite/affine-block-paragraph": "workspace:*",

blocksuite/blocks/src/_common/adapters/html/block-matcher.ts

@@ -1,3 +1,4 @@
+import { BookmarkBlockHtmlAdapterExtension } from '@blocksuite/affine-block-bookmark';
 import {
   EmbedFigmaBlockHtmlAdapterExtension,
   EmbedGithubBlockHtmlAdapterExtension,
@@ -9,7 +10,6 @@ import {
 import { ListBlockHtmlAdapterExtension } from '@blocksuite/affine-block-list';
 import { ParagraphBlockHtmlAdapterExtension } from '@blocksuite/affine-block-paragraph';
 
-import { BookmarkBlockHtmlAdapterExtension } from '../../../bookmark-block/adapters/html.js';
 import { CodeBlockHtmlAdapterExtension } from '../../../code-block/adapters/html.js';
 import { DatabaseBlockHtmlAdapterExtension } from '../../../database-block/adapters/html.js';
 import { DividerBlockHtmlAdapterExtension } from '../../../divider-block/adapters/html.js';

blocksuite/blocks/src/_common/adapters/markdown/block-matcher.ts

@@ -1,3 +1,4 @@
+import { bookmarkBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-bookmark';
 import {
   embedFigmaBlockMarkdownAdapterMatcher,
   embedGithubBlockMarkdownAdapterMatcher,
@@ -9,7 +10,6 @@ import {
 import { listBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-list';
 import { paragraphBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-paragraph';
 
-import { bookmarkBlockMarkdownAdapterMatcher } from '../../../bookmark-block/adapters/markdown.js';
 import { codeBlockMarkdownAdapterMatcher } from '../../../code-block/adapters/markdown.js';
 import { databaseBlockMarkdownAdapterMatcher } from '../../../database-block/adapters/markdown.js';
 import { dividerBlockMarkdownAdapterMatcher } from '../../../divider-block/adapters/markdown.js';

blocksuite/blocks/src/_common/adapters/notion-html/block-matcher.ts

@@ -1,3 +1,4 @@
+import { bookmarkBlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-block-bookmark';
 import {
   embedFigmaBlockNotionHtmlAdapterMatcher,
   embedGithubBlockNotionHtmlAdapterMatcher,
@@ -9,7 +10,6 @@ import { paragraphBlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-block
 import type { BlockNotionHtmlAdapterMatcher } from '@blocksuite/affine-shared/adapters';
 
 import { attachmentBlockNotionHtmlAdapterMatcher } from '../../../attachment-block/adapters/notion-html.js';
-import { bookmarkBlockNotionHtmlAdapterMatcher } from '../../../bookmark-block/adapters/notion-html.js';
 import { codeBlockNotionHtmlAdapterMatcher } from '../../../code-block/adapters/notion-html.js';
 import { databaseBlockNotionHtmlAdapterMatcher } from '../../../database-block/adapters/notion-html.js';
 import { dividerBlockNotionHtmlAdapterMatcher } from '../../../divider-block/adapters/notion-html.js';

blocksuite/blocks/src/_common/adapters/plain-text/block-matcher.ts

@@ -1,3 +1,4 @@
+import { bookmarkBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-bookmark';
 import {
   embedFigmaBlockPlainTextAdapterMatcher,
   embedGithubBlockPlainTextAdapterMatcher,
@@ -10,7 +11,6 @@ import { listBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-list'
 import { paragraphBlockPlainTextAdapterMatcher } from '@blocksuite/affine-block-paragraph';
 import type { BlockPlainTextAdapterMatcher } from '@blocksuite/affine-shared/adapters';
 
-import { bookmarkBlockPlainTextAdapterMatcher } from '../../../bookmark-block/adapters/plain-text.js';
 import { codeBlockPlainTextAdapterMatcher } from '../../../code-block/adapters/plain-text.js';
 import { databaseBlockPlainTextAdapterMatcher } from '../../../database-block/adapters/plain-text.js';
 import { dividerBlockPlainTextAdapterMatcher } from '../../../divider-block/adapters/plain-text.js';

blocksuite/blocks/src/_common/components/embed-card/type.ts

@@ -1,3 +1,4 @@
+import { BookmarkBlockComponent } from '@blocksuite/affine-block-bookmark';
 import {
   EmbedFigmaBlockComponent,
   EmbedGithubBlockComponent,
@@ -21,8 +22,6 @@ import {
 } from '@blocksuite/affine-model';
 import type { BlockComponent } from '@blocksuite/block-std';
 
-import { BookmarkBlockComponent } from '../../../bookmark-block/bookmark-block.js';
-
 export type ExternalEmbedBlockComponent =
   | BookmarkBlockComponent
   | EmbedFigmaBlockComponent

blocksuite/blocks/src/_specs/common.ts

@@ -1,3 +1,4 @@
+import { BookmarkBlockSpec } from '@blocksuite/affine-block-bookmark';
 import { EmbedExtensions } from '@blocksuite/affine-block-embed';
 import { ListBlockSpec } from '@blocksuite/affine-block-list';
 import { ParagraphBlockSpec } from '@blocksuite/affine-block-paragraph';
@@ -7,7 +8,6 @@ import type { ExtensionType } from '@blocksuite/block-std';
 
 import { AdapterFactoryExtensions } from '../_common/adapters/extension.js';
 import { AttachmentBlockSpec } from '../attachment-block/attachment-spec.js';
-import { BookmarkBlockSpec } from '../bookmark-block/bookmark-spec.js';
 import { CodeBlockSpec } from '../code-block/code-block-spec.js';
 import { DataViewBlockSpec } from '../data-view-block/data-view-spec.js';
 import { DatabaseBlockSpec } from '../database-block/database-spec.js';

blocksuite/blocks/src/_specs/group/common.ts

@@ -1,3 +1,4 @@
+import { BookmarkBlockSpec } from '@blocksuite/affine-block-bookmark';
 import {
   EmbedFigmaBlockSpec,
   EmbedGithubBlockSpec,
@@ -11,7 +12,6 @@ import { ListBlockSpec } from '@blocksuite/affine-block-list';
 import { ParagraphBlockSpec } from '@blocksuite/affine-block-paragraph';
 
 import { AttachmentBlockSpec } from '../../attachment-block/attachment-spec.js';
-import { BookmarkBlockSpec } from '../../bookmark-block/bookmark-spec.js';
 import { CodeBlockSpec } from '../../code-block/code-block-spec.js';
 import { DataViewBlockSpec } from '../../data-view-block/data-view-spec.js';
 import { DatabaseBlockSpec } from '../../database-block/database-spec.js';

blocksuite/blocks/src/bookmark-block/index.ts

@@ -1,3 +0,0 @@
-export * from './adapters/index.js';
-export * from './bookmark-block.js';
-export * from './bookmark-service.js';

blocksuite/blocks/src/effects.ts

@@ -1,3 +1,4 @@
+import { effects as blockBookmarkEffects } from '@blocksuite/affine-block-bookmark/effects';
 import { effects as blockEmbedEffects } from '@blocksuite/affine-block-embed/effects';
 import { effects as blockListEffects } from '@blocksuite/affine-block-list/effects';
 import { effects as blockParagraphEffects } from '@blocksuite/affine-block-paragraph/effects';
@@ -33,13 +34,6 @@ import {
   AttachmentBlockComponent,
   type AttachmentBlockService,
 } from './attachment-block/index.js';
-import { BookmarkEdgelessBlockComponent } from './bookmark-block/bookmark-edgeless-block.js';
-import type { insertBookmarkCommand } from './bookmark-block/commands/insert-bookmark.js';
-import { BookmarkCard } from './bookmark-block/components/bookmark-card.js';
-import {
-  BookmarkBlockComponent,
-  type BookmarkBlockService,
-} from './bookmark-block/index.js';
 import { AffineCodeUnit } from './code-block/highlight/affine-code-unit.js';
 import {
   CodeBlockComponent,
@@ -281,6 +275,7 @@ export function effects() {
   stdEffects();
   inlineEffects();
 
+  blockBookmarkEffects();
   blockListEffects();
   blockParagraphEffects();
   blockEmbedEffects();
@@ -309,15 +304,10 @@ export function effects() {
   widgetCodeToolbarEffects();
 
   customElements.define('affine-database-title', DatabaseTitle);
-  customElements.define(
-    'affine-edgeless-bookmark',
-    BookmarkEdgelessBlockComponent
-  );
   customElements.define('affine-image', ImageBlockComponent);
   customElements.define('data-view-header-area-icon', IconCell);
   customElements.define('affine-database-link-cell', LinkCell);
   customElements.define('affine-database-link-cell-editing', LinkCellEditing);
-  customElements.define('affine-bookmark', BookmarkBlockComponent);
   customElements.define('affine-edgeless-image', ImageEdgelessBlockComponent);
   customElements.define('data-view-header-area-text', HeaderAreaTextCell);
   customElements.define(
@@ -497,7 +487,6 @@ export function effects() {
   customElements.define('note-display-mode-panel', NoteDisplayModePanel);
   customElements.define('edgeless-toolbar-button', EdgelessToolbarButton);
   customElements.define('frame-preview', FramePreview);
-  customElements.define('bookmark-card', BookmarkCard);
   customElements.define('presentation-toolbar', PresentationToolbar);
   customElements.define('edgeless-shape-menu', EdgelessShapeMenu);
   customElements.define('stroke-style-panel', StrokeStylePanel);
@@ -588,7 +577,6 @@ declare global {
       dedentBlocksToRoot: typeof dedentBlocksToRoot;
       dedentBlocks: typeof dedentBlocks;
       indentBlock: typeof indentBlock;
-      insertBookmark: typeof insertBookmarkCommand;
       updateBlockType: typeof updateBlockType;
       insertEdgelessText: typeof insertEdgelessTextCommand;
       dedentBlockToRoot: typeof dedentBlockToRoot;
@@ -607,7 +595,6 @@ declare global {
       'affine:note': NoteBlockService;
       'affine:page': RootService;
       'affine:attachment': AttachmentBlockService;
-      'affine:bookmark': BookmarkBlockService;
       'affine:database': DatabaseBlockService;
       'affine:image': ImageBlockService;
     }

blocksuite/blocks/src/index.ts

@@ -17,7 +17,6 @@ export * from './_common/transformers/index.js';
 export { type AbstractEditor } from './_common/types.js';
 export * from './_specs/index.js';
 export * from './attachment-block/index.js';
-export * from './bookmark-block/index.js';
 export * from './code-block/index.js';
 export * from './data-view-block/index.js';
 export * from './database-block/index.js';
@@ -50,6 +49,7 @@ export {
   MiniMindmapPreview,
 } from './surface-block/mini-mindmap/index.js';
 export * from './surface-ref-block/index.js';
+export * from '@blocksuite/affine-block-bookmark';
 export * from '@blocksuite/affine-block-embed';
 export * from '@blocksuite/affine-block-list';
 export * from '@blocksuite/affine-block-paragraph';

blocksuite/blocks/src/root-block/edgeless/utils/consts.ts

@@ -6,8 +6,6 @@ import {
   StrokeStyle,
 } from '@blocksuite/affine-model';
 
-export const BOOKMARK_MIN_WIDTH = 450;
-
 export const DEFAULT_NOTE_OFFSET_X = 30;
 export const DEFAULT_NOTE_OFFSET_Y = 40;
 export const NOTE_OVERLAY_OFFSET_X = 6;

blocksuite/blocks/src/root-block/widgets/element-toolbar/more-menu/config.ts

@@ -1,3 +1,4 @@
+import type { BookmarkBlockComponent } from '@blocksuite/affine-block-bookmark';
 import type {
   EmbedFigmaBlockComponent,
   EmbedGithubBlockComponent,
@@ -31,7 +32,6 @@ import {
   promptDocTitle,
 } from '../../../../_common/utils/render-linked-doc.js';
 import type { AttachmentBlockComponent } from '../../../../attachment-block/attachment-block.js';
-import type { BookmarkBlockComponent } from '../../../../bookmark-block/bookmark-block.js';
 import type { ImageBlockComponent } from '../../../../image-block/image-block.js';
 import { duplicate } from '../../../edgeless/utils/clipboard-utils.js';
 import { getSortedCloneElements } from '../../../edgeless/utils/clone-utils.js';

blocksuite/blocks/tsconfig.json

@@ -37,6 +37,9 @@
     {
       "path": "../affine/block-embed"
     },
+    {
+      "path": "../affine/block-bookmark"
+    },
     {
       "path": "../affine/data-view"
     },

tools/utils/src/workspace.gen.ts

@@ -13,6 +13,20 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/block-bookmark',
+    name: '@blocksuite/affine-block-bookmark',
+    workspaceDependencies: [
+      'blocksuite/affine/block-embed',
+      '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',
@@ -124,6 +138,7 @@ export const PackageList = [
     location: 'blocksuite/blocks',
     name: '@blocksuite/blocks',
     workspaceDependencies: [
+      'blocksuite/affine/block-bookmark',
       'blocksuite/affine/block-embed',
       'blocksuite/affine/block-list',
       'blocksuite/affine/block-paragraph',
@@ -300,6 +315,7 @@ export const PackageList = [
       'packages/frontend/core',
       'packages/frontend/i18n',
       'blocksuite/affine/all',
+      'packages/common/infra',
     ],
   },
   {
@@ -456,6 +472,7 @@ export const PackageList = [
 
 export type PackageName =
   | '@blocksuite/affine'
+  | '@blocksuite/affine-block-bookmark'
   | '@blocksuite/affine-block-embed'
   | '@blocksuite/affine-block-list'
   | '@blocksuite/affine-block-paragraph'

yarn.lock

@@ -3224,6 +3224,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@blocksuite/affine-block-bookmark@workspace:*, @blocksuite/affine-block-bookmark@workspace:blocksuite/affine/block-bookmark":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-block-bookmark@workspace:blocksuite/affine/block-bookmark"
+  dependencies:
+    "@blocksuite/affine-block-embed": "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"
@@ -3435,6 +3458,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@blocksuite/blocks@workspace:blocksuite/blocks"
   dependencies:
+    "@blocksuite/affine-block-bookmark": "workspace:*"
     "@blocksuite/affine-block-embed": "workspace:*"
     "@blocksuite/affine-block-list": "workspace:*"
     "@blocksuite/affine-block-paragraph": "workspace:*"