@pie-lib/editable-html 11.18.6-esmbeta.0 → 11.19.0-mui-update.0

package/src/plugins/image/component.jsx

@@ -1,15 +1,66 @@
-import LinearProgress from '@material-ui/core/LinearProgress';
+import LinearProgress from '@mui/material/LinearProgress';
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import debug from 'debug';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import SlatePropTypes from 'slate-prop-types';
 
 const log = debug('@pie-lib:editable-html:plugins:image:component');
 
 const size = (s) => (s ? `${s}px` : 'auto');
 
+const StyledImageRoot = styled('div')(({ theme }) => ({
+  position: 'relative',
+  border: `solid 1px ${theme.palette.common.white}`,
+  display: 'flex',
+  transition: 'opacity 200ms linear',
+  '&.loading': {
+    opacity: 0.3,
+  },
+  '&.pendingDelete': {
+    opacity: 0.3,
+  },
+}));
+
+const StyledProgress = styled(LinearProgress)(() => ({
+  position: 'absolute',
+  left: '0',
+  width: 'fit-content',
+  top: '0%',
+  transition: 'opacity 200ms linear',
+  '&.hideProgress': {
+    opacity: 0,
+  },
+}));
+
+const StyledImageContainer = styled('div')(() => ({
+  position: 'relative',
+  width: 'fit-content',
+  display: 'flex',
+  alignItems: 'center',
+  '&&:hover > .resize': {
+    display: 'block',
+  },
+}));
+
+const StyledImage = styled('img')(({ theme }) => ({
+  '&.active': {
+    border: `solid 1px ${theme.palette.primary.main}`,
+  },
+}));
+
+const StyledResize = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.primary.main,
+  cursor: 'col-resize',
+  height: '35px',
+  width: '5px',
+  borderRadius: 8,
+  marginLeft: '5px',
+  marginRight: '10px',
+  display: 'none',
+}));
+
 export class Component extends React.Component {
   static propTypes = {
     node: SlatePropTypes.node.isRequired,
@@ -17,7 +68,6 @@ export class Component extends React.Component {
       change: PropTypes.func.isRequired,
       value: PropTypes.object,
     }).isRequired,
-    classes: PropTypes.object.isRequired,
     attributes: PropTypes.object,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
@@ -201,7 +251,7 @@ export class Component extends React.Component {
   };
 
   render() {
-    const { node, editor, classes, attributes, onFocus } = this.props;
+    const { node, editor, attributes, onFocus } = this.props;
     const active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);
     const src = node.data.get('src');
     const loaded = node.data.get('loaded') !== false;
@@ -235,21 +285,20 @@ export class Component extends React.Component {
     log('[render] style:', size);
 
     const className = classNames(
-      classes.root,
-      !loaded && classes.loading,
-      deleteStatus === 'pending' && classes.pendingDelete,
+      !loaded && 'loading',
+      deleteStatus === 'pending' && 'pendingDelete',
     );
 
-    const progressClasses = classNames(classes.progress, loaded && classes.hideProgress);
+    const progressClasses = classNames(loaded && 'hideProgress');
 
     return [
       <span key={'sp1'}>&nbsp;</span>,
-      <div key={'comp'} onFocus={onFocus} className={className} style={{ justifyContent }}>
-        <LinearProgress mode="determinate" value={percent > 0 ? percent : 0} className={progressClasses} />
-        <div className={classes.imageContainer}>
-          <img
+      <StyledImageRoot key={'comp'} onFocus={onFocus} className={className} style={{ justifyContent }}>
+        <StyledProgress mode="determinate" value={percent > 0 ? percent : 0} className={progressClasses} />
+        <StyledImageContainer>
+          <StyledImage
             {...attributes}
-            className={classNames(classes.image, active && classes.active)}
+            className={classNames(active && 'active')}
             ref={(ref) => {
               this.img = ref;
             }}
@@ -258,86 +307,17 @@ export class Component extends React.Component {
             onLoad={this.loadImage}
             alt={alt}
           />
-          <div
+          <StyledResize
             ref={(ref) => {
               this.resize = ref;
             }}
-            className={classNames(classes.resize, 'resize')}
+            className="resize"
           />
-        </div>
-      </div>,
+        </StyledImageContainer>
+      </StyledImageRoot>,
       <span key={'sp2'}>&nbsp;</span>,
     ];
   }
 }
 
-const styles = (theme) => ({
-  portal: {
-    position: 'absolute',
-    opacity: 0,
-    transition: 'opacity 200ms linear',
-  },
-  floatingButtonRow: {
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: '1px',
-    display: 'flex',
-    padding: '10px',
-    border: `solid 1px ${theme.palette.grey[200]}`,
-    boxShadow:
-      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
-  },
-  progress: {
-    position: 'absolute',
-    left: '0',
-    width: 'fit-content',
-    top: '0%',
-    transition: 'opacity 200ms linear',
-  },
-  hideProgress: {
-    opacity: 0,
-  },
-  loading: {
-    opacity: 0.3,
-  },
-  pendingDelete: {
-    opacity: 0.3,
-  },
-  root: {
-    position: 'relative',
-    border: `solid 1px ${theme.palette.common.white}`,
-    display: 'flex',
-    transition: 'opacity 200ms linear',
-  },
-  delete: {
-    position: 'absolute',
-    right: 0,
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content',
-    display: 'flex',
-    alignItems: 'center',
-
-    '&&:hover > .resize': {
-      display: 'block',
-    },
-  },
-  active: {
-    border: `solid 1px ${theme.palette.primary.main}`,
-  },
-  resize: {
-    backgroundColor: theme.palette.primary.main,
-    cursor: 'col-resize',
-    height: '35px',
-    width: '5px',
-    borderRadius: 8,
-    marginLeft: '5px',
-    marginRight: '10px',
-    display: 'none',
-  },
-  drawableHeight: {
-    minHeight: 350,
-  },
-});
-
-export default withStyles(styles)(Component);
+export default Component;

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

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import debug from 'debug';
 import ReactDOM from 'react-dom';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import classNames from 'classnames';
 
 import { MarkButton } from '../toolbar/toolbar-buttons';
@@ -24,10 +24,26 @@ AlignmentButton.propTypes = {
   onClick: PropTypes.func.isRequired,
 };
 
+const StyledHolder = styled('div')(({ theme }) => ({
+  paddingLeft: theme.spacing(1),
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const StyledAltText = styled('span')(() => ({
+  '&.disabled': {
+    opacity: 0.5,
+  },
+  '&.altButton': {
+    borderLeft: '1px solid grey',
+    paddingLeft: 8,
+    marginLeft: 4,
+  },
+}));
+
 export class ImageToolbar extends React.Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
     alignment: PropTypes.string,
     alt: PropTypes.string,
     imageLoaded: PropTypes.bool,
@@ -57,9 +73,9 @@ export class ImageToolbar extends React.Component {
   };
 
   render() {
-    const { classes, alignment, imageLoaded, disableImageAlignmentButtons } = this.props;
+    const { alignment, imageLoaded, disableImageAlignmentButtons } = this.props;
     return (
-      <div className={classes.holder}>
+      <StyledHolder>
         {!disableImageAlignmentButtons && (
           <>
             <AlignmentButton alignment={'left'} active={alignment === 'left'} onClick={this.onAlignmentClick} />
@@ -67,34 +83,18 @@ export class ImageToolbar extends React.Component {
             <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />
           </>
         )}
-        <span
+        <StyledAltText
           className={classNames({
-            [classes.disabled]: !imageLoaded,
-            [classes.altButton]: !disableImageAlignmentButtons,
+            disabled: !imageLoaded,
+            altButton: !disableImageAlignmentButtons,
           })}
           onMouseDown={(event) => imageLoaded && this.renderDialog(event)}
         >
           Alt text
-        </span>
-      </div>
+        </StyledAltText>
+      </StyledHolder>
     );
   }
 }
 
-const styles = (theme) => ({
-  holder: {
-    paddingLeft: theme.spacing.unit,
-    display: 'flex',
-    alignItems: 'center',
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-  altButton: {
-    borderLeft: '1px solid grey',
-    paddingLeft: 8,
-    marginLeft: 4,
-  },
-});
-
-export default withStyles(styles)(ImageToolbar);
+export default ImageToolbar;

package/src/plugins/image/index.jsx

@@ -1,6 +1,6 @@
 import { Data, Inline } from 'slate';
 
-import Image from '@material-ui/icons/Image';
+import Image from '@mui/icons-material/Image';
 import ImageComponent from './component';
 import ImageToolbar from './image-toolbar';
 import InsertImageHandler from './insert-image-handler';

package/src/plugins/index.jsx

@@ -1,22 +1,22 @@
 import Hotkeys from 'slate-hotkeys';
 import { IS_IOS } from 'slate-dev-environment';
 import { Mark } from 'slate';
-import Bold from '@material-ui/icons/FormatBold';
-import FormatQuote from '@material-ui/icons/FormatQuote';
-//import Code from '@material-ui/icons/Code';
-import BulletedListIcon from '@material-ui/icons/FormatListBulleted';
-import NumberedListIcon from '@material-ui/icons/FormatListNumbered';
-import Redo from '@material-ui/icons/Redo';
-import Undo from '@material-ui/icons/Undo';
+import Bold from '@mui/icons-material/FormatBold';
+import FormatQuote from '@mui/icons-material/FormatQuote';
+//import Code from '@mui/icons-material/Code';
+import BulletedListIcon from '@mui/icons-material/FormatListBulleted';
+import NumberedListIcon from '@mui/icons-material/FormatListNumbered';
+import Redo from '@mui/icons-material/Redo';
+import Undo from '@mui/icons-material/Undo';
 import ImagePlugin from './image';
 import MediaPlugin from './media';
 import CharactersPlugin from './characters';
-import Italic from '@material-ui/icons/FormatItalic';
+import Italic from '@mui/icons-material/FormatItalic';
 import MathPlugin from './math';
 import React from 'react';
-import Strikethrough from '@material-ui/icons/FormatStrikethrough';
+import Strikethrough from '@mui/icons-material/FormatStrikethrough';
 import ToolbarPlugin from './toolbar';
-import Underline from '@material-ui/icons/FormatUnderlined';
+import Underline from '@mui/icons-material/FormatUnderlined';
 import compact from 'lodash/compact';
 import isEmpty from 'lodash/isEmpty';
 import SoftBreakPlugin from 'slate-soft-break';

package/src/plugins/math/index.jsx

@@ -1,4 +1,4 @@
-import Functions from '@material-ui/icons/Functions';
+import Functions from '@mui/icons-material/Functions';
 import { Inline } from 'slate';
 import { MathPreview, MathToolbar } from '@pie-lib/math-toolbar';
 import { wrapMath, unWrapMath, mmlToLatex, renderMath } from '@pie-lib/math-rendering';

package/src/plugins/media/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Inline } from 'slate';
-import TheatersIcon from '@material-ui/icons/Theaters';
-import VolumeUpIcon from '@material-ui/icons/VolumeUp';
+import TheatersIcon from '@mui/icons-material/Theaters';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
 import debug from 'debug';
 
 import MediaDialog from './media-dialog';

package/src/plugins/media/media-dialog.js

@@ -1,20 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import debug from 'debug';
-import { color } from '@pie-lib/render-ui';
-import { withStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import MuiTabs from '@material-ui/core/Tabs';
-import MuiTab from '@material-ui/core/Tab';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogActions from '@material-ui/core/DialogActions';
-import TextField from '@material-ui/core/TextField';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import ActionDelete from '@material-ui/icons/Delete';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import MuiTabs from '@mui/material/Tabs';
+import MuiTab from '@mui/material/Tab';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogActions from '@mui/material/DialogActions';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import ActionDelete from '@mui/icons-material/Delete';
 
 const log = debug('@pie-lib:editable-html:plugins:media:dialog');
 
@@ -82,9 +81,38 @@ const tabsTypeMap = {
   insertUrl: 'insert-url',
 };
 
+const StyledDialog = styled(Dialog)(() => ({
+  '& .MuiPaper-root': {
+    minWidth: '500px',
+  },
+}));
+
+const StyledDialogContent = styled(DialogContent)(() => ({
+  '&.properties': {
+    padding: 0,
+  },
+}));
+
+const StyledRow = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'space-between',
+}));
+
+const StyledUploadInput = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(1.5),
+}));
+
+const StyledError = styled(Typography)(({ theme }) => ({
+  marginTop: theme.spacing(1.5),
+  color: theme.palette.error.main,
+}));
+
+const StyledDeleteIcon = styled(IconButton)(({ theme }) => ({
+  marginLeft: theme.spacing(1.5),
+}));
+
 export class MediaDialog extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     open: PropTypes.bool,
     edit: PropTypes.bool,
     disablePortal: PropTypes.bool,
@@ -404,7 +432,7 @@ export class MediaDialog extends React.Component {
   };
 
   render() {
-    const { classes, open, disablePortal, type, edit, uploadSoundSupport } = this.props;
+    const { open, disablePortal, type, edit, uploadSoundSupport } = this.props;
     const {
       ends,
       height,
@@ -427,10 +455,7 @@ export class MediaDialog extends React.Component {
     const showUploadFile = uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video';
 
     return (
-      <Dialog
-        classes={{
-          paper: classes.paper,
-        }}
+      <StyledDialog
         disablePortal={disablePortal}
         open={open}
         onClose={() => this.handleDone(false)}
@@ -439,7 +464,7 @@ export class MediaDialog extends React.Component {
         <DialogTitle id="form-dialog-title">Insert {typeMap[type]}</DialogTitle>
         <DialogContent>
           <div>
-            <div className={classes.row}>
+            <StyledRow>
               <MuiTabs
                 indicatorColor="primary"
                 value={tabValue}
@@ -453,7 +478,7 @@ export class MediaDialog extends React.Component {
                   label={type === 'video' ? 'Insert YouTube, Vimeo, or Google Drive URL' : 'Insert SoundCloud URL'}
                 />
               </MuiTabs>
-            </div>
+            </StyledRow>
             {isInsertURL && (
               <div>
                 <TextField
@@ -470,11 +495,7 @@ export class MediaDialog extends React.Component {
                   fullWidth
                 />
                 {type === 'video' && (
-                  <DialogContent
-                    classes={{
-                      root: classes.properties,
-                    }}
-                  >
+                  <StyledDialogContent className="properties">
                     <DialogContentText>Video Properties</DialogContentText>
                     <TextField
                       autoFocus
@@ -496,7 +517,7 @@ export class MediaDialog extends React.Component {
                       value={height}
                       onChange={this.changeHandler('height')}
                     />
-                  </DialogContent>
+                  </StyledDialogContent>
                 )}
                 {formattedUrl && (
                   <iframe
@@ -510,11 +531,7 @@ export class MediaDialog extends React.Component {
                 )}
                 {type === 'video' && (formattedUrl || updating) && !invalid && (
                   <React.Fragment>
-                    <DialogContent
-                      classes={{
-                        root: classes.properties,
-                      }}
-                    >
+                    <StyledDialogContent className="properties">
                       <TextField
                         autoFocus
                         margin="dense"
@@ -537,24 +554,27 @@ export class MediaDialog extends React.Component {
                           onChange={this.changeHandler('ends')}
                         />
                       )}
-                    </DialogContent>
+                    </StyledDialogContent>
                   </React.Fragment>
                 )}
               </div>
             )}
             {isUploadMedia && (
-              <div className={classes.uploadInput}>
+              <StyledUploadInput>
                 <div>
                   {fileUpload.url ? (
                     <>
-                      <div className={classes.row}>
+                      <StyledRow>
                         <audio controls="controls" controlsList="nodownload">
                           <source type={mimeType} src={fileUpload.url} />
                         </audio>
-                        <IconButton aria-label="delete" className={classes.deleteIcon} onClick={this.handleRemoveFile}>
+                        <StyledDeleteIcon
+                          aria-label="delete"
+                          onClick={this.handleRemoveFile}
+                          size="large">
                           <ActionDelete />
-                        </IconButton>
-                      </div>
+                        </StyledDeleteIcon>
+                      </StyledRow>
                       {!fileUpload.scheduled && fileUpload.loading ? (
                         <Typography variant="subheading">Loading...</Typography>
                       ) : null}
@@ -565,15 +585,15 @@ export class MediaDialog extends React.Component {
                       ) : null}
                     </>
                   ) : !fileUpload.loading ? (
-                    <input accept="audio/*" className={classes.input} onChange={this.handleUploadFile} type="file" />
+                    <input accept="audio/*" onChange={this.handleUploadFile} type="file" />
                   ) : null}
                   {!!fileUpload.error && (
-                    <Typography className={classes.error} variant="caption">
+                    <StyledError variant="caption">
                       {fileUpload.error}
-                    </Typography>
+                    </StyledError>
                   )}
                 </div>
-              </div>
+              </StyledUploadInput>
             )}
           </div>
         </DialogContent>
@@ -585,40 +605,9 @@ export class MediaDialog extends React.Component {
             {edit ? 'Update' : 'Insert'}
           </Button>
         </DialogActions>
-      </Dialog>
+      </StyledDialog>
     );
   }
 }
 
-const styles = (theme) => ({
-  paper: {
-    minWidth: '500px',
-  },
-  properties: {
-    padding: 0,
-  },
-  row: {
-    display: 'flex',
-    flexDirection: 'space-between',
-  },
-  rowItem: {
-    marginRight: theme.spacing.unit * 1.5,
-    cursor: 'pointer',
-  },
-  active: {
-    color: color.primary(),
-    borderBottom: `2px solid ${color.primary()}`,
-  },
-  uploadInput: {
-    marginTop: theme.spacing.unit * 1.5,
-  },
-  error: {
-    marginTop: theme.spacing.unit * 1.5,
-    color: theme.palette.error.main,
-  },
-  deleteIcon: {
-    marginLeft: theme.spacing.unit * 1.5,
-  },
-});
-
-export default withStyles(styles)(MediaDialog);
+export default MediaDialog;