Bug reportOct 23, 2026· 0:32· 8 views
CKEditor 5: Bold toolbar button shows active+disabled state when cursor enters a code block
0:32 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
lowCKEditor 5 toolbar button view state (ButtonView isOn and isEnabled binding) for the Bold command when the selection moves into a code block (code-block / basic-styles packages).
os: macOSdpr: 1url: /docs/ckeditor5/latest/features/code-blocks.htmllocale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720page_title: Code blocks | CKEditor 5 Documentation
Repro steps
- 1.Open the CKEditor 5 Code blocks documentation page and scroll to the Demo editor, which contains the paragraph 'Hello SceneRecap'.
- 2.Click into the 'Rich Text Editor main' textbox.
- 3.Press Control+a to select all content.
- 4.Click the 'Bold' toolbar button. The button becomes highlighted (active).
- 5.Click the 'Insert code block' toolbar button. The paragraph converts to a 'Plain text' code block.
- 6.Look at the Bold button while the cursor is inside the code block.
Expected
After the content is converted to a code block, the Bold button should look only disabled (greyed out). It should not keep the highlighted active background. Bold does not apply inside a code block.
Actual
From 15.0s to 21.0s the Bold button is greyed out but still shows the highlighted active background. It looks active and disabled at the same time. A console warning 'Bold button not found' is logged at 17.7s. The state only corrects itself after more editor interaction (click, End, Enter, ArrowUp). At 27.0s the button looks disabled with no highlight.
Evidence
visualControl (working): with the cursor in a normal paragraph, the Bold button shows a correct active highlight after it is clicked.
visualAfter 'Insert code block', 'Hello SceneRecap' is in a 'Plain text' code block and the heading dropdown reads 'Choose heading'. Bold, Italic and Code are greyed out, but Bold keeps its highlighted background.
visualThe Bold tooltip shows on hover. The button is still greyed out and highlighted at the same time.
consoleconsole.warn: 'Bold button not found'
visualThe mismatched state persists: Bold is still greyed out and highlighted while the cursor is in the code block.
visualAfter End and Enter are pressed in the editor, the page view jumps to the Contribute section and the footer, away from the editor. This is a secondary observation.
visualControl (working): after Enter and ArrowUp, the code block has an extra empty line. The Bold button now looks disabled with no highlighted background, which is the correct state.
visualControl (working): on hover the Bold tooltip shows and the button is correctly disabled with no highlight.
networkGET / returned 404 and POST /v1/sdk/events returned 401 on page load. These happened before any editor interaction and are likely unrelated.
Issue markdown (copy-paste ready)
## Summary On the Code blocks docs demo, the Bold toolbar button keeps its highlighted (active) background after the bolded paragraph is converted to a code block. The button is also greyed out (disabled), so it looks active and disabled at the same time. ## Environment - Browser: Chromium 151.0.7922.34 - OS: macOS - Viewport: 1280x720, DPR 1 - Page: /docs/ckeditor5/latest/features/code-blocks.html ## Steps to reproduce 1. Open the Code blocks docs page and go to the Demo editor, which contains 'Hello SceneRecap' (0.0s). 2. Click into the 'Rich Text Editor main' textbox (6.5s). 3. Press Control+a (7.8s). 4. Click 'Bold'. The button becomes active (8.9s). 5. Click 'Insert code block' (13.7s). 6. Look at the Bold button (15.0s). ## Expected Inside a code block, the Bold button should be disabled only. It should not show the active highlight. ## Actual From 15.0s to 21.0s, Bold is greyed out but still highlighted. A console warning 'Bold button not found' is logged at 17.7s. ## Control (works correctly) - In a normal paragraph, Bold shows a correct active state after the click (11.0s). - After more editing in the code block (click at 21.9s, End and Enter at 22.5s, ArrowUp at 26.1s), the Bold button shows a correct disabled state with no highlight (27.0s, 29.0s). ## Evidence - 15.0s: visual, Bold is greyed out and highlighted inside the 'Plain text' code block. - 17.7s: console warn, 'Bold button not found'. - 21.0s: visual, the mismatched state persists. - 27.0s: visual, the state is correct after Enter and ArrowUp. ## Other observations - 23.0s: after End and Enter, the page view jumped to the bottom of the docs page. - 0.0s: GET / returned 404 and POST /v1/sdk/events returned 401 on load. These are likely unrelated. ## Suggested area The toolbar button state binding (isOn and isEnabled) for the Bold command when the selection enters a code block. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →