fix: better typing & support for hardBreakShortcut

Author: nperez0111

packages/core/src/blocks/BlockNoteSchema.ts

@@ -1,8 +1,8 @@
-import { CustomBlockNoteSchema } from "../schema/index.js";
 import {
   BlockSchema,
   BlockSchemaFromSpecs,
   BlockSpecs,
+  CustomBlockNoteSchema,
   InlineContentSchema,
   InlineContentSchemaFromSpecs,
   InlineContentSpecs,

packages/core/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -15,7 +15,7 @@ import { getBlockInfoFromSelection } from "../../api/getBlockInfoFromPos.js";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
 export const KeyboardShortcutsExtension = Extension.create<{
-  editor: BlockNoteEditor<any, any, any>;
+  editor: BlockNoteEditor;
   tabBehavior: "prefer-navigate-ui" | "prefer-indent";
 }>({
   priority: 50,
@@ -470,9 +470,10 @@ export const KeyboardShortcutsExtension = Extension.create<{
           commands.command(({ state }) => {
             const blockInfo = getBlockInfoFromSelection(state);
 
-            const blockHardBreakShortcut: "shift+enter" | "enter" | "none" =
-              this.options.editor.schema.blockSchema[blockInfo.blockNoteType]
-                .hardBreakShortcut ?? "shift+enter";
+            const blockHardBreakShortcut =
+              this.options.editor.schema.blockSchema[
+                blockInfo.blockNoteType as keyof typeof this.options.editor.schema.blockSchema
+              ].meta?.hardBreakShortcut ?? "shift+enter";
 
             if (blockHardBreakShortcut === "none") {
               return false;

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

@@ -25,6 +25,12 @@ export type BlockNoteDOMAttributes = Partial<{
 }>;
 
 export interface BlockConfigMeta {
+  /**
+   * Defines which keyboard shortcut should be used to insert a hard break into the block's inline content.
+   * @default "shift+enter"
+   */
+  hardBreakShortcut?: "shift+enter" | "enter" | "none";
+
   /**
    * Whether the block is selectable
    */
@@ -94,6 +100,51 @@ export type BlockSpec<
   extensions?: BlockNoteExtension<any>[];
 };
 
+/**
+ * This allows de-coupling the types that we display to users versus the types we expose internally.
+ *
+ * This prevents issues with type-inference across parameters that Typescript cannot handle.
+ * Specifically, the blocks shape cannot be properly inferred to a specific type like we expose to the user.
+ */
+export type LooseBlockSpec<
+  T extends string = string,
+  PS extends PropSchema = PropSchema,
+  C extends "inline" | "none" | "table" = "inline" | "none" | "table",
+> = {
+  config: BlockConfig<T, PS, C>;
+  implementation: Omit<
+    BlockImplementation<T, PS, C>,
+    "render" | "toExternalHTML"
+  > & {
+    // purposefully stub the types for render and toExternalHTML since they reference the block
+    render: (
+      /**
+       * The custom block to render
+       */
+      block: any,
+      /**
+       * The BlockNote editor instance
+       */
+      editor: BlockNoteEditor<any>,
+    ) => {
+      dom: HTMLElement | DocumentFragment;
+      contentDOM?: HTMLElement;
+      ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
+      destroy?: () => void;
+    };
+    toExternalHTML?: (
+      block: any,
+      editor: BlockNoteEditor<any>,
+    ) =>
+      | {
+          dom: HTMLElement | DocumentFragment;
+          contentDOM?: HTMLElement;
+        }
+      | undefined;
+  };
+  extensions?: BlockNoteExtension<any>[];
+};
+
 // Utility type. For a given object block schema, ensures that the key of each
 // block spec matches the name of the TipTap node in it.
 type NamesMatch<Blocks extends Record<string, BlockConfig>> = Blocks extends {

packages/core/src/schema/schema.ts

@@ -1,18 +1,19 @@
+import { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
+import { createDependencyGraph, toposortReverse } from "../util/topo-sort.js";
 import {
   BlockNoDefaults,
   BlockSchema,
   BlockSpecs,
   InlineContentSchema,
   InlineContentSpecs,
+  LooseBlockSpec,
   PartialBlockNoDefaults,
   StyleSchema,
   StyleSpecs,
   addNodeAndExtensionsToSpec,
   getInlineContentSchemaFromSpecs,
   getStyleSchemaFromSpecs,
 } from "./index.js";
-import { createDependencyGraph, toposortReverse } from "../util/topo-sort.js";
-import { BlockNoteEditor } from "../editor/BlockNoteEditor.js";
 
 function removeUndefined<T extends Record<string, any> | undefined>(obj: T): T {
   if (!obj) {
@@ -43,7 +44,11 @@ export class CustomBlockNoteSchema<
 
   public inlineContentSpecs: InlineContentSpecs;
   public styleSpecs: StyleSpecs;
-  public blockSpecs: BlockSpecs;
+  public blockSpecs: {
+    [K in keyof BSchema]: K extends string
+      ? LooseBlockSpec<K, BSchema[K]["propSchema"], BSchema[K]["content"]>
+      : never;
+  };
 
   public blockSchema: BSchema;
   public inlineContentSchema: ISchema;
@@ -117,7 +122,11 @@ export class CustomBlockNoteSchema<
           ),
         ];
       }),
-    ) as BlockSpecs;
+    ) as {
+      [K in keyof BSchema]: K extends string
+        ? LooseBlockSpec<K, BSchema[K]["propSchema"], BSchema[K]["content"]>
+        : never;
+    };
 
     return {
       blockSpecs,
@@ -151,9 +160,19 @@ export class CustomBlockNoteSchema<
     inlineContentSpecs?: AdditionalInlineContentSpecs;
     styleSpecs?: AdditionalStyleSpecs;
   }): CustomBlockNoteSchema<
-    AdditionalBlockSpecs extends undefined ? BSchema : BSchema,
-    AdditionalInlineContentSpecs extends undefined ? ISchema : ISchema,
-    AdditionalStyleSpecs extends undefined ? SSchema : SSchema
+    AdditionalBlockSpecs extends undefined
+      ? BSchema & {
+          [K in keyof AdditionalBlockSpecs]: K extends string
+            ? AdditionalBlockSpecs[K]["config"]
+            : never;
+        }
+      : BSchema,
+    AdditionalInlineContentSpecs extends undefined
+      ? ISchema & AdditionalInlineContentSpecs
+      : ISchema,
+    AdditionalStyleSpecs extends undefined
+      ? SSchema & AdditionalStyleSpecs
+      : SSchema
   > {
     // Merge the new specs with existing ones
     Object.assign(this.opts.blockSpecs, opts.blockSpecs);