chore(editor): reorg packages (#10702)

blocksuite/affine/blocks/block-divider/src/adapters/extension.ts

@@ -0,0 +1,13 @@
+import type { ExtensionType } from '@blocksuite/store';
+
+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/affine/blocks/block-divider/src/adapters/html.ts

@@ -0,0 +1,53 @@
+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/affine/blocks/block-divider/src/adapters/index.ts

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

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

@@ -0,0 +1,50 @@
+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/affine/blocks/block-divider/src/adapters/notion-html.ts

@@ -0,0 +1,38 @@
+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/affine/blocks/block-divider/src/adapters/plain-text.ts

@@ -0,0 +1,21 @@
+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/affine/blocks/block-divider/src/divider-block.ts

@@ -0,0 +1,50 @@
+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 { BlockSelection } from '@blocksuite/block-std';
+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(BlockSelection, {
+          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/affine/blocks/block-divider/src/divider-spec.ts

@@ -0,0 +1,10 @@
+import { BlockViewExtension } from '@blocksuite/block-std';
+import type { ExtensionType } from '@blocksuite/store';
+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/affine/blocks/block-divider/src/effects.ts

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

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

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

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

@@ -0,0 +1,19 @@
+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%;
+  }
+`;