@pie-element/ebsr 6.6.2 → 6.6.3-next.1008

package/configure/node_modules/@pie-lib/editable-html/src/plugins/media/index.jsx

@@ -0,0 +1,284 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Inline } from 'slate';
+import TheatersIcon from '@material-ui/icons/Theaters';
+import VolumeUpIcon from '@material-ui/icons/VolumeUp';
+import debug from 'debug';
+
+import MediaDialog from './media-dialog';
+import MediaToolbar from './media-toolbar';
+import MediaWrapper from './media-wrapper';
+
+const log = debug('@pie-lib:editable-html:plugins:image');
+
+const removeDialogs = () => {
+  const prevDialogs = document.querySelectorAll('.insert-media-dialog');
+
+  prevDialogs.forEach(s => s.remove());
+};
+
+export const insertDialog = props => {
+  const newEl = document.createElement('div');
+  const { type, callback, ...rest } = props;
+  const initialBodyOverflow = document.body.style.overflow;
+
+  removeDialogs();
+
+  newEl.className = 'insert-media-dialog';
+  document.body.style.overflow = 'hidden';
+
+  const handleClose = (val, data) => {
+    callback(val, data);
+    newEl.remove();
+    document.body.style.overflow = initialBodyOverflow;
+  };
+
+  const el = (
+    <MediaDialog {...rest} type={type} disablePortal={true} open={true} handleClose={handleClose} />
+  );
+
+  ReactDOM.render(el, newEl);
+
+  document.body.appendChild(newEl);
+};
+
+const types = ['audio', 'video'];
+
+export default function MediaPlugin(type, opts) {
+  const toolbar = {
+    icon: type === 'audio' ? <VolumeUpIcon /> : <TheatersIcon />,
+    onClick: (value, onChange) => {
+      log('[toolbar] onClick');
+      const inline = Inline.create({
+        type: type,
+        isVoid: true,
+        data: {
+          editing: false,
+          ends: undefined,
+          height: undefined,
+          title: undefined,
+          starts: undefined,
+          src: undefined,
+          url: undefined,
+          width: undefined
+        }
+      });
+
+      const change = value.change().insertInline(inline);
+      onChange(change);
+      insertDialog({
+        type,
+        callback: (val, data) => {
+          const nodeIsThere = change.value.document.findDescendant(d => d.key === inline.key);
+
+          if (nodeIsThere) {
+            if (!val) {
+              const c = change.removeNodeByKey(inline.key);
+              onChange(c, () => opts.focus());
+            } else {
+              const c = change.setNodeByKey(inline.key, { data });
+              onChange(c, () => opts.focus('beginning', nodeIsThere));
+            }
+          } else {
+            opts.focus();
+          }
+        }
+      });
+    },
+    supports: node => node.object === 'inline' && node.type === type
+  };
+
+  return {
+    name: type,
+    toolbar,
+    deleteNode: (e, node, value, onChange) => {
+      e.preventDefault();
+      const change = value.change().removeNodeByKey(node.key);
+
+      onChange(change);
+    },
+    renderNode(props) {
+      if (props.node.type === type) {
+        const { node, key } = props;
+        const { data } = node;
+        const jsonData = data.toJSON();
+        const { src, height, width, editing, ...rest } = jsonData;
+        const handleEdit = () => {
+          const change = opts.createChange();
+          const c = change.setNodeByKey(key, {
+            data: {
+              ...jsonData,
+              editing: true
+            }
+          });
+
+          opts.onChange(c, () => {
+            insertDialog({
+              ...jsonData,
+              edit: true,
+              type,
+              callback: (val, data) => {
+                const { key } = node;
+
+                const nodeIsThere = change.value.document.findDescendant(
+                  d => d.type === type && d.data.get('editing')
+                );
+
+                if (nodeIsThere && val) {
+                  const c = change.setNodeByKey(key, { data, editing: false });
+                  opts.onChange(c, () => opts.focus('beginning', nodeIsThere));
+                } else {
+                  opts.focus();
+                }
+              }
+            });
+          });
+        };
+        const handleDelete = () => {
+          const change = opts.createChange();
+          const c = change.removeNodeByKey(node.key);
+
+          opts.onChange(c);
+        };
+        const style = {};
+
+        if (width) {
+          style.width = `${width}px`;
+        }
+
+        if (height) {
+          style.height = `${height}px`;
+        }
+
+        return (
+          <MediaWrapper editor data-type={type} width={style.width} {...rest}>
+            <iframe
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+              src={src}
+              editing={editing ? 1 : 0}
+              {...rest}
+              {...style}
+            />
+            <MediaToolbar onEdit={handleEdit} onRemove={handleDelete} />
+          </MediaWrapper>
+        );
+      }
+    },
+    normalizeNode: node => {
+      const textNodeMap = {};
+      const updateNodesArray = [];
+      let index = 0;
+
+      if (node.object !== 'document') return;
+
+      node.findDescendant(d => {
+        if (d.object === 'text') {
+          textNodeMap[index] = d;
+        }
+
+        const isMedia = types.indexOf(d.type) >= 0;
+
+        if (isMedia) {
+          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {
+            updateNodesArray.push(textNodeMap[index - 1]);
+          }
+        }
+
+        index++;
+      });
+
+      if (!updateNodesArray.length) return;
+
+      return change => {
+        change.withoutNormalization(() => {
+          updateNodesArray.forEach(n => change.insertTextByKey(n.key, 0, ' '));
+        });
+      };
+    }
+  };
+}
+
+export const serialization = {
+  deserialize(el /*, next*/) {
+    const type = el.dataset && el.dataset.type;
+    const typeIndex = types.indexOf(type);
+
+    if (typeIndex < 0) return;
+
+    const { ends, starts, title, editing, url } = el.dataset || {};
+
+    log('deserialize: ', name);
+    const width = parseInt(el.getAttribute('width'), 10) || null;
+    const height = parseInt(el.getAttribute('height'), 10) || null;
+
+    const out = {
+      object: 'inline',
+      type: type,
+      isVoid: true,
+      data: {
+        src: el.getAttribute('src'),
+        editing,
+        ends,
+        height,
+        starts,
+        title,
+        width,
+        url
+      }
+    };
+    log('return object: ', out);
+    return out;
+  },
+  serialize(object /*, children*/) {
+    const typeIndex = types.indexOf(object.type);
+
+    if (typeIndex < 0) return;
+
+    const type = types[typeIndex];
+
+    const { data } = object;
+    const editing = data.get('editing');
+    const ends = data.get('ends');
+    const src = data.get('src');
+    const starts = data.get('starts');
+    const title = data.get('title');
+    const width = data.get('width');
+    const height = data.get('height');
+    const url = data.get('url');
+    const style = {};
+
+    if (width) {
+      style.width = `${width}px`;
+    }
+
+    if (height) {
+      style.height = `${height}px`;
+    }
+
+    const divProps = {
+      'data-editing': editing,
+      'data-ends': ends,
+      'data-starts': starts,
+      'data-title': title,
+      'data-url': url
+    };
+    const props = {
+      ...style,
+      src
+    };
+
+    return (
+      <iframe
+        data-type={type}
+        src={src}
+        {...divProps}
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+        {...props}
+      />
+    );
+  }
+};

package/configure/node_modules/@pie-lib/editable-html/src/plugins/media/media-dialog.js

@@ -0,0 +1,372 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import debug from 'debug';
+import { withStyles } from '@material-ui/core/styles';
+import Dialog from '@material-ui/core/Dialog';
+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';
+
+const log = debug('@pie-lib:editable-html:plugins:media:dialog');
+
+const matchYoutubeUrl = url => {
+  if (!url) {
+    return false;
+  }
+
+  const p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
+  if (url.match(p)) {
+    return url.match(p)[1];
+  }
+  return false;
+};
+
+const matchVimeoUrl = url =>
+  url &&
+  /(http|https)?:\/\/(www\.)?(player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|)(video\/)?(\d+)(?:|\/\?)/.test(
+    url
+  );
+
+const matchSoundCloudUrl = url => {
+  if (!url) {
+    return false;
+  }
+
+  const regexp = /^https?:\/\/(soundcloud\.com|snd\.sc)\/(.*)$/;
+  return url.match(regexp) && url.match(regexp)[2];
+};
+
+const makeApiRequest = url => {
+  return new Promise(resolve => {
+    try {
+      fetch(`https://soundcloud.com/oembed?format=json&url=${url}`)
+        .then(response => response.json())
+        .then(json => {
+          const d = document.createElement('div');
+
+          d.innerHTML = json.html;
+
+          const iframe = d.querySelector('iframe');
+
+          resolve(iframe.src);
+        })
+        .catch(err => {
+          resolve('');
+          log(err);
+        });
+    } catch (err) {
+      resolve('');
+    }
+  });
+};
+
+const typeMap = {
+  video: 'Video',
+  audio: 'Audio'
+};
+
+export class MediaDialog extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    open: PropTypes.bool,
+    edit: PropTypes.bool,
+    disablePortal: PropTypes.bool,
+    handleClose: PropTypes.func,
+    type: PropTypes.string,
+    src: PropTypes.string,
+    url: PropTypes.string,
+    urlToUse: PropTypes.string,
+    starts: PropTypes.number,
+    ends: PropTypes.number,
+    height: PropTypes.number,
+    width: PropTypes.number
+  };
+
+  constructor(props) {
+    super(props);
+
+    const { src, starts, ends, height, url, urlToUse, width } = props;
+
+    this.state = {
+      ends: ends || 0,
+      url: url,
+      urlToUse: urlToUse,
+      formattedUrl: src,
+      height: height || 315,
+      invalid: false,
+      starts: starts || 0,
+      width: width || 560
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.url) {
+      this.urlChange({
+        target: {
+          value: this.props.url
+        }
+      });
+    }
+  }
+
+  formatUrl = () => {
+    const { url, urlToUse, starts, ends } = this.state;
+    const isYoutube = matchYoutubeUrl(url);
+    const isVimeo = matchVimeoUrl(url);
+    let formattedUrl = urlToUse;
+
+    if ((isYoutube || isVimeo) && urlToUse) {
+      const params = [];
+
+      let paramName;
+      let paramStart;
+
+      switch (true) {
+        case isVimeo:
+          paramName = 't';
+          paramStart = '#';
+          break;
+        case isYoutube:
+          paramName = 'start';
+          paramStart = '?';
+          break;
+        default:
+          paramName = 'start';
+          paramStart = '?';
+      }
+
+      if (starts) {
+        params.push(`${paramName}=${starts}`);
+      }
+
+      if (ends) {
+        params.push(`end=${ends}`);
+      }
+
+      formattedUrl = `${urlToUse}${params.length ? paramStart : ''}${params.join('&')}`;
+    }
+
+    const callback = () => this.setState({ formattedUrl, updating: false });
+
+    this.setState({ formattedUrl: null, updating: true }, callback);
+  };
+
+  handleStateChange = newState => this.setState(newState, this.formatUrl);
+
+  urlChange = e => {
+    const { value } = e.target || {};
+    const { type } = this.props;
+
+    if (type && type === 'audio') {
+      if (matchSoundCloudUrl(value)) {
+        makeApiRequest(value)
+          .then(urlToUse => {
+            this.handleStateChange({
+              urlToUse,
+              invalid: !urlToUse,
+              url: value
+            });
+          })
+          .catch(log);
+
+        return;
+      }
+    } else if (type && type === 'video') {
+      if (matchYoutubeUrl(value)) {
+        const regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+        const match = value.match(regExp);
+        const id = match[2];
+        const urlToUse = `https://youtube.com/embed/${id}`;
+
+        log('is youtube');
+
+        this.handleStateChange({
+          urlToUse,
+          url: value,
+          invalid: false
+        });
+
+        return;
+      }
+
+      if (matchVimeoUrl(value)) {
+        const id = value.replace(/.*vimeo.com\/(.*)/g, '$1');
+        const urlToUse = `https://player.vimeo.com/video/${id}`;
+
+        log('is vimeo');
+
+        this.handleStateChange({
+          urlToUse,
+          url: value,
+          ends: null,
+          invalid: false
+        });
+
+        return;
+      }
+    }
+
+    this.handleStateChange({
+      urlToUse: null,
+      url: null,
+      invalid: true
+    });
+  };
+
+  changeHandler = type => e => this.handleStateChange({ [type]: e.target.value });
+
+  handleDone = val => {
+    const { handleClose } = this.props;
+
+    if (!val) {
+      handleClose(val);
+    } else {
+      const { ends, height, url, urlToUse, formattedUrl, starts, width } = this.state;
+
+      handleClose(val, {
+        ends,
+        height,
+        starts,
+        width,
+        url,
+        urlToUse,
+        src: formattedUrl
+      });
+    }
+  };
+
+  render() {
+    const { classes, open, disablePortal, type, edit } = this.props;
+    const { ends, height, invalid, starts, width, url, formattedUrl, updating } = this.state;
+    const isYoutube = matchYoutubeUrl(url);
+
+    return (
+      <Dialog
+        classes={{
+          paper: classes.paper
+        }}
+        disablePortal={disablePortal}
+        open={open}
+        onClose={() => this.handleDone(false)}
+        aria-labelledby="form-dialog-title"
+      >
+        <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
+                }}
+              >
+                <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>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => this.handleDone(false)} color="primary">
+            Cancel
+          </Button>
+          <Button
+            disabled={invalid || url === null || url === undefined}
+            onClick={() => this.handleDone(true)}
+            color="primary"
+          >
+            {edit ? 'Update' : 'Insert'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+}
+
+const styles = () => ({
+  paper: {
+    minWidth: '500px'
+  },
+  properties: {
+    padding: 0
+  }
+});
+
+export default withStyles(styles)(MediaDialog);

package/configure/node_modules/@pie-lib/editable-html/src/plugins/media/media-toolbar.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+
+const useStyles = withStyles(theme => ({
+  root: {
+    position: 'relative',
+    bottom: '5px',
+    left: 0,
+    width: '100%',
+    background: 'white',
+    display: 'inline-flex',
+    padding: '5px',
+    boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
+  },
+  editContainer: {
+    cursor: 'pointer',
+    flex: 3,
+    border: 'solid black',
+    textAlign: 'right',
+    borderWidth: '0 2px 0 0',
+    marginRight: '5px',
+    paddingRight: '5px'
+  },
+  removeContainer: {
+    cursor: 'pointer'
+  }
+}));
+
+class MediaToolbar extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    onEdit: PropTypes.func,
+    onRemove: PropTypes.func
+  };
+
+  render() {
+    const { classes, onEdit, onRemove } = this.props;
+
+    return (
+      <span className={classes.root}>
+        <span className={classes.editContainer} onClick={onEdit}>
+          Edit Settings
+        </span>
+        <span className={classes.removeContainer} onClick={onRemove}>
+          Remove
+        </span>
+      </span>
+    );
+  }
+}
+
+export default useStyles(MediaToolbar);