mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-02 01:49:51 +08:00
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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user