feat(editor): rich text package (#10689)

This PR performs a significant architectural refactoring by extracting rich text functionality into a dedicated package. Here are the key changes:

1. **New Package Creation**
- Created a new package `@blocksuite/affine-rich-text` to house rich text related functionality
- Moved rich text components, utilities, and types from `@blocksuite/affine-components` to this new package

2. **Dependency Updates**
- Updated multiple block packages to include the new `@blocksuite/affine-rich-text` as a direct dependency:
  - block-callout
  - block-code
  - block-database
  - block-edgeless-text
  - block-embed
  - block-list
  - block-note
  - block-paragraph

3. **Import Path Updates**
- Refactored all imports that previously referenced rich text functionality from `@blocksuite/affine-components/rich-text` to now use `@blocksuite/affine-rich-text`
- Updated imports for components like:
  - DefaultInlineManagerExtension
  - RichText types and interfaces
  - Text manipulation utilities (focusTextModel, textKeymap, etc.)
  - Reference node components and providers

4. **Build Configuration Updates**
- Added references to the new rich text package in the `tsconfig.json` files of all affected packages
- Maintained workspace dependencies using the `workspace:*` version specifier

The primary motivation appears to be:
1. Better separation of concerns by isolating rich text functionality
2. Improved maintainability through more modular package structure
3. Clearer dependencies between packages
4. Potential for better tree-shaking and bundle optimization

This is primarily an architectural improvement that should make the codebase more maintainable and better organized.

blocksuite/affine/block-callout/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

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

@@ -1,7 +1,7 @@
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import { createLitPortal } from '@blocksuite/affine-components/portal';
-import { DefaultInlineManagerExtension } from '@blocksuite/affine-components/rich-text';
 import { type CalloutBlockModel } from '@blocksuite/affine-model';
+import { DefaultInlineManagerExtension } from '@blocksuite/affine-rich-text';
 import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
 import {
   DocModeProvider,

blocksuite/affine/block-callout/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../components" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },

blocksuite/affine/block-code/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

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

@@ -1,4 +1,4 @@
-import { deleteTextCommand } from '@blocksuite/affine-components/rich-text';
+import { deleteTextCommand } from '@blocksuite/affine-rich-text';
 import {
   HtmlAdapter,
   pasteMiddleware,

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

@@ -10,7 +10,7 @@ import {
   LinkInlineSpecExtension,
   StrikeInlineSpecExtension,
   UnderlineInlineSpecExtension,
-} from '@blocksuite/affine-components/rich-text';
+} from '@blocksuite/affine-rich-text';
 import { html } from 'lit';
 import { z } from 'zod';
 

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

@@ -1,5 +1,5 @@
-import { textKeymap } from '@blocksuite/affine-components/rich-text';
 import { CodeBlockSchema, ColorScheme } from '@blocksuite/affine-model';
+import { textKeymap } from '@blocksuite/affine-rich-text';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { BlockService } from '@blocksuite/block-std';
 import { type Signal, signal } from '@preact/signals-core';

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

@@ -1,9 +1,6 @@
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
-import {
-  focusTextModel,
-  type RichText,
-} from '@blocksuite/affine-components/rich-text';
 import type { CodeBlockModel } from '@blocksuite/affine-model';
+import { focusTextModel, type RichText } from '@blocksuite/affine-rich-text';
 import { BRACKET_PAIRS, NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
 import {
   DocModeProvider,

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

@@ -1,4 +1,4 @@
-import { affineTextStyles } from '@blocksuite/affine-components/rich-text';
+import { affineTextStyles } from '@blocksuite/affine-rich-text';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { type DeltaInsert, ZERO_WIDTH_SPACE } from '@blocksuite/inline';

blocksuite/affine/block-code/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../components" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },

blocksuite/affine/block-database/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-drag-handle": "workspace:*",
     "@blocksuite/affine-widget-slash-menu": "workspace:*",

blocksuite/affine/block-database/src/detail-panel/block-renderer.ts

@@ -1,4 +1,4 @@
-import { DefaultInlineManagerExtension } from '@blocksuite/affine-components/rich-text';
+import { DefaultInlineManagerExtension } from '@blocksuite/affine-rich-text';
 import type { EditorHost } from '@blocksuite/block-std';
 import { ShadowlessElement } from '@blocksuite/block-std';
 import type { DetailSlotProps } from '@blocksuite/data-view';

blocksuite/affine/block-database/src/properties/link/cell-renderer.ts

@@ -1,4 +1,4 @@
-import { RefNodeSlotsProvider } from '@blocksuite/affine-components/rich-text';
+import { RefNodeSlotsProvider } from '@blocksuite/affine-rich-text';
 import { ParseDocUrlProvider } from '@blocksuite/affine-shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import {

blocksuite/affine/block-database/src/properties/rich-text/cell-renderer.ts

@@ -1,8 +1,8 @@
 import type {
   AffineInlineEditor,
   RichText,
-} from '@blocksuite/affine-components/rich-text';
-import { DefaultInlineManagerExtension } from '@blocksuite/affine-components/rich-text';
+} from '@blocksuite/affine-rich-text';
+import { DefaultInlineManagerExtension } from '@blocksuite/affine-rich-text';
 import {
   ParseDocUrlProvider,
   TelemetryProvider,

blocksuite/affine/block-database/src/properties/title/text.ts

@@ -1,8 +1,8 @@
+import type { RootBlockModel } from '@blocksuite/affine-model';
 import {
   DefaultInlineManagerExtension,
   type RichText,
-} from '@blocksuite/affine-components/rich-text';
-import type { RootBlockModel } from '@blocksuite/affine-model';
+} from '@blocksuite/affine-rich-text';
 import {
   ParseDocUrlProvider,
   TelemetryProvider,

blocksuite/affine/block-database/tsconfig.json

@@ -10,6 +10,7 @@
   "references": [
     { "path": "../components" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../widget-drag-handle" },
     { "path": "../widget-slash-menu" },

blocksuite/affine/block-edgeless-text/package.json

@@ -16,6 +16,7 @@
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

blocksuite/affine/block-edgeless-text/src/commands/insert-edgeless-text.ts

@@ -2,7 +2,7 @@ import {
   EdgelessCRUDIdentifier,
   getSurfaceBlock,
 } from '@blocksuite/affine-block-surface';
-import { focusTextModel } from '@blocksuite/affine-components/rich-text';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
 import type { Command } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import { Bound } from '@blocksuite/global/gfx';

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

@@ -1,10 +1,10 @@
 import { TextUtils } from '@blocksuite/affine-block-surface';
-import { formatBlockCommand } from '@blocksuite/affine-components/rich-text';
 import {
   type EdgelessTextBlockModel,
   ListBlockModel,
   ParagraphBlockModel,
 } from '@blocksuite/affine-model';
+import { formatBlockCommand } from '@blocksuite/affine-rich-text';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { matchModels } from '@blocksuite/affine-shared/utils';
 import type { BlockComponent } from '@blocksuite/block-std';

blocksuite/affine/block-edgeless-text/tsconfig.json

@@ -10,6 +10,7 @@
     { "path": "../block-surface" },
     { "path": "../components" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },

blocksuite/affine/block-embed/package.json

@@ -16,6 +16,7 @@
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

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

@@ -1,11 +1,11 @@
 import { SurfaceBlockModel } from '@blocksuite/affine-block-surface';
 import { isPeekable, Peekable } from '@blocksuite/affine-components/peek';
-import { RefNodeSlotsProvider } from '@blocksuite/affine-components/rich-text';
 import type {
   DocMode,
   EmbedLinkedDocModel,
   EmbedLinkedDocStyles,
 } from '@blocksuite/affine-model';
+import { RefNodeSlotsProvider } from '@blocksuite/affine-rich-text';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,

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

@@ -1,8 +1,4 @@
 import { Peekable } from '@blocksuite/affine-components/peek';
-import {
-  type DocLinkClickedEvent,
-  RefNodeSlotsProvider,
-} from '@blocksuite/affine-components/rich-text';
 import {
   type AliasInfo,
   type DocMode,
@@ -10,6 +6,10 @@ import {
   NoteDisplayMode,
   type ReferenceInfo,
 } from '@blocksuite/affine-model';
+import {
+  type DocLinkClickedEvent,
+  RefNodeSlotsProvider,
+} from '@blocksuite/affine-rich-text';
 import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import {
   DocDisplayMetaProvider,

blocksuite/affine/block-embed/tsconfig.json

@@ -10,6 +10,7 @@
     { "path": "../block-surface" },
     { "path": "../components" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },

blocksuite/affine/block-list/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

blocksuite/affine/block-list/src/commands/list-to-paragraph.ts

@@ -1,5 +1,5 @@
-import { focusTextModel } from '@blocksuite/affine-components/rich-text';
 import { ListBlockModel } from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
 import { matchModels } from '@blocksuite/affine-shared/utils';
 import type { Command } from '@blocksuite/block-std';
 

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

@@ -1,5 +1,5 @@
-import { focusTextModel } from '@blocksuite/affine-components/rich-text';
 import { ListBlockModel } from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
 import {
   getNextContinuousNumberedLists,
   matchModels,

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

@@ -2,12 +2,12 @@ import '@blocksuite/affine-shared/commands';
 
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import { playCheckAnimation } from '@blocksuite/affine-components/icons';
+import { TOGGLE_BUTTON_PARENT_CLASS } from '@blocksuite/affine-components/toggle-button';
+import type { ListBlockModel } from '@blocksuite/affine-model';
 import {
   DefaultInlineManagerExtension,
   type RichText,
-} from '@blocksuite/affine-components/rich-text';
-import { TOGGLE_BUTTON_PARENT_CLASS } from '@blocksuite/affine-components/toggle-button';
-import type { ListBlockModel } from '@blocksuite/affine-model';
+} from '@blocksuite/affine-rich-text';
 import {
   BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
   NOTE_SELECTOR,

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

@@ -1,8 +1,5 @@
-import {
-  markdownInput,
-  textKeymap,
-} from '@blocksuite/affine-components/rich-text';
 import { ListBlockSchema } from '@blocksuite/affine-model';
+import { markdownInput, textKeymap } from '@blocksuite/affine-rich-text';
 import { getSelectedModelsCommand } from '@blocksuite/affine-shared/commands';
 import { KeymapExtension, TextSelection } from '@blocksuite/block-std';
 import { IS_MAC } from '@blocksuite/global/env';

blocksuite/affine/block-list/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../components" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },

blocksuite/affine/block-note/package.json

@@ -16,7 +16,9 @@
     "@blocksuite/affine-block-embed": "workspace:*",
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-fragment-doc-title": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

blocksuite/affine/block-note/src/commands/block-type.ts

@@ -1,13 +1,13 @@
-import {
-  asyncSetInlineRange,
-  focusTextModel,
-  onModelTextUpdated,
-} from '@blocksuite/affine-components/rich-text';
 import {
   CodeBlockModel,
   ListBlockModel,
   ParagraphBlockModel,
 } from '@blocksuite/affine-model';
+import {
+  asyncSetInlineRange,
+  focusTextModel,
+  onModelTextUpdated,
+} from '@blocksuite/affine-rich-text';
 import {
   getBlockSelectionsCommand,
   getSelectedBlocksCommand,

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

@@ -1,5 +1,5 @@
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
-import type { DocTitle } from '@blocksuite/affine-components/doc-title';
+import type { DocTitle } from '@blocksuite/affine-fragment-doc-title';
 import { NoteDisplayMode } from '@blocksuite/affine-model';
 import { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine-shared/consts';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';

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

@@ -1,4 +1,3 @@
-import { textConversionConfigs } from '@blocksuite/affine-components/rich-text';
 import {
   CodeBlockModel,
   ListBlockModel,
@@ -6,6 +5,7 @@ import {
   NoteBlockSchema,
   ParagraphBlockModel,
 } from '@blocksuite/affine-model';
+import { textConversionConfigs } from '@blocksuite/affine-rich-text';
 import {
   focusBlockEnd,
   focusBlockStart,

blocksuite/affine/block-note/tsconfig.json

@@ -10,7 +10,9 @@
     { "path": "../block-embed" },
     { "path": "../block-surface" },
     { "path": "../components" },
+    { "path": "../fragment-doc-title" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },

blocksuite/affine/block-paragraph/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

blocksuite/affine/block-paragraph/src/commands/add-paragraph.ts

@@ -1,4 +1,4 @@
-import { focusTextModel } from '@blocksuite/affine-components/rich-text';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
 import { type Command, TextSelection } from '@blocksuite/block-std';
 
 /**

blocksuite/affine/block-paragraph/src/commands/append-paragraph.ts

@@ -1,4 +1,4 @@
-import { focusTextModel } from '@blocksuite/affine-components/rich-text';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
 import { getLastNoteBlock } from '@blocksuite/affine-shared/utils';
 import type { Command } from '@blocksuite/block-std';
 import { Text } from '@blocksuite/store';

blocksuite/affine/block-paragraph/src/commands/split-paragraph.ts

@@ -1,8 +1,8 @@
+import { ParagraphBlockModel } from '@blocksuite/affine-model';
 import {
   focusTextModel,
   getInlineEditorByModel,
-} from '@blocksuite/affine-components/rich-text';
-import { ParagraphBlockModel } from '@blocksuite/affine-model';
+} from '@blocksuite/affine-rich-text';
 import { matchModels } from '@blocksuite/affine-shared/utils';
 import { type Command, TextSelection } from '@blocksuite/block-std';
 

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

@@ -1,10 +1,10 @@
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
+import { TOGGLE_BUTTON_PARENT_CLASS } from '@blocksuite/affine-components/toggle-button';
+import type { ParagraphBlockModel } from '@blocksuite/affine-model';
 import {
   DefaultInlineManagerExtension,
   type RichText,
-} from '@blocksuite/affine-components/rich-text';
-import { TOGGLE_BUTTON_PARENT_CLASS } from '@blocksuite/affine-components/toggle-button';
-import type { ParagraphBlockModel } from '@blocksuite/affine-model';
+} from '@blocksuite/affine-rich-text';
 import {
   BLOCK_CHILDREN_CONTAINER_PADDING_LEFT,
   NOTE_SELECTOR,

blocksuite/affine/block-paragraph/src/paragraph-keymap.ts

@@ -1,14 +1,14 @@
-import {
-  focusTextModel,
-  getInlineEditorByModel,
-  markdownInput,
-  textKeymap,
-} from '@blocksuite/affine-components/rich-text';
 import {
   CalloutBlockModel,
   ParagraphBlockModel,
   ParagraphBlockSchema,
 } from '@blocksuite/affine-model';
+import {
+  focusTextModel,
+  getInlineEditorByModel,
+  markdownInput,
+  textKeymap,
+} from '@blocksuite/affine-rich-text';
 import {
   calculateCollapsedSiblings,
   matchModels,

blocksuite/affine/block-paragraph/src/utils/merge-with-prev.ts

@@ -1,7 +1,3 @@
-import {
-  asyncSetInlineRange,
-  focusTextModel,
-} from '@blocksuite/affine-components/rich-text';
 import {
   AttachmentBlockModel,
   BookmarkBlockModel,
@@ -14,6 +10,10 @@ import {
   ParagraphBlockModel,
   type RootBlockModel,
 } from '@blocksuite/affine-model';
+import {
+  asyncSetInlineRange,
+  focusTextModel,
+} from '@blocksuite/affine-rich-text';
 import { EMBED_BLOCK_MODEL_LIST } from '@blocksuite/affine-shared/consts';
 import type { ExtendedModel } from '@blocksuite/affine-shared/types';
 import {

blocksuite/affine/block-paragraph/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../components" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },

blocksuite/affine/block-root/package.json

@@ -29,7 +29,9 @@
     "@blocksuite/affine-block-surface-ref": "workspace:*",
     "@blocksuite/affine-block-table": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-fragment-doc-title": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-drag-handle": "workspace:*",
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",

blocksuite/affine/block-root/src/clipboard/page-clipboard.ts

@@ -1,4 +1,4 @@
-import { deleteTextCommand } from '@blocksuite/affine-components/rich-text';
+import { deleteTextCommand } from '@blocksuite/affine-rich-text';
 import {
   pasteMiddleware,
   replaceIdMiddleware,

blocksuite/affine/block-root/src/configs/toolbar.ts

@@ -9,6 +9,7 @@ import {
   promptDocTitle,
 } from '@blocksuite/affine-block-embed';
 import { updateBlockType } from '@blocksuite/affine-block-note';
+import { toast } from '@blocksuite/affine-components/toast';
 import {
   deleteTextCommand,
   formatBlockCommand,
@@ -17,8 +18,7 @@ import {
   isFormatSupported,
   textConversionConfigs,
   textFormatConfigs,
-} from '@blocksuite/affine-components/rich-text';
-import { toast } from '@blocksuite/affine-components/toast';
+} from '@blocksuite/affine-rich-text';
 import {
   copySelectedModelsCommand,
   deleteSelectedModelsCommand,

blocksuite/affine/block-root/src/edgeless/components/text/edgeless-connector-label-editor.ts

@@ -2,8 +2,8 @@ import {
   EdgelessCRUDIdentifier,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
-import type { RichText } from '@blocksuite/affine-components/rich-text';
 import type { ConnectorElementModel } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { almostEqual } from '@blocksuite/affine-shared/utils';
 import {

blocksuite/affine/block-root/src/edgeless/components/text/edgeless-frame-title-editor.ts

@@ -1,5 +1,5 @@
-import type { RichText } from '@blocksuite/affine-components/rich-text';
 import { FrameBlockModel } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
 import {
   AFFINE_FRAME_TITLE_WIDGET,
   type AffineFrameTitleWidget,

blocksuite/affine/block-root/src/edgeless/components/text/edgeless-group-title-editor.ts

@@ -3,8 +3,8 @@ import {
   GROUP_TITLE_OFFSET,
   GROUP_TITLE_PADDING,
 } from '@blocksuite/affine-block-surface';
-import type { RichText } from '@blocksuite/affine-components/rich-text';
 import type { GroupElementModel } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
 import {
   RANGE_SYNC_EXCLUDE_ATTR,
   ShadowlessElement,

blocksuite/affine/block-root/src/edgeless/components/text/edgeless-shape-text-editor.ts

@@ -2,9 +2,9 @@ import {
   EdgelessCRUDIdentifier,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
-import type { RichText } from '@blocksuite/affine-components/rich-text';
 import type { ShapeElementModel } from '@blocksuite/affine-model';
 import { MindmapElementModel, TextResizing } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { getSelectedRect } from '@blocksuite/affine-shared/utils';
 import {

blocksuite/affine/block-root/src/edgeless/components/text/edgeless-text-editor.ts

@@ -2,8 +2,8 @@ import {
   EdgelessCRUDIdentifier,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
-import type { RichText } from '@blocksuite/affine-components/rich-text';
 import type { TextElementModel } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { getSelectedRect } from '@blocksuite/affine-shared/utils';
 import {

blocksuite/affine/block-root/src/edgeless/gfx-tool/default-tool.ts

@@ -9,7 +9,6 @@ import {
   isNoteBlock,
   OverlayIdentifier,
 } from '@blocksuite/affine-block-surface';
-import { focusTextModel } from '@blocksuite/affine-components/rich-text';
 import type {
   EdgelessTextBlockModel,
   FrameBlockModel,
@@ -22,6 +21,7 @@ import {
   ShapeElementModel,
   TextElementModel,
 } from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
 import {
   FeatureFlagService,
   TelemetryProvider,

blocksuite/affine/block-root/src/page/page-root-block.ts

@@ -1,5 +1,4 @@
 import { appendParagraphCommand } from '@blocksuite/affine-block-paragraph';
-import { focusTextModel } from '@blocksuite/affine-components/rich-text';
 import {
   CodeBlockModel,
   ListBlockModel,
@@ -8,6 +7,7 @@ import {
   ParagraphBlockModel,
   type RootBlockModel,
 } from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
 import { PageViewportService } from '@blocksuite/affine-shared/services';
 import type { Viewport } from '@blocksuite/affine-shared/types';
 import {

blocksuite/affine/block-root/src/widgets/keyboard-toolbar/config.ts

@@ -18,6 +18,8 @@ import {
 import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
 import { insertSurfaceRefBlockCommand } from '@blocksuite/affine-block-surface-ref';
 import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
+import { toast } from '@blocksuite/affine-components/toast';
+import type { FrameBlockModel } from '@blocksuite/affine-model';
 import {
   formatBlockCommand,
   formatNativeCommand,
@@ -32,9 +34,7 @@ import {
   toggleLink,
   toggleStrike,
   toggleUnderline,
-} from '@blocksuite/affine-components/rich-text';
-import { toast } from '@blocksuite/affine-components/toast';
-import type { FrameBlockModel } from '@blocksuite/affine-model';
+} from '@blocksuite/affine-rich-text';
 import {
   copySelectedModelsCommand,
   deleteSelectedModelsCommand,

blocksuite/affine/block-root/src/widgets/keyboard-toolbar/index.ts

@@ -1,4 +1,4 @@
-import { getDocTitleByEditorHost } from '@blocksuite/affine-components/doc-title';
+import { getDocTitleByEditorHost } from '@blocksuite/affine-fragment-doc-title';
 import type { RootBlockModel } from '@blocksuite/affine-model';
 import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import { WidgetComponent } from '@blocksuite/block-std';

blocksuite/affine/block-root/src/widgets/linked-doc/config.ts

@@ -4,11 +4,11 @@ import {
   LinkedEdgelessIcon,
   NewDocIcon,
 } from '@blocksuite/affine-components/icons';
+import { toast } from '@blocksuite/affine-components/toast';
 import {
   type AffineInlineEditor,
   insertLinkedNode,
-} from '@blocksuite/affine-components/rich-text';
-import { toast } from '@blocksuite/affine-components/toast';
+} from '@blocksuite/affine-rich-text';
 import {
   DocModeProvider,
   TelemetryProvider,

blocksuite/affine/block-root/src/widgets/linked-doc/linked-doc-popover.ts

@@ -3,7 +3,7 @@ import type { IconButton } from '@blocksuite/affine-components/icon-button';
 import {
   cleanSpecifiedTail,
   getTextContentFromInlineRange,
-} from '@blocksuite/affine-components/rich-text';
+} from '@blocksuite/affine-rich-text';
 import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
 import {
   createKeydownObserver,

blocksuite/affine/block-root/src/widgets/linked-doc/mobile-linked-doc-menu.ts

@@ -1,7 +1,7 @@
 import {
   cleanSpecifiedTail,
   getTextContentFromInlineRange,
-} from '@blocksuite/affine-components/rich-text';
+} from '@blocksuite/affine-rich-text';
 import { VirtualKeyboardProvider } from '@blocksuite/affine-shared/services';
 import {
   createKeydownObserver,

blocksuite/affine/block-root/tsconfig.json

@@ -23,7 +23,9 @@
     { "path": "../block-surface-ref" },
     { "path": "../block-table" },
     { "path": "../components" },
+    { "path": "../fragment-doc-title" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../widget-drag-handle" },
     { "path": "../widget-edgeless-auto-connect" },

blocksuite/affine/block-surface/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

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

@@ -1,4 +1,3 @@
-import { focusTextModel } from '@blocksuite/affine-components/rich-text';
 import {
   DEFAULT_NOTE_HEIGHT,
   DEFAULT_NOTE_WIDTH,
@@ -6,6 +5,7 @@ import {
   type NoteBlockModel,
   NoteDisplayMode,
 } from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
 import type { NoteChildrenFlavour } from '@blocksuite/affine-shared/types';
 import { handleNativeRangeAtPoint } from '@blocksuite/affine-shared/utils';

blocksuite/affine/block-surface/tsconfig.json

@@ -9,6 +9,7 @@
   "references": [
     { "path": "../components" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },

blocksuite/affine/block-table/package.json

@@ -16,6 +16,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/data-view": "workspace:*",

blocksuite/affine/block-table/src/table-cell.ts

@@ -5,11 +5,11 @@ import {
   popupTargetFromElement,
 } from '@blocksuite/affine-components/context-menu';
 import { TextBackgroundDuotoneIcon } from '@blocksuite/affine-components/icons';
+import type { TableColumn, TableRow } from '@blocksuite/affine-model';
 import {
   DefaultInlineManagerExtension,
   RichText,
-} from '@blocksuite/affine-components/rich-text';
-import type { TableColumn, TableRow } from '@blocksuite/affine-model';
+} from '@blocksuite/affine-rich-text';
 import { cssVarV2 } from '@blocksuite/affine-shared/theme';
 import { getViewportElement } from '@blocksuite/affine-shared/utils';
 import { ShadowlessElement } from '@blocksuite/block-std';

blocksuite/affine/block-table/tsconfig.json

@@ -10,6 +10,7 @@
   "references": [
     { "path": "../components" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../data-view" },

blocksuite/affine/components/package.json

@@ -50,7 +50,6 @@
     "./icon-button": "./src/icon-button/index.ts",
     "./toolbar": "./src/toolbar/index.ts",
     "./toast": "./src/toast/index.ts",
-    "./rich-text": "./src/rich-text/index.ts",
     "./smooth-corner": "./src/smooth-corner/index.ts",
     "./caption": "./src/caption/index.ts",
     "./context-menu": "./src/context-menu/index.ts",
@@ -62,7 +61,6 @@
     "./notification": "./src/notification/index.ts",
     "./block-zero-width": "./src/block-zero-width/index.ts",
     "./block-selection": "./src/block-selection/index.ts",
-    "./doc-title": "./src/doc-title/index.ts",
     "./embed-card-modal": "./src/embed-card-modal/index.ts",
     "./link-preview": "./src/link-preview/index.ts",
     "./linked-doc-title": "./src/linked-doc-title/index.ts",

blocksuite/affine/components/src/block-zero-width/index.ts

@@ -1,10 +1,8 @@
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
-import type { BlockComponent } from '@blocksuite/block-std';
+import { type BlockComponent, TextSelection } from '@blocksuite/block-std';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { focusTextModel } from '../rich-text';
-
 export class BlockZeroWidth extends LitElement {
   static override styles = css`
     .block-zero-width {
@@ -25,7 +23,13 @@ export class BlockZeroWidth extends LitElement {
       const [paragraphId] = this.block.doc.addSiblingBlocks(this.block.model, [
         { flavour: 'affine:paragraph' },
       ]);
-      focusTextModel(this.block.host.std, paragraphId);
+      const std = this.block.std;
+      std.selection.setGroup('note', [
+        std.selection.create(TextSelection, {
+          from: { blockId: paragraphId, index: 0, length: 0 },
+          to: null,
+        }),
+      ]);
     }
   };
 

blocksuite/affine/components/src/caption/block-caption.ts

@@ -6,6 +6,7 @@ import {
   modelContext,
   ShadowlessElement,
   stdContext,
+  TextSelection,
 } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/lit';
 import type { BlockModel, Store } from '@blocksuite/store';
@@ -14,8 +15,6 @@ import { consume } from '@lit/context';
 import { css, html, nothing } from 'lit';
 import { query, state } from 'lit/decorators.js';
 
-import { focusTextModel } from '../rich-text/index.js';
-
 export interface BlockCaptionProps {
   caption: string | null | undefined;
 }
@@ -92,7 +91,13 @@ export class BlockCaptionEditor<
         index + 1
       );
 
-      focusTextModel(this.std, id);
+      const std = this.std;
+      std.selection.setGroup('note', [
+        std.selection.create(TextSelection, {
+          from: { blockId: id, index: 0, length: 0 },
+          to: null,
+        }),
+      ]);
     }
   }
 

blocksuite/affine/fragment-doc-title/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@blocksuite/affine-fragment-doc-title",
+  "description": "Doc title fragment 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-block-frame": "workspace:*",
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.1",
+    "@blocksuite/inline": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.13",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "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.20.0"
+}

blocksuite/affine/fragment-doc-title/src/doc-title.ts

@@ -6,6 +6,7 @@ import {
   ParagraphBlockModel,
   type RootBlockModel,
 } from '@blocksuite/affine-model';
+import { focusTextModel, type RichText } from '@blocksuite/affine-rich-text';
 import { matchModels } from '@blocksuite/affine-shared/utils';
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/lit';
@@ -14,8 +15,6 @@ import { effect } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
-import { focusTextModel, type RichText } from '../rich-text';
-
 const DOC_BLOCK_CHILD_PADDING = 24;
 
 export class DocTitle extends WithDisposable(ShadowlessElement) {

blocksuite/affine/fragment-doc-title/src/index.ts

@@ -1,3 +1,2 @@
 export { DocTitle } from './doc-title';
-export { effects } from './effects';
 export { getDocTitleByEditorHost } from './utils';

blocksuite/affine/fragment-doc-title/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../block-frame" },
+    { "path": "../block-surface" },
+    { "path": "../components" },
+    { "path": "../model" },
+    { "path": "../rich-text" },
+    { "path": "../shared" },
+    { "path": "../../framework/block-std" },
+    { "path": "../../framework/global" },
+    { "path": "../../framework/inline" },
+    { "path": "../../framework/store" }
+  ]
+}

blocksuite/affine/fragment-frame-panel/package.json

@@ -17,6 +17,7 @@
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

blocksuite/affine/fragment-frame-panel/src/card/frame-card-title-editor.ts

@@ -1,5 +1,5 @@
-import type { RichText } from '@blocksuite/affine-components/rich-text';
 import type { FrameBlockModel } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/lit';
 import { css, html } from 'lit';

blocksuite/affine/fragment-frame-panel/tsconfig.json

@@ -11,6 +11,7 @@
     { "path": "../block-surface" },
     { "path": "../components" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },

blocksuite/affine/fragment-outline/package.json

@@ -15,7 +15,9 @@
   "dependencies": {
     "@blocksuite/affine-block-note": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-fragment-doc-title": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

blocksuite/affine/fragment-outline/src/utils/scroll.ts

@@ -1,4 +1,4 @@
-import { getDocTitleByEditorHost } from '@blocksuite/affine-components/doc-title';
+import { getDocTitleByEditorHost } from '@blocksuite/affine-fragment-doc-title';
 import { NoteDisplayMode } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import type { Viewport } from '@blocksuite/affine-shared/types';

blocksuite/affine/fragment-outline/tsconfig.json

@@ -9,7 +9,9 @@
   "references": [
     { "path": "../block-note" },
     { "path": "../components" },
+    { "path": "../fragment-doc-title" },
     { "path": "../model" },
+    { "path": "../rich-text" },
     { "path": "../shared" },
     { "path": "../../framework/block-std" },
     { "path": "../../framework/global" },

blocksuite/affine/rich-text/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@blocksuite/affine-rich-text",
+  "description": "Inline rich text 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/icons": "^2.2.1",
+    "@blocksuite/inline": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.13",
+    "@lit/context": "^1.1.2",
+    "@lottiefiles/dotlottie-wc": "^0.4.0",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/hast": "^3.0.4",
+    "@types/katex": "^0.16.7",
+    "@types/lodash-es": "^4.17.12",
+    "@types/mdast": "^4.0.4",
+    "collapse-white-space": "^2.1.0",
+    "date-fns": "^4.0.0",
+    "katex": "^0.16.11",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.1",
+    "lodash-es": "^4.17.21",
+    "remark-math": "^6.0.0",
+    "shiki": "^3.0.0",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}

blocksuite/affine/rich-text/src/conversion.ts

@@ -1,5 +1,3 @@
-import type { TemplateResult } from 'lit';
-
 import {
   BulletedListIcon,
   CheckBoxIcon,
@@ -14,7 +12,8 @@ import {
   NumberedListIcon,
   QuoteIcon,
   TextIcon,
-} from '../icons';
+} from '@blocksuite/affine-components/icons';
+import type { TemplateResult } from 'lit';
 
 /**
  * Text primitive entries used in slash menu and format bar,

blocksuite/affine/rich-text/src/format/config.ts

@@ -1,6 +1,3 @@
-import { type EditorHost, TextSelection } from '@blocksuite/block-std';
-import type { TemplateResult } from 'lit';
-
 import {
   BoldIcon,
   CodeIcon,
@@ -8,7 +5,10 @@ import {
   LinkIcon,
   StrikethroughIcon,
   UnderlineIcon,
-} from '../../icons/index.js';
+} from '@blocksuite/affine-components/icons';
+import { type EditorHost, TextSelection } from '@blocksuite/block-std';
+import type { TemplateResult } from 'lit';
+
 import {
   isTextStyleActive,
   toggleBold,