@pie-lib/editable-html 9.1.6 → 9.2.0

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

@@ -1,14 +1,20 @@
 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 Button from '@material-ui/core/Button';
 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';
 
 const log = debug('@pie-lib:editable-html:plugins:media:dialog');
 
@@ -75,6 +81,10 @@ export class MediaDialog extends React.Component {
     edit: PropTypes.bool,
     disablePortal: PropTypes.bool,
     handleClose: PropTypes.func,
+    uploadSoundSupport: PropTypes.shape({
+      add: PropTypes.func,
+      delete: PropTypes.func
+    }),
     type: PropTypes.string,
     src: PropTypes.string,
     url: PropTypes.string,
@@ -98,7 +108,13 @@ export class MediaDialog extends React.Component {
       height: height || 315,
       invalid: false,
       starts: starts || 0,
-      width: width || 560
+      width: width || 560,
+      tabValue: 0,
+      fileUpload: {
+        loading: false,
+        url: '',
+        error: null
+      }
     };
   }
 
@@ -220,13 +236,20 @@ export class MediaDialog extends React.Component {
 
   handleDone = val => {
     const { handleClose } = this.props;
+    const { tabValue, fileUpload } = this.state;
+    const isInsertURL = tabValue === 0;
 
     if (!val) {
+      if (fileUpload.url) {
+        this.handleRemoveFile();
+      }
+
       handleClose(val);
-    } else {
+    } else if (isInsertURL) {
       const { ends, height, url, urlToUse, formattedUrl, starts, width } = this.state;
 
       handleClose(val, {
+        tag: 'iframe',
         ends,
         height,
         starts,
@@ -235,13 +258,112 @@ export class MediaDialog extends React.Component {
         urlToUse,
         src: formattedUrl
       });
+    } else {
+      handleClose(val, {
+        tag: 'audio',
+        src: fileUpload.url
+      });
     }
   };
 
+  handleUploadFile = async e => {
+    e.preventDefault();
+
+    this.setState({
+      fileUpload: {
+        ...this.state.fileUpload,
+        error: null,
+        loading: true
+      }
+    });
+
+    const fileChosen = e.target.files[0];
+
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const dataURL = reader.result;
+
+      this.setState({
+        fileUpload: {
+          ...this.state.fileUpload,
+          url: dataURL
+        }
+      });
+    };
+    reader.readAsDataURL(fileChosen);
+
+    this.props.uploadSoundSupport.add({
+      fileChosen,
+      done: (err, src) => {
+        log('done: err:', err);
+        if (err) {
+          //eslint-disable-next-line
+          console.log(err);
+          this.setState({
+            fileUpload: {
+              ...this.state.fileUpload,
+              loading: false,
+              error: err
+            }
+          });
+        } else {
+          this.setState({
+            fileUpload: {
+              ...this.state.fileUpload,
+              loading: false,
+              url: src
+            }
+          });
+        }
+      }
+    });
+  };
+
+  handleRemoveFile = async () => {
+    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
+          }
+        });
+      }
+    });
+
+    // we should put it inside uploadSoundSupport.delete but we can leave it here for testing purposes
+    this.setState({
+      fileUpload: {
+        ...this.state.fileUpload,
+        loading: false,
+        url: ''
+      }
+    });
+  };
+
   render() {
-    const { classes, open, disablePortal, type, edit } = this.props;
-    const { ends, height, invalid, starts, width, url, formattedUrl, updating } = this.state;
+    const { classes, open, disablePortal, type, edit, uploadSoundSupport } = this.props;
+    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;
 
     return (
       <Dialog
@@ -255,103 +377,155 @@ export class MediaDialog extends React.Component {
       >
         <DialogTitle id="form-dialog-title">Insert {typeMap[type]}</DialogTitle>
         <DialogContent>
-          <DialogContentText>
-            {type === 'video' ? 'Insert YouTube or Vimeo URL' : 'Insert SoundCloud URL'}
-          </DialogContentText>
-          <TextField
-            autoFocus
-            error={invalid}
-            helperText={invalid ? 'Invalid URL' : ''}
-            margin="dense"
-            id="name"
-            label="URL"
-            placeholder={`Paste URL of ${type}...`}
-            type="text"
-            onChange={this.urlChange}
-            value={url}
-            fullWidth
-          />
-          {type === 'video' && (
-            <DialogContent
-              classes={{
-                root: classes.properties
-              }}
-            >
-              <DialogContentText>Video Properties</DialogContentText>
-              <TextField
-                autoFocus
-                margin="dense"
-                id="width"
-                label="Width"
-                type="number"
-                placeholder="Width"
-                value={width}
-                onChange={this.changeHandler('width')}
-              />
-              <TextField
-                autoFocus
-                margin="dense"
-                id="height"
-                label="Height"
-                type="number"
-                placeholder="Height"
-                value={height}
-                onChange={this.changeHandler('height')}
-              />
-            </DialogContent>
-          )}
-          {formattedUrl && (
-            <iframe
-              width={width}
-              height={height}
-              src={formattedUrl}
-              frameBorder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-            />
-          )}
-          {type === 'video' && (formattedUrl || updating) && !invalid && (
-            <React.Fragment>
-              <DialogContent
-                classes={{
-                  root: classes.properties
+          <div>
+            <div className={classes.row}>
+              <MuiTabs
+                indicatorColor="primary"
+                value={tabValue}
+                onChange={(event, value) => {
+                  this.setState({ tabValue: value });
                 }}
               >
+                <MuiTab
+                  label={type === 'video' ? 'Insert YouTube or Vimeo URL' : 'Insert SoundCloud URL'}
+                />
+                {uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video' ? (
+                  <MuiTab label="Upload file" />
+                ) : null}
+              </MuiTabs>
+            </div>
+            {isInsertURL && (
+              <div>
                 <TextField
                   autoFocus
+                  error={invalid}
+                  helperText={invalid ? 'Invalid URL' : ''}
                   margin="dense"
-                  id="starts"
-                  label="Starts"
-                  type="number"
-                  placeholder="Starts"
-                  value={starts}
-                  onChange={this.changeHandler('starts')}
+                  id="name"
+                  label="URL"
+                  placeholder={`Paste URL of ${type}...`}
+                  type="text"
+                  onChange={this.urlChange}
+                  value={url}
+                  fullWidth
                 />
-                {isYoutube && (
-                  <TextField
-                    autoFocus
-                    margin="dense"
-                    id="ends"
-                    label="Ends"
-                    type="number"
-                    placeholder="Ends"
-                    value={ends}
-                    onChange={this.changeHandler('ends')}
+                {type === 'video' && (
+                  <DialogContent
+                    classes={{
+                      root: classes.properties
+                    }}
+                  >
+                    <DialogContentText>Video Properties</DialogContentText>
+                    <TextField
+                      autoFocus
+                      margin="dense"
+                      id="width"
+                      label="Width"
+                      type="number"
+                      placeholder="Width"
+                      value={width}
+                      onChange={this.changeHandler('width')}
+                    />
+                    <TextField
+                      autoFocus
+                      margin="dense"
+                      id="height"
+                      label="Height"
+                      type="number"
+                      placeholder="Height"
+                      value={height}
+                      onChange={this.changeHandler('height')}
+                    />
+                  </DialogContent>
+                )}
+                {formattedUrl && (
+                  <iframe
+                    width={width}
+                    height={height}
+                    src={formattedUrl}
+                    frameBorder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
                   />
                 )}
-              </DialogContent>
-            </React.Fragment>
-          )}
+                {type === 'video' && (formattedUrl || updating) && !invalid && (
+                  <React.Fragment>
+                    <DialogContent
+                      classes={{
+                        root: classes.properties
+                      }}
+                    >
+                      <TextField
+                        autoFocus
+                        margin="dense"
+                        id="starts"
+                        label="Starts"
+                        type="number"
+                        placeholder="Starts"
+                        value={starts}
+                        onChange={this.changeHandler('starts')}
+                      />
+                      {isYoutube && (
+                        <TextField
+                          autoFocus
+                          margin="dense"
+                          id="ends"
+                          label="Ends"
+                          type="number"
+                          placeholder="Ends"
+                          value={ends}
+                          onChange={this.changeHandler('ends')}
+                        />
+                      )}
+                    </DialogContent>
+                  </React.Fragment>
+                )}
+              </div>
+            )}
+            {isUploadMedia && (
+              <div className={classes.uploadInput}>
+                <div>
+                  {fileUpload.url ? (
+                    <>
+                      <div className={classes.row}>
+                        <audio controls="controls">
+                          <source type="audio/mp3" src={fileUpload.url} />
+                        </audio>
+                        <IconButton
+                          aria-label="delete"
+                          className={classes.deleteIcon}
+                          onClick={this.handleRemoveFile}
+                        >
+                          <ActionDelete />
+                        </IconButton>
+                      </div>
+                      {fileUpload.loading ? (
+                        <Typography variant="subheading">Loading...</Typography>
+                      ) : null}
+                    </>
+                  ) : !fileUpload.loading ? (
+                    <input
+                      accept="audio/*"
+                      className={classes.input}
+                      onChange={this.handleUploadFile}
+                      type="file"
+                    />
+                  ) : null}
+                  {!!fileUpload.error && (
+                    <Typography className={classes.error} variant="caption">
+                      {fileUpload.error}
+                    </Typography>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
         </DialogContent>
         <DialogActions>
           <Button onClick={() => this.handleDone(false)} color="primary">
             Cancel
           </Button>
-          <Button
-            disabled={invalid || url === null || url === undefined}
-            onClick={() => this.handleDone(true)}
-            color="primary"
-          >
+          <Button disabled={submitIsDisabled} onClick={() => this.handleDone(true)} color="primary">
             {edit ? 'Update' : 'Insert'}
           </Button>
         </DialogActions>
@@ -366,6 +540,28 @@ const styles = () => ({
   },
   properties: {
     padding: 0
+  },
+  row: {
+    display: 'flex',
+    flexDirection: 'space-between'
+  },
+  rowItem: {
+    marginRight: '12px',
+    cursor: 'pointer'
+  },
+  active: {
+    color: color.primary(),
+    borderBottom: `2px solid ${color.primary()}`
+  },
+  uploadInput: {
+    marginTop: '12px'
+  },
+  error: {
+    marginTop: '12px',
+    color: 'red'
+  },
+  deleteIcon: {
+    marginLeft: '12px'
   }
 });
 

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

@@ -31,17 +31,20 @@ class MediaToolbar extends React.Component {
   static propTypes = {
     classes: PropTypes.object,
     onEdit: PropTypes.func,
+    hideEdit: PropTypes.bool,
     onRemove: PropTypes.func
   };
 
   render() {
-    const { classes, onEdit, onRemove } = this.props;
+    const { classes, hideEdit, onEdit, onRemove } = this.props;
 
     return (
       <span className={classes.root}>
-        <span className={classes.editContainer} onClick={onEdit}>
-          Edit Settings
-        </span>
+        {hideEdit ? null : (
+          <span className={classes.editContainer} onClick={onEdit}>
+            Edit Settings
+          </span>
+        )}
         <span className={classes.removeContainer} onClick={onRemove}>
           Remove
         </span>

package/src/plugins/toolbar/editor-and-toolbar.jsx

@@ -23,6 +23,7 @@ export class EditorAndToolbar extends React.Component {
     toolbarRef: PropTypes.func,
     focusedNode: SlatePropTypes.node,
     readOnly: PropTypes.bool,
+    disableScrollbar: PropTypes.bool,
     disableUnderline: PropTypes.bool,
     autoWidth: PropTypes.bool,
     classes: PropTypes.object.isRequired,
@@ -55,6 +56,7 @@ export class EditorAndToolbar extends React.Component {
       focusedNode,
       autoWidth,
       readOnly,
+      disableScrollbar,
       disableUnderline,
       pluginProps,
       toolbarOpts,
@@ -63,12 +65,12 @@ export class EditorAndToolbar extends React.Component {
     } = this.props;
 
     const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);
-    const holderNames = classNames(
-      classes.editorHolder,
-      inFocus && classes.editorInFocus,
-      readOnly && classes.readOnly,
-      disableUnderline && classes.disabledUnderline
-    );
+    const holderNames = classNames(classes.editorHolder, {
+      [classes.editorInFocus]: inFocus,
+      [classes.readOnly]: readOnly,
+      [classes.disabledUnderline]: disableUnderline,
+      [classes.disabledScrollbar]: disableScrollbar
+    });
     let clonedChildren = children;
 
     if (typeof children !== 'string') {
@@ -197,7 +199,13 @@ const style = {
       display: 'none'
     }
   },
-
+  disabledScrollbar: {
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    },
+    scrollbarWidth: 'none',
+    '-ms-overflow-style': 'none'
+  },
   readOnly: {
     '&::before': {
       background: 'transparent',

package/src/plugins/toolbar/index.jsx

@@ -13,6 +13,7 @@ export default function ToolbarPlugin(opts) {
       <EditorAndToolbar
         {...props}
         mainEditorRef={opts.mainEditorRef}
+        disableScrollbar={opts.disableScrollbar}
         disableUnderline={opts.disableUnderline}
         onDone={opts.onDone}
       />