From 2aa2ecedc39e151d8cc56710e3630b3faf324702 Mon Sep 17 00:00:00 2001
From: Lucas <lucas.xu@appflowy.io>
Date: Sat, 28 Feb 2026 00:30:19 +0800
Subject: [PATCH] fix: math equation overflow (#264)

* fix: hide raw slate text in embed blocks

The absolute div holding Slate's raw text nodes for cursor positioning
was missing text-transparent, causing the formula source text to render
visibly on top of the KaTeX output. Triggered by .text-element { z-index: 2 }
added in the realtime sync PR. Fix applied to MathEquation, PDF, and File blocks.

* chore: add math equation block component test

Verify KaTeX renders correctly and the raw Slate text node
is hidden via text-transparent to prevent duplicate display.
---
 cypress/components/MathEquation.cy.tsx        | 50 +++++++++++++++++++
 .../components/blocks/file/FileBlock.tsx      |  2 +-
 .../blocks/math-equation/MathEquation.tsx     |  2 +-
 .../editor/components/blocks/pdf/PDFBlock.tsx |  2 +-
 4 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 cypress/components/MathEquation.cy.tsx

diff --git a/cypress/components/MathEquation.cy.tsx b/cypress/components/MathEquation.cy.tsx
new file mode 100644
index 00000000..05f9378e
--- /dev/null
+++ b/cypress/components/MathEquation.cy.tsx
@@ -0,0 +1,50 @@
+import { FromBlockJSON } from 'cypress/support/document';
+
+import { BlockType } from '@/application/types';
+import { initialEditorTest } from '@/components/editor/__tests__/mount';
+
+const formula = 'E = mc^2';
+
+const initialData: FromBlockJSON[] = [
+  {
+    type: BlockType.EquationBlock,
+    data: { formula },
+    text: [{ insert: formula }],
+    children: [],
+  },
+];
+
+const { initializeEditor } = initialEditorTest();
+
+describe('MathEquation block', () => {
+  beforeEach(() => {
+    cy.viewport(1280, 720);
+    Object.defineProperty(window.navigator, 'language', { value: 'en-US' });
+    initializeEditor(initialData);
+    cy.wait(500);
+  });
+
+  it('should render the KaTeX formula', () => {
+    cy.get('[data-block-type="math_equation"]')
+      .find('[data-testid="react-katex"]')
+      .should('exist');
+  });
+
+  it('should not display the raw formula text visibly', () => {
+    cy.get('[data-block-type="math_equation"]')
+      .find('.absolute.caret-transparent')
+      .should('have.class', 'text-transparent');
+  });
+
+  it('should not show duplicate content (raw text overlapping rendered formula)', () => {
+    cy.get('[data-block-type="math_equation"]').within(() => {
+      // The absolute div holding raw Slate text should be text-transparent
+      cy.get('.absolute.caret-transparent').then(($el) => {
+        const color = window.getComputedStyle($el[0]).color;
+
+        // text-transparent sets color to rgba(0,0,0,0)
+        expect(color).to.equal('rgba(0, 0, 0, 0)');
+      });
+    });
+  });
+});
diff --git a/src/components/editor/components/blocks/file/FileBlock.tsx b/src/components/editor/components/blocks/file/FileBlock.tsx
index a1ff8fb8..7d6ceb6d 100644
--- a/src/components/editor/components/blocks/file/FileBlock.tsx
+++ b/src/components/editor/components/blocks/file/FileBlock.tsx
@@ -190,7 +190,7 @@ export const FileBlock = memo(
             />
           )}
         </div>
-        <div ref={ref} className={`absolute h-full w-full caret-transparent`}>
+        <div ref={ref} className={`absolute h-full w-full caret-transparent text-transparent`}>
           {children}
         </div>
       </div>
diff --git a/src/components/editor/components/blocks/math-equation/MathEquation.tsx b/src/components/editor/components/blocks/math-equation/MathEquation.tsx
index 530424cd..e347474e 100644
--- a/src/components/editor/components/blocks/math-equation/MathEquation.tsx
+++ b/src/components/editor/components/blocks/math-equation/MathEquation.tsx
@@ -67,7 +67,7 @@ export const MathEquation = memo(
               )}
             </div>
 
-            <div ref={ref} className={'absolute h-full w-full caret-transparent'}>
+            <div ref={ref} className={'absolute h-full w-full caret-transparent text-transparent'}>
               {children}
             </div>
             {showToolbar && <MathEquationToolbar node={node} />}
diff --git a/src/components/editor/components/blocks/pdf/PDFBlock.tsx b/src/components/editor/components/blocks/pdf/PDFBlock.tsx
index 2ac15f09..7c7ccd9a 100644
--- a/src/components/editor/components/blocks/pdf/PDFBlock.tsx
+++ b/src/components/editor/components/blocks/pdf/PDFBlock.tsx
@@ -187,7 +187,7 @@ export const PDFBlock = memo(
               />
             )}
           </div>
-          <div ref={ref} className={`absolute h-full w-full caret-transparent`}>
+          <div ref={ref} className={`absolute h-full w-full caret-transparent text-transparent`}>
             {children}
           </div>
         </div>