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 -->

tests/blocksuite/e2e/code/crud.spec.ts

@@ -321,6 +321,34 @@ test('undo code block wrap can work', async ({ page }, testInfo) => {
   );
 });
 
+test('toggle code block line number can work', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyCodeBlockState(page);
+  await focusRichText(page);
+
+  const lineNumber = page.locator('affine-code .line-number');
+
+  await expect(lineNumber).toBeVisible();
+
+  const codeBlockController = getCodeBlock(page);
+
+  await codeBlockController.codeBlock.hover();
+  await (await codeBlockController.openMore()).cancelLineNumberButton.click();
+
+  await expect(lineNumber).toBeHidden();
+
+  await undoByKeyboard(page);
+  await expect(lineNumber).toBeVisible();
+
+  await redoByKeyboard(page);
+  await expect(lineNumber).toBeHidden();
+
+  await codeBlockController.codeBlock.hover();
+  await (await codeBlockController.openMore()).lineNumberButton.click();
+
+  await expect(lineNumber).toBeVisible();
+});
+
 test('code block toolbar widget can appear and disappear during mousemove', async ({
   page,
 }) => {

tests/blocksuite/e2e/code/utils.ts

@@ -34,6 +34,10 @@ export function getCodeBlock(page: Page) {
     const cancelWrapButton = menu.getByRole('button', { name: 'Cancel wrap' });
     const duplicateButton = menu.getByRole('button', { name: 'Duplicate' });
     const deleteButton = menu.getByRole('button', { name: 'Delete' });
+    const lineNumberButton = menu.getByRole('button', { name: 'Line number' });
+    const cancelLineNumberButton = menu.getByRole('button', {
+      name: 'Cancel line number',
+    });
 
     return {
       menu,
@@ -41,6 +45,8 @@ export function getCodeBlock(page: Page) {
       cancelWrapButton,
       duplicateButton,
       deleteButton,
+      lineNumberButton,
+      cancelLineNumberButton,
     };
   };