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