@pie-lib/editable-html-tip-tap 1.0.2 → 1.0.3

package/src/plugins/image/__tests__/image-toolbar-logic.test.jsx

@@ -1,42 +0,0 @@
-import { configure, shallow } from 'enzyme';
-
-import { Data, Block, Value } from 'slate';
-import { ImageToolbar } from '../image-toolbar';
-import MockChange from './mock-change';
-import React from 'react';
-
-describe('ImageToolbar', () => {
-  let onChange;
-
-  beforeEach(() => {
-    onChange = jest.fn();
-  });
-
-  const mkWrapper = (extras) => {
-    const props = {
-      onChange,
-      classes: {},
-      ...extras,
-    };
-
-    return shallow(<ImageToolbar {...props} />);
-  };
-
-  describe('onChange', () => {
-    it('renders', function() {
-      return expect(mkWrapper()).toMatchSnapshot();
-    });
-
-    it('calls onChange with alignment', () => {
-      const w = mkWrapper();
-      w.instance().onAlignmentClick('center');
-      expect(onChange).toHaveBeenCalledWith({ alignment: 'center' });
-    });
-
-    it('calls onChange with alt text', () => {
-      const w = mkWrapper();
-      w.instance().onAltTextDone('alt text');
-      expect(onChange).toHaveBeenCalledWith({ alt: 'alt text' }, true);
-    });
-  });
-});

package/src/plugins/image/__tests__/image-toolbar.test.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import Toolbar from '../image-toolbar';
-import renderer from 'react-test-renderer';
-import { Data, Block, Value } from 'slate';
-
-it('renders correctly', () => {
-  const classes = { holder: 'holder' };
-
-  const tree = renderer.create(<Toolbar percent={50} classes={classes} onChange={jest.fn()} />).toJSON();
-  expect(tree).toMatchSnapshot();
-});

package/src/plugins/image/__tests__/index.test.js

@@ -1,95 +0,0 @@
-import MockChange, { MockDocument } from './mock-change';
-
-import { Data } from 'slate';
-import ImageToolbar from '../';
-
-describe('image plugin', () => {
-  let value = {};
-
-  const imageSupport = {
-    delete: jest.fn(),
-    add: jest.fn(),
-  };
-
-  const imagePlugin = ImageToolbar({
-    onDelete: (src, done) => {
-      imageSupport.delete(src, (e) => {
-        done(e, value);
-      });
-    },
-    insertImageRequested: (node, getHandler) => {
-      const handler = getHandler(() => value);
-      imageSupport.add(handler);
-    },
-  });
-
-  describe('normalizeNode', () => {
-    it('should exit the function if the node is not of type document', () => {
-      const returnValue = imagePlugin.normalizeNode({ object: 'image' });
-
-      expect(returnValue).toEqual(undefined);
-    });
-
-    it('should exit if the function if there are no changes needed', () => {
-      const nodes = [
-        {
-          object: 'text',
-          text: 'Before Image',
-        },
-        {
-          type: 'image',
-        },
-        {
-          object: 'text',
-          text: 'After Image',
-        },
-      ];
-      const returnValue = imagePlugin.normalizeNode({
-        object: 'document',
-        findDescendant: jest.fn((callback) => {
-          nodes.forEach((n) => callback(n));
-        }),
-      });
-      expect(returnValue).toEqual(undefined);
-    });
-
-    it('should return a function if there is a node with an empty text before an image', () => {
-      const nodes = [
-        {
-          object: 'text',
-          text: '',
-          key: '1',
-        },
-        {
-          type: 'image',
-          key: '2',
-        },
-        {
-          object: 'text',
-          text: 'After Image',
-          key: '3',
-        },
-      ];
-      const findDescendant = jest.fn((callback) => {
-        nodes.forEach((n) => callback(n));
-      });
-      const change = {
-        withoutNormalization: jest.fn((callback) => {
-          callback();
-        }),
-        insertTextByKey: jest.fn(),
-      };
-      const returnValue = imagePlugin.normalizeNode({
-        object: 'document',
-        findDescendant,
-      });
-
-      expect(returnValue).toEqual(expect.any(Function));
-
-      returnValue(change);
-
-      expect(change.withoutNormalization).toHaveBeenCalledWith(expect.any(Function));
-      expect(change.insertTextByKey).toHaveBeenCalledWith('1', 0, ' ');
-    });
-  });
-});

package/src/plugins/image/__tests__/insert-image-handler.test.js

@@ -1,113 +0,0 @@
-import MockChange, { MockDocument } from './mock-change';
-
-import { Data } from 'slate';
-import InsertImageHandler from '../insert-image-handler';
-
-expect.extend({
-  toMatchData: (received, argument) => {
-    const argData = Data.create(argument);
-    const pass = argData.equals(received.data);
-    if (pass) {
-      return {
-        message: () => `expected ${received.toJSON()} not to be divisible by ${argData.toJSON()}`,
-        pass: true,
-      };
-    } else {
-      return {
-        message: () => `expected ${received.toJSON()} to be divisible by ${argData.toJSON()}`,
-        pass: false,
-      };
-    }
-  },
-});
-describe('insert image handler', () => {
-  let change, document, value;
-  beforeEach(() => {
-    document = new MockDocument();
-    change = new MockChange();
-    value = {
-      change: () => change,
-      document,
-    };
-  });
-
-  const block = { key: 1 };
-  const onChange = jest.fn();
-
-  const handler = new InsertImageHandler(
-    block,
-    () => {},
-    () => value,
-    onChange,
-  );
-
-  test('it constructs', () => {
-    expect(handler).not.toEqual(undefined);
-  });
-
-  describe('fileChosen', () => {
-    let fileReader;
-    beforeEach(() => {
-      fileReader = {
-        readAsDataURL: jest.fn(),
-      };
-
-      global.FileReader = () => fileReader;
-      handler.fileChosen({});
-    });
-
-    test('calls readAsDataURL', () => {
-      expect(fileReader.readAsDataURL).toBeCalledWith({});
-    });
-
-    test('calls onChange with src -> dataUrl', () => {
-      fileReader.result = 'dataURL';
-      fileReader.onload();
-      expect(change.setNodeByKey).toBeCalledWith(block.key, expect.anything());
-      expect(change.setNodeByKey.mock.calls[0][1]).toMatchData({
-        src: 'dataURL',
-      });
-      expect(onChange).toBeCalledWith(change);
-    });
-  });
-
-  describe('progress', () => {
-    test('calls change w/ percent', () => {
-      handler.progress(40, 40, 100);
-      expect(change.setNodeByKey).toBeCalledWith(block.key, expect.anything());
-
-      expect(change.setNodeByKey.mock.calls[0][1].data.toJS()).toMatchObject({
-        percent: 40,
-      });
-    });
-  });
-
-  describe('done', () => {
-    test('calls setNodeByKey', () => {
-      handler.done(null, 'src');
-
-      expect(change.setNodeByKey).toBeCalledWith(block.key, expect.anything());
-
-      expect(change.setNodeByKey.mock.calls[0][1].data.toJS()).toMatchObject({
-        src: 'src',
-        loaded: true,
-        percent: 100,
-      });
-    });
-  });
-
-  describe('cancel', () => {
-    beforeEach(() => {
-      document.getChild = jest.fn().mockReturnValue({ data: Data.create({}), key: block.key });
-      handler.cancel();
-    });
-
-    test('calls onChange', () => {
-      expect(onChange).toBeCalled();
-    });
-
-    test('calls removeNodeByKey', () => {
-      expect(change.removeNodeByKey).toBeCalledWith(block.key);
-    });
-  });
-});

package/src/plugins/image/__tests__/mock-change.js

@@ -1,15 +0,0 @@
-import { Data } from 'slate';
-
-export default function MockChange() {
-  this.setNodeByKey = jest.fn().mockReturnValue(this);
-  this.removeNodeByKey = jest.fn().mockReturnValue(this);
-  this.insertInline = jest.fn().mockReturnValue(this);
-  this.moveFocusTo = jest.fn().mockReturnValue(this);
-  this.moveAnchorTo = jest.fn().mockReturnValue(this);
-}
-
-export function MockDocument() {
-  this.getChild = jest.fn().mockReturnValue({ data: Data.create({}) });
-
-  this.getDescendant = jest.fn();
-}

package/src/plugins/image/alt-dialog.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import DialogContent from '@material-ui/core/DialogContent';
-import ArrowBackIos from '@material-ui/icons/ArrowBackIos';
-import TextField from '@material-ui/core/TextField';
-import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import PropTypes from 'prop-types';
-
-export class AltDialog extends React.Component {
-  static propTypes = {
-    onDone: PropTypes.func.isRequired,
-    alt: PropTypes.string,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const { alt } = props;
-
-    this.state = {
-      value: alt,
-    };
-  }
-
-  closeDialog = () => {
-    const allDialogs = document.querySelectorAll('#text-dialog');
-
-    allDialogs.forEach(function(s) {
-      return s.remove();
-    });
-  };
-
-  onDone = () => {
-    const { onDone } = this.props;
-    const { value } = this.state;
-
-    onDone(value);
-    this.closeDialog();
-  };
-
-  handleOverflow = () => {
-    document.body.style.removeProperty('overflow');
-  };
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <Dialog
-        open
-        disablePortal
-        onClose={this.closeDialog}
-        id="text-dialog"
-        hideBackdrop
-        disableScrollLock
-        onEntered={this.handleOverflow}
-      >
-        <DialogContent>
-          <div style={{ display: 'flex' }}>
-            <ArrowBackIos style={{ paddingTop: '6px' }} />
-            <TextField
-              multiline
-              placeholder={'Enter an Alt Text description of this image'}
-              helperText={
-                'Users with visual limitations rely on Alt Text, since screen readers cannot otherwise describe the contents of an image.'
-              }
-              value={value}
-              onChange={(event) => this.setState({ value: event.target.value })}
-              FormHelperTextProps={{ style: { fontSize: 14 } }}
-            />
-          </div>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={this.onDone}>Done</Button>
-        </DialogActions>
-      </Dialog>
-    );
-  }
-}
-
-export default AltDialog;

package/src/plugins/image/component.jsx

@@ -1,343 +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,
-    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 justifyContent;
-
-    switch (alignment) {
-      case 'left':
-        justifyContent = 'flex-start';
-        break;
-
-      case 'center':
-        justifyContent = 'center';
-        break;
-
-      case 'right':
-        justifyContent = 'flex-end';
-        break;
-
-      default:
-        justifyContent = 'flex-start';
-        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: theme.palette.background.paper,
-    borderRadius: '1px',
-    display: 'flex',
-    padding: '10px',
-    border: `solid 1px ${theme.palette.grey[200]}`,
-    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 ${theme.palette.common.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);