snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

blocksuite/affine/blocks/divider/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@blocksuite/affine-block-divider",
+  "description": "Divider block for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "yarn run -T tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@types/mdast": "^4.0.4",
+    "lit": "^3.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts",
+    "./store": "./src/store.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.27.5"
+}

blocksuite/affine/blocks/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/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/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/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/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/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/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/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/divider/src/effects.ts

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

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

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

blocksuite/affine/blocks/divider/src/markdown.ts

@@ -0,0 +1,63 @@
+import {
+  type DividerBlockModel,
+  DividerBlockSchema,
+  ParagraphBlockModel,
+  ParagraphBlockSchema,
+} from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import type { BlockComponent } from '@blocksuite/std';
+import { InlineMarkdownExtension } from '@blocksuite/std/inline';
+
+export const DividerMarkdownExtension =
+  InlineMarkdownExtension<AffineTextAttributes>({
+    name: 'divider',
+    pattern: /^(-{3,}|\*{3,}|_{3,})\s$/,
+    action: ({ inlineEditor, inlineRange }) => {
+      if (inlineEditor.yTextString.slice(0, inlineRange.index).includes('\n')) {
+        return;
+      }
+
+      if (!inlineEditor.rootElement) return;
+      const blockComponent =
+        inlineEditor.rootElement.closest<BlockComponent>('[data-block-id]');
+      if (!blockComponent) return;
+
+      const { model, std, store } = blockComponent;
+
+      if (
+        matchModels(model, [ParagraphBlockModel]) &&
+        model.props.type !== 'quote'
+      ) {
+        const parent = store.getParent(model);
+        if (!parent) return;
+        const index = parent.children.indexOf(model);
+
+        store.captureSync();
+        inlineEditor.deleteText({
+          index: 0,
+          length: inlineRange.index,
+        });
+        store.addBlock<DividerBlockModel>(
+          DividerBlockSchema.model.flavour,
+          {
+            children: model.children,
+          },
+          parent,
+          index
+        );
+
+        const nextBlock = parent.children.at(index + 1);
+        let id = nextBlock?.id;
+        if (!id) {
+          id = store.addBlock<ParagraphBlockModel>(
+            ParagraphBlockSchema.model.flavour,
+            {},
+            parent
+          );
+        }
+        focusTextModel(std, id);
+      }
+    },
+  });

blocksuite/affine/blocks/divider/src/store.ts

@@ -0,0 +1,17 @@
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { DividerBlockSchemaExtension } from '@blocksuite/affine-model';
+
+import { DividerBlockAdapterExtensions } from './adapters/extension';
+
+export class DividerStoreExtension extends StoreExtensionProvider {
+  override name = 'affine-divider-block';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(DividerBlockSchemaExtension);
+    context.register(DividerBlockAdapterExtensions);
+  }
+}

blocksuite/affine/blocks/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%;
+  }
+`;

blocksuite/affine/blocks/divider/src/view.ts

@@ -0,0 +1,26 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { BlockViewExtension } from '@blocksuite/std';
+import { literal } from 'lit/static-html.js';
+
+import { effects } from './effects';
+import { DividerMarkdownExtension } from './markdown';
+
+export class DividerViewExtension extends ViewExtensionProvider {
+  override name = 'affine-divider-block';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register([
+      BlockViewExtension('affine:divider', literal`affine-divider`),
+      DividerMarkdownExtension,
+    ]);
+  }
+}

blocksuite/affine/blocks/divider/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../components" },
+    { "path": "../../ext-loader" },
+    { "path": "../../model" },
+    { "path": "../../rich-text" },
+    { "path": "../../shared" },
+    { "path": "../../../framework/std" },
+    { "path": "../../../framework/store" }
+  ]
+}