@modusoperandi/licit 0.14.17 → 1.0.0

package/ui/SelectionObserver.js

@@ -0,0 +1,121 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var EMPTY_SELECTION_VALUE = Object.freeze({
+  from: 0,
+  to: 0
+});
+function resolveSelectionValue(el) {
+  if (!window.getSelection) {
+    console.warn('window.getSelection() is not supported');
+    return EMPTY_SELECTION_VALUE;
+  }
+  var selection = window.getSelection();
+  if (!selection.containsNode) {
+    console.warn('selection.containsNode() is not supported');
+    return EMPTY_SELECTION_VALUE;
+  }
+  if (!selection.rangeCount) {
+    return EMPTY_SELECTION_VALUE;
+  }
+  var range = selection.getRangeAt(0);
+  if (!range) {
+    return EMPTY_SELECTION_VALUE;
+  }
+  var startContainer = range.startContainer,
+    endContainer = range.endContainer,
+    startOffset = range.startOffset,
+    endOffset = range.endOffset;
+  if (startContainer === el || endContainer === el || startContainer && el.contains(startContainer) || endContainer && el.contains(endContainer)) {
+    return {
+      from: startOffset,
+      to: endOffset
+    };
+  }
+  return EMPTY_SELECTION_VALUE;
+}
+var SelectionObserver = /*#__PURE__*/function () {
+  function SelectionObserver(_callback) {
+    var _this = this;
+    _classCallCheck(this, SelectionObserver);
+    _defineProperty(this, "_observables", []);
+    _defineProperty(this, "_callback", null);
+    _defineProperty(this, "_onClick", function () {
+      var callback = _this._callback;
+      _this._observables = _this._observables.map(function (obj) {
+        var target = obj.target;
+        return {
+          target: target,
+          selection: resolveSelectionValue(target)
+        };
+      });
+      callback && callback(_this.takeRecords(), _this);
+    });
+    _defineProperty(this, "_check", function () {
+      var changed = false;
+      var callback = _this._callback;
+      _this._observables = _this._observables.map(function (obj) {
+        var target = obj.target,
+          selection = obj.selection;
+        var $selection = resolveSelectionValue(target);
+        if (selection === $selection) {
+          return obj;
+        }
+        if (selection.from === $selection.from && selection.to === $selection.to) {
+          return obj;
+        }
+        changed = true;
+        return {
+          target: target,
+          selection: $selection
+        };
+      });
+      changed && callback && callback(_this.takeRecords(), _this);
+    });
+    this._callback = _callback;
+  }
+  _createClass(SelectionObserver, [{
+    key: "disconnect",
+    value: function disconnect() {
+      var _this2 = this;
+      this._observables.forEach(function (obj) {
+        var el = obj.target;
+        el.removeEventListener('click', _this2._check, false);
+        el.removeEventListener('selectionchange', _this2._check, false);
+      });
+      this._observables = [];
+    }
+  }, {
+    key: "observe",
+    value: function observe(el) {
+      if (!window.getSelection) {
+        console.warn('window.getSelection() is not supported');
+        return;
+      }
+      if (this._observables.some(function (obj) {
+        return obj.target === el;
+      })) {
+        // Already observed.
+        return;
+      }
+      var obj = {
+        target: el,
+        selection: resolveSelectionValue(el)
+      };
+      el.addEventListener('click', this._check, false);
+      el.addEventListener('selectionchange', this._check, false);
+      this._observables.push(obj);
+    }
+  }, {
+    key: "takeRecords",
+    value: function takeRecords() {
+      return this._observables.slice(0);
+    }
+  }]);
+  return SelectionObserver;
+}();
+export { SelectionObserver as default };

package/ui/TableCellMenu.js

@@ -0,0 +1,64 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { EditorState, PluginView } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { Node } from 'prosemirror-model';
+import * as React from 'react';
+import CommandMenuButton from './CommandMenuButton.js';
+import { TABLE_COMMANDS_GROUP } from './EditorToolbarConfig.js';
+import Icon from './Icon.js';
+import './czi-table-cell-menu.css';
+var TableCellMenu = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(TableCellMenu, _React$PureComponent);
+  function TableCellMenu() {
+    var _this;
+    _classCallCheck(this, TableCellMenu);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, TableCellMenu, [].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "_menu", null);
+    _defineProperty(_assertThisInitialized(_this), "props", void 0);
+    return _this;
+  }
+  _createClass(TableCellMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        editorState = _this$props.editorState,
+        editorView = _this$props.editorView,
+        pluginView = _this$props.pluginView,
+        actionNode = _this$props.actionNode;
+      var cmdGrps = null;
+      if (pluginView.getMenu) {
+        cmdGrps = pluginView.getMenu(editorState, actionNode, TABLE_COMMANDS_GROUP);
+      }
+      if (!cmdGrps) {
+        cmdGrps = TABLE_COMMANDS_GROUP;
+      }
+      return /*#__PURE__*/React.createElement(CommandMenuButton, {
+        className: "czi-table-cell-menu",
+        commandGroups: cmdGrps,
+        dispatch: editorView.dispatch,
+        editorState: editorState,
+        editorView: editorView,
+        icon: Icon.get('edit'),
+        title: "Edit"
+      });
+    }
+  }]);
+  return TableCellMenu;
+}(React.PureComponent);
+export default TableCellMenu;

package/ui/TableCellMenu.js.flow

@@ -0,0 +1,51 @@
+// @flow
+import { EditorState, PluginView } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { Node } from 'prosemirror-model';
+import * as React from 'react';
+
+import CommandMenuButton from './CommandMenuButton.js';
+import { TABLE_COMMANDS_GROUP } from './EditorToolbarConfig.js';
+import Icon from './Icon.js';
+
+import './czi-table-cell-menu.css';
+
+type Props = {
+  editorState: EditorState,
+  editorView: EditorView,
+  pluginView: PluginView,
+  actionNode: Node,
+};
+
+class TableCellMenu extends React.PureComponent<any, any> {
+  _menu = null;
+
+  props: Props;
+
+  render(): React.Element<any> {
+    const { editorState, editorView, pluginView, actionNode } = this.props;
+    let cmdGrps = null;
+
+    if (pluginView.getMenu) {
+      cmdGrps = pluginView.getMenu(editorState, actionNode, TABLE_COMMANDS_GROUP);
+    }
+
+    if (!cmdGrps) {
+      cmdGrps = TABLE_COMMANDS_GROUP;
+    }
+
+    return (
+      <CommandMenuButton
+        className="czi-table-cell-menu"
+        commandGroups={cmdGrps}
+        dispatch={editorView.dispatch}
+        editorState={editorState}
+        editorView={editorView}
+        icon={Icon.get('edit')}
+        title="Edit"
+      />
+    );
+  }
+}
+
+export default TableCellMenu;

package/ui/TableGridSizeEditor.js

@@ -0,0 +1,212 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+import cx from 'classnames';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { clamp } from '@modusoperandi/licit-ui-commands';
+import htmlElementToRect from './htmlElementToRect.js';
+import { fromHTMlElement, fromXY, isIntersected } from '@modusoperandi/licit-ui-commands';
+import './czi-table-grid-size-editor.css';
+var bpfrpt_proptype_TableGridSizeEditorValue = {
+  "cols": PropTypes.number.isRequired,
+  "rows": PropTypes.number.isRequired
+};
+var GUTTER_SIZE = 5;
+var CELL_SIZE = 16;
+// [FS] IRAD-1012 2020-07-14
+// Fix: Limited Table Grid size from 20 to 7
+var MAX_SIZE = 7;
+var GridCell = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(GridCell, _React$PureComponent);
+  function GridCell() {
+    _classCallCheck(this, GridCell);
+    return _callSuper(this, GridCell, arguments);
+  }
+  _createClass(GridCell, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        x = _this$props.x,
+        y = _this$props.y,
+        selected = _this$props.selected;
+      var style = {
+        left: x + 'px',
+        top: y + 'px',
+        width: CELL_SIZE + 'px',
+        height: CELL_SIZE + 'px'
+      };
+      var className = cx('czi-table-grid-size-editor-cell', {
+        selected: selected
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: className,
+        style: style
+      });
+    }
+  }]);
+  return GridCell;
+}(React.PureComponent);
+var TableGridSizeEditor = /*#__PURE__*/function (_React$PureComponent2) {
+  _inherits(TableGridSizeEditor, _React$PureComponent2);
+  function TableGridSizeEditor() {
+    var _this;
+    _classCallCheck(this, TableGridSizeEditor);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, TableGridSizeEditor, [].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "_ex", 0);
+    _defineProperty(_assertThisInitialized(_this), "_ey", 0);
+    _defineProperty(_assertThisInitialized(_this), "_mx", 0);
+    _defineProperty(_assertThisInitialized(_this), "_my", 0);
+    _defineProperty(_assertThisInitialized(_this), "_rafID", 0);
+    _defineProperty(_assertThisInitialized(_this), "_ref", null);
+    _defineProperty(_assertThisInitialized(_this), "_entered", false);
+    _defineProperty(_assertThisInitialized(_this), "props", void 0);
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      rows: 1,
+      cols: 1
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onRef", function (ref) {
+      _this._ref = ref;
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onMouseEnter", function (e) {
+      var node = e.currentTarget;
+      if (node instanceof HTMLElement) {
+        var rect = fromHTMlElement(node);
+        var mx = Math.round(e.clientX);
+        var my = Math.round(e.clientY);
+        _this._ex = rect.x;
+        _this._ey = rect.y;
+        _this._mx = mx;
+        _this._my = my;
+        if (!_this._entered) {
+          _this._entered = true;
+          document.addEventListener('mousemove', _this._onMouseMove, true);
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onMouseMove", function (e) {
+      var el = _this._ref && ReactDOM.findDOMNode(_this._ref);
+      var elRect = el ? htmlElementToRect(el) : null;
+      var mouseRect = fromXY(e.screenX, e.screenY, 10);
+      if (elRect && mouseRect && isIntersected(elRect, mouseRect, 50)) {
+        // This prevents `PopUpManager` from collapsing the editor.
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+      var mx = Math.round(e.clientX);
+      var my = Math.round(e.clientY);
+      if (mx !== _this._mx || my !== _this._my) {
+        _this._mx = mx;
+        _this._my = my;
+        _this._rafID && cancelAnimationFrame(_this._rafID);
+        _this._rafID = requestAnimationFrame(_this._updateGridSize);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_updateGridSize", function () {
+      _this._rafID = 0;
+      var mx = _this._mx;
+      var my = _this._my;
+      var x = mx - _this._ex;
+      var y = my - _this._ey;
+      var rr = clamp(1, Math.ceil(y / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
+      var cc = clamp(1, Math.ceil(x / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
+      var _this$state = _this.state,
+        rows = _this$state.rows,
+        cols = _this$state.cols;
+      if (rows !== rr || cols !== cc) {
+        _this.setState({
+          rows: rr,
+          cols: cc
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "_onMouseDown", function (e) {
+      e.preventDefault();
+      _this.props.close(_this.state);
+    });
+    return _this;
+  }
+  _createClass(TableGridSizeEditor, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._entered) {
+        document.removeEventListener('mousemove', this._onMouseMove, true);
+      }
+      this._rafID && cancelAnimationFrame(this._rafID);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state2 = this.state,
+        rows = _this$state2.rows,
+        cols = _this$state2.cols;
+      var rr = Math.max(5, rows);
+      var cc = Math.max(5, cols);
+      if (rr === rows) {
+        rr = Math.min(MAX_SIZE, rr + 1);
+      }
+      if (cc === cols) {
+        cc = Math.min(MAX_SIZE, cc + 1);
+      }
+      var cells = [];
+      var ii = 0;
+      var y = 0;
+      var w = 0;
+      var h = 0;
+      while (ii < rr) {
+        y += GUTTER_SIZE;
+        var jj = 0;
+        var x = 0;
+        while (jj < cc) {
+          x += GUTTER_SIZE;
+          var selected = ii < rows && jj < cols;
+          cells.push( /*#__PURE__*/React.createElement(GridCell, {
+            key: "".concat(String(ii), "-").concat(String(jj)),
+            selected: selected,
+            x: x,
+            y: y
+          }));
+          x += CELL_SIZE;
+          w = x + GUTTER_SIZE;
+          jj++;
+        }
+        y += CELL_SIZE;
+        h = y + GUTTER_SIZE;
+        ii++;
+      }
+      var bodyStyle = {
+        width: w + 'px',
+        height: h + 'px'
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: "czi-table-grid-size-editor",
+        ref: this._onRef
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "czi-table-grid-size-editor-body",
+        onMouseDown: this._onMouseDown,
+        onMouseEnter: this._onMouseEnter,
+        style: bodyStyle
+      }, cells), /*#__PURE__*/React.createElement("div", {
+        className: "czi-table-grid-size-editor-footer"
+      }, rows, " X ", cols));
+    }
+  }]);
+  return TableGridSizeEditor;
+}(React.PureComponent);
+export default TableGridSizeEditor;
+import PropTypes from "prop-types";
+export { bpfrpt_proptype_TableGridSizeEditorValue };

package/ui/TableGridSizeEditor.js.flow

@@ -0,0 +1,184 @@
+// @flow
+
+import cx from 'classnames';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+
+import { clamp } from '@modusoperandi/licit-ui-commands';
+import htmlElementToRect from './htmlElementToRect.js';
+import { fromHTMlElement, fromXY, isIntersected } from '@modusoperandi/licit-ui-commands';
+
+import './czi-table-grid-size-editor.css';
+
+export type TableGridSizeEditorValue = {
+  cols: number,
+  rows: number,
+};
+
+const GUTTER_SIZE = 5;
+const CELL_SIZE = 16;
+// [FS] IRAD-1012 2020-07-14
+// Fix: Limited Table Grid size from 20 to 7
+const MAX_SIZE = 7;
+
+class GridCell extends React.PureComponent<any, any> {
+  render(): React.Element<any> {
+    const { x, y, selected } = this.props;
+    const style = {
+      left: x + 'px',
+      top: y + 'px',
+      width: CELL_SIZE + 'px',
+      height: CELL_SIZE + 'px',
+    };
+    const className = cx('czi-table-grid-size-editor-cell', {
+      selected,
+    });
+    return <div className={className} style={style} />;
+  }
+}
+
+class TableGridSizeEditor extends React.PureComponent<any, any> {
+  _ex = 0;
+  _ey = 0;
+  _mx = 0;
+  _my = 0;
+  _rafID = 0;
+  _ref = null;
+  _entered = false;
+
+  props: {
+    close: (val: TableGridSizeEditorValue) => void,
+  };
+
+  state: TableGridSizeEditorValue = {
+    rows: 1,
+    cols: 1,
+  };
+
+  componentWillUnmount(): void {
+    if (this._entered) {
+      document.removeEventListener('mousemove', this._onMouseMove, true);
+    }
+    this._rafID && cancelAnimationFrame(this._rafID);
+  }
+
+  render(): React.Element<any> {
+    const { rows, cols } = this.state;
+    let rr = Math.max(5, rows);
+    let cc = Math.max(5, cols);
+    if (rr === rows) {
+      rr = Math.min(MAX_SIZE, rr + 1);
+    }
+    if (cc === cols) {
+      cc = Math.min(MAX_SIZE, cc + 1);
+    }
+    const cells = [];
+    let ii = 0;
+    let y = 0;
+    let w = 0;
+    let h = 0;
+    while (ii < rr) {
+      y += GUTTER_SIZE;
+      let jj = 0;
+      let x = 0;
+      while (jj < cc) {
+        x += GUTTER_SIZE;
+        const selected = ii < rows && jj < cols;
+        cells.push(
+          <GridCell
+            key={`${String(ii)}-${String(jj)}`}
+            selected={selected}
+            x={x}
+            y={y}
+          />
+        );
+        x += CELL_SIZE;
+        w = x + GUTTER_SIZE;
+        jj++;
+      }
+      y += CELL_SIZE;
+      h = y + GUTTER_SIZE;
+      ii++;
+    }
+    const bodyStyle = { width: w + 'px', height: h + 'px' };
+
+    return (
+      <div className="czi-table-grid-size-editor" ref={this._onRef}>
+        <div
+          className="czi-table-grid-size-editor-body"
+          onMouseDown={this._onMouseDown}
+          onMouseEnter={this._onMouseEnter}
+          style={bodyStyle}
+        >
+          {cells}
+        </div>
+        <div className="czi-table-grid-size-editor-footer">
+          {rows} X {cols}
+        </div>
+      </div>
+    );
+  }
+
+  _onRef = (ref: any): void => {
+    this._ref = ref;
+  };
+
+  _onMouseEnter = (e: MouseEvent): void => {
+    const node = e.currentTarget;
+    if (node instanceof HTMLElement) {
+      const rect = fromHTMlElement(node);
+      const mx = Math.round(e.clientX);
+      const my = Math.round(e.clientY);
+      this._ex = rect.x;
+      this._ey = rect.y;
+      this._mx = mx;
+      this._my = my;
+      if (!this._entered) {
+        this._entered = true;
+        document.addEventListener('mousemove', this._onMouseMove, true);
+      }
+    }
+  };
+
+  _onMouseMove = (e: MouseEvent): void => {
+    const el = this._ref && ReactDOM.findDOMNode(this._ref);
+    const elRect = el ? htmlElementToRect(el) : null;
+    const mouseRect = fromXY(e.screenX, e.screenY, 10);
+
+    if (elRect && mouseRect && isIntersected(elRect, mouseRect, 50)) {
+      // This prevents `PopUpManager` from collapsing the editor.
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+
+    const mx = Math.round(e.clientX);
+    const my = Math.round(e.clientY);
+    if (mx !== this._mx || my !== this._my) {
+      this._mx = mx;
+      this._my = my;
+      this._rafID && cancelAnimationFrame(this._rafID);
+      this._rafID = requestAnimationFrame(this._updateGridSize);
+    }
+  };
+
+  _updateGridSize = (): void => {
+    this._rafID = 0;
+    const mx = this._mx;
+    const my = this._my;
+    const x = mx - this._ex;
+    const y = my - this._ey;
+    const rr = clamp(1, Math.ceil(y / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
+    const cc = clamp(1, Math.ceil(x / (CELL_SIZE + GUTTER_SIZE)), MAX_SIZE);
+    const { rows, cols } = this.state;
+    if (rows !== rr || cols !== cc) {
+      this.setState({ rows: rr, cols: cc });
+    }
+  };
+
+  _onMouseDown = (e: SyntheticEvent<>): void => {
+    e.preventDefault();
+    this.props.close(this.state);
+  };
+}
+
+export default TableGridSizeEditor;