@pie-lib/editable-html 10.0.0-beta.5 → 10.0.0-beta.7

package/src/plugins/media/index.jsx

@@ -5,7 +5,6 @@ import { jsx } from 'slate-hyperscript';
 import { ReactEditor } from 'slate-react';
 import TheatersIcon from '@material-ui/icons/Theaters';
 import VolumeUpIcon from '@material-ui/icons/VolumeUp';
-import get from 'lodash/get';
 import omit from 'lodash/omit';
 
 import debug from 'debug';
@@ -18,10 +17,10 @@ const log = debug('@pie-lib:editable-html:plugins:image');
 const removeDialogs = () => {
   const prevDialogs = document.querySelectorAll('.insert-media-dialog');
 
-  prevDialogs.forEach(s => s.remove());
+  prevDialogs.forEach((s) => s.remove());
 };
 
-export const insertDialog = props => {
+export const insertDialog = (props) => {
   const newEl = document.createElement('div');
   const { type, callback, opts, ...rest } = props;
   const initialBodyOverflow = document.body.style.overflow;
@@ -55,7 +54,7 @@ export const insertDialog = props => {
 
 const getNodeBy = (editor, callback) => {
   const descendants = SlateNode.descendants(editor, {
-    reverse: true
+    reverse: true,
   });
 
   for (const [descendant, descendantPath] of descendants) {
@@ -81,7 +80,7 @@ const types = ['audio', 'video'];
 export default function MediaPlugin(type, opts) {
   const toolbar = {
     icon: type === 'audio' ? <VolumeUpIcon /> : <TheatersIcon />,
-    onClick: editor => {
+    onClick: (editor) => {
       log('[toolbar] onClick');
       const inline = {
         type: type,
@@ -95,9 +94,9 @@ export default function MediaPlugin(type, opts) {
           starts: undefined,
           src: undefined,
           url: undefined,
-          width: undefined
+          width: undefined,
         },
-        children: [{ text: '' }]
+        children: [{ text: '' }],
       };
 
       editor.insertNode(inline);
@@ -112,55 +111,55 @@ export default function MediaPlugin(type, opts) {
             if (!val) {
               editor.apply({
                 type: 'remove_node',
-                path: nodePath
+                path: nodePath,
               });
             } else {
               editor.apply({
                 type: 'set_node',
                 path: nodePath,
                 properties: {
-                  data: inline.data
+                  data: inline.data,
                 },
                 newProperties: {
                   data: {
                     ...data,
-                    newMedia: false
-                  }
-                }
+                    newMedia: false,
+                  },
+                },
               });
             }
           }
 
           moveFocusAfterMedia(editor, inline);
-        }
+        },
       });
-    }
+    },
   };
 
   return {
     name: type,
     toolbar,
-    rules: editor => {
+    rules: (editor) => {
       const { isVoid, isInline } = editor;
 
-      editor.isVoid = element => {
+      editor.isVoid = (element) => {
         return ['audio', 'video'].includes(element.type) ? true : isVoid(element);
       };
 
-      editor.isInline = element => {
+      editor.isInline = (element) => {
         return ['audio', 'video'].includes(element.type) ? true : isInline(element);
       };
 
       return editor;
     },
-    supports: node => node.type === type,
+    supports: (node) => node.type === type,
     renderNode(props) {
       if (props.node.type === type) {
         const { node, editor } = props;
         const { data } = node;
         const { src, height, width, editing, tag, ...rest } = omit(data, ['newMedia', 'urlToUse']);
         const attributes = { ...rest, ...props.attributes };
-        const handleEdit = event => {
+        const handleEdit = (event) => {
           const nodeToEdit = ReactEditor.toSlateNode(editor, event.target);
           const nodePath = ReactEditor.findPath(editor, nodeToEdit);
 
@@ -168,14 +167,14 @@ export default function MediaPlugin(type, opts) {
             type: 'set_node',
             path: nodePath,
             properties: {
-              data: node.data
+              data: node.data,
             },
             newProperties: {
               data: {
                 ...data,
-                editing: true
-              }
-            }
+                editing: true,
+              },
+            },
           });
 
           insertDialog({
@@ -191,41 +190,43 @@ export default function MediaPlugin(type, opts) {
                   type: 'set_node',
                   path: nodePath,
                   properties: {
-                    data: node.data
+                    data: node.data,
                   },
                   newProperties: {
                     data: {
                       ...data,
-                      editing: true
-                    }
-                  }
+                      editing: true,
+                    },
+                  },
                 });
               }
-            }
+            },
           });
         };
-        const handleDelete = event => {
+        const handleDelete = (event) => {
           const nodeToEdit = ReactEditor.toSlateNode(editor, event.target);
           const nodePath = ReactEditor.findPath(editor, nodeToEdit);
 
           editor.apply({
             type: 'remove_node',
-            path: nodePath
+            path: nodePath,
           });
         };
-        const style = {};
+        const computedProps = {};
 
         if (width) {
-          style.width = `${width}px`;
+          computedProps.width = `${width}px`;
         }
 
         if (height) {
-          style.height = `${height}px`;
+          computedProps.height = `${height}px`;
         }
 
+        computedProps.editing = editing ? 1 : 0;
+
         if (tag === 'audio') {
           return (
-            <MediaWrapper data-type={type} width={style.width} attributes={attributes}>
+            <MediaWrapper data-type={type} width={computedProps.width} attributes={attributes}>
               <audio controls="controls">
                 <source type="audio/mp3" src={src} />
               </audio>
@@ -236,16 +237,15 @@ export default function MediaPlugin(type, opts) {
         }
 
         return (
-          <MediaWrapper data-type={type} width={style.width} attributes={attributes}>
+          <MediaWrapper data-type={type} width={computedProps.width} attributes={attributes}>
             <div contentEditable={false}>
               <iframe
                 frameBorder="0"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                 allowFullScreen
                 src={src}
-                editing={editing ? 1 : 0}
                 {...rest}
-                {...style}
+                {...computedProps}
               />
               <MediaToolbar onEdit={handleEdit} onRemove={handleDelete} />
             </div>
@@ -291,8 +291,8 @@ export const serialization = {
         starts,
         title,
         width,
-        url
-      }
+        url,
+      },
     });
 
     log('return object: ', out);
@@ -323,11 +323,11 @@ export const serialization = {
       'data-ends': ends,
       'data-starts': starts,
       'data-title': title,
-      'data-url': url
+      'data-url': url,
     };
     const props = {
       ...style,
-      src
+      src,
     };
 
     if (tag === 'audio') {
@@ -349,5 +349,5 @@ export const serialization = {
         {...props}
       />
     );
-  }
+  },
 };

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) {
@@ -114,8 +114,8 @@ export class MediaDialog extends React.Component {
       fileUpload: {
         loading: false,
         url: '',
-        error: null
-      }
+        error: null,
+      },
     };
   }
 
@@ -123,8 +123,8 @@ export class MediaDialog extends React.Component {
     if (this.props.url) {
       this.urlChange({
         target: {
-          value: this.props.url
-        }
+          value: this.props.url,
+        },
       });
     }
   }
@@ -171,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);
@@ -203,7 +203,7 @@ export class MediaDialog extends React.Component {
         this.handleStateChange({
           urlToUse,
           url: value || '',
-          invalid: false
+          invalid: false,
         });
 
         return;
@@ -219,7 +219,7 @@ export class MediaDialog extends React.Component {
           urlToUse,
           url: value || '',
           ends: null,
-          invalid: false
+          invalid: false,
         });
 
         return;
@@ -229,13 +229,13 @@ export class MediaDialog extends React.Component {
     this.handleStateChange({
       urlToUse: '',
       url: '',
-      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;
@@ -257,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];
@@ -288,8 +288,8 @@ export class MediaDialog extends React.Component {
       this.setState({
         fileUpload: {
           ...this.state.fileUpload,
-          url: dataURL
-        }
+          url: dataURL,
+        },
       });
     };
     reader.readAsDataURL(fileChosen);
@@ -305,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,
+          },
         });
       }
     });
@@ -340,36 +340,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}
@@ -387,9 +374,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}
@@ -413,7 +398,7 @@ export class MediaDialog extends React.Component {
                 {type === 'video' && (
                   <DialogContent
                     classes={{
-                      root: classes.properties
+                      root: classes.properties,
                     }}
                   >
                     <DialogContentText>Video Properties</DialogContentText>
@@ -453,7 +438,7 @@ export class MediaDialog extends React.Component {
                   <React.Fragment>
                     <DialogContent
                       classes={{
-                        root: classes.properties
+                        root: classes.properties,
                       }}
                     >
                       <TextField
@@ -492,25 +477,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">
@@ -535,35 +509,35 @@ export class MediaDialog extends React.Component {
   }
 }
 
-const styles = () => ({
+const styles = (theme) => ({
   paper: {
-    minWidth: '500px'
+    minWidth: '500px',
   },
   properties: {
-    padding: 0
+    padding: 0,
   },
   row: {
     display: 'flex',
-    flexDirection: 'space-between'
+    flexDirection: 'space-between',
   },
   rowItem: {
-    marginRight: '12px',
-    cursor: 'pointer'
+    marginRight: theme.spacing.unit * 1.5,
+    cursor: 'pointer',
   },
   active: {
     color: color.primary(),
-    borderBottom: `2px solid ${color.primary()}`
+    borderBottom: `2px solid ${color.primary()}`,
   },
   uploadInput: {
-    marginTop: '12px'
+    marginTop: theme.spacing.unit * 1.5,
   },
   error: {
-    marginTop: '12px',
-    color: 'red'
+    marginTop: theme.spacing.unit * 1.5,
+    color: theme.palette.error.main,
   },
   deleteIcon: {
-    marginLeft: '12px'
-  }
+    marginLeft: theme.spacing.unit * 1.5,
+  },
 });
 
 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: 'white',
+    background: theme.palette.common.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 black',
+    border: `solid ${theme.palette.common.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() {