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

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/adapters/extension.ts

@@ -1,13 +0,0 @@
-import type { ExtensionType } from '@blocksuite/block-std';
-
-import { DividerBlockHtmlAdapterExtension } from './html.js';
-import { DividerBlockMarkdownAdapterExtension } from './markdown.js';
-import { DividerBlockNotionHtmlAdapterExtension } from './notion-html.js';
-import { DividerBlockPlainTextAdapterExtension } from './plain-text.js';
-
-export const DividerBlockAdapterExtensions: ExtensionType[] = [
-  DividerBlockHtmlAdapterExtension,
-  DividerBlockMarkdownAdapterExtension,
-  DividerBlockNotionHtmlAdapterExtension,
-  DividerBlockPlainTextAdapterExtension,
-];

blocksuite/blocks/src/divider-block/adapters/html.ts

@@ -1,53 +0,0 @@
-import { DividerBlockSchema } from '@blocksuite/affine-model';
-import {
-  BlockHtmlAdapterExtension,
-  type BlockHtmlAdapterMatcher,
-  HastUtils,
-} from '@blocksuite/affine-shared/adapters';
-import { nanoid } from '@blocksuite/store';
-
-export const dividerBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
-  flavour: DividerBlockSchema.model.flavour,
-  toMatch: o => HastUtils.isElement(o.node) && o.node.tagName === 'hr',
-  fromMatch: o => o.node.flavour === DividerBlockSchema.model.flavour,
-  toBlockSnapshot: {
-    enter: (o, context) => {
-      if (!HastUtils.isElement(o.node)) {
-        return;
-      }
-      const { walkerContext } = context;
-      walkerContext
-        .openNode(
-          {
-            type: 'block',
-            id: nanoid(),
-            flavour: 'affine:divider',
-            props: {},
-            children: [],
-          },
-          'children'
-        )
-        .closeNode();
-    },
-  },
-  fromBlockSnapshot: {
-    enter: (_, context) => {
-      const { walkerContext } = context;
-      walkerContext
-        .openNode(
-          {
-            type: 'element',
-            tagName: 'hr',
-            properties: {},
-            children: [],
-          },
-          'children'
-        )
-        .closeNode();
-    },
-  },
-};
-
-export const DividerBlockHtmlAdapterExtension = BlockHtmlAdapterExtension(
-  dividerBlockHtmlAdapterMatcher
-);

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

@@ -1,4 +0,0 @@
-export * from './html.js';
-export * from './markdown.js';
-export * from './notion-html.js';
-export * from './plain-text.js';

blocksuite/blocks/src/divider-block/adapters/markdown.ts

@@ -1,50 +0,0 @@
-import { DividerBlockSchema } from '@blocksuite/affine-model';
-import {
-  BlockMarkdownAdapterExtension,
-  type BlockMarkdownAdapterMatcher,
-  type MarkdownAST,
-} from '@blocksuite/affine-shared/adapters';
-import { nanoid } from '@blocksuite/store';
-import type { ThematicBreak } from 'mdast';
-
-const isDividerNode = (node: MarkdownAST): node is ThematicBreak =>
-  node.type === 'thematicBreak';
-
-export const dividerBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
-  flavour: DividerBlockSchema.model.flavour,
-  toMatch: o => isDividerNode(o.node),
-  fromMatch: o => o.node.flavour === DividerBlockSchema.model.flavour,
-  toBlockSnapshot: {
-    enter: (_, context) => {
-      const { walkerContext } = context;
-      walkerContext
-        .openNode(
-          {
-            type: 'block',
-            id: nanoid(),
-            flavour: 'affine:divider',
-            props: {},
-            children: [],
-          },
-          'children'
-        )
-        .closeNode();
-    },
-  },
-  fromBlockSnapshot: {
-    enter: (_, context) => {
-      const { walkerContext } = context;
-      walkerContext
-        .openNode(
-          {
-            type: 'thematicBreak',
-          },
-          'children'
-        )
-        .closeNode();
-    },
-  },
-};
-
-export const DividerBlockMarkdownAdapterExtension =
-  BlockMarkdownAdapterExtension(dividerBlockMarkdownAdapterMatcher);

blocksuite/blocks/src/divider-block/adapters/notion-html.ts

@@ -1,38 +0,0 @@
-import { DividerBlockSchema } from '@blocksuite/affine-model';
-import {
-  BlockNotionHtmlAdapterExtension,
-  type BlockNotionHtmlAdapterMatcher,
-  HastUtils,
-} from '@blocksuite/affine-shared/adapters';
-import { nanoid } from '@blocksuite/store';
-
-export const dividerBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
-  {
-    flavour: DividerBlockSchema.model.flavour,
-    toMatch: o => HastUtils.isElement(o.node) && o.node.tagName === 'hr',
-    fromMatch: () => false,
-    toBlockSnapshot: {
-      enter: (o, context) => {
-        if (!HastUtils.isElement(o.node)) {
-          return;
-        }
-        const { walkerContext } = context;
-        walkerContext
-          .openNode(
-            {
-              type: 'block',
-              id: nanoid(),
-              flavour: DividerBlockSchema.model.flavour,
-              props: {},
-              children: [],
-            },
-            'children'
-          )
-          .closeNode();
-      },
-    },
-    fromBlockSnapshot: {},
-  };
-
-export const DividerBlockNotionHtmlAdapterExtension =
-  BlockNotionHtmlAdapterExtension(dividerBlockNotionHtmlAdapterMatcher);

blocksuite/blocks/src/divider-block/adapters/plain-text.ts

@@ -1,21 +0,0 @@
-import { DividerBlockSchema } from '@blocksuite/affine-model';
-import {
-  BlockPlainTextAdapterExtension,
-  type BlockPlainTextAdapterMatcher,
-} from '@blocksuite/affine-shared/adapters';
-
-export const dividerBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher =
-  {
-    flavour: DividerBlockSchema.model.flavour,
-    toMatch: () => false,
-    fromMatch: o => o.node.flavour === DividerBlockSchema.model.flavour,
-    toBlockSnapshot: {},
-    fromBlockSnapshot: {
-      enter: (_, context) => {
-        context.textBuffer.content += '---\n';
-      },
-    },
-  };
-
-export const DividerBlockPlainTextAdapterExtension =
-  BlockPlainTextAdapterExtension(dividerBlockPlainTextAdapterMatcher);

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

@@ -1,49 +0,0 @@
-import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
-import type { DividerBlockModel } from '@blocksuite/affine-model';
-import { BLOCK_CHILDREN_CONTAINER_PADDING_LEFT } from '@blocksuite/affine-shared/consts';
-import { html } from 'lit';
-
-import { dividerBlockStyles } from './styles.js';
-
-export class DividerBlockComponent extends CaptionedBlockComponent<DividerBlockModel> {
-  static override styles = dividerBlockStyles;
-
-  override connectedCallback() {
-    super.connectedCallback();
-
-    this.contentEditable = 'false';
-
-    this.handleEvent('click', () => {
-      this.host.selection.setGroup('note', [
-        this.host.selection.create('block', {
-          blockId: this.blockId,
-        }),
-      ]);
-    });
-  }
-
-  override renderBlock() {
-    const children = html`<div
-      class="affine-block-children-container"
-      style="padding-left: ${BLOCK_CHILDREN_CONTAINER_PADDING_LEFT}px"
-    >
-      ${this.renderChildren(this.model)}
-    </div>`;
-
-    return html`
-      <div class="affine-divider-block-container">
-        <hr />
-
-        ${children}
-      </div>
-    `;
-  }
-
-  override accessor useZeroWidth = true;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'affine-divider': DividerBlockComponent;
-  }
-}

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

@@ -1,9 +0,0 @@
-import { BlockViewExtension, type ExtensionType } from '@blocksuite/block-std';
-import { literal } from 'lit/static-html.js';
-
-import { DividerBlockAdapterExtensions } from './adapters/extension.js';
-
-export const DividerBlockSpec: ExtensionType[] = [
-  BlockViewExtension('affine:divider', literal`affine-divider`),
-  DividerBlockAdapterExtensions,
-].flat();

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

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

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

@@ -1,19 +0,0 @@
-import { css } from 'lit';
-
-export const dividerBlockStyles = css`
-  .affine-divider-block-container {
-    position: relative;
-    width: 100%;
-    height: 1px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 18px 8px;
-    margin-top: var(--affine-paragraph-space);
-  }
-  .affine-divider-block-container hr {
-    border: none;
-    border-top: 1px solid var(--affine-divider-color);
-    width: 100%;
-  }
-`;

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';