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

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

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`table-toolbar snapshot renders 1`] = `
+<div
+  className="table-toolbar"
+>
+  <div>
+    <WithStyles(RawButton)
+      onClick={[MockFunction]}
+    >
+      <WithStyles(Component) />
+    </WithStyles(RawButton)>
+    <WithStyles(RawButton)
+      onClick={[MockFunction]}
+    >
+      <WithStyles(Component) />
+    </WithStyles(RawButton)>
+    <WithStyles(RawButton)
+      onClick={[MockFunction]}
+    >
+      <WithStyles(Component) />
+    </WithStyles(RawButton)>
+    <WithStyles(RawButton)
+      onClick={[MockFunction]}
+    >
+      <WithStyles(Component) />
+    </WithStyles(RawButton)>
+    <WithStyles(RawButton)
+      onClick={[MockFunction]}
+    >
+      <WithStyles(Component) />
+    </WithStyles(RawButton)>
+    <WithStyles(RawButton)
+      active={true}
+      onClick={[MockFunction]}
+    >
+      <pure(BorderAllIcon) />
+    </WithStyles(RawButton)>
+  </div>
+  <WithStyles(RawDoneButton)
+    onClick={[Function]}
+  />
+</div>
+`;

package/src/plugins/table/__tests__/index.test.jsx

@@ -0,0 +1,401 @@
+import EditTable from 'slate-edit-table';
+import TablePlugin, { serialization, parseStyleString, reactAttributes } from '../index';
+import { Data, Block, PathUtils } from 'slate';
+import React from 'react';
+
+jest.mock('slate-edit-table', () => {
+  const mock = {
+    default: jest.fn().mockReturnThis(),
+    utils: {
+      isSelectionInTable: jest.fn().mockReturnValue(true),
+      createTable: jest.fn(function(c) {
+        return {
+          toJSON: jest.fn().mockReturnValue({ object: 'block', type: 'table' }),
+        };
+      }),
+    },
+    changes: {
+      insertTable: jest.fn(function(c) {
+        return c;
+      }),
+    },
+  };
+
+  return jest.fn().mockReturnValue(mock);
+});
+
+describe('table', () => {
+  describe('toolbar', () => {
+    describe('onClick', () => {
+      let plugin;
+      let onChange;
+      let findDescendant;
+      let insertBlock;
+      let changeMock;
+
+      beforeEach(() => {
+        plugin = TablePlugin();
+        onChange = jest.fn();
+        insertBlock = jest.fn();
+        findDescendant = jest.fn();
+        changeMock = jest.fn().mockReturnValue({
+          insertBlock,
+          value: {
+            document: {
+              findDescendant,
+            },
+          },
+        });
+      });
+
+      it('calls utils.createTable', () => {
+        plugin.toolbar.onClick({ change: changeMock }, onChange);
+
+        expect(EditTable().utils.createTable).toHaveBeenCalledWith(2, 2);
+      });
+
+      it('creates table with border: 1 as default', () => {
+        plugin.toolbar.onClick({ change: changeMock }, onChange);
+
+        expect(insertBlock).toHaveBeenCalledWith(
+          Block.create({ key: '2', type: 'table', data: { border: '1', newTable: true } }),
+        );
+      });
+
+      it('moves cursor to first cell of the table and removes the newTable property', () => {
+        const dataRemoveFn = jest.fn().mockReturnValue({ border: '1' });
+        const setNodeByKey = jest.fn();
+        const newTableBlock = {
+          key: '2',
+          data: {
+            remove: dataRemoveFn,
+          },
+        };
+        const collapseToStartOf = jest.fn();
+
+        changeMock = jest.fn().mockReturnValue({
+          insertBlock,
+          collapseToStartOf,
+          setNodeByKey,
+          value: {
+            document: {
+              findDescendant: jest.fn().mockReturnValue(newTableBlock),
+            },
+          },
+        });
+        plugin.toolbar.onClick({ change: changeMock }, onChange);
+
+        expect(collapseToStartOf).toHaveBeenCalledWith(newTableBlock);
+        expect(dataRemoveFn).toHaveBeenCalledWith('newTable');
+        expect(setNodeByKey).toHaveBeenCalledWith('2', { data: { border: '1' } });
+      });
+    });
+
+    describe('supports', () => {
+      const assertSupports = (inTable, object, expected) => {
+        it(`inTable: ${inTable}, type: ${object} => ${expected}`, () => {
+          EditTable().utils.isSelectionInTable.mockReturnValue(inTable);
+          const plugin = TablePlugin();
+          const supports = plugin.toolbar.supports({ object });
+          expect(supports).toEqual(expected);
+        });
+      };
+
+      assertSupports(true, 'block', true);
+      assertSupports(false, 'block', false);
+      assertSupports(true, 'inline', false);
+      assertSupports(false, 'inline', false);
+    });
+
+    describe('customToolbar', () => {
+      describe('toggleBorder', () => {
+        const assertToggle = (border, expectedBorder) => {
+          describe(`with initial border of ${border}`, () => {
+            let change;
+            let done;
+
+            beforeEach(() => {
+              const plugin = TablePlugin();
+              change = {
+                setNodeByKey: jest.fn().mockReturnThis(),
+              };
+              plugin.utils.getTableBlock = jest.fn().mockReturnValue({
+                key: 'tableKey',
+                data: Data.create({ border }),
+              });
+              const node = { key: 'nodeKey' };
+              const value = {
+                change: jest.fn().mockReturnValue(change),
+              };
+              done = jest.fn();
+              const Comp = plugin.toolbar.customToolbar(node, value, done);
+              const c = Comp();
+              c.props.onToggleBorder();
+            });
+
+            it(`calls setNodeByKey with ${expectedBorder}`, () => {
+              expect(change.setNodeByKey).toHaveBeenCalledWith('tableKey', {
+                data: Data.create({ border: expectedBorder }),
+              });
+            });
+
+            it('calls onToolbarDone', () => {
+              expect(done).toHaveBeenCalledWith(change, false);
+            });
+          });
+        };
+
+        assertToggle(null, '1');
+        assertToggle(undefined, '1');
+        assertToggle('0', '1');
+        assertToggle('1', '0');
+        assertToggle('2', '0');
+      });
+    });
+
+    describe('normalizeNode', () => {
+      it('should exit the function if the node is not of type document', () => {
+        const tablePlugin = TablePlugin();
+        const returnValue = tablePlugin.normalizeNode({ object: 'table' });
+
+        expect(returnValue).toEqual(undefined);
+      });
+
+      it('should exit there are no changes needed', () => {
+        const tablePlugin = TablePlugin();
+        const nodes = {
+          size: 3,
+          findLastIndex: jest.fn().mockReturnValue(1),
+        };
+        const returnValue = tablePlugin.normalizeNode({
+          object: 'document',
+          nodes,
+          findDescendant: jest.fn().mockReturnValue({ object: 'block', type: 'table' }),
+          getParent: jest.fn().mockReturnValue(undefined),
+        });
+        expect(returnValue).toEqual(undefined);
+      });
+
+      it('should return a function if a table does not have a node before or after it', () => {
+        const tablePlugin = TablePlugin();
+        const nodes = [
+          {
+            object: 'block',
+            type: 'table',
+            key: '99',
+            data: Data.create({
+              newTable: true,
+            }),
+          },
+        ];
+        const findDescendant = jest.fn((callback) => {
+          nodes.forEach((n) => callback(n));
+        });
+        const change = {
+          insertNodeByPath: jest.fn(),
+          value: {
+            document: {
+              getPath: jest.fn().mockReturnValue(PathUtils.create([0, 0])),
+            },
+          },
+        };
+
+        const returnValue = tablePlugin.normalizeNode({
+          object: 'document',
+          findDescendant,
+          getPath: jest.fn().mockReturnValue(PathUtils.create([0, 0])),
+          getPreviousNode: jest.fn().mockReturnValue(undefined),
+          getNextNode: jest.fn().mockReturnValue(undefined),
+        });
+
+        expect(returnValue).toEqual(expect.any(Function));
+
+        returnValue(change);
+
+        expect(change.insertNodeByPath).toHaveBeenCalledWith([0], 0, {
+          object: 'block',
+          type: 'div',
+        });
+      });
+    });
+  });
+});
+
+describe('parseStyleString', () => {
+  const parses = (s, expected) => {
+    it(`parses ${s} -> ${JSON.stringify(expected)}`, () => {
+      const result = parseStyleString(s);
+      expect(result).toEqual(expected);
+    });
+  };
+  parses(' width: 10px ', { width: '10px' });
+  parses(' width: 10px; ', { width: '10px' });
+  parses(' border-width: 10px; ', { 'border-width': '10px' });
+  parses(' border: solid 1px red; height: 1px', {
+    border: 'solid 1px red',
+    height: '1px',
+  });
+});
+
+describe('toStyleString', () => {
+  const styleString = (o, expected) => {
+    it(`${JSON.stringify(s)} -> ${expected}`, () => {
+      const result = toStyleString(o);
+      expect(result).toEqual(expected);
+    });
+  };
+});
+
+describe('reactAttributes', () => {
+  const attributes = (o, expected) => {
+    it(`${JSON.stringify(o)} -> ${JSON.stringify(expected)}`, () => {
+      const result = reactAttributes(o);
+      expect(result).toEqual(expected);
+    });
+  };
+  attributes({ 'border-width': '10px', 'line-height': 1.56 }, { borderWidth: '10px', lineHeight: '1.56' });
+});
+
+describe('serialization', () => {
+  describe('deserialize', () => {
+    let next;
+
+    beforeEach(() => {
+      next = jest.fn().mockReturnValue([]);
+    });
+
+    describe('table', () => {
+      let el;
+      let out;
+      beforeEach(() => {
+        el = {
+          tagName: 'table',
+          children: [],
+          getAttribute: jest.fn((name) => {
+            switch (name) {
+              case 'border':
+                return '1';
+              case 'cellspacing':
+                return '2';
+              case 'cellpadding':
+                return '3';
+              case 'class':
+                return 'table-class';
+              case 'style':
+                return 'width: 10px';
+            }
+          }),
+        };
+        out = serialization.deserialize(el, next);
+      });
+
+      const assertData = (name, value) => {
+        it(`data.${name} should eql ${value}`, () => {
+          expect(out.data[name]).toEqual(value);
+        });
+      };
+
+      assertData('border', '1');
+      assertData('cellspacing', '2');
+      assertData('cellpadding', '3');
+      assertData('class', 'table-class');
+      assertData('style', { width: '10px' });
+      it('returns a table block', () => {
+        expect(out).toMatchObject({
+          object: 'block',
+          type: 'table',
+          nodes: [],
+        });
+      });
+    });
+
+    it('deserializes tr', () => {
+      const el = {
+        tagName: 'tr',
+        children: [],
+      };
+
+      const out = serialization.deserialize(el, next);
+
+      expect(out).toEqual({
+        object: 'block',
+        type: 'table_row',
+        nodes: [],
+      });
+    });
+
+    it('deserializes td', () => {
+      const el = {
+        tagName: 'td',
+        childNodes: [],
+        getAttribute: jest.fn(function(name) {
+          const o = {
+            class: 'class name',
+            colspan: '1',
+            rowspan: '1',
+          };
+          return o[name];
+        }),
+      };
+
+      const out = serialization.deserialize(el, next);
+
+      expect(out).toEqual({
+        object: 'block',
+        type: 'table_cell',
+        nodes: [],
+        data: {
+          colspan: '1',
+          rowspan: '1',
+          class: 'class name',
+          header: false,
+        },
+      });
+    });
+  });
+
+  describe('serialize', () => {
+    it('serializes table', () => {
+      const el = serialization.serialize({
+        object: 'block',
+        type: 'table',
+        nodes: [],
+        data: Data.create({
+          border: '1',
+          cellpadding: '2',
+          cellspacing: '3',
+        }),
+      });
+
+      expect(el).toEqual(
+        <table border="1" cellPadding="2" cellSpacing="3">
+          <tbody />
+        </table>,
+      );
+    });
+
+    it('serializes table_row', () => {
+      const el = serialization.serialize({
+        object: 'block',
+        type: 'table_row',
+        nodes: [],
+      });
+
+      expect(el).toEqual(<tr />);
+    });
+    it('serializes table_cell', () => {
+      const el = serialization.serialize({
+        object: 'block',
+        type: 'table_cell',
+        nodes: [],
+        data: Data.create({
+          header: false,
+          style: { width: '10px' },
+          class: 'foo',
+        }),
+      });
+
+      expect(el).toEqual(<td style={{ width: '10px' }} className={'foo'} />);
+    });
+  });
+});

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

@@ -0,0 +1,42 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { TableToolbar } from '../table-toolbar';
+describe('table-toolbar', () => {
+  let onDone, onAddColumn, onAddRow, onRemoveColumn, onRemoveRow, onRemoveTable, onToggleBorder;
+
+  beforeEach(() => {
+    onAddColumn = jest.fn();
+    onAddRow = jest.fn();
+    onRemoveColumn = jest.fn();
+    onRemoveRow = jest.fn();
+    onRemoveTable = jest.fn();
+    onDone = jest.fn();
+    onToggleBorder = jest.fn();
+  });
+
+  const mkWrapper = (extras) => {
+    const props = {
+      onDone,
+      onAddRow,
+      onRemoveRow,
+      onAddColumn,
+      onRemoveColumn,
+      onRemoveTable,
+      hasBorder: true,
+      onToggleBorder,
+      classes: {
+        tableToolbar: 'table-toolbar',
+      },
+      ...extras,
+    };
+
+    return shallow(<TableToolbar {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = mkWrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/plugins/table/icons/index.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = {
+  icon: {
+    fill: 'grey',
+    '&:hover': {
+      fill: 'black',
+    },
+  },
+};
+
+const SvgIcon = (Component) => {
+  return withStyles(styles)((props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+      <Component className={props.classes.icon} />
+    </svg>
+  ));
+};
+export const AddRow = SvgIcon((props) => (
+  <path
+    {...props}
+    d="M22,10A2,2 0 0,1 20,12H4A2,2 0 0,1 2,10V3H4V5H8V3H10V5H14V3H16V5H20V3H22V10M4,10H8V7H4V10M10,10H14V7H10V10M20,10V7H16V10H20M11,14H13V17H16V19H13V22H11V19H8V17H11V14Z"
+  />
+));
+
+export const RemoveRow = SvgIcon((props) => (
+  <path
+    {...props}
+    d="M9.41,13L12,15.59L14.59,13L16,14.41L13.41,17L16,19.59L14.59,21L12,18.41L9.41,21L8,19.59L10.59,17L8,14.41L9.41,13M22,9A2,2 0 0,1 20,11H4A2,2 0 0,1 2,9V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V9M4,9H8V6H4V9M10,9H14V6H10V9M16,9H20V6H16V9Z"
+  />
+));
+
+export const AddColumn = SvgIcon((props) => (
+  <path
+    {...props}
+    d="M11,2A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H2V2H11M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M15,11H18V8H20V11H23V13H20V16H18V13H15V11Z"
+  />
+));
+
+export const RemoveColumn = SvgIcon((props) => (
+  <path
+    {...props}
+    d="M4,2H11A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M17.59,12L15,9.41L16.41,8L19,10.59L21.59,8L23,9.41L20.41,12L23,14.59L21.59,16L19,13.41L16.41,16L15,14.59L17.59,12Z"
+  />
+));
+
+export const RemoveTable = SvgIcon((props) => (
+  <path
+    {...props}
+    d="M15.46,15.88L16.88,14.46L19,16.59L21.12,14.46L22.54,15.88L20.41,18L22.54,20.12L21.12,21.54L19,19.41L16.88,21.54L15.46,20.12L17.59,18L15.46,15.88M4,3H18A2,2 0 0,1 20,5V12.08C18.45,11.82 16.92,12.18 15.68,13H12V17H13.08C12.97,17.68 12.97,18.35 13.08,19H4A2,2 0 0,1 2,17V5A2,2 0 0,1 4,3M4,7V11H10V7H4M12,7V11H18V7H12M4,13V17H10V13H4Z"
+  />
+));