@pie-lib/editable-html 11.23.0-mui-update.0 → 11.25.0-mui-update.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [11.25.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.24.0-mui-update.0...@pie-lib/editable-html@11.25.0-mui-update.0) (2025-11-18)
+
+
+### Bug Fixes
+
+* **editable-html:** replace ReactDOM.render() with createRoot() for React 18 compatibility ([e9618b5](https://github.com/pie-framework/pie-lib/commit/e9618b5d892ee98d08f4440934eec9be58ee170a))
+
+
+
+
+
+# [11.24.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.23.0-mui-update.0...@pie-lib/editable-html@11.24.0-mui-update.0) (2025-11-18)
+
+**Note:** Version bump only for package @pie-lib/editable-html
+
+
+
+
+
 # [11.23.0-mui-update.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/editable-html@11.22.0-mui-update.0...@pie-lib/editable-html@11.23.0-mui-update.0) (2025-11-17)
 
 **Note:** Version bump only for package @pie-lib/editable-html

package/lib/plugins/characters/index.js

@@ -9,7 +9,7 @@ exports.removeDialogs = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _client = require("react-dom/client");
 var _debug = _interopRequireDefault(require("debug"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _mathToolbar = require("@pie-lib/math-toolbar");
@@ -69,9 +69,15 @@ var insertDialog = function insertDialog(_ref) {
     columns: 0
   });
   var popoverEl;
+  var popoverRoot;
   var closePopOver = function closePopOver() {
+    if (popoverRoot) {
+      popoverRoot.unmount();
+      popoverRoot = null;
+    }
     if (popoverEl) {
       popoverEl.remove();
+      popoverEl = null;
     }
     removePopOvers();
   };
@@ -85,14 +91,15 @@ var insertDialog = function insertDialog(_ref) {
     };
     closePopOver();
     popoverEl = document.createElement('div');
-    _reactDom["default"].render(/*#__PURE__*/_react["default"].createElement(_customPopper["default"], {
+    popoverRoot = (0, _client.createRoot)(popoverEl);
+    popoverRoot.render(/*#__PURE__*/_react["default"].createElement(_customPopper["default"], {
       onClose: closePopOver,
       anchorEl: event.currentTarget
     }, /*#__PURE__*/_react["default"].createElement("div", null, el.label), /*#__PURE__*/_react["default"].createElement("div", {
       style: infoStyle
     }, el.description), /*#__PURE__*/_react["default"].createElement("div", {
       style: infoStyle
-    }, el.unicode)), popoverEl);
+    }, el.unicode)));
     document.body.appendChild(newEl);
   };
   var firstCallMade = false;
@@ -158,7 +165,11 @@ var insertDialog = function insertDialog(_ref) {
     onChange: handleChange,
     onDone: handleClose
   });
-  _reactDom["default"].render(el, newEl, function () {
+  var dialogRoot = (0, _client.createRoot)(newEl);
+  dialogRoot.render(el);
+
+  // Use setTimeout to ensure the element is rendered before positioning
+  setTimeout(function () {
     var cursorItem = document.querySelector("[data-key=\"".concat(value.anchorKey, "\"]"));
     if (cursorItem) {
       var bodyRect = document.body.getBoundingClientRect();
@@ -190,7 +201,7 @@ var insertDialog = function insertDialog(_ref) {
       }
       document.body.addEventListener('click', listener);
     }
-  });
+  }, 0);
 };
 var CharacterIcon = function CharacterIcon(_ref2) {
   var letter = _ref2.letter;

package/lib/plugins/characters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_reactDom","_debug","_get","_mathToolbar","_customPopper","_utils","_utils2","_propTypes","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","log","debug","removePopOvers","prevPopOvers","document","querySelectorAll","s","remove","removeDialogs","exports","prevDialogs","insertDialog","_ref","editorDOM","value","callback","opts","newEl","createElement","className","configToUse","language","spanishConfig","specialConfig","characters","insertSnackBar","layoutForCharacters","reduce","obj","arr","columns","rows","popoverEl","closePopOver","renderPopOver","event","el","infoStyle","fontSize","lineHeight","ReactDOM","render","onClose","anchorEl","currentTarget","label","style","description","unicode","body","appendChild","firstCallMade","listener","focusIsInModals","contains","target","focusIsInEditor","handleClose","undefined","removeEventListener","handleChange","val","PureToolbar","keyPadCharacterRef","setKeypadInteraction","autoFocus","noDecimal","hideInput","noLatexHandling","hideDoneButtonBackground","layoutForKeyPad","additionalKeys","n","concat","_toConsumableArray2","map","k","name","get","write","category","extraClass","extraProps","border","hasPreview","actions","onMouseEnter","ev","onMouseLeave","keypadMode","onChange","onDone","cursorItem","querySelector","anchorKey","bodyRect","getBoundingClientRect","boundRect","additionalTopOffset","y","offsetHeight","maxWidth","position","top","Math","abs","zIndex","leftValue","left","offsetWidth","rightValue","x","leftAlignedWidth","right","rightAlignedWidth","addEventListener","CharacterIcon","_ref2","letter","propTypes","PropTypes","string","CharactersPlugin","toolbar","icon","characterIcon","characterIcons","ariaLabel","onClick","getFocusedValue","key","valueToUse","char","focus","change","insertTextByKey","anchorOffset","pluginStyles","node","parentNode","p"],"sources":["../../../src/plugins/characters/index.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport get from 'lodash/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopper from './custom-popper';\nimport { insertSnackBar } from '../respArea/utils';\nimport { characterIcons, spanishConfig, specialConfig } from './utils';\nimport PropTypes from 'prop-types';\n\nconst log = debug('@pie-lib:editable-html:plugins:characters');\n\nconst removePopOvers = () => {\n  const prevPopOvers = document.querySelectorAll('#mouse-over-popover');\n\n  log('[characters:removePopOvers]');\n  prevPopOvers.forEach((s) => s.remove());\n};\n\nexport const removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-character-dialog');\n\n  log('[characters:removeDialogs]');\n  prevDialogs.forEach((s) => s.remove());\n  removePopOvers();\n};\n\nconst insertDialog = ({ editorDOM, value, callback, opts }) => {\n  const newEl = document.createElement('div');\n\n  log('[characters:insertDialog]');\n\n  removeDialogs();\n\n  newEl.className = 'insert-character-dialog';\n\n  let configToUse;\n\n  switch (true) {\n    case opts.language === 'spanish':\n      configToUse = spanishConfig;\n      break;\n    case opts.language === 'special':\n      configToUse = specialConfig;\n      break;\n    default:\n      configToUse = opts;\n  }\n\n  if (!configToUse.characters) {\n    insertSnackBar('No characters provided or language not recognized');\n    return;\n  }\n\n  const layoutForCharacters = 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\n  let popoverEl;\n\n  const closePopOver = () => {\n    if (popoverEl) {\n      popoverEl.remove();\n    }\n\n    removePopOvers();\n  };\n\n  const renderPopOver = (event, el) => {\n    if (!event) {\n      return;\n    }\n\n    const infoStyle = { fontSize: '20px', lineHeight: '20px' };\n\n    closePopOver();\n\n    popoverEl = document.createElement('div');\n    ReactDOM.render(\n      <CustomPopper onClose={closePopOver} anchorEl={event.currentTarget}>\n        <div>{el.label}</div>\n\n        <div style={infoStyle}>{el.description}</div>\n\n        <div style={infoStyle}>{el.unicode}</div>\n      </CustomPopper>,\n      popoverEl,\n    );\n\n    document.body.appendChild(newEl);\n  };\n\n  let firstCallMade = false;\n\n  const listener = (e) => {\n    // this will be triggered right after setting it because\n    // this toolbar is added on the mousedown event\n    // so right after mouseup, the click will be triggered\n    if (firstCallMade) {\n      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));\n      const focusIsInEditor = editorDOM.contains(e.target);\n\n      if (!(focusIsInModals || focusIsInEditor)) {\n        handleClose();\n      }\n    } else {\n      firstCallMade = true;\n    }\n  };\n\n  const handleClose = () => {\n    callback(undefined, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const handleChange = (val) => {\n    if (typeof val === 'string') {\n      callback(val, true);\n    }\n  };\n\n  const el = (\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: { onMouseEnter: (ev) => renderPopOver(ev, k), onMouseLeave: closePopOver },\n                }\n              : {}),\n          })),\n        ];\n\n        return arr;\n      }, [])}\n      keypadMode=\"language\"\n      onChange={handleChange}\n      onDone={handleClose}\n    />\n  );\n\n  ReactDOM.render(el, newEl, () => {\n    const cursorItem = document.querySelector(`[data-key=\"${value.anchorKey}\"]`);\n\n    if (cursorItem) {\n      const bodyRect = document.body.getBoundingClientRect();\n      const boundRect = cursorItem.getBoundingClientRect();\n\n      document.body.appendChild(newEl);\n\n      // when height of toolbar exceeds screen - can happen in scrollable contexts\n      let additionalTopOffset = 0;\n      if (boundRect.y < newEl.offsetHeight) {\n        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;\n      }\n\n      newEl.style.maxWidth = '500px';\n      newEl.style.position = 'absolute';\n      newEl.style.top = `${boundRect.top + Math.abs(bodyRect.top) - newEl.offsetHeight - 10 + additionalTopOffset}px`;\n      newEl.style.zIndex = 99999;\n\n      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10}px`;\n\n      const rightValue = `${boundRect.x}px`;\n\n      newEl.style.left = leftValue;\n\n      const leftAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = rightValue;\n\n      const rightAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = 'unset';\n\n      if (leftAlignedWidth >= rightAlignedWidth) {\n        newEl.style.left = leftValue;\n      } else {\n        newEl.style.right = rightValue;\n      }\n\n      document.body.addEventListener('click', listener);\n    }\n  });\n};\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 default function CharactersPlugin(opts) {\n  removeDialogs();\n\n  return {\n    name: 'characters',\n    toolbar: {\n      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,\n      ariaLabel: `${opts.language} characters Toolbar`,\n      onClick: (value, onChange, getFocusedValue) => {\n        const editorDOM = document.querySelector(`[data-key=\"${value.document.key}\"]`);\n        let valueToUse = value;\n\n        const callback = (char, focus) => {\n          if (getFocusedValue) {\n            valueToUse = getFocusedValue() || valueToUse;\n          }\n\n          if (char) {\n            const change = valueToUse.change().insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);\n\n            valueToUse = change.value;\n            log('[characters:insert]: ', value);\n            onChange(change);\n          }\n\n          log('[characters:click]');\n\n          if (focus) {\n            if (editorDOM) {\n              editorDOM.focus();\n            }\n          }\n        };\n\n        insertDialog({ editorDOM, value: valueToUse, callback, opts });\n      },\n    },\n\n    pluginStyles: (node, parentNode, p) => {\n      if (p) {\n        return {\n          position: 'absolute',\n          top: 'initial',\n        };\n      }\n    },\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_debug","_get","_mathToolbar","_customPopper","_utils","_utils2","_propTypes","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","log","debug","removePopOvers","prevPopOvers","document","querySelectorAll","s","remove","removeDialogs","exports","prevDialogs","insertDialog","_ref","editorDOM","value","callback","opts","newEl","createElement","className","configToUse","language","spanishConfig","specialConfig","characters","insertSnackBar","layoutForCharacters","reduce","obj","arr","columns","rows","popoverEl","popoverRoot","closePopOver","unmount","renderPopOver","event","el","infoStyle","fontSize","lineHeight","createRoot","render","onClose","anchorEl","currentTarget","label","style","description","unicode","body","appendChild","firstCallMade","listener","focusIsInModals","contains","target","focusIsInEditor","handleClose","undefined","removeEventListener","handleChange","val","PureToolbar","keyPadCharacterRef","setKeypadInteraction","autoFocus","noDecimal","hideInput","noLatexHandling","hideDoneButtonBackground","layoutForKeyPad","additionalKeys","n","concat","_toConsumableArray2","map","k","name","get","write","category","extraClass","extraProps","border","hasPreview","actions","onMouseEnter","ev","onMouseLeave","keypadMode","onChange","onDone","dialogRoot","setTimeout","cursorItem","querySelector","anchorKey","bodyRect","getBoundingClientRect","boundRect","additionalTopOffset","y","offsetHeight","maxWidth","position","top","Math","abs","zIndex","leftValue","left","offsetWidth","rightValue","x","leftAlignedWidth","right","rightAlignedWidth","addEventListener","CharacterIcon","_ref2","letter","propTypes","PropTypes","string","CharactersPlugin","toolbar","icon","characterIcon","characterIcons","ariaLabel","onClick","getFocusedValue","key","valueToUse","char","focus","change","insertTextByKey","anchorOffset","pluginStyles","node","parentNode","p"],"sources":["../../../src/plugins/characters/index.jsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debug from 'debug';\nimport get from 'lodash/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopper from './custom-popper';\nimport { insertSnackBar } from '../respArea/utils';\nimport { characterIcons, spanishConfig, specialConfig } from './utils';\nimport PropTypes from 'prop-types';\n\nconst log = debug('@pie-lib:editable-html:plugins:characters');\n\nconst removePopOvers = () => {\n  const prevPopOvers = document.querySelectorAll('#mouse-over-popover');\n\n  log('[characters:removePopOvers]');\n  prevPopOvers.forEach((s) => s.remove());\n};\n\nexport const removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-character-dialog');\n\n  log('[characters:removeDialogs]');\n  prevDialogs.forEach((s) => s.remove());\n  removePopOvers();\n};\n\nconst insertDialog = ({ editorDOM, value, callback, opts }) => {\n  const newEl = document.createElement('div');\n\n  log('[characters:insertDialog]');\n\n  removeDialogs();\n\n  newEl.className = 'insert-character-dialog';\n\n  let configToUse;\n\n  switch (true) {\n    case opts.language === 'spanish':\n      configToUse = spanishConfig;\n      break;\n    case opts.language === 'special':\n      configToUse = specialConfig;\n      break;\n    default:\n      configToUse = opts;\n  }\n\n  if (!configToUse.characters) {\n    insertSnackBar('No characters provided or language not recognized');\n    return;\n  }\n\n  const layoutForCharacters = 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\n  let popoverEl;\n  let popoverRoot;\n\n  const closePopOver = () => {\n    if (popoverRoot) {\n      popoverRoot.unmount();\n      popoverRoot = null;\n    }\n    if (popoverEl) {\n      popoverEl.remove();\n      popoverEl = null;\n    }\n\n    removePopOvers();\n  };\n\n  const renderPopOver = (event, el) => {\n    if (!event) {\n      return;\n    }\n\n    const infoStyle = { fontSize: '20px', lineHeight: '20px' };\n\n    closePopOver();\n\n    popoverEl = document.createElement('div');\n    popoverRoot = createRoot(popoverEl);\n    popoverRoot.render(\n      <CustomPopper onClose={closePopOver} anchorEl={event.currentTarget}>\n        <div>{el.label}</div>\n\n        <div style={infoStyle}>{el.description}</div>\n\n        <div style={infoStyle}>{el.unicode}</div>\n      </CustomPopper>,\n    );\n\n    document.body.appendChild(newEl);\n  };\n\n  let firstCallMade = false;\n\n  const listener = (e) => {\n    // this will be triggered right after setting it because\n    // this toolbar is added on the mousedown event\n    // so right after mouseup, the click will be triggered\n    if (firstCallMade) {\n      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));\n      const focusIsInEditor = editorDOM.contains(e.target);\n\n      if (!(focusIsInModals || focusIsInEditor)) {\n        handleClose();\n      }\n    } else {\n      firstCallMade = true;\n    }\n  };\n\n  const handleClose = () => {\n    callback(undefined, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const handleChange = (val) => {\n    if (typeof val === 'string') {\n      callback(val, true);\n    }\n  };\n\n  const el = (\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: { onMouseEnter: (ev) => renderPopOver(ev, k), onMouseLeave: closePopOver },\n                }\n              : {}),\n          })),\n        ];\n\n        return arr;\n      }, [])}\n      keypadMode=\"language\"\n      onChange={handleChange}\n      onDone={handleClose}\n    />\n  );\n\n  const dialogRoot = createRoot(newEl);\n  dialogRoot.render(el);\n\n  // Use setTimeout to ensure the element is rendered before positioning\n  setTimeout(() => {\n    const cursorItem = document.querySelector(`[data-key=\"${value.anchorKey}\"]`);\n\n    if (cursorItem) {\n      const bodyRect = document.body.getBoundingClientRect();\n      const boundRect = cursorItem.getBoundingClientRect();\n\n      document.body.appendChild(newEl);\n\n      // when height of toolbar exceeds screen - can happen in scrollable contexts\n      let additionalTopOffset = 0;\n      if (boundRect.y < newEl.offsetHeight) {\n        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;\n      }\n\n      newEl.style.maxWidth = '500px';\n      newEl.style.position = 'absolute';\n      newEl.style.top = `${boundRect.top + Math.abs(bodyRect.top) - newEl.offsetHeight - 10 + additionalTopOffset}px`;\n      newEl.style.zIndex = 99999;\n\n      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10}px`;\n\n      const rightValue = `${boundRect.x}px`;\n\n      newEl.style.left = leftValue;\n\n      const leftAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = rightValue;\n\n      const rightAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = 'unset';\n\n      if (leftAlignedWidth >= rightAlignedWidth) {\n        newEl.style.left = leftValue;\n      } else {\n        newEl.style.right = rightValue;\n      }\n\n      document.body.addEventListener('click', listener);\n    }\n  }, 0);\n};\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 default function CharactersPlugin(opts) {\n  removeDialogs();\n\n  return {\n    name: 'characters',\n    toolbar: {\n      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,\n      ariaLabel: `${opts.language} characters Toolbar`,\n      onClick: (value, onChange, getFocusedValue) => {\n        const editorDOM = document.querySelector(`[data-key=\"${value.document.key}\"]`);\n        let valueToUse = value;\n\n        const callback = (char, focus) => {\n          if (getFocusedValue) {\n            valueToUse = getFocusedValue() || valueToUse;\n          }\n\n          if (char) {\n            const change = valueToUse.change().insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);\n\n            valueToUse = change.value;\n            log('[characters:insert]: ', value);\n            onChange(change);\n          }\n\n          log('[characters:click]');\n\n          if (focus) {\n            if (editorDOM) {\n              editorDOM.focus();\n            }\n          }\n        };\n\n        insertDialog({ editorDOM, value: valueToUse, callback, opts });\n      },\n    },\n\n    pluginStyles: (node, parentNode, p) => {\n      if (p) {\n        return {\n          position: 'absolute',\n          top: 'initial',\n        };\n      }\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,IAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,IAAAI,YAAA,GAAAJ,OAAA;AAEA,IAAAK,aAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,UAAA,GAAAT,sBAAA,CAAAC,OAAA;AAAmC,SAAAS,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,aAAAhB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAc,yBAAA,GAAAd,MAAA,CAAAe,gBAAA,CAAAlB,CAAA,EAAAG,MAAA,CAAAc,yBAAA,CAAAf,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAgB,cAAA,CAAAnB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAEnC,IAAMoB,GAAG,GAAG,IAAAC,iBAAK,EAAC,2CAA2C,CAAC;AAE9D,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAA,EAAS;EAC3B,IAAMC,YAAY,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,qBAAqB,CAAC;EAErEL,GAAG,CAAC,6BAA6B,CAAC;EAClCG,YAAY,CAACR,OAAO,CAAC,UAACW,CAAC;IAAA,OAAKA,CAAC,CAACC,MAAM,CAAC,CAAC;EAAA,EAAC;AACzC,CAAC;AAEM,IAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,SAAhBA,aAAaA,CAAA,EAAS;EACjC,IAAME,WAAW,GAAGN,QAAQ,CAACC,gBAAgB,CAAC,0BAA0B,CAAC;EAEzEL,GAAG,CAAC,4BAA4B,CAAC;EACjCU,WAAW,CAACf,OAAO,CAAC,UAACW,CAAC;IAAA,OAAKA,CAAC,CAACC,MAAM,CAAC,CAAC;EAAA,EAAC;EACtCL,cAAc,CAAC,CAAC;AAClB,CAAC;AAED,IAAMS,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA,EAA6C;EAAA,IAAvCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,KAAK,GAAAF,IAAA,CAALE,KAAK;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAEC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;EACtD,IAAMC,KAAK,GAAGb,QAAQ,CAACc,aAAa,CAAC,KAAK,CAAC;EAE3ClB,GAAG,CAAC,2BAA2B,CAAC;EAEhCQ,aAAa,CAAC,CAAC;EAEfS,KAAK,CAACE,SAAS,GAAG,yBAAyB;EAE3C,IAAIC,WAAW;EAEf,QAAQ,IAAI;IACV,KAAKJ,IAAI,CAACK,QAAQ,KAAK,SAAS;MAC9BD,WAAW,GAAGE,qBAAa;MAC3B;IACF,KAAKN,IAAI,CAACK,QAAQ,KAAK,SAAS;MAC9BD,WAAW,GAAGG,qBAAa;MAC3B;IACF;MACEH,WAAW,GAAGJ,IAAI;EACtB;EAEA,IAAI,CAACI,WAAW,CAACI,UAAU,EAAE;IAC3B,IAAAC,qBAAc,EAAC,mDAAmD,CAAC;IACnE;EACF;EAEA,IAAMC,mBAAmB,GAAGN,WAAW,CAACI,UAAU,CAACG,MAAM,CACvD,UAACC,GAAG,EAAEC,GAAG,EAAK;IACZ,IAAIA,GAAG,CAACnC,MAAM,IAAIkC,GAAG,CAACE,OAAO,EAAE;MAC7BF,GAAG,CAACE,OAAO,GAAGD,GAAG,CAACnC,MAAM;IAC1B;IAEA,OAAOkC,GAAG;EACZ,CAAC,EACD;IAAEG,IAAI,EAAEX,WAAW,CAACI,UAAU,CAAC9B,MAAM;IAAEoC,OAAO,EAAE;EAAE,CACpD,CAAC;EAED,IAAIE,SAAS;EACb,IAAIC,WAAW;EAEf,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;IACzB,IAAID,WAAW,EAAE;MACfA,WAAW,CAACE,OAAO,CAAC,CAAC;MACrBF,WAAW,GAAG,IAAI;IACpB;IACA,IAAID,SAAS,EAAE;MACbA,SAAS,CAACzB,MAAM,CAAC,CAAC;MAClByB,SAAS,GAAG,IAAI;IAClB;IAEA9B,cAAc,CAAC,CAAC;EAClB,CAAC;EAED,IAAMkC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAK,EAAEC,EAAE,EAAK;IACnC,IAAI,CAACD,KAAK,EAAE;MACV;IACF;IAEA,IAAME,SAAS,GAAG;MAAEC,QAAQ,EAAE,MAAM;MAAEC,UAAU,EAAE;IAAO,CAAC;IAE1DP,YAAY,CAAC,CAAC;IAEdF,SAAS,GAAG5B,QAAQ,CAACc,aAAa,CAAC,KAAK,CAAC;IACzCe,WAAW,GAAG,IAAAS,kBAAU,EAACV,SAAS,CAAC;IACnCC,WAAW,CAACU,MAAM,cAChB3E,MAAA,YAAAkD,aAAA,CAAC3C,aAAA,WAAY;MAACqE,OAAO,EAAEV,YAAa;MAACW,QAAQ,EAAER,KAAK,CAACS;IAAc,gBACjE9E,MAAA,YAAAkD,aAAA,cAAMoB,EAAE,CAACS,KAAW,CAAC,eAErB/E,MAAA,YAAAkD,aAAA;MAAK8B,KAAK,EAAET;IAAU,GAAED,EAAE,CAACW,WAAiB,CAAC,eAE7CjF,MAAA,YAAAkD,aAAA;MAAK8B,KAAK,EAAET;IAAU,GAAED,EAAE,CAACY,OAAa,CAC5B,CAChB,CAAC;IAED9C,QAAQ,CAAC+C,IAAI,CAACC,WAAW,CAACnC,KAAK,CAAC;EAClC,CAAC;EAED,IAAIoC,aAAa,GAAG,KAAK;EAEzB,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAI1E,CAAC,EAAK;IACtB;IACA;IACA;IACA,IAAIyE,aAAa,EAAE;MACjB,IAAME,eAAe,GAAGtC,KAAK,CAACuC,QAAQ,CAAC5E,CAAC,CAAC6E,MAAM,CAAC,IAAKzB,SAAS,IAAIA,SAAS,CAACwB,QAAQ,CAAC5E,CAAC,CAAC6E,MAAM,CAAE;MAC/F,IAAMC,eAAe,GAAG7C,SAAS,CAAC2C,QAAQ,CAAC5E,CAAC,CAAC6E,MAAM,CAAC;MAEpD,IAAI,EAAEF,eAAe,IAAIG,eAAe,CAAC,EAAE;QACzCC,WAAW,CAAC,CAAC;MACf;IACF,CAAC,MAAM;MACLN,aAAa,GAAG,IAAI;IACtB;EACF,CAAC;EAED,IAAMM,WAAW,GAAG,SAAdA,WAAWA,CAAA,EAAS;IACxB5C,QAAQ,CAAC6C,SAAS,EAAE,IAAI,CAAC;IACzB3C,KAAK,CAACV,MAAM,CAAC,CAAC;IACd2B,YAAY,CAAC,CAAC;IACd9B,QAAQ,CAAC+C,IAAI,CAACU,mBAAmB,CAAC,OAAO,EAAEP,QAAQ,CAAC;EACtD,CAAC;EAED,IAAMQ,YAAY,GAAG,SAAfA,YAAYA,CAAIC,GAAG,EAAK;IAC5B,IAAI,OAAOA,GAAG,KAAK,QAAQ,EAAE;MAC3BhD,QAAQ,CAACgD,GAAG,EAAE,IAAI,CAAC;IACrB;EACF,CAAC;EAED,IAAMzB,EAAE,gBACNtE,MAAA,YAAAkD,aAAA,CAAC5C,YAAA,CAAA0F,WAAW;IACVC,kBAAkB,EAAEjD,IAAI,CAACiD,kBAAmB;IAC5CC,oBAAoB,EAAElD,IAAI,CAACkD,oBAAqB;IAChDC,SAAS;IACTC,SAAS;IACTC,SAAS;IACTC,eAAe;IACfC,wBAAwB;IACxBC,eAAe,EAAE9C,mBAAoB;IACrC+C,cAAc,EAAErD,WAAW,CAACI,UAAU,CAACG,MAAM,CAAC,UAACE,GAAG,EAAE6C,CAAC,EAAK;MACxD7C,GAAG,MAAA8C,MAAA,KAAAC,mBAAA,aACE/C,GAAG,OAAA+C,mBAAA,aACHF,CAAC,CAACG,GAAG,CAAC,UAACC,CAAC;QAAA,OAAAtF,aAAA;UACTuF,IAAI,EAAE,IAAAC,eAAG,EAACF,CAAC,EAAE,MAAM,CAAC,IAAIA,CAAC;UACzBG,KAAK,EAAE,IAAAD,eAAG,EAACF,CAAC,EAAE,OAAO,CAAC,IAAIA,CAAC;UAC3B/B,KAAK,EAAE,IAAAiC,eAAG,EAACF,CAAC,EAAE,OAAO,CAAC,IAAIA,CAAC;UAC3BI,QAAQ,EAAE,WAAW;UACrBC,UAAU,EAAE,WAAW;UACvBC,UAAU,EAAA5F,aAAA,CAAAA,aAAA,KACJsF,CAAC,CAACM,UAAU,IAAI,CAAC,CAAC;YACtBpC,KAAK,EAAAxD,aAAA,CAAAA,aAAA,KACA,CAACsF,CAAC,CAACM,UAAU,IAAI,CAAC,CAAC,EAAEpC,KAAK;cAC7BqC,MAAM,EAAE;YAAgB;UACzB;QACF,GACGjE,WAAW,CAACkE,UAAU,GACtB;UACEC,OAAO,EAAE;YAAEC,YAAY,EAAE,SAAdA,YAAYA,CAAGC,EAAE;cAAA,OAAKrD,aAAa,CAACqD,EAAE,EAAEX,CAAC,CAAC;YAAA;YAAEY,YAAY,EAAExD;UAAa;QACpF,CAAC,GACD,CAAC,CAAC;MAAA,CACN,CAAC,EACJ;MAED,OAAOL,GAAG;IACZ,CAAC,EAAE,EAAE,CAAE;IACP8D,UAAU,EAAC,UAAU;IACrBC,QAAQ,EAAE9B,YAAa;IACvB+B,MAAM,EAAElC;EAAY,CACrB,CACF;EAED,IAAMmC,UAAU,GAAG,IAAApD,kBAAU,EAACzB,KAAK,CAAC;EACpC6E,UAAU,CAACnD,MAAM,CAACL,EAAE,CAAC;;EAErB;EACAyD,UAAU,CAAC,YAAM;IACf,IAAMC,UAAU,GAAG5F,QAAQ,CAAC6F,aAAa,gBAAAtB,MAAA,CAAe7D,KAAK,CAACoF,SAAS,QAAI,CAAC;IAE5E,IAAIF,UAAU,EAAE;MACd,IAAMG,QAAQ,GAAG/F,QAAQ,CAAC+C,IAAI,CAACiD,qBAAqB,CAAC,CAAC;MACtD,IAAMC,SAAS,GAAGL,UAAU,CAACI,qBAAqB,CAAC,CAAC;MAEpDhG,QAAQ,CAAC+C,IAAI,CAACC,WAAW,CAACnC,KAAK,CAAC;;MAEhC;MACA,IAAIqF,mBAAmB,GAAG,CAAC;MAC3B,IAAID,SAAS,CAACE,CAAC,GAAGtF,KAAK,CAACuF,YAAY,EAAE;QACpCF,mBAAmB,GAAGrF,KAAK,CAACuF,YAAY,GAAGH,SAAS,CAACE,CAAC,GAAG,EAAE;MAC7D;MAEAtF,KAAK,CAAC+B,KAAK,CAACyD,QAAQ,GAAG,OAAO;MAC9BxF,KAAK,CAAC+B,KAAK,CAAC0D,QAAQ,GAAG,UAAU;MACjCzF,KAAK,CAAC+B,KAAK,CAAC2D,GAAG,MAAAhC,MAAA,CAAM0B,SAAS,CAACM,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACV,QAAQ,CAACQ,GAAG,CAAC,GAAG1F,KAAK,CAACuF,YAAY,GAAG,EAAE,GAAGF,mBAAmB,OAAI;MAC/GrF,KAAK,CAAC+B,KAAK,CAAC8D,MAAM,GAAG,KAAK;MAE1B,IAAMC,SAAS,MAAApC,MAAA,CAAM0B,SAAS,CAACW,IAAI,GAAGJ,IAAI,CAACC,GAAG,CAACV,QAAQ,CAACa,IAAI,CAAC,GAAGhB,UAAU,CAACiB,WAAW,GAAG,EAAE,OAAI;MAE/F,IAAMC,UAAU,MAAAvC,MAAA,CAAM0B,SAAS,CAACc,CAAC,OAAI;MAErClG,KAAK,CAAC+B,KAAK,CAACgE,IAAI,GAAGD,SAAS;MAE5B,IAAMK,gBAAgB,GAAGnG,KAAK,CAACgG,WAAW;MAE1ChG,KAAK,CAAC+B,KAAK,CAACgE,IAAI,GAAG,OAAO;MAC1B/F,KAAK,CAAC+B,KAAK,CAACqE,KAAK,GAAGH,UAAU;MAE9B,IAAMI,iBAAiB,GAAGrG,KAAK,CAACgG,WAAW;MAE3ChG,KAAK,CAAC+B,KAAK,CAACgE,IAAI,GAAG,OAAO;MAC1B/F,KAAK,CAAC+B,KAAK,CAACqE,KAAK,GAAG,OAAO;MAE3B,IAAID,gBAAgB,IAAIE,iBAAiB,EAAE;QACzCrG,KAAK,CAAC+B,KAAK,CAACgE,IAAI,GAAGD,SAAS;MAC9B,CAAC,MAAM;QACL9F,KAAK,CAAC+B,KAAK,CAACqE,KAAK,GAAGH,UAAU;MAChC;MAEA9G,QAAQ,CAAC+C,IAAI,CAACoE,gBAAgB,CAAC,OAAO,EAAEjE,QAAQ,CAAC;IACnD;EACF,CAAC,EAAE,CAAC,CAAC;AACP,CAAC;AAED,IAAMkE,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,KAAA;EAAA,IAAMC,MAAM,GAAAD,KAAA,CAANC,MAAM;EAAA,oBAC7B1J,MAAA,YAAAkD,aAAA;IACE8B,KAAK,EAAE;MACLR,QAAQ,EAAE,MAAM;MAChBC,UAAU,EAAE;IACd;EAAE,GAEDiF,MACE,CAAC;AAAA,CACP;AAEDF,aAAa,CAACG,SAAS,GAAG;EACxBD,MAAM,EAAEE,qBAAS,CAACC;AACpB,CAAC;AAEc,SAASC,gBAAgBA,CAAC9G,IAAI,EAAE;EAC7CR,aAAa,CAAC,CAAC;EAEf,OAAO;IACLuE,IAAI,EAAE,YAAY;IAClBgD,OAAO,EAAE;MACPC,IAAI,eAAEhK,MAAA,YAAAkD,aAAA,CAACsG,aAAa;QAACE,MAAM,EAAE1G,IAAI,CAACiH,aAAa,IAAIC,sBAAc,CAAClH,IAAI,CAACK,QAAQ,CAAC,IAAI;MAAI,CAAE,CAAC;MAC3F8G,SAAS,KAAAxD,MAAA,CAAK3D,IAAI,CAACK,QAAQ,wBAAqB;MAChD+G,OAAO,EAAE,SAATA,OAAOA,CAAGtH,KAAK,EAAE8E,QAAQ,EAAEyC,eAAe,EAAK;QAC7C,IAAMxH,SAAS,GAAGT,QAAQ,CAAC6F,aAAa,gBAAAtB,MAAA,CAAe7D,KAAK,CAACV,QAAQ,CAACkI,GAAG,QAAI,CAAC;QAC9E,IAAIC,UAAU,GAAGzH,KAAK;QAEtB,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAIyH,KAAI,EAAEC,KAAK,EAAK;UAChC,IAAIJ,eAAe,EAAE;YACnBE,UAAU,GAAGF,eAAe,CAAC,CAAC,IAAIE,UAAU;UAC9C;UAEA,IAAIC,KAAI,EAAE;YACR,IAAME,MAAM,GAAGH,UAAU,CAACG,MAAM,CAAC,CAAC,CAACC,eAAe,CAACJ,UAAU,CAACrC,SAAS,EAAEqC,UAAU,CAACK,YAAY,EAAEJ,KAAI,CAAC;YAEvGD,UAAU,GAAGG,MAAM,CAAC5H,KAAK;YACzBd,GAAG,CAAC,uBAAuB,EAAEc,KAAK,CAAC;YACnC8E,QAAQ,CAAC8C,MAAM,CAAC;UAClB;UAEA1I,GAAG,CAAC,oBAAoB,CAAC;UAEzB,IAAIyI,KAAK,EAAE;YACT,IAAI5H,SAAS,EAAE;cACbA,SAAS,CAAC4H,KAAK,CAAC,CAAC;YACnB;UACF;QACF,CAAC;QAED9H,YAAY,CAAC;UAAEE,SAAS,EAATA,SAAS;UAAEC,KAAK,EAAEyH,UAAU;UAAExH,QAAQ,EAARA,QAAQ;UAAEC,IAAI,EAAJA;QAAK,CAAC,CAAC;MAChE;IACF,CAAC;IAED6H,YAAY,EAAE,SAAdA,YAAYA,CAAGC,IAAI,EAAEC,UAAU,EAAEC,CAAC,EAAK;MACrC,IAAIA,CAAC,EAAE;QACL,OAAO;UACLtC,QAAQ,EAAE,UAAU;UACpBC,GAAG,EAAE;QACP,CAAC;MACH;IACF;EACF,CAAC;AACH","ignoreList":[]}

package/lib/plugins/css/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = CSSPlugin;
 exports.removeDialogs = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _client = require("react-dom/client");
 var _List = _interopRequireDefault(require("@mui/material/List"));
 var _slate = require("slate");
 var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
@@ -113,7 +113,11 @@ var insertDialog = function insertDialog(_ref) {
       }
     }));
   })));
-  _reactDom["default"].render(el, newEl, function () {
+  var dialogRoot = (0, _client.createRoot)(newEl);
+  dialogRoot.render(el);
+
+  // Use setTimeout to ensure the element is rendered before positioning
+  setTimeout(function () {
     var cursorItem = document.querySelector("[data-key=\"".concat(value.anchorKey, "\"]"));
     if (cursorItem) {
       var bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();
@@ -145,7 +149,7 @@ var insertDialog = function insertDialog(_ref) {
       }
       document.body.addEventListener('click', listener);
     }
-  });
+  }, 0);
 };
 var findParentNodeInfo = function findParentNodeInfo(value, textNode) {
   var _closestInline$nodes, _closestBlock$nodes;

package/lib/plugins/css/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_reactDom","_List","_slate","_ListItem","_debug","_icons","log","debug","removeDialogs","exports","prevDialogs","document","querySelectorAll","forEach","s","remove","insertDialog","_ref","_parentNode$data","editorDOM","value","callback","opts","textNode","parentNode","newEl","createElement","className","popoverEl","closePopOver","firstCallMade","listener","e","focusIsInModals","contains","target","focusIsInEditor","handleClose","undefined","body","removeEventListener","handleChange","name","selectedText","text","slice","selection","anchorOffset","focusOffset","parentNodeClass","data","get","createHTML","html","concat","tag","object","el","style","background","height","padding","overflow","display","flexFlow","component","names","map","i","key","button","onClick","marginRight","dangerouslySetInnerHTML","__html","ReactDOM","render","cursorItem","querySelector","anchorKey","bodyRect","parentElement","getBoundingClientRect","boundRect","appendChild","additionalTopOffset","y","offsetHeight","maxWidth","position","top","zIndex","leftValue","left","Math","abs","offsetWidth","rightValue","x","leftAlignedWidth","right","rightAlignedWidth","addEventListener","findParentNodeInfo","_closestInline$nodes","_closestBlock$nodes","closestInline","getClosestInline","endKey","closestBlock","getClosestBlock","nodeToUse","nodes","find","n","getNodeWithClass","_blocksAtRange$","_inlinesAtRange$","_blockData$attributes","_inlineData$attribute","blocksAtRange","getBlocksAtRangeAsArray","inlinesAtRange","getInlinesAtRangeAsArray","blockData","toJSON","inlineData","attributes","_ref2","blockClass","_ref3","inlineClass","inlineHasClass","includes","blockHasClass","CSSPlugin","plugin","toolbar","isMark","icon","ariaLabel","type","onToggle","change","hasMark","activeMarks","entry","removeMark","newMark","Mark","create","addMark","onChange","getFocusedValue","valueToUse","focus","setTimeout","getTextsAtRangeAsArray","renderMark","props","mark","_ref4","jsonData","children"],"sources":["../../../src/plugins/css/index.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport List from '@mui/material/List';\nimport { Mark } from 'slate';\nimport ListItem from '@mui/material/ListItem';\nimport debug from 'debug';\nimport CssIcon from './icons';\n\nconst log = debug('@pie-lib:editable-html:plugins:characters');\n\nexport const removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-css-dialog');\n\n  log('[characters:removeDialogs]');\n  prevDialogs.forEach((s) => s.remove());\n};\n\nconst insertDialog = ({ editorDOM, value, callback, opts, textNode, parentNode }) => {\n  const newEl = document.createElement('div');\n\n  log('[characters:insertDialog]');\n\n  removeDialogs();\n\n  newEl.className = 'insert-css-dialog';\n\n  let popoverEl;\n\n  const closePopOver = () => {\n    if (popoverEl) {\n      popoverEl.remove();\n    }\n  };\n\n  let firstCallMade = false;\n\n  const listener = (e) => {\n    // this will be triggered right after setting it because\n    // this toolbar is added on the mousedown event\n    // so right after mouseup, the click will be triggered\n    if (firstCallMade) {\n      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));\n      const focusIsInEditor = editorDOM.contains(e.target);\n\n      if (!(focusIsInModals || focusIsInEditor)) {\n        handleClose();\n      }\n    } else {\n      firstCallMade = true;\n    }\n  };\n\n  const handleClose = () => {\n    callback(undefined, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const handleChange = (name) => {\n    callback(name, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const selectedText = textNode.text.slice(value.selection.anchorOffset, value.selection.focusOffset);\n  const parentNodeClass = parentNode?.data?.get('attributes')?.class;\n  const createHTML = (name) => {\n    let html = `<span class=\"${name}\">${selectedText}</span>`;\n\n    if (parentNode) {\n      let tag;\n\n      if (parentNode?.object === 'inline') {\n        tag = 'span';\n      }\n\n      if (parentNode?.object === 'block') {\n        tag = 'div';\n      }\n\n      html = `<${tag} class=\"${parentNodeClass}\">${parentNode.text.slice(\n        0,\n        value.selection.anchorOffset,\n      )}${html}${parentNode.text.slice(value.selection.focusOffset)}</${tag}>`;\n    }\n\n    return html;\n  };\n\n  const el = (\n    <div\n      style={{ background: 'white', height: 500, padding: 20, overflow: 'hidden', display: 'flex', flexFlow: 'column' }}\n    >\n      <h2>Please choose a css class</h2>\n      {parentNodeClass && <div>The current parent has this class {parentNodeClass}</div>}\n      <List component=\"nav\" style={{ overflow: 'scroll' }}>\n        {opts.names.map((name, i) => (\n          <ListItem key={`rule-${i}`} button onClick={() => handleChange(name)}>\n            <div style={{ marginRight: 20 }}>{name}</div>\n            <div\n              dangerouslySetInnerHTML={{\n                __html: createHTML(name),\n              }}\n            />\n          </ListItem>\n        ))}\n      </List>\n    </div>\n  );\n\n  ReactDOM.render(el, newEl, () => {\n    const cursorItem = document.querySelector(`[data-key=\"${value.anchorKey}\"]`);\n\n    if (cursorItem) {\n      const bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();\n      const boundRect = cursorItem.getBoundingClientRect();\n\n      editorDOM.parentElement.parentElement.parentElement.appendChild(newEl);\n\n      // when height of toolbar exceeds screen - can happen in scrollable contexts\n      let additionalTopOffset = 0;\n      if (boundRect.y < newEl.offsetHeight) {\n        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;\n      }\n\n      newEl.style.maxWidth = '500px';\n      newEl.style.position = 'absolute';\n      newEl.style.top = 0;\n      newEl.style.zIndex = 99999;\n\n      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10}px`;\n\n      const rightValue = `${boundRect.x}px`;\n\n      newEl.style.left = leftValue;\n\n      const leftAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = rightValue;\n\n      const rightAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = 'unset';\n\n      if (leftAlignedWidth >= rightAlignedWidth) {\n        newEl.style.left = leftValue;\n      } else {\n        newEl.style.right = rightValue;\n      }\n\n      document.body.addEventListener('click', listener);\n    }\n  });\n};\n\nconst findParentNodeInfo = (value, textNode) => {\n  const closestInline = value.document.getClosestInline(value.selection.endKey);\n  const closestBlock = value.document.getClosestBlock(value.selection.endKey);\n  let nodeToUse = null;\n\n  if (closestInline?.nodes?.find((n) => n.key === textNode.key)) {\n    nodeToUse = closestInline;\n  }\n\n  if (closestBlock?.nodes?.find((n) => n.key === textNode.key)) {\n    nodeToUse = closestBlock;\n  }\n\n  return nodeToUse;\n};\n\n/**\n * Find the node that has a class attribute and return it.\n * Keeping this in case the implementation of classes needs to be changed\n * @param value\n * @param opts\n * @returns {*}\n */\nconst getNodeWithClass = (value, opts) => {\n  const blocksAtRange = value.document.getBlocksAtRangeAsArray(value.selection);\n  const inlinesAtRange = value.document.getInlinesAtRangeAsArray(value.selection);\n  const blockData = blocksAtRange[0]?.data.toJSON() || {};\n  const inlineData = inlinesAtRange[0]?.data.toJSON() || {};\n\n  if (!blockData.attributes?.class && !inlineData.attributes?.class) {\n    return null;\n  }\n\n  const { class: blockClass } = blockData.attributes || {};\n  const { class: inlineClass } = inlineData.attributes || {};\n  const inlineHasClass = opts.names.find((name) => inlineClass.includes(name));\n\n  if (inlineHasClass) {\n    return inlinesAtRange[0];\n  }\n\n  const blockHasClass = opts.names.find((name) => blockClass.includes(name));\n\n  if (blockHasClass) {\n    return blocksAtRange[0];\n  }\n\n  return null;\n};\n\n/**\n * Plugin in order to be able to add a css clas that is provided through the model\n * on a text element. Works like a mark (bold, italic etc.).\n * @param opts\n * @constructor\n */\nexport default function CSSPlugin(opts) {\n  const plugin = {\n    name: 'extraCSSRules',\n    toolbar: {\n      isMark: true,\n      icon: <CssIcon />,\n      ariaLabel: 'CSS editor',\n      type: 'css',\n      onToggle: (change) => {\n        const type = 'css';\n        const hasMark = change.value.activeMarks.find((entry) => {\n          return entry.type === type;\n        });\n\n        if (hasMark) {\n          change.removeMark(hasMark);\n        } else {\n          const newMark = Mark.create(type);\n\n          change.addMark(newMark);\n        }\n\n        return change;\n      },\n      onClick: (value, onChange, getFocusedValue) => {\n        const type = 'css';\n        const hasMark = value.activeMarks.find((entry) => {\n          return entry.type === type;\n        });\n\n        let change = value.change();\n\n        if (hasMark) {\n          change.removeMark(hasMark);\n          onChange(change);\n          return;\n        }\n\n        // keeping this if implementation needs to be changed to regular blocks instead of marks\n        // let nodeWithClass = getNodeWithClass(value, opts);\n        //\n        // if (nodeWithClass) {\n        //   const nodeAttributes = nodeWithClass.data.get('attributes');\n        //\n        //   opts.names.forEach((name) => {\n        //     if (nodeAttributes.class.includes(name)) {\n        //       nodeAttributes.class = nodeAttributes.class.replace(name, '');\n        //     }\n        //   });\n        //\n        //   // keeping only one space between classes\n        //   nodeAttributes.class = nodeAttributes.class.replace(/ +/g, ' ');\n        //\n        //   nodeWithClass.data.set('attributes', nodeAttributes);\n        //\n        //   let change = value.change();\n        //   change.replaceNodeByKey(nodeWithClass.key, nodeWithClass);\n        //\n        //   onChange(change);\n        //   return;\n        // }\n\n        const editorDOM = document.querySelector(`[data-key=\"${value.document.key}\"]`);\n        let valueToUse = value;\n\n        const callback = (className, focus) => {\n          if (getFocusedValue) {\n            valueToUse = getFocusedValue() || valueToUse;\n          }\n\n          if (className) {\n            let change = valueToUse.change();\n\n            const newMark = Mark.create({\n              object: 'mark',\n              type: 'css',\n              data: {\n                attributes: {\n                  class: className,\n                },\n              },\n            });\n\n            change.addMark(newMark);\n            // keeping this if implementation needs to be changed to regular blocks instead of marks\n            // change = change.wrapInline({ type: 'span', data: { attributes: { class: className } } });\n            //\n            // // change = change.splitBlockAtRange(adaptedRange);\n            // //\n            // // const newBlock = change.value.document.getFurthestBlock(change.value.selection.endKey);\n            // //\n            // // change = change.setNodeByKey(newBlock.key, { data: { attributes: { class: className } } });\n            //\n            // valueToUse = change.value;\n            // log('[characters:insert]: ', value);\n            onChange(change);\n          }\n\n          log('[characters:click]');\n\n          if (focus) {\n            setTimeout(() => {\n              if (editorDOM) {\n                editorDOM.focus();\n              }\n            }, 0);\n          }\n        };\n        const textNode = value.document.getTextsAtRangeAsArray(value.selection)[0];\n\n        if (textNode) {\n          const parentNode = findParentNodeInfo(value, textNode, opts);\n\n          insertDialog({ editorDOM, value: valueToUse, callback, opts, textNode, parentNode });\n        }\n      },\n    },\n    renderMark(props) {\n      if (props.mark.type === 'css') {\n        const { data } = props.mark || {};\n        const jsonData = data?.toJSON() || {};\n\n        return <span {...jsonData.attributes}>{props.children}</span>;\n      }\n    },\n  };\n\n  return plugin;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_List","_slate","_ListItem","_debug","_icons","log","debug","removeDialogs","exports","prevDialogs","document","querySelectorAll","forEach","s","remove","insertDialog","_ref","_parentNode$data","editorDOM","value","callback","opts","textNode","parentNode","newEl","createElement","className","popoverEl","closePopOver","firstCallMade","listener","e","focusIsInModals","contains","target","focusIsInEditor","handleClose","undefined","body","removeEventListener","handleChange","name","selectedText","text","slice","selection","anchorOffset","focusOffset","parentNodeClass","data","get","createHTML","html","concat","tag","object","el","style","background","height","padding","overflow","display","flexFlow","component","names","map","i","key","button","onClick","marginRight","dangerouslySetInnerHTML","__html","dialogRoot","createRoot","render","setTimeout","cursorItem","querySelector","anchorKey","bodyRect","parentElement","getBoundingClientRect","boundRect","appendChild","additionalTopOffset","y","offsetHeight","maxWidth","position","top","zIndex","leftValue","left","Math","abs","offsetWidth","rightValue","x","leftAlignedWidth","right","rightAlignedWidth","addEventListener","findParentNodeInfo","_closestInline$nodes","_closestBlock$nodes","closestInline","getClosestInline","endKey","closestBlock","getClosestBlock","nodeToUse","nodes","find","n","getNodeWithClass","_blocksAtRange$","_inlinesAtRange$","_blockData$attributes","_inlineData$attribute","blocksAtRange","getBlocksAtRangeAsArray","inlinesAtRange","getInlinesAtRangeAsArray","blockData","toJSON","inlineData","attributes","_ref2","blockClass","_ref3","inlineClass","inlineHasClass","includes","blockHasClass","CSSPlugin","plugin","toolbar","isMark","icon","ariaLabel","type","onToggle","change","hasMark","activeMarks","entry","removeMark","newMark","Mark","create","addMark","onChange","getFocusedValue","valueToUse","focus","getTextsAtRangeAsArray","renderMark","props","mark","_ref4","jsonData","children"],"sources":["../../../src/plugins/css/index.jsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport List from '@mui/material/List';\nimport { Mark } from 'slate';\nimport ListItem from '@mui/material/ListItem';\nimport debug from 'debug';\nimport CssIcon from './icons';\n\nconst log = debug('@pie-lib:editable-html:plugins:characters');\n\nexport const removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-css-dialog');\n\n  log('[characters:removeDialogs]');\n  prevDialogs.forEach((s) => s.remove());\n};\n\nconst insertDialog = ({ editorDOM, value, callback, opts, textNode, parentNode }) => {\n  const newEl = document.createElement('div');\n\n  log('[characters:insertDialog]');\n\n  removeDialogs();\n\n  newEl.className = 'insert-css-dialog';\n\n  let popoverEl;\n\n  const closePopOver = () => {\n    if (popoverEl) {\n      popoverEl.remove();\n    }\n  };\n\n  let firstCallMade = false;\n\n  const listener = (e) => {\n    // this will be triggered right after setting it because\n    // this toolbar is added on the mousedown event\n    // so right after mouseup, the click will be triggered\n    if (firstCallMade) {\n      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));\n      const focusIsInEditor = editorDOM.contains(e.target);\n\n      if (!(focusIsInModals || focusIsInEditor)) {\n        handleClose();\n      }\n    } else {\n      firstCallMade = true;\n    }\n  };\n\n  const handleClose = () => {\n    callback(undefined, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const handleChange = (name) => {\n    callback(name, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const selectedText = textNode.text.slice(value.selection.anchorOffset, value.selection.focusOffset);\n  const parentNodeClass = parentNode?.data?.get('attributes')?.class;\n  const createHTML = (name) => {\n    let html = `<span class=\"${name}\">${selectedText}</span>`;\n\n    if (parentNode) {\n      let tag;\n\n      if (parentNode?.object === 'inline') {\n        tag = 'span';\n      }\n\n      if (parentNode?.object === 'block') {\n        tag = 'div';\n      }\n\n      html = `<${tag} class=\"${parentNodeClass}\">${parentNode.text.slice(\n        0,\n        value.selection.anchorOffset,\n      )}${html}${parentNode.text.slice(value.selection.focusOffset)}</${tag}>`;\n    }\n\n    return html;\n  };\n\n  const el = (\n    <div\n      style={{ background: 'white', height: 500, padding: 20, overflow: 'hidden', display: 'flex', flexFlow: 'column' }}\n    >\n      <h2>Please choose a css class</h2>\n      {parentNodeClass && <div>The current parent has this class {parentNodeClass}</div>}\n      <List component=\"nav\" style={{ overflow: 'scroll' }}>\n        {opts.names.map((name, i) => (\n          <ListItem key={`rule-${i}`} button onClick={() => handleChange(name)}>\n            <div style={{ marginRight: 20 }}>{name}</div>\n            <div\n              dangerouslySetInnerHTML={{\n                __html: createHTML(name),\n              }}\n            />\n          </ListItem>\n        ))}\n      </List>\n    </div>\n  );\n\n  const dialogRoot = createRoot(newEl);\n  dialogRoot.render(el);\n\n  // Use setTimeout to ensure the element is rendered before positioning\n  setTimeout(() => {\n    const cursorItem = document.querySelector(`[data-key=\"${value.anchorKey}\"]`);\n\n    if (cursorItem) {\n      const bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();\n      const boundRect = cursorItem.getBoundingClientRect();\n\n      editorDOM.parentElement.parentElement.parentElement.appendChild(newEl);\n\n      // when height of toolbar exceeds screen - can happen in scrollable contexts\n      let additionalTopOffset = 0;\n      if (boundRect.y < newEl.offsetHeight) {\n        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;\n      }\n\n      newEl.style.maxWidth = '500px';\n      newEl.style.position = 'absolute';\n      newEl.style.top = 0;\n      newEl.style.zIndex = 99999;\n\n      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10}px`;\n\n      const rightValue = `${boundRect.x}px`;\n\n      newEl.style.left = leftValue;\n\n      const leftAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = rightValue;\n\n      const rightAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = 'unset';\n\n      if (leftAlignedWidth >= rightAlignedWidth) {\n        newEl.style.left = leftValue;\n      } else {\n        newEl.style.right = rightValue;\n      }\n\n      document.body.addEventListener('click', listener);\n    }\n  }, 0);\n};\n\nconst findParentNodeInfo = (value, textNode) => {\n  const closestInline = value.document.getClosestInline(value.selection.endKey);\n  const closestBlock = value.document.getClosestBlock(value.selection.endKey);\n  let nodeToUse = null;\n\n  if (closestInline?.nodes?.find((n) => n.key === textNode.key)) {\n    nodeToUse = closestInline;\n  }\n\n  if (closestBlock?.nodes?.find((n) => n.key === textNode.key)) {\n    nodeToUse = closestBlock;\n  }\n\n  return nodeToUse;\n};\n\n/**\n * Find the node that has a class attribute and return it.\n * Keeping this in case the implementation of classes needs to be changed\n * @param value\n * @param opts\n * @returns {*}\n */\nconst getNodeWithClass = (value, opts) => {\n  const blocksAtRange = value.document.getBlocksAtRangeAsArray(value.selection);\n  const inlinesAtRange = value.document.getInlinesAtRangeAsArray(value.selection);\n  const blockData = blocksAtRange[0]?.data.toJSON() || {};\n  const inlineData = inlinesAtRange[0]?.data.toJSON() || {};\n\n  if (!blockData.attributes?.class && !inlineData.attributes?.class) {\n    return null;\n  }\n\n  const { class: blockClass } = blockData.attributes || {};\n  const { class: inlineClass } = inlineData.attributes || {};\n  const inlineHasClass = opts.names.find((name) => inlineClass.includes(name));\n\n  if (inlineHasClass) {\n    return inlinesAtRange[0];\n  }\n\n  const blockHasClass = opts.names.find((name) => blockClass.includes(name));\n\n  if (blockHasClass) {\n    return blocksAtRange[0];\n  }\n\n  return null;\n};\n\n/**\n * Plugin in order to be able to add a css clas that is provided through the model\n * on a text element. Works like a mark (bold, italic etc.).\n * @param opts\n * @constructor\n */\nexport default function CSSPlugin(opts) {\n  const plugin = {\n    name: 'extraCSSRules',\n    toolbar: {\n      isMark: true,\n      icon: <CssIcon />,\n      ariaLabel: 'CSS editor',\n      type: 'css',\n      onToggle: (change) => {\n        const type = 'css';\n        const hasMark = change.value.activeMarks.find((entry) => {\n          return entry.type === type;\n        });\n\n        if (hasMark) {\n          change.removeMark(hasMark);\n        } else {\n          const newMark = Mark.create(type);\n\n          change.addMark(newMark);\n        }\n\n        return change;\n      },\n      onClick: (value, onChange, getFocusedValue) => {\n        const type = 'css';\n        const hasMark = value.activeMarks.find((entry) => {\n          return entry.type === type;\n        });\n\n        let change = value.change();\n\n        if (hasMark) {\n          change.removeMark(hasMark);\n          onChange(change);\n          return;\n        }\n\n        // keeping this if implementation needs to be changed to regular blocks instead of marks\n        // let nodeWithClass = getNodeWithClass(value, opts);\n        //\n        // if (nodeWithClass) {\n        //   const nodeAttributes = nodeWithClass.data.get('attributes');\n        //\n        //   opts.names.forEach((name) => {\n        //     if (nodeAttributes.class.includes(name)) {\n        //       nodeAttributes.class = nodeAttributes.class.replace(name, '');\n        //     }\n        //   });\n        //\n        //   // keeping only one space between classes\n        //   nodeAttributes.class = nodeAttributes.class.replace(/ +/g, ' ');\n        //\n        //   nodeWithClass.data.set('attributes', nodeAttributes);\n        //\n        //   let change = value.change();\n        //   change.replaceNodeByKey(nodeWithClass.key, nodeWithClass);\n        //\n        //   onChange(change);\n        //   return;\n        // }\n\n        const editorDOM = document.querySelector(`[data-key=\"${value.document.key}\"]`);\n        let valueToUse = value;\n\n        const callback = (className, focus) => {\n          if (getFocusedValue) {\n            valueToUse = getFocusedValue() || valueToUse;\n          }\n\n          if (className) {\n            let change = valueToUse.change();\n\n            const newMark = Mark.create({\n              object: 'mark',\n              type: 'css',\n              data: {\n                attributes: {\n                  class: className,\n                },\n              },\n            });\n\n            change.addMark(newMark);\n            // keeping this if implementation needs to be changed to regular blocks instead of marks\n            // change = change.wrapInline({ type: 'span', data: { attributes: { class: className } } });\n            //\n            // // change = change.splitBlockAtRange(adaptedRange);\n            // //\n            // // const newBlock = change.value.document.getFurthestBlock(change.value.selection.endKey);\n            // //\n            // // change = change.setNodeByKey(newBlock.key, { data: { attributes: { class: className } } });\n            //\n            // valueToUse = change.value;\n            // log('[characters:insert]: ', value);\n            onChange(change);\n          }\n\n          log('[characters:click]');\n\n          if (focus) {\n            setTimeout(() => {\n              if (editorDOM) {\n                editorDOM.focus();\n              }\n            }, 0);\n          }\n        };\n        const textNode = value.document.getTextsAtRangeAsArray(value.selection)[0];\n\n        if (textNode) {\n          const parentNode = findParentNodeInfo(value, textNode, opts);\n\n          insertDialog({ editorDOM, value: valueToUse, callback, opts, textNode, parentNode });\n        }\n      },\n    },\n    renderMark(props) {\n      if (props.mark.type === 'css') {\n        const { data } = props.mark || {};\n        const jsonData = data?.toJSON() || {};\n\n        return <span {...jsonData.attributes}>{props.children}</span>;\n      }\n    },\n  };\n\n  return plugin;\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/plugins/image/image-toolbar.js

@@ -14,7 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _debug = _interopRequireDefault(require("debug"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _client = require("react-dom/client");
 var _styles = require("@mui/material/styles");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _toolbarButtons = require("../toolbar/toolbar-buttons");
@@ -67,6 +67,7 @@ var ImageToolbar = exports.ImageToolbar = /*#__PURE__*/function (_React$Componen
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, ImageToolbar, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "dialogRoot", null);
     (0, _defineProperty2["default"])(_this, "onAltTextDone", function (newAlt) {
       log('[onAltTextDone]: alt:', newAlt);
       _this.props.onChange({
@@ -86,7 +87,8 @@ var ImageToolbar = exports.ImageToolbar = /*#__PURE__*/function (_React$Componen
         alt: alt,
         onDone: _this.onAltTextDone
       });
-      _reactDom["default"].render(el, popoverEl);
+      _this.dialogRoot = (0, _client.createRoot)(popoverEl);
+      _this.dialogRoot.render(el);
       document.body.appendChild(popoverEl);
     });
     return _this;

package/lib/plugins/image/image-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-toolbar.js","names":["_propTypes","_interopRequireDefault","require","_react","_debug","_reactDom","_styles","_classnames","_toolbarButtons","_altDialog","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","log","debug","AlignmentButton","_ref","alignment","active","onClick","createElement","MarkButton","onToggle","label","propTypes","PropTypes","string","isRequired","bool","func","StyledHolder","styled","_ref2","theme","paddingLeft","spacing","display","alignItems","StyledAltText","opacity","borderLeft","marginLeft","ImageToolbar","exports","_React$Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","newAlt","props","onChange","alt","popoverEl","document","el","onDone","onAltTextDone","ReactDOM","render","body","appendChild","_inherits2","_createClass2","key","value","_this2","_this$props","imageLoaded","disableImageAlignmentButtons","Fragment","onAlignmentClick","className","classNames","disabled","altButton","onMouseDown","event","renderDialog","React","Component","_default"],"sources":["../../../src/plugins/image/image-toolbar.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport ReactDOM from 'react-dom';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\n\nimport { MarkButton } from '../toolbar/toolbar-buttons';\nimport AltDialog from './alt-dialog';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');\n\nconst AlignmentButton = ({ alignment, active, onClick }) => {\n  return (\n    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>\n      {alignment}\n    </MarkButton>\n  );\n};\n\nAlignmentButton.propTypes = {\n  alignment: PropTypes.string.isRequired,\n  active: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nconst StyledHolder = styled('div')(({ theme }) => ({\n  paddingLeft: theme.spacing(1),\n  display: 'flex',\n  alignItems: 'center',\n}));\n\nconst StyledAltText = styled('span')(() => ({\n  '&.disabled': {\n    opacity: 0.5,\n  },\n  '&.altButton': {\n    borderLeft: '1px solid grey',\n    paddingLeft: 8,\n    marginLeft: 4,\n  },\n}));\n\nexport class ImageToolbar extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func.isRequired,\n    alignment: PropTypes.string,\n    alt: PropTypes.string,\n    imageLoaded: PropTypes.bool,\n    disableImageAlignmentButtons: PropTypes.bool,\n  };\n\n  onAltTextDone = (newAlt) => {\n    log('[onAltTextDone]: alt:', newAlt);\n\n    this.props.onChange({ alt: newAlt }, true);\n  };\n\n  onAlignmentClick = (alignment) => {\n    log('[onAlignmentClick]: alignment:', alignment);\n    this.props.onChange({ alignment });\n  };\n\n  renderDialog = () => {\n    const { alt } = this.props;\n    const popoverEl = document.createElement('div');\n\n    const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;\n\n    ReactDOM.render(el, popoverEl);\n\n    document.body.appendChild(popoverEl);\n  };\n\n  render() {\n    const { alignment, imageLoaded, disableImageAlignmentButtons } = this.props;\n    return (\n      <StyledHolder>\n        {!disableImageAlignmentButtons && (\n          <>\n            <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'center'} active={alignment === 'center'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />\n          </>\n        )}\n        <StyledAltText\n          className={classNames({\n            disabled: !imageLoaded,\n            altButton: !disableImageAlignmentButtons,\n          })}\n          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}\n        >\n          Alt text\n        </StyledAltText>\n      </StyledHolder>\n    );\n  }\n}\n\nexport default ImageToolbar;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"image-toolbar.js","names":["_propTypes","_interopRequireDefault","require","_react","_debug","_client","_styles","_classnames","_toolbarButtons","_altDialog","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","constructor","apply","Boolean","prototype","valueOf","call","log","debug","AlignmentButton","_ref","alignment","active","onClick","createElement","MarkButton","onToggle","label","propTypes","PropTypes","string","isRequired","bool","func","StyledHolder","styled","_ref2","theme","paddingLeft","spacing","display","alignItems","StyledAltText","opacity","borderLeft","marginLeft","ImageToolbar","exports","_React$Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","newAlt","props","onChange","alt","popoverEl","document","el","onDone","onAltTextDone","dialogRoot","createRoot","render","body","appendChild","_inherits2","_createClass2","key","value","_this2","_this$props","imageLoaded","disableImageAlignmentButtons","Fragment","onAlignmentClick","className","classNames","disabled","altButton","onMouseDown","event","renderDialog","React","Component","_default"],"sources":["../../../src/plugins/image/image-toolbar.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport debug from 'debug';\nimport { createRoot } from 'react-dom/client';\nimport { styled } from '@mui/material/styles';\nimport classNames from 'classnames';\n\nimport { MarkButton } from '../toolbar/toolbar-buttons';\nimport AltDialog from './alt-dialog';\n\nconst log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');\n\nconst AlignmentButton = ({ alignment, active, onClick }) => {\n  return (\n    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>\n      {alignment}\n    </MarkButton>\n  );\n};\n\nAlignmentButton.propTypes = {\n  alignment: PropTypes.string.isRequired,\n  active: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n};\n\nconst StyledHolder = styled('div')(({ theme }) => ({\n  paddingLeft: theme.spacing(1),\n  display: 'flex',\n  alignItems: 'center',\n}));\n\nconst StyledAltText = styled('span')(() => ({\n  '&.disabled': {\n    opacity: 0.5,\n  },\n  '&.altButton': {\n    borderLeft: '1px solid grey',\n    paddingLeft: 8,\n    marginLeft: 4,\n  },\n}));\n\nexport class ImageToolbar extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func.isRequired,\n    alignment: PropTypes.string,\n    alt: PropTypes.string,\n    imageLoaded: PropTypes.bool,\n    disableImageAlignmentButtons: PropTypes.bool,\n  };\n\n  dialogRoot = null;\n\n  onAltTextDone = (newAlt) => {\n    log('[onAltTextDone]: alt:', newAlt);\n\n    this.props.onChange({ alt: newAlt }, true);\n  };\n\n  onAlignmentClick = (alignment) => {\n    log('[onAlignmentClick]: alignment:', alignment);\n    this.props.onChange({ alignment });\n  };\n\n  renderDialog = () => {\n    const { alt } = this.props;\n    const popoverEl = document.createElement('div');\n\n    const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;\n\n    this.dialogRoot = createRoot(popoverEl);\n    this.dialogRoot.render(el);\n\n    document.body.appendChild(popoverEl);\n  };\n\n  render() {\n    const { alignment, imageLoaded, disableImageAlignmentButtons } = this.props;\n    return (\n      <StyledHolder>\n        {!disableImageAlignmentButtons && (\n          <>\n            <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'center'} active={alignment === 'center'} onClick={this.onAlignmentClick} />\n            <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />\n          </>\n        )}\n        <StyledAltText\n          className={classNames({\n            disabled: !imageLoaded,\n            altButton: !disableImageAlignmentButtons,\n          })}\n          onMouseDown={(event) => imageLoaded && this.renderDialog(event)}\n        >\n          Alt text\n        </StyledAltText>\n      </StyledHolder>\n    );\n  }\n}\n\nexport default ImageToolbar;\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAN,sBAAA,CAAAC,OAAA;AAEA,IAAAM,eAAA,GAAAN,OAAA;AACA,IAAAO,UAAA,GAAAR,sBAAA,CAAAC,OAAA;AAAqC,SAAAQ,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,EAAAK,yBAAA,KAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA,SAAAG,0BAAA,cAAAL,CAAA,IAAAU,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,IAAA,CAAAP,OAAA,CAAAC,SAAA,CAAAG,OAAA,iCAAAV,CAAA,aAAAK,yBAAA,YAAAA,0BAAA,aAAAL,CAAA;AAErC,IAAMc,GAAG,GAAG,IAAAC,iBAAK,EAAC,oDAAoD,CAAC;AAEvE,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,IAAA,EAAuC;EAAA,IAAjCC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAEC,OAAO,GAAAH,IAAA,CAAPG,OAAO;EACnD,oBACE5B,MAAA,YAAA6B,aAAA,CAACxB,eAAA,CAAAyB,UAAU;IAACH,MAAM,EAAEA,MAAO;IAACI,QAAQ,EAAE,SAAVA,QAAQA,CAAA;MAAA,OAAQH,OAAO,CAACF,SAAS,CAAC;IAAA,CAAC;IAACM,KAAK,EAAEN;EAAU,GAC9EA,SACS,CAAC;AAEjB,CAAC;AAEDF,eAAe,CAACS,SAAS,GAAG;EAC1BP,SAAS,EAAEQ,qBAAS,CAACC,MAAM,CAACC,UAAU;EACtCT,MAAM,EAAEO,qBAAS,CAACG,IAAI,CAACD,UAAU;EACjCR,OAAO,EAAEM,qBAAS,CAACI,IAAI,CAACF;AAC1B,CAAC;AAED,IAAMG,YAAY,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,UAAAC,KAAA;EAAA,IAAGC,KAAK,GAAAD,KAAA,CAALC,KAAK;EAAA,OAAQ;IACjDC,WAAW,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC,CAAC;IAC7BC,OAAO,EAAE,MAAM;IACfC,UAAU,EAAE;EACd,CAAC;AAAA,CAAC,CAAC;AAEH,IAAMC,aAAa,GAAG,IAAAP,cAAM,EAAC,MAAM,CAAC,CAAC;EAAA,OAAO;IAC1C,YAAY,EAAE;MACZQ,OAAO,EAAE;IACX,CAAC;IACD,aAAa,EAAE;MACbC,UAAU,EAAE,gBAAgB;MAC5BN,WAAW,EAAE,CAAC;MACdO,UAAU,EAAE;IACd;EACF,CAAC;AAAA,CAAC,CAAC;AAAC,IAESC,YAAY,GAAAC,OAAA,CAAAD,YAAA,0BAAAE,gBAAA;EAAA,SAAAF,aAAA;IAAA,IAAAG,KAAA;IAAA,IAAAC,gBAAA,mBAAAJ,YAAA;IAAA,SAAAK,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAA/C,UAAA,OAAA4C,YAAA,KAAAW,MAAA,CAAAH,IAAA;IAAA,IAAAI,gBAAA,aAAAT,KAAA,gBASV,IAAI;IAAA,IAAAS,gBAAA,aAAAT,KAAA,mBAED,UAACU,MAAM,EAAK;MAC1B1C,GAAG,CAAC,uBAAuB,EAAE0C,MAAM,CAAC;MAEpCV,KAAA,CAAKW,KAAK,CAACC,QAAQ,CAAC;QAAEC,GAAG,EAAEH;MAAO,CAAC,EAAE,IAAI,CAAC;IAC5C,CAAC;IAAA,IAAAD,gBAAA,aAAAT,KAAA,sBAEkB,UAAC5B,SAAS,EAAK;MAChCJ,GAAG,CAAC,gCAAgC,EAAEI,SAAS,CAAC;MAChD4B,KAAA,CAAKW,KAAK,CAACC,QAAQ,CAAC;QAAExC,SAAS,EAATA;MAAU,CAAC,CAAC;IACpC,CAAC;IAAA,IAAAqC,gBAAA,aAAAT,KAAA,kBAEc,YAAM;MACnB,IAAQa,GAAG,GAAKb,KAAA,CAAKW,KAAK,CAAlBE,GAAG;MACX,IAAMC,SAAS,GAAGC,QAAQ,CAACxC,aAAa,CAAC,KAAK,CAAC;MAE/C,IAAMyC,EAAE,gBAAGtE,MAAA,YAAA6B,aAAA,CAACvB,UAAA,WAAS;QAAC6D,GAAG,EAAEA,GAAI;QAACI,MAAM,EAAEjB,KAAA,CAAKkB;MAAc,CAAE,CAAC;MAE9DlB,KAAA,CAAKmB,UAAU,GAAG,IAAAC,kBAAU,EAACN,SAAS,CAAC;MACvCd,KAAA,CAAKmB,UAAU,CAACE,MAAM,CAACL,EAAE,CAAC;MAE1BD,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACT,SAAS,CAAC;IACtC,CAAC;IAAA,OAAAd,KAAA;EAAA;EAAA,IAAAwB,UAAA,aAAA3B,YAAA,EAAAE,gBAAA;EAAA,WAAA0B,aAAA,aAAA5B,YAAA;IAAA6B,GAAA;IAAAC,KAAA,EAED,SAAAN,MAAMA,CAAA,EAAG;MAAA,IAAAO,MAAA;MACP,IAAAC,WAAA,GAAiE,IAAI,CAAClB,KAAK;QAAnEvC,SAAS,GAAAyD,WAAA,CAATzD,SAAS;QAAE0D,WAAW,GAAAD,WAAA,CAAXC,WAAW;QAAEC,4BAA4B,GAAAF,WAAA,CAA5BE,4BAA4B;MAC5D,oBACErF,MAAA,YAAA6B,aAAA,CAACU,YAAY,QACV,CAAC8C,4BAA4B,iBAC5BrF,MAAA,YAAA6B,aAAA,CAAA7B,MAAA,YAAAsF,QAAA,qBACEtF,MAAA,YAAA6B,aAAA,CAACL,eAAe;QAACE,SAAS,EAAE,MAAO;QAACC,MAAM,EAAED,SAAS,KAAK,MAAO;QAACE,OAAO,EAAE,IAAI,CAAC2D;MAAiB,CAAE,CAAC,eACpGvF,MAAA,YAAA6B,aAAA,CAACL,eAAe;QAACE,SAAS,EAAE,QAAS;QAACC,MAAM,EAAED,SAAS,KAAK,QAAS;QAACE,OAAO,EAAE,IAAI,CAAC2D;MAAiB,CAAE,CAAC,eACxGvF,MAAA,YAAA6B,aAAA,CAACL,eAAe;QAACE,SAAS,EAAE,OAAQ;QAACC,MAAM,EAAED,SAAS,KAAK,OAAQ;QAACE,OAAO,EAAE,IAAI,CAAC2D;MAAiB,CAAE,CACrG,CACH,eACDvF,MAAA,YAAA6B,aAAA,CAACkB,aAAa;QACZyC,SAAS,EAAE,IAAAC,sBAAU,EAAC;UACpBC,QAAQ,EAAE,CAACN,WAAW;UACtBO,SAAS,EAAE,CAACN;QACd,CAAC,CAAE;QACHO,WAAW,EAAE,SAAbA,WAAWA,CAAGC,KAAK;UAAA,OAAKT,WAAW,IAAIF,MAAI,CAACY,YAAY,CAACD,KAAK,CAAC;QAAA;MAAC,GACjE,UAEc,CACH,CAAC;IAEnB;EAAC;AAAA,EAxD+BE,iBAAK,CAACC,SAAS;AAAA,IAAAjC,gBAAA,aAApCZ,YAAY,eACJ;EACjBe,QAAQ,EAAEhC,qBAAS,CAACI,IAAI,CAACF,UAAU;EACnCV,SAAS,EAAEQ,qBAAS,CAACC,MAAM;EAC3BgC,GAAG,EAAEjC,qBAAS,CAACC,MAAM;EACrBiD,WAAW,EAAElD,qBAAS,CAACG,IAAI;EAC3BgD,4BAA4B,EAAEnD,qBAAS,CAACG;AAC1C,CAAC;AAAA,IAAA4D,QAAA,GAAA7C,OAAA,cAoDYD,YAAY","ignoreList":[]}

package/lib/plugins/media/index.js

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _client = require("react-dom/client");
 var _slate = require("slate");
 var _Theaters = _interopRequireDefault(require("@mui/icons-material/Theaters"));
 var _VolumeUp = _interopRequireDefault(require("@mui/icons-material/VolumeUp"));
@@ -51,7 +51,8 @@ var insertDialog = exports.insertDialog = function insertDialog(props) {
     open: true,
     handleClose: handleClose
   }));
-  _reactDom["default"].render(el, newEl);
+  var dialogRoot = (0, _client.createRoot)(newEl);
+  dialogRoot.render(el);
   document.body.appendChild(newEl);
 };
 var types = ['audio', 'video'];

package/lib/plugins/media/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_reactDom","_slate","_Theaters","_VolumeUp","_debug","_mediaDialog","_mediaToolbar","_mediaWrapper","_excluded","_excluded2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","log","debug","removeDialogs","prevDialogs","document","querySelectorAll","s","remove","insertDialog","exports","props","newEl","createElement","type","callback","opts","rest","_objectWithoutProperties2","initialBodyOverflow","body","style","overflow","className","handleClose","val","data","el","_extends2","uploadSoundSupport","disablePortal","open","ReactDOM","render","appendChild","types","MediaPlugin","toolbar","icon","ariaLabel","onClick","value","onChange","inline","Inline","create","isVoid","editing","ends","undefined","height","title","starts","src","url","width","change","insertInline","nodeIsThere","findDescendant","d","key","c","removeNodeByKey","focus","setNodeByKey","supports","node","object","name","deleteNode","preventDefault","renderNode","jsonData","toJSON","tag","handleEdit","createChange","edit","get","handleDelete","concat","editor","controls","controlsList","hideEdit","onRemove","frameBorder","allow","allowFullScreen","onEdit","normalizeNode","textNodeMap","updateNodesArray","index","isMedia","indexOf","text","withoutNormalization","n","insertTextByKey","serialization","deserialize","dataset","typeIndex","Element","tagName","toLowerCase","_el$firstChild","firstChild","getAttribute","_ref","parseInt","out","serialize","divProps"],"sources":["../../../src/plugins/media/index.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Inline } from 'slate';\nimport TheatersIcon from '@mui/icons-material/Theaters';\nimport VolumeUpIcon from '@mui/icons-material/VolumeUp';\nimport debug from 'debug';\n\nimport MediaDialog from './media-dialog';\nimport MediaToolbar from './media-toolbar';\nimport MediaWrapper from './media-wrapper';\n\nconst log = debug('@pie-lib:editable-html:plugins:image');\n\nconst removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-media-dialog');\n\n  prevDialogs.forEach((s) => s.remove());\n};\n\nexport const insertDialog = (props) => {\n  const newEl = document.createElement('div');\n  const { type, callback, opts, ...rest } = props;\n  const initialBodyOverflow = document.body.style.overflow;\n\n  removeDialogs();\n\n  newEl.className = 'insert-media-dialog';\n  document.body.style.overflow = 'hidden';\n\n  const handleClose = (val, data) => {\n    callback(val, data);\n    newEl.remove();\n    document.body.style.overflow = initialBodyOverflow;\n  };\n\n  const el = (\n    <MediaDialog\n      {...rest}\n      uploadSoundSupport={opts.uploadSoundSupport}\n      type={type}\n      disablePortal={true}\n      open={true}\n      handleClose={handleClose}\n    />\n  );\n\n  ReactDOM.render(el, newEl);\n\n  document.body.appendChild(newEl);\n};\n\nconst types = ['audio', 'video'];\n\nexport default function MediaPlugin(type, opts) {\n  const toolbar = {\n    icon: type === 'audio' ? <VolumeUpIcon /> : <TheatersIcon />,\n    ariaLabel: type === 'audio' ? 'Insert audio' : 'Insert video',\n    onClick: (value, onChange) => {\n      log('[toolbar] onClick');\n      const inline = Inline.create({\n        type: type,\n        isVoid: true,\n        data: {\n          editing: false,\n          ends: undefined,\n          height: undefined,\n          title: undefined,\n          starts: undefined,\n          src: undefined,\n          url: undefined,\n          width: undefined,\n        },\n      });\n\n      const change = value.change().insertInline(inline);\n      onChange(change);\n      insertDialog({\n        type,\n        opts,\n        callback: (val, data) => {\n          const nodeIsThere = change.value.document.findDescendant((d) => d.key === inline.key);\n\n          if (nodeIsThere) {\n            if (!val) {\n              const c = change.removeNodeByKey(inline.key);\n              onChange(c, () => opts.focus());\n            } else {\n              const c = change.setNodeByKey(inline.key, { data });\n              onChange(c, () => opts.focus('beginning', nodeIsThere));\n            }\n          } else {\n            opts.focus();\n          }\n        },\n      });\n    },\n    supports: (node) => node.object === 'inline' && node.type === type,\n  };\n\n  return {\n    name: type,\n    toolbar,\n    deleteNode: (e, node, value, onChange) => {\n      e.preventDefault();\n      const change = value.change().removeNodeByKey(node.key);\n\n      onChange(change);\n    },\n    renderNode(props) {\n      if (props.node.type === type) {\n        const { node, key } = props;\n        const { data } = node;\n        const jsonData = data.toJSON();\n        const { src, height, width, editing, tag, ...rest } = jsonData;\n        const handleEdit = () => {\n          const change = opts.createChange();\n          const c = change.setNodeByKey(key, {\n            data: {\n              ...jsonData,\n              editing: true,\n            },\n          });\n\n          opts.onChange(c, () => {\n            insertDialog({\n              ...jsonData,\n              edit: true,\n              type,\n              opts,\n              callback: (val, data) => {\n                const { key } = node;\n\n                const nodeIsThere = change.value.document.findDescendant(\n                  (d) => d.type === type && d.data.get('editing'),\n                );\n\n                if (nodeIsThere && val) {\n                  const c = change.setNodeByKey(key, { data, editing: false });\n                  opts.onChange(c, () => opts.focus('beginning', nodeIsThere));\n                } else {\n                  opts.focus();\n                }\n              },\n            });\n          });\n        };\n        const handleDelete = () => {\n          const change = opts.createChange();\n          const c = change.removeNodeByKey(node.key);\n\n          opts.onChange(c);\n        };\n        const style = {};\n\n        if (width) {\n          style.width = `${width}px`;\n        }\n\n        if (height) {\n          style.height = `${height}px`;\n        }\n\n        if (tag === 'audio') {\n          return (\n            <MediaWrapper editor data-type={type} width={style.width} {...rest}>\n              <audio controls=\"controls\" controlsList=\"nodownload\">\n                <source type=\"audio/mp3\" src={src} />\n              </audio>\n              <MediaToolbar hideEdit onRemove={handleDelete} />\n            </MediaWrapper>\n          );\n        }\n\n        return (\n          <MediaWrapper editor data-type={type} width={style.width} {...rest}>\n            <iframe\n              frameBorder=\"0\"\n              allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n              allowFullScreen\n              src={src}\n              editing={editing ? 1 : 0}\n              {...rest}\n              {...style}\n            />\n            <MediaToolbar onEdit={handleEdit} onRemove={handleDelete} />\n          </MediaWrapper>\n        );\n      }\n    },\n    normalizeNode: (node) => {\n      const textNodeMap = {};\n      const updateNodesArray = [];\n      let index = 0;\n\n      if (node.object !== 'document') return;\n\n      node.findDescendant((d) => {\n        if (d.object === 'text') {\n          textNodeMap[index] = d;\n        }\n\n        const isMedia = types.indexOf(d.type) >= 0;\n\n        if (isMedia) {\n          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {\n            updateNodesArray.push(textNodeMap[index - 1]);\n          }\n        }\n\n        index++;\n      });\n\n      if (!updateNodesArray.length) return;\n\n      return (change) => {\n        change.withoutNormalization(() => {\n          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));\n        });\n      };\n    },\n  };\n}\n\nexport const serialization = {\n  deserialize(el /*, next*/) {\n    let type = el.dataset && el.dataset.type;\n    let tag = 'iframe';\n    let src;\n    const typeIndex = types.indexOf(type);\n\n    if (typeIndex < 0) {\n      if (el instanceof Element && el.tagName.toLowerCase() === 'audio') {\n        type = 'audio';\n        tag = 'audio';\n        src = el.firstChild?.getAttribute('src');\n      } else {\n        return;\n      }\n    }\n\n    const { ends, starts, title, editing, url } = el.dataset || {};\n\n    log('deserialize: ', name);\n    const width = parseInt(el.getAttribute('width'), 10) || null;\n    const height = parseInt(el.getAttribute('height'), 10) || null;\n\n    const out = {\n      object: 'inline',\n      type: type,\n      isVoid: true,\n      data: {\n        tag,\n        src: src || el.getAttribute('src'),\n        editing,\n        ends,\n        height,\n        starts,\n        title,\n        width,\n        url,\n      },\n    };\n    log('return object: ', out);\n    return out;\n  },\n  serialize(object /*, children*/) {\n    const typeIndex = types.indexOf(object.type);\n\n    if (typeIndex < 0) return;\n\n    const type = types[typeIndex];\n\n    const { data } = object;\n    const editing = data.get('editing');\n    const tag = data.get('tag');\n    const ends = data.get('ends');\n    const src = data.get('src');\n    const starts = data.get('starts');\n    const title = data.get('title');\n    const width = data.get('width');\n    const height = data.get('height');\n    const url = data.get('url');\n    const style = {};\n\n    if (width) {\n      style.width = `${width}px`;\n    }\n\n    if (height) {\n      style.height = `${height}px`;\n    }\n\n    const divProps = {\n      'data-editing': editing,\n      'data-ends': ends,\n      'data-starts': starts,\n      'data-title': title,\n      'data-url': url,\n    };\n    const props = {\n      ...style,\n      src,\n    };\n\n    if (tag === 'audio') {\n      return (\n        <audio controls=\"controls\" controlsList=\"nodownload\">\n          <source type=\"audio/mp3\" src={src} />\n        </audio>\n      );\n    }\n\n    return (\n      <iframe\n        data-type={type}\n        src={src}\n        {...divProps}\n        frameBorder=\"0\"\n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n        allowFullScreen\n        {...props}\n      />\n    );\n  },\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_slate","_Theaters","_VolumeUp","_debug","_mediaDialog","_mediaToolbar","_mediaWrapper","_excluded","_excluded2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","log","debug","removeDialogs","prevDialogs","document","querySelectorAll","s","remove","insertDialog","exports","props","newEl","createElement","type","callback","opts","rest","_objectWithoutProperties2","initialBodyOverflow","body","style","overflow","className","handleClose","val","data","el","_extends2","uploadSoundSupport","disablePortal","open","dialogRoot","createRoot","render","appendChild","types","MediaPlugin","toolbar","icon","ariaLabel","onClick","value","onChange","inline","Inline","create","isVoid","editing","ends","undefined","height","title","starts","src","url","width","change","insertInline","nodeIsThere","findDescendant","d","key","c","removeNodeByKey","focus","setNodeByKey","supports","node","object","name","deleteNode","preventDefault","renderNode","jsonData","toJSON","tag","handleEdit","createChange","edit","get","handleDelete","concat","editor","controls","controlsList","hideEdit","onRemove","frameBorder","allow","allowFullScreen","onEdit","normalizeNode","textNodeMap","updateNodesArray","index","isMedia","indexOf","text","withoutNormalization","n","insertTextByKey","serialization","deserialize","dataset","typeIndex","Element","tagName","toLowerCase","_el$firstChild","firstChild","getAttribute","_ref","parseInt","out","serialize","divProps"],"sources":["../../../src/plugins/media/index.jsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Inline } from 'slate';\nimport TheatersIcon from '@mui/icons-material/Theaters';\nimport VolumeUpIcon from '@mui/icons-material/VolumeUp';\nimport debug from 'debug';\n\nimport MediaDialog from './media-dialog';\nimport MediaToolbar from './media-toolbar';\nimport MediaWrapper from './media-wrapper';\n\nconst log = debug('@pie-lib:editable-html:plugins:image');\n\nconst removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-media-dialog');\n\n  prevDialogs.forEach((s) => s.remove());\n};\n\nexport const insertDialog = (props) => {\n  const newEl = document.createElement('div');\n  const { type, callback, opts, ...rest } = props;\n  const initialBodyOverflow = document.body.style.overflow;\n\n  removeDialogs();\n\n  newEl.className = 'insert-media-dialog';\n  document.body.style.overflow = 'hidden';\n\n  const handleClose = (val, data) => {\n    callback(val, data);\n    newEl.remove();\n    document.body.style.overflow = initialBodyOverflow;\n  };\n\n  const el = (\n    <MediaDialog\n      {...rest}\n      uploadSoundSupport={opts.uploadSoundSupport}\n      type={type}\n      disablePortal={true}\n      open={true}\n      handleClose={handleClose}\n    />\n  );\n\n  const dialogRoot = createRoot(newEl);\n  dialogRoot.render(el);\n\n  document.body.appendChild(newEl);\n};\n\nconst types = ['audio', 'video'];\n\nexport default function MediaPlugin(type, opts) {\n  const toolbar = {\n    icon: type === 'audio' ? <VolumeUpIcon /> : <TheatersIcon />,\n    ariaLabel: type === 'audio' ? 'Insert audio' : 'Insert video',\n    onClick: (value, onChange) => {\n      log('[toolbar] onClick');\n      const inline = Inline.create({\n        type: type,\n        isVoid: true,\n        data: {\n          editing: false,\n          ends: undefined,\n          height: undefined,\n          title: undefined,\n          starts: undefined,\n          src: undefined,\n          url: undefined,\n          width: undefined,\n        },\n      });\n\n      const change = value.change().insertInline(inline);\n      onChange(change);\n      insertDialog({\n        type,\n        opts,\n        callback: (val, data) => {\n          const nodeIsThere = change.value.document.findDescendant((d) => d.key === inline.key);\n\n          if (nodeIsThere) {\n            if (!val) {\n              const c = change.removeNodeByKey(inline.key);\n              onChange(c, () => opts.focus());\n            } else {\n              const c = change.setNodeByKey(inline.key, { data });\n              onChange(c, () => opts.focus('beginning', nodeIsThere));\n            }\n          } else {\n            opts.focus();\n          }\n        },\n      });\n    },\n    supports: (node) => node.object === 'inline' && node.type === type,\n  };\n\n  return {\n    name: type,\n    toolbar,\n    deleteNode: (e, node, value, onChange) => {\n      e.preventDefault();\n      const change = value.change().removeNodeByKey(node.key);\n\n      onChange(change);\n    },\n    renderNode(props) {\n      if (props.node.type === type) {\n        const { node, key } = props;\n        const { data } = node;\n        const jsonData = data.toJSON();\n        const { src, height, width, editing, tag, ...rest } = jsonData;\n        const handleEdit = () => {\n          const change = opts.createChange();\n          const c = change.setNodeByKey(key, {\n            data: {\n              ...jsonData,\n              editing: true,\n            },\n          });\n\n          opts.onChange(c, () => {\n            insertDialog({\n              ...jsonData,\n              edit: true,\n              type,\n              opts,\n              callback: (val, data) => {\n                const { key } = node;\n\n                const nodeIsThere = change.value.document.findDescendant(\n                  (d) => d.type === type && d.data.get('editing'),\n                );\n\n                if (nodeIsThere && val) {\n                  const c = change.setNodeByKey(key, { data, editing: false });\n                  opts.onChange(c, () => opts.focus('beginning', nodeIsThere));\n                } else {\n                  opts.focus();\n                }\n              },\n            });\n          });\n        };\n        const handleDelete = () => {\n          const change = opts.createChange();\n          const c = change.removeNodeByKey(node.key);\n\n          opts.onChange(c);\n        };\n        const style = {};\n\n        if (width) {\n          style.width = `${width}px`;\n        }\n\n        if (height) {\n          style.height = `${height}px`;\n        }\n\n        if (tag === 'audio') {\n          return (\n            <MediaWrapper editor data-type={type} width={style.width} {...rest}>\n              <audio controls=\"controls\" controlsList=\"nodownload\">\n                <source type=\"audio/mp3\" src={src} />\n              </audio>\n              <MediaToolbar hideEdit onRemove={handleDelete} />\n            </MediaWrapper>\n          );\n        }\n\n        return (\n          <MediaWrapper editor data-type={type} width={style.width} {...rest}>\n            <iframe\n              frameBorder=\"0\"\n              allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n              allowFullScreen\n              src={src}\n              editing={editing ? 1 : 0}\n              {...rest}\n              {...style}\n            />\n            <MediaToolbar onEdit={handleEdit} onRemove={handleDelete} />\n          </MediaWrapper>\n        );\n      }\n    },\n    normalizeNode: (node) => {\n      const textNodeMap = {};\n      const updateNodesArray = [];\n      let index = 0;\n\n      if (node.object !== 'document') return;\n\n      node.findDescendant((d) => {\n        if (d.object === 'text') {\n          textNodeMap[index] = d;\n        }\n\n        const isMedia = types.indexOf(d.type) >= 0;\n\n        if (isMedia) {\n          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {\n            updateNodesArray.push(textNodeMap[index - 1]);\n          }\n        }\n\n        index++;\n      });\n\n      if (!updateNodesArray.length) return;\n\n      return (change) => {\n        change.withoutNormalization(() => {\n          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));\n        });\n      };\n    },\n  };\n}\n\nexport const serialization = {\n  deserialize(el /*, next*/) {\n    let type = el.dataset && el.dataset.type;\n    let tag = 'iframe';\n    let src;\n    const typeIndex = types.indexOf(type);\n\n    if (typeIndex < 0) {\n      if (el instanceof Element && el.tagName.toLowerCase() === 'audio') {\n        type = 'audio';\n        tag = 'audio';\n        src = el.firstChild?.getAttribute('src');\n      } else {\n        return;\n      }\n    }\n\n    const { ends, starts, title, editing, url } = el.dataset || {};\n\n    log('deserialize: ', name);\n    const width = parseInt(el.getAttribute('width'), 10) || null;\n    const height = parseInt(el.getAttribute('height'), 10) || null;\n\n    const out = {\n      object: 'inline',\n      type: type,\n      isVoid: true,\n      data: {\n        tag,\n        src: src || el.getAttribute('src'),\n        editing,\n        ends,\n        height,\n        starts,\n        title,\n        width,\n        url,\n      },\n    };\n    log('return object: ', out);\n    return out;\n  },\n  serialize(object /*, children*/) {\n    const typeIndex = types.indexOf(object.type);\n\n    if (typeIndex < 0) return;\n\n    const type = types[typeIndex];\n\n    const { data } = object;\n    const editing = data.get('editing');\n    const tag = data.get('tag');\n    const ends = data.get('ends');\n    const src = data.get('src');\n    const starts = data.get('starts');\n    const title = data.get('title');\n    const width = data.get('width');\n    const height = data.get('height');\n    const url = data.get('url');\n    const style = {};\n\n    if (width) {\n      style.width = `${width}px`;\n    }\n\n    if (height) {\n      style.height = `${height}px`;\n    }\n\n    const divProps = {\n      'data-editing': editing,\n      'data-ends': ends,\n      'data-starts': starts,\n      'data-title': title,\n      'data-url': url,\n    };\n    const props = {\n      ...style,\n      src,\n    };\n\n    if (tag === 'audio') {\n      return (\n        <audio controls=\"controls\" controlsList=\"nodownload\">\n          <source type=\"audio/mp3\" src={src} />\n        </audio>\n      );\n    }\n\n    return (\n      <iframe\n        data-type={type}\n        src={src}\n        {...divProps}\n        frameBorder=\"0\"\n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n        allowFullScreen\n        {...props}\n      />\n    );\n  },\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/plugins/respArea/utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isNumber = exports.insertSnackBar = exports.getDefaultElement = exports.defaultMT = exports.defaultIDD = exports.defaultECR = exports.defaultDIB = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
+var _client = require("react-dom/client");
 var _slate = require("slate");
 var _Snackbar = _interopRequireDefault(require("@mui/material/Snackbar"));
 var isNumber = exports.isNumber = function isNumber(val) {
@@ -32,9 +32,11 @@ var insertSnackBar = exports.insertSnackBar = function insertSnackBar(message) {
       id: "message-id"
     }, message)
   });
-  _reactDom["default"].render(el, newEl);
+  var snackbarRoot = (0, _client.createRoot)(newEl);
+  snackbarRoot.render(el);
   document.body.appendChild(newEl);
   setTimeout(function () {
+    snackbarRoot.unmount();
     newEl.remove();
   }, 2000);
 };

package/lib/plugins/respArea/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["_react","_interopRequireDefault","require","_reactDom","_slate","_Snackbar","isNumber","exports","val","isNaN","parseFloat","isFinite","insertSnackBar","message","prevSnacks","document","querySelectorAll","forEach","s","remove","newEl","createElement","className","el","anchorOrigin","vertical","horizontal","open","ContentProps","id","ReactDOM","render","body","appendChild","setTimeout","defaultECR","index","Inline","create","type","isVoid","data","defaultMT","defaultDIB","opts","duplicates","options","value","defaultIDD","object","getDefaultElement"],"sources":["../../../src/plugins/respArea/utils.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Inline } from 'slate';\nimport Snackbar from '@mui/material/Snackbar';\n\nexport const isNumber = (val) => !isNaN(parseFloat(val)) && isFinite(val);\n\nexport const insertSnackBar = (message) => {\n  const prevSnacks = document.querySelectorAll('.response-area-alert');\n\n  prevSnacks.forEach((s) => s.remove());\n\n  const newEl = document.createElement('div');\n\n  newEl.className = 'response-area-alert';\n\n  const el = (\n    <Snackbar\n      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}\n      open={true}\n      ContentProps={{\n        'aria-describedby': 'message-id',\n      }}\n      message={<span id=\"message-id\">{message}</span>}\n    />\n  );\n\n  ReactDOM.render(el, newEl);\n\n  document.body.appendChild(newEl);\n\n  setTimeout(() => {\n    newEl.remove();\n  }, 2000);\n};\n\nexport const defaultECR = (index) =>\n  Inline.create({\n    type: 'explicit_constructed_response',\n    isVoid: true,\n    data: {\n      index,\n    },\n  });\nexport const defaultMT = (index) =>\n  Inline.create({\n    type: 'math_templated',\n    isVoid: true,\n    data: {\n      index,\n    },\n  });\n\nexport const defaultDIB = (opts, index) =>\n  Inline.create({\n    type: 'drag_in_the_blank',\n    isVoid: true,\n    data: {\n      index,\n      duplicates: opts.options.duplicates,\n      value: null,\n    },\n  });\n\nexport const defaultIDD = (index) =>\n  Inline.create({\n    object: 'inline',\n    type: 'inline_dropdown',\n    isVoid: true,\n    data: {\n      index,\n    },\n  });\n\nexport const getDefaultElement = (opts, index) => {\n  switch (opts.type) {\n    case 'explicit-constructed-response':\n      return defaultECR(index);\n\n    case 'math-templated':\n      return defaultMT(index);\n\n    case 'drag-in-the-blank':\n      return defaultDIB(opts, index);\n\n    default:\n      // inline-dropdown\n      return defaultIDD(index);\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"utils.js","names":["_react","_interopRequireDefault","require","_client","_slate","_Snackbar","isNumber","exports","val","isNaN","parseFloat","isFinite","insertSnackBar","message","prevSnacks","document","querySelectorAll","forEach","s","remove","newEl","createElement","className","el","anchorOrigin","vertical","horizontal","open","ContentProps","id","snackbarRoot","createRoot","render","body","appendChild","setTimeout","unmount","defaultECR","index","Inline","create","type","isVoid","data","defaultMT","defaultDIB","opts","duplicates","options","value","defaultIDD","object","getDefaultElement"],"sources":["../../../src/plugins/respArea/utils.jsx"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Inline } from 'slate';\nimport Snackbar from '@mui/material/Snackbar';\n\nexport const isNumber = (val) => !isNaN(parseFloat(val)) && isFinite(val);\n\nexport const insertSnackBar = (message) => {\n  const prevSnacks = document.querySelectorAll('.response-area-alert');\n\n  prevSnacks.forEach((s) => s.remove());\n\n  const newEl = document.createElement('div');\n\n  newEl.className = 'response-area-alert';\n\n  const el = (\n    <Snackbar\n      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}\n      open={true}\n      ContentProps={{\n        'aria-describedby': 'message-id',\n      }}\n      message={<span id=\"message-id\">{message}</span>}\n    />\n  );\n\n  const snackbarRoot = createRoot(newEl);\n  snackbarRoot.render(el);\n\n  document.body.appendChild(newEl);\n\n  setTimeout(() => {\n    snackbarRoot.unmount();\n    newEl.remove();\n  }, 2000);\n};\n\nexport const defaultECR = (index) =>\n  Inline.create({\n    type: 'explicit_constructed_response',\n    isVoid: true,\n    data: {\n      index,\n    },\n  });\nexport const defaultMT = (index) =>\n  Inline.create({\n    type: 'math_templated',\n    isVoid: true,\n    data: {\n      index,\n    },\n  });\n\nexport const defaultDIB = (opts, index) =>\n  Inline.create({\n    type: 'drag_in_the_blank',\n    isVoid: true,\n    data: {\n      index,\n      duplicates: opts.options.duplicates,\n      value: null,\n    },\n  });\n\nexport const defaultIDD = (index) =>\n  Inline.create({\n    object: 'inline',\n    type: 'inline_dropdown',\n    isVoid: true,\n    data: {\n      index,\n    },\n  });\n\nexport const getDefaultElement = (opts, index) => {\n  switch (opts.type) {\n    case 'explicit-constructed-response':\n      return defaultECR(index);\n\n    case 'math-templated':\n      return defaultMT(index);\n\n    case 'drag-in-the-blank':\n      return defaultDIB(opts, index);\n\n    default:\n      // inline-dropdown\n      return defaultIDD(index);\n  }\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEO,IAAMI,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,SAAXA,QAAQA,CAAIE,GAAG;EAAA,OAAK,CAACC,KAAK,CAACC,UAAU,CAACF,GAAG,CAAC,CAAC,IAAIG,QAAQ,CAACH,GAAG,CAAC;AAAA;AAElE,IAAMI,cAAc,GAAAL,OAAA,CAAAK,cAAA,GAAG,SAAjBA,cAAcA,CAAIC,OAAO,EAAK;EACzC,IAAMC,UAAU,GAAGC,QAAQ,CAACC,gBAAgB,CAAC,sBAAsB,CAAC;EAEpEF,UAAU,CAACG,OAAO,CAAC,UAACC,CAAC;IAAA,OAAKA,CAAC,CAACC,MAAM,CAAC,CAAC;EAAA,EAAC;EAErC,IAAMC,KAAK,GAAGL,QAAQ,CAACM,aAAa,CAAC,KAAK,CAAC;EAE3CD,KAAK,CAACE,SAAS,GAAG,qBAAqB;EAEvC,IAAMC,EAAE,gBACNvB,MAAA,YAAAqB,aAAA,CAAChB,SAAA,WAAQ;IACPmB,YAAY,EAAE;MAAEC,QAAQ,EAAE,KAAK;MAAEC,UAAU,EAAE;IAAS,CAAE;IACxDC,IAAI,EAAE,IAAK;IACXC,YAAY,EAAE;MACZ,kBAAkB,EAAE;IACtB,CAAE;IACFf,OAAO,eAAEb,MAAA,YAAAqB,aAAA;MAAMQ,EAAE,EAAC;IAAY,GAAEhB,OAAc;EAAE,CACjD,CACF;EAED,IAAMiB,YAAY,GAAG,IAAAC,kBAAU,EAACX,KAAK,CAAC;EACtCU,YAAY,CAACE,MAAM,CAACT,EAAE,CAAC;EAEvBR,QAAQ,CAACkB,IAAI,CAACC,WAAW,CAACd,KAAK,CAAC;EAEhCe,UAAU,CAAC,YAAM;IACfL,YAAY,CAACM,OAAO,CAAC,CAAC;IACtBhB,KAAK,CAACD,MAAM,CAAC,CAAC;EAChB,CAAC,EAAE,IAAI,CAAC;AACV,CAAC;AAEM,IAAMkB,UAAU,GAAA9B,OAAA,CAAA8B,UAAA,GAAG,SAAbA,UAAUA,CAAIC,KAAK;EAAA,OAC9BC,aAAM,CAACC,MAAM,CAAC;IACZC,IAAI,EAAE,+BAA+B;IACrCC,MAAM,EAAE,IAAI;IACZC,IAAI,EAAE;MACJL,KAAK,EAALA;IACF;EACF,CAAC,CAAC;AAAA;AACG,IAAMM,SAAS,GAAArC,OAAA,CAAAqC,SAAA,GAAG,SAAZA,SAASA,CAAIN,KAAK;EAAA,OAC7BC,aAAM,CAACC,MAAM,CAAC;IACZC,IAAI,EAAE,gBAAgB;IACtBC,MAAM,EAAE,IAAI;IACZC,IAAI,EAAE;MACJL,KAAK,EAALA;IACF;EACF,CAAC,CAAC;AAAA;AAEG,IAAMO,UAAU,GAAAtC,OAAA,CAAAsC,UAAA,GAAG,SAAbA,UAAUA,CAAIC,IAAI,EAAER,KAAK;EAAA,OACpCC,aAAM,CAACC,MAAM,CAAC;IACZC,IAAI,EAAE,mBAAmB;IACzBC,MAAM,EAAE,IAAI;IACZC,IAAI,EAAE;MACJL,KAAK,EAALA,KAAK;MACLS,UAAU,EAAED,IAAI,CAACE,OAAO,CAACD,UAAU;MACnCE,KAAK,EAAE;IACT;EACF,CAAC,CAAC;AAAA;AAEG,IAAMC,UAAU,GAAA3C,OAAA,CAAA2C,UAAA,GAAG,SAAbA,UAAUA,CAAIZ,KAAK;EAAA,OAC9BC,aAAM,CAACC,MAAM,CAAC;IACZW,MAAM,EAAE,QAAQ;IAChBV,IAAI,EAAE,iBAAiB;IACvBC,MAAM,EAAE,IAAI;IACZC,IAAI,EAAE;MACJL,KAAK,EAALA;IACF;EACF,CAAC,CAAC;AAAA;AAEG,IAAMc,iBAAiB,GAAA7C,OAAA,CAAA6C,iBAAA,GAAG,SAApBA,iBAAiBA,CAAIN,IAAI,EAAER,KAAK,EAAK;EAChD,QAAQQ,IAAI,CAACL,IAAI;IACf,KAAK,+BAA+B;MAClC,OAAOJ,UAAU,CAACC,KAAK,CAAC;IAE1B,KAAK,gBAAgB;MACnB,OAAOM,SAAS,CAACN,KAAK,CAAC;IAEzB,KAAK,mBAAmB;MACtB,OAAOO,UAAU,CAACC,IAAI,EAAER,KAAK,CAAC;IAEhC;MACE;MACA,OAAOY,UAAU,CAACZ,KAAK,CAAC;EAC5B;AACF,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "11.23.0-mui-update.0",
+  "version": "11.25.0-mui-update.0",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -13,11 +13,11 @@
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/drag": "^2.24.0-mui-update.0",
-    "@pie-lib/math-input": "^6.33.0-mui-update.0",
-    "@pie-lib/math-rendering": "^3.28.0-mui-update.0",
-    "@pie-lib/math-toolbar": "^1.33.0-mui-update.0",
-    "@pie-lib/render-ui": "^4.37.0-mui-update.0",
+    "@pie-lib/drag": "^2.26.0-mui-update.0",
+    "@pie-lib/math-input": "^6.35.0-mui-update.0",
+    "@pie-lib/math-rendering": "^3.30.0-mui-update.0",
+    "@pie-lib/math-toolbar": "^1.35.0-mui-update.0",
+    "@pie-lib/render-ui": "^4.39.0-mui-update.0",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -51,6 +51,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d8ccede3634986a13ea7df987defd26d089f0d6",
+  "gitHead": "c91b0261ec04a6aa0d6119a8f9d79d662a304c41",
   "scripts": {}
 }

package/src/plugins/characters/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import debug from 'debug';
 import get from 'lodash/get';
 
@@ -66,10 +66,16 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
   );
 
   let popoverEl;
+  let popoverRoot;
 
   const closePopOver = () => {
+    if (popoverRoot) {
+      popoverRoot.unmount();
+      popoverRoot = null;
+    }
     if (popoverEl) {
       popoverEl.remove();
+      popoverEl = null;
     }
 
     removePopOvers();
@@ -85,7 +91,8 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
     closePopOver();
 
     popoverEl = document.createElement('div');
-    ReactDOM.render(
+    popoverRoot = createRoot(popoverEl);
+    popoverRoot.render(
       <CustomPopper onClose={closePopOver} anchorEl={event.currentTarget}>
         <div>{el.label}</div>
 
@@ -93,7 +100,6 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
 
         <div style={infoStyle}>{el.unicode}</div>
       </CustomPopper>,
-      popoverEl,
     );
 
     document.body.appendChild(newEl);
@@ -172,7 +178,11 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
     />
   );
 
-  ReactDOM.render(el, newEl, () => {
+  const dialogRoot = createRoot(newEl);
+  dialogRoot.render(el);
+
+  // Use setTimeout to ensure the element is rendered before positioning
+  setTimeout(() => {
     const cursorItem = document.querySelector(`[data-key="${value.anchorKey}"]`);
 
     if (cursorItem) {
@@ -216,7 +226,7 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
 
       document.body.addEventListener('click', listener);
     }
-  });
+  }, 0);
 };
 
 const CharacterIcon = ({ letter }) => (

package/src/plugins/css/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import List from '@mui/material/List';
 import { Mark } from 'slate';
 import ListItem from '@mui/material/ListItem';
@@ -110,7 +110,11 @@ const insertDialog = ({ editorDOM, value, callback, opts, textNode, parentNode }
     </div>
   );
 
-  ReactDOM.render(el, newEl, () => {
+  const dialogRoot = createRoot(newEl);
+  dialogRoot.render(el);
+
+  // Use setTimeout to ensure the element is rendered before positioning
+  setTimeout(() => {
     const cursorItem = document.querySelector(`[data-key="${value.anchorKey}"]`);
 
     if (cursorItem) {
@@ -154,7 +158,7 @@ const insertDialog = ({ editorDOM, value, callback, opts, textNode, parentNode }
 
       document.body.addEventListener('click', listener);
     }
-  });
+  }, 0);
 };
 
 const findParentNodeInfo = (value, textNode) => {

package/src/plugins/image/image-toolbar.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import debug from 'debug';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 
@@ -50,6 +50,8 @@ export class ImageToolbar extends React.Component {
     disableImageAlignmentButtons: PropTypes.bool,
   };
 
+  dialogRoot = null;
+
   onAltTextDone = (newAlt) => {
     log('[onAltTextDone]: alt:', newAlt);
 
@@ -67,7 +69,8 @@ export class ImageToolbar extends React.Component {
 
     const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;
 
-    ReactDOM.render(el, popoverEl);
+    this.dialogRoot = createRoot(popoverEl);
+    this.dialogRoot.render(el);
 
     document.body.appendChild(popoverEl);
   };

package/src/plugins/media/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Inline } from 'slate';
 import TheatersIcon from '@mui/icons-material/Theaters';
 import VolumeUpIcon from '@mui/icons-material/VolumeUp';
@@ -44,7 +44,8 @@ export const insertDialog = (props) => {
     />
   );
 
-  ReactDOM.render(el, newEl);
+  const dialogRoot = createRoot(newEl);
+  dialogRoot.render(el);
 
   document.body.appendChild(newEl);
 };

package/src/plugins/respArea/utils.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Inline } from 'slate';
 import Snackbar from '@mui/material/Snackbar';
 
@@ -25,11 +25,13 @@ export const insertSnackBar = (message) => {
     />
   );
 
-  ReactDOM.render(el, newEl);
+  const snackbarRoot = createRoot(newEl);
+  snackbarRoot.render(el);
 
   document.body.appendChild(newEl);
 
   setTimeout(() => {
+    snackbarRoot.unmount();
     newEl.remove();
   }, 2000);
 };