feat(editor): add line number display option for code block (#12305)

<!-- 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 commit is contained in:
Flrande
2025-05-15 10:59:38 +00:00
parent 3a2fe0bf91
commit 147fa9a6b1
6 changed files with 89 additions and 12 deletions
+13 -12
View File
@@ -388,8 +388,10 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
override renderBlock(): TemplateResult<1> {
const showLineNumbers =
this.std.getOptional(CodeBlockConfigExtension.identifier)
?.showLineNumbers ?? true;
(this.std.getOptional(CodeBlockConfigExtension.identifier)
?.showLineNumbers ??
true) &&
(this.model.props.lineNumber ?? true);
const preview = !!this.model.props.preview;
const previewContext = this.std.getOptional(
@@ -403,6 +405,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
'affine-code-block-container': true,
mobile: IS_MOBILE,
wrap: this.model.props.wrap,
'disable-line-numbers': !showLineNumbers,
})}
>
<rich-text
@@ -420,16 +423,14 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
.enableUndoRedo=${false}
.wrapText=${this.model.props.wrap}
.verticalScrollContainerGetter=${() => getViewportElement(this.host)}
.vLineRenderer=${showLineNumbers
? (vLine: VLine) => {
return html`
<span contenteditable="false" class="line-number"
>${vLine.index + 1}</span
>
${vLine.renderVElements()}
`;
}
: undefined}
.vLineRenderer=${(vLine: VLine) => {
return html`
<span contenteditable="false" class="line-number"
>${vLine.index + 1}</span
>
${vLine.renderVElements()}
`;
}}
>
</rich-text>
<div