@pie-lib/editable-html-tip-tap 2.1.2-next.83 → 2.1.2-next.87

package/lib/components/TiptapContainer.js

@@ -192,7 +192,14 @@ function TiptapContainer(props) {
       el.style.position = 'absolute';
       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
+      var computedStyles = window.getComputedStyle(rootRef.current);
+      var fontStyleProps = ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'letterSpacing', 'wordSpacing', 'textTransform', 'lineHeight'];
+      fontStyleProps.forEach(function (prop) {
+        el.style[prop] = computedStyles[prop];
+      });
+      document.body.appendChild(el);
       setAdjustedWidth("".concat(el.offsetWidth + 27, "px"));
       el.remove();
     }

package/lib/components/TiptapContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TiptapContainer.js","names":["_react","_interopRequireWildcard","require","_styles","_renderUi","_size","_MenuBar","_interopRequireDefault","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledRoot","styled","shouldForwardProp","prop","includes","_ref","theme","noBorder","error","position","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","marginTop","margin","marginBottom","lineHeight","textWrap","fontSize","backgroundColor","color","background","fontFamily","borderLeft","tableLayout","width","borderCollapse","text","borderTop","textAlign","concat","palette","main","StyledEditorHolder","_ref2","disableScrollbar","highlightShape","overflowY","action","selected","display","scrollbarWidth","StyledChildren","_ref3","noPadding","TiptapContainer","props","_useState","useState","_useState2","_slicedToArray2","adjustedWidth","setAdjustedWidth","rootRef","useRef","editor","disabled","children","activePlugins","toolbarOpts","responseAreaProps","autoFocus","minWidth","maxWidth","minHeight","height","ref","useEffect","current","_tiptapContainerEl","Promise","resolve","then","commands","focus","adjustWidthForLimit","el","document","createElement","style","visibility","whiteSpace","textContent","repeat","charactersLimit","appendChild","offsetWidth","remove","sizeStyle","useMemo","valueToSize","className","onChange","autoWidthToolbar","_default","exports"],"sources":["../../src/components/TiptapContainer.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useState, useRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\nimport { valueToSize } from '../utils/size';\n\nimport StyledMenuBar from './MenuBar';\n\nconst StyledRoot = styled('div', {\n  shouldForwardProp: (prop) => !['noBorder', 'error'].includes(prop),\n})(({ theme, noBorder, error }) => ({\n  position: 'relative',\n  padding: '0px',\n  border: noBorder ? 'none' : '1px solid #ccc',\n  borderRadius: '4px',\n  cursor: 'text',\n  '& [data-slate-editor=\"true\"]': {\n    wordBreak: 'break-word',\n    overflow: 'visible',\n    maxHeight: '500px',\n    padding: '5px',\n  },\n  '&:first-child': {\n    marginTop: 0,\n  },\n  '& ul, & ol': {\n    padding: '0 1rem',\n    margin: '1.25rem 1rem 1.25rem 0.4rem',\n  },\n  '& ul li p, & ol li p': {\n    marginTop: '0.25em',\n    marginBottom: '0.25em',\n  },\n  '& h1, & h2, & h3, & h4, & h5, & h6': {\n    lineHeight: 1.1,\n    marginTop: '2.5rem',\n    textWrap: 'pretty',\n  },\n  '& h1, & h2': {\n    marginTop: '3.5rem',\n    marginBottom: '1.5rem',\n  },\n  '& h1': {\n    fontSize: '1.4rem',\n  },\n  '& h2': {\n    fontSize: '1.2rem',\n  },\n  '& h3': {\n    fontSize: '1.1rem',\n  },\n  '& h4, & h5, & h6': {\n    fontSize: '1rem',\n  },\n  '& code': {\n    backgroundColor: 'var(--purple-light)',\n    borderRadius: '0.4rem',\n    color: 'var(--black)',\n    fontSize: '0.85rem',\n    padding: '0.25em 0.3em',\n  },\n  '& pre': {\n    background: 'var(--black)',\n    borderRadius: '0.5rem',\n    color: 'var(--white)',\n    fontFamily: '\\'JetBrainsMono\\', monospace',\n    margin: '1.5rem 0',\n    padding: '0.75rem 1rem',\n    '& code': {\n      background: 'none',\n      color: 'inherit',\n      fontSize: '0.8rem',\n      padding: 0,\n    },\n  },\n  '& blockquote': {\n    background: '#f9f9f9',\n    borderLeft: '5px solid #ccc',\n    margin: '1.5em 10px',\n    padding: '.5em 10px',\n  },\n  '& p': {\n    margin: '0',\n  },\n  '& table': {\n    tableLayout: 'fixed',\n    width: '100%',\n    borderCollapse: 'collapse',\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  '& table:not([border=\"1\"]) tr': {\n    borderTop: '1px solid #dfe2e5',\n  },\n  '& td, th': {\n    padding: '.6em 1em',\n    textAlign: 'center',\n  },\n  '& table:not([border=\"1\"]) td, th': {\n    border: '1px solid #dfe2e5',\n  },\n  ...(error && {\n    border: `2px solid ${theme.palette.error.main} !important`,\n  }),\n}));\n\nconst StyledEditorHolder = styled('div', {\n  shouldForwardProp: (prop) => !['disableScrollbar', 'highlightShape'].includes(prop),\n})(({ theme, disableScrollbar, highlightShape }) => ({\n  position: 'relative',\n  padding: '0px',\n  overflowY: 'auto',\n  color: color.text(),\n  backgroundColor: highlightShape ? theme.palette.action.selected : color.background(),\n  ...(disableScrollbar && {\n    '&::-webkit-scrollbar': {\n      display: 'none',\n    },\n    scrollbarWidth: 'none',\n    '-ms-overflow-style': 'none',\n  }),\n}));\n\nconst StyledChildren = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'noPadding',\n})(({ noPadding }) => ({\n  padding: noPadding ? 0 : '10px 8px',\n}));\n\nfunction TiptapContainer(props) {\n  const [adjustedWidth, setAdjustedWidth] = useState(null);\n  const rootRef = useRef(null);\n  const {\n    editor,\n    disabled,\n    children,\n    disableScrollbar,\n    activePlugins,\n    toolbarOpts,\n    responseAreaProps,\n    autoFocus,\n    minWidth,\n    width,\n    maxWidth,\n    minHeight,\n    height,\n    maxHeight,\n    highlightShape,\n    ref,\n  } = props;\n\n  useEffect(() => {\n    if (editor && rootRef.current) {\n      editor._tiptapContainerEl = rootRef.current;\n    }\n  }, [editor, rootRef.current]);\n\n  useEffect(() => {\n    if (editor && autoFocus) {\n      Promise.resolve().then(() => {\n        editor.commands.focus('end');\n      });\n    }\n  }, [editor, autoFocus]);\n\n  useEffect(() => {\n    if (props.adjustWidthForLimit) {\n      const el = document.createElement('p');\n\n      el.style.visibility = 'hidden';\n      el.style.position = 'absolute';\n      el.style.whiteSpace = 'nowrap';\n      el.textContent = 'W'.repeat(props.charactersLimit);\n\n      rootRef.current.appendChild(el);\n\n      setAdjustedWidth(`${el.offsetWidth + 27}px`);\n\n      el.remove();\n    }\n  }, [props.adjustWidthForLimit, props.charactersLimit]);\n\n  const sizeStyle = useMemo(\n    () => ({\n      width: valueToSize(adjustedWidth || width),\n      minWidth: valueToSize(minWidth),\n      maxWidth: valueToSize(maxWidth),\n      height: valueToSize(height),\n      minHeight: valueToSize(minHeight),\n      maxHeight: valueToSize(maxHeight),\n    }),\n    [adjustedWidth, minWidth, width, maxWidth, minHeight, height, maxHeight],\n  );\n\n  return (\n    <StyledRoot\n      noBorder={toolbarOpts && toolbarOpts.noBorder}\n      error={toolbarOpts && toolbarOpts.error}\n      className={props.className}\n      style={{ width: sizeStyle.width, minWidth: sizeStyle.minWidth, maxWidth: sizeStyle.maxWidth }}\n      ref={rootRef}\n    >\n      <StyledEditorHolder disableScrollbar={disableScrollbar} highlightShape={highlightShape}>\n        <StyledChildren noPadding={toolbarOpts && toolbarOpts.noPadding}>{children}</StyledChildren>\n      </StyledEditorHolder>\n\n      {editor && (\n        <StyledMenuBar\n          editor={editor}\n          responseAreaProps={responseAreaProps}\n          toolbarOpts={toolbarOpts}\n          activePlugins={activePlugins}\n          onChange={props.onChange}\n          autoWidthToolbar={props.autoWidthToolbar}\n        />\n      )}\n    </StyledRoot>\n  );\n}\n\nexport default TiptapContainer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TiptapContainer.js","names":["_react","_interopRequireWildcard","require","_styles","_renderUi","_size","_MenuBar","_interopRequireDefault","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledRoot","styled","shouldForwardProp","prop","includes","_ref","theme","noBorder","error","position","padding","border","borderRadius","cursor","wordBreak","overflow","maxHeight","marginTop","margin","marginBottom","lineHeight","textWrap","fontSize","backgroundColor","color","background","fontFamily","borderLeft","tableLayout","width","borderCollapse","text","borderTop","textAlign","concat","palette","main","StyledEditorHolder","_ref2","disableScrollbar","highlightShape","overflowY","action","selected","display","scrollbarWidth","StyledChildren","_ref3","noPadding","TiptapContainer","props","_useState","useState","_useState2","_slicedToArray2","adjustedWidth","setAdjustedWidth","rootRef","useRef","editor","disabled","children","activePlugins","toolbarOpts","responseAreaProps","autoFocus","minWidth","maxWidth","minHeight","height","ref","useEffect","current","_tiptapContainerEl","Promise","resolve","then","commands","focus","adjustWidthForLimit","el","document","createElement","style","visibility","whiteSpace","textContent","repeat","charactersLimit","computedStyles","window","getComputedStyle","fontStyleProps","body","appendChild","offsetWidth","remove","sizeStyle","useMemo","valueToSize","className","onChange","autoWidthToolbar","_default","exports"],"sources":["../../src/components/TiptapContainer.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useState, useRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\nimport { valueToSize } from '../utils/size';\n\nimport StyledMenuBar from './MenuBar';\n\nconst StyledRoot = styled('div', {\n  shouldForwardProp: (prop) => !['noBorder', 'error'].includes(prop),\n})(({ theme, noBorder, error }) => ({\n  position: 'relative',\n  padding: '0px',\n  border: noBorder ? 'none' : '1px solid #ccc',\n  borderRadius: '4px',\n  cursor: 'text',\n  '& [data-slate-editor=\"true\"]': {\n    wordBreak: 'break-word',\n    overflow: 'visible',\n    maxHeight: '500px',\n    padding: '5px',\n  },\n  '&:first-child': {\n    marginTop: 0,\n  },\n  '& ul, & ol': {\n    padding: '0 1rem',\n    margin: '1.25rem 1rem 1.25rem 0.4rem',\n  },\n  '& ul li p, & ol li p': {\n    marginTop: '0.25em',\n    marginBottom: '0.25em',\n  },\n  '& h1, & h2, & h3, & h4, & h5, & h6': {\n    lineHeight: 1.1,\n    marginTop: '2.5rem',\n    textWrap: 'pretty',\n  },\n  '& h1, & h2': {\n    marginTop: '3.5rem',\n    marginBottom: '1.5rem',\n  },\n  '& h1': {\n    fontSize: '1.4rem',\n  },\n  '& h2': {\n    fontSize: '1.2rem',\n  },\n  '& h3': {\n    fontSize: '1.1rem',\n  },\n  '& h4, & h5, & h6': {\n    fontSize: '1rem',\n  },\n  '& code': {\n    backgroundColor: 'var(--purple-light)',\n    borderRadius: '0.4rem',\n    color: 'var(--black)',\n    fontSize: '0.85rem',\n    padding: '0.25em 0.3em',\n  },\n  '& pre': {\n    background: 'var(--black)',\n    borderRadius: '0.5rem',\n    color: 'var(--white)',\n    fontFamily: '\\'JetBrainsMono\\', monospace',\n    margin: '1.5rem 0',\n    padding: '0.75rem 1rem',\n    '& code': {\n      background: 'none',\n      color: 'inherit',\n      fontSize: '0.8rem',\n      padding: 0,\n    },\n  },\n  '& blockquote': {\n    background: '#f9f9f9',\n    borderLeft: '5px solid #ccc',\n    margin: '1.5em 10px',\n    padding: '.5em 10px',\n  },\n  '& p': {\n    margin: '0',\n  },\n  '& table': {\n    tableLayout: 'fixed',\n    width: '100%',\n    borderCollapse: 'collapse',\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  '& table:not([border=\"1\"]) tr': {\n    borderTop: '1px solid #dfe2e5',\n  },\n  '& td, th': {\n    padding: '.6em 1em',\n    textAlign: 'center',\n  },\n  '& table:not([border=\"1\"]) td, th': {\n    border: '1px solid #dfe2e5',\n  },\n  ...(error && {\n    border: `2px solid ${theme.palette.error.main} !important`,\n  }),\n}));\n\nconst StyledEditorHolder = styled('div', {\n  shouldForwardProp: (prop) => !['disableScrollbar', 'highlightShape'].includes(prop),\n})(({ theme, disableScrollbar, highlightShape }) => ({\n  position: 'relative',\n  padding: '0px',\n  overflowY: 'auto',\n  color: color.text(),\n  backgroundColor: highlightShape ? theme.palette.action.selected : color.background(),\n  ...(disableScrollbar && {\n    '&::-webkit-scrollbar': {\n      display: 'none',\n    },\n    scrollbarWidth: 'none',\n    '-ms-overflow-style': 'none',\n  }),\n}));\n\nconst StyledChildren = styled('div', {\n  shouldForwardProp: (prop) => prop !== 'noPadding',\n})(({ noPadding }) => ({\n  padding: noPadding ? 0 : '10px 8px',\n}));\n\nfunction TiptapContainer(props) {\n  const [adjustedWidth, setAdjustedWidth] = useState(null);\n  const rootRef = useRef(null);\n  const {\n    editor,\n    disabled,\n    children,\n    disableScrollbar,\n    activePlugins,\n    toolbarOpts,\n    responseAreaProps,\n    autoFocus,\n    minWidth,\n    width,\n    maxWidth,\n    minHeight,\n    height,\n    maxHeight,\n    highlightShape,\n    ref,\n  } = props;\n\n  useEffect(() => {\n    if (editor && rootRef.current) {\n      editor._tiptapContainerEl = rootRef.current;\n    }\n  }, [editor, rootRef.current]);\n\n  useEffect(() => {\n    if (editor && autoFocus) {\n      Promise.resolve().then(() => {\n        editor.commands.focus('end');\n      });\n    }\n  }, [editor, autoFocus]);\n\n  useEffect(() => {\n    if (props.adjustWidthForLimit) {\n      const el = document.createElement('p');\n\n      el.style.visibility = 'hidden';\n      el.style.position = 'absolute';\n      el.style.whiteSpace = 'nowrap';\n      el.textContent = 'W'.repeat(props.charactersLimit);\n\n      // Copy font styles from the editor container so the width measurement reflects the actual font\n      const computedStyles = window.getComputedStyle(rootRef.current);\n      const fontStyleProps = [\n        'fontFamily',\n        'fontSize',\n        'fontWeight',\n        'fontStyle',\n        'letterSpacing',\n        'wordSpacing',\n        'textTransform',\n        'lineHeight',\n      ];\n\n      fontStyleProps.forEach((prop) => {\n        el.style[prop] = computedStyles[prop];\n      });\n\n      document.body.appendChild(el);\n      setAdjustedWidth(`${el.offsetWidth + 27}px`);\n      el.remove();\n    }\n  }, [props.adjustWidthForLimit, props.charactersLimit]);\n\n  const sizeStyle = useMemo(\n    () => ({\n      width: valueToSize(adjustedWidth || width),\n      minWidth: valueToSize(minWidth),\n      maxWidth: valueToSize(maxWidth),\n      height: valueToSize(height),\n      minHeight: valueToSize(minHeight),\n      maxHeight: valueToSize(maxHeight),\n    }),\n    [adjustedWidth, minWidth, width, maxWidth, minHeight, height, maxHeight],\n  );\n\n  return (\n    <StyledRoot\n      noBorder={toolbarOpts && toolbarOpts.noBorder}\n      error={toolbarOpts && toolbarOpts.error}\n      className={props.className}\n      style={{ width: sizeStyle.width, minWidth: sizeStyle.minWidth, maxWidth: sizeStyle.maxWidth }}\n      ref={rootRef}\n    >\n      <StyledEditorHolder disableScrollbar={disableScrollbar} highlightShape={highlightShape}>\n        <StyledChildren noPadding={toolbarOpts && toolbarOpts.noPadding}>{children}</StyledChildren>\n      </StyledEditorHolder>\n\n      {editor && (\n        <StyledMenuBar\n          editor={editor}\n          responseAreaProps={responseAreaProps}\n          toolbarOpts={toolbarOpts}\n          activePlugins={activePlugins}\n          onChange={props.onChange}\n          autoWidthToolbar={props.autoWidthToolbar}\n        />\n      )}\n    </StyledRoot>\n  );\n}\n\nexport default TiptapContainer;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/respArea/InlineDropdown.js

@@ -8,11 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _mathRendering = require("@pie-lib/math-rendering");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@tiptap/react");
 var _prosemirrorState = require("prosemirror-state");
 var _RespArea = require("../icons/RespArea");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _customToolbarWrapper = _interopRequireDefault(require("../../extensions/custom-toolbar-wrapper"));
 var _toolbar = require("../../utils/toolbar");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -30,6 +31,7 @@ var InlineDropdown = function InlineDropdown(props) {
   var toolbarRef = (0, _react.useRef)(null);
   var toolbarEditor = (0, _react.useRef)(null);
   var pendingCloseRequest = (0, _react.useRef)(false);
+  var elementRef = (0, _react.useRef)(null);
   var isHeld = function isHeld() {
     return editor._holdInlineDropdownToolbarIndex != null && String(editor._holdInlineDropdownToolbarIndex) === String(node.attrs.index);
   };
@@ -98,6 +100,11 @@ var InlineDropdown = function InlineDropdown(props) {
   var isScrollbarClicked = function isScrollbarClicked(event) {
     return event.clientX > document.documentElement.clientWidth || event.clientY > document.documentElement.clientHeight || event.target === document.documentElement;
   };
+  (0, _react.useEffect)(function () {
+    if (elementRef.current && typeof _mathRendering.renderMath === 'function') {
+      (0, _mathRendering.renderMath)(elementRef.current);
+    }
+  }, [value]);
   (0, _react.useEffect)(function () {
     // Calculate position relative to selection
     var bodyRect = document.body.getBoundingClientRect();
@@ -136,6 +143,7 @@ var InlineDropdown = function InlineDropdown(props) {
       cursor: 'pointer'
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: elementRef,
     style: {
       display: 'inline-flex',
       minWidth: '178px',

package/lib/components/respArea/InlineDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineDropdown.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_react2","_prosemirrorState","_RespArea","_reactDom","_customToolbarWrapper","_toolbar","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InlineDropdown","props","editor","node","getPos","options","selected","attributes","attrs","value","error","html","pos","toolbarRef","useRef","toolbarEditor","pendingCloseRequest","isHeld","_holdInlineDropdownToolbarIndex","String","index","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","_useState3","top","left","_useState4","position","setPosition","closeToolbar","InlineDropdownToolbar","respAreaToolbar","reselectNode","tr","state","nodeAtPos","doc","nodeAt","selection","from","to","nodeSize","setSelection","NodeSelection","create","view","dispatch","requestClose","current","onToolbarCloseRequest","setTimeout","useEffect","onlyThisNodeSelected","isScrollbarClicked","event","clientX","document","documentElement","clientWidth","clientY","clientHeight","target","bodyRect","body","getBoundingClientRect","start","coordsAtPos","Math","abs","handleClickOutside","_toolbarEditor$curren","insideSomeEditor","closest","dataset","toolbarFor","instanceId","_toolbarOpened","contains","addEventListener","removeEventListener","createElement","NodeViewWrapper","className","style","display","height","cursor","minWidth","background","border","boxSizing","borderRadius","margin","alignItems","onClick","flex","overflow","padding","whiteSpace","textOverflow","verticalAlign","dangerouslySetInnerHTML","__html","Chevron","direction","right","Fragment","ReactDOM","createPortal","ref","editorCallback","instance","_tiptapContainerEl","deletable","toolbarOpts","autoWidth","onDelete","setToolbarOpened","commands","focus","showDone","propTypes","PropTypes","object","selectedItem","oneOfType","string","_default","exports"],"sources":["../../../src/components/respArea/InlineDropdown.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport { NodeSelection } from 'prosemirror-state';\nimport { Chevron } from '../icons/RespArea';\nimport ReactDOM from 'react-dom';\nimport CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';\nimport { setToolbarOpened } from '../../utils/toolbar';\n\nconst InlineDropdown = (props) => {\n  const { editor, node, getPos, options, selected } = props;\n  const { attrs: attributes } = node;\n  const { value, error } = attributes;\n  const html = value || '<div>&nbsp</div>';\n  const pos = getPos();\n  const toolbarRef = useRef(null);\n  const toolbarEditor = useRef(null);\n  const pendingCloseRequest = useRef(false);\n\n  const isHeld = () =>\n    editor._holdInlineDropdownToolbarIndex != null &&\n    String(editor._holdInlineDropdownToolbarIndex) === String(node.attrs.index);\n\n  const [showToolbar, setShowToolbar] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n\n  const closeToolbar = () => {\n    if (isHeld()) {\n      return;\n    }\n\n    setShowToolbar(false);\n  };\n\n  const InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, closeToolbar);\n\n  const reselectNode = () => {\n    const { tr } = editor.state;\n    const nodeAtPos = tr.doc.nodeAt(pos);\n\n    if (!nodeAtPos) {\n      return;\n    }\n\n    const { selection } = tr;\n\n    if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {\n      return;\n    }\n\n    tr.setSelection(NodeSelection.create(tr.doc, pos));\n    editor.view.dispatch(tr);\n  };\n\n  const requestClose = () => {\n    if (pendingCloseRequest.current) {\n      return;\n    }\n\n    if (options.onToolbarCloseRequest) {\n      pendingCloseRequest.current = true;\n\n      options.onToolbarCloseRequest(\n        [node, pos],\n        editor,\n        () => {\n          pendingCloseRequest.current = false;\n          delete editor._holdInlineDropdownToolbarIndex;\n          closeToolbar();\n        },\n        () => {\n          pendingCloseRequest.current = false;\n          delete editor._holdInlineDropdownToolbarIndex;\n          setShowToolbar(true);\n          setTimeout(reselectNode, 0);\n        },\n      );\n    } else {\n      closeToolbar();\n    }\n  };\n\n  useEffect(() => {\n    const { selection } = editor.state;\n    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;\n\n    if (selected) {\n      if (onlyThisNodeSelected) {\n        setShowToolbar(true);\n      }\n    } else if (showToolbar) {\n      requestClose();\n    }\n  }, [editor, node, selected]);\n\n\n \n  const isScrollbarClicked = (event) =>\n    event.clientX > document.documentElement.clientWidth ||\n    event.clientY > document.documentElement.clientHeight ||\n    event.target === document.documentElement;\n  \n\n  useEffect(() => {\n    // Calculate position relative to selection\n    const bodyRect = document.body.getBoundingClientRect();\n    const { from } = editor.state.selection;\n    const start = editor.view.coordsAtPos(from);\n\n    setPosition({\n      top: start.top + Math.abs(bodyRect.top) + 40, // shift above\n      left: start.left,\n    });\n\n    const handleClickOutside = (event) => {\n\n      if( isScrollbarClicked(event) ) {\n        return;\n      }\n      const insideSomeEditor = event.target.closest('[data-toolbar-for]');\n\n      if (\n        !event.target.closest('[data-inline-dropdown-toolbar]') &&\n        (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current?.instanceId) &&\n        !editor._toolbarOpened &&\n        toolbarRef.current &&\n        !toolbarRef.current.contains(event.target) &&\n        !event.target.closest('[data-inline-node]')\n      ) {\n        requestClose();\n      }\n    };\n\n    if (showToolbar) {\n      document.addEventListener('mousedown', handleClickOutside);\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [showToolbar, node]);\n\n  return (\n    <NodeViewWrapper\n      className=\"inline-dropdown\"\n      data-selected={selected}\n      style={{\n        display: 'inline-flex',\n        height: '50px',\n        cursor: 'pointer',\n      }}\n    >\n      <div\n        style={{\n          display: 'inline-flex',\n          minWidth: '178px',\n          height: '36px',\n          background: '#FFF',\n          border: '1px solid #C0C3CF',\n          boxSizing: 'border-box',\n          borderRadius: '3px',\n          margin: '0 2px',\n          position: 'relative',\n          alignItems: 'center',\n        }}\n        onClick={() => setShowToolbar(true)}\n      >\n        <div\n          style={{\n            flex: 1,\n            overflow: 'hidden',\n            padding: '0 25px 0 8px',\n            whiteSpace: 'nowrap',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          <span\n            style={{\n              display: 'inline-block',\n              verticalAlign: 'middle',\n            }}\n            dangerouslySetInnerHTML={{ __html: html }}\n          />\n        </div>\n        <Chevron direction=\"down\" style={{ position: 'absolute', top: '5px', right: '5px' }} />\n      </div>\n      {showToolbar && (\n        <React.Fragment>\n          {ReactDOM.createPortal(\n            <div ref={toolbarRef}>\n              <InlineDropdownToolbar\n                editorCallback={(instance) => {\n                  toolbarEditor.current = instance;\n                }}\n              />\n            </div>,\n            editor?._tiptapContainerEl || document.body,\n          )}\n\n          {editor._tiptapContainerEl &&\n            ReactDOM.createPortal(\n              <CustomToolbarWrapper\n                deletable\n                toolbarOpts={{ minWidth: 'auto' }}\n                autoWidth\n                style={{ top: -40, left: 0, right: 0 }}\n                onDelete={() => {\n                  const { tr } = editor.state;\n                  tr.delete(pos, pos + node.nodeSize);\n                  // Prevent the debounced onBlur/onDone from firing into the\n                  // now-deleted node's stale position\n                  setToolbarOpened(editor, false);\n                  delete editor._holdInlineDropdownToolbarIndex;\n                  editor.view.dispatch(tr);\n                  setShowToolbar(false);\n                  editor.commands.focus();\n                }}\n                showDone={false}\n              />,\n              editor._tiptapContainerEl,\n            )}\n        </React.Fragment>\n      )}\n    </NodeViewWrapper>\n  );\n};\n\nInlineDropdown.propTypes = {\n  attributes: PropTypes.object,\n  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n};\n\nexport default InlineDropdown;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"InlineDropdown.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_mathRendering","_propTypes","_react2","_prosemirrorState","_RespArea","_customToolbarWrapper","_toolbar","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","InlineDropdown","props","editor","node","getPos","options","selected","attributes","attrs","value","error","html","pos","toolbarRef","useRef","toolbarEditor","pendingCloseRequest","elementRef","isHeld","_holdInlineDropdownToolbarIndex","String","index","_useState","useState","_useState2","_slicedToArray2","showToolbar","setShowToolbar","_useState3","top","left","_useState4","position","setPosition","closeToolbar","InlineDropdownToolbar","respAreaToolbar","reselectNode","tr","state","nodeAtPos","doc","nodeAt","selection","from","to","nodeSize","setSelection","NodeSelection","create","view","dispatch","requestClose","current","onToolbarCloseRequest","setTimeout","useEffect","onlyThisNodeSelected","isScrollbarClicked","event","clientX","document","documentElement","clientWidth","clientY","clientHeight","target","renderMath","bodyRect","body","getBoundingClientRect","start","coordsAtPos","Math","abs","handleClickOutside","_toolbarEditor$curren","insideSomeEditor","closest","dataset","toolbarFor","instanceId","_toolbarOpened","contains","addEventListener","removeEventListener","createElement","NodeViewWrapper","className","style","display","height","cursor","ref","minWidth","background","border","boxSizing","borderRadius","margin","alignItems","onClick","flex","overflow","padding","whiteSpace","textOverflow","verticalAlign","dangerouslySetInnerHTML","__html","Chevron","direction","right","Fragment","ReactDOM","createPortal","editorCallback","instance","_tiptapContainerEl","deletable","toolbarOpts","autoWidth","onDelete","setToolbarOpened","commands","focus","showDone","propTypes","PropTypes","object","selectedItem","oneOfType","string","_default","exports"],"sources":["../../../src/components/respArea/InlineDropdown.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport PropTypes from 'prop-types';\nimport { NodeViewWrapper } from '@tiptap/react';\nimport { NodeSelection } from 'prosemirror-state';\nimport { Chevron } from '../icons/RespArea';\nimport CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';\nimport { setToolbarOpened } from '../../utils/toolbar';\n\nconst InlineDropdown = (props) => {\n  const { editor, node, getPos, options, selected } = props;\n  const { attrs: attributes } = node;\n  const { value, error } = attributes;\n  const html = value || '<div>&nbsp</div>';\n  const pos = getPos();\n  const toolbarRef = useRef(null);\n  const toolbarEditor = useRef(null);\n  const pendingCloseRequest = useRef(false);\n  const elementRef = useRef(null);\n\n  const isHeld = () =>\n    editor._holdInlineDropdownToolbarIndex != null &&\n    String(editor._holdInlineDropdownToolbarIndex) === String(node.attrs.index);\n\n  const [showToolbar, setShowToolbar] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n\n  const closeToolbar = () => {\n    if (isHeld()) {\n      return;\n    }\n\n    setShowToolbar(false);\n  };\n\n  const InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, closeToolbar);\n\n  const reselectNode = () => {\n    const { tr } = editor.state;\n    const nodeAtPos = tr.doc.nodeAt(pos);\n\n    if (!nodeAtPos) {\n      return;\n    }\n\n    const { selection } = tr;\n\n    if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {\n      return;\n    }\n\n    tr.setSelection(NodeSelection.create(tr.doc, pos));\n    editor.view.dispatch(tr);\n  };\n\n  const requestClose = () => {\n    if (pendingCloseRequest.current) {\n      return;\n    }\n\n    if (options.onToolbarCloseRequest) {\n      pendingCloseRequest.current = true;\n\n      options.onToolbarCloseRequest(\n        [node, pos],\n        editor,\n        () => {\n          pendingCloseRequest.current = false;\n          delete editor._holdInlineDropdownToolbarIndex;\n          closeToolbar();\n        },\n        () => {\n          pendingCloseRequest.current = false;\n          delete editor._holdInlineDropdownToolbarIndex;\n          setShowToolbar(true);\n          setTimeout(reselectNode, 0);\n        },\n      );\n    } else {\n      closeToolbar();\n    }\n  };\n\n  useEffect(() => {\n    const { selection } = editor.state;\n    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;\n\n    if (selected) {\n      if (onlyThisNodeSelected) {\n        setShowToolbar(true);\n      }\n    } else if (showToolbar) {\n      requestClose();\n    }\n  }, [editor, node, selected]);\n\n  const isScrollbarClicked = (event) =>\n    event.clientX > document.documentElement.clientWidth ||\n    event.clientY > document.documentElement.clientHeight ||\n    event.target === document.documentElement;\n\n  useEffect(() => {\n    if (elementRef.current && typeof renderMath === 'function') {\n      renderMath(elementRef.current);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    // Calculate position relative to selection\n    const bodyRect = document.body.getBoundingClientRect();\n    const { from } = editor.state.selection;\n    const start = editor.view.coordsAtPos(from);\n\n    setPosition({\n      top: start.top + Math.abs(bodyRect.top) + 40, // shift above\n      left: start.left,\n    });\n\n    const handleClickOutside = (event) => {\n      if (isScrollbarClicked(event)) {\n        return;\n      }\n\n      const insideSomeEditor = event.target.closest('[data-toolbar-for]');\n\n      if (\n        !event.target.closest('[data-inline-dropdown-toolbar]') &&\n        (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current?.instanceId) &&\n        !editor._toolbarOpened &&\n        toolbarRef.current &&\n        !toolbarRef.current.contains(event.target) &&\n        !event.target.closest('[data-inline-node]')\n      ) {\n        requestClose();\n      }\n    };\n\n    if (showToolbar) {\n      document.addEventListener('mousedown', handleClickOutside);\n    } else {\n      document.removeEventListener('mousedown', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, [showToolbar, node]);\n\n  return (\n    <NodeViewWrapper\n      className=\"inline-dropdown\"\n      data-selected={selected}\n      style={{\n        display: 'inline-flex',\n        height: '50px',\n        cursor: 'pointer',\n      }}\n    >\n      <div\n        ref={elementRef}\n        style={{\n          display: 'inline-flex',\n          minWidth: '178px',\n          height: '36px',\n          background: '#FFF',\n          border: '1px solid #C0C3CF',\n          boxSizing: 'border-box',\n          borderRadius: '3px',\n          margin: '0 2px',\n          position: 'relative',\n          alignItems: 'center',\n        }}\n        onClick={() => setShowToolbar(true)}\n      >\n        <div\n          style={{\n            flex: 1,\n            overflow: 'hidden',\n            padding: '0 25px 0 8px',\n            whiteSpace: 'nowrap',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          <span\n            style={{\n              display: 'inline-block',\n              verticalAlign: 'middle',\n            }}\n            dangerouslySetInnerHTML={{ __html: html }}\n          />\n        </div>\n        <Chevron direction=\"down\" style={{ position: 'absolute', top: '5px', right: '5px' }} />\n      </div>\n      {showToolbar && (\n        <React.Fragment>\n          {ReactDOM.createPortal(\n            <div ref={toolbarRef}>\n              <InlineDropdownToolbar\n                editorCallback={(instance) => {\n                  toolbarEditor.current = instance;\n                }}\n              />\n            </div>,\n            editor?._tiptapContainerEl || document.body,\n          )}\n\n          {editor._tiptapContainerEl &&\n            ReactDOM.createPortal(\n              <CustomToolbarWrapper\n                deletable\n                toolbarOpts={{ minWidth: 'auto' }}\n                autoWidth\n                style={{ top: -40, left: 0, right: 0 }}\n                onDelete={() => {\n                  const { tr } = editor.state;\n                  tr.delete(pos, pos + node.nodeSize);\n                  // Prevent the debounced onBlur/onDone from firing into the\n                  // now-deleted node's stale position\n                  setToolbarOpened(editor, false);\n                  delete editor._holdInlineDropdownToolbarIndex;\n                  editor.view.dispatch(tr);\n                  setShowToolbar(false);\n                  editor.commands.focus();\n                }}\n                showDone={false}\n              />,\n              editor._tiptapContainerEl,\n            )}\n        </React.Fragment>\n      )}\n    </NodeViewWrapper>\n  );\n};\n\nInlineDropdown.propTypes = {\n  attributes: PropTypes.object,\n  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n};\n\nexport default InlineDropdown;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.1.2-next.83+7eb49294a",
+  "version": "2.1.2-next.87+c3b8857af",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "7eb49294ab5b0a6bcfce286ad72e90f08beac36a",
+  "gitHead": "c3b8857af041f8117d5790020b37c28ef2312507",
   "scripts": {}
 }

package/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]);

package/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 />);

package/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',