Is there any way to extend a default block?

[amoydavid]

I'm attempting to modify the default CheckListItem bloock.

I want to add support for recording the creation time and completion time of each CheckListItem. My plan is to store these timestamps in the data-created-at and data-finished-at attributes of the DOM node.

I tried to copy and modify the CheckListItem code to my project, but I discovered that many of the functions aren't exported from the core package.

Is there a best practice to achieve this?

[matthewlipski]

Not at the moment unfortunately, though this is a feature we should consider adding. Which functions aren't exported? We can maybe fix those as a temporary solution.

[amoydavid]

I just copy the code packages/core/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts to my project and try to fix the import path.

These are the functions missed in my case.

import { getCurrentBlockContentType } from "@blocknote/core/types/src/api/getCurrentBlockContentType";
import { handleEnter } from "@blocknote/core/types/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts";
import { createDefaultBlockDOMOutputSpec } from "@blocknote/core/types/src/blocks/defaultBlockHelpers";

and I get a TS2339: Property BNUpdateBlock does not exist on type ChainedCommands notice on the chain().BNUpdateBlock .

I think the BlockNote has made an improvement and a new type define (pm-nodes/BlockContainer.ts) for Command in the @tiptap/core

[m-risto]

getCurrentBlockContentType, and createDefaultBlockDOMOutputSpec are available since 0.15.5

[matthewlipski]

True, also if you're still running into issues I would just copy the code for handleEnter into a local file and also adding this should fix the type errors:

declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    block: {
      BNCreateBlock: (pos: number) => ReturnType;
      BNDeleteBlock: (posInBlock: number) => ReturnType;
      BNMergeBlocks: (posBetweenBlocks: number) => ReturnType;
      BNSplitBlock: (
        posInBlock: number,
        keepType?: boolean,
        keepProps?: boolean
      ) => ReturnType;
      BNUpdateBlock: <
        BSchema extends BlockSchema,
        I extends InlineContentSchema,
        S extends StyleSchema
      >(
        posInBlock: number,
        block: PartialBlock<BSchema, I, S>
      ) => ReturnType;
      BNCreateOrUpdateBlock: <
        BSchema extends BlockSchema,
        I extends InlineContentSchema,
        S extends StyleSchema
      >(
        posInBlock: number,
        block: PartialBlock<BSchema, I, S>
      ) => ReturnType;
    };
  }
}

Gonna leave this issue open though since we still want to add proper support for extending the default block types

[MKraust]

I want to add my use case for this feature. In my application there is a requirement to temporarily "hide" block from public.

In this case I needed to extend default blocks with an additional hidden prop and filter out such blocks on the backend (also some kind of forEachBlock helper in server utility would be useful for such cases). Unfortunately, I had to copy source code of default blocks like paragraph, header, list item, etc. and add this prop manually.

[nperez0111]

We've refactored how default blocks work, and they use only exported APIs, so you should be able to copy the new implementation & replace within your project