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/rich-text/src/keymap/basic.ts

@@ -0,0 +1,79 @@
+import {
+  BlockSelection,
+  type BlockStdScope,
+  TextSelection,
+  type UIEventHandler,
+} from '@blocksuite/block-std';
+
+import {
+  focusTextModel,
+  getInlineEditorByModel,
+  selectTextModel,
+} from '../dom.js';
+
+export const textCommonKeymap = (
+  std: BlockStdScope
+): Record<string, UIEventHandler> => {
+  return {
+    ArrowUp: () => {
+      const text = std.selection.find(TextSelection);
+      if (!text) return;
+      const inline = getInlineEditorByModel(std.host, text.from.blockId);
+      if (!inline) return;
+      return !inline.isFirstLine(inline.getInlineRange());
+    },
+    ArrowDown: () => {
+      const text = std.selection.find(TextSelection);
+      if (!text) return;
+      const inline = getInlineEditorByModel(std.host, text.from.blockId);
+      if (!inline) return;
+      return !inline.isLastLine(inline.getInlineRange());
+    },
+    Escape: ctx => {
+      const text = std.selection.find(TextSelection);
+      if (!text) return;
+
+      selectBlock(std, text.from.blockId);
+      ctx.get('keyboardState').raw.stopPropagation();
+      return true;
+    },
+    'Mod-a': ctx => {
+      const text = std.selection.find(TextSelection);
+      if (!text) return;
+
+      const model = std.store.getBlock(text.from.blockId)?.model;
+      if (!model || !model.text) return;
+
+      ctx.get('keyboardState').raw.preventDefault();
+
+      if (
+        text.from.index === 0 &&
+        text.from.length === model.text.yText.length
+      ) {
+        selectBlock(std, text.from.blockId);
+        return true;
+      }
+
+      selectTextModel(std, text.from.blockId, 0, model.text.yText.length);
+      return true;
+    },
+    Enter: ctx => {
+      const blocks = std.selection.filter(BlockSelection);
+      const blockId = blocks.at(-1)?.blockId;
+
+      if (!blockId) return;
+      const model = std.store.getBlock(blockId)?.model;
+      if (!model || !model.text) return;
+
+      ctx.get('keyboardState').raw.preventDefault();
+      focusTextModel(std, blockId, model.text.yText.length);
+      return true;
+    },
+  };
+};
+
+function selectBlock(std: BlockStdScope, blockId: string) {
+  std.selection.setGroup('note', [
+    std.selection.create(BlockSelection, { blockId }),
+  ]);
+}

blocksuite/affine/rich-text/src/keymap/bracket.ts

@@ -0,0 +1,163 @@
+import { CodeBlockModel } from '@blocksuite/affine-model';
+import { BRACKET_PAIRS } from '@blocksuite/affine-shared/consts';
+import { createDefaultDoc, matchModels } from '@blocksuite/affine-shared/utils';
+import {
+  type BlockStdScope,
+  TextSelection,
+  type UIEventHandler,
+} from '@blocksuite/block-std';
+import type { InlineEditor } from '@blocksuite/inline';
+
+import { getInlineEditorByModel } from '../dom.js';
+import { insertLinkedNode } from '../linked-node.js';
+
+export const bracketKeymap = (
+  std: BlockStdScope
+): Record<string, UIEventHandler> => {
+  const keymap = BRACKET_PAIRS.reduce(
+    (acc, pair) => {
+      return {
+        ...acc,
+        [pair.right]: ctx => {
+          const { store: doc, selection } = std;
+          if (doc.readonly) return;
+
+          const textSelection = selection.find(TextSelection);
+          if (!textSelection) return;
+          const model = doc.getBlock(textSelection.from.blockId)?.model;
+          if (!model) return;
+          if (!matchModels(model, [CodeBlockModel])) return;
+          const inlineEditor = getInlineEditorByModel(
+            std.host,
+            textSelection.from.blockId
+          );
+          if (!inlineEditor) return;
+          const inlineRange = inlineEditor.getInlineRange();
+          if (!inlineRange) return;
+          const left = inlineEditor.yText.toString()[inlineRange.index - 1];
+          const right = inlineEditor.yText.toString()[inlineRange.index];
+          if (pair.left === left && pair.right === right) {
+            inlineEditor.setInlineRange({
+              index: inlineRange.index + 1,
+              length: 0,
+            });
+            ctx.get('keyboardState').raw.preventDefault();
+          }
+        },
+        [pair.left]: ctx => {
+          const { store: doc, selection } = std;
+          if (doc.readonly) return;
+
+          const textSelection = selection.find(TextSelection);
+          if (!textSelection) return;
+          const model = doc.getBlock(textSelection.from.blockId)?.model;
+          if (!model) return;
+
+          const isCodeBlock = matchModels(model, [CodeBlockModel]);
+          // When selection is collapsed, only trigger auto complete in code block
+          if (textSelection.isCollapsed() && !isCodeBlock) return;
+          if (!textSelection.isInSameBlock()) return;
+
+          ctx.get('keyboardState').raw.preventDefault();
+
+          const inlineEditor = getInlineEditorByModel(
+            std.host,
+            textSelection.from.blockId
+          );
+          if (!inlineEditor) return;
+          const inlineRange = inlineEditor.getInlineRange();
+          if (!inlineRange) return;
+          const selectedText = inlineEditor.yText
+            .toString()
+            .slice(inlineRange.index, inlineRange.index + inlineRange.length);
+          if (!isCodeBlock && pair.name === 'square bracket') {
+            // [[Selected text]] should automatically be converted to a Linked doc with the title "Selected text".
+            // See https://github.com/toeverything/blocksuite/issues/2730
+            const success = tryConvertToLinkedDoc(std, inlineEditor);
+            if (success) return true;
+          }
+          inlineEditor.insertText(
+            inlineRange,
+            pair.left + selectedText + pair.right
+          );
+
+          inlineEditor.setInlineRange({
+            index: inlineRange.index + 1,
+            length: inlineRange.length,
+          });
+
+          return true;
+        },
+      };
+    },
+    {} as Record<string, UIEventHandler>
+  );
+
+  return {
+    ...keymap,
+    '`': ctx => {
+      const { store: doc, selection } = std;
+      if (doc.readonly) return;
+
+      const textSelection = selection.find(TextSelection);
+      if (!textSelection || textSelection.isCollapsed()) return;
+      if (!textSelection.isInSameBlock()) return;
+      const model = doc.getBlock(textSelection.from.blockId)?.model;
+      if (!model) return;
+
+      ctx.get('keyboardState').raw.preventDefault();
+      const inlineEditor = getInlineEditorByModel(
+        std.host,
+        textSelection.from.blockId
+      );
+      if (!inlineEditor) return;
+      const inlineRange = inlineEditor.getInlineRange();
+      if (!inlineRange) return;
+      inlineEditor.formatText(inlineRange, { code: true });
+
+      inlineEditor.setInlineRange({
+        index: inlineRange.index,
+        length: inlineRange.length,
+      });
+
+      return true;
+    },
+  };
+};
+
+function tryConvertToLinkedDoc(std: BlockStdScope, inlineEditor: InlineEditor) {
+  const root = std.store.root;
+  if (!root) return false;
+  const linkedDocWidgetEle = std.view.getWidget(
+    'affine-linked-doc-widget',
+    root.id
+  );
+  if (!linkedDocWidgetEle) return false;
+
+  const inlineRange = inlineEditor.getInlineRange();
+  if (!inlineRange) return false;
+  const text = inlineEditor.yText.toString();
+  const left = text[inlineRange.index - 1];
+  const right = text[inlineRange.index + inlineRange.length];
+  const needConvert = left === '[' && right === ']';
+  if (!needConvert) return false;
+
+  const docName = text.slice(
+    inlineRange.index,
+    inlineRange.index + inlineRange.length
+  );
+  inlineEditor.deleteText({
+    index: inlineRange.index - 1,
+    length: inlineRange.length + 2,
+  });
+  inlineEditor.setInlineRange({ index: inlineRange.index - 1, length: 0 });
+
+  const doc = createDefaultDoc(std.store.workspace, {
+    title: docName,
+  });
+  insertLinkedNode({
+    inlineEditor,
+    docId: doc.id,
+  });
+  return true;
+}

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

@@ -0,0 +1,36 @@
+import {
+  type BlockStdScope,
+  TextSelection,
+  type UIEventHandler,
+} from '@blocksuite/block-std';
+
+import { textFormatConfigs } from '../format/index.js';
+
+export const textFormatKeymap = (std: BlockStdScope) =>
+  textFormatConfigs
+    .filter(config => config.hotkey)
+    .reduce(
+      (acc, config) => {
+        return {
+          ...acc,
+          [config.hotkey as string]: ctx => {
+            const { store: doc, selection } = std;
+            if (doc.readonly) return;
+
+            const textSelection = selection.find(TextSelection);
+            if (!textSelection) return;
+
+            const allowed = config.textChecker?.(std.host) ?? true;
+            if (!allowed) return;
+
+            const event = ctx.get('keyboardState').raw;
+            event.stopPropagation();
+            event.preventDefault();
+
+            config.action(std.host);
+            return true;
+          },
+        };
+      },
+      {} as Record<string, UIEventHandler>
+    );

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

@@ -0,0 +1,15 @@
+import type { BlockStdScope, UIEventHandler } from '@blocksuite/block-std';
+
+import { textCommonKeymap } from './basic.js';
+import { bracketKeymap } from './bracket.js';
+import { textFormatKeymap } from './format.js';
+
+export const textKeymap = (
+  std: BlockStdScope
+): Record<string, UIEventHandler> => {
+  return {
+    ...textCommonKeymap(std),
+    ...textFormatKeymap(std),
+    ...bracketKeymap(std),
+  };
+};