TypeCellOS / TypeCellOS/BlockNote
Custom blocks do not rerender on editor.isEditable change
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 10.2k
- Forks
- 772
- Avg merge
- 3d 11h
- Merged PRs (30d)
- 17
Description
Describe the bug
In version 0.41.1 custom blocks directly reacted to changes to editor.isEditable and have rerendered.
But at the latest main version they don't (until they are interacted with which forces a rerender).
I suspect this is due to the fix (#2121) for (#2106).
To Reproduce
block-spec:
export const createTestBlock = createReactBlockSpec(
{
type: 'test',
propSchema: {
},
content: 'none',
},
{
render: (props) => {
return (
<div>{props.editor.isEditable ? 'editable' : 'readonly'}</div>
);
},
}
);
editor:
export function Test() {
const [readonly, setReadonly] = useState(false);
const editor = useCreateBlockNote({
schema: BlockNoteSchema.create({
blockSpecs: {
test: createTestBlock(),
},
}),
initialContent: [
{
type: "test",
},
],
});
return <div>
<button onClick={() => setReadonly(r => !r)}>toggle</button>
<BlockNoteView editor={editor} editable={!readonly} />
</div>;
}
Toggling the readonly button does not change block's content to readonly
Misc
- Node version:
- Package manager:
- Browser:
- I'm a sponsor and would appreciate if you could look into this sooner than later 💖
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the createReactBlockSpec custom block and the BlockNoteView editable toggle shown in the reproduction. Review fixes #2121 and #2106 to identify why the block does not react to editor.isEditable changes. Done means toggling the button changes the custom block content between "editable" and "readonly" without interacting with the block.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100