@pie-element/ebsr 6.6.3-next.414 → 6.6.3-next.430

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

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

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

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

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

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

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

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