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
@@ -674,6 +674,36 @@ const MiddleClickPasteSettings = () => {
);
};
const DefaultCodeBlockLineNumberSettings = () => {
const t = useI18n();
const editorSettingService = useService(EditorSettingService);
const settings = useLiveData(editorSettingService.editorSetting.settings$);
const onToggle = useCallback(
(checked: boolean) => {
editorSettingService.editorSetting.set('codeBlockLineNumbers', checked);
},
[editorSettingService.editorSetting]
);
return (
<SettingRow
name={t[
'com.affine.settings.editorSettings.general.default-code-block.line-numbers.title'
]()}
desc={t[
'com.affine.settings.editorSettings.general.default-code-block.line-numbers.description'
]()}
>
<Switch
data-testid="code-block-line-numbers-trigger"
checked={settings.codeBlockLineNumbers}
onChange={onToggle}
/>
</SettingRow>
);
};
export const General = () => {
const t = useI18n();
@@ -685,11 +715,9 @@ export const General = () => {
<FontSizeSettings />
<NewDocDefaultModeSettings />
<NewDocDateTitleSettings />
<DefaultCodeBlockLineNumberSettings />
{BUILD_CONFIG.isElectron && <SpellCheckSettings />}
{environment.isLinux && <MiddleClickPasteSettings />}
{/* // TODO(@akumatus): implement these settings
<DeFaultCodeBlockSettings />
*/}
</SettingWrapper>
);
};
@@ -50,6 +50,7 @@ const AffineEditorSettingSchema = z.object({
.default('open-in-active-view'),
// linux only:
enableMiddleClickPaste: z.boolean().default(false),
codeBlockLineNumbers: z.boolean().default(true),
});
export const EditorSettingSchema = BSEditorSettingSchema.merge(
+8
View File
@@ -5497,6 +5497,14 @@ export function useAFFiNEI18N(): {
* `Code blocks default language`
*/
["com.affine.settings.editorSettings.general.default-code-block.language.title"](): string;
/**
* `Show line numbers in all code blocks by default.`
*/
["com.affine.settings.editorSettings.general.default-code-block.line-numbers.description"](): string;
/**
* `Show line numbers in code blocks`
*/
["com.affine.settings.editorSettings.general.default-code-block.line-numbers.title"](): string;
/**
* `Encapsulate code snippets for better readability.`
*/
@@ -1368,6 +1368,8 @@
"com.affine.settings.editorSettings.general.ai.title": "AFFiNE AI",
"com.affine.settings.editorSettings.general.default-code-block.language.description": "Set a default programming language.",
"com.affine.settings.editorSettings.general.default-code-block.language.title": "Code blocks default language",
"com.affine.settings.editorSettings.general.default-code-block.line-numbers.description": "Show line numbers in all code blocks by default.",
"com.affine.settings.editorSettings.general.default-code-block.line-numbers.title": "Show line numbers in code blocks",
"com.affine.settings.editorSettings.general.default-code-block.wrap.description": "Encapsulate code snippets for better readability.",
"com.affine.settings.editorSettings.general.default-code-block.wrap.title": "Wrap code in code blocks",
"com.affine.settings.editorSettings.general.default-new-doc.description": "Default mode for new doc.",