feat: added type guards, types, and editor prop to custom inline content rendering (#1736)

Author: matthewlipski

packages/core/src/blocks/defaultBlockTypeGuards.ts

@@ -1,9 +1,11 @@
 import { CellSelection } from "prosemirror-tables";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
 import {
+  BlockConfig,
   BlockFromConfig,
   BlockSchema,
   FileBlockConfig,
+  InlineContentConfig,
   InlineContentSchema,
   StyleSchema,
 } from "../schema/index.js";
@@ -35,6 +37,20 @@ export function checkDefaultBlockTypeInSchema<
   );
 }
 
+export function checkBlockTypeInSchema<
+  BlockType extends string,
+  Config extends BlockConfig,
+>(
+  blockType: BlockType,
+  blockConfig: Config,
+  editor: BlockNoteEditor<any, any, any>,
+): editor is BlockNoteEditor<{ [T in BlockType]: Config }, any, any> {
+  return (
+    blockType in editor.schema.blockSchema &&
+    editor.schema.blockSchema[blockType] === blockConfig
+  );
+}
+
 export function checkDefaultInlineContentTypeInSchema<
   InlineContentType extends keyof DefaultInlineContentSchema,
   B extends BlockSchema,
@@ -54,6 +70,20 @@ export function checkDefaultInlineContentTypeInSchema<
   );
 }
 
+export function checkInlineContentTypeInSchema<
+  InlineContentType extends string,
+  Config extends InlineContentConfig,
+>(
+  inlineContentType: InlineContentType,
+  inlineContentConfig: Config,
+  editor: BlockNoteEditor<any, any, any>,
+): editor is BlockNoteEditor<any, { [T in InlineContentType]: Config }, any> {
+  return (
+    inlineContentType in editor.schema.inlineContentSchema &&
+    editor.schema.inlineContentSchema[inlineContentType] === inlineContentConfig
+  );
+}
+
 export function checkBlockIsDefaultType<
   BlockType extends keyof DefaultBlockSchema,
   I extends InlineContentSchema,

packages/core/src/schema/inlineContent/types.ts

@@ -23,6 +23,13 @@ export type InlineContentImplementation<T extends InlineContentConfig> =
         node: Node;
       };
 
+export type InlineContentSchemaWithInlineContent<
+  IType extends string,
+  C extends InlineContentConfig,
+> = {
+  [k in IType]: C;
+};
+
 // Container for both the config and implementation of InlineContent,
 // and the type of `implementation` is based on that of the config
 export type InlineContentSpec<T extends InlineContentConfig> = {

packages/react/src/schema/ReactInlineContentSpec.tsx

@@ -15,6 +15,7 @@ import {
   propsToAttributes,
   StyleSchema,
   BlockNoteEditor,
+  InlineContentSchemaWithInlineContent,
 } from "@blocknote/core";
 import {
   NodeViewProps,
@@ -27,19 +28,29 @@ import { FC, JSX } from "react";
 import { renderToDOMSpec } from "./@util/ReactRenderUtil.js";
 // this file is mostly analogoues to `customBlocks.ts`, but for React blocks
 
+export type ReactCustomInlineContentRenderProps<
+  T extends CustomInlineContentConfig,
+  S extends StyleSchema,
+> = {
+  inlineContent: InlineContentFromConfig<T, S>;
+  updateInlineContent: (
+    update: PartialCustomInlineContentFromConfig<T, S>,
+  ) => void;
+  editor: BlockNoteEditor<
+    any,
+    InlineContentSchemaWithInlineContent<T["type"], T>,
+    S
+  >;
+  contentRef: (node: HTMLElement | null) => void;
+};
+
 // extend BlockConfig but use a React render function
 export type ReactInlineContentImplementation<
   T extends CustomInlineContentConfig,
   // I extends InlineContentSchema,
   S extends StyleSchema,
 > = {
-  render: FC<{
-    inlineContent: InlineContentFromConfig<T, S>;
-    updateInlineContent: (
-      update: PartialCustomInlineContentFromConfig<T, S>,
-    ) => void;
-    contentRef: (node: HTMLElement | null) => void;
-  }>;
+  render: FC<ReactCustomInlineContentRenderProps<T, S>>;
   // TODO?
   // toExternalHTML?: FC<{
   //   block: BlockFromConfig<T, I, S>;
@@ -134,6 +145,7 @@ export function createReactInlineContentSpec<
             updateInlineContent={() => {
               // No-op
             }}
+            editor={editor}
             contentRef={refCB}
           />
         ),
@@ -169,6 +181,7 @@ export function createReactInlineContentSpec<
               >
                 <Content
                   contentRef={ref}
+                  editor={editor}
                   inlineContent={
                     nodeToCustomInlineContent(
                       props.node,