luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Saul-Mirone
2025-03-20 10:40:11 +00:00
parent b24376a9f7
commit 77e659d0b0
16 changed files with 552 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
blocksuite/affine/blocks/block-code/src/code-block-inline.ts
View File

@@ -3,18 +3,22 @@ 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,
@@ -23,7 +27,8 @@ export const CodeBlockUnitSpecExtension = InlineSpecExtension({
},
});
export const CodeBlockInlineManagerExtension = InlineManagerExtension({
export const CodeBlockInlineManagerExtension =
InlineManagerExtension<AffineTextAttributes>({
id: 'CodeBlockInlineManager',
enableMarkdown: false,
specs: [

6
blocksuite/affine/rich-text/src/all-extensions.ts
View File

@@ -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,

4
blocksuite/affine/rich-text/src/extension/index.ts
View File

@@ -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';

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

@@ -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,
};
}

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

@@ -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);
},
};
}

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

@@ -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,
};
}

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

@@ -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 {
InlineEditor,
InlineRootElement,
import {
type InlineEditor,
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 => {
@@ -32,7 +33,8 @@ export const BoldInlineSpecExtension = InlineSpecExtension({
},
});
export const ItalicInlineSpecExtension = InlineSpecExtension({
export const ItalicInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>({
name: 'italic',
schema: z.literal(true).optional().nullable().catch(undefined),
match: delta => {
@@ -43,7 +45,8 @@ export const ItalicInlineSpecExtension = InlineSpecExtension({
},
});
export const UnderlineInlineSpecExtension = InlineSpecExtension({
export const UnderlineInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>({
name: 'underline',
schema: z.literal(true).optional().nullable().catch(undefined),
match: delta => {
@@ -54,7 +57,8 @@ export const UnderlineInlineSpecExtension = InlineSpecExtension({
},
});
export const StrikeInlineSpecExtension = InlineSpecExtension({
export const StrikeInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>({
name: 'strike',
schema: z.literal(true).optional().nullable().catch(undefined),
match: delta => {
@@ -65,7 +69,8 @@ export const StrikeInlineSpecExtension = InlineSpecExtension({
},
});
export const CodeInlineSpecExtension = InlineSpecExtension({
export const CodeInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>({
name: 'code',
schema: z.literal(true).optional().nullable().catch(undefined),
match: delta => {
@@ -76,7 +81,8 @@ export const CodeInlineSpecExtension = InlineSpecExtension({
},
});
export const BackgroundInlineSpecExtension = InlineSpecExtension({
export const BackgroundInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>({
name: 'background',
schema: z.string().optional().nullable().catch(undefined),
match: delta => {
@@ -87,7 +93,8 @@ export const BackgroundInlineSpecExtension = InlineSpecExtension({
},
});
export const ColorInlineSpecExtension = InlineSpecExtension({
export const ColorInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>({
name: 'color',
schema: z.string().optional().nullable().catch(undefined),
match: delta => {
@@ -98,9 +105,8 @@ export const ColorInlineSpecExtension = InlineSpecExtension({
},
});
export const LatexInlineSpecExtension = InlineSpecExtension(
'latex',
provider => {
export const LatexInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>('latex', provider => {
const std = provider.get(StdIdentifier);
return {
name: 'latex',
@@ -118,12 +124,10 @@ export const LatexInlineSpecExtension = InlineSpecExtension(
},
embed: true,
};
}
);
});
export const ReferenceInlineSpecExtension = InlineSpecExtension(
'reference',
provider => {
export const ReferenceInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>('reference', 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',
@@ -181,7 +185,8 @@ export const LinkInlineSpecExtension = InlineSpecExtension('link', provider => {
};
});
export const LatexEditorUnitSpecExtension = InlineSpecExtension({
export const LatexEditorUnitSpecExtension =
InlineSpecExtension<AffineTextAttributes>({
name: 'latex-editor-unit',
schema: z.undefined(),
match: () => true,
@@ -190,9 +195,8 @@ export const LatexEditorUnitSpecExtension = InlineSpecExtension({
},
});
export const FootNoteInlineSpecExtension = InlineSpecExtension(
'footnote',
provider => {
export const FootNoteInlineSpecExtension =
InlineSpecExtension<AffineTextAttributes>('footnote', 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,

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

@@ -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;
@@ -231,10 +246,17 @@ export const StrikethroughExtension = InlineMarkdownExtension({
},
});
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;
@@ -286,7 +308,7 @@ export const UnderthroughExtension = InlineMarkdownExtension({
},
});
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:

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

@@ -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,10 +13,10 @@ 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],

2
blocksuite/affine/rich-text/src/rich-text.ts
View File

@@ -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';

4
blocksuite/framework/block-std/src/inline/extensions/index.ts Normal file
View File

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

117
blocksuite/framework/block-std/src/inline/extensions/inline-manager.ts Normal file
View File

@@ -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,
};
}

49
blocksuite/framework/block-std/src/inline/extensions/inline-spec.ts Normal file
View File

@@ -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);
},
};
}

30
blocksuite/framework/block-std/src/inline/extensions/markdown-matcher.ts Normal file
View File

@@ -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,
};
}

8
blocksuite/affine/rich-text/src/extension/type.ts → blocksuite/framework/block-std/src/inline/extensions/type.ts
View File

@@ -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;
renderer: AttributeRenderer<AffineTextAttributes>;
match: (delta: DeltaInsert<TextAttributes>) => boolean;
renderer: AttributeRenderer<TextAttributes>;
embed?: boolean;
};

1
blocksuite/framework/block-std/src/inline/index.ts
View File

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