Merge pull request #2282 from pie-framework/develop

fix: PIE-674, PIE-442, PIE-575

Author: CarlaCostea

packages/editable-html-tip-tap/src/components/TiptapContainer.jsx

@@ -171,10 +171,25 @@ function TiptapContainer(props) {
       el.style.whiteSpace = 'nowrap';
       el.textContent = 'W'.repeat(props.charactersLimit);
 
-      rootRef.current.appendChild(el);
+      // Copy font styles from the editor container so the width measurement reflects the actual font
+      const computedStyles = window.getComputedStyle(rootRef.current);
+      const fontStyleProps = [
+        'fontFamily',
+        'fontSize',
+        'fontWeight',
+        'fontStyle',
+        'letterSpacing',
+        'wordSpacing',
+        'textTransform',
+        'lineHeight',
+      ];
+
+      fontStyleProps.forEach((prop) => {
+        el.style[prop] = computedStyles[prop];
+      });
 
+      document.body.appendChild(el);
       setAdjustedWidth(`${el.offsetWidth + 27}px`);
-
       el.remove();
     }
   }, [props.adjustWidthForLimit, props.charactersLimit]);

packages/editable-html-tip-tap/src/components/__tests__/InlineDropdown.test.jsx

@@ -464,6 +464,20 @@ describe('InlineDropdown', () => {
     expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
   });
 
+  it('does not close toolbar when clicking the page scrollbar (documentElement)', async () => {
+    const { queryByTestId } = render(<InlineDropdown {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    fireEvent.mouseDown(document.documentElement);
+
+    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 />);
     expect(await findByLabelText('Delete')).toBeInTheDocument();

packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx

@@ -93,6 +93,14 @@ const InlineDropdown = (props) => {
     }
   }, [editor, node, selected]);
 
+
+ 
+  const isScrollbarClicked = (event) =>
+    event.clientX > document.documentElement.clientWidth ||
+    event.clientY > document.documentElement.clientHeight ||
+    event.target === document.documentElement;
+  
+
   useEffect(() => {
     // Calculate position relative to selection
     const bodyRect = document.body.getBoundingClientRect();
@@ -105,6 +113,10 @@ const InlineDropdown = (props) => {
     });
 
     const handleClickOutside = (event) => {
+
+      if( isScrollbarClicked(event) ) {
+        return;
+      }
       const insideSomeEditor = event.target.closest('[data-toolbar-for]');
 
       if (

packages/math-rendering/src/__tests__/render-math.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { TeX } from 'mathjax-full/js/input/tex';
 import renderMath, { fixMathElement } from '../render-math';
 import { times } from 'lodash-es';
 
@@ -140,6 +141,16 @@ describe('render-math', () => {
     });
   });
 
+  it('registers the abs macro in the TeX config', () => {
+    const div = document.createElement('div');
+
+    renderMath(div);
+
+    const texConfig = TeX.mock.calls[0][0];
+
+    expect(texConfig.macros.abs).toEqual(['\\left|#1\\right|', 1]);
+  });
+
   it('wraps the math containing element the right way', () => {
     const { container } = render(
       <div>

packages/math-rendering/src/render-math.js

@@ -132,6 +132,7 @@ const createMathMLInstance = (opts, docProvided = document) => {
     overarc: '\\overparen',
     napprox: '\\not\\approx',
     longdiv: '\\enclose{longdiv}',
+    abs: ['\\left|#1\\right|', 1],
   };
 
   const texConfig = opts.useSingleDollar