@pie-lib/editable-html-tip-tap 1.0.0

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

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

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

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

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

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

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

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