refactor(editor): extract divider block (#9393)

blocksuite/affine/block-divider/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@blocksuite/affine-block-divider",
+  "description": "Divider 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-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@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",
+    "@types/mdast": "^4.0.4",
+    "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-divider/src/effects.ts

@@ -0,0 +1,5 @@
+import { DividerBlockComponent } from './divider-block';
+
+export function effects() {
+  customElements.define('affine-divider', DividerBlockComponent);
+}

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

@@ -0,0 +1,3 @@
+export * from './adapters';
+export * from './divider-block';
+export * from './divider-spec';

blocksuite/affine/block-divider/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "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"
+    }
+  ]
+}

blocksuite/blocks/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@blocksuite/affine-block-attachment": "workspace:*",
     "@blocksuite/affine-block-bookmark": "workspace:*",
+    "@blocksuite/affine-block-divider": "workspace:*",
     "@blocksuite/affine-block-edgeless-text": "workspace:*",
     "@blocksuite/affine-block-embed": "workspace:*",
     "@blocksuite/affine-block-frame": "workspace:*",

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

@@ -1,4 +1,5 @@
 import { BookmarkBlockHtmlAdapterExtension } from '@blocksuite/affine-block-bookmark';
+import { DividerBlockHtmlAdapterExtension } from '@blocksuite/affine-block-divider';
 import {
   EmbedFigmaBlockHtmlAdapterExtension,
   EmbedGithubBlockHtmlAdapterExtension,
@@ -13,7 +14,6 @@ import { ParagraphBlockHtmlAdapterExtension } from '@blocksuite/affine-block-par
 
 import { CodeBlockHtmlAdapterExtension } from '../../../code-block/adapters/html.js';
 import { DatabaseBlockHtmlAdapterExtension } from '../../../database-block/adapters/html.js';
-import { DividerBlockHtmlAdapterExtension } from '../../../divider-block/adapters/html.js';
 import { RootBlockHtmlAdapterExtension } from '../../../root-block/adapters/html.js';
 
 export const defaultBlockHtmlAdapterMatchers = [

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

@@ -1,4 +1,5 @@
 import { bookmarkBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-bookmark';
+import { dividerBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-divider';
 import {
   embedFigmaBlockMarkdownAdapterMatcher,
   embedGithubBlockMarkdownAdapterMatcher,
@@ -14,7 +15,6 @@ import { paragraphBlockMarkdownAdapterMatcher } from '@blocksuite/affine-block-p
 
 import { codeBlockMarkdownAdapterMatcher } from '../../../code-block/adapters/markdown.js';
 import { databaseBlockMarkdownAdapterMatcher } from '../../../database-block/adapters/markdown.js';
-import { dividerBlockMarkdownAdapterMatcher } from '../../../divider-block/adapters/markdown.js';
 import { rootBlockMarkdownAdapterMatcher } from '../../../root-block/adapters/markdown.js';
 
 export const defaultBlockMarkdownAdapterMatchers = [

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

@@ -1,5 +1,6 @@
 import { AttachmentBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-attachment';
 import { BookmarkBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-bookmark';
+import { DividerBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-divider';
 import {
   EmbedFigmaBlockNotionHtmlAdapterExtension,
   EmbedGithubBlockNotionHtmlAdapterExtension,
@@ -14,7 +15,6 @@ import type { ExtensionType } from '@blocksuite/block-std';
 
 import { CodeBlockNotionHtmlAdapterExtension } from '../../../code-block/adapters/notion-html.js';
 import { DatabaseBlockNotionHtmlAdapterExtension } from '../../../database-block/adapters/notion-html.js';
-import { DividerBlockNotionHtmlAdapterExtension } from '../../../divider-block/adapters/notion-html.js';
 import { RootBlockNotionHtmlAdapterExtension } from '../../../root-block/adapters/notion-html.js';
 
 export const defaultBlockNotionHtmlAdapterMatchers: ExtensionType[] = [

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

@@ -1,4 +1,5 @@
 import { BookmarkBlockPlainTextAdapterExtension } from '@blocksuite/affine-block-bookmark';
+import { DividerBlockPlainTextAdapterExtension } from '@blocksuite/affine-block-divider';
 import {
   EmbedFigmaBlockPlainTextAdapterExtension,
   EmbedGithubBlockPlainTextAdapterExtension,
@@ -14,7 +15,6 @@ import type { ExtensionType } from '@blocksuite/block-std';
 
 import { CodeBlockPlainTextAdapterExtension } from '../../../code-block/adapters/plain-text.js';
 import { DatabaseBlockPlainTextAdapterExtension } from '../../../database-block/adapters/plain-text.js';
-import { DividerBlockPlainTextAdapterExtension } from '../../../divider-block/adapters/plain-text.js';
 
 export const defaultBlockPlainTextAdapterMatchers: ExtensionType[] = [
   ParagraphBlockPlainTextAdapterExtension,

blocksuite/blocks/src/_specs/common.ts

@@ -1,5 +1,6 @@
 import { AttachmentBlockSpec } from '@blocksuite/affine-block-attachment';
 import { BookmarkBlockSpec } from '@blocksuite/affine-block-bookmark';
+import { DividerBlockSpec } from '@blocksuite/affine-block-divider';
 import { EmbedExtensions } from '@blocksuite/affine-block-embed';
 import { ImageBlockSpec } from '@blocksuite/affine-block-image';
 import { ListBlockSpec } from '@blocksuite/affine-block-list';
@@ -16,7 +17,6 @@ import { AdapterFactoryExtensions } from '../_common/adapters/extension.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';
-import { DividerBlockSpec } from '../divider-block/divider-spec.js';
 
 export const CommonFirstPartyBlockSpecs: ExtensionType[] = [
   RichTextExtensions,

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

@@ -1,5 +1,6 @@
 import { AttachmentBlockSpec } from '@blocksuite/affine-block-attachment';
 import { BookmarkBlockSpec } from '@blocksuite/affine-block-bookmark';
+import { DividerBlockSpec } from '@blocksuite/affine-block-divider';
 import {
   EmbedFigmaBlockSpec,
   EmbedGithubBlockSpec,
@@ -20,7 +21,6 @@ import { ParagraphBlockSpec } from '@blocksuite/affine-block-paragraph';
 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';
-import { DividerBlockSpec } from '../../divider-block/divider-spec.js';
 
 export {
   AttachmentBlockSpec,

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

@@ -1,2 +0,0 @@
-export * from './adapters/markdown.js';
-export * from './divider-block.js';

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 blockDividerEffects } from '@blocksuite/affine-block-divider/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';
@@ -64,7 +65,6 @@ import {
   HeaderAreaTextCell,
   HeaderAreaTextCellEditing,
 } from './database-block/properties/title/text.js';
-import { DividerBlockComponent } from './divider-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';
@@ -254,12 +254,12 @@ export function effects() {
   blockParagraphEffects();
   blockEmbedEffects();
   blockSurfaceEffects();
-  dataViewEffects();
   blockImageEffects();
   blockDatabaseEffects();
   blockSurfaceRefEffects();
   blockLatexEffects();
   blockEdgelessTextEffects();
+  blockDividerEffects();
 
   componentCaptionEffects();
   componentContextMenuEffects();
@@ -278,6 +278,8 @@ export function effects() {
   widgetEdgelessElementToolbarEffects();
   widgetCodeToolbarEffects();
 
+  dataViewEffects();
+
   customElements.define('affine-database-title', DatabaseTitle);
   customElements.define('data-view-header-area-icon', IconCell);
   customElements.define('affine-database-link-cell', LinkCell);
@@ -303,7 +305,6 @@ export function effects() {
   customElements.define('mini-mindmap-surface-block', MindmapSurfaceBlock);
   customElements.define('affine-data-view', DataViewBlockComponent);
   customElements.define('affine-edgeless-root', EdgelessRootBlockComponent);
-  customElements.define('affine-divider', DividerBlockComponent);
   customElements.define('edgeless-copilot-panel', EdgelessCopilotPanel);
   customElements.define(
     'edgeless-copilot-toolbar-entry',

blocksuite/blocks/src/index.ts

@@ -19,7 +19,6 @@ export * from './_specs/index.js';
 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 { EdgelessTemplatePanel } from './root-block/edgeless/components/toolbar/template/template-panel.js';
 export type {
   Template,
@@ -45,6 +44,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-divider';
 export * from '@blocksuite/affine-block-edgeless-text';
 export * from '@blocksuite/affine-block-embed';
 export * from '@blocksuite/affine-block-frame';

blocksuite/blocks/tsconfig.json

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

tools/utils/src/workspace.gen.ts

@@ -42,6 +42,19 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/block-divider',
+    name: '@blocksuite/affine-block-divider',
+    workspaceDependencies: [
+      '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-edgeless-text',
     name: '@blocksuite/affine-block-edgeless-text',
@@ -224,6 +237,7 @@ export const PackageList = [
     workspaceDependencies: [
       'blocksuite/affine/block-attachment',
       'blocksuite/affine/block-bookmark',
+      'blocksuite/affine/block-divider',
       'blocksuite/affine/block-edgeless-text',
       'blocksuite/affine/block-embed',
       'blocksuite/affine/block-frame',
@@ -570,6 +584,7 @@ export type PackageName =
   | '@blocksuite/affine'
   | '@blocksuite/affine-block-attachment'
   | '@blocksuite/affine-block-bookmark'
+  | '@blocksuite/affine-block-divider'
   | '@blocksuite/affine-block-edgeless-text'
   | '@blocksuite/affine-block-embed'
   | '@blocksuite/affine-block-frame'

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-divider" },
     { "path": "./blocksuite/affine/block-edgeless-text" },
     { "path": "./blocksuite/affine/block-embed" },
     { "path": "./blocksuite/affine/block-frame" },

yarn.lock

@@ -3289,6 +3289,28 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-block-divider@workspace:*, @blocksuite/affine-block-divider@workspace:blocksuite/affine/block-divider":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-block-divider@workspace:blocksuite/affine/block-divider"
+  dependencies:
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@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"
+    "@types/mdast": "npm:^4.0.4"
+    lit: "npm:^3.2.0"
+    minimatch: "npm:^10.0.1"
+    zod: "npm:^3.23.8"
+  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"
@@ -3623,6 +3645,7 @@ __metadata:
   dependencies:
     "@blocksuite/affine-block-attachment": "workspace:*"
     "@blocksuite/affine-block-bookmark": "workspace:*"
+    "@blocksuite/affine-block-divider": "workspace:*"
     "@blocksuite/affine-block-edgeless-text": "workspace:*"
     "@blocksuite/affine-block-embed": "workspace:*"
     "@blocksuite/affine-block-frame": "workspace:*"