@pie-element/ebsr 6.6.3-next.1075 → 6.6.3-next.1082

package/configure/node_modules/@pie-lib/editable-html/src/plugins/image/component.jsx

@@ -0,0 +1,318 @@
+import LinearProgress from '@material-ui/core/LinearProgress';
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import debug from 'debug';
+import { withStyles } from '@material-ui/core/styles';
+import SlatePropTypes from 'slate-prop-types';
+
+const log = debug('@pie-lib:editable-html:plugins:image:component');
+
+const size = s => (s ? `${s}px` : 'auto');
+
+export class Component extends React.Component {
+  static propTypes = {
+    node: SlatePropTypes.node.isRequired,
+    editor: PropTypes.shape({
+      change: PropTypes.func.isRequired,
+      value: PropTypes.object
+    }).isRequired,
+    classes: PropTypes.object.isRequired,
+    attributes: PropTypes.object,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number,
+  };
+
+  getWidth = percent => {
+    const multiplier = percent / 100;
+    return this.img.naturalWidth * multiplier;
+  };
+
+  getHeight = percent => {
+    const multiplier = percent / 100;
+    return this.img.naturalHeight * multiplier;
+  };
+
+  getPercentFromWidth = width => {
+    var floored = (width / this.img.naturalWidth) * 4;
+    return parseInt(floored.toFixed(0) * 25, 10);
+  };
+
+  applySizeData = () => {
+    const { node, editor } = this.props;
+
+    let update = node.data;
+
+    const w = update.get('width');
+    if (w) {
+      update = update.set('resizePercent', this.getPercentFromWidth(w));
+    }
+
+    log("[applySizeData] update: ", update);
+
+    if (!update.equals(node.data)) {
+      editor.change(c => c.setNodeByKey(node.key, { data: update }));
+    }
+  };
+
+  initialiseResize = () => {
+    window.addEventListener('mousemove', this.startResizing, false);
+    window.addEventListener('mouseup', this.stopResizing, false);
+  };
+
+  componentDidMount() {
+    this.applySizeData();
+
+    const resizeHandle = this.resize;
+
+    if (resizeHandle) {
+      resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
+    }
+  }
+
+  componentDidUpdate() {
+    this.applySizeData();
+  }
+
+  getSize(data) {
+    return {
+      width: size(data.get('width')),
+      height: size(data.get('height')),
+      objectFit: 'contain'
+    };
+  }
+
+  loadImage = () => {
+    let { maxImageWidth, maxImageHeight } = this.props || {};
+    maxImageWidth = maxImageWidth || 700;
+    maxImageHeight = maxImageHeight || 900;
+
+    const box = this.img;
+
+    //on first load
+    if (!box.style.width || box.style.width === 'auto') {
+      const dimensions = { width: box && box.naturalWidth || 100, height: box && box.naturalHeight || 100 };
+
+      const { width, height } = this.updateImageDimensions(
+        dimensions,
+        {
+          width: dimensions.width < maxImageWidth ? dimensions.width : maxImageWidth,
+          height: dimensions.height < maxImageHeight ? dimensions.height : maxImageHeight
+        },
+        true
+      );
+
+      box.style.width = `${width}px`;
+      box.style.height = `${height}px`;
+
+      this.setState({
+        dimensions: { height: height, width: width },
+      });
+
+      const { node, editor } = this.props;
+
+      let update = node.data;
+
+      update = update.set('width', width);
+      update = update.set('height', height);
+
+      if (!update.equals(node.data)) {
+        editor.change(c => c.setNodeByKey(node.key, { data: update }));
+      }
+    }
+  };
+
+  startResizing = (e) => {
+    const bounds = e.target.getBoundingClientRect();
+    const box = this.img;
+    const dimensions = { width: box && box.naturalWidth || 100, height: box && box.naturalHeight || 100};
+
+    const { width, height } = this.updateImageDimensions(
+      dimensions,
+      {
+        width: e.clientX - bounds.left,
+        height: e.clientY - bounds.top
+      },
+      true
+    );
+
+    const hasMinimumWidth = width > 50 && height > 50;
+    const hasDimensionsConstraints = width <= 700 && height <= 900;
+
+    if (hasMinimumWidth && hasDimensionsConstraints && box) {
+      box.style.width = `${width}px`;
+      box.style.height = `${height}px`;
+
+      this.setState({
+        dimensions: { height: height, width: width }
+      });
+
+      const { node, editor } = this.props;
+
+      let update = node.data;
+
+      update = update.set('width', width);
+      update = update.set('height', height);
+
+      if (!update.equals(node.data)) {
+        editor.change(c => c.setNodeByKey(node.key, { data: update }));
+      }
+    }
+  };
+
+  stopResizing = () => {
+    window.removeEventListener('mousemove', this.startResizing, false);
+    window.removeEventListener('mouseup', this.stopResizing, false);
+  };
+
+  updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {
+    // if we want to keep image aspect ratio
+    if (keepAspectRatio) {
+      const imageAspectRatio = initialDim.width / initialDim.height;
+
+      if (resizeType === 'height') {
+        // if we want to change image height => we update the width accordingly
+        return {
+          width: nextDim.height * imageAspectRatio,
+          height: nextDim.height
+        }
+      }
+
+      // if we want to change image width => we update the height accordingly
+      return {
+        width: nextDim.width,
+        height: nextDim.width / imageAspectRatio
+      }
+    }
+
+    // if we don't want to keep aspect ratio, we just update both values
+    return {
+      width: nextDim.width,
+      height: nextDim.height
+    }
+  };
+
+
+  render() {
+    const { node, editor, classes, attributes, onFocus } = this.props;
+    const active = editor.value.isFocused && editor.value.selection.hasEdgeIn(node);
+    const src = node.data.get('src');
+    const percent = node.data.get('percent');
+    const loaded = node.data.get('loaded') !== false;
+    const deleteStatus = node.data.get('deleteStatus');
+
+    log('[render] node.data:', node.data);
+
+    const size = this.getSize(node.data);
+
+    log('[render] style:', size);
+
+    const className = classNames(
+      classes.root,
+      !loaded && classes.loading,
+      deleteStatus === 'pending' && classes.pendingDelete
+    );
+
+    const progressClasses = classNames(classes.progress, loaded && classes.hideProgress);
+
+    return [
+      <span key={'sp1'}>&nbsp;</span>,
+      <div key={'comp'} onFocus={onFocus} className={className}>
+        <LinearProgress
+          mode="determinate"
+          value={percent > 0 ? percent : 0}
+          className={progressClasses}
+        />
+        <div className={classes.imageContainer}>
+          <img
+            {...attributes}
+            className={classNames(classes.image, active && classes.active)}
+            ref={ref => {
+              this.img = ref;
+            }}
+            src={src}
+            style={size}
+            onLoad={this.loadImage}
+          />
+          <div ref={ref => {
+            this.resize = ref;
+          }} className={classNames(classes.resize, 'resize')}/>
+        </div>
+      </div>,
+      <span key={'sp2'}>&nbsp;</span>
+    ];
+  }
+}
+
+const styles = theme => ({
+  portal: {
+    position: 'absolute',
+    opacity: 0,
+    transition: 'opacity 200ms linear'
+  },
+  floatingButtonRow: {
+    backgroundColor: 'white',
+    borderRadius: '1px',
+    display: 'flex',
+    padding: '10px',
+    border: 'solid 1px #eeeeee',
+    boxShadow:
+      '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)'
+  },
+  progress: {
+    position: 'absolute',
+    left: '0',
+    width: '100%',
+    top: '0%',
+    transition: 'opacity 200ms linear'
+  },
+  hideProgress: {
+    opacity: 0
+  },
+  loading: {
+    opacity: 0.3
+  },
+  pendingDelete: {
+    opacity: 0.3
+  },
+  root: {
+    position: 'relative',
+    border: 'solid 1px white',
+    display: 'inline-block',
+    transition: 'opacity 200ms linear'
+  },
+  delete: {
+    position: 'absolute',
+    right: 0
+  },
+  imageContainer: {
+    position: 'relative',
+    width: 'fit-content',
+    display: 'flex',
+    alignItems: 'center',
+
+    '&&:hover > .resize': {
+      display: 'block'
+    }
+  },
+  active: {
+    border: `solid 1px ${theme.palette.primary.main}`
+  },
+  resize: {
+    backgroundColor: theme.palette.primary.main,
+    cursor: 'col-resize',
+    height: '35px',
+    width: '5px',
+    borderRadius: 8,
+    marginLeft: '5px',
+    marginRight: '10px',
+    display: 'none'
+  },
+  drawableHeight: {
+    minHeight: 350,
+  },
+});
+
+export default withStyles(styles)(Component);

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

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import debug from 'debug';
+import { withStyles } from '@material-ui/core/styles';
+
+const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
+
+export class ImageToolbar extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired
+  };
+
+  render() {
+    // Don't remove toolbar since we will have other new buttons
+    const { classes } = this.props;
+    return (
+      <div className={classes.holder}>
+      </div>
+    );
+  }
+}
+
+const styles = theme => ({
+  holder: {
+    paddingLeft: theme.spacing.unit,
+    display: 'flex',
+    alignItems: 'center'
+  }
+});
+
+export default withStyles(styles)(ImageToolbar);

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

@@ -0,0 +1,182 @@
+import { Data, Inline } from 'slate';
+
+import Image from '@material-ui/icons/Image';
+import ImageComponent from './component';
+import ImageToolbar from './image-toolbar';
+import InsertImageHandler from './insert-image-handler';
+import React from 'react';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:plugins:image');
+
+export default function ImagePlugin(opts) {
+  const toolbar = opts.insertImageRequested && {
+    icon: <Image />,
+    onClick: (value, onChange) => {
+      log('[toolbar] onClick');
+      const inline = Inline.create({
+        type: 'image',
+        isVoid: true,
+        data: {
+          loaded: false,
+          src: undefined
+        }
+      });
+
+      const change = value.change().insertInline(inline);
+      onChange(change);
+      opts.insertImageRequested(getValue => new InsertImageHandler(inline, getValue, onChange));
+    },
+    supports: node => node.object === 'inline' && node.type === 'image',
+    customToolbar: (node, value, onToolbarDone) => {
+      const percent = node.data.get('resizePercent');
+
+      const onChange = resizePercent => {
+        const update = {
+          ...node.data.toObject(),
+          resizePercent
+        };
+
+        const change = value.change().setNodeByKey(node.key, { data: update });
+        onToolbarDone(change, false);
+      };
+
+      const Tb = () => <ImageToolbar percent={percent || 100} onChange={onChange} />;
+      return Tb;
+    },
+    showDone: true
+  };
+
+  return {
+    name: 'image',
+    toolbar,
+    deleteNode: (e, node, value, onChange) => {
+      e.preventDefault();
+      if (opts.onDelete) {
+        const update = node.data.merge(Data.create({ deleteStatus: 'pending' }));
+
+        let change = value.change().setNodeByKey(node.key, { data: update });
+
+        onChange(change);
+        opts.onDelete(node.data.get('src'), (err, v) => {
+          if (!err) {
+            change = v.change().removeNodeByKey(node.key);
+          } else {
+            log('[error]: ', err);
+            change = v
+              .change()
+              .setNodeByKey(node.key, node.data.merge(Data.create({ deleteStatus: 'failed' })));
+          }
+          onChange(change);
+        });
+      } else {
+        let change = value.change().removeNodeByKey(node.key);
+        onChange(change);
+      }
+    },
+    stopReset: value => {
+      const imgPendingInsertion = value.document.findDescendant(n => {
+        if (n.type !== 'image') {
+          return;
+        }
+        return n.data.get('loaded') === false;
+      });
+      /** don't reset if there is an image pending insertion */
+      return imgPendingInsertion !== undefined && imgPendingInsertion !== null;
+    },
+    renderNode(props) {
+      if (props.node.type === 'image') {
+        const all = Object.assign(
+          {
+            onDelete: opts.onDelete,
+            onFocus: opts.onFocus,
+            onBlur: opts.onBlur,
+            maxImageWidth: opts.maxImageWidth,
+            maxImageHeight: opts.maxImageHeight,
+          },
+          props
+        );
+        return <ImageComponent {...all} />;
+      }
+    },
+    normalizeNode: node => {
+      const textNodeMap = {};
+      const updateNodesArray = [];
+      let index = 0;
+
+      if (node.object !== 'document') return;
+
+      node.findDescendant(d => {
+        if (d.object === 'text') {
+          textNodeMap[index] = d;
+        }
+
+        if (d.type === 'image') {
+          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 name = el.tagName.toLowerCase();
+    if (name !== 'img') return;
+
+    log('deserialize: ', name);
+    const style = el.style || { width: '', height: '' };
+    const width = parseInt(style.width.replace('px', ''), 10) || null;
+    const height = parseInt(style.height.replace('px', ''), 10) || null;
+
+    const out = {
+      object: 'inline',
+      type: 'image',
+      isVoid: true,
+      data: {
+        src: el.getAttribute('src'),
+        width,
+        height
+      }
+    };
+    log('return object: ', out);
+    return out;
+  },
+  serialize(object /*, children*/) {
+    if (object.type !== 'image') return;
+
+    const { data } = object;
+    const src = data.get('src');
+    const width = data.get('width');
+    const height = data.get('height');
+    const style = {};
+    if (width) {
+      style.width = `${width}px`;
+    }
+
+    if (height) {
+      style.height = `${height}px`;
+    }
+
+    style.objectFit = 'contain';
+
+    const props = {
+      src,
+      style
+    };
+
+    return <img {...props} />;
+  }
+};

package/configure/node_modules/@pie-lib/editable-html/src/plugins/image/insert-image-handler.js

@@ -0,0 +1,93 @@
+import { Data } from 'slate';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:image:insert-image-handler');
+
+/**
+ * Handles user selection, insertion (or cancellation) of an image into the editor.
+ * @param {Block} placeholderBlock - a block that has been added to the editor as a place holder for the image
+ * @param {Function} getValue - a function to return the value of the editor
+ * @param {Function} onChange - callback to notify changes applied by the handler
+ */
+class InsertImageHandler {
+  constructor(placeholderBlock, getValue, onChange) {
+    this.placeholderBlock = placeholderBlock;
+    this.getValue = getValue;
+    this.onChange = onChange;
+  }
+
+  getPlaceholderInDocument(value) {
+    const { document } = value;
+    const directChild = document.getChild(this.placeholderBlock.key);
+
+    if (directChild) {
+      return directChild;
+    }
+
+    const child = document.getDescendant(this.placeholderBlock.key);
+
+    if (child) {
+      return child;
+    } else {
+      //eslint-disable-next-line
+      throw new Error("insert-image: Can't find placeholder!");
+    }
+  }
+
+  cancel() {
+    log('insert cancelled');
+    const c = this.getValue()
+      .change()
+      .removeNodeByKey(this.placeholderBlock.key);
+    this.onChange(c);
+  }
+
+  done(err, src) {
+    log('done: err:', err);
+    if (err) {
+      //eslint-disable-next-line
+      console.log(err);
+    } else {
+      const value = this.getValue();
+      const child = this.getPlaceholderInDocument(value);
+      const data = child.data.merge(Data.create({ loaded: true, src, percent: 100 }));
+
+      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+      this.onChange(change);
+    }
+  }
+
+  /**
+   * Notify handler that the user chose a file - will create a change with a preview in the editor.
+   *
+   * @param {File} file - the file that the user chose using a file input.
+   */
+  fileChosen(file) {
+    if (!file) {
+      return;
+    }
+
+    log('[fileChosen] file: ', file);
+    const reader = new FileReader();
+    reader.onload = () => {
+      const value = this.getValue();
+      const dataURL = reader.result;
+      const child = this.getPlaceholderInDocument(value);
+      const data = child.data.set('src', dataURL);
+      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+      this.onChange(change);
+    };
+    reader.readAsDataURL(file);
+  }
+
+  progress(percent, bytes, total) {
+    log('progress: ', percent, bytes, total);
+    const value = this.getValue();
+    const child = this.getPlaceholderInDocument(value);
+    const data = child.data.set('percent', percent);
+    const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+    this.onChange(change);
+  }
+}
+
+export default InsertImageHandler;