@pie-lib/editable-html 9.2.6-next.2 → 9.2.7

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) {
@@ -113,8 +113,8 @@ export class MediaDialog extends React.Component {
       fileUpload: {
         loading: false,
         url: '',
-        error: null
-      }
+        error: null,
+      },
     };
   }
 
@@ -122,8 +122,8 @@ export class MediaDialog extends React.Component {
     if (this.props.url) {
       this.urlChange({
         target: {
-          value: this.props.url
-        }
+          value: this.props.url,
+        },
       });
     }
   }
@@ -170,20 +170,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);
@@ -202,7 +202,7 @@ export class MediaDialog extends React.Component {
         this.handleStateChange({
           urlToUse,
           url: value,
-          invalid: false
+          invalid: false,
         });
 
         return;
@@ -218,7 +218,7 @@ export class MediaDialog extends React.Component {
           urlToUse,
           url: value,
           ends: null,
-          invalid: false
+          invalid: false,
         });
 
         return;
@@ -228,13 +228,13 @@ export class MediaDialog extends React.Component {
     this.handleStateChange({
       urlToUse: null,
       url: null,
-      invalid: true
+      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 +256,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 +287,8 @@ export class MediaDialog extends React.Component {
       this.setState({
         fileUpload: {
           ...this.state.fileUpload,
-          url: dataURL
-        }
+          url: dataURL,
+        },
       });
     };
     reader.readAsDataURL(fileChosen);
@@ -304,32 +304,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,36 +339,23 @@ 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}
@@ -386,9 +373,7 @@ 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}
@@ -412,7 +397,7 @@ export class MediaDialog extends React.Component {
                 {type === 'video' && (
                   <DialogContent
                     classes={{
-                      root: classes.properties
+                      root: classes.properties,
                     }}
                   >
                     <DialogContentText>Video Properties</DialogContentText>
@@ -452,7 +437,7 @@ export class MediaDialog extends React.Component {
                   <React.Fragment>
                     <DialogContent
                       classes={{
-                        root: classes.properties
+                        root: classes.properties,
                       }}
                     >
                       <TextField
@@ -491,25 +476,14 @@ 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">
@@ -536,33 +510,33 @@ export class MediaDialog extends React.Component {
 
 const styles = () => ({
   paper: {
-    minWidth: '500px'
+    minWidth: '500px',
   },
   properties: {
-    padding: 0
+    padding: 0,
   },
   row: {
     display: 'flex',
-    flexDirection: 'space-between'
+    flexDirection: 'space-between',
   },
   rowItem: {
     marginRight: '12px',
-    cursor: 'pointer'
+    cursor: 'pointer',
   },
   active: {
     color: color.primary(),
-    borderBottom: `2px solid ${color.primary()}`
+    borderBottom: `2px solid ${color.primary()}`,
   },
   uploadInput: {
-    marginTop: '12px'
+    marginTop: '12px',
   },
   error: {
     marginTop: '12px',
-    color: 'red'
+    color: 'red',
   },
   deleteIcon: {
-    marginLeft: '12px'
-  }
+    marginLeft: '12px',
+  },
 });
 
 export default withStyles(styles)(MediaDialog);

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

@@ -2,7 +2,7 @@ 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',
@@ -11,7 +11,7 @@ const useStyles = withStyles(theme => ({
     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',
@@ -20,11 +20,11 @@ const useStyles = withStyles(theme => ({
     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

@@ -5,12 +5,12 @@ import { withStyles } from '@material-ui/core/styles';
 
 const useStyles = withStyles(() => ({
   root: {
-    position: 'relative'
+    position: 'relative',
   },
   editor: {
     display: 'inline-block',
-    overflow: 'hidden'
-  }
+    overflow: 'hidden',
+  },
 }));
 
 class MediaWrapper extends React.Component {
@@ -18,7 +18,7 @@ class MediaWrapper extends React.Component {
     classes: PropTypes.object,
     children: PropTypes.array,
     editor: PropTypes.bool,
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   };
 
   render() {
@@ -27,11 +27,11 @@ class MediaWrapper extends React.Component {
     return (
       <span
         className={classNames(classes.root, {
-          [classes.editor]: editor
+          [classes.editor]: editor,
         })}
         {...rest}
         style={{
-          width: width || 300
+          width: width || 300,
         }}
       >
         {children}

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 green'
+    border: 'solid 1px green',
   },
   incorrect: {
-    border: 'solid 1px red'
+    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,9 +119,7 @@ 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;
 });
@@ -139,20 +137,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 = {
@@ -164,7 +162,7 @@ export const tileSource = {
       id: props.targetId,
       value: props.value,
       instanceId: props.instanceId,
-      fromChoice: true
+      fromChoice: true,
     };
   },
   endDrag(props, monitor) {
@@ -178,10 +176,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);

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

@@ -9,8 +9,8 @@ export const onValueChange = (nodeProps, n, value) => {
   change.setNodeByKey(n.key, {
     data: {
       ...value,
-      index: n.data.get('index')
-    }
+      index: n.data.get('index'),
+    },
   });
 
   nodeProps.editor.props.onChange(change, () => {
@@ -21,14 +21,12 @@ export const onValueChange = (nodeProps, n, value) => {
 export const onRemoveResponse = (nodeProps, value) => {
   const val = nodeProps.editor.value;
   const change = val.change();
-  const dragInTheBlank = val.document.findDescendant(
-    n => n.data && n.data.get('index') === value.index
-  );
+  const dragInTheBlank = val.document.findDescendant((n) => n.data && n.data.get('index') === value.index);
 
   change.setNodeByKey(dragInTheBlank.key, {
     data: {
-      index: dragInTheBlank.data.get('index')
-    }
+      index: dragInTheBlank.data.get('index'),
+    },
   });
 
   nodeProps.editor.props.onChange(change, () => {
@@ -36,7 +34,7 @@ export const onRemoveResponse = (nodeProps, value) => {
   });
 };
 
-const DragDrop = props => {
+const DragDrop = (props) => {
   const { attributes, data, n, nodeProps, opts } = props;
   const { inTable } = data;
 
@@ -49,7 +47,7 @@ const DragDrop = props => {
         minWidth: '178px',
         position: 'relative',
         margin: inTable ? '10px' : '0 10px',
-        cursor: 'pointer'
+        cursor: 'pointer',
       }}
     >
       <DragDropTile
@@ -58,8 +56,8 @@ const DragDrop = props => {
         targetId="0"
         value={data}
         duplicates={opts.options.duplicates}
-        onChange={value => onValueChange(nodeProps, n, value)}
-        removeResponse={value => onRemoveResponse(nodeProps, value)}
+        onChange={(value) => onValueChange(nodeProps, n, value)}
+        removeResponse={(value) => onRemoveResponse(nodeProps, value)}
       >
         {nodeProps.children}
       </DragDropTile>
@@ -72,7 +70,7 @@ DragDrop.propTypes = {
   data: PropTypes.object,
   n: PropTypes.object,
   nodeProps: PropTypes.object,
-  opts: PropTypes.object
+  opts: PropTypes.object,
 };
 
 export default DragDrop;

package/src/plugins/respArea/explicit-constructed-response/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ExplicitConstructedResponse = props => {
+const ExplicitConstructedResponse = (props) => {
   const { attributes, value, error } = props;
 
   return (
@@ -13,7 +13,7 @@ const ExplicitConstructedResponse = props => {
         minWidth: '178px',
         position: 'relative',
         margin: '0 5px',
-        cursor: 'pointer'
+        cursor: 'pointer',
       }}
     >
       <div
@@ -27,10 +27,10 @@ const ExplicitConstructedResponse = props => {
           boxSizing: 'border-box',
           borderRadius: '3px',
           overflow: 'hidden',
-          padding: '8px'
+          padding: '8px',
         }}
         dangerouslySetInnerHTML={{
-          __html: value || '<div>&nbsp;</div>'
+          __html: value || '<div>&nbsp;</div>',
         }}
       />
     </span>
@@ -39,7 +39,7 @@ const ExplicitConstructedResponse = props => {
 
 ExplicitConstructedResponse.propTypes = {
   attributes: PropTypes.object,
-  value: PropTypes.string
+  value: PropTypes.string,
 };
 
 export default ExplicitConstructedResponse;