@pie-lib/editable-html 7.17.4-next.59 → 7.17.4-next.592

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: {
+        uploadIsLoading: false,
+        localUrl: '',
+        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.localUrl) {
+        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,89 @@ export class MediaDialog extends React.Component {
         urlToUse,
         src: formattedUrl
       });
+    } else {
+      handleClose(val, {
+        tag: 'audio',
+        src: fileUpload.localUrl
+      });
     }
   };
 
+  handleUploadFile = async e => {
+    e.preventDefault();
+
+    this.setState({
+      fileUpload: {
+        ...this.state.fileUpload,
+        uploadIsLoading: true
+      }
+    });
+
+    const fileChosen = e.target.files[0];
+
+    const reader = new FileReader();
+
+    this.setState({
+      fileUpload: {
+        ...this.state.fileUpload,
+        uploadIsLoading: true
+      }
+    });
+
+    reader.onload = () => {
+      const dataURL = reader.result;
+
+      this.setState({
+        fileUpload: {
+          ...this.state.fileUpload,
+          localUrl: dataURL,
+          uploadIsLoading: false
+        }
+      });
+    };
+    reader.readAsDataURL(fileChosen);
+
+    this.props.uploadSoundSupport.add({
+      fileChosen,
+      done: e => {
+        console.log('add done: ', e);
+      }
+    });
+  };
+
+  handleRemoveFile = async () => {
+    this.props.uploadSoundSupport.delete(this.state.fileUpload.localUrl, e => {
+      console.log('delete done', e);
+    });
+
+    this.setState({
+      fileUpload: {
+        ...this.state.fileUpload,
+        localUrl: ''
+      }
+    });
+  };
+
   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.localUrl;
 
     return (
       <Dialog
@@ -255,103 +354,154 @@ 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}>
+                {fileUpload.uploadIsLoading ? (
+                  <Typography variant="subheading">Loading...</Typography>
+                ) : (
+                  <div>
+                    {fileUpload.localUrl ? (
+                      <div className={classes.row}>
+                        <audio controls="controls">
+                          <source type="audio/mp3" src={fileUpload.localUrl} />
+                        </audio>
+                        <IconButton
+                          aria-label="delete"
+                          className={classes.deleteIcon}
+                          onClick={this.handleRemoveFile}
+                        >
+                          <ActionDelete />
+                        </IconButton>
+                      </div>
+                    ) : (
+                      <input
+                        accept="audio/*"
+                        className={classes.input}
+                        onChange={this.handleUploadFile}
+                        type="file"
+                      />
+                    )}
+                    {!!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}
-            onClick={() => this.handleDone(true)}
-            color="primary"
-          >
+          <Button disabled={submitIsDisabled} onClick={() => this.handleDone(true)} color="primary">
             {edit ? 'Update' : 'Insert'}
           </Button>
         </DialogActions>
@@ -366,6 +516,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/respArea/drag-in-the-blank/choice.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
 import { DragSource, DropTarget } from '@pie-lib/drag';
+import { color } from '@pie-lib/render-ui';
 import { renderMath } from '@pie-lib/math-rendering';
 import { withStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
@@ -20,6 +21,9 @@ const useStyles = withStyles(theme => ({
   },
   incorrect: {
     border: 'solid 1px red'
+  },
+  selected: {
+    border: `2px solid ${color.primaryDark()} !important`
   }
 }));
 
@@ -30,9 +34,32 @@ export class BlankContent extends React.Component {
     isDragging: PropTypes.bool,
     isOver: PropTypes.bool,
     dragItem: PropTypes.object,
-    value: PropTypes.object
+    value: PropTypes.object,
+    classes: PropTypes.object
   };
 
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleClick);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClick);
+  }
+
+  handleClick(event) {
+    const { classes } = this.props;
+
+    if (this.elementRef) {
+      this.elementRef.className = this.elementRef.contains(event.target) ? classes.selected : '';
+    }
+  }
+
   componentDidUpdate() {
     if (this.elementRef) {
       renderMath(this.elementRef);

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const ExplicitConstructedResponse = props => {
-  const { attributes, value } = props;
+  const { attributes, value, error } = props;
 
   return (
     <span
@@ -23,7 +23,7 @@ const ExplicitConstructedResponse = props => {
           minHeight: '36px',
           height: '36px',
           background: '#FFF',
-          border: '1px solid #C0C3CF',
+          border: `1px solid ${error ? 'red' : '#C0C3CF'}`,
           boxSizing: 'border-box',
           borderRadius: '3px',
           overflow: 'hidden',
@@ -39,7 +39,7 @@ const ExplicitConstructedResponse = props => {
 
 ExplicitConstructedResponse.propTypes = {
   attributes: PropTypes.object,
-  value: PropTypes.object
+  value: PropTypes.string
 };
 
 export default ExplicitConstructedResponse;

package/src/plugins/respArea/index.jsx

@@ -11,9 +11,16 @@ import { ToolbarIcon } from './icons';
 const log = debug('@pie-lib:editable-html:plugins:respArea');
 
 const lastIndexMap = {};
-const elTypesArray = ['inline_dropdown', 'explicit_constructed_response', 'drag_in_the_blank'];
+const elTypesMap = {
+  'inline-dropdown': 'inline_dropdown',
+  'explicit-constructed-response': 'explicit_constructed_response',
+  'drag-in-the-blank': 'drag_in_the_blank'
+};
+const elTypesArray = Object.values(elTypesMap);
 
 export default function ResponseAreaPlugin(opts) {
+  const isOfCurrentType = d => d.type === opts.type || d.type === elTypesMap[opts.type];
+
   const toolbar = {
     icon: <ToolbarIcon />,
     buttonStyles: {
@@ -22,6 +29,12 @@ export default function ResponseAreaPlugin(opts) {
     onClick: (value, onChange) => {
       log('[toolbar] onClick');
       const change = value.change();
+      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
+
+      if (currentRespAreaList.size >= opts.maxResponseAreas) {
+        return;
+      }
+
       const type = opts.type.replace(/-/g, '_');
       const prevIndex = lastIndexMap[type];
       const newIndex = prevIndex === 0 ? prevIndex : prevIndex + 1;
@@ -35,6 +48,10 @@ export default function ResponseAreaPlugin(opts) {
         } else {
           // If the markup is empty and there's no focus
           const lastText = value.document.getLastText();
+
+          if (!lastText) {
+            return;
+          }
           const parentNode = value.document.getParent(lastText.key);
 
           if (parentNode) {
@@ -66,7 +83,7 @@ export default function ResponseAreaPlugin(opts) {
     name: 'response_area',
     toolbar,
     filterPlugins: (node, plugins) => {
-      if (node.type === 'explicit_constructed_response') {
+      if (node.type === 'explicit_constructed_response' || node.type === 'drag_in_the_blank') {
         return [];
       }
 
@@ -84,8 +101,19 @@ export default function ResponseAreaPlugin(opts) {
 
       if (n.type === 'explicit_constructed_response') {
         const data = n.data.toJSON();
+        let error;
 
-        return <ExplicitConstructedResponse attributes={attributes} value={data.value} />;
+        if (opts.error) {
+          error = opts.error();
+        }
+
+        return (
+          <ExplicitConstructedResponse
+            attributes={attributes}
+            value={data.value}
+            error={error && error[data.index] && error[data.index][0]}
+          />
+        );
       }
 
       if (n.type === 'drag_in_the_blank') {
@@ -102,7 +130,7 @@ export default function ResponseAreaPlugin(opts) {
         return <InlineDropdown attributes={attributes} selectedItem={data.value} />;
       }
     },
-    onChange(change) {
+    onChange(change, editor) {
       const type = opts.type.replace(/-/g, '_');
 
       if (isUndefined(lastIndexMap[type])) {
@@ -118,41 +146,32 @@ export default function ResponseAreaPlugin(opts) {
           }
         });
       }
-    },
-    normalizeNode: node => {
-      if (node.object !== 'document') {
+
+      if (!editor.value) {
         return;
       }
 
-      const addSpacesArray = [];
+      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
+      const oldRespAreaList = editor.value.document.filterDescendants(isOfCurrentType);
 
-      const allElements = node.filterDescendants(d => elTypesArray.indexOf(d.type) >= 0);
+      if (currentRespAreaList.size >= opts.maxResponseAreas) {
+        toolbar.disabled = true;
+      } else {
+        toolbar.disabled = false;
+      }
 
-      allElements.forEach(el => {
-        const prevText = node.getPreviousText(el.key);
-        const lastCharIsNewLine = prevText.text[prevText.text.length - 1] === '\n';
+      const arrayToFilter =
+        oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
+      const arrayToUseForFilter =
+        arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
 
-        if (prevText.text.length === 0 || lastCharIsNewLine) {
-          addSpacesArray.push({
-            nr: lastCharIsNewLine ? 1 : 2,
-            key: prevText.key
-          });
-        }
-      });
+      const elementsWithChangedStatus = arrayToFilter.filter(
+        d => !arrayToUseForFilter.find(e => e.data.get('index') === d.data.get('index'))
+      );
 
-      if (!addSpacesArray.length) {
-        return;
+      if (elementsWithChangedStatus.size && oldRespAreaList.size > currentRespAreaList.size) {
+        opts.onHandleAreaChange(elementsWithChangedStatus);
       }
-
-      return change => {
-        change.withoutNormalization(() => {
-          addSpacesArray.forEach(({ key, nr }) => {
-            const node = change.value.document.getNode(key);
-
-            change.insertTextByKey(key, node.text.length, '\u00A0'.repeat(nr));
-          });
-        });
-      };
     },
     onDrop(event, change, editor) {
       const closestEl = event.target.closest('[data-key]');