diff --git a/docs/content/docs/features/custom-schemas/custom-inline-content.mdx b/docs/content/docs/features/custom-schemas/custom-inline-content.mdx index 5c97fcae72..d8165130b8 100644 --- a/docs/content/docs/features/custom-schemas/custom-inline-content.mdx +++ b/docs/content/docs/features/custom-schemas/custom-inline-content.mdx @@ -11,12 +11,13 @@ In addition to the default inline content types that BlockNote offers, you can a ## Creating a Custom Inline Content Type -Use the `createReactInlineContentSpec` function to create a custom inline content type. This function takes two arguments: +Use the `createReactInlineContentSpec` function to create a custom inline content type. This function takes three arguments: ```typescript function createReactInlineContentSpec( blockConfig: CustomInlineContentConfig, blockImplementation: ReactInlineContentImplementation, + extensions?: (Extension | ExtensionFactoryInstance)[], ): InlineContentSpec; ``` @@ -157,6 +158,12 @@ type ReactCustomInlineContentImplementation = { should also return an HTML inline element._ +### Inline Content Extensions + +While the example on this page doesn't use it, `createReactInlineContentSpec` takes a third, optional argument `extensions`. This is for adding editor `extensions` that are specific to the inline content, which you can find out more about [here](/docs/features/extensions). + +Inline content extensions are typically things like keyboard shortcuts, or input rules that turn typed text into the inline content. + ## Adding Custom Inline Content to the Editor Finally, create a BlockNoteSchema using the definition of your custom inline content: diff --git a/packages/core/src/editor/managers/ExtensionManager/ExtensionManager.node.test.ts b/packages/core/src/editor/managers/ExtensionManager/ExtensionManager.node.test.ts index a225205177..36af5d9c82 100644 --- a/packages/core/src/editor/managers/ExtensionManager/ExtensionManager.node.test.ts +++ b/packages/core/src/editor/managers/ExtensionManager/ExtensionManager.node.test.ts @@ -254,6 +254,7 @@ it("registers extensions and plugins from editor options, nested extensions, and const inlineSpec = createInlineContentSpec( { type: "customInline", propSchema: {}, content: "styled" }, { render }, + [inline.extension()], ); const styleSpec = createStyleSpec( { type: "customStyle", propSchema: "boolean" }, @@ -275,7 +276,6 @@ it("registers extensions and plugins from editor options, nested extensions, and inlineContentSpecs: { customInline: { ...inlineSpec, - extensions: [inline.extension()], implementation: { ...inlineSpec.implementation, node: inlineSpec.implementation.node.extend({ diff --git a/packages/core/src/schema/inlineContent/createSpec.ts b/packages/core/src/schema/inlineContent/createSpec.ts index ab16692f26..c4c020db43 100644 --- a/packages/core/src/schema/inlineContent/createSpec.ts +++ b/packages/core/src/schema/inlineContent/createSpec.ts @@ -10,6 +10,10 @@ import { import { inlineContentToNodes } from "../../api/nodeConversions/blockToNode.js"; import { nodeToCustomInlineContent } from "../../api/nodeConversions/nodeToBlock.js"; import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js"; +import type { + Extension, + ExtensionFactoryInstance, +} from "../../editor/BlockNoteExtension.js"; import { ignoreDarkReaderMutations } from "../nodeViewMutations.js"; import { propsToAttributes } from "../blocks/internal.js"; import { nonFormattingMarks } from "../markGroups.js"; @@ -259,6 +263,7 @@ export function createInlineContentSpec< >( inlineContentConfig: T, inlineContentImplementation: CustomInlineContentImplementation, + extensions?: (Extension | ExtensionFactoryInstance)[], ): InlineContentSpec { const node = Node.create({ name: inlineContentConfig.type, @@ -405,5 +410,6 @@ export function createInlineContentSpec< ); }, }, + extensions, ) as InlineContentSpec; } diff --git a/packages/core/src/schema/inlineContent/internal.ts b/packages/core/src/schema/inlineContent/internal.ts index cc603b2ee2..7b01492892 100644 --- a/packages/core/src/schema/inlineContent/internal.ts +++ b/packages/core/src/schema/inlineContent/internal.ts @@ -95,6 +95,7 @@ export function createInlineContentSpecFromTipTapNode< InlineContentImplementation, "node" >, + extensions?: (Extension | ExtensionFactoryInstance)[], ) { return createInternalInlineContentSpec( { @@ -119,6 +120,7 @@ export function createInlineContentSpecFromTipTapNode< propSchema: P; content: "styled" | "none" | "plain"; }>, + extensions, ); }