From 1c5dbb9587b470a9947edfad3356be58e186a6f1 Mon Sep 17 00:00:00 2001
From: BOUKERFA Mohamed El Amine <boukerfa.ma@gmail.com>
Date: Sun, 23 Aug 2026 15:17:09 +0200
Subject: [PATCH] fix(react): keep the inline math popup unclipped in table
 cells

---
 packages/core/src/editor/Block.css            |  2 ++
 .../SourceWithPreview/SourceWithPreview.tsx   | 30 +++++++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index ef2867121d..7b272dcc86 100644
--- a/packages/core/src/editor/Block.css
+++ b/packages/core/src/editor/Block.css
@@ -579,6 +579,8 @@ NESTED BLOCKS
 .bn-inline-content-section
   .bn-preview-with-source-popup[data-open="true"]
   .bn-source-block-popup {
+  margin-top: 0;
+  z-index: calc(var(--bn-ui-base-z-index, 0) + 15);
   width: 300px;
 }
 
diff --git a/packages/react/src/blocks/SourceWithPreview/SourceWithPreview.tsx b/packages/react/src/blocks/SourceWithPreview/SourceWithPreview.tsx
index 65be1cfa13..f54184f610 100644
--- a/packages/react/src/blocks/SourceWithPreview/SourceWithPreview.tsx
+++ b/packages/react/src/blocks/SourceWithPreview/SourceWithPreview.tsx
@@ -1,5 +1,12 @@
 import { BlockNoteEditor } from "@blocknote/core";
-import { MouseEvent, ReactNode, useId, useRef } from "react";
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+} from "@floating-ui/react";
+import { MouseEvent, ReactNode, useCallback, useId, useRef } from "react";
 import { MdKeyboardReturn } from "react-icons/md";
 
 import { PreviewPlaceholder } from "./PreviewPlaceholder.js";
@@ -129,6 +136,20 @@ export const SourceWithPreview = (
       errorPreview
     );
 
+  const { refs, floatingStyles } = useFloating({
+    placement: "bottom-start",
+    strategy: "fixed",
+    middleware: [offset(4), flip(), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const isFloating = inline === true && popup.isOpen;
+
+  const setAnchor = useCallback(
+    (node: HTMLElement | null) => refs.setPositionReference(node),
+    [refs],
+  );
+
   // Links the source input to the render error so screen readers announce it
   // when the input is focused.
   const errorId = useId();
@@ -182,13 +203,18 @@ export const SourceWithPreview = (
       <PreviewContainer
         className="bn-preview-container"
         contentEditable={false}
+        ref={setAnchor}
         // When no source code is available, the "Add source" button should have the appropriate role.
         role={previewIsButton ? "button" : undefined}
         onClick={handlePreviewClick}
       >
         {previewContent}
       </PreviewContainer>
-      <div className="bn-source-block-popup">
+      <div
+        className="bn-source-block-popup"
+        ref={isFloating ? refs.setFloating : undefined}
+        style={isFloating ? floatingStyles : undefined}
+      >
         <div className="bn-code-block-source-popup-body">
           <pre
             className={