BlockNote
BlockNote copied to clipboard
fix: disable code block language selector when editor is not editable
Summary
Fixes #2156
Disable the language selector dropdown in code blocks when editable={false} is set on the BlockNoteView.
Rationale
As reported in #2156, when the editor is set to read-only mode (editable={false}), the code block language selector dropdown remains interactive, allowing users to change the language. This is inconsistent with the expected behavior where all editing functionality should be disabled in read-only mode.
Changes
- Check
editor.isEditablebefore registering the change event listener on the language selector - Set
select.disabled = truewhen the editor is in read-only mode - Only register the event listener and cleanup function when the editor is editable
Impact
- No impact on existing functionality when
editable={true}(default behavior) - When
editable={false}, the language selector will be visually disabled and non-interactive - Dynamic changes to
editableare properly handled due to Tiptap'ssetEditable()triggering a re-render of block components
Testing
- Manually tested with
editable={false}set on BlockNoteView - language selector is disabled - Manually tested dynamic toggling of
editable- selector state updates correctly when toggling between editable and read-only modes
Screenshots/Video
N/A
Checklist
- [x] Code follows the project's coding standards.
- [ ] Unit tests covering the new feature have been added.
- [x] All existing tests pass.
- [ ] The documentation has been updated to reflect the new feature