@pie-lib/editable-html 11.1.2-next.0 → 11.3.0-beta.0

package/src/plugins/image/__tests__/__snapshots__/component.test.jsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+Array [
+  <span>
+     
+  </span>,
+  <div
+    className=""
+    style={
+      Object {
+        "justifyContent": "flex-start",
+      }
+    }
+  >
+    <div
+      className="MuiLinearProgress-root-1 MuiLinearProgress-colorPrimary-2 MuiLinearProgress-indeterminate-5"
+      mode="determinate"
+      role="progressbar"
+    >
+      <div
+        className="MuiLinearProgress-bar-11 MuiLinearProgress-barColorPrimary-12 MuiLinearProgress-bar1Indeterminate-14"
+        style={Object {}}
+      />
+      <div
+        className="MuiLinearProgress-bar-11 MuiLinearProgress-barColorPrimary-12 MuiLinearProgress-bar2Indeterminate-17"
+        style={Object {}}
+      />
+    </div>
+    <div>
+      <img
+        className=""
+        onLoad={[Function]}
+        style={
+          Object {
+            "height": "50px",
+            "objectFit": "contain",
+            "width": "50px",
+          }
+        }
+      />
+      <div
+        className="resize"
+      />
+    </div>
+  </div>,
+  <span>
+     
+  </span>,
+]
+`;

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImageToolbar onChange renders 1`] = `
+<div>
+  <AlignmentButton
+    active={false}
+    alignment="left"
+    onClick={[Function]}
+  />
+  <AlignmentButton
+    active={false}
+    alignment="center"
+    onClick={[Function]}
+  />
+  <AlignmentButton
+    active={false}
+    alignment="right"
+    onClick={[Function]}
+  />
+  <span
+    className="undefined"
+    onMouseDown={[Function]}
+  >
+    Alt text
+  </span>
+</div>
+`;

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

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="ImageToolbar-holder-1 holder"
+>
+  <button
+    aria-label="left"
+    aria-pressed={false}
+    className="RawMarkButton-button-4"
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    tabIndex={0}
+  >
+    left
+  </button>
+  <button
+    aria-label="center"
+    aria-pressed={false}
+    className="RawMarkButton-button-4"
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    tabIndex={0}
+  >
+    center
+  </button>
+  <button
+    aria-label="right"
+    aria-pressed={false}
+    className="RawMarkButton-button-4"
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    tabIndex={0}
+  >
+    right
+  </button>
+  <span
+    className="ImageToolbar-disabled-2 ImageToolbar-altButton-3"
+    onMouseDown={[Function]}
+  >
+    Alt text
+  </span>
+</div>
+`;

package/src/plugins/image/__tests__/component.test.jsx

@@ -0,0 +1,41 @@
+import { Data, Block } from 'slate';
+import { Component } from '../component';
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const node = Block.fromJSON({
+    type: 'image',
+    data: Data.create({
+      width: 50,
+      height: 50,
+    }),
+  });
+
+  const editor = {
+    value: {},
+    change: jest.fn(),
+  };
+
+  const onDelete = jest.fn();
+
+  const classes = {
+    active: 'active',
+    loading: 'loading',
+    pendingDelete: 'pendingDelete',
+  };
+
+  const tree = renderer
+    .create(<Component node={node} editor={editor} classes={classes} onDelete={onDelete} />, {
+      createNodeMock: (el) => {
+        if (el.type === 'img') {
+          return {
+            naturalWidth: 100,
+            naturalHeight: 100,
+          };
+        }
+      },
+    })
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

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/index.jsx

@@ -12,6 +12,7 @@ const log = debug('@pie-lib:editable-html:plugins:image');
 export default function ImagePlugin(opts) {
   const toolbar = opts.insertImageRequested && {
     icon: <Image />,
+    ariaLabel: 'Insert Image',
     onClick: (value, onChange) => {
       log('[toolbar] onClick');
       const inline = Inline.create({
@@ -71,7 +72,7 @@ export default function ImagePlugin(opts) {
         let change = value.change().setNodeByKey(node.key, { data: update });
 
         onChange(change);
-        opts.onDelete(node.data.get('src'), (err, v) => {
+        opts.onDelete(node, (err, v) => {
           if (!err) {
             change = v.change().removeNodeByKey(node.key);
           } else {

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

@@ -34,19 +34,26 @@ class InsertImageHandler {
     if (child) {
       return child;
     } else {
-      //eslint-disable-next-line
+      // 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);
 
-    this.onFinish(false);
+    try {
+      const value = this.getValue();
+      const child = this.getPlaceholderInDocument(value);
+
+      if (child) {
+        const c = value.change().removeNodeByKey(child.key);
+        this.onChange(c);
+        this.onFinish(false);
+      }
+    } catch (err) {
+      //
+    }
   }
 
   done(err, src) {