fix(server): same identify across pods (#9428)

Currently, directly running `yarn dev` in `packages/backend/server` (following `developing-server.md`) instead of `yarn affine server dev` would raise following error:

``` sh
server git:(canary) ✗ yarn dev
[nodemon] 3.1.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `node ./src/index.ts`
node:internal/modules/esm/get_format:160
  throw new ERR_UNKNOWN_FILE_EXTENSION(ext, filepath);
        ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/ewind/code/AFFiNE/packages/backend/server/src/index.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:141:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)
    at async link (node:internal/modules/esm/module_job:76:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Node.js v20.10.0
[nodemon] app crashed - waiting for file changes before starting...
```

.docker/dev/compose.yml.example

@@ -11,7 +11,7 @@ services:
       POSTGRES_USER: ${DB_USERNAME}
       POSTGRES_DB: ${DB_DATABASE_NAME}
     volumes:
-      - ${DATABASE_LOCATION}:/var/lib/postgresql/data
+      - postgres_data:/var/lib/postgresql/data
 
   redis:
     image: redis:latest
@@ -26,3 +26,6 @@ services:
 
 networks:
   dev:
+
+volumes:
+  postgres_data:

.github/helm/affine/Chart.yaml

@@ -3,4 +3,4 @@ name: affine
 description: AFFiNE cloud chart
 type: application
 version: 0.0.0
-appVersion: "0.18.0"
+appVersion: "0.19.0"

.github/helm/affine/charts/graphql/Chart.yaml

@@ -3,7 +3,7 @@ name: graphql
 description: AFFiNE GraphQL server
 type: application
 version: 0.0.0
-appVersion: "0.18.0"
+appVersion: "0.19.0"
 dependencies:
   - name: gcloud-sql-proxy
     version: 0.0.0

.github/helm/affine/charts/sync/Chart.yaml

@@ -3,7 +3,7 @@ name: sync
 description: AFFiNE Sync Server
 type: application
 version: 0.0.0
-appVersion: "0.18.0"
+appVersion: "0.19.0"
 dependencies:
   - name: gcloud-sql-proxy
     version: 0.0.0

.yarn/patches/yjs-npm-13.6.21-c9f1f3397c.patch

@@ -1,8 +1,8 @@
 diff --git a/dist/yjs.cjs b/dist/yjs.cjs
-index d2dc06ae11a6eb44f8c8445d4298c0e89c3e4da2..a30ab04fa9f3b77666939caa88335c68c40f194c 100644
+index 8a343ca9d0a153e95b27ad337e0553a8cc80d5ca..7199cf6e05d9c2c3491e56c4d4bda109e1755563 100644
 --- a/dist/yjs.cjs
 +++ b/dist/yjs.cjs
-@@ -414,7 +414,7 @@ const equalDeleteSets = (ds1, ds2) => {
+@@ -416,7 +416,7 @@ const equalDeleteSets = (ds1, ds2) => {
   */
  
  
@@ -12,10 +12,10 @@ index d2dc06ae11a6eb44f8c8445d4298c0e89c3e4da2..a30ab04fa9f3b77666939caa88335c68
  /**
   * @typedef {Object} DocOpts
 diff --git a/dist/yjs.mjs b/dist/yjs.mjs
-index 20c9e58c32bcb6bc714200a2561fd1f542c49523..14267e5e36d9781ca3810d5b70ff8c051dac779e 100644
+index 1c29ce7fe8f146b78911d0af9a53d1b516e86494..220fa0faacf4dc2a787e18f7cc79100e7c516e3a 100644
 --- a/dist/yjs.mjs
 +++ b/dist/yjs.mjs
-@@ -378,7 +378,7 @@ const equalDeleteSets = (ds1, ds2) => {
+@@ -379,7 +379,7 @@ const equalDeleteSets = (ds1, ds2) => {
   */
  
  
@@ -25,7 +25,7 @@ index 20c9e58c32bcb6bc714200a2561fd1f542c49523..14267e5e36d9781ca3810d5b70ff8c05
  /**
   * @typedef {Object} DocOpts
 diff --git a/src/utils/Doc.js b/src/utils/Doc.js
-index 62643617c86e57c64dd9babdb792fa8888357ec0..4df5048ab12af1ae0f1154da67f06dce1fda7b49 100644
+index d5165426f2314fc3c2388e64841e7cd6498a92a9..4bb2e5a8b79bb59f08a011af77e69af862312292 100644
 --- a/src/utils/Doc.js
 +++ b/src/utils/Doc.js
 @@ -20,7 +20,7 @@ import * as map from 'lib0/map'

.yarnrc.yml

@@ -12,4 +12,4 @@ npmPublishAccess: public
 
 npmPublishRegistry: "https://registry.npmjs.org"
 
-yarnPath: .yarn/releases/yarn-4.5.3.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

Cargo.lock

@@ -2147,18 +2147,18 @@ dependencies = [
 
 [[package]]
 name = "serde"
-version = "1.0.216"
+version = "1.0.217"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0b9781016e935a97e8beecf0c933758c97a5520d32930e460142b4cd80c6338e"
+checksum = "02fc4265df13d6fa1d00ecff087228cc0a2b5f3c0e87e258d8b94a156e984c70"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.216"
+version = "1.0.217"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "46f859dbbf73865c6627ed570e78961cd3ac92407a2d117204c49232485da55e"
+checksum = "5a9bf7cf98d04a2b28aead066b7496853d4779c9cc183c440dbac457641e19a0"
 dependencies = [
  "proc-macro2",
  "quote",

blocksuite/affine/all/package.json

@@ -96,5 +96,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-attachment/package.json

@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "file-type": "^19.5.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -41,5 +41,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-bookmark/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
@@ -39,5 +39,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-create-modal.ts

@@ -6,6 +6,7 @@ import {
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
+import { isValidUrl } from '@blocksuite/affine-shared/utils';
 import type { EditorHost } from '@blocksuite/block-std';
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
@@ -15,8 +16,6 @@ import { html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import type { EdgelessRootBlockComponent } from '../../../../root-block/edgeless/edgeless-root-block.js';
-import { getRootByEditorHost, isValidUrl } from '../../../utils/index.js';
 import { embedCardModalStyles } from './styles.js';
 
 export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
@@ -64,13 +63,6 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
         targetStyle = embedOptions.styles[0];
       }
 
-      const edgelessRoot = getRootByEditorHost(
-        this.host
-      ) as EdgelessRootBlockComponent | null;
-      if (!edgelessRoot) {
-        return;
-      }
-
       const gfx = this.host.std.get(GfxControllerIdentifier);
       const crud = this.host.std.get(EdgelessCRUDIdentifier);
 
@@ -95,7 +87,10 @@ export class EmbedCardCreateModal extends WithDisposable(ShadowlessElement) {
         surfaceModel
       );
 
-      gfx.tool.setTool('default');
+      gfx.tool.setTool(
+        // @ts-expect-error FIXME: resolve after gfx tool refactor
+        'default'
+      );
     }
     this.onConfirm();
     this.remove();

blocksuite/affine/block-bookmark/src/components/embed-card-modal/embed-card-edit-modal.ts

@@ -37,8 +37,8 @@ import { choose } from 'lit/directives/choose.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { live } from 'lit/directives/live.js';
 
-import type { LinkableEmbedModel } from '../type.js';
-import { isInternalEmbedModel } from '../type.js';
+import type { LinkableEmbedModel } from './type.js';
+import { isInternalEmbedModel } from './type.js';
 
 export class EmbedCardEditModal extends SignalWatcher(
   WithDisposable(LitElement)

blocksuite/affine/block-bookmark/src/components/embed-card-modal/index.ts

@@ -0,0 +1,4 @@
+export * from './embed-card-caption-edit-modal';
+export * from './embed-card-create-modal';
+export * from './embed-card-edit-modal';
+export * from './type';

blocksuite/affine/block-bookmark/src/components/embed-card-modal/type.ts

@@ -1,4 +1,3 @@
-import { BookmarkBlockComponent } from '@blocksuite/affine-block-bookmark';
 import {
   EmbedFigmaBlockComponent,
   EmbedGithubBlockComponent,
@@ -22,6 +21,8 @@ import {
 } from '@blocksuite/affine-model';
 import type { BlockComponent } from '@blocksuite/block-std';
 
+import { BookmarkBlockComponent } from '../../bookmark-block';
+
 export type ExternalEmbedBlockComponent =
   | BookmarkBlockComponent
   | EmbedFigmaBlockComponent
@@ -37,7 +38,7 @@ export type LinkableEmbedBlockComponent =
   | ExternalEmbedBlockComponent
   | InternalEmbedBlockComponent;
 
-export type EmbedBlockComponent =
+export type BuiltInEmbedBlockComponent =
   | LinkableEmbedBlockComponent
   | EmbedHtmlBlockComponent;
 
@@ -52,11 +53,11 @@ export type InternalEmbedModel = EmbedLinkedDocModel | EmbedSyncedDocModel;
 
 export type LinkableEmbedModel = ExternalEmbedModel | InternalEmbedModel;
 
-export type EmbedModel = LinkableEmbedModel | EmbedHtmlModel;
+export type BuiltInEmbedModel = LinkableEmbedModel | EmbedHtmlModel;
 
 export function isEmbedCardBlockComponent(
   block: BlockComponent
-): block is EmbedBlockComponent {
+): block is BuiltInEmbedBlockComponent {
   return (
     block instanceof BookmarkBlockComponent ||
     block instanceof EmbedFigmaBlockComponent ||
@@ -70,7 +71,7 @@ export function isEmbedCardBlockComponent(
 }
 
 export function isInternalEmbedModel(
-  model: EmbedModel
+  model: BuiltInEmbedModel
 ): model is InternalEmbedModel {
   return (
     model instanceof EmbedLinkedDocModel || model instanceof EmbedSyncedDocModel

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

@@ -0,0 +1,2 @@
+export * from './bookmark-card';
+export * from './embed-card-modal';

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

@@ -4,6 +4,11 @@ import type { BookmarkBlockService } from './bookmark-service';
 import type { insertBookmarkCommand } from './commands/insert-bookmark';
 import type { insertLinkByQuickSearchCommand } from './commands/insert-link-by-quick-search';
 import { BookmarkCard } from './components/bookmark-card';
+import {
+  EmbedCardCreateModal,
+  EmbedCardEditCaptionEditModal,
+  EmbedCardEditModal,
+} from './components/embed-card-modal';
 
 export function effects() {
   customElements.define(
@@ -12,6 +17,13 @@ export function effects() {
   );
   customElements.define('affine-bookmark', BookmarkBlockComponent);
   customElements.define('bookmark-card', BookmarkCard);
+
+  customElements.define('embed-card-create-modal', EmbedCardCreateModal);
+  customElements.define('embed-card-edit-modal', EmbedCardEditModal);
+  customElements.define(
+    'embed-card-caption-edit-modal',
+    EmbedCardEditCaptionEditModal
+  );
 }
 
 declare global {

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

@@ -2,3 +2,4 @@ export * from './adapters';
 export * from './bookmark-block';
 export * from './bookmark-service';
 export * from './bookmark-spec';
+export * from './components';

blocksuite/affine/block-code/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@blocksuite/affine-block-code",
+  "description": "Code 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.3",
+    "@types/mdast": "^4.0.4",
+    "lit": "^3.2.0",
+    "minimatch": "^10.0.1",
+    "shiki": "^1.14.1",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.19.0"
+}

blocksuite/affine/block-code/src/clipboard/index.ts

@@ -1,5 +1,6 @@
 import {
   HtmlAdapter,
+  pasteMiddleware,
   PlainTextAdapter,
 } from '@blocksuite/affine-shared/adapters';
 import {
@@ -7,9 +8,7 @@ import {
   Clipboard,
   type UIEventHandler,
 } from '@blocksuite/block-std';
-import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
-
-import { pasteMiddleware } from '../../root-block/clipboard/middlewares/index.js';
+import { DisposableGroup } from '@blocksuite/global/utils';
 
 export class CodeClipboardController {
   private _clipboard!: Clipboard;
@@ -43,17 +42,15 @@ export class CodeClipboardController {
       .try(cmd => [
         cmd.getTextSelection().inline<'currentSelectionPath'>((ctx, next) => {
           const textSelection = ctx.currentTextSelection;
-          assertExists(textSelection);
+          if (!textSelection) return;
           const end = textSelection.to ?? textSelection.from;
           next({ currentSelectionPath: end.blockId });
         }),
         cmd.getBlockSelections().inline<'currentSelectionPath'>((ctx, next) => {
           const currentBlockSelections = ctx.currentBlockSelections;
-          assertExists(currentBlockSelections);
+          if (!currentBlockSelections) return;
           const blockSelection = currentBlockSelections.at(-1);
-          if (!blockSelection) {
-            return;
-          }
+          if (!blockSelection) return;
           next({ currentSelectionPath: blockSelection.blockId });
         }),
       ])

blocksuite/affine/block-code/src/code-block-spec.ts

@@ -6,13 +6,13 @@ import {
 } from '@blocksuite/block-std';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
-import { AFFINE_CODE_TOOLBAR_WIDGET } from '../root-block/widgets/code-toolbar/index.js';
 import { CodeBlockAdapterExtensions } from './adapters/extension.js';
 import {
   CodeBlockInlineManagerExtension,
   CodeBlockUnitSpecExtension,
 } from './code-block-inline.js';
 import { CodeBlockService } from './code-block-service.js';
+import { AFFINE_CODE_TOOLBAR_WIDGET } from './code-toolbar/index.js';
 
 export const CodeBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:code'),

blocksuite/affine/block-code/src/code-block.ts

@@ -5,7 +5,10 @@ import {
 } from '@blocksuite/affine-components/rich-text';
 import type { CodeBlockModel } from '@blocksuite/affine-model';
 import { BRACKET_PAIRS, NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
-import { NotificationProvider } from '@blocksuite/affine-shared/services';
+import {
+  DocModeProvider,
+  NotificationProvider,
+} from '@blocksuite/affine-shared/services';
 import { getViewportElement } from '@blocksuite/affine-shared/utils';
 import type { BlockComponent } from '@blocksuite/block-std';
 import { getInlineRangeProvider } from '@blocksuite/block-std';
@@ -24,7 +27,6 @@ import { query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import type { ThemedToken } from 'shiki';
 
-import { EdgelessRootBlockComponent } from '../root-block/edgeless/edgeless-root-block.js';
 import { CodeClipboardController } from './clipboard/index.js';
 import { CodeBlockInlineManagerExtension } from './code-block-inline.js';
 import type { CodeBlockService } from './code-block-service.js';
@@ -72,9 +74,8 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
   }
 
   override get topContenteditableElement() {
-    if (this.rootComponent instanceof EdgelessRootBlockComponent) {
-      const el = this.closest<BlockComponent>(NOTE_SELECTOR);
-      return el;
+    if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
+      return this.closest<BlockComponent>(NOTE_SELECTOR);
     }
     return this.rootComponent;
   }

blocksuite/affine/block-code/src/code-toolbar/components/lang-button.ts

@@ -11,7 +11,7 @@ import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit/static-html.js';
 
-import type { CodeBlockComponent } from '../../../../code-block/code-block.js';
+import type { CodeBlockComponent } from '../..';
 
 export class LanguageListButton extends WithDisposable(
   SignalWatcher(LitElement)

blocksuite/affine/block-code/src/code-toolbar/context.ts

@@ -1,6 +1,6 @@
 import { MenuContext } from '@blocksuite/affine-components/toolbar';
 
-import type { CodeBlockComponent } from '../../../code-block/code-block.js';
+import type { CodeBlockComponent } from '../code-block';
 
 export class CodeBlockToolbarContext extends MenuContext {
   override close = () => {

blocksuite/affine/block-code/src/code-toolbar/index.ts

@@ -13,7 +13,7 @@ import { WidgetComponent } from '@blocksuite/block-std';
 import { limitShift, shift } from '@floating-ui/dom';
 import { html } from 'lit';
 
-import type { CodeBlockComponent } from '../../../code-block/code-block.js';
+import type { CodeBlockComponent } from '../code-block.js';
 import { MORE_GROUPS, PRIMARY_GROUPS } from './config.js';
 import { CodeBlockToolbarContext } from './context.js';
 

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

@@ -0,0 +1,35 @@
+import type * as CommandsType from '@blocksuite/affine-shared/commands';
+
+import { CodeBlockComponent } from './code-block';
+import type { CodeBlockConfig } from './code-block-config';
+import {
+  AFFINE_CODE_TOOLBAR_WIDGET,
+  AffineCodeToolbarWidget,
+} from './code-toolbar';
+import { AffineCodeToolbar } from './code-toolbar/components/code-toolbar';
+import { LanguageListButton } from './code-toolbar/components/lang-button';
+import { AffineCodeUnit } from './highlight/affine-code-unit';
+
+export function effects() {
+  customElements.define('language-list-button', LanguageListButton);
+  customElements.define('affine-code-toolbar', AffineCodeToolbar);
+  customElements.define(AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget);
+  customElements.define('affine-code-unit', AffineCodeUnit);
+  customElements.define('affine-code', CodeBlockComponent);
+}
+
+declare type _GLOBAL_ = typeof CommandsType;
+
+declare global {
+  namespace BlockSuite {
+    interface BlockConfigs {
+      'affine:code': CodeBlockConfig;
+    }
+  }
+
+  interface HTMLElementTagNameMap {
+    'language-list-button': LanguageListButton;
+    'affine-code-toolbar': AffineCodeToolbar;
+    [AFFINE_CODE_TOOLBAR_WIDGET]: AffineCodeToolbarWidget;
+  }
+}

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

@@ -0,0 +1,5 @@
+export * from './adapters';
+export * from './code-block';
+export * from './code-block-config';
+export * from './code-block-spec';
+export * from './code-toolbar';

blocksuite/affine/block-code/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/affine/block-divider/package.json

@@ -0,0 +1,43 @@
+{
+  "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.3",
+    "@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__"
+  ],
+  "version": "0.19.0"
+}

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/affine/block-edgeless-text/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
@@ -39,5 +39,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-embed/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
@@ -39,5 +39,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts

@@ -1,8 +1,5 @@
 import { isPeekable, Peekable } from '@blocksuite/affine-components/peek';
-import {
-  REFERENCE_NODE,
-  RefNodeSlotsProvider,
-} from '@blocksuite/affine-components/rich-text';
+import { RefNodeSlotsProvider } from '@blocksuite/affine-components/rich-text';
 import type {
   DocMode,
   EmbedLinkedDocModel,
@@ -11,6 +8,7 @@ import type {
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
+  REFERENCE_NODE,
 } from '@blocksuite/affine-shared/consts';
 import {
   DocDisplayMetaProvider,

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts

@@ -1,8 +1,5 @@
 import { Peekable } from '@blocksuite/affine-components/peek';
-import {
-  REFERENCE_NODE,
-  RefNodeSlotsProvider,
-} from '@blocksuite/affine-components/rich-text';
+import { RefNodeSlotsProvider } from '@blocksuite/affine-components/rich-text';
 import {
   type AliasInfo,
   type DocMode,
@@ -10,6 +7,7 @@ import {
   NoteDisplayMode,
   type ReferenceInfo,
 } from '@blocksuite/affine-model';
+import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import {
   DocDisplayMetaProvider,
   DocModeProvider,
@@ -511,17 +509,6 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
       }
     });
 
-    // Forward docLinkClicked event from the synced doc
-    const refNodeProvider =
-      this.syncedDocEditorHost?.std.getOptional(RefNodeSlotsProvider);
-    if (refNodeProvider) {
-      this.disposables.add(
-        refNodeProvider.docLinkClicked.on(args => {
-          this.std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.emit(args);
-        })
-      );
-    }
-
     this._initEdgelessFitEffect();
   }
 

blocksuite/affine/block-frame/package.json

@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -38,5 +38,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-frame/src/frame-block.ts

@@ -1,4 +1,4 @@
-import type { FrameBlockModel } from '@blocksuite/affine-model';
+import { DefaultTheme, type FrameBlockModel } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { GfxBlockComponent } from '@blocksuite/block-std';
 import { Bound } from '@blocksuite/global/utils';
@@ -56,7 +56,7 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
     const { model, showBorder, std } = this;
     const backgroundColor = std
       .get(ThemeProvider)
-      .generateColorProperty(model.background, '--affine-platte-transparent');
+      .generateColorProperty(model.background, DefaultTheme.transparent);
     const _isNavigator =
       this.gfx.tool.currentToolName$.value === 'frameNavigator';
     const frameIndex = this.gfx.layer.getZIndex(model);

blocksuite/affine/block-image/package.json

@@ -24,7 +24,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "file-type": "^19.5.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -39,5 +39,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-latex/package.json

@@ -24,7 +24,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "@types/katex": "^0.16.7",
     "@types/mdast": "^4.0.4",
     "katex": "^0.16.11",
@@ -42,5 +42,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-list/package.json

@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -38,5 +38,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-list/src/list-block.ts

@@ -34,6 +34,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
 
   private readonly _onClickIcon = (e: MouseEvent) => {
     e.stopPropagation();
+    e.preventDefault();
 
     if (this.model.type === 'toggle') {
       if (this.doc.readonly) {

blocksuite/affine/block-note/package.json

@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"
@@ -40,5 +40,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-note/src/note-edgeless-block.ts

@@ -2,7 +2,7 @@ import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import { MoreIndicatorIcon } from '@blocksuite/affine-components/icons';
 import type { NoteBlockModel } from '@blocksuite/affine-model';
 import {
-  DEFAULT_NOTE_BACKGROUND_COLOR,
+  DefaultTheme,
   NoteDisplayMode,
   StrokeStyle,
 } from '@blocksuite/affine-model';
@@ -24,6 +24,7 @@ import {
   WithDisposable,
 } from '@blocksuite/global/utils';
 import type { BlockModel } from '@blocksuite/store';
+import { computed } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -141,6 +142,16 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
     }
   `;
 
+  private readonly _backgroundColor$ = computed(() => {
+    const themeProvider = this.std.get(ThemeProvider);
+    const theme = themeProvider.theme$.value;
+    return themeProvider.generateColorProperty(
+      this.model.background$.value,
+      DefaultTheme.noteBackgrounColor,
+      theme
+    );
+  });
+
   private get _isShowCollapsedContent() {
     return this.model.edgeless.collapse && (this._isResizing || this._isHover);
   }
@@ -406,9 +417,6 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
     };
 
     const extra = this._editing ? ACTIVE_NOTE_EXTRA_PADDING : 0;
-    const backgroundColor = this.std
-      .get(ThemeProvider)
-      .generateColorProperty(model.background, DEFAULT_NOTE_BACKGROUND_COLOR);
 
     const backgroundStyle = {
       position: 'absolute',
@@ -420,7 +428,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
       transition: this._editing
         ? 'left 0.3s, top 0.3s, width 0.3s, height 0.3s'
         : 'none',
-      backgroundColor,
+      backgroundColor: this._backgroundColor$.value,
       border: `${borderSize}px ${
         borderStyle === StrokeStyle.Dash ? 'dashed' : borderStyle
       } var(--affine-black-10)`,

blocksuite/affine/block-paragraph/package.json

@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
@@ -38,5 +38,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-surface/package.json

@@ -22,7 +22,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "fractional-indexing": "^3.2.0",
     "lit": "^3.2.0",
     "lodash.chunk": "^4.2.0",
@@ -42,5 +42,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/block-surface/src/consts.ts

@@ -6,6 +6,8 @@ export const ZOOM_WHEEL_STEP = 0.1;
 export const GRID_SIZE = 3000;
 export const GRID_GAP_MIN = 10;
 export const GRID_GAP_MAX = 50;
+export const DEFAULT_NOTE_OFFSET_X = 30;
+export const DEFAULT_NOTE_OFFSET_Y = 40;
 
 // TODO: need to check the default central area ratio
 export const DEFAULT_CENTRAL_AREA_RATIO = 0.3;

blocksuite/affine/block-surface/src/extensions/crud-extension.ts

@@ -137,4 +137,26 @@ export class EdgelessCRUDExtension extends Extension {
       this.std.doc.updateBlock(block, props);
     }
   };
+
+  getElementById(id: string): BlockSuite.EdgelessModel | null {
+    const surface = this._surface;
+    if (!surface) {
+      return null;
+    }
+    const el =
+      surface.getElementById(id) ??
+      (this.std.doc.getBlockById(
+        id
+      ) as BlockSuite.EdgelessBlockModelType | null);
+    return el;
+  }
+
+  getElementsByType<K extends keyof BlockSuite.SurfaceElementModelMap>(
+    type: K
+  ): BlockSuite.SurfaceElementModelMap[K][] {
+    if (!this._surface) {
+      return [];
+    }
+    return this._surface.getElementsByType(type);
+  }
 }

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

@@ -104,7 +104,12 @@ import {
   tryMoveNode,
 } from './utils/mindmap/utils';
 export * from './extensions';
-export { getLastPropsKey, getSurfaceBlock } from './utils';
+export {
+  addNote,
+  addNoteAtPoint,
+  getLastPropsKey,
+  getSurfaceBlock,
+} from './utils';
 export type { Options } from './utils/rough/core';
 export { sortIndex } from './utils/sort';
 export { updateXYWH } from './utils/update-xywh.js';

blocksuite/affine/block-surface/src/renderer/canvas-renderer.ts

@@ -21,9 +21,9 @@ import type { ElementRenderer } from './elements/index.js';
 import type { Overlay } from './overlay.js';
 
 type EnvProvider = {
-  generateColorProperty: (color: Color, fallback: string) => string;
+  generateColorProperty: (color: Color, fallback?: Color) => string;
   getColorScheme: () => ColorScheme;
-  getColorValue: (color: Color, fallback?: string, real?: boolean) => string;
+  getColorValue: (color: Color, fallback?: Color, real?: boolean) => string;
   getPropertyValue: (property: string) => string;
   selectedElements?: () => string[];
 };
@@ -368,10 +368,9 @@ export class CanvasRenderer {
     this._disposables.dispose();
   }
 
-  generateColorProperty(color: Color, fallback: string) {
+  generateColorProperty(color: Color, fallback?: Color) {
     return (
-      this.provider.generateColorProperty?.(color, fallback) ??
-      (fallback.startsWith('--') ? `var(${fallback})` : fallback)
+      this.provider.generateColorProperty?.(color, fallback) ?? 'transparent'
     );
   }
 
@@ -409,7 +408,7 @@ export class CanvasRenderer {
     return this.provider.getColorScheme?.() ?? ColorScheme.Light;
   }
 
-  getColorValue(color: Color, fallback?: string, real?: boolean) {
+  getColorValue(color: Color, fallback?: Color, real?: boolean) {
     return (
       this.provider.getColorValue?.(color, fallback, real) ?? 'transparent'
     );

blocksuite/affine/block-surface/src/renderer/elements/brush/index.ts

@@ -1,4 +1,4 @@
-import type { BrushElementModel } from '@blocksuite/affine-model';
+import { type BrushElementModel, DefaultTheme } from '@blocksuite/affine-model';
 
 import type { CanvasRenderer } from '../../canvas-renderer.js';
 
@@ -17,7 +17,7 @@ export function brush(
     matrix.translateSelf(cx, cy).rotateSelf(rotate).translateSelf(-cx, -cy)
   );
 
-  const color = renderer.getColorValue(model.color, '#000000', true);
+  const color = renderer.getColorValue(model.color, DefaultTheme.black, true);
 
   ctx.fillStyle = color;
 

blocksuite/affine/block-surface/src/renderer/elements/connector/index.ts

@@ -1,6 +1,7 @@
 import {
   type ConnectorElementModel,
   ConnectorMode,
+  DefaultTheme,
   type LocalConnectorElementModel,
   type PointStyle,
 } from '@blocksuite/affine-model';
@@ -75,7 +76,11 @@ export function connector(
     ctx.clip(path, 'evenodd');
   }
 
-  const strokeColor = renderer.getColorValue(model.stroke, '#000000', true);
+  const strokeColor = renderer.getColorValue(
+    model.stroke,
+    DefaultTheme.connectorColor,
+    true
+  );
 
   renderPoints(
     model,
@@ -249,7 +254,7 @@ function renderLabel(
   ctx.font = font;
   ctx.textAlign = textAlign;
   ctx.textBaseline = 'middle';
-  ctx.fillStyle = renderer.getColorValue(color, '#000000', true);
+  ctx.fillStyle = renderer.getColorValue(color, DefaultTheme.black, true);
 
   let textMaxWidth = textAlign === 'center' ? 0 : getMaxTextWidth(lines, font);
   if (hasMaxWidth && maxWidth > 0) {

blocksuite/affine/block-surface/src/renderer/elements/shape/index.ts

@@ -3,12 +3,7 @@ import type {
   ShapeElementModel,
   ShapeType,
 } from '@blocksuite/affine-model';
-import {
-  DEFAULT_SHAPE_FILL_COLOR,
-  DEFAULT_SHAPE_STROKE_COLOR,
-  DEFAULT_SHAPE_TEXT_COLOR,
-  TextAlign,
-} from '@blocksuite/affine-model';
+import { DefaultTheme, TextAlign } from '@blocksuite/affine-model';
 import type { IBound } from '@blocksuite/global/utils';
 import { Bound } from '@blocksuite/global/utils';
 import { deltaInsertsToChunks } from '@blocksuite/inline';
@@ -55,17 +50,17 @@ export function shape(
 ) {
   const color = renderer.getColorValue(
     model.color,
-    DEFAULT_SHAPE_TEXT_COLOR,
+    DefaultTheme.shapeTextColor,
     true
   );
   const fillColor = renderer.getColorValue(
     model.fillColor,
-    DEFAULT_SHAPE_FILL_COLOR,
+    DefaultTheme.shapeFillColor,
     true
   );
   const strokeColor = renderer.getColorValue(
     model.strokeColor,
-    DEFAULT_SHAPE_STROKE_COLOR,
+    DefaultTheme.shapeStrokeColor,
     true
   );
   const colors = { color, fillColor, strokeColor };

blocksuite/affine/block-surface/src/renderer/elements/text/index.ts

@@ -1,4 +1,4 @@
-import type { TextElementModel } from '@blocksuite/affine-model';
+import { DefaultTheme, type TextElementModel } from '@blocksuite/affine-model';
 import { deltaInsertsToChunks } from '@blocksuite/inline';
 
 import type { CanvasRenderer } from '../../canvas-renderer.js';
@@ -39,7 +39,11 @@ export function text(
   const horizontalOffset =
     textAlign === 'center' ? w / 2 : textAlign === 'right' ? w : 0;
 
-  const color = renderer.getColorValue(model.color, '#000000', true);
+  const color = renderer.getColorValue(
+    model.color,
+    DefaultTheme.textColor,
+    true
+  );
 
   ctx.font = font;
   ctx.fillStyle = color;

blocksuite/affine/block-surface/src/surface-block.ts

@@ -160,13 +160,13 @@ export class SurfaceBlockComponent extends BlockComponent<
       gridManager: gfx.grid,
       enableStackingCanvas: true,
       provider: {
-        generateColorProperty: (color: Color, fallback: string) =>
+        generateColorProperty: (color: Color, fallback?: Color) =>
           themeService.generateColorProperty(
             color,
             fallback,
             themeService.edgelessTheme
           ),
-        getColorValue: (color: Color, fallback?: string, real?: boolean) =>
+        getColorValue: (color: Color, fallback?: Color, real?: boolean) =>
           themeService.getColorValue(
             color,
             fallback,

blocksuite/affine/block-surface/src/utils/add-note.ts

@@ -1,4 +1,3 @@
-import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
 import { focusTextModel } from '@blocksuite/affine-components/rich-text';
 import {
   DEFAULT_NOTE_HEIGHT,
@@ -18,7 +17,8 @@ import {
   serializeXYWH,
 } from '@blocksuite/global/utils';
 
-import { DEFAULT_NOTE_OFFSET_X, DEFAULT_NOTE_OFFSET_Y } from './consts.js';
+import { DEFAULT_NOTE_OFFSET_X, DEFAULT_NOTE_OFFSET_Y } from '../consts';
+import { EdgelessCRUDIdentifier } from '../extensions/crud-extension';
 
 export function addNoteAtPoint(
   std: BlockStdScope,
@@ -96,7 +96,7 @@ export function addNote(
   const doc = std.doc;
 
   const blockId = doc.addBlock(
-    options.childFlavour,
+    options.childFlavour as BlockSuite.Flavour,
     { type: options.childType },
     noteId
   );
@@ -107,7 +107,10 @@ export function addNote(
       note.edgeless.collapsedHeight = height;
     });
   }
-  gfx.tool.setTool('default');
+  gfx.tool.setTool(
+    // @ts-expect-error FIXME: resolve after gfx tool refactor
+    'default'
+  );
 
   // Wait for edgelessTool updated
   requestAnimationFrame(() => {

blocksuite/affine/block-surface/src/utils/index.ts

@@ -33,5 +33,6 @@ export function normalizeWheelDeltaY(delta: number, zoom = 1) {
   return newZoom;
 }
 
+export { addNote, addNoteAtPoint } from './add-note';
 export { getLastPropsKey } from './get-last-props-key';
 export { getSurfaceBlock } from './get-surface-block';

blocksuite/affine/components/package.json

@@ -24,7 +24,7 @@
     "@lit/context": "^1.1.2",
     "@lottiefiles/dotlottie-wc": "^0.4.0",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "date-fns": "^4.0.0",
     "katex": "^0.16.11",
     "lit": "^3.2.0",
@@ -66,5 +66,6 @@
   "devDependencies": {
     "@types/katex": "^0.16.7",
     "@types/lodash.clonedeep": "^4.5.9"
-  }
+  },
+  "version": "0.19.0"
 }

blocksuite/affine/components/src/icons/edgeless.ts

@@ -427,21 +427,6 @@ export const ViewBarIcon = icons.ViewBarIcon({
   height: '24',
 });
 
-export const TransparentIcon = html`<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M-0.939238 4.14286C-0.979281 4.4228 -1 4.70898 -1 5V6.71429H1.57143V9.28571H-1V11C-1 11.291 -0.979281 11.5772 -0.939238 11.8571H1.57143V14.4286H0.0754482C0.481795 15.0111 0.988871 15.5182 1.57143 15.9246V14.4286L4.14286 14.4286V16.9392C4.4228 16.9793 4.70898 17 5 17H6.71429V14.4286H9.28571V17H11C11.291 17 11.5772 16.9793 11.8571 16.9392V14.4286H14.4286L14.4286 15.9246C15.0111 15.5182 15.5182 15.0111 15.9246 14.4286L14.4286 14.4286V11.8571H16.9392C16.9793 11.5772 17 11.291 17 11V9.28571H14.4286V6.71429H17V5C17 4.70898 16.9793 4.4228 16.9392 4.14286H14.4286V1.57143H15.9246C15.5182 0.988871 15.0111 0.481795 14.4286 0.075448L14.4286 1.57143H11.8571V-0.939238C11.5772 -0.979281 11.291 -1 11 -1H9.28571V1.57143H6.71429V-1H5C4.70898 -1 4.4228 -0.979281 4.14286 -0.939238V1.57143H1.57143V0.0754479C0.988871 0.481795 0.481795 0.988871 0.0754479 1.57143H1.57143V4.14286H-0.939238ZM4.14286 4.14286V1.57143H6.71429V4.14286H4.14286ZM4.14286 6.71429H1.57143V4.14286H4.14286V6.71429ZM6.71429 6.71429V4.14286H9.28571V6.71429H6.71429ZM6.71429 9.28571V6.71429H4.14286V9.28571H1.57143V11.8571H4.14286V14.4286H6.71429V11.8571H9.28571V14.4286H11.8571V11.8571H14.4286V9.28571H11.8571V6.71429H14.4286V4.14286H11.8571V1.57143H9.28571V4.14286H11.8571V6.71429H9.28571V9.28571H6.71429ZM6.71429 9.28571V11.8571H4.14286V9.28571H6.71429ZM9.28571 9.28571H11.8571V11.8571H9.28571V9.28571Z"
-    fill="#D9D9D9"
-  />
-</svg>`;
-
 export const MoreHorizontalIcon = icons.MoreHorizontalIcon({
   width: '24',
   height: '24',

blocksuite/affine/components/src/rich-text/dom.ts

@@ -1,11 +1,13 @@
 import {
   asyncGetBlockComponent,
+  getCurrentNativeRange,
   matchFlavours,
 } from '@blocksuite/affine-shared/utils';
 import type { BlockStdScope, EditorHost } from '@blocksuite/block-std';
-import type { InlineRange } from '@blocksuite/inline';
-import type { BlockModel } from '@blocksuite/store';
+import type { InlineEditor, InlineRange } from '@blocksuite/inline';
+import { BlockModel } from '@blocksuite/store';
 
+import type { AffineInlineEditor } from './inline/index.js';
 import type { RichText } from './rich-text.js';
 
 /**
@@ -109,3 +111,63 @@ export async function onModelTextUpdated(
     }
   });
 }
+
+/**
+ * Remove specified text from the current range.
+ */
+export function cleanSpecifiedTail(
+  editorHost: EditorHost,
+  inlineEditorOrModel: AffineInlineEditor | BlockModel,
+  str: string
+) {
+  if (!str) {
+    console.warn('Failed to clean text! Unexpected empty string');
+    return;
+  }
+  const inlineEditor =
+    inlineEditorOrModel instanceof BlockModel
+      ? getInlineEditorByModel(editorHost, inlineEditorOrModel)
+      : inlineEditorOrModel;
+  if (!inlineEditor) {
+    return;
+  }
+  const inlineRange = inlineEditor.getInlineRange();
+  if (!inlineRange) {
+    return;
+  }
+  const idx = inlineRange.index - str.length;
+  const textStr = inlineEditor.yText.toString().slice(idx, idx + str.length);
+  if (textStr !== str) {
+    console.warn(
+      `Failed to clean text! Text mismatch expected: ${str} but actual: ${textStr}`
+    );
+    return;
+  }
+  inlineEditor.deleteText({ index: idx, length: str.length });
+  inlineEditor.setInlineRange({
+    index: idx,
+    length: 0,
+  });
+}
+
+export function getTextContentFromInlineRange(
+  inlineEditor: InlineEditor,
+  startRange: InlineRange | null
+) {
+  const nativeRange = getCurrentNativeRange();
+  if (!nativeRange) {
+    return null;
+  }
+  if (nativeRange.startContainer !== nativeRange.endContainer) {
+    return null;
+  }
+  const curRange = inlineEditor.getInlineRange();
+  if (!startRange || !curRange) {
+    return null;
+  }
+  if (curRange.index < startRange.index) {
+    return null;
+  }
+  const text = inlineEditor.yText.toString();
+  return text.slice(startRange.index, curRange.index);
+}

blocksuite/affine/components/src/rich-text/extension/ref-node-slots.ts

@@ -7,14 +7,12 @@ import type { RefNodeSlots } from '../inline/index.js';
 export const RefNodeSlotsProvider =
   createIdentifier<RefNodeSlots>('AffineRefNodeSlots');
 
-export function RefNodeSlotsExtension(
-  slots: RefNodeSlots = {
-    docLinkClicked: new Slot(),
-  }
-): ExtensionType {
-  return {
-    setup: di => {
-      di.addImpl(RefNodeSlotsProvider, () => slots);
-    },
-  };
-}
+const slots: RefNodeSlots = {
+  docLinkClicked: new Slot(),
+};
+
+export const RefNodeSlotsExtension: ExtensionType = {
+  setup: di => {
+    di.addImpl(RefNodeSlotsProvider, () => slots);
+  },
+};

blocksuite/affine/components/src/rich-text/index.ts

@@ -3,9 +3,11 @@ export { type TextConversionConfig, textConversionConfigs } from './conversion';
 export {
   asyncGetRichText,
   asyncSetInlineRange,
+  cleanSpecifiedTail,
   focusTextModel,
   getInlineEditorByModel,
   getRichTextByModel,
+  getTextContentFromInlineRange,
   onModelTextUpdated,
   selectTextModel,
 } from './dom';

blocksuite/affine/components/src/rich-text/inline/presets/nodes/index.ts

@@ -1,4 +1,3 @@
-export { DEFAULT_DOC_NAME, REFERENCE_NODE } from './consts.js';
 export { AffineLink, toggleLinkPopup } from './link-node/index.js';
 export * from './reference-node/reference-config.js';
 export { AffineReference } from './reference-node/reference-node.js';

blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-alias-popup.ts

@@ -1,4 +1,5 @@
 import type { ReferenceInfo } from '@blocksuite/affine-model';
+import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import {
   type LinkEventType,
   type TelemetryEvent,
@@ -22,7 +23,6 @@ import { live } from 'lit/directives/live.js';
 
 import type { EditorIconButton } from '../../../../../toolbar/index.js';
 import type { AffineInlineEditor } from '../../affine-inline-specs.js';
-import { REFERENCE_NODE } from '../consts.js';
 
 export class ReferenceAliasPopup extends SignalWatcher(
   WithDisposable(ShadowlessElement)

blocksuite/affine/components/src/rich-text/inline/presets/nodes/reference-node/reference-node.ts

@@ -1,4 +1,8 @@
 import type { ReferenceInfo } from '@blocksuite/affine-model';
+import {
+  DEFAULT_DOC_NAME,
+  REFERENCE_NODE,
+} from '@blocksuite/affine-shared/consts';
 import { DocDisplayMetaProvider } from '@blocksuite/affine-shared/services';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import {
@@ -32,7 +36,6 @@ import { HoverController } from '../../../../../hover/index.js';
 import { Peekable } from '../../../../../peek/index.js';
 import { RefNodeSlotsProvider } from '../../../../extension/index.js';
 import { affineTextStyles } from '../affine-text.js';
-import { DEFAULT_DOC_NAME, REFERENCE_NODE } from '../consts.js';
 import type { ReferenceNodeConfigProvider } from './reference-config.js';
 import { toggleReferencePopup } from './reference-popup.js';
 

blocksuite/affine/components/src/rich-text/linked-node.ts

@@ -1,4 +1,6 @@
-import { type AffineInlineEditor, REFERENCE_NODE } from './inline/index.js';
+import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
+
+import { type AffineInlineEditor } from './inline/index.js';
 
 export function insertLinkedNode({
   inlineEditor,

blocksuite/affine/components/src/toolbar/styles.ts

@@ -8,6 +8,7 @@ import { unsafeCSS } from 'lit';
 const toolbarColorKeys: Array<keyof AffineCssVariables> = [
   '--affine-background-overlay-panel-color',
   '--affine-v2-layer-background-overlayPanel' as never,
+  '--affine-v2-layer-insideBorder-blackBorder' as never,
   '--affine-background-error-color',
   '--affine-background-primary-color',
   '--affine-background-tertiary-color',

blocksuite/affine/components/src/toolbar/tooltip.ts

@@ -25,11 +25,9 @@ const styles = css`
     color: var(--affine-white);
     background: var(--affine-tooltip);
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
     overflow-wrap: anywhere;
     white-space: pre-wrap;
+    word-break: break-all;
   }
 
   .arrow {
@@ -201,10 +199,8 @@ export class Tooltip extends LitElement {
       :host {
         z-index: ${unsafeCSS(this.zIndex)};
         opacity: 0;
-        ${
-          // All the styles are applied to the portal element
-          unsafeCSS(this.style.cssText)
-        }
+        // All the styles are applied to the portal element
+        ${unsafeCSS(this.style.cssText)}
       }
 
       ${this.allowInteractive

blocksuite/affine/data-view/package.json

@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.1",
+    "@toeverything/theme": "^1.1.3",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",
     "zod": "^3.23.8"
@@ -41,5 +41,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/model/package.json

@@ -28,5 +28,6 @@
     "dist",
     "!src/__tests__",
     "!dist/__tests__"
-  ]
+  ],
+  "version": "0.19.0"
 }

blocksuite/affine/model/src/blocks/frame/frame-model.ts

@@ -17,7 +17,7 @@ import {
 import { Bound } from '@blocksuite/global/utils';
 import { BlockModel, defineBlockSchema, type Text } from '@blocksuite/store';
 
-import type { Color } from '../../consts/index.js';
+import type { Color } from '../../themes/index.js';
 
 export type FrameBlockProps = {
   title: Text;
@@ -30,7 +30,7 @@ export const FrameBlockSchema = defineBlockSchema({
   flavour: 'affine:frame',
   props: (internal): FrameBlockProps => ({
     title: internal.Text(),
-    background: '--affine-palette-transparent',
+    background: 'transparent',
     xywh: `[0,0,100,100]`,
     index: 'a0',
     childElementIds: Object.create(null),

blocksuite/affine/model/src/blocks/note/note-model.ts

@@ -7,8 +7,6 @@ import { Bound } from '@blocksuite/global/utils';
 import { BlockModel, defineBlockSchema } from '@blocksuite/store';
 
 import {
-  type Color,
-  DEFAULT_NOTE_BACKGROUND_COLOR,
   DEFAULT_NOTE_BORDER_SIZE,
   DEFAULT_NOTE_BORDER_STYLE,
   DEFAULT_NOTE_CORNER,
@@ -18,12 +16,13 @@ import {
   NoteDisplayMode,
   type StrokeStyle,
 } from '../../consts/index.js';
+import { type Color, DefaultTheme } from '../../themes/index.js';
 
 export const NoteBlockSchema = defineBlockSchema({
   flavour: 'affine:note',
   props: (): NoteProps => ({
     xywh: `[0,0,${DEFAULT_NOTE_WIDTH},${DEFAULT_NOTE_HEIGHT}]`,
-    background: DEFAULT_NOTE_BACKGROUND_COLOR,
+    background: DefaultTheme.noteBackgrounColor,
     index: 'a0',
     lockedBySelf: false,
     hidden: false,

blocksuite/affine/model/src/consts/brush.ts

@@ -1,3 +0,0 @@
-import { LineColor } from './line.js';
-
-export const DEFAULT_BRUSH_COLOR = LineColor.Blue;

blocksuite/affine/model/src/consts/connector.ts

@@ -1,5 +1,4 @@
 import { createEnumMap } from '../utils/enum.js';
-import { LineColor } from './line.js';
 
 export enum ConnectorEndpoint {
   Front = 'Front',
@@ -16,10 +15,6 @@ export enum PointStyle {
 
 export const PointStyleMap = createEnumMap(PointStyle);
 
-export const DEFAULT_CONNECTOR_COLOR = LineColor.Grey;
-
-export const DEFAULT_CONNECTOR_TEXT_COLOR = LineColor.Black;
-
 export const DEFAULT_FRONT_END_POINT_STYLE = PointStyle.None;
 
 export const DEFAULT_REAR_END_POINT_STYLE = PointStyle.Arrow;