From 27a57cc41a7b1c55fca34231cc3255787ec736cf Mon Sep 17 00:00:00 2001 From: rovshanmuradov Date: Sat, 24 Oct 2026 10:18:17 +0400 Subject: [PATCH 1/3] feat(core): accept extensions in createInlineContentSpec createReactInlineContentSpec and createStyleSpec accept extensions, but the vanilla createInlineContentSpec didn't. Also documents the extensions argument of createReactInlineContentSpec. --- .../features/custom-schemas/custom-inline-content.mdx | 9 ++++++++- .../ExtensionManager/ExtensionManager.node.test.ts | 2 +- packages/core/src/schema/inlineContent/createSpec.ts | 6 ++++++ packages/core/src/schema/inlineContent/internal.ts | 2 ++ 4 files changed, 17 insertions(+), 2 deletions(-) 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..b741acdf8b 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?: BlockNoteExtension[], ): 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). + +For example, inline math from `@blocknote/math-block` uses an extension to turn `$...$` typed in the editor into inline math. + ## 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, ); } From 94fc42faabb834fc151475ae347b7077406592a2 Mon Sep 17 00:00:00 2001 From: rovshanmuradov Date: Sat, 24 Oct 2026 10:22:06 +0400 Subject: [PATCH 2/3] docs: use a generic example for inline content extensions --- .../docs/features/custom-schemas/custom-inline-content.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b741acdf8b..a757f9fc0b 100644 --- a/docs/content/docs/features/custom-schemas/custom-inline-content.mdx +++ b/docs/content/docs/features/custom-schemas/custom-inline-content.mdx @@ -162,7 +162,7 @@ type ReactCustomInlineContentImplementation = { 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). -For example, inline math from `@blocknote/math-block` uses an extension to turn `$...$` typed in the editor into inline math. +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 From e0006de87c934b9502b499ffce81b0394c961b16 Mon Sep 17 00:00:00 2001 From: rovshanmuradov Date: Sat, 24 Oct 2026 10:28:23 +0400 Subject: [PATCH 3/3] docs: use the exported extension types in the inline content signature --- .../docs/features/custom-schemas/custom-inline-content.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a757f9fc0b..d8165130b8 100644 --- a/docs/content/docs/features/custom-schemas/custom-inline-content.mdx +++ b/docs/content/docs/features/custom-schemas/custom-inline-content.mdx @@ -17,7 +17,7 @@ Use the `createReactInlineContentSpec` function to create a custom inline conten function createReactInlineContentSpec( blockConfig: CustomInlineContentConfig, blockImplementation: ReactInlineContentImplementation, - extensions?: BlockNoteExtension[], + extensions?: (Extension | ExtensionFactoryInstance)[], ): InlineContentSpec; ```