@pie-lib/editable-html 11.24.0-mui-update.0 → 11.26.0-mui-update.0

package/src/editor.jsx

@@ -33,8 +33,8 @@ const defaultToolbarOpts = {
 
 const defaultResponseAreaProps = {
   options: {},
-  respAreaToolbar: () => {},
-  onHandleAreaChange: () => {},
+  respAreaToolbar: () => { },
+  onHandleAreaChange: () => { },
 };
 
 const defaultLanguageCharactersProps = [];
@@ -83,6 +83,7 @@ export class Editor extends React.Component {
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    slateEditorExtraStyles: PropTypes.object,
     highlightShape: PropTypes.bool,
     disabled: PropTypes.bool,
     spellCheck: PropTypes.bool,
@@ -147,10 +148,10 @@ export class Editor extends React.Component {
 
   static defaultProps = {
     disableUnderline: true,
-    onFocus: () => {},
-    onBlur: () => {},
-    onKeyDown: () => {},
-    runSerializationOnMarkup: () => {},
+    onFocus: () => { },
+    onBlur: () => { },
+    onKeyDown: () => { },
+    runSerializationOnMarkup: () => { },
     mathMlOptions: {
       mmlOutput: false,
       mmlEditing: false,
@@ -557,7 +558,7 @@ export class Editor extends React.Component {
       <div ref={(ref) => (this.elementRef = ref)}>
         <div>Preview of Edited Html:</div>
         {/* TODO: check if this works and we don't need to send style over to preview prompt */}
-        <StyledPreviewText> 
+        <StyledPreviewText>
           <PreviewPrompt prompt={this.state.value.document.text} />
         </StyledPreviewText>
         <div>Would you like to save these changes ?</div>
@@ -816,8 +817,8 @@ export class Editor extends React.Component {
     const isEditedInHtmlMode = !this.state.isHtmlMode
       ? false
       : this.state.value.document.text !== value.document.text
-      ? true
-      : this.state.isEditedInHtmlMode;
+        ? true
+        : this.state.isEditedInHtmlMode;
 
     if (isEditedInHtmlMode != this.state.isEditedInHtmlMode) {
       this.handlePlugins(this.props);
@@ -961,7 +962,7 @@ export class Editor extends React.Component {
         this.onChange(ch);
         const handler = new InsertImageHandler(
           inline,
-          () => {},
+          () => { },
           () => this.state.value,
           this.onChange,
           true,
@@ -1030,6 +1031,7 @@ export class Editor extends React.Component {
       placeholder,
       pluginProps,
       onKeyDown,
+      slateEditorExtraStyles,
     } = this.props;
     // We don't want to send customPlugins to slate.
     // Not sure if they would do any harm, but I think it's better to not send them.
@@ -1103,6 +1105,7 @@ export class Editor extends React.Component {
               minHeight: sizeStyle.minHeight,
               height: sizeStyle.height,
               maxHeight: sizeStyle.maxHeight,
+              ...slateEditorExtraStyles
             }}
             pluginProps={otherPluginProps}
             toolbarOpts={toolbarOpts}

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);
 };