@pie-lib/editable-html-tip-tap 1.0.20 → 1.0.21-next.6057

package/src/components/image/ImageToolbar.jsx

@@ -2,14 +2,32 @@ 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 classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 
 import AltDialog from './AltDialog';
 import { MarkButton } from '../common/toolbar-buttons';
 
 const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
 
+const StyledHolder = styled('div')(({ theme }) => ({
+  paddingLeft: theme.spacing.unit,
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const StyledAltText = styled('span', {
+  shouldForwardProp: (prop) => !['disabled', 'hasAlignmentButtons'].includes(prop),
+})(({ disabled, hasAlignmentButtons }) => ({
+  ...(disabled && {
+    opacity: 0.5,
+  }),
+  ...(hasAlignmentButtons && {
+    borderLeft: '1px solid grey',
+    paddingLeft: 8,
+    marginLeft: 4,
+  }),
+}));
+
 const AlignmentButton = ({ alignment, active, onClick }) => {
   return (
     <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>
@@ -27,7 +45,6 @@ AlignmentButton.propTypes = {
 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 +74,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 +84,16 @@ export class ImageToolbar extends React.Component {
             <AlignmentButton alignment={'right'} active={alignment === 'right'} onClick={this.onAlignmentClick} />
           </>
         )}
-        <span
-          className={classNames({
-            [classes.disabled]: !imageLoaded,
-            [classes.altButton]: !disableImageAlignmentButtons,
-          })}
+        <StyledAltText
+          disabled={!imageLoaded}
+          hasAlignmentButtons={!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/components/media/MediaDialog.js

@@ -2,19 +2,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 +82,38 @@ const tabsTypeMap = {
   insertUrl: 'insert-url',
 };
 
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+  '& .MuiDialog-paper': {
+    minWidth: '500px',
+  },
+}));
+
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  padding: 0,
+}));
+
+const StyledRow = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'space-between',
+}));
+
+const StyledUploadInput = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(1.5),
+}));
+
+const StyledInput = styled('input')(({ theme }) => ({}));
+
+const StyledError = styled(Typography)(({ theme }) => ({
+  marginTop: theme.spacing(1.5),
+  color: theme.palette.error.main,
+}));
+
+const StyledIconButton = 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 +433,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 +456,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 +465,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 +479,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 +496,7 @@ export class MediaDialog extends React.Component {
                   fullWidth
                 />
                 {type === 'video' && (
-                  <DialogContent
-                    classes={{
-                      root: classes.properties,
-                    }}
-                  >
+                  <StyledDialogContent>
                     <DialogContentText>Video Properties</DialogContentText>
                     <TextField
                       autoFocus
@@ -496,7 +518,7 @@ export class MediaDialog extends React.Component {
                       value={height}
                       onChange={this.changeHandler('height')}
                     />
-                  </DialogContent>
+                  </StyledDialogContent>
                 )}
                 {formattedUrl && (
                   <iframe
@@ -510,11 +532,7 @@ export class MediaDialog extends React.Component {
                 )}
                 {type === 'video' && (formattedUrl || updating) && !invalid && (
                   <React.Fragment>
-                    <DialogContent
-                      classes={{
-                        root: classes.properties,
-                      }}
-                    >
+                    <StyledDialogContent>
                       <TextField
                         autoFocus
                         margin="dense"
@@ -537,24 +555,24 @@ 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}>
+                        <StyledIconButton aria-label="delete" onClick={this.handleRemoveFile}>
                           <ActionDelete />
-                        </IconButton>
-                      </div>
+                        </StyledIconButton>
+                      </StyledRow>
                       {!fileUpload.scheduled && fileUpload.loading ? (
                         <Typography variant="subheading">Loading...</Typography>
                       ) : null}
@@ -565,15 +583,11 @@ export class MediaDialog extends React.Component {
                       ) : null}
                     </>
                   ) : !fileUpload.loading ? (
-                    <input accept="audio/*" className={classes.input} onChange={this.handleUploadFile} type="file" />
+                    <StyledInput accept="audio/*" onChange={this.handleUploadFile} type="file" />
                   ) : null}
-                  {!!fileUpload.error && (
-                    <Typography className={classes.error} variant="caption">
-                      {fileUpload.error}
-                    </Typography>
-                  )}
+                  {!!fileUpload.error && <StyledError variant="caption">{fileUpload.error}</StyledError>}
                 </div>
-              </div>
+              </StyledUploadInput>
             )}
           </div>
         </DialogContent>
@@ -585,40 +599,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;

package/src/components/media/MediaToolbar.jsx

@@ -1,56 +1,49 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const useStyles = withStyles((theme) => ({
-  root: {
-    position: 'relative',
-    bottom: '5px',
-    left: 0,
-    width: '100%',
-    background: theme.palette.common.white,
-    display: 'inline-flex',
-    padding: '5px',
-    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-  },
-  editContainer: {
-    cursor: 'pointer',
-    flex: 3,
-    border: `solid ${theme.palette.common.black}`,
-    textAlign: 'right',
-    borderWidth: '0 2px 0 0',
-    marginRight: '5px',
-    paddingRight: '5px',
-  },
-  removeContainer: {
-    cursor: 'pointer',
-  },
+const StyledRoot = styled('span')(({ theme }) => ({
+  position: 'relative',
+  bottom: '5px',
+  left: 0,
+  width: '100%',
+  background: theme.palette.common.white,
+  display: 'inline-flex',
+  padding: '5px',
+  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
 }));
 
+const StyledEditContainer = styled('span')(({ theme }) => ({
+  cursor: 'pointer',
+  flex: 3,
+  border: `solid ${theme.palette.common.black}`,
+  textAlign: 'right',
+  borderWidth: '0 2px 0 0',
+  marginRight: '5px',
+  paddingRight: '5px',
+}));
+
+const StyledRemoveContainer = styled('span')({
+  cursor: 'pointer',
+});
+
 class MediaToolbar extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     onEdit: PropTypes.func,
     hideEdit: PropTypes.bool,
     onRemove: PropTypes.func,
   };
 
   render() {
-    const { classes, hideEdit, onEdit, onRemove } = this.props;
+    const { hideEdit, onEdit, onRemove } = this.props;
 
     return (
-      <span className={classes.root}>
-        {hideEdit ? null : (
-          <span className={classes.editContainer} onClick={onEdit}>
-            Edit Settings
-          </span>
-        )}
-        <span className={classes.removeContainer} onClick={onRemove}>
-          Remove
-        </span>
-      </span>
+      <StyledRoot>
+        {hideEdit ? null : <StyledEditContainer onClick={onEdit}>Edit Settings</StyledEditContainer>}
+        <StyledRemoveContainer onClick={onRemove}>Remove</StyledRemoveContainer>
+      </StyledRoot>
     );
   }
 }
 
-export default useStyles(MediaToolbar);
+export default MediaToolbar;

package/src/components/media/MediaWrapper.jsx

@@ -1,43 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const useStyles = withStyles(() => ({
-  root: {
-    position: 'relative',
-  },
-  editor: {
+const StyledWrapper = styled('span', {
+  shouldForwardProp: (prop) => prop !== 'editor',
+})(({ editor }) => ({
+  position: 'relative',
+  ...(editor && {
     display: 'inline-block',
     overflow: 'hidden',
-  },
+  }),
 }));
 
 class MediaWrapper extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     children: PropTypes.array,
     editor: PropTypes.bool,
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   };
 
   render() {
-    const { editor, classes, children, width, ...rest } = this.props;
+    const { editor, children, width, ...rest } = this.props;
 
     return (
-      <span
-        className={classNames(classes.root, {
-          [classes.editor]: editor,
-        })}
+      <StyledWrapper
+        editor={editor}
         {...rest}
         style={{
           width: width || 300,
         }}
       >
         {children}
-      </span>
+      </StyledWrapper>
     );
   }
 }
 
-export default useStyles(MediaWrapper);
+export default MediaWrapper;

package/src/components/respArea/DragInTheBlank/DragInTheBlank.jsx

@@ -10,17 +10,17 @@ export const onValueChange = (editor, node, pos, choice) => {
   // Merge old and new attributes
   tr.setNodeMarkup(pos, undefined, {
     ...node.attrs,
-    ...choice,
+    ...choice.value,
   });
   tr.isDone = true;
   editor.view.dispatch(tr);
 };
 
-export const onRemoveResponse = (editor, node, pos) => {
+export const onRemoveResponse = (editor, node, choice) => {
   const { tr } = editor.state;
 
   // Merge old and new attributes
-  tr.setNodeMarkup(pos, undefined, omit(node.attrs, ['value', 'id']));
+  tr.setNodeMarkup(choice.pos, undefined, omit(node.attrs, ['value', 'id']));
   tr.isDone = true;
   editor.view.dispatch(tr);
 };
@@ -49,10 +49,11 @@ const DragDrop = (props) => {
           n={attributes}
           dragKey={attributes.id}
           targetId="0"
+          pos={pos}
           value={attributes}
           duplicates={options.duplicates}
           onChange={(choice) => onValueChange(editor, node, pos, choice)}
-          removeResponse={() => onRemoveResponse(editor, node, pos)}
+          removeResponse={(choice) => onRemoveResponse(editor, node, choice)}
         ></DragDropTile>
       </span>
     </NodeViewWrapper>