@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 3.0.0-next.35

package/src/components/media/MediaDialog.jsx

@@ -1,596 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import debug from 'debug';
-import { styled } from '@mui/material/styles';
-import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
-import MuiTabs from '@mui/material/Tabs';
-import MuiTab from '@mui/material/Tab';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContent from '@mui/material/DialogContent';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogActions from '@mui/material/DialogActions';
-import TextField from '@mui/material/TextField';
-import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import ActionDelete from '@mui/icons-material/Delete';
-
-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 matchDriveUrl = (url) =>
-  url && /^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)/.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',
-};
-
-const tabsTypeMap = {
-  uploadFile: 'upload-file',
-  insertUrl: 'insert-url',
-};
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-  '& .MuiDialog-paper': {
-    minWidth: '500px',
-  },
-}));
-
-const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
-  padding: 0,
-}));
-
-const StyledRow = styled('div')(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'space-between',
-}));
-
-const StyledUploadInput = styled('div')(({ theme }) => ({
-  marginTop: theme.spacing(1.5),
-}));
-
-const StyledInput = styled('input')(({ theme }) => ({}));
-
-const StyledError = styled(Typography)(({ theme }) => ({
-  marginTop: theme.spacing(1.5),
-  color: theme.palette.error.main,
-}));
-
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  marginLeft: theme.spacing(1.5),
-}));
-
-export class MediaDialog extends React.Component {
-  static propTypes = {
-    open: PropTypes.bool,
-    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,
-    urlToUse: PropTypes.string,
-    starts: PropTypes.number,
-    ends: PropTypes.number,
-    height: PropTypes.number,
-    width: PropTypes.number,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const { ends, height, src, starts, type, uploadSoundSupport, url, urlToUse, width } = props;
-    const showUploadFile = uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video' && !src;
-
-    this.state = {
-      ends: ends || 0,
-      url: url,
-      urlToUse: urlToUse,
-      formattedUrl: src,
-      height: height || 315,
-      invalid: false,
-      starts: starts || 0,
-      width: width || 560,
-      // default selected tab should be upload file if available
-      tabValue: showUploadFile ? tabsTypeMap.uploadFile : tabsTypeMap.insertUrl,
-      fileUpload: {
-        error: null,
-        loading: false,
-        scheduled: false,
-        url: '',
-        mimeType: '',
-      },
-    };
-  }
-
-  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);
-
-  checkAudio = (value) => {
-    if (matchSoundCloudUrl(value)) {
-      makeApiRequest(value)
-        .then((urlToUse) => {
-          this.handleStateChange({
-            urlToUse,
-            invalid: !urlToUse,
-            url: value,
-          });
-        })
-        .catch(log);
-    }
-  };
-
-  checkVideo = (value) => {
-    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,
-      });
-    }
-
-    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,
-      });
-    }
-
-    if (matchDriveUrl(value)) {
-      // https://drive.google.com/file/d/11QkK_gUO068amNvZBm9cxZpKX74WYb8q/view
-      const id = value.replace(
-        /^https:\/\/drive\.google\.com\/(?:file\/d\/|drive\/(?:u\/\d+\/)?folders\/|uc\?id=)([a-zA-Z0-9_-]+)\/.*/,
-        '$1',
-      );
-      const urlToUse = `https://drive.google.com/file/d/${id}/preview`;
-
-      log('is google drive');
-
-      this.handleStateChange({
-        urlToUse,
-        url: value,
-        ends: null,
-        invalid: false,
-      });
-    }
-  };
-
-  urlChange = (e) => {
-    const { value } = e.target || {};
-    const { type } = this.props;
-
-    if (type && type === 'audio') {
-      this.checkAudio(value);
-      return;
-    } else if (type && type === 'video') {
-      this.checkVideo(value);
-      return;
-    }
-
-    this.handleStateChange({
-      urlToUse: null,
-      url: null,
-      invalid: true,
-    });
-  };
-
-  changeHandler = (type) => (e) => this.handleStateChange({ [type]: e.target.value });
-
-  handleDone = (val) => {
-    const { handleClose } = this.props;
-    const { tabValue, fileUpload } = this.state;
-    const isInsertURL = tabValue === tabsTypeMap.insertUrl;
-
-    if (!val) {
-      if (fileUpload.url) {
-        this.handleRemoveFile();
-      }
-
-      handleClose(val);
-      return;
-    }
-
-    if (isInsertURL) {
-      const { ends, height, url, urlToUse, formattedUrl, starts, width } = this.state;
-
-      handleClose(val, {
-        tag: 'iframe',
-        ends,
-        height,
-        starts,
-        width,
-        url,
-        urlToUse,
-        src: formattedUrl,
-      });
-      return;
-    }
-
-    if (!fileUpload.loading) {
-      handleClose(val, {
-        tag: 'audio',
-        src: fileUpload.url,
-      });
-      return;
-    }
-
-    this.setState({
-      fileUpload: {
-        ...fileUpload,
-        scheduled: true,
-      },
-    });
-  };
-
-  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,
-          mimeType: fileChosen.type,
-        },
-      });
-    };
-    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,
-              scheduled: false,
-              loading: false,
-              error: err,
-            },
-          });
-          return;
-        }
-
-        const { fileUpload } = this.state;
-        const callback = fileUpload && fileUpload.scheduled ? this.handleDone.bind(this, true) : undefined;
-
-        this.setState(
-          {
-            fileUpload: {
-              ...fileUpload,
-              scheduled: false,
-              loading: false,
-              url: src,
-            },
-          },
-          callback,
-        );
-      },
-    });
-  };
-
-  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: '',
-        mimeType: '',
-      },
-    });
-  };
-
-  render() {
-    const { open, disablePortal, type, edit, uploadSoundSupport } = this.props;
-    const { ends, height, invalid, starts, width, url, mimeType, formattedUrl, updating, tabValue, fileUpload } =
-      this.state;
-    const isYoutube = matchYoutubeUrl(url);
-    const isInsertURL = tabValue === tabsTypeMap.insertUrl;
-    const isUploadMedia = tabValue === tabsTypeMap.uploadFile;
-    const submitIsDisabled = isInsertURL
-      ? invalid || url === null || url === undefined
-      : !fileUpload.url || fileUpload.scheduled;
-    const showUploadFile = uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video';
-
-    return (
-      <StyledDialog
-        disablePortal={disablePortal}
-        open={open}
-        onClose={() => this.handleDone(false)}
-        aria-labelledby="form-dialog-title"
-      >
-        <DialogTitle id="form-dialog-title">Insert {typeMap[type]}</DialogTitle>
-        <DialogContent>
-          <div>
-            <StyledRow>
-              <MuiTabs
-                indicatorColor="primary"
-                value={tabValue}
-                onChange={(event, value) => {
-                  this.setState({ tabValue: value });
-                }}
-              >
-                {showUploadFile ? <MuiTab value={tabsTypeMap.uploadFile} label="Upload file" /> : null}
-                <MuiTab
-                  value={tabsTypeMap.insertUrl}
-                  label={type === 'video' ? 'Insert YouTube, Vimeo, or Google Drive URL' : 'Insert SoundCloud URL'}
-                />
-              </MuiTabs>
-            </StyledRow>
-            {isInsertURL && (
-              <div>
-                <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' && (
-                  <StyledDialogContent>
-                    <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')}
-                    />
-                  </StyledDialogContent>
-                )}
-                {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>
-                    <StyledDialogContent>
-                      <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')}
-                        />
-                      )}
-                    </StyledDialogContent>
-                  </React.Fragment>
-                )}
-              </div>
-            )}
-            {isUploadMedia && (
-              <StyledUploadInput>
-                <div>
-                  {fileUpload.url ? (
-                    <>
-                      <StyledRow>
-                        <audio controls="controls" controlsList="nodownload">
-                          <source type={mimeType} src={fileUpload.url} />
-                        </audio>
-                        <StyledIconButton aria-label="delete" onClick={this.handleRemoveFile}>
-                          <ActionDelete />
-                        </StyledIconButton>
-                      </StyledRow>
-                      {!fileUpload.scheduled && fileUpload.loading ? (
-                        <Typography variant="subheading">Loading...</Typography>
-                      ) : null}
-                      {fileUpload.scheduled ? (
-                        <Typography variant="subheading">
-                          Waiting for Upload to finish, then inserting item...
-                        </Typography>
-                      ) : null}
-                    </>
-                  ) : !fileUpload.loading ? (
-                    <StyledInput accept="audio/*" onChange={this.handleUploadFile} type="file" />
-                  ) : null}
-                  {!!fileUpload.error && <StyledError variant="caption">{fileUpload.error}</StyledError>}
-                </div>
-              </StyledUploadInput>
-            )}
-          </div>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => this.handleDone(false)} color="primary">
-            Cancel
-          </Button>
-          <Button disabled={submitIsDisabled} onClick={() => this.handleDone(true)} color="primary">
-            {edit ? 'Update' : 'Insert'}
-          </Button>
-        </DialogActions>
-      </StyledDialog>
-    );
-  }
-}
-
-export default MediaDialog;

package/src/components/media/MediaToolbar.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-
-const StyledRoot = styled('span')(({ theme }) => ({
-  position: 'relative',
-  bottom: '5px',
-  left: 0,
-  width: '100%',
-  background: theme.palette.common.white,
-  display: 'inline-flex',
-  padding: '5px',
-  boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-}));
-
-const StyledEditContainer = styled('span')(({ theme }) => ({
-  cursor: 'pointer',
-  flex: 3,
-  border: `solid ${theme.palette.common.black}`,
-  textAlign: 'right',
-  borderWidth: '0 2px 0 0',
-  marginRight: '5px',
-  paddingRight: '5px',
-}));
-
-const StyledRemoveContainer = styled('span')({
-  cursor: 'pointer',
-});
-
-class MediaToolbar extends React.Component {
-  static propTypes = {
-    onEdit: PropTypes.func,
-    hideEdit: PropTypes.bool,
-    onRemove: PropTypes.func,
-  };
-
-  render() {
-    const { hideEdit, onEdit, onRemove } = this.props;
-
-    return (
-      <StyledRoot>
-        {hideEdit ? null : <StyledEditContainer onClick={onEdit}>Edit Settings</StyledEditContainer>}
-        <StyledRemoveContainer onClick={onRemove}>Remove</StyledRemoveContainer>
-      </StyledRoot>
-    );
-  }
-}
-
-export default MediaToolbar;

package/src/components/media/MediaWrapper.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-
-const StyledWrapper = styled('span', {
-  shouldForwardProp: (prop) => prop !== 'editor',
-})(({ editor }) => ({
-  position: 'relative',
-  ...(editor && {
-    display: 'inline-block',
-    overflow: 'hidden',
-  }),
-}));
-
-class MediaWrapper extends React.Component {
-  static propTypes = {
-    children: PropTypes.array,
-    editor: PropTypes.bool,
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  };
-
-  render() {
-    const { editor, children, width, ...rest } = this.props;
-
-    return (
-      <StyledWrapper
-        editor={editor}
-        {...rest}
-        style={{
-          width: width || 300,
-        }}
-      >
-        {children}
-      </StyledWrapper>
-    );
-  }
-}
-
-export default MediaWrapper;