After dnd of a custom block, the editor sometimes loses the block or changes its data unexpectedly.

[ellykiddy]

Describe the bug
Sometimes, the editor loses a block after dnd. I added logs to the onEditorContentChange function, and after dnd, the block is missing from the editor document. It seems like the block just disappears.

To Reproduce
https://drive.google.com/file/d/1zVuWurChspTwsIGIiwXM3iNOt1Hb0gN8/view?usp=sharing

Misc
Node version: v16.14.2
Package manager: pnpm
Browser: Chrome 132

[YousefED]

Thanks for reporting. @ellykiddy which version of blocknote are you using?

[ellykiddy]

0.23.0
now I saw that 0.23.1 has been released

ps: checked changelog; the issue must be on 0.23.1 too

[YousefED]

Thanks. Does anything appear in the browser logs, or can you reproduce it with an isolated example (e.g.: on stackblitz)?

[homecheck-garden]

I am encountering the same exception. In the browser console, it appears like this.
And I am using multiple editors on a single page, controlling them with the editable property.

"@blocknote/core": "^0.23.1",
"@blocknote/mantine": "^0.23.1",
"@blocknote/react": "^0.23.1",
"next": "^15.2.0-canary.6",
"react": "^19.0.0",
"react-dom": "^19.0.0",

Exception Message in browser console is
Cannot update a component (to) while rendering a different component ('BlockSuiteViewWrapper'). To locate the bad setState() call inside 'BlockSuiteViewWrapper', follow the stack trace as described in https://react.dev/link/setstate-in-render

BlockSuiteViewWrapper is BlocksuiteWrapper

BlockSuiteWrapper.tsx

'use client'
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import {   
  DragHandleButton,
  SideMenu,
  SideMenuController,
  useCreateBlockNote, 
  BlockColorsItem,
  DragHandleMenu,
  SuggestionMenuController,
} from "@blocknote/react";
import { filterSuggestionItems } from '@blocknote/core'
import { createPortal } from 'react-dom';
import { getSlashMenuComponent, getSlashMenuItems } from './slashMenu'
import { stringDictionary } from './locales'




export default function BlockSuiteWrapper({editable } : {
  editable : boolean
}){
  const editor = useCreateBlockNote({
    dictionary : stringDictionary,
    animations : false,
    sideMenuDetection : editable ? 'editor' : 'viewport'
  });




  editor.isEditable = editable;
  return (
    <div>
      <BlockNoteView 
      editor={editor} 
      sideMenu={false} 
      onChange={()=>
        console.log(
          editor.document)
      }
      slashMenu={false}
      theme={"light"}>
        <SideMenuController
          sideMenu={(props) => (
            <SideMenu {...props} >
                <DragHandleButton {...props}
                dragHandleMenu={(props) => (
                    <DragHandleMenu {...props}>
                      <BlockColorsItem {...props}>색상</BlockColorsItem>
                    </DragHandleMenu>
                  )}>
                </DragHandleButton>
              </SideMenu>
          )}
        />
        {createPortal(
          <SuggestionMenuController
            triggerCharacter={"/"}
            suggestionMenuComponent={getSlashMenuComponent}
            floatingOptions={{
              strategy : "fixed",
              placement : "bottom",
            }}
            getItems={async (query) =>
              filterSuggestionItems(getSlashMenuItems(editor), query)
            }
            ></SuggestionMenuController>
        , document.body!)}
      </BlockNoteView>
      </div>
  );
}

[YousefED]

Thanks @homecheck-garden . Would it be possible to create a reproducible example, for example using Stackblitz?

[homecheck-garden]

@YousefED sure. can you see this url?

StackblitzURL

[homecheck-garden]

I'm sorry if I sound like I'm rushing you, but could you please let me know if there are any updates?

[devtestersweden]

getting the same issue, and if you have a custom prop thats an array that will be converted to [object]

[matthewlipski]

getting the same issue, and if you have a custom prop thats an array that will be converted to [object]

Generally object props are not supported, but you can use JSON.stringify and JSON.parse to go around this. Though I would recommend changing object props to be IDs instead, which reference the object in a map somewhere outside the editor itself, since props get rendered out to HTML attributes and having objects there can really clutter the DOM.

[homecheck-garden]

Thank you for your response.

I'm sorry, but I still don't understand, so I'd like to ask once more: Are you saying that my BlockSuiteWrapper should not receive props as an object?

Because I created the BlockNoteView provided by guide, and it seems that it doesn't use an object type for props.