@pie-lib/editable-html-tip-tap 2.1.2-next.48 → 2.1.2-next.53

package/lib/components/CharacterPicker.js

@@ -90,22 +90,44 @@ function CharacterPicker(_ref2) {
   // ref so click-outside always calls the latest close handler.
   (0, _react.useEffect)(function () {
     if (!editor) return;
-
-    // Calculate position relative to selection
     var editorDOM = editor.options.element;
-    var editorRect = editorDOM.getBoundingClientRect();
-    var bodyRect = document.body.getBoundingClientRect();
-    var from = editor.state.selection.from;
-    var start = editor.view.coordsAtPos(from);
-    var top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;
-    if (editorRect.y > containerRef.current.offsetHeight) {
-      top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;
-    }
-    setPosition({
-      top: top,
-      left: start.left
-    });
     var editorViewDom = editor.view.dom;
+
+    // Position is computed in viewport coordinates (the dialog uses position: fixed),
+    // so coordsAtPos / getBoundingClientRect values can be used directly without
+    // adding scroll offsets. The dialog is then clamped to the viewport so it does
+    // not get cut off by fixed page headers/footers.
+    var updatePosition = function updatePosition() {
+      if (!containerRef.current) return;
+      var editorRect = editorDOM.getBoundingClientRect();
+      var from = editor.state.selection.from;
+      var start = editor.view.coordsAtPos(from);
+      var dialogHeight = containerRef.current.offsetHeight;
+      var dialogWidth = containerRef.current.offsetWidth;
+
+      // prefer below the editor; flip above when there isn't room below.
+      var spaceBelow = window.innerHeight - (editorRect.bottom + 60);
+      var top = spaceBelow >= dialogHeight || editorRect.top < dialogHeight + 80 ? editorRect.bottom + 60 : editorRect.top - dialogHeight - 20;
+      var left = start.left;
+      var margin = 8;
+      top = Math.max(margin, Math.min(top, window.innerHeight - dialogHeight - margin));
+      left = Math.max(margin, Math.min(left, window.innerWidth - dialogWidth - margin));
+      setPosition({
+        top: top,
+        left: left
+      });
+    };
+    updatePosition();
+    var frame = null;
+    var scheduleUpdate = function scheduleUpdate() {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(function () {
+        frame = null;
+        updatePosition();
+      });
+    };
+    window.addEventListener('scroll', scheduleUpdate, true);
+    window.addEventListener('resize', scheduleUpdate);
     var handleClickOutside = function handleClickOutside(e) {
       if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {
         onCloseRef.current();
@@ -116,6 +138,9 @@ function CharacterPicker(_ref2) {
     });
     return function () {
       clearTimeout(timeoutId);
+      if (frame !== null) cancelAnimationFrame(frame);
+      window.removeEventListener('scroll', scheduleUpdate, true);
+      window.removeEventListener('resize', scheduleUpdate);
       document.removeEventListener('click', handleClickOutside);
     };
   }, [editor]);
@@ -136,7 +161,7 @@ function CharacterPicker(_ref2) {
     "data-toolbar-for": editor.instanceId,
     style: {
       visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
-      position: 'absolute',
+      position: 'fixed',
       top: "".concat(position.top, "px"),
       left: "".concat(position.left, "px"),
       maxWidth: '500px',

package/lib/components/CharacterPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CharacterPicker.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_propTypes","_get","_mathToolbar","_customPopper","_characterUtils","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","CharacterIcon","exports","_ref","letter","createElement","style","fontSize","lineHeight","propTypes","PropTypes","string","CharacterPicker","_ref2","_opts$characters","editor","opts","onClose","characters","containerRef","useRef","onCloseRef","_useState","useState","top","left","_useState2","_slicedToArray2","position","setPosition","_useState3","_useState4","popover","setPopover","current","configToUse","useMemo","spanishConfig","language","specialConfig","layoutForCharacters","reduce","obj","arr","columns","rows","closePopOver","useEffect","editorDOM","options","element","editorRect","getBoundingClientRect","bodyRect","document","body","from","state","selection","start","view","coordsAtPos","Math","abs","height","y","offsetHeight","editorViewDom","dom","handleClickOutside","contains","target","timeoutId","setTimeout","addEventListener","clearTimeout","removeEventListener","renderPopOver","event","el","anchorEl","currentTarget","handleChange","val","chain","focus","insertContent","run","Fragment","ReactDOM","createPortal","ref","className","instanceId","visibility","concat","maxWidth","zIndex","PureToolbar","keyPadCharacterRef","setKeypadInteraction","autoFocus","noDecimal","hideInput","noLatexHandling","hideDoneButtonBackground","layoutForKeyPad","additionalKeys","_toConsumableArray2","map","k","name","write","label","category","extraClass","extraProps","border","hasPreview","actions","onMouseEnter","ev","onMouseLeave","keypadMode","onChange","onDone","description","unicode","object","func","isRequired"],"sources":["../../src/components/CharacterPicker.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport get from 'lodash-es/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopper from './characters/custom-popper';\nimport { spanishConfig, specialConfig } from './characters/characterUtils';\n\nconst CharacterIcon = ({ letter }) => (\n  <div\n    style={{\n      fontSize: '24px',\n      lineHeight: '24px',\n    }}\n  >\n    {letter}\n  </div>\n);\n\nCharacterIcon.propTypes = {\n  letter: PropTypes.string,\n};\n\nexport function CharacterPicker({ editor, opts, onClose }) {\n  if (!opts?.characters?.length) {\n    return null;\n  }\n\n  const containerRef = useRef(null);\n  const onCloseRef = useRef(onClose);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const [popover, setPopover] = useState(null);\n\n  onCloseRef.current = onClose;\n\n  const configToUse = useMemo(() => {\n    if (!opts) return spanishConfig;\n\n    switch (true) {\n      case opts.language === 'spanish':\n        return spanishConfig;\n      case opts.language === 'special':\n        return specialConfig;\n      default:\n        return opts;\n    }\n  }, [opts]);\n\n  const layoutForCharacters = useMemo(\n    () =>\n      configToUse.characters.reduce(\n        (obj, arr) => {\n          if (arr.length >= obj.columns) {\n            obj.columns = arr.length;\n          }\n\n          return obj;\n        },\n        { rows: configToUse.characters.length, columns: 0 },\n      ),\n    [configToUse],\n  );\n\n  const closePopOver = () => setPopover(null);\n\n  useEffect(\n    () => () => {\n      closePopOver();\n    },\n    [],\n  );\n\n  // Keep `onClose` out of the dependency array — parents often pass a new callback each\n  // render (e.g. after each keystroke), which would re-run this effect constantly. Use a\n  // ref so click-outside always calls the latest close handler.\n  useEffect(() => {\n    if (!editor) return;\n\n    // Calculate position relative to selection\n    const editorDOM = editor.options.element;\n    const editorRect = editorDOM.getBoundingClientRect();\n    const bodyRect = document.body.getBoundingClientRect();\n    const { from } = editor.state.selection;\n    const start = editor.view.coordsAtPos(from);\n\n    let top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;\n\n    if (editorRect.y > containerRef.current.offsetHeight) {\n      top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;\n    }\n\n    setPosition({\n      top: top,\n      left: start.left,\n    });\n\n    const editorViewDom = editor.view.dom;\n\n    const handleClickOutside = (e) => {\n      if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {\n        onCloseRef.current();\n      }\n    };\n\n    const timeoutId = setTimeout(() => {\n      document.addEventListener('click', handleClickOutside);\n    });\n\n    return () => {\n      clearTimeout(timeoutId);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, [editor]);\n\n  const renderPopOver = (event, el) => setPopover({ anchorEl: event.currentTarget, el });\n\n  const handleChange = (val) => {\n    if (typeof val === 'string') {\n      editor.chain().focus().insertContent(val).run();\n    }\n  };\n\n  return (\n    <>\n      {ReactDOM.createPortal(\n        <div\n          ref={containerRef}\n          className=\"insert-character-dialog\"\n          data-toolbar-for={editor.instanceId}\n          style={{\n            visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',\n            position: 'absolute',\n            top: `${position.top}px`,\n            left: `${position.left}px`,\n            maxWidth: '500px',\n            zIndex: 1000,\n          }}\n        >\n          <div>\n            <PureToolbar\n              keyPadCharacterRef={opts.keyPadCharacterRef}\n              setKeypadInteraction={opts.setKeypadInteraction}\n              autoFocus\n              noDecimal\n              hideInput\n              noLatexHandling\n              hideDoneButtonBackground\n              layoutForKeyPad={layoutForCharacters}\n              additionalKeys={configToUse.characters.reduce((arr, n) => {\n                arr = [\n                  ...arr,\n                  ...n.map((k) => ({\n                    name: get(k, 'name') || k,\n                    write: get(k, 'write') || k,\n                    label: get(k, 'label') || k,\n                    category: 'character',\n                    extraClass: 'character',\n                    extraProps: {\n                      ...(k.extraProps || {}),\n                      style: {\n                        ...(k.extraProps || {}).style,\n                        border: '1px solid #000',\n                      },\n                    },\n                    ...(configToUse.hasPreview\n                      ? {\n                          actions: {\n                            onMouseEnter: (ev) => renderPopOver(ev, k),\n                            onMouseLeave: closePopOver,\n                          },\n                        }\n                      : {}),\n                  })),\n                ];\n\n                return arr;\n              }, [])}\n              keypadMode=\"language\"\n              onChange={handleChange}\n              onDone={onClose}\n            />\n          </div>\n        </div>,\n        document.body,\n      )}\n      {popover &&\n        ReactDOM.createPortal(\n          <CustomPopper onClose={closePopOver} anchorEl={popover.anchorEl}>\n            <div>{popover.el.label}</div>\n            <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.description}</div>\n            <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.unicode}</div>\n          </CustomPopper>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nCharacterPicker.propTypes = {\n  editor: PropTypes.object,\n  opts: PropTypes.object,\n  onClose: PropTypes.func.isRequired,\n};\n\nexport { CharacterIcon };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CharacterPicker.js","names":["_react","_interopRequireWildcard","require","_reactDom","_interopRequireDefault","_propTypes","_get","_mathToolbar","_customPopper","_characterUtils","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","CharacterIcon","exports","_ref","letter","createElement","style","fontSize","lineHeight","propTypes","PropTypes","string","CharacterPicker","_ref2","_opts$characters","editor","opts","onClose","characters","containerRef","useRef","onCloseRef","_useState","useState","top","left","_useState2","_slicedToArray2","position","setPosition","_useState3","_useState4","popover","setPopover","current","configToUse","useMemo","spanishConfig","language","specialConfig","layoutForCharacters","reduce","obj","arr","columns","rows","closePopOver","useEffect","editorDOM","options","element","editorViewDom","view","dom","updatePosition","editorRect","getBoundingClientRect","from","state","selection","start","coordsAtPos","dialogHeight","offsetHeight","dialogWidth","offsetWidth","spaceBelow","window","innerHeight","bottom","margin","Math","max","min","innerWidth","frame","scheduleUpdate","requestAnimationFrame","addEventListener","handleClickOutside","contains","target","timeoutId","setTimeout","document","clearTimeout","cancelAnimationFrame","removeEventListener","renderPopOver","event","el","anchorEl","currentTarget","handleChange","val","chain","focus","insertContent","run","Fragment","ReactDOM","createPortal","ref","className","instanceId","visibility","concat","maxWidth","zIndex","PureToolbar","keyPadCharacterRef","setKeypadInteraction","autoFocus","noDecimal","hideInput","noLatexHandling","hideDoneButtonBackground","layoutForKeyPad","additionalKeys","_toConsumableArray2","map","k","name","write","label","category","extraClass","extraProps","border","hasPreview","actions","onMouseEnter","ev","onMouseLeave","keypadMode","onChange","onDone","body","description","unicode","object","func","isRequired"],"sources":["../../src/components/CharacterPicker.jsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport get from 'lodash-es/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopper from './characters/custom-popper';\nimport { spanishConfig, specialConfig } from './characters/characterUtils';\n\nconst CharacterIcon = ({ letter }) => (\n  <div\n    style={{\n      fontSize: '24px',\n      lineHeight: '24px',\n    }}\n  >\n    {letter}\n  </div>\n);\n\nCharacterIcon.propTypes = {\n  letter: PropTypes.string,\n};\n\nexport function CharacterPicker({ editor, opts, onClose }) {\n  if (!opts?.characters?.length) {\n    return null;\n  }\n\n  const containerRef = useRef(null);\n  const onCloseRef = useRef(onClose);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const [popover, setPopover] = useState(null);\n\n  onCloseRef.current = onClose;\n\n  const configToUse = useMemo(() => {\n    if (!opts) return spanishConfig;\n\n    switch (true) {\n      case opts.language === 'spanish':\n        return spanishConfig;\n      case opts.language === 'special':\n        return specialConfig;\n      default:\n        return opts;\n    }\n  }, [opts]);\n\n  const layoutForCharacters = useMemo(\n    () =>\n      configToUse.characters.reduce(\n        (obj, arr) => {\n          if (arr.length >= obj.columns) {\n            obj.columns = arr.length;\n          }\n\n          return obj;\n        },\n        { rows: configToUse.characters.length, columns: 0 },\n      ),\n    [configToUse],\n  );\n\n  const closePopOver = () => setPopover(null);\n\n  useEffect(\n    () => () => {\n      closePopOver();\n    },\n    [],\n  );\n\n  // Keep `onClose` out of the dependency array — parents often pass a new callback each\n  // render (e.g. after each keystroke), which would re-run this effect constantly. Use a\n  // ref so click-outside always calls the latest close handler.\n  useEffect(() => {\n    if (!editor) return;\n\n    const editorDOM = editor.options.element;\n    const editorViewDom = editor.view.dom;\n\n    // Position is computed in viewport coordinates (the dialog uses position: fixed),\n    // so coordsAtPos / getBoundingClientRect values can be used directly without\n    // adding scroll offsets. The dialog is then clamped to the viewport so it does\n    // not get cut off by fixed page headers/footers.\n    const updatePosition = () => {\n      if (!containerRef.current) return;\n\n      const editorRect = editorDOM.getBoundingClientRect();\n      const { from } = editor.state.selection;\n      const start = editor.view.coordsAtPos(from);\n\n      const dialogHeight = containerRef.current.offsetHeight;\n      const dialogWidth = containerRef.current.offsetWidth;\n\n      // prefer below the editor; flip above when there isn't room below.\n      const spaceBelow = window.innerHeight - (editorRect.bottom + 60);\n      let top =\n        spaceBelow >= dialogHeight || editorRect.top < dialogHeight + 80\n          ? editorRect.bottom + 60\n          : editorRect.top - dialogHeight - 20;\n\n      let left = start.left;\n\n      const margin = 8;\n      top = Math.max(margin, Math.min(top, window.innerHeight - dialogHeight - margin));\n      left = Math.max(margin, Math.min(left, window.innerWidth - dialogWidth - margin));\n\n      setPosition({ top, left });\n    };\n\n    updatePosition();\n\n    let frame = null;\n    const scheduleUpdate = () => {\n      if (frame !== null) return;\n      frame = requestAnimationFrame(() => {\n        frame = null;\n        updatePosition();\n      });\n    };\n\n    window.addEventListener('scroll', scheduleUpdate, true);\n    window.addEventListener('resize', scheduleUpdate);\n\n    const handleClickOutside = (e) => {\n      if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {\n        onCloseRef.current();\n      }\n    };\n\n    const timeoutId = setTimeout(() => {\n      document.addEventListener('click', handleClickOutside);\n    });\n\n    return () => {\n      clearTimeout(timeoutId);\n      if (frame !== null) cancelAnimationFrame(frame);\n      window.removeEventListener('scroll', scheduleUpdate, true);\n      window.removeEventListener('resize', scheduleUpdate);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, [editor]);\n\n  const renderPopOver = (event, el) => setPopover({ anchorEl: event.currentTarget, el });\n\n  const handleChange = (val) => {\n    if (typeof val === 'string') {\n      editor.chain().focus().insertContent(val).run();\n    }\n  };\n\n  return (\n    <>\n      {ReactDOM.createPortal(\n        <div\n          ref={containerRef}\n          className=\"insert-character-dialog\"\n          data-toolbar-for={editor.instanceId}\n          style={{\n            visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',\n            position: 'fixed',\n            top: `${position.top}px`,\n            left: `${position.left}px`,\n            maxWidth: '500px',\n            zIndex: 1000,\n          }}\n        >\n          <div>\n            <PureToolbar\n              keyPadCharacterRef={opts.keyPadCharacterRef}\n              setKeypadInteraction={opts.setKeypadInteraction}\n              autoFocus\n              noDecimal\n              hideInput\n              noLatexHandling\n              hideDoneButtonBackground\n              layoutForKeyPad={layoutForCharacters}\n              additionalKeys={configToUse.characters.reduce((arr, n) => {\n                arr = [\n                  ...arr,\n                  ...n.map((k) => ({\n                    name: get(k, 'name') || k,\n                    write: get(k, 'write') || k,\n                    label: get(k, 'label') || k,\n                    category: 'character',\n                    extraClass: 'character',\n                    extraProps: {\n                      ...(k.extraProps || {}),\n                      style: {\n                        ...(k.extraProps || {}).style,\n                        border: '1px solid #000',\n                      },\n                    },\n                    ...(configToUse.hasPreview\n                      ? {\n                          actions: {\n                            onMouseEnter: (ev) => renderPopOver(ev, k),\n                            onMouseLeave: closePopOver,\n                          },\n                        }\n                      : {}),\n                  })),\n                ];\n\n                return arr;\n              }, [])}\n              keypadMode=\"language\"\n              onChange={handleChange}\n              onDone={onClose}\n            />\n          </div>\n        </div>,\n        document.body,\n      )}\n      {popover &&\n        ReactDOM.createPortal(\n          <CustomPopper onClose={closePopOver} anchorEl={popover.anchorEl}>\n            <div>{popover.el.label}</div>\n            <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.description}</div>\n            <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.unicode}</div>\n          </CustomPopper>,\n          document.body,\n        )}\n    </>\n  );\n}\n\nCharacterPicker.propTypes = {\n  editor: PropTypes.object,\n  opts: PropTypes.object,\n  onClose: PropTypes.func.isRequired,\n};\n\nexport { CharacterIcon };\n"],"mappings":"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","ignoreList":[]}

package/lib/components/common/toolbar-buttons.js

@@ -34,6 +34,11 @@ var StyledButton = (0, _styles.styled)('button', {
     background: 'none',
     border: 'none',
     cursor: disabled ? 'not-allowed' : 'pointer',
+    // previously we had implicit 24×24 icon rendering for mui svg icons, but now we need to explicitly set the size to 24×24 to match the previous behavior
+    '& svg': {
+      width: '24px',
+      height: '24px'
+    },
     '&:hover': {
       color: disabled ? 'grey' : 'black'
     },

package/lib/components/common/toolbar-buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-buttons.js","names":["_react","_interopRequireDefault","require","_debug","_styles","_propTypes","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","StyledButton","styled","shouldForwardProp","prop","includes","_ref","theme","active","disabled","color","display","padding","background","border","cursor","outline","concat","palette","grey","opacity","log","debug","RawButton","exports","_React$Component","props","_this","_classCallCheck2","preventDefault","onClick","key","_inherits2","_createClass2","value","render","_this$props","children","extraStyles","ariaLabel","createElement","style","onMouseDown","onKeyDown","tabIndex","React","Component","PropTypes","func","isRequired","oneOfType","arrayOf","node","bool","object","Button","RawMarkButton","_React$Component2","_this2","onToggle","mark","_this$props2","label","string","MarkButton"],"sources":["../../../src/components/common/toolbar-buttons.jsx"],"sourcesContent":["import React from 'react';\nimport debug from 'debug';\nimport { styled } from '@mui/material/styles';\nimport PropTypes from 'prop-types';\n\nconst StyledButton = styled('button', {\n  shouldForwardProp: (prop) => !['active', 'disabled', 'extraStyles'].includes(prop),\n})(({ theme, active, disabled }) => ({\n  color: active ? 'black' : 'grey',\n  display: 'inline-flex',\n  padding: '2px',\n  background: 'none',\n  border: 'none',\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  '&:hover': {\n    color: disabled ? 'grey' : 'black',\n  },\n  '&:focus': {\n    outline: `2px solid ${theme.palette.grey[700]}`,\n  },\n  ...(disabled && {\n    opacity: 0.7,\n  }),\n}));\n\nconst log = debug('pie-elements:editable-html:raw-button');\n\nexport class RawButton extends React.Component {\n  static propTypes = {\n    onClick: PropTypes.func.isRequired,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    active: PropTypes.bool,\n    disabled: PropTypes.bool,\n    extraStyles: PropTypes.object,\n  };\n\n  constructor(props) {\n    super(props);\n  }\n\n  onClick = (e) => {\n    log('[onClick]');\n    e.preventDefault();\n    const { onClick } = this.props;\n    onClick(e);\n  };\n\n  onKeyDown = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      log('[onKeyDown]');\n      e.preventDefault();\n      const { onClick } = this.props;\n      onClick(e);\n    }\n  };\n\n  render() {\n    const { active, children, disabled, extraStyles, ariaLabel } = this.props;\n\n    return (\n      <StyledButton\n        style={extraStyles}\n        active={active}\n        disabled={disabled}\n        onMouseDown={this.onClick}\n        onKeyDown={this.onKeyDown}\n        aria-label={ariaLabel}\n        aria-pressed={active}\n        tabIndex={0}\n      >\n        {children}\n      </StyledButton>\n    );\n  }\n}\n\nexport const Button = RawButton;\n\nexport class RawMarkButton extends React.Component {\n  static propTypes = {\n    onToggle: PropTypes.func.isRequired,\n    mark: PropTypes.string,\n    label: PropTypes.string.isRequired,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    active: PropTypes.bool,\n  };\n\n  constructor(props) {\n    super(props);\n  }\n\n  onToggle = (e) => {\n    e.preventDefault();\n    this.props.onToggle(this.props.mark);\n  };\n\n  onKeyDown = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.props.onToggle(this.props.mark);\n    }\n  };\n\n  render() {\n    const { children, active, label } = this.props;\n\n    return (\n      <StyledButton\n        active={active}\n        onMouseDown={this.onToggle}\n        aria-pressed={active}\n        onKeyDown={this.onKeyDown}\n        aria-label={label}\n        tabIndex={0}\n      >\n        {children}\n      </StyledButton>\n    );\n  }\n}\n\nexport const MarkButton = RawMarkButton;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"toolbar-buttons.js","names":["_react","_interopRequireDefault","require","_debug","_styles","_propTypes","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","ownKeys","r","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","push","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","StyledButton","styled","shouldForwardProp","prop","includes","_ref","theme","active","disabled","color","display","padding","background","border","cursor","width","height","outline","concat","palette","grey","opacity","log","debug","RawButton","exports","_React$Component","props","_this","_classCallCheck2","preventDefault","onClick","key","_inherits2","_createClass2","value","render","_this$props","children","extraStyles","ariaLabel","createElement","style","onMouseDown","onKeyDown","tabIndex","React","Component","PropTypes","func","isRequired","oneOfType","arrayOf","node","bool","object","Button","RawMarkButton","_React$Component2","_this2","onToggle","mark","_this$props2","label","string","MarkButton"],"sources":["../../../src/components/common/toolbar-buttons.jsx"],"sourcesContent":["import React from 'react';\nimport debug from 'debug';\nimport { styled } from '@mui/material/styles';\nimport PropTypes from 'prop-types';\n\nconst StyledButton = styled('button', {\n  shouldForwardProp: (prop) => !['active', 'disabled', 'extraStyles'].includes(prop),\n})(({ theme, active, disabled }) => ({\n  color: active ? 'black' : 'grey',\n  display: 'inline-flex',\n  padding: '2px',\n  background: 'none',\n  border: 'none',\n  cursor: disabled ? 'not-allowed' : 'pointer',\n  // previously we had implicit 24×24 icon rendering for mui svg icons, but now we need to explicitly set the size to 24×24 to match the previous behavior\n  '& svg': {\n    width: '24px',\n    height: '24px',\n  },\n  '&:hover': {\n    color: disabled ? 'grey' : 'black',\n  },\n  '&:focus': {\n    outline: `2px solid ${theme.palette.grey[700]}`,\n  },\n  ...(disabled && {\n    opacity: 0.7,\n  }),\n}));\n\nconst log = debug('pie-elements:editable-html:raw-button');\n\nexport class RawButton extends React.Component {\n  static propTypes = {\n    onClick: PropTypes.func.isRequired,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    active: PropTypes.bool,\n    disabled: PropTypes.bool,\n    extraStyles: PropTypes.object,\n  };\n\n  constructor(props) {\n    super(props);\n  }\n\n  onClick = (e) => {\n    log('[onClick]');\n    e.preventDefault();\n    const { onClick } = this.props;\n    onClick(e);\n  };\n\n  onKeyDown = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      log('[onKeyDown]');\n      e.preventDefault();\n      const { onClick } = this.props;\n      onClick(e);\n    }\n  };\n\n  render() {\n    const { active, children, disabled, extraStyles, ariaLabel } = this.props;\n\n    return (\n      <StyledButton\n        style={extraStyles}\n        active={active}\n        disabled={disabled}\n        onMouseDown={this.onClick}\n        onKeyDown={this.onKeyDown}\n        aria-label={ariaLabel}\n        aria-pressed={active}\n        tabIndex={0}\n      >\n        {children}\n      </StyledButton>\n    );\n  }\n}\n\nexport const Button = RawButton;\n\nexport class RawMarkButton extends React.Component {\n  static propTypes = {\n    onToggle: PropTypes.func.isRequired,\n    mark: PropTypes.string,\n    label: PropTypes.string.isRequired,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    active: PropTypes.bool,\n  };\n\n  constructor(props) {\n    super(props);\n  }\n\n  onToggle = (e) => {\n    e.preventDefault();\n    this.props.onToggle(this.props.mark);\n  };\n\n  onKeyDown = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.props.onToggle(this.props.mark);\n    }\n  };\n\n  render() {\n    const { children, active, label } = this.props;\n\n    return (\n      <StyledButton\n        active={active}\n        onMouseDown={this.onToggle}\n        aria-pressed={active}\n        onKeyDown={this.onKeyDown}\n        aria-label={label}\n        tabIndex={0}\n      >\n        {children}\n      </StyledButton>\n    );\n  }\n}\n\nexport const MarkButton = RawMarkButton;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.1.2-next.48+5fe114365",
+  "version": "2.1.2-next.53+8d80ab6f6",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -59,6 +59,6 @@
   "peerDependencies": {
     "react": "^18.2.0"
   },
-  "gitHead": "5fe1143658fdbb91884b63872031e13866010223",
+  "gitHead": "8d80ab6f6eb4dcebacc903aa4e35424264e291c5",
   "scripts": {}
 }

package/src/components/CharacterPicker.jsx

@@ -78,25 +78,52 @@ export function CharacterPicker({ editor, opts, onClose }) {
   useEffect(() => {
     if (!editor) return;
 
-    // Calculate position relative to selection
     const editorDOM = editor.options.element;
-    const editorRect = editorDOM.getBoundingClientRect();
-    const bodyRect = document.body.getBoundingClientRect();
-    const { from } = editor.state.selection;
-    const start = editor.view.coordsAtPos(from);
+    const editorViewDom = editor.view.dom;
 
-    let top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;
+    // Position is computed in viewport coordinates (the dialog uses position: fixed),
+    // so coordsAtPos / getBoundingClientRect values can be used directly without
+    // adding scroll offsets. The dialog is then clamped to the viewport so it does
+    // not get cut off by fixed page headers/footers.
+    const updatePosition = () => {
+      if (!containerRef.current) return;
 
-    if (editorRect.y > containerRef.current.offsetHeight) {
-      top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;
-    }
+      const editorRect = editorDOM.getBoundingClientRect();
+      const { from } = editor.state.selection;
+      const start = editor.view.coordsAtPos(from);
 
-    setPosition({
-      top: top,
-      left: start.left,
-    });
+      const dialogHeight = containerRef.current.offsetHeight;
+      const dialogWidth = containerRef.current.offsetWidth;
 
-    const editorViewDom = editor.view.dom;
+      // prefer below the editor; flip above when there isn't room below.
+      const spaceBelow = window.innerHeight - (editorRect.bottom + 60);
+      let top =
+        spaceBelow >= dialogHeight || editorRect.top < dialogHeight + 80
+          ? editorRect.bottom + 60
+          : editorRect.top - dialogHeight - 20;
+
+      let left = start.left;
+
+      const margin = 8;
+      top = Math.max(margin, Math.min(top, window.innerHeight - dialogHeight - margin));
+      left = Math.max(margin, Math.min(left, window.innerWidth - dialogWidth - margin));
+
+      setPosition({ top, left });
+    };
+
+    updatePosition();
+
+    let frame = null;
+    const scheduleUpdate = () => {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        updatePosition();
+      });
+    };
+
+    window.addEventListener('scroll', scheduleUpdate, true);
+    window.addEventListener('resize', scheduleUpdate);
 
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target) && !editorViewDom.contains(e.target)) {
@@ -110,6 +137,9 @@ export function CharacterPicker({ editor, opts, onClose }) {
 
     return () => {
       clearTimeout(timeoutId);
+      if (frame !== null) cancelAnimationFrame(frame);
+      window.removeEventListener('scroll', scheduleUpdate, true);
+      window.removeEventListener('resize', scheduleUpdate);
       document.removeEventListener('click', handleClickOutside);
     };
   }, [editor]);
@@ -131,7 +161,7 @@ export function CharacterPicker({ editor, opts, onClose }) {
           data-toolbar-for={editor.instanceId}
           style={{
             visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
-            position: 'absolute',
+            position: 'fixed',
             top: `${position.top}px`,
             left: `${position.left}px`,
             maxWidth: '500px',

package/src/components/__tests__/CharacterPicker.test.jsx

@@ -234,7 +234,7 @@ describe('CharacterPicker', () => {
     };
     const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
     const dialog = container.querySelector('.insert-character-dialog');
-    expect(dialog).toHaveStyle({ position: 'absolute' });
+    expect(dialog).toHaveStyle({ position: 'fixed' });
   });
 
   it('renders above other editor overlays with a high z-index', () => {

package/src/components/common/toolbar-buttons.jsx

@@ -12,6 +12,11 @@ const StyledButton = styled('button', {
   background: 'none',
   border: 'none',
   cursor: disabled ? 'not-allowed' : 'pointer',
+  // previously we had implicit 24×24 icon rendering for mui svg icons, but now we need to explicitly set the size to 24×24 to match the previous behavior
+  '& svg': {
+    width: '24px',
+    height: '24px',
+  },
   '&:hover': {
     color: disabled ? 'grey' : 'black',
   },