Repository navigation
After dnd of a custom block, the editor sometimes loses the block or changes its data unexpectedly. #1396
Description
Activity
Thanks for reporting. @ellykiddy which version of blocknote are you using?
0.23.0
now I saw that 0.23.1 has been releasedps: checked changelog; the issue must be on 0.23.1 too
Thanks. Does anything appear in the browser logs, or can you reproduce it with an isolated example (e.g.: on stackblitz)?
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-renderBlockSuiteViewWrapperis BlocksuiteWrapperBlockSuiteWrapper.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> ); }Thanks @homecheck-garden . Would it be possible to create a reproducible example, for example using Stackblitz?
@YousefED sure. can you see this url?
I'm sorry if I sound like I'm rushing you, but could you please let me know if there are any updates?
getting the same issue, and if you have a custom prop thats an array that will be converted to [object]
Reacted by homecheck-gardengetting 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.stringifyandJSON.parseto 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.Reacted by homecheck-gardenThank 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
BlockSuiteWrappershould not receive props as an object?Because I created the
BlockNoteViewprovided by guide, and it seems that it doesn't use an object type for props.I'm observing this on this official example: https://www.blocknotejs.org/docs/features/custom-schemas/custom-inline-content
add a mention anywhere in the paragraph block -> re-order it -> mention becomes plain text
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