@pie-lib/editable-html 9.5.13 → 10.0.0-beta.1

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

@@ -18,7 +18,7 @@ import ActionDelete from '@material-ui/icons/Delete';
 
 const log = debug('@pie-lib:editable-html:plugins:media:dialog');
 
-const matchYoutubeUrl = (url) => {
+const matchYoutubeUrl = url => {
   if (!url) {
     return false;
   }
@@ -30,13 +30,13 @@ const matchYoutubeUrl = (url) => {
   return false;
 };
 
-const matchVimeoUrl = (url) =>
+const matchVimeoUrl = url =>
   url &&
   /(http|https)?:\/\/(www\.)?(player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(video\/)?(\d+)(?:|\/\?)/.test(
-    url,
+    url
   );
 
-const matchSoundCloudUrl = (url) => {
+const matchSoundCloudUrl = url => {
   if (!url) {
     return false;
   }
@@ -45,12 +45,12 @@ const matchSoundCloudUrl = (url) => {
   return url.match(regexp) && url.match(regexp)[2];
 };
 
-const makeApiRequest = (url) => {
-  return new Promise((resolve) => {
+const makeApiRequest = url => {
+  return new Promise(resolve => {
     try {
       fetch(`https://soundcloud.com/oembed?format=json&url=${url}`)
-        .then((response) => response.json())
-        .then((json) => {
+        .then(response => response.json())
+        .then(json => {
           const d = document.createElement('div');
 
           d.innerHTML = json.html;
@@ -59,7 +59,7 @@ const makeApiRequest = (url) => {
 
           resolve(iframe.src);
         })
-        .catch((err) => {
+        .catch(err => {
           resolve('');
           log(err);
         });
@@ -71,7 +71,7 @@ const makeApiRequest = (url) => {
 
 const typeMap = {
   video: 'Video',
-  audio: 'Audio',
+  audio: 'Audio'
 };
 
 export class MediaDialog extends React.Component {
@@ -83,7 +83,7 @@ export class MediaDialog extends React.Component {
     handleClose: PropTypes.func,
     uploadSoundSupport: PropTypes.shape({
       add: PropTypes.func,
-      delete: PropTypes.func,
+      delete: PropTypes.func
     }),
     type: PropTypes.string,
     src: PropTypes.string,
@@ -92,7 +92,7 @@ export class MediaDialog extends React.Component {
     starts: PropTypes.number,
     ends: PropTypes.number,
     height: PropTypes.number,
-    width: PropTypes.number,
+    width: PropTypes.number
   };
 
   constructor(props) {
@@ -102,19 +102,20 @@ export class MediaDialog extends React.Component {
 
     this.state = {
       ends: ends || 0,
-      url: url,
-      urlToUse: urlToUse,
-      formattedUrl: src,
+      url: url || '',
+      urlToUse: urlToUse || '',
+      formattedUrl: src || '',
       height: height || 315,
       invalid: false,
       starts: starts || 0,
       width: width || 560,
       tabValue: 0,
+      updating: false,
       fileUpload: {
         loading: false,
         url: '',
-        error: null,
-      },
+        error: null
+      }
     };
   }
 
@@ -122,8 +123,8 @@ export class MediaDialog extends React.Component {
     if (this.props.url) {
       this.urlChange({
         target: {
-          value: this.props.url,
-        },
+          value: this.props.url
+        }
       });
     }
   }
@@ -132,7 +133,7 @@ export class MediaDialog extends React.Component {
     const { url, urlToUse, starts, ends } = this.state;
     const isYoutube = matchYoutubeUrl(url);
     const isVimeo = matchVimeoUrl(url);
-    let formattedUrl = urlToUse;
+    let formattedUrl = urlToUse || '';
 
     if ((isYoutube || isVimeo) && urlToUse) {
       const params = [];
@@ -170,20 +171,20 @@ export class MediaDialog extends React.Component {
     this.setState({ formattedUrl: null, updating: true }, callback);
   };
 
-  handleStateChange = (newState) => this.setState(newState, this.formatUrl);
+  handleStateChange = newState => this.setState(newState, this.formatUrl);
 
-  urlChange = (e) => {
+  urlChange = e => {
     const { value } = e.target || {};
     const { type } = this.props;
 
     if (type && type === 'audio') {
       if (matchSoundCloudUrl(value)) {
         makeApiRequest(value)
-          .then((urlToUse) => {
+          .then(urlToUse => {
             this.handleStateChange({
               urlToUse,
               invalid: !urlToUse,
-              url: value,
+              url: value || ''
             });
           })
           .catch(log);
@@ -201,8 +202,8 @@ export class MediaDialog extends React.Component {
 
         this.handleStateChange({
           urlToUse,
-          url: value,
-          invalid: false,
+          url: value || '',
+          invalid: false
         });
 
         return;
@@ -216,9 +217,9 @@ export class MediaDialog extends React.Component {
 
         this.handleStateChange({
           urlToUse,
-          url: value,
+          url: value || '',
           ends: null,
-          invalid: false,
+          invalid: false
         });
 
         return;
@@ -226,15 +227,15 @@ export class MediaDialog extends React.Component {
     }
 
     this.handleStateChange({
-      urlToUse: null,
-      url: null,
-      invalid: true,
+      urlToUse: '',
+      url: '',
+      invalid: true
     });
   };
 
-  changeHandler = (type) => (e) => this.handleStateChange({ [type]: e.target.value });
+  changeHandler = type => e => this.handleStateChange({ [type]: e.target.value });
 
-  handleDone = (val) => {
+  handleDone = val => {
     const { handleClose } = this.props;
     const { tabValue, fileUpload } = this.state;
     const isInsertURL = tabValue === 0;
@@ -256,25 +257,25 @@ export class MediaDialog extends React.Component {
         width,
         url,
         urlToUse,
-        src: formattedUrl,
+        src: formattedUrl
       });
     } else {
       handleClose(val, {
         tag: 'audio',
-        src: fileUpload.url,
+        src: fileUpload.url
       });
     }
   };
 
-  handleUploadFile = async (e) => {
+  handleUploadFile = async e => {
     e.preventDefault();
 
     this.setState({
       fileUpload: {
         ...this.state.fileUpload,
         error: null,
-        loading: true,
-      },
+        loading: true
+      }
     });
 
     const fileChosen = e.target.files[0];
@@ -287,8 +288,8 @@ export class MediaDialog extends React.Component {
       this.setState({
         fileUpload: {
           ...this.state.fileUpload,
-          url: dataURL,
-        },
+          url: dataURL
+        }
       });
     };
     reader.readAsDataURL(fileChosen);
@@ -304,32 +305,32 @@ export class MediaDialog extends React.Component {
             fileUpload: {
               ...this.state.fileUpload,
               loading: false,
-              error: err,
-            },
+              error: err
+            }
           });
         } else {
           this.setState({
             fileUpload: {
               ...this.state.fileUpload,
               loading: false,
-              url: src,
-            },
+              url: src
+            }
           });
         }
-      },
+      }
     });
   };
 
   handleRemoveFile = async () => {
-    this.props.uploadSoundSupport.delete(this.state.fileUpload.url, (err) => {
+    this.props.uploadSoundSupport.delete(this.state.fileUpload.url, err => {
       if (err) {
         //eslint-disable-next-line
         console.log(err);
         this.setState({
           fileUpload: {
             ...this.state.fileUpload,
-            error: err,
-          },
+            error: err
+          }
         });
       }
     });
@@ -339,23 +340,36 @@ export class MediaDialog extends React.Component {
       fileUpload: {
         ...this.state.fileUpload,
         loading: false,
-        url: '',
-      },
+        url: ''
+      }
     });
   };
 
   render() {
     const { classes, open, disablePortal, type, edit, uploadSoundSupport } = this.props;
-    const { ends, height, invalid, starts, width, url, formattedUrl, updating, tabValue, fileUpload } = this.state;
+    const {
+      ends,
+      height,
+      invalid,
+      starts,
+      width,
+      url,
+      formattedUrl,
+      updating,
+      tabValue,
+      fileUpload
+    } = this.state;
     const isYoutube = matchYoutubeUrl(url);
     const isInsertURL = tabValue === 0;
     const isUploadMedia = tabValue === 1;
-    const submitIsDisabled = isInsertURL ? invalid || url === null || url === undefined : !fileUpload.url;
+    const submitIsDisabled = isInsertURL
+      ? invalid || url === null || url === undefined
+      : !fileUpload.url;
 
     return (
       <Dialog
         classes={{
-          paper: classes.paper,
+          paper: classes.paper
         }}
         disablePortal={disablePortal}
         open={open}
@@ -373,7 +387,9 @@ export class MediaDialog extends React.Component {
                   this.setState({ tabValue: value });
                 }}
               >
-                <MuiTab label={type === 'video' ? 'Insert YouTube or Vimeo URL' : 'Insert SoundCloud URL'} />
+                <MuiTab
+                  label={type === 'video' ? 'Insert YouTube or Vimeo URL' : 'Insert SoundCloud URL'}
+                />
                 {uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video' ? (
                   <MuiTab label="Upload file" />
                 ) : null}
@@ -397,7 +413,7 @@ export class MediaDialog extends React.Component {
                 {type === 'video' && (
                   <DialogContent
                     classes={{
-                      root: classes.properties,
+                      root: classes.properties
                     }}
                   >
                     <DialogContentText>Video Properties</DialogContentText>
@@ -437,7 +453,7 @@ export class MediaDialog extends React.Component {
                   <React.Fragment>
                     <DialogContent
                       classes={{
-                        root: classes.properties,
+                        root: classes.properties
                       }}
                     >
                       <TextField
@@ -476,14 +492,25 @@ export class MediaDialog extends React.Component {
                         <audio controls="controls">
                           <source type="audio/mp3" src={fileUpload.url} />
                         </audio>
-                        <IconButton aria-label="delete" className={classes.deleteIcon} onClick={this.handleRemoveFile}>
+                        <IconButton
+                          aria-label="delete"
+                          className={classes.deleteIcon}
+                          onClick={this.handleRemoveFile}
+                        >
                           <ActionDelete />
                         </IconButton>
                       </div>
-                      {fileUpload.loading ? <Typography variant="subheading">Loading...</Typography> : null}
+                      {fileUpload.loading ? (
+                        <Typography variant="subheading">Loading...</Typography>
+                      ) : null}
                     </>
                   ) : !fileUpload.loading ? (
-                    <input accept="audio/*" className={classes.input} onChange={this.handleUploadFile} type="file" />
+                    <input
+                      accept="audio/*"
+                      className={classes.input}
+                      onChange={this.handleUploadFile}
+                      type="file"
+                    />
                   ) : null}
                   {!!fileUpload.error && (
                     <Typography className={classes.error} variant="caption">
@@ -508,35 +535,35 @@ export class MediaDialog extends React.Component {
   }
 }
 
-const styles = (theme) => ({
+const styles = () => ({
   paper: {
-    minWidth: '500px',
+    minWidth: '500px'
   },
   properties: {
-    padding: 0,
+    padding: 0
   },
   row: {
     display: 'flex',
-    flexDirection: 'space-between',
+    flexDirection: 'space-between'
   },
   rowItem: {
-    marginRight: theme.spacing.unit * 1.5,
-    cursor: 'pointer',
+    marginRight: '12px',
+    cursor: 'pointer'
   },
   active: {
     color: color.primary(),
-    borderBottom: `2px solid ${color.primary()}`,
+    borderBottom: `2px solid ${color.primary()}`
   },
   uploadInput: {
-    marginTop: theme.spacing.unit * 1.5,
+    marginTop: '12px'
   },
   error: {
-    marginTop: theme.spacing.unit * 1.5,
-    color: theme.palette.error.main,
+    marginTop: '12px',
+    color: 'red'
   },
   deleteIcon: {
-    marginLeft: theme.spacing.unit * 1.5,
-  },
+    marginLeft: '12px'
+  }
 });
 
 export default withStyles(styles)(MediaDialog);

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

@@ -2,29 +2,29 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 
-const useStyles = withStyles((theme) => ({
+const useStyles = withStyles(theme => ({
   root: {
     position: 'relative',
     bottom: '5px',
     left: 0,
     width: '100%',
-    background: theme.palette.common.white,
+    background: 'white',
     display: 'inline-flex',
     padding: '5px',
-    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
   },
   editContainer: {
     cursor: 'pointer',
     flex: 3,
-    border: `solid ${theme.palette.common.black}`,
+    border: 'solid black',
     textAlign: 'right',
     borderWidth: '0 2px 0 0',
     marginRight: '5px',
-    paddingRight: '5px',
+    paddingRight: '5px'
   },
   removeContainer: {
-    cursor: 'pointer',
-  },
+    cursor: 'pointer'
+  }
 }));
 
 class MediaToolbar extends React.Component {
@@ -32,7 +32,7 @@ class MediaToolbar extends React.Component {
     classes: PropTypes.object,
     onEdit: PropTypes.func,
     hideEdit: PropTypes.bool,
-    onRemove: PropTypes.func,
+    onRemove: PropTypes.func
   };
 
   render() {

package/src/plugins/media/media-wrapper.jsx

@@ -1,43 +1,42 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
 
-const useStyles = withStyles(() => ({
+const useStyles = makeStyles(() => ({
   root: {
-    position: 'relative',
+    position: 'relative'
   },
   editor: {
     display: 'inline-block',
-    overflow: 'hidden',
-  },
+    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]),
-  };
+const MediaWrapper = React.forwardRef((props, ref) => {
+  const { children, width, attributes } = props;
+  const classes = useStyles(props);
 
-  render() {
-    const { editor, classes, children, width, ...rest } = this.props;
+  return (
+    <span
+      className={classNames(classes.root, classes.editor)}
+      ref={ref}
+      {...attributes}
+      contentEditable={false}
+      style={{
+        width: width || 300
+      }}
+    >
+      {children}
+    </span>
+  );
+});
 
-    return (
-      <span
-        className={classNames(classes.root, {
-          [classes.editor]: editor,
-        })}
-        {...rest}
-        style={{
-          width: width || 300,
-        }}
-      >
-        {children}
-      </span>
-    );
-  }
-}
+MediaWrapper.propTypes = {
+  attributes: PropTypes.object,
+  classes: PropTypes.object,
+  children: PropTypes.array,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+};
 
-export default useStyles(MediaWrapper);
+export default MediaWrapper;

package/src/plugins/respArea/drag-in-the-blank/choice.jsx

@@ -9,22 +9,22 @@ import classnames from 'classnames';
 
 import { GripIcon } from '../icons';
 
-const useStyles = withStyles((theme) => ({
+const useStyles = withStyles(theme => ({
   content: {
-    border: `solid 0px ${theme.palette.primary.main}`,
+    border: `solid 0px ${theme.palette.primary.main}`
   },
   chip: {
-    minWidth: '90px',
+    minWidth: '90px'
   },
   correct: {
-    border: `solid 1px ${color.correct()}`,
+    border: 'solid 1px green'
   },
   incorrect: {
-    border: `solid 1px ${theme.palette.error.main}`,
+    border: 'solid 1px red'
   },
   selected: {
-    border: `2px solid ${color.primaryDark()} !important`,
-  },
+    border: `2px solid ${color.primaryDark()} !important`
+  }
 }));
 
 export class BlankContent extends React.Component {
@@ -35,7 +35,7 @@ export class BlankContent extends React.Component {
     isOver: PropTypes.bool,
     dragItem: PropTypes.object,
     value: PropTypes.object,
-    classes: PropTypes.object,
+    classes: PropTypes.object
   };
 
   constructor(props) {
@@ -75,7 +75,7 @@ export class BlankContent extends React.Component {
 
     return (
       <div
-        ref={(ref) => (this.elementRef = ref)}
+        ref={ref => (this.elementRef = ref)}
         style={{
           display: 'inline-flex',
           minWidth: '178px',
@@ -86,7 +86,7 @@ export class BlankContent extends React.Component {
           borderRadius: '3px',
           overflow: 'hidden',
           position: 'relative',
-          padding: '8px 8px 8px 35px',
+          padding: '8px 8px 8px 35px'
         }}
         data-key={n.key}
         contentEditable={false}
@@ -97,14 +97,14 @@ export class BlankContent extends React.Component {
               position: 'absolute',
               top: '6px',
               left: '15px',
-              color: '#9B9B9B',
+              color: '#9B9B9B'
             }}
             contentEditable={false}
           />
         )}
         <span
           dangerouslySetInnerHTML={{
-            __html: finalLabel,
+            __html: finalLabel
           }}
         />
         {children}
@@ -119,7 +119,9 @@ const connectedBlankContent = useStyles(({ connectDropTarget, connectDragSource,
   const { classes, isOver, value } = props;
   const dragContent = <StyledBlankContent {...props} />;
   const dragEl = !value ? dragContent : connectDragSource(<span>{dragContent}</span>);
-  const content = <span className={classnames(classes.content, isOver && classes.over)}>{dragEl}</span>;
+  const content = (
+    <span className={classnames(classes.content, isOver && classes.over)}>{dragEl}</span>
+  );
 
   return connectDropTarget ? connectDropTarget(content) : content;
 });
@@ -137,20 +139,20 @@ export const tileTarget = {
     }
 
     return {
-      dropped: shouldDrop,
+      dropped: shouldDrop
     };
   },
   canDrop(props, monitor) {
     const draggedItem = monitor.getItem();
 
     return draggedItem.instanceId === props.instanceId;
-  },
+  }
 };
 
 const DropTile = DropTarget('drag-in-the-blank-choice', tileTarget, (connect, monitor) => ({
   connectDropTarget: connect.dropTarget(),
   isOver: monitor.isOver(),
-  dragItem: monitor.getItem(),
+  dragItem: monitor.getItem()
 }))(connectedBlankContent);
 
 export const tileSource = {
@@ -162,7 +164,7 @@ export const tileSource = {
       id: props.targetId,
       value: props.value,
       instanceId: props.instanceId,
-      fromChoice: true,
+      fromChoice: true
     };
   },
   endDrag(props, monitor) {
@@ -176,10 +178,10 @@ export const tileSource = {
         props.removeResponse(draggedItem.value);
       }
     }
-  },
+  }
 };
 
 export default DragSource('drag-in-the-blank-choice', tileSource, (connect, monitor) => ({
   connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging(),
+  isDragging: monitor.isDragging()
 }))(DropTile);