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

@@ -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)');
+      });
+    });
+  });
+});

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>

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

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>