BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

fix: disable code block language selector when editor is not editable

Open ysds opened this issue 4 weeks ago • 2 comments

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.isEditable before registering the change event listener on the language selector
  • Set select.disabled = true when 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 editable are properly handled due to Tiptap's setEditable() 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

Additional Notes

ysds avatar Jan 14 '26 01:01 ysds