@pie-element/ebsr 6.6.3-next.1085 → 6.6.3-next.1092

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

@@ -1,284 +0,0 @@
-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

@@ -1,372 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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);