copy and paste issue on custom block note

[alibiyabani]

copy and paste issue on custom block note

We are using BlockNote in our React application and have created a custom "callout" block in the editor. While the block renders and functions correctly initially, we encounter a problem when copying and pasting it.

After pasting, the editor renders the wrapper and its text content separately. Additionally, when we attempt to edit the pasted content, the text unexpectedly moves back into the parent frame!

We reproduced this behavior using your official example for custom blocks:
https://stackblitz.com/github/TypeCellOS/BlockNote/tree/main/examples/06-custom-schema/01-alert-block?file=src%2FApp.tsx

The issue persists across both version 0.33.0 and 0.35.0.
Would you kindly review this and let us know if it's a bug or if there's a workaround?

---

import {
  insertOrUpdateBlock,
  BlockNoteEditor,
  BlockSchema,
  defaultProps,
} from "@blocknote/core";
import { createReactBlockSpec } from "@blocknote/react";
import { LightbulbIcon } from "lucide-react";

export const CalloutBlockSpec = createReactBlockSpec(
  {
    type: "callout",
    propSchema: {
      textAlignment: defaultProps.textAlignment,
      textColor: defaultProps.textColor,
      backgroundColor: defaultProps.backgroundColor,
    },
    content: "inline",
  },
  {
    render: ({ block, contentRef }) => {
      return (
        <div
          className="bg-gray-50 border-[1px] min-h-[68px] border-e123 rounded-[8px] flex items-center gap-3 px-4"
          data-block-id={block.id}
          data-node-type="callout"
        >
          <LightbulbIcon
            className="h-5 w-5 flex-shrink-0 text-gray-500"
            aria-hidden="true"
          />

          <p
            className="text-sm font-normal text-gray-600 inline-content"
            ref={contentRef}
          />
        </div>
      );
    },
  },
);
export default function customCalloutBlock<BSchema extends BlockSchema>(
  editor: BlockNoteEditor<BSchema>,
) {
  return {
    title: "Callout",
    onItemClick: () => {
      insertOrUpdateBlock(editor, {
        type: "callout",
        props: {
          textAlignment: "left",
          textColor: "gray-600",
        } as any,
      });
    },
    aliases: ["callout"],
    group: "Section 1",
    key: "bi_callout",
    icon: <LightbulbIcon size={18} />,
  };
}

• Node version: {
  "@blocknote/core": "^0.33.0",
  "@blocknote/mantine": "^0.33.0",
  "@blocknote/react": "^0.33.0",
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
  }
• Package manager: pnpm
• Browser: all

I would appreciate if you could look into this sooner than later 💖

[nperez0111]

Please see this example which works properly for me: https://www.blocknotejs.org/examples/custom-schema/alert-block-full-ux

[alibiyabani]

@nperez0111 Thanks for your follow-up. I checked the sample URL you provided. While it works correctly on the BlockNote website, it does not behave the same way in the StackBlitz example.

In StackBlitz, the issue occurs when copying the first alert block and pasting it — the pasted block appears without any text content and cannot be edited until the alert type is manually changed using the dropdown. It seems that with custom block components, the copy and paste functionality doesn’t transfer the block's data properly in this environment.

[nperez0111]

Hm, on first render of the stackblitz I seem to also not see the text until the I change the alert type. This tells me there there is an issue with contentDOM handling, likely to do with the react integration.

[MetaMmodern]

@nperez0111 can you tell why is it working properly on the documentation website? Is it something about rendering things? Like, maybe it works fine after the app is built and bugs out only in dev mode(?) If that's the case I could move forward with it in my product(will test it myself later)

[lelsene]

I'm also experiencing this exact issue on version 0.35.0

The symptoms are consistent for any operation that creates a new custom block with content: "inline":

• Pasting a previously copied custom block: the block renders, but the text content is missing
• Converting a default paragraph to a custom block: same result, the text content doesn't render
• Undo: after converting a custom block back to a paragraph and then hitting undo, the custom block reappears, but its text content is gone

In all cases the content correctly exists in editor.document, but it seems like the contentRef isn't ready in the DOM when Prosemirror tries to render the content into it

Workaround for user-initiated conversions (e.g., from a custom toolbar button) is to split the operation into two separate transactions. But trying to do both replaceBlocks and insertInlineContent within a single editor.transact() brings issue back

Here's my working onClick function for a custom "Convert to Chat" button:

function convertToChat() {
  selectedBlocks.forEach((block) => {
    // Original content
    const originalContent = block.content;

    // New block with EMPTY content
    const newBlock: CustomPartialBlock = {
      id: block.id,
      type: "chat",
      props: {
        ...block.props,
      },
    };

    // First transaction: replace the paragraph with the empty new-typed block
    editor.replaceBlocks([block.id], [newBlock]);

    // Second transaction: insert the original content
    editor.transact(() => {
      editor.setTextCursorPosition(block.id, "start");
      editor.insertInlineContent(originalContent || "");

      // It merges this transaction with the previous one for a single undo step
      editor.state.tr.setMeta("addToHistory", false);
    });
  });

  editor.focus();
}

This doesn't solve issue for paste or undo but it's all i came up with :(

[nperez0111]

This is likely to do with: #1954