Add a persistent "Show line numbers in code blocks" setting to Editor
Settings that controls line-number visibility across all code blocks.
Individual blocks can still override the global default via the
per-block More menu toggle.
## Changes
- **schema.ts** - add `codeBlockLineNumbers: z.boolean().default(true)`
to `AffineEditorSettingSchema`
- **code-block.ts** - read `codeBlockLineNumbers` from
`EditorSettingProvider` reactively via a stable `signal(true)` updated
by `effect()` in `connectedCallback`; expose `showLineNumbers` getter as
single source of truth used by both `renderBlock()` and the toolbar
- **config.ts** - toolbar line-number toggle reads
`blockComponent.showLineNumbers` (resolved state) instead of
`model.props.lineNumber ?? true`
- **general.tsx** - add `DefaultCodeBlockLineNumberSettings` Switch row
in editor general settings
- **en.json + i18n.gen.ts** - add i18n strings for the new setting
- **line-numbers.spec.ts** - add 7 e2e tests covering default
visibility, global toggle on/off, per-block override in both directions,
multi-block, newly created blocks, and persistence across reload
## Behaviour
| State | Result |
|---|---|
| Global ON (default), no per-block override | Line numbers shown |
| Global OFF, no per-block override | Line numbers hidden |
| Global OFF, per-block explicitly ON | Line numbers shown |
| Global ON, per-block explicitly OFF | Line numbers hidden |
| Mobile (feature flag) | Always hidden regardless of settings |
## Notes
- Existing per-block toggle behaviour is fully preserved and unchanged
- Default is `true` so no regression for existing users
- The blocksuite-side reads `codeBlockLineNumbers` via a type cast (`as
Record<string, unknown>`) because the key lives in the AFFiNE-level
`EditorSettingSchema`, not in blocksuite's own `GeneralSettingSchema` -
this is an intentional architectural boundary
Closes#14965
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a global setting to show or hide line numbers in code blocks by
default.
* Added localized title and description text for the new setting.
* Preserved per-code-block overrides through the block’s More menu.
* **Bug Fixes**
* Line-number visibility now stays consistent across existing and newly
created code blocks, including after reloads.
* **Tests**
* Added end-to-end coverage for defaults, overrides, persistence, and
multiple code blocks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR fixes#14040
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Code blocks can be collapsed and expanded via a toolbar toggle
(visible when the document is editable).
* Collapsed code blocks show a limited preview (~8 lines) with a bottom
fade overlay and reduced padding.
* Toolbar button updates icon and tooltip to reflect collapsed/expanded
state.
* Collapse state is preserved on the block so its current
collapsed/expanded setting is retained.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#13555https://github.com/user-attachments/assets/12e55c21-080c-4c69-9780-893ccad25b45
## Summary
- make the code block More popup reactive to `wrap` and `lineNumber`
prop updates
- read the latest toggle state at click time so same-menu double toggles
do not reuse stale closures
- add e2e coverage for wrap and line number toggling twice without
closing the More menu
## Bug Reason
- the code block More popup was rendered as a static portal, so it
stayed open without re-rendering after the first toggle
- the `Cancel line number` and `Wrap` menu actions captured render-time
state in their click handlers
- after the first click updated the model, a second click in the same
open menu reused stale state and wrote the same value again, so nothing
changed visually
## Testing
- yarn workspace @affine-test/blocksuite test e2e/code/crud.spec.ts
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Menu toggles now read and update the current wrap and line-number
states reliably.
* **Refactor**
* Replaced inline popup rendering with a dedicated more-menu component
for the code toolbar.
* **Style**
* Prevented text selection on menu action elements for smoother
interaction.
* **Tests**
* Added e2e tests for wrap and line-number toggle flows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [AI-160](https://linear.app/affine-design/issue/AI-160)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Improved preview state management for code blocks, ensuring consistent behavior in both editable and readonly modes.
- **Refactor**
- Streamlined the way preview state is toggled and displayed for code blocks, resulting in a more reliable and maintainable user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close BS-3423
Close BS-3505
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Style**
- Updated toolbar button background color and adjusted layout spacing for toolbar and preview buttons to improve visual consistency.
- **Refactor**
- Reorganized toolbar menu groups for better clarity, separating toggle and clipboard actions within the code block toolbar.
- **Bug Fixes**
- Improved UI interaction in code block tests to ensure menus behave as expected without closing prematurely.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Enhanced tracking for code block interactions, including language selection and preview toggling.
- Improved error reporting for HTML block preview failures, providing better visibility into issues.
- **Bug Fixes**
- Added explicit feedback and tracking when cross-origin isolation is not supported during code block preview setup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Style**
- Updated toolbar and language button styling to improve color consistency and theming.
- Enhanced hover effects for language buttons with improved background color handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added a toggle in the code block toolbar to show or hide line numbers for individual code blocks.
- The display of line numbers now respects both global and per-block settings, allowing more flexible control.
- **Style**
- Updated styles to hide line numbers when disabled via the new toggle option.
- **Tests**
- Added end-to-end tests to verify toggling line numbers visibility and undo/redo behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Updated the code block toolbar to use a toggle switch for the "wrap" option, providing a more interactive user experience.
- **Style**
- Adjusted the height of the language selection button for consistent appearance.
- Refined code block container padding and increased spacing for line numbers to improve readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Unified internal data access by replacing all references from `doc` to `store` across all components, blocks, widgets, and utilities. This affects how readonly state, block operations, and service retrieval are handled throughout the application.
- **Tests**
- Updated all test utilities and test cases to use `store` instead of `doc` for document-related operations.
- **Chores**
- Updated context providers and property names to reflect the change from `doc` to `store` for improved consistency and maintainability.
No user-facing features or behaviors have changed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a preview mode for code blocks, allowing users to toggle between code and rendered previews (e.g., HTML output) directly within the editor.
- Added a preview toggle button to the code block toolbar for supported languages.
- Enabled dynamic rendering of code block previews using a shared WebContainer, allowing live HTML previews in an embedded iframe.
- Added HTML preview support with loading and error states for enhanced user feedback.
- Integrated the preview feature as a view extension provider for seamless framework support.
- **Bug Fixes**
- Improved toolbar layout and button alignment for a cleaner user interface.
- **Tests**
- Added end-to-end tests to verify the new code block preview functionality and language switching behavior.
- **Chores**
- Updated development server configuration to include enhanced security headers.
- Added a new runtime dependency for WebContainer support.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
MrX