@pie-element/ebsr 6.6.3-next.1097 → 6.6.3-next.1137

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

@@ -0,0 +1,349 @@
+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 loaded = node.data.get('loaded') !== false;
+    const deleteStatus = node.data.get('deleteStatus');
+    const alignment = node.data.get('alignment');
+    const percent = node.data.get('percent');
+    const alt = node.data.get('alt');
+    let margin;
+    let justifyContent;
+
+    switch (alignment) {
+      case 'left':
+        justifyContent = 'flex-start';
+        margin = '0';
+        break;
+      case 'center':
+        justifyContent = 'center';
+        margin = '0 auto';
+        break;
+      case 'right':
+        justifyContent = 'flex-end';
+        margin = 'auto 0 0 auto ';
+        break;
+      default:
+        justifyContent = 'flex-start';
+        margin = '0';
+        break;
+    }
+    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} style={{ justifyContent }}>
+        <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}
+            alt={alt}
+          />
+          <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: 'fit-content',
+    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: 'flex',
+    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,108 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import debug from 'debug';
+import ReactDOM from 'react-dom';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+
+import { MarkButton } from '../toolbar/toolbar-buttons';
+import AltDialog from './alt-dialog';
+
+const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
+
+const AlignmentButton = ({ alignment, active, onClick }) => {
+  return (
+    <MarkButton active={active} onToggle={() => onClick(alignment)} label={alignment}>
+      {alignment}
+    </MarkButton>
+  );
+};
+
+AlignmentButton.propTypes = {
+  alignment: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
+export class ImageToolbar extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    alignment: PropTypes.string,
+    alt: PropTypes.string,
+    imageLoaded: PropTypes.bool
+  };
+
+  onAltTextDone = newAlt => {
+    log('[onAltTextDone]: alt:', newAlt);
+
+    this.props.onChange({ alt: newAlt });
+  };
+
+  onAlignmentClick = alignment => {
+    log('[onAlignmentClick]: alignment:', alignment);
+    this.props.onChange({ alignment });
+  };
+
+  renderDialog = () => {
+    const { alt } = this.props;
+    const popoverEl = document.createElement('div');
+
+    const el = <AltDialog alt={alt} onDone={this.onAltTextDone} />;
+
+    ReactDOM.render(el, popoverEl);
+
+    document.body.appendChild(popoverEl);
+  };
+
+  render() {
+    const { classes, alignment, imageLoaded } = this.props;
+
+    return (
+      <div className={classes.holder}>
+        <AlignmentButton
+          alignment={'left'}
+          active={alignment === 'left'}
+          onClick={this.onAlignmentClick}
+        />
+        <AlignmentButton
+          alignment={'center'}
+          active={alignment === 'center'}
+          onClick={this.onAlignmentClick}
+        />
+        <AlignmentButton
+          alignment={'right'}
+          active={alignment === 'right'}
+          onClick={this.onAlignmentClick}
+        />
+        <span
+          className={classNames({
+            [classes.disabled]: !imageLoaded,
+            [classes.altButton]: true
+          })}
+          onMouseDown={event => imageLoaded && this.renderDialog(event)}
+        >
+          Alt text
+        </span>
+      </div>
+    );
+  }
+}
+
+const styles = theme => ({
+  holder: {
+    paddingLeft: theme.spacing.unit,
+    display: 'flex',
+    alignItems: 'center'
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  altButton: {
+    borderLeft: '1px solid grey',
+    paddingLeft: 8,
+    marginLeft: 4,
+  },
+});
+
+export default withStyles(styles)(ImageToolbar);

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

@@ -0,0 +1,218 @@
+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 alignment = node.data.get('alignment');
+      const alt = node.data.get('alt');
+      const imageLoaded = node.data.get('loaded') !== false;
+      const onChange = newValues => {
+        const update = {
+          ...node.data.toObject(),
+          ...newValues
+        };
+
+        const change = value.change().setNodeByKey(node.key, { data: update });
+        onToolbarDone(change, false);
+      };
+
+      const Tb = () => (
+        <ImageToolbar alt={alt} imageLoaded={imageLoaded} alignment={alignment || 'left'} 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: '', margin: '', justifyContent: '' };
+    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,
+        margin: el.style.margin,
+        justifyContent: el.style.justifyContent,
+        alignment: el.getAttribute('alignment'),
+        alt: el.getAttribute('alt')
+      }
+    };
+    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 alignment = data.get('alignment');
+    const margin = data.get('margin');
+    const justifyContent = data.get('margin');
+    const alt = data.get('alt');
+    const style = {};
+    if (width) {
+      style.width = `${width}px`;
+    }
+
+    if (height) {
+      style.height = `${height}px`;
+    }
+
+    style.margin = margin;
+    style.justifyContent = justifyContent;
+
+    if (alignment) {
+      switch (alignment) {
+        case 'left':
+          style.justifyContent = 'flex-start';
+          style.margin = '0';
+          break;
+        case 'center':
+          style.justifyContent = 'center';
+          style.margin = '0 auto';
+          break;
+        case 'right':
+          style.justifyContent = 'flex-end';
+          style.margin = 'auto 0 0 auto';
+          break;
+        default:
+          style.justifyContent = 'flex-start';
+          break;
+      }
+    }
+
+    style.objectFit = 'contain';
+
+    const props = {
+      src,
+      style,
+      alignment,
+      alt
+    };
+
+    return <img {...props} />;
+  }
+};