feat(editor): std inline extensions (#11038)

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

@@ -3,27 +3,32 @@ import {
   BoldInlineSpecExtension,
   CodeInlineSpecExtension,
   ColorInlineSpecExtension,
-  InlineManagerExtension,
-  InlineSpecExtension,
   ItalicInlineSpecExtension,
   LatexInlineSpecExtension,
   LinkInlineSpecExtension,
   StrikeInlineSpecExtension,
   UnderlineInlineSpecExtension,
 } from '@blocksuite/affine-rich-text';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import {
+  InlineManagerExtension,
+  InlineSpecExtension,
+} from '@blocksuite/block-std/inline';
 import { html } from 'lit';
 import { z } from 'zod';
 
-export const CodeBlockUnitSpecExtension = InlineSpecExtension({
+export const CodeBlockUnitSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
     name: 'code-block-unit',
     schema: z.undefined(),
     match: () => true,
     renderer: ({ delta }) => {
       return html`<affine-code-unit .delta=${delta}></affine-code-unit>`;
     },
-});
+  });
 
-export const CodeBlockInlineManagerExtension = InlineManagerExtension({
+export const CodeBlockInlineManagerExtension =
+  InlineManagerExtension<AffineTextAttributes>({
     id: 'CodeBlockInlineManager',
     enableMarkdown: false,
     specs: [
@@ -38,4 +43,4 @@ export const CodeBlockInlineManagerExtension = InlineManagerExtension({
       LinkInlineSpecExtension.identifier,
       CodeBlockUnitSpecExtension.identifier,
     ],
-});
+  });

blocksuite/affine/rich-text/src/all-extensions.ts

@@ -1,6 +1,7 @@
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { InlineManagerExtension } from '@blocksuite/block-std/inline';
 import type { ExtensionType } from '@blocksuite/store';
 
-import { InlineManagerExtension } from './extension/index.js';
 import {
   BackgroundInlineSpecExtension,
   BoldInlineSpecExtension,
@@ -19,7 +20,8 @@ import {
 } from './inline/index.js';
 import { LatexEditorInlineManagerExtension } from './inline/presets/nodes/latex-node/latex-editor-menu.js';
 
-export const DefaultInlineManagerExtension = InlineManagerExtension({
+export const DefaultInlineManagerExtension =
+  InlineManagerExtension<AffineTextAttributes>({
     id: 'DefaultInlineManager',
     specs: [
       BoldInlineSpecExtension.identifier,
@@ -34,7 +36,7 @@ export const DefaultInlineManagerExtension = InlineManagerExtension({
       LinkInlineSpecExtension.identifier,
       FootNoteInlineSpecExtension.identifier,
     ],
-});
+  });
 
 export const RichTextExtensions: ExtensionType[] = [
   InlineSpecExtensions,

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

@@ -1,5 +1 @@
-export * from './inline-manager.js';
-export * from './inline-spec.js';
-export * from './markdown-matcher.js';
 export * from './ref-node-slots.js';
-export * from './type.js';

blocksuite/affine/rich-text/src/extension/inline-manager.ts

@@ -1,106 +0,0 @@
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
-import { type BlockStdScope, StdIdentifier } from '@blocksuite/block-std';
-import {
-  type AttributeRenderer,
-  getDefaultAttributeRenderer,
-} from '@blocksuite/block-std/inline';
-import {
-  createIdentifier,
-  type ServiceIdentifier,
-} from '@blocksuite/global/di';
-import {
-  baseTextAttributes,
-  type DeltaInsert,
-  type ExtensionType,
-} from '@blocksuite/store';
-import { z, type ZodObject, type ZodTypeAny } from 'zod';
-
-import { MarkdownMatcherIdentifier } from './markdown-matcher.js';
-import type { InlineMarkdownMatch, InlineSpecs } from './type.js';
-
-export class InlineManager {
-  embedChecker = (delta: DeltaInsert<AffineTextAttributes>) => {
-    for (const spec of this.specs) {
-      if (spec.embed && spec.match(delta)) {
-        return true;
-      }
-    }
-    return false;
-  };
-
-  getRenderer = (): AttributeRenderer<AffineTextAttributes> => {
-    const defaultRenderer = getDefaultAttributeRenderer<AffineTextAttributes>();
-
-    const renderer: AttributeRenderer<AffineTextAttributes> = props => {
-      // Priority increases from front to back
-      for (const spec of this.specs.toReversed()) {
-        if (spec.match(props.delta)) {
-          return spec.renderer(props);
-        }
-      }
-      return defaultRenderer(props);
-    };
-    return renderer;
-  };
-
-  getSchema = (): ZodObject<Record<keyof AffineTextAttributes, ZodTypeAny>> => {
-    const defaultSchema = baseTextAttributes as unknown as ZodObject<
-      Record<keyof AffineTextAttributes, ZodTypeAny>
-    >;
-
-    const schema: ZodObject<Record<keyof AffineTextAttributes, ZodTypeAny>> =
-      this.specs.reduce((acc, cur) => {
-        const currentSchema = z.object({
-          [cur.name]: cur.schema,
-        }) as ZodObject<Record<keyof AffineTextAttributes, ZodTypeAny>>;
-        return acc.merge(currentSchema) as ZodObject<
-          Record<keyof AffineTextAttributes, ZodTypeAny>
-        >;
-      }, defaultSchema);
-    return schema;
-  };
-
-  readonly specs: Array<InlineSpecs<AffineTextAttributes>>;
-
-  constructor(
-    readonly std: BlockStdScope,
-    readonly markdownMatches: InlineMarkdownMatch<AffineTextAttributes>[],
-    ...specs: Array<InlineSpecs<AffineTextAttributes>>
-  ) {
-    this.specs = specs;
-  }
-}
-
-export const InlineManagerIdentifier = createIdentifier<InlineManager>(
-  'AffineInlineManager'
-);
-
-export type InlineManagerExtensionConfig = {
-  id: string;
-  enableMarkdown?: boolean;
-  specs: ServiceIdentifier<InlineSpecs<AffineTextAttributes>>[];
-};
-
-export function InlineManagerExtension({
-  id,
-  enableMarkdown = true,
-  specs,
-}: InlineManagerExtensionConfig): ExtensionType & {
-  identifier: ServiceIdentifier<InlineManager>;
-} {
-  const identifier = InlineManagerIdentifier(id);
-  return {
-    setup: di => {
-      di.addImpl(identifier, provider => {
-        return new InlineManager(
-          provider.get(StdIdentifier),
-          enableMarkdown
-            ? Array.from(provider.getAll(MarkdownMatcherIdentifier).values())
-            : [],
-          ...specs.map(spec => provider.get(spec))
-        );
-      });
-    },
-    identifier,
-  };
-}

blocksuite/affine/rich-text/src/extension/inline-spec.ts

@@ -1,47 +0,0 @@
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
-import {
-  createIdentifier,
-  type ServiceIdentifier,
-  type ServiceProvider,
-} from '@blocksuite/global/di';
-import type { ExtensionType } from '@blocksuite/store';
-
-import type { InlineSpecs } from './type.js';
-
-export const InlineSpecIdentifier =
-  createIdentifier<InlineSpecs<AffineTextAttributes>>('AffineInlineSpec');
-
-export function InlineSpecExtension(
-  name: string,
-  getSpec: (provider: ServiceProvider) => InlineSpecs<AffineTextAttributes>
-): ExtensionType & {
-  identifier: ServiceIdentifier<InlineSpecs<AffineTextAttributes>>;
-};
-export function InlineSpecExtension(
-  spec: InlineSpecs<AffineTextAttributes>
-): ExtensionType & {
-  identifier: ServiceIdentifier<InlineSpecs<AffineTextAttributes>>;
-};
-export function InlineSpecExtension(
-  nameOrSpec: string | InlineSpecs<AffineTextAttributes>,
-  getSpec?: (provider: ServiceProvider) => InlineSpecs<AffineTextAttributes>
-): ExtensionType & {
-  identifier: ServiceIdentifier<InlineSpecs<AffineTextAttributes>>;
-} {
-  if (typeof nameOrSpec === 'string') {
-    const identifier = InlineSpecIdentifier(nameOrSpec);
-    return {
-      identifier,
-      setup: di => {
-        di.addImpl(identifier, provider => getSpec!(provider));
-      },
-    };
-  }
-  const identifier = InlineSpecIdentifier(nameOrSpec.name);
-  return {
-    identifier,
-    setup: di => {
-      di.addImpl(identifier, nameOrSpec);
-    },
-  };
-}

blocksuite/affine/rich-text/src/extension/markdown-matcher.ts

@@ -1,27 +0,0 @@
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
-import {
-  createIdentifier,
-  type ServiceIdentifier,
-} from '@blocksuite/global/di';
-import type { ExtensionType } from '@blocksuite/store';
-
-import type { InlineMarkdownMatch } from './type.js';
-
-export const MarkdownMatcherIdentifier = createIdentifier<
-  InlineMarkdownMatch<AffineTextAttributes>
->('AffineMarkdownMatcher');
-
-export function InlineMarkdownExtension(
-  matcher: InlineMarkdownMatch<AffineTextAttributes>
-): ExtensionType & {
-  identifier: ServiceIdentifier<InlineMarkdownMatch<AffineTextAttributes>>;
-} {
-  const identifier = MarkdownMatcherIdentifier(matcher.name);
-
-  return {
-    setup: di => {
-      di.addImpl(identifier, () => ({ ...matcher }));
-    },
-    identifier,
-  };
-}

blocksuite/affine/rich-text/src/inline/presets/affine-inline-specs.ts

@@ -2,14 +2,14 @@ import { FootNoteSchema, ReferenceInfoSchema } from '@blocksuite/affine-model';
 import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { BlockFlavourIdentifier, StdIdentifier } from '@blocksuite/block-std';
-import type {
+import {
-  InlineEditor,
+  type InlineEditor,
-  InlineRootElement,
+  type InlineRootElement,
+  InlineSpecExtension,
 } from '@blocksuite/block-std/inline';
 import { html } from 'lit';
 import { z } from 'zod';
 
-import { InlineSpecExtension } from '../../extension/index.js';
 import { FootNoteNodeConfigIdentifier } from './nodes/footnote-node/footnote-config.js';
 import { builtinInlineLinkToolbarConfig } from './nodes/link-node/configs/toolbar.js';
 import { builtinInlineReferenceToolbarConfig } from './nodes/reference-node/configs/toolbar.js';
@@ -21,7 +21,8 @@ import {
 export type AffineInlineEditor = InlineEditor<AffineTextAttributes>;
 export type AffineInlineRootElement = InlineRootElement<AffineTextAttributes>;
 
-export const BoldInlineSpecExtension = InlineSpecExtension({
+export const BoldInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
     name: 'bold',
     schema: z.literal(true).optional().nullable().catch(undefined),
     match: delta => {
@@ -30,9 +31,10 @@ export const BoldInlineSpecExtension = InlineSpecExtension({
     renderer: ({ delta }) => {
       return html`<affine-text .delta=${delta}></affine-text>`;
     },
-});
+  });
 
-export const ItalicInlineSpecExtension = InlineSpecExtension({
+export const ItalicInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
     name: 'italic',
     schema: z.literal(true).optional().nullable().catch(undefined),
     match: delta => {
@@ -41,9 +43,10 @@ export const ItalicInlineSpecExtension = InlineSpecExtension({
     renderer: ({ delta }) => {
       return html`<affine-text .delta=${delta}></affine-text>`;
     },
-});
+  });
 
-export const UnderlineInlineSpecExtension = InlineSpecExtension({
+export const UnderlineInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
     name: 'underline',
     schema: z.literal(true).optional().nullable().catch(undefined),
     match: delta => {
@@ -52,9 +55,10 @@ export const UnderlineInlineSpecExtension = InlineSpecExtension({
     renderer: ({ delta }) => {
       return html`<affine-text .delta=${delta}></affine-text>`;
     },
-});
+  });
 
-export const StrikeInlineSpecExtension = InlineSpecExtension({
+export const StrikeInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
     name: 'strike',
     schema: z.literal(true).optional().nullable().catch(undefined),
     match: delta => {
@@ -63,9 +67,10 @@ export const StrikeInlineSpecExtension = InlineSpecExtension({
     renderer: ({ delta }) => {
       return html`<affine-text .delta=${delta}></affine-text>`;
     },
-});
+  });
 
-export const CodeInlineSpecExtension = InlineSpecExtension({
+export const CodeInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
     name: 'code',
     schema: z.literal(true).optional().nullable().catch(undefined),
     match: delta => {
@@ -74,9 +79,10 @@ export const CodeInlineSpecExtension = InlineSpecExtension({
     renderer: ({ delta }) => {
       return html`<affine-text .delta=${delta}></affine-text>`;
     },
-});
+  });
 
-export const BackgroundInlineSpecExtension = InlineSpecExtension({
+export const BackgroundInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
     name: 'background',
     schema: z.string().optional().nullable().catch(undefined),
     match: delta => {
@@ -85,9 +91,10 @@ export const BackgroundInlineSpecExtension = InlineSpecExtension({
     renderer: ({ delta }) => {
       return html`<affine-text .delta=${delta}></affine-text>`;
     },
-});
+  });
 
-export const ColorInlineSpecExtension = InlineSpecExtension({
+export const ColorInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
     name: 'color',
     schema: z.string().optional().nullable().catch(undefined),
     match: delta => {
@@ -96,11 +103,10 @@ export const ColorInlineSpecExtension = InlineSpecExtension({
     renderer: ({ delta }) => {
       return html`<affine-text .delta=${delta}></affine-text>`;
     },
-});
+  });
 
-export const LatexInlineSpecExtension = InlineSpecExtension(
+export const LatexInlineSpecExtension =
-  'latex',
+  InlineSpecExtension<AffineTextAttributes>('latex', provider => {
-  provider => {
     const std = provider.get(StdIdentifier);
     return {
       name: 'latex',
@@ -118,12 +124,10 @@ export const LatexInlineSpecExtension = InlineSpecExtension(
       },
       embed: true,
     };
-  }
+  });
-);
 
-export const ReferenceInlineSpecExtension = InlineSpecExtension(
+export const ReferenceInlineSpecExtension =
-  'reference',
+  InlineSpecExtension<AffineTextAttributes>('reference', provider => {
-  provider => {
     const std = provider.get(StdIdentifier);
     const configProvider = new ReferenceNodeConfigProvider(std);
     const config =
@@ -164,10 +168,10 @@ export const ReferenceInlineSpecExtension = InlineSpecExtension(
       },
       embed: true,
     };
-  }
+  });
-);
 
-export const LinkInlineSpecExtension = InlineSpecExtension('link', provider => {
+export const LinkInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>('link', provider => {
     const std = provider.get(StdIdentifier);
     return {
       name: 'link',
@@ -179,20 +183,20 @@ export const LinkInlineSpecExtension = InlineSpecExtension('link', provider => {
         return html`<affine-link .std=${std} .delta=${delta}></affine-link>`;
       },
     };
-});
+  });
 
-export const LatexEditorUnitSpecExtension = InlineSpecExtension({
+export const LatexEditorUnitSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>({
     name: 'latex-editor-unit',
     schema: z.undefined(),
     match: () => true,
     renderer: ({ delta }) => {
       return html`<latex-editor-unit .delta=${delta}></latex-editor-unit>`;
     },
-});
+  });
 
-export const FootNoteInlineSpecExtension = InlineSpecExtension(
+export const FootNoteInlineSpecExtension =
-  'footnote',
+  InlineSpecExtension<AffineTextAttributes>('footnote', provider => {
-  provider => {
     const std = provider.get(StdIdentifier);
     const config =
       provider.getOptional(FootNoteNodeConfigIdentifier) ?? undefined;
@@ -211,8 +215,7 @@ export const FootNoteInlineSpecExtension = InlineSpecExtension(
       },
       embed: true,
     };
-  }
+  });
-);
 
 export const InlineSpecExtensions = [
   BoldInlineSpecExtension,

blocksuite/affine/rich-text/src/inline/presets/markdown.ts

@@ -1,8 +1,8 @@
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import type { BlockComponent } from '@blocksuite/block-std';
+import { InlineMarkdownExtension } from '@blocksuite/block-std/inline';
 import type { ExtensionType } from '@blocksuite/store';
 
-import { InlineMarkdownExtension } from '../../extension/markdown-matcher.js';
-
 // inline markdown match rules:
 // covert: ***test*** + space
 // covert: ***t est*** + space
@@ -10,10 +10,17 @@ import { InlineMarkdownExtension } from '../../extension/markdown-matcher.js';
 // not convert: ***test *** + space
 // not convert: *** test *** + space
 
-export const BoldItalicMarkdown = InlineMarkdownExtension({
+export const BoldItalicMarkdown = InlineMarkdownExtension<AffineTextAttributes>(
+  {
     name: 'bolditalic',
     pattern: /.*\*{3}([^\s*][^*]*[^\s*])\*{3}$|.*\*{3}([^\s*])\*{3}$/,
-  action: ({ inlineEditor, prefixText, inlineRange, pattern, undoManager }) => {
+    action: ({
+      inlineEditor,
+      prefixText,
+      inlineRange,
+      pattern,
+      undoManager,
+    }) => {
       const match = prefixText.match(pattern);
       if (!match) return;
 
@@ -64,9 +71,10 @@ export const BoldItalicMarkdown = InlineMarkdownExtension({
         length: 0,
       });
     },
-});
+  }
+);
 
-export const BoldMarkdown = InlineMarkdownExtension({
+export const BoldMarkdown = InlineMarkdownExtension<AffineTextAttributes>({
   name: 'bold',
   pattern: /.*\*{2}([^\s][^*]*[^\s*])\*{2}$|.*\*{2}([^\s*])\*{2}$/,
   action: ({ inlineEditor, prefixText, inlineRange, pattern, undoManager }) => {
@@ -121,7 +129,7 @@ export const BoldMarkdown = InlineMarkdownExtension({
   },
 });
 
-export const ItalicExtension = InlineMarkdownExtension({
+export const ItalicExtension = InlineMarkdownExtension<AffineTextAttributes>({
   name: 'italic',
   pattern: /.*\*{1}([^\s][^*]*[^\s*])\*{1}$|.*\*{1}([^\s*])\*{1}$/,
   action: ({ inlineEditor, prefixText, inlineRange, pattern, undoManager }) => {
@@ -176,10 +184,17 @@ export const ItalicExtension = InlineMarkdownExtension({
   },
 });
 
-export const StrikethroughExtension = InlineMarkdownExtension({
+export const StrikethroughExtension =
+  InlineMarkdownExtension<AffineTextAttributes>({
     name: 'strikethrough',
     pattern: /.*~{2}([^\s][^~]*[^\s])~{2}$|.*~{2}([^\s~])~{2}$/,
-  action: ({ inlineEditor, prefixText, inlineRange, pattern, undoManager }) => {
+    action: ({
+      inlineEditor,
+      prefixText,
+      inlineRange,
+      pattern,
+      undoManager,
+    }) => {
       const match = prefixText.match(pattern);
       if (!match) return;
 
@@ -229,12 +244,19 @@ export const StrikethroughExtension = InlineMarkdownExtension({
         length: 0,
       });
     },
-});
+  });
 
-export const UnderthroughExtension = InlineMarkdownExtension({
+export const UnderthroughExtension =
+  InlineMarkdownExtension<AffineTextAttributes>({
     name: 'underthrough',
     pattern: /.*~{1}([^\s][^~]*[^\s~])~{1}$|.*~{1}([^\s~])~{1}$/,
-  action: ({ inlineEditor, prefixText, inlineRange, pattern, undoManager }) => {
+    action: ({
+      inlineEditor,
+      prefixText,
+      inlineRange,
+      pattern,
+      undoManager,
+    }) => {
       const match = prefixText.match(pattern);
       if (!match) return;
 
@@ -284,9 +306,9 @@ export const UnderthroughExtension = InlineMarkdownExtension({
         length: 0,
       });
     },
-});
+  });
 
-export const CodeExtension = InlineMarkdownExtension({
+export const CodeExtension = InlineMarkdownExtension<AffineTextAttributes>({
   name: 'code',
   pattern: /.*`([^\s][^`]*[^\s])`$|.*`([^\s`])`$/,
   action: ({ inlineEditor, prefixText, inlineRange, pattern, undoManager }) => {
@@ -341,7 +363,7 @@ export const CodeExtension = InlineMarkdownExtension({
   },
 });
 
-export const LinkExtension = InlineMarkdownExtension({
+export const LinkExtension = InlineMarkdownExtension<AffineTextAttributes>({
   name: 'link',
   pattern: /.*\[(.+?)\]\((.+?)\)$/,
   action: ({ inlineEditor, prefixText, inlineRange, pattern, undoManager }) => {
@@ -401,7 +423,7 @@ export const LinkExtension = InlineMarkdownExtension({
   },
 });
 
-export const LatexExtension = InlineMarkdownExtension({
+export const LatexExtension = InlineMarkdownExtension<AffineTextAttributes>({
   name: 'latex',
 
   pattern:

blocksuite/affine/rich-text/src/inline/presets/nodes/latex-node/latex-editor-menu.ts

@@ -1,7 +1,9 @@
 import { ColorScheme } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { type BlockStdScope, ShadowlessElement } from '@blocksuite/block-std';
+import { InlineManagerExtension } from '@blocksuite/block-std/inline';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { noop } from '@blocksuite/global/utils';
 import { DoneIcon } from '@blocksuite/icons/lit';
@@ -11,14 +13,14 @@ import { property } from 'lit/decorators.js';
 import { codeToTokensBase, type ThemedToken } from 'shiki';
 import * as Y from 'yjs';
 
-import { InlineManagerExtension } from '../../../../extension/index.js';
 import { LatexEditorUnitSpecExtension } from '../../affine-inline-specs.js';
 
-export const LatexEditorInlineManagerExtension = InlineManagerExtension({
+export const LatexEditorInlineManagerExtension =
+  InlineManagerExtension<AffineTextAttributes>({
     id: 'latex-inline-editor',
     enableMarkdown: false,
     specs: [LatexEditorUnitSpecExtension.identifier],
-});
+  });
 
 export class LatexEditorMenu extends SignalWatcher(
   WithDisposable(ShadowlessElement)

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

@@ -3,6 +3,7 @@ import { ShadowlessElement } from '@blocksuite/block-std';
 import {
   type AttributeRenderer,
   InlineEditor,
+  type InlineMarkdownMatch,
   type InlineRange,
   type InlineRangeProvider,
   type VLine,
@@ -17,7 +18,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import * as Y from 'yjs';
 import { z } from 'zod';
 
-import type { InlineMarkdownMatch } from './extension/type.js';
 import { onVBeforeinput, onVCompositionEnd } from './hooks.js';
 import type { AffineInlineEditor } from './inline/index.js';
 

blocksuite/framework/block-std/src/inline/extensions/index.ts

@@ -0,0 +1,4 @@
+export * from './inline-manager';
+export * from './inline-spec';
+export * from './markdown-matcher';
+export * from './type';

blocksuite/framework/block-std/src/inline/extensions/inline-manager.ts

@@ -0,0 +1,117 @@
+import {
+  createIdentifier,
+  type ServiceIdentifier,
+} from '@blocksuite/global/di';
+import {
+  type BaseTextAttributes,
+  baseTextAttributes,
+  type DeltaInsert,
+  type ExtensionType,
+} from '@blocksuite/store';
+import { z, type ZodObject, type ZodTypeAny } from 'zod';
+
+import { StdIdentifier } from '../../identifier.js';
+import type { BlockStdScope } from '../../scope/index.js';
+import type { AttributeRenderer } from '../types.js';
+import { getDefaultAttributeRenderer } from '../utils/attribute-renderer.js';
+import { MarkdownMatcherIdentifier } from './markdown-matcher.js';
+import type { InlineMarkdownMatch, InlineSpecs } from './type.js';
+
+export class InlineManager<TextAttributes extends BaseTextAttributes> {
+  embedChecker = (delta: DeltaInsert<TextAttributes>) => {
+    for (const spec of this.specs) {
+      if (spec.embed && spec.match(delta)) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  getRenderer = (): AttributeRenderer<TextAttributes> => {
+    const defaultRenderer = getDefaultAttributeRenderer<TextAttributes>();
+
+    const renderer: AttributeRenderer<TextAttributes> = props => {
+      // Priority increases from front to back
+      for (const spec of this.specs.toReversed()) {
+        if (spec.match(props.delta)) {
+          return spec.renderer(props);
+        }
+      }
+      return defaultRenderer(props);
+    };
+    return renderer;
+  };
+
+  getSchema = (): ZodObject<Record<keyof TextAttributes, ZodTypeAny>> => {
+    const defaultSchema = baseTextAttributes as unknown as ZodObject<
+      Record<keyof TextAttributes, ZodTypeAny>
+    >;
+
+    const schema: ZodObject<Record<keyof TextAttributes, ZodTypeAny>> =
+      this.specs.reduce((acc, cur) => {
+        const currentSchema = z.object({
+          [cur.name]: cur.schema,
+        }) as ZodObject<Record<keyof TextAttributes, ZodTypeAny>>;
+        return acc.merge(currentSchema) as ZodObject<
+          Record<keyof TextAttributes, ZodTypeAny>
+        >;
+      }, defaultSchema);
+    return schema;
+  };
+
+  get markdownMatches(): InlineMarkdownMatch<TextAttributes>[] {
+    if (!this.enableMarkdown) {
+      return [];
+    }
+    const matches = Array.from(
+      this.std.provider.getAll(MarkdownMatcherIdentifier).values()
+    );
+    return matches as InlineMarkdownMatch<TextAttributes>[];
+  }
+
+  readonly specs: Array<InlineSpecs<TextAttributes>>;
+
+  constructor(
+    readonly std: BlockStdScope,
+    readonly enableMarkdown: boolean,
+    ...specs: Array<InlineSpecs<TextAttributes>>
+  ) {
+    this.specs = specs;
+  }
+}
+
+export type InlineManagerExtensionConfig<
+  TextAttributes extends BaseTextAttributes,
+> = {
+  id: string;
+  enableMarkdown?: boolean;
+  specs: ServiceIdentifier<InlineSpecs<TextAttributes>>[];
+};
+
+const InlineManagerIdentifier = createIdentifier<unknown>(
+  'AffineInlineManager'
+);
+
+export function InlineManagerExtension<
+  TextAttributes extends BaseTextAttributes,
+>({
+  id,
+  enableMarkdown = true,
+  specs,
+}: InlineManagerExtensionConfig<TextAttributes>): ExtensionType & {
+  identifier: ServiceIdentifier<InlineManager<TextAttributes>>;
+} {
+  const identifier = InlineManagerIdentifier<InlineManager<TextAttributes>>(id);
+  return {
+    setup: di => {
+      di.addImpl(identifier, provider => {
+        return new InlineManager(
+          provider.get(StdIdentifier),
+          enableMarkdown,
+          ...specs.map(spec => provider.get(spec))
+        );
+      });
+    },
+    identifier,
+  };
+}

blocksuite/framework/block-std/src/inline/extensions/inline-spec.ts

@@ -0,0 +1,49 @@
+import {
+  createIdentifier,
+  type ServiceIdentifier,
+  type ServiceProvider,
+} from '@blocksuite/global/di';
+import type { BaseTextAttributes, ExtensionType } from '@blocksuite/store';
+
+import type { InlineSpecs } from './type.js';
+
+export const InlineSpecIdentifier =
+  createIdentifier<unknown>('AffineInlineSpec');
+
+export function InlineSpecExtension<TextAttributes extends BaseTextAttributes>(
+  name: string,
+  getSpec: (provider: ServiceProvider) => InlineSpecs<TextAttributes>
+): ExtensionType & {
+  identifier: ServiceIdentifier<InlineSpecs<TextAttributes>>;
+};
+export function InlineSpecExtension<TextAttributes extends BaseTextAttributes>(
+  spec: InlineSpecs<TextAttributes>
+): ExtensionType & {
+  identifier: ServiceIdentifier<InlineSpecs<TextAttributes>>;
+};
+export function InlineSpecExtension<TextAttributes extends BaseTextAttributes>(
+  nameOrSpec: string | InlineSpecs<TextAttributes>,
+  getSpec?: (provider: ServiceProvider) => InlineSpecs<TextAttributes>
+): ExtensionType & {
+  identifier: ServiceIdentifier<InlineSpecs<TextAttributes>>;
+} {
+  if (typeof nameOrSpec === 'string') {
+    const identifier =
+      InlineSpecIdentifier<InlineSpecs<TextAttributes>>(nameOrSpec);
+    return {
+      identifier,
+      setup: di => {
+        di.addImpl(identifier, provider => getSpec!(provider));
+      },
+    };
+  }
+  const identifier = InlineSpecIdentifier<InlineSpecs<TextAttributes>>(
+    nameOrSpec.name as string
+  );
+  return {
+    identifier,
+    setup: di => {
+      di.addImpl(identifier, nameOrSpec);
+    },
+  };
+}

blocksuite/framework/block-std/src/inline/extensions/markdown-matcher.ts

@@ -0,0 +1,30 @@
+import {
+  createIdentifier,
+  type ServiceIdentifier,
+} from '@blocksuite/global/di';
+import type { BaseTextAttributes, ExtensionType } from '@blocksuite/store';
+
+import type { InlineMarkdownMatch } from './type.js';
+
+export const MarkdownMatcherIdentifier = createIdentifier<unknown>(
+  'AffineMarkdownMatcher'
+);
+
+export function InlineMarkdownExtension<
+  TextAttributes extends BaseTextAttributes,
+>(
+  matcher: InlineMarkdownMatch<TextAttributes>
+): ExtensionType & {
+  identifier: ServiceIdentifier<InlineMarkdownMatch<TextAttributes>>;
+} {
+  const identifier = MarkdownMatcherIdentifier<
+    InlineMarkdownMatch<TextAttributes>
+  >(matcher.name);
+
+  return {
+    setup: di => {
+      di.addImpl(identifier, () => ({ ...matcher }));
+    },
+    identifier,
+  };
+}

blocksuite/framework/block-std/src/inline/extensions/type.ts

@@ -8,12 +8,12 @@ import type * as Y from 'yjs';
 import type { ZodTypeAny } from 'zod';
 
 export type InlineSpecs<
-  AffineTextAttributes extends BaseTextAttributes = BaseTextAttributes,
+  TextAttributes extends BaseTextAttributes = BaseTextAttributes,
 > = {
-  name: keyof AffineTextAttributes | string;
+  name: keyof TextAttributes | string;
   schema: ZodTypeAny;
-  match: (delta: DeltaInsert<AffineTextAttributes>) => boolean;
+  match: (delta: DeltaInsert<TextAttributes>) => boolean;
-  renderer: AttributeRenderer<AffineTextAttributes>;
+  renderer: AttributeRenderer<TextAttributes>;
   embed?: boolean;
 };
 

blocksuite/framework/block-std/src/inline/index.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './consts';
+export * from './extensions';
 export * from './inline-editor';
 export * from './range';
 export * from './services';