From 8ba4584b88b4218c2b78acc25a1229eee0fa7419 Mon Sep 17 00:00:00 2001
From: Saul-Mirone <Saul-Mirone@outlook.com>
Date: Mon, 26 May 2025 06:14:17 +0000
Subject: [PATCH] fix: latex editor max-height (#12520)

Closes: BS-3538

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
  - Improved click handling for LaTeX blocks, making interactions more consistent and maintainable.
  - Updated LaTeX editor menu layout to enhance vertical scrolling, ensuring better usability with large content.

- **Style**
  - Added a maximum height and vertical scrolling to the LaTeX editor for improved user experience with lengthy formulas.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../affine/blocks/latex/src/latex-block.ts    | 25 ++++++++++---------
 .../latex/src/latex-node/latex-editor-menu.ts | 20 +++++++++++----
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/blocksuite/affine/blocks/latex/src/latex-block.ts b/blocksuite/affine/blocks/latex/src/latex-block.ts
index a78a58528..7fee1a3a4 100644
--- a/blocksuite/affine/blocks/latex/src/latex-block.ts
+++ b/blocksuite/affine/blocks/latex/src/latex-block.ts
@@ -74,19 +74,16 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
         }
       })
     );
+  }
 
-    this.disposables.addFromEvent(this, 'click', () => {
-      // should not open editor or select block in readonly mode
-      if (this.store.readonly) {
-        return;
-      }
+  private _handleClick() {
+    if (this.store.readonly) return;
 
-      if (this.isBlockSelected) {
-        this.toggleEditor();
-      } else {
-        this.selectBlock();
-      }
-    });
+    if (this.isBlockSelected) {
+      this.toggleEditor();
+    } else {
+      this.selectBlock();
+    }
   }
 
   removeEditor(portal: HTMLDivElement) {
@@ -95,7 +92,11 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
 
   override renderBlock() {
     return html`
-      <div contenteditable="false" class="latex-block-container">
+      <div
+        contenteditable="false"
+        class="latex-block-container"
+        @click=${this._handleClick}
+      >
         <div class="katex"></div>
       </div>
     `;
diff --git a/blocksuite/affine/inlines/latex/src/latex-node/latex-editor-menu.ts b/blocksuite/affine/inlines/latex/src/latex-node/latex-editor-menu.ts
index 76cb39f7e..7e6ebf7b5 100644
--- a/blocksuite/affine/inlines/latex/src/latex-node/latex-editor-menu.ts
+++ b/blocksuite/affine/inlines/latex/src/latex-node/latex-editor-menu.ts
@@ -57,6 +57,9 @@ export class LatexEditorMenu extends SignalWatcher(
 
       font-family: ${unsafeCSSVar('fontCodeFamily')};
       border: 1px solid transparent;
+
+      max-height: 400px;
+      overflow-y: auto;
     }
     .latex-editor:focus-within {
       border: 1px solid ${unsafeCSSVar('blue700')};
@@ -97,6 +100,10 @@ export class LatexEditorMenu extends SignalWatcher(
     return this.querySelector<RichText>('rich-text');
   }
 
+  private readonly _getVerticalScrollContainer = () => {
+    return this.querySelector('.latex-editor');
+  };
+
   private _updateHighlightTokens(text: string) {
     const editorTheme = this.std.get(ThemeProvider).theme;
     const theme = editorTheme === ColorScheme.Dark ? 'dark-plus' : 'light-plus';
@@ -171,11 +178,14 @@ export class LatexEditorMenu extends SignalWatcher(
   override render() {
     return html`<div class="latex-editor-container">
       <div class="latex-editor">
-        <rich-text
-          .yText=${this.yText}
-          .attributesSchema=${this.inlineManager.getSchema()}
-          .attributeRenderer=${this.inlineManager.getRenderer()}
-        ></rich-text>
+        <div class="latex-editor-content">
+          <rich-text
+            .yText=${this.yText}
+            .attributesSchema=${this.inlineManager.getSchema()}
+            .attributeRenderer=${this.inlineManager.getRenderer()}
+            .verticalScrollContainerGetter=${this._getVerticalScrollContainer}
+          ></rich-text>
+        </div>
       </div>
       <div class="latex-editor-confirm">
         <span @click=${() => this.abortController.abort()}