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

package/src/plugins/table/CustomTablePlugin.js

@@ -0,0 +1,113 @@
+import EditTable from 'slate-edit-table';
+import { isSelectionInTable } from 'slate-edit-table/dist/utils';
+import { onEnter, onModEnter, onTab, onUpDown } from 'slate-edit-table/dist/handlers';
+import TableOptions from 'slate-edit-table/dist/options';
+import { clearCell } from 'slate-edit-table/dist/changes';
+
+function onBackspace(event, change, editor, opts) {
+  const { value } = change;
+  const { startBlock, endBlock, selection, document } = value;
+
+  const startCell = document.getClosest(startBlock.key, opts.isCell);
+  const endCell = document.getClosest(endBlock.key, opts.isCell);
+
+  const startBlockIndex = startCell?.nodes?.findIndex((block) => block.key == startBlock.key);
+
+  // If a cursor is collapsed at the start of the first block, do nothing
+  if (startBlockIndex === 0 && selection.isAtStartOf(startBlock)) {
+    if (startBlock.isVoid) {
+      // Delete the block normally if it is a void block
+      return undefined;
+    }
+
+    event.preventDefault();
+    return change;
+  }
+
+  // If "normal" deletion, we continue
+  if (startCell === endCell) {
+    return undefined;
+  }
+
+  // If cursor is between multiple blocks,
+  // we clear the content of the cells.
+  event.preventDefault();
+
+  const { blocks } = value;
+
+  // Get all cells that contains the selection
+  const cells = blocks
+    .map((node) =>
+      node.type === opts.typeCell ? node : document.getClosest(node.key, (a) => a.type === opts.typeCell),
+    )
+    .toSet();
+
+  // If the cursor is at the very end of the first cell, ignore it.
+  // If the cursor is at the very start of the last cell, ignore it.
+  // This behavior is to compensate hanging selection behaviors:
+  // https://github.com/ianstormtaylor/slate/pull/1605
+  const ignoreFirstCell = value.selection.collapseToStart().isAtEndOf(cells.first());
+  const ignoreLastCell = value.selection.collapseToEnd().isAtStartOf(cells.last());
+
+  let cellsToClear = cells;
+  if (ignoreFirstCell) {
+    cellsToClear = cellsToClear.rest();
+  }
+  if (ignoreLastCell) {
+    cellsToClear = cellsToClear.butLast();
+  }
+
+  // Clear all the selection
+  cellsToClear.forEach((cell) => clearCell(opts, change, cell));
+
+  // Update the selection properly, and avoid reset of selection
+  const updatedStartCell = change.value.document.getDescendant(cellsToClear.first().key);
+  return change.collapseToStartOf(updatedStartCell);
+}
+
+const KEY_ENTER = 'Enter';
+const KEY_TAB = 'Tab';
+const KEY_BACKSPACE = 'Backspace';
+const KEY_DOWN = 'ArrowDown';
+const KEY_UP = 'ArrowUp';
+
+/**
+ * User is pressing a key in the editor
+ */
+function onKeyDown(opts, event, change, editor) {
+  // Only handle events in cells
+  if (!isSelectionInTable(opts, change.value)) {
+    return undefined;
+  }
+
+  // Build arguments list
+  const args = [event, change, editor, opts];
+
+  switch (event.key) {
+    case KEY_ENTER:
+      if (event.metaKey && opts.exitBlockType) {
+        return onModEnter(...args);
+      }
+      return onEnter(...args);
+
+    case KEY_TAB:
+      return onTab(...args);
+    case KEY_BACKSPACE:
+      return onBackspace(...args);
+    case KEY_DOWN:
+    case KEY_UP:
+      return onUpDown(...args);
+    default:
+      return undefined;
+  }
+}
+
+export default (opts) => {
+  const core = EditTable(opts);
+
+  const tableOpts = new TableOptions(opts);
+
+  core.onKeyDown = onKeyDown.bind(null, tableOpts);
+
+  return core;
+};

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();
+    });
+  });
+});