fix(editor): support markdown transform when using IME (#12778)

Fix #12284 
Close
[BS-3517](https://linear.app/affine-design/issue/BS-3517/微软新注音输入法无法使用markdown语法)

This PR refactor the markdown transform during inputting, including:
- Transfrom markdown syntax input in `inlineEditor.slots.inputting`,
where we can detect the space character inputed by IME like Microsoft
Bopomofo, but `keydown` event can't.
- Remove `markdown-input.ts` which was used in `KeymapExtension` of
paragraph, and refactor with `InlineMarkdownExtension`
- Adjust existing `InlineMarkdownExtension` since the space is included
in text.
- Add two `InlineMarkdownExtension` for paragraph and list to impl
Heading1-6, number, bullet, to-do list conversion.

Other changes:
- Improve type hint for parameter of `store.addBlock`

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Added markdown shortcuts for creating code blocks and dividers in the
rich text editor.
- Introduced enhanced paragraph markdown support for headings and
blockquotes with inline markdown patterns.
- Integrated new list markdown extension supporting numbered, bulleted,
and todo lists with checked states.

- **Improvements**
- Updated markdown formatting patterns to require trailing spaces for
links, LaTeX, and inline styles, improving detection accuracy.
- Markdown transformations now respond to input events instead of
keydown for smoother editing experience.
- Added focus management after markdown transformations to maintain
seamless editing flow.

- **Bug Fixes**
- Removed unnecessary prevention of default behavior on space and
shift-space key presses in list and paragraph editors.

- **Refactor**
- Enhanced event handling and typing for editor input events, improving
reliability and maintainability.
- Refined internal prefix text extraction logic for markdown processing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -0,0 +1,61 @@
+import {
+  type CodeBlockModel,
+  CodeBlockSchema,
+  ParagraphBlockModel,
+} from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import type { BlockComponent } from '@blocksuite/std';
+import { InlineMarkdownExtension } from '@blocksuite/std/inline';
+
+export const CodeBlockMarkdownExtension =
+  InlineMarkdownExtension<AffineTextAttributes>({
+    name: 'code-block',
+    pattern: /^```([a-zA-Z0-9]*)\s$/,
+    action: ({ inlineEditor, inlineRange, prefixText, pattern }) => {
+      if (inlineEditor.yTextString.slice(0, inlineRange.index).includes('\n')) {
+        return;
+      }
+
+      const match = prefixText.match(pattern);
+      if (!match) return;
+
+      const language = match[1];
+
+      if (!inlineEditor.rootElement) return;
+      const blockComponent =
+        inlineEditor.rootElement.closest<BlockComponent>('[data-block-id]');
+      if (!blockComponent) return;
+
+      const { model, std, store } = blockComponent;
+
+      if (
+        matchModels(model, [ParagraphBlockModel]) &&
+        model.props.type === 'quote'
+      ) {
+        return;
+      }
+
+      const parent = store.getParent(model);
+      if (!parent) return;
+      const index = parent.children.indexOf(model);
+
+      store.captureSync();
+      const codeId = store.addBlock<CodeBlockModel>(
+        CodeBlockSchema.model.flavour,
+        { language },
+        parent,
+        index
+      );
+
+      if (model.text && model.text.length > prefixText.length) {
+        const text = model.text.clone();
+        store.addBlock('affine:paragraph', { text }, parent, index + 1);
+        text.delete(0, prefixText.length);
+      }
+      store.deleteBlock(model, { bringChildrenTo: parent });
+
+      focusTextModel(std, codeId);
+    },
+  });

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

@@ -21,6 +21,7 @@ import { CodeKeymapExtension } from './code-keymap.js';
 import { AFFINE_CODE_TOOLBAR_WIDGET } from './code-toolbar/index.js';
 import { codeSlashMenuConfig } from './configs/slash-menu.js';
 import { effects } from './effects.js';
+import { CodeBlockMarkdownExtension } from './markdown.js';
 
 const codeToolbarWidget = WidgetViewExtension(
   'affine:code',
@@ -44,6 +45,7 @@ export class CodeBlockViewExtension extends ViewExtensionProvider {
       BlockViewExtension('affine:code', literal`affine-code`),
       SlashMenuConfigExtension('affine:code', codeSlashMenuConfig),
       CodeKeymapExtension,
+      CodeBlockMarkdownExtension,
       ...getCodeClipboardExtensions(),
     ]);
     context.register([

blocksuite/affine/blocks/divider/package.json

@@ -13,6 +13,7 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@blocksuite/std": "workspace:*",

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

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

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

@@ -6,6 +6,7 @@ import { BlockViewExtension } from '@blocksuite/std';
 import { literal } from 'lit/static-html.js';
 
 import { effects } from './effects';
+import { DividerMarkdownExtension } from './markdown';
 
 export class DividerViewExtension extends ViewExtensionProvider {
   override name = 'affine-divider-block';
@@ -19,6 +20,7 @@ export class DividerViewExtension extends ViewExtensionProvider {
     super.setup(context);
     context.register([
       BlockViewExtension('affine:divider', literal`affine-divider`),
+      DividerMarkdownExtension,
     ]);
   }
 }

blocksuite/affine/blocks/divider/tsconfig.json

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

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

@@ -1,6 +1,5 @@
 import { textKeymap } from '@blocksuite/affine-inline-preset';
 import { ListBlockSchema } from '@blocksuite/affine-model';
-import { markdownInput } from '@blocksuite/affine-rich-text';
 import { getSelectedModelsCommand } from '@blocksuite/affine-shared/commands';
 import { IS_MAC } from '@blocksuite/global/env';
 import { KeymapExtension, TextSelection } from '@blocksuite/std';
@@ -125,20 +124,6 @@ export const ListKeymapExtension = KeymapExtension(
         ctx.get('keyboardState').raw.preventDefault();
         return true;
       },
-      Space: ctx => {
-        if (!markdownInput(std)) {
-          return;
-        }
-        ctx.get('keyboardState').raw.preventDefault();
-        return true;
-      },
-      'Shift-Space': ctx => {
-        if (!markdownInput(std)) {
-          return;
-        }
-        ctx.get('keyboardState').raw.preventDefault();
-        return true;
-      },
     };
   },
   {

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

@@ -0,0 +1,91 @@
+import {
+  type ListBlockModel,
+  ListBlockSchema,
+  type ListType,
+  ParagraphBlockModel,
+} from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { matchModels, toNumberedList } from '@blocksuite/affine-shared/utils';
+import type { BlockComponent } from '@blocksuite/std';
+import { InlineMarkdownExtension } from '@blocksuite/std/inline';
+
+export const ListMarkdownExtension =
+  InlineMarkdownExtension<AffineTextAttributes>({
+    name: 'list',
+    // group 2: number
+    // group 3: bullet
+    // group 4: bullet
+    // group 5: todo
+    // group 6: todo checked
+    pattern: /^((\d+\.)|(-)|(\*)|(\[ ?\])|(\[x\]))\s$/,
+    action: ({ inlineEditor, pattern, inlineRange, prefixText }) => {
+      if (inlineEditor.yTextString.slice(0, inlineRange.index).includes('\n')) {
+        return;
+      }
+
+      const match = prefixText.match(pattern);
+      if (!match) return;
+
+      let type: ListType;
+
+      if (match[2]) {
+        type = 'numbered';
+      } else if (match[3] || match[4]) {
+        type = 'bulleted';
+      } else if (match[5] || match[6]) {
+        type = 'todo';
+      } else {
+        return;
+      }
+
+      const checked = match[6] !== undefined;
+
+      if (!inlineEditor.rootElement) return;
+      const blockComponent =
+        inlineEditor.rootElement.closest<BlockComponent>('[data-block-id]');
+      if (!blockComponent) return;
+
+      const { model, std, store } = blockComponent;
+      if (!matchModels(model, [ParagraphBlockModel])) return;
+
+      if (type !== 'numbered') {
+        const parent = store.getParent(model);
+        if (!parent) return;
+        const index = parent.children.indexOf(model);
+
+        store.captureSync();
+        inlineEditor.deleteText({
+          index: 0,
+          length: inlineRange.index,
+        });
+        const id = store.addBlock<ListBlockModel>(
+          ListBlockSchema.model.flavour,
+          {
+            type: type,
+            text: model.text?.clone(),
+            children: model.children,
+            ...(type === 'todo' ? { checked } : {}),
+          },
+          parent,
+          index
+        );
+        store.deleteBlock(model, { deleteChildren: false });
+        focusTextModel(std, id);
+      } else {
+        let order = parseInt(match[2]);
+        if (!Number.isInteger(order)) order = 1;
+
+        store.captureSync();
+        inlineEditor.deleteText({
+          index: 0,
+          length: inlineRange.index,
+        });
+
+        const id = toNumberedList(std, model, order);
+        if (!id) return;
+
+        focusTextModel(std, id);
+      }
+    },
+  });

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

@@ -7,6 +7,7 @@ import { literal } from 'lit/static-html.js';
 
 import { effects } from './effects.js';
 import { ListKeymapExtension, ListTextKeymapExtension } from './list-keymap.js';
+import { ListMarkdownExtension } from './markdown.js';
 
 export class ListViewExtension extends ViewExtensionProvider {
   override name = 'affine-list-block';
@@ -23,6 +24,7 @@ export class ListViewExtension extends ViewExtensionProvider {
       BlockViewExtension('affine:list', literal`affine-list`),
       ListKeymapExtension,
       ListTextKeymapExtension,
+      ListMarkdownExtension,
     ]);
   }
 }

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

@@ -0,0 +1,74 @@
+import {
+  ListBlockModel,
+  ParagraphBlockModel,
+  ParagraphBlockSchema,
+  type ParagraphType,
+} from '@blocksuite/affine-model';
+import { focusTextModel } from '@blocksuite/affine-rich-text';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { matchModels } from '@blocksuite/affine-shared/utils';
+import type { BlockComponent } from '@blocksuite/std';
+import { InlineMarkdownExtension } from '@blocksuite/std/inline';
+
+export const ParagraphMarkdownExtension =
+  InlineMarkdownExtension<AffineTextAttributes>({
+    name: 'heading',
+    pattern: /^((#{1,6})|(>))\s$/,
+    action: ({ inlineEditor, pattern, inlineRange, prefixText }) => {
+      if (inlineEditor.yTextString.slice(0, inlineRange.index).includes('\n')) {
+        return;
+      }
+
+      const match = prefixText.match(pattern);
+      if (!match) return;
+
+      const type = (
+        match[2] ? `h${match[2].length}` : 'quote'
+      ) as ParagraphType;
+
+      if (!inlineEditor.rootElement) return;
+      const blockComponent =
+        inlineEditor.rootElement.closest<BlockComponent>('[data-block-id]');
+      if (!blockComponent) return;
+
+      const { model, std, store } = blockComponent;
+      if (
+        !matchModels(model, [ParagraphBlockModel]) &&
+        matchModels(model, [ListBlockModel])
+      ) {
+        const parent = store.getParent(model);
+        if (!parent) return;
+        const index = parent.children.indexOf(model);
+
+        store.captureSync();
+        inlineEditor.deleteText({
+          index: 0,
+          length: inlineRange.index,
+        });
+        store.deleteBlock(model, { deleteChildren: false });
+        const id = store.addBlock<ParagraphBlockModel>(
+          ParagraphBlockSchema.model.flavour,
+          {
+            type: type,
+            text: model.text?.clone(),
+            children: model.children,
+          },
+          parent,
+          index
+        );
+
+        focusTextModel(std, id);
+      } else if (
+        matchModels(model, [ParagraphBlockModel]) &&
+        model.props.type !== type
+      ) {
+        store.captureSync();
+        inlineEditor.deleteText({
+          index: 0,
+          length: inlineRange.index,
+        });
+        store.updateBlock(model, { type });
+        focusTextModel(std, model.id);
+      }
+    },
+  });

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

@@ -7,7 +7,6 @@ import {
 import {
   focusTextModel,
   getInlineEditorByModel,
-  markdownInput,
 } from '@blocksuite/affine-rich-text';
 import {
   calculateCollapsedSiblings,
@@ -148,10 +147,6 @@ export const ParagraphKeymapExtension = KeymapExtension(
 
         raw.preventDefault();
 
-        if (markdownInput(std, model.id)) {
-          return true;
-        }
-
         if (model.props.type.startsWith('h') && model.props.collapsed) {
           const parent = store.getParent(model);
           if (!parent) return true;
@@ -199,20 +194,6 @@ export const ParagraphKeymapExtension = KeymapExtension(
         event.preventDefault();
         return true;
       },
-      Space: ctx => {
-        if (!markdownInput(std)) {
-          return;
-        }
-        ctx.get('keyboardState').raw.preventDefault();
-        return true;
-      },
-      'Shift-Space': ctx => {
-        if (!markdownInput(std)) {
-          return;
-        }
-        ctx.get('keyboardState').raw.preventDefault();
-        return true;
-      },
       Tab: ctx => {
         const [success] = std.command
           .chain()

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

@@ -2,9 +2,13 @@ import {
   type ViewExtensionContext,
   ViewExtensionProvider,
 } from '@blocksuite/affine-ext-loader';
+import { ParagraphBlockModel } from '@blocksuite/affine-model';
 import { BlockViewExtension, FlavourExtension } from '@blocksuite/std';
 import { literal } from 'lit/static-html.js';
+import { z } from 'zod';
 
+import { effects } from './effects';
+import { ParagraphMarkdownExtension } from './markdown.js';
 import { ParagraphBlockConfigExtension } from './paragraph-block-config.js';
 import {
   ParagraphKeymapExtension,
@@ -22,11 +26,6 @@ const placeholders = {
   quote: '',
 };
 
-import { ParagraphBlockModel } from '@blocksuite/affine-model';
-import { z } from 'zod';
-
-import { effects } from './effects';
-
 const optionsSchema = z.object({
   getPlaceholder: z.optional(
     z.function().args(z.instanceof(ParagraphBlockModel)).returns(z.string())
@@ -61,6 +60,7 @@ export class ParagraphViewExtension extends ViewExtensionProvider<
       ParagraphBlockConfigExtension({
         getPlaceholder,
       }),
+      ParagraphMarkdownExtension,
     ]);
   }
 }