feat(editor): add permanent global toggle for code block line numbers (#15381)

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 commit is contained in:
MrX
2026-07-31 14:37:43 +05:30
committed by GitHub
parent 758b2260f8
commit 6170a90785
8 changed files with 294 additions and 12 deletions
@@ -8,6 +8,7 @@ import {
import {
BlockElementCommentManager,
DocModeProvider,
EditorSettingProvider,
NotificationProvider,
} from '@blocksuite/affine-shared/services';
import { getViewportElement } from '@blocksuite/affine-shared/utils';
@@ -97,6 +98,16 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
return this.std.get(CodeBlockHighlighter);
}
/** Whether line numbers are currently shown for this block, accounting for the global setting and feature flags. */
get showLineNumbers(): boolean {
// Feature flag: mobile (or any other consumer) can hard-disable via CodeBlockConfigExtension.
const featureEnabled =
this.std.getOptional(CodeBlockConfigExtension.identifier)
?.showLineNumbers ?? true;
if (!featureEnabled) return false;
// Per-block prop overrides the global default; global defaults to true.
return this.model.props.lineNumber ?? this._showLineNumbersGlobal$.value;
}
override get topContenteditableElement() {
if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
return this.closest<BlockComponent>(
@@ -159,9 +170,32 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
}
}
/**
* Stable signal: true when the global editor setting enables line numbers.
* Defaults to true. Updated reactively by an effect in connectedCallback.
* Using a writable signal (not reassigned to computed) keeps the reference
* stable so any downstream computed/effect that captures it stays correct.
*/
private readonly _showLineNumbersGlobal$: Signal<boolean> = signal(true);
override connectedCallback() {
super.connectedCallback();
// Reactively sync the global line-number preference from EditorSettingProvider
// into the stable _showLineNumbersGlobal$ signal. Using effect() keeps the
// signal reference constant (no identity change) while still tracking updates.
const editorSetting = this.std.getOptional(EditorSettingProvider);
if (editorSetting) {
this.disposables.add(
effect(() => {
const val = (
editorSetting.setting$.value as Record<string, unknown>
)?.['codeBlockLineNumbers'];
this._showLineNumbersGlobal$.value = val !== false;
})
);
}
// set highlight options getter used by "exportToHtml"
this.disposables.add(
effect(() => {
@@ -410,11 +444,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
}
override renderBlock(): TemplateResult<1> {
const showLineNumbers =
(this.std.getOptional(CodeBlockConfigExtension.identifier)
?.showLineNumbers ??
true) &&
(this.model.props.lineNumber ?? true);
const showLineNumbers = this.showLineNumbers;
const preview = this.preview$.value;
const previewContext = this.std.getOptional(
@@ -234,15 +234,13 @@ export const toggleGroup: MenuItemGroup<CodeBlockToolbarContext> = {
return {
action: () => {},
render: () => {
const lineNumber = blockComponent.model.props.lineNumber ?? true;
const lineNumber = blockComponent.showLineNumbers;
const label = lineNumber ? 'Cancel line number' : 'Line number';
return html`
<editor-menu-action
@click=${() => {
const currentLineNumber =
blockComponent.model.props.lineNumber ?? true;
blockComponent.store.updateBlock(blockComponent.model, {
lineNumber: !currentLineNumber,
lineNumber: !blockComponent.showLineNumbers,
});
}}
aria-label=${label}