@pie-element/ebsr 6.6.3-next.264 → 6.6.3-next.280

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

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Editor, { DEFAULT_PLUGINS, ALL_PLUGINS } from './editor';
+import { htmlToValue, valueToHtml } from './serialization';
+import { parseDegrees } from './parse-html';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html');
+/**
+ * Export lower level Editor and serialization functions.
+ */
+export { htmlToValue, valueToHtml, Editor, DEFAULT_PLUGINS, ALL_PLUGINS };
+
+/**
+ * Wrapper around the editor that exposes a `markup` and `onChange(markup:string)` api.
+ * Because of the mismatch between the markup and the `Value` we need to convert the incoming markup to a value and
+ * compare it. TODO: This is an interim fix, we'll need to strip back `Editor` and look how best to maintain the
+ * `markup` api whilst avoiding the serialization mismatch. We should be making better use of schemas w/ normalize.
+ */
+export default class EditableHtml extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    onDone: PropTypes.func,
+    markup: PropTypes.string.isRequired,
+    allowValidation: PropTypes.bool
+  };
+
+  static defaultProps = {
+    onDone: () => {},
+    allowValidation: false
+  };
+
+  constructor(props) {
+    super(props);
+    const v = htmlToValue(props.markup);
+    this.state = {
+      value: v
+    };
+  }
+
+  // eslint-disable-next-line react/no-deprecated
+  componentWillReceiveProps(props) {
+    if (!props.allowValidation && props.markup === this.props.markup) {
+      return;
+    }
+
+    const v = htmlToValue(props.markup);
+    const current = htmlToValue(this.props.markup);
+
+    if (!v.equals(current)) {
+      this.setState({ value: v });
+    }
+  }
+
+  onChange = (value, done) => {
+    const html = valueToHtml(value);
+    const htmlParsed = parseDegrees(html);
+
+    log('value as html: ', html);
+
+    if (html !== this.props.markup) {
+      this.props.onChange(htmlParsed);
+    }
+
+    if (done) {
+      this.props.onDone(htmlParsed);
+    }
+  };
+
+  focus = (position, node) => {
+    if (this.editorRef) {
+      this.editorRef.change(c => {
+        const lastText = node
+          ? c.value.document.getNextText(node.key)
+          : c.value.document.getLastText();
+        const editorDOM = document.querySelector(
+          `[data-key="${this.editorRef.value.document.key}"]`
+        );
+
+        if (editorDOM !== document.activeElement) {
+          document.activeElement.blur();
+        }
+
+        c.focus();
+
+        if (position === 'end' && lastText) {
+          c.moveFocusTo(lastText.key, lastText.text.length).moveAnchorTo(
+            lastText.key,
+            lastText.text.length
+          );
+        }
+
+        if (position === 'beginning' && lastText) {
+          c.moveFocusTo(lastText.key, 0).moveAnchorTo(lastText.key, 0);
+        }
+      });
+    }
+  };
+
+  finishEditing = () => {
+    if (this.editorRef) {
+      this.editorRef.props.onEditingDone();
+    }
+  };
+
+  render() {
+    const { value } = this.state;
+    const props = {
+      ...this.props,
+      markup: null,
+      value,
+      onChange: this.onChange,
+      focus: this.focus
+    };
+
+    return (
+      <Editor
+        onRef={ref => {
+          if (ref) {
+            this.rootRef = ref;
+          }
+        }}
+        editorRef={ref => ref && (this.editorRef = ref)}
+        {...props}
+      />
+    );
+  }
+}

package/configure/node_modules/@pie-lib/editable-html/src/parse-html.js

@@ -0,0 +1,8 @@
+export const parseDegrees = html =>
+  html
+    // removes \(   use case: 50°
+    .replace(/\\[(]/g, '')
+    // removes \)   use case: 50°+m<1
+    .replace(/\\[)]/g, '')
+    // removes \degree  use case: 50°
+    .replace(/\\degree/g, '&deg;');

package/configure/node_modules/@pie-lib/editable-html/src/plugins/README.md

@@ -0,0 +1,27 @@
+# plugins
+
+## Custom toolbar
+
+To create a custom toolbar you need to add the following methods to the toolbar object:
+
+```typescript
+type ChangeFn = (key:string, update : object) : void;
+
+type Toolbar = {
+  /**
+   * return true if this plugin supports this node type
+   */
+  supports : (node: Slate.Node) : Boolean;
+  /**
+   * return a React component to edit the data within the node,
+   * call toolbarDone to finish editing, call toolbarChange to update
+   * the main editor without closing editing.
+   */
+  customToolbar: (node: Slate.Node, toolbarDone : ChangeFn, toolbarChange: ChangeFn),
+  /**
+   * Takes the output of the `customToolbar#toolbarDone` call
+   * and passes in a value so that you can create a Slate.Change.
+   */
+  applyChange: (key: string, data: object, value: Slate.Value) : Slate.Change | undefined
+}
+```

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

@@ -0,0 +1,166 @@
+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
+  };
+
+  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;
+
+    const resizePercent = node.data.get('resizePercent');
+    log('[applySizeData]: resizePercent: ', resizePercent);
+
+    let update = node.data;
+
+    if (resizePercent) {
+      update = update.set('width', this.getWidth(resizePercent));
+      update = update.set('height', this.getHeight(resizePercent));
+    } else {
+      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 }));
+    }
+  };
+
+  componentDidMount() {
+    this.applySizeData();
+  }
+
+  componentDidUpdate() {
+    this.applySizeData();
+  }
+
+  getSize(data) {
+    return {
+      width: size(data.get('width')),
+      height: size(data.get('height')),
+      objectFit: 'contain'
+    };
+  }
+
+  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,
+      active && classes.active,
+      !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}
+        />
+        <img src={src} {...attributes} ref={r => (this.img = r)} style={size} />
+      </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'
+  },
+  active: {
+    border: `solid 1px ${theme.palette.primary.main}`
+  },
+  delete: {
+    position: 'absolute',
+    right: 0
+  }
+});
+
+export default withStyles(styles)(Component);

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

@@ -0,0 +1,62 @@
+import { MarkButton } from '../toolbar/toolbar-buttons';
+
+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');
+
+const PercentButton = ({ percent, active, onClick }) => {
+  const label = `${percent}%`;
+  return (
+    <MarkButton active={active} onToggle={() => onClick(percent)} label={label}>
+      {label}
+    </MarkButton>
+  );
+};
+
+PercentButton.propTypes = {
+  percent: PropTypes.number.isRequired,
+  active: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
+export class ImageToolbar extends React.Component {
+  static propTypes = {
+    percent: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired
+  };
+
+  onPercentClick = percent => {
+    log('[onPercentClick]: percent:', percent);
+    this.props.onChange(percent);
+  };
+
+  render() {
+    const { classes, percent } = this.props;
+    return (
+      <div className={classes.holder}>
+        <PercentButton percent={25} active={percent === 25} onClick={this.onPercentClick} />
+        <PercentButton percent={50} active={percent === 50} onClick={this.onPercentClick} />
+        <PercentButton active={percent === 75} percent={75} onClick={this.onPercentClick} />
+        <PercentButton
+          percent={100}
+          active={percent === 100 || !percent}
+          onClick={this.onPercentClick}
+        />
+      </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,180 @@
+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
+          },
+          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;