diff --git a/packages/editable-html-tip-tap/src/components/TiptapContainer.jsx b/packages/editable-html-tip-tap/src/components/TiptapContainer.jsx index 610a839c3..60a0ea1a9 100644 --- a/packages/editable-html-tip-tap/src/components/TiptapContainer.jsx +++ b/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]); 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 a05d0c392..b2419bfe4 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 @@ -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(); + + 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(); expect(await findByLabelText('Delete')).toBeInTheDocument(); 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 914a8dd31..da1031e6b 100644 --- a/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.jsx +++ b/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 ( diff --git a/packages/math-rendering/src/__tests__/render-math.test.js b/packages/math-rendering/src/__tests__/render-math.test.js index 446bd6f57..0219bba8e 100644 --- a/packages/math-rendering/src/__tests__/render-math.test.js +++ b/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(
diff --git a/packages/math-rendering/src/render-math.js b/packages/math-rendering/src/render-math.js index 7e173b03c..50c824125 100644 --- a/packages/math-rendering/src/render-math.js +++ b/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