Merge pull request #20001 from overleaf/dp-math-preview-split-test-badge

Add split test badge to math preview tooltip

GitOrigin-RevId: 9dfd30502f4b023bc7f640660904b0d3e7f4ce62

services/web/frontend/js/features/source-editor/extensions/math-preview.ts → services/web/frontend/js/features/source-editor/extensions/math-preview.tsx

@@ -22,6 +22,9 @@ import {
 import { documentCommands } from '../languages/latex/document-commands'
 import { debugConsole } from '@/utils/debugging'
 import { isSplitTestEnabled } from '@/utils/splitTestUtils'
+import ReactDOM from 'react-dom'
+import { SplitTestProvider } from '@/shared/context/split-test-context'
+import SplitTestBadge from '@/shared/components/split-test-badge'
 
 const REPOSITION_EVENT = 'editor:repositionMathTooltips'
 
@@ -107,6 +110,8 @@ function buildTooltips(state: EditorState): readonly Tooltip[] {
           create() {
             const dom = document.createElement('div')
             dom.append(content)
+            const badge = renderSplitTestBadge()
+            dom.append(badge)
             dom.className = 'ol-cm-math-tooltip'
 
             return { dom, overlap: true, offset: { x: 0, y: 8 } }
@@ -166,6 +171,20 @@ const buildTooltipContent = (
   return element
 }
 
+const renderSplitTestBadge = () => {
+  const element = document.createElement('span')
+  ReactDOM.render(
+    <SplitTestProvider>
+      <SplitTestBadge
+        displayOnVariants={['enabled']}
+        splitTestName="math-preview"
+      />
+    </SplitTestProvider>,
+    element
+  )
+  return element
+}
+
 /**
  * Styles for the preview tooltip
  */

services/web/frontend/stylesheets/app/editor/math-preview.less

@@ -4,4 +4,6 @@
   max-width: 800px;
   overflow: auto;
   padding: 8px;
+  display: flex;
+  gap: 8px;
 }