From 1cb50ba6908db9599f177a88aa012b75637ac23e Mon Sep 17 00:00:00 2001
From: Lakatos Andrei <lakatosandrei@gmail.com>
Date: Mon, 6 Jul 2026 14:00:37 +0300
Subject: [PATCH] fix: made sure math is rendered on response render [PIE-706]

---
 .../__tests__/InlineDropdown.test.jsx         | 33 ++++++++++++++++++-
 .../components/respArea/InlineDropdown.jsx    | 18 ++++++----
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/packages/editable-html-tip-tap/src/components/__tests__/InlineDropdown.test.jsx b/packages/editable-html-tip-tap/src/components/__tests__/InlineDropdown.test.jsx
index b2419bfe4..155038574 100644
--- a/packages/editable-html-tip-tap/src/components/__tests__/InlineDropdown.test.jsx
+++ b/packages/editable-html-tip-tap/src/components/__tests__/InlineDropdown.test.jsx
@@ -1,7 +1,12 @@
 import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
+import { renderMath } from '@pie-lib/math-rendering';
 import InlineDropdown from '../respArea/InlineDropdown';
 
+jest.mock('@pie-lib/math-rendering', () => ({
+  renderMath: jest.fn(),
+}));
+
 jest.mock('@tiptap/react', () => ({
   NodeViewWrapper: ({ children, ...props }) => (
     <div data-testid="node-view-wrapper" {...props}>
@@ -104,6 +109,32 @@ describe('InlineDropdown', () => {
     expect(valueDiv).toBeInTheDocument();
   });
 
+  it('renders math inside the value control on mount', () => {
+    const { container } = render(<InlineDropdown {...defaultProps} />);
+    const valueDiv = container.querySelector('div[style*="border"]');
+
+    expect(renderMath).toHaveBeenCalledWith(valueDiv);
+  });
+
+  it('re-renders math when the value changes', () => {
+    const updatedNode = {
+      ...mockNode,
+      attrs: {
+        ...mockNode.attrs,
+        value: '<span>Updated math</span>',
+      },
+    };
+
+    const { container, rerender } = render(<InlineDropdown {...defaultProps} />);
+
+    renderMath.mockClear();
+
+    rerender(<InlineDropdown {...defaultProps} node={updatedNode} />);
+
+    const valueDiv = container.querySelector('div[style*="border"]');
+    expect(renderMath).toHaveBeenCalledWith(valueDiv);
+  });
+
   it('uses 2px horizontal margin on the value control and no horizontal margin on the wrapper', () => {
     const { container, getByTestId } = render(<InlineDropdown {...defaultProps} />);
     const valueDiv = container.querySelector('div[style*="border"]');
@@ -476,7 +507,7 @@ describe('InlineDropdown', () => {
     await waitFor(() => {
       expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
     });
-});
+  });
 
   it('renders delete control on portaled custom toolbar when container el is set', async () => {
     const { findByLabelText } = render(<InlineDropdown {...defaultProps} selected />);
diff --git a/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx b/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx
index da1031e6b..113c61d93 100644
--- a/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx
+++ b/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { renderMath } from '@pie-lib/math-rendering';
 import PropTypes from 'prop-types';
 import { NodeViewWrapper } from '@tiptap/react';
 import { NodeSelection } from 'prosemirror-state';
 import { Chevron } from '../icons/RespArea';
-import ReactDOM from 'react-dom';
 import CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';
 import { setToolbarOpened } from '../../utils/toolbar';
 
@@ -16,6 +17,7 @@ const InlineDropdown = (props) => {
   const toolbarRef = useRef(null);
   const toolbarEditor = useRef(null);
   const pendingCloseRequest = useRef(false);
+  const elementRef = useRef(null);
 
   const isHeld = () =>
     editor._holdInlineDropdownToolbarIndex != null &&
@@ -93,13 +95,16 @@ const InlineDropdown = (props) => {
     }
   }, [editor, node, selected]);
 
-
- 
   const isScrollbarClicked = (event) =>
     event.clientX > document.documentElement.clientWidth ||
     event.clientY > document.documentElement.clientHeight ||
     event.target === document.documentElement;
-  
+
+  useEffect(() => {
+    if (elementRef.current && typeof renderMath === 'function') {
+      renderMath(elementRef.current);
+    }
+  }, [value]);
 
   useEffect(() => {
     // Calculate position relative to selection
@@ -113,10 +118,10 @@ const InlineDropdown = (props) => {
     });
 
     const handleClickOutside = (event) => {
-
-      if( isScrollbarClicked(event) ) {
+      if (isScrollbarClicked(event)) {
         return;
       }
+
       const insideSomeEditor = event.target.closest('[data-toolbar-for]');
 
       if (
@@ -151,6 +156,7 @@ const InlineDropdown = (props) => {
       }}
     >
       <div
+        ref={elementRef}
         style={{
           display: 'inline-flex',
           minWidth: '178px',