@modusoperandi/licit 1.0.3 → 1.0.5

package/ui/TableCellMenu.js.flow

@@ -1,51 +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;
+// @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

@@ -3,7 +3,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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); }
@@ -29,12 +29,12 @@ var CELL_SIZE = 16;
 // 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, [{
+  _inherits(GridCell, _React$PureComponent);
+  return _createClass(GridCell, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -56,10 +56,8 @@ var GridCell = /*#__PURE__*/function (_React$PureComponent) {
       });
     }
   }]);
-  return GridCell;
 }(React.PureComponent);
 var TableGridSizeEditor = /*#__PURE__*/function (_React$PureComponent2) {
-  _inherits(TableGridSizeEditor, _React$PureComponent2);
   function TableGridSizeEditor() {
     var _this;
     _classCallCheck(this, TableGridSizeEditor);
@@ -67,22 +65,22 @@ var TableGridSizeEditor = /*#__PURE__*/function (_React$PureComponent2) {
       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", {
+    _defineProperty(_this, "_ex", 0);
+    _defineProperty(_this, "_ey", 0);
+    _defineProperty(_this, "_mx", 0);
+    _defineProperty(_this, "_my", 0);
+    _defineProperty(_this, "_rafID", 0);
+    _defineProperty(_this, "_ref", null);
+    _defineProperty(_this, "_entered", false);
+    _defineProperty(_this, "props", void 0);
+    _defineProperty(_this, "state", {
       rows: 1,
       cols: 1
     });
-    _defineProperty(_assertThisInitialized(_this), "_onRef", function (ref) {
+    _defineProperty(_this, "_onRef", function (ref) {
       _this._ref = ref;
     });
-    _defineProperty(_assertThisInitialized(_this), "_onMouseEnter", function (e) {
+    _defineProperty(_this, "_onMouseEnter", function (e) {
       var node = e.currentTarget;
       if (node instanceof HTMLElement) {
         var rect = fromHTMlElement(node);
@@ -98,7 +96,7 @@ var TableGridSizeEditor = /*#__PURE__*/function (_React$PureComponent2) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "_onMouseMove", function (e) {
+    _defineProperty(_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);
@@ -116,7 +114,7 @@ var TableGridSizeEditor = /*#__PURE__*/function (_React$PureComponent2) {
         _this._rafID = requestAnimationFrame(_this._updateGridSize);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "_updateGridSize", function () {
+    _defineProperty(_this, "_updateGridSize", function () {
       _this._rafID = 0;
       var mx = _this._mx;
       var my = _this._my;
@@ -134,13 +132,14 @@ var TableGridSizeEditor = /*#__PURE__*/function (_React$PureComponent2) {
         });
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "_onMouseDown", function (e) {
+    _defineProperty(_this, "_onMouseDown", function (e) {
       e.preventDefault();
       _this.props.close(_this.state);
     });
     return _this;
   }
-  _createClass(TableGridSizeEditor, [{
+  _inherits(TableGridSizeEditor, _React$PureComponent2);
+  return _createClass(TableGridSizeEditor, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       if (this._entered) {
@@ -205,7 +204,6 @@ var TableGridSizeEditor = /*#__PURE__*/function (_React$PureComponent2) {
       }, rows, " X ", cols));
     }
   }]);
-  return TableGridSizeEditor;
 }(React.PureComponent);
 export default TableGridSizeEditor;
 import PropTypes from "prop-types";

package/ui/TableGridSizeEditor.js.flow

@@ -1,184 +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;
+// @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;

package/ui/TableNodeView.js

@@ -2,7 +2,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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 _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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); }
@@ -19,7 +19,6 @@ import { TableView } from 'prosemirror-tables';
 
 // A custom table view that renders the margin-left style.
 var TableNodeView = /*#__PURE__*/function (_TableView) {
-  _inherits(TableNodeView, _TableView);
   function TableNodeView(node, colMinWidth, view) {
     var _this;
     _classCallCheck(this, TableNodeView);
@@ -27,7 +26,8 @@ var TableNodeView = /*#__PURE__*/function (_TableView) {
     _this._updateMargin(node);
     return _this;
   }
-  _createClass(TableNodeView, [{
+  _inherits(TableNodeView, _TableView);
+  return _createClass(TableNodeView, [{
     key: "update",
     value: function update(node) {
       var updated = _get(_getPrototypeOf(TableNodeView.prototype), "update", this).call(this, node);
@@ -46,6 +46,5 @@ var TableNodeView = /*#__PURE__*/function (_TableView) {
       }
     }
   }]);
-  return TableNodeView;
 }(TableView);
 export { TableNodeView as default };

package/ui/TableNodeView.js.flow

@@ -1,25 +1,25 @@
-import { Node } from 'prosemirror-model';
-import { EditorView } from 'prosemirror-view';
-import { TableView } from 'prosemirror-tables';
-
-// A custom table view that renders the margin-left style.
-export default class TableNodeView extends TableView {
-  constructor(node: Node, colMinWidth: number, view: EditorView) {
-    super(node, colMinWidth, view);
-    this._updateMargin(node);
-  }
-  update(node: Node): boolean {
-    const updated = super.update(node);
-    if (updated) {
-      this._updateMargin(node);
-    }
-    return updated;
-  }
-  _updateMargin(node: Node): void {
-    const marginLeft = (node.attrs && node.attrs.marginLeft) || 0;
-    this.table.style.marginLeft = marginLeft ? `${marginLeft}px` : '';
-     if(node.attrs && node.attrs.vignette){
-      this.table.style.border='none' ;
-    }
-  }
-}
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { TableView } from 'prosemirror-tables';
+
+// A custom table view that renders the margin-left style.
+export default class TableNodeView extends TableView {
+  constructor(node: Node, colMinWidth: number, view: EditorView) {
+    super(node, colMinWidth, view);
+    this._updateMargin(node);
+  }
+  update(node: Node): boolean {
+    const updated = super.update(node);
+    if (updated) {
+      this._updateMargin(node);
+    }
+    return updated;
+  }
+  _updateMargin(node: Node): void {
+    const marginLeft = (node.attrs && node.attrs.marginLeft) || 0;
+    this.table.style.marginLeft = marginLeft ? `${marginLeft}px` : '';
+     if(node.attrs && node.attrs.vignette){
+      this.table.style.border='none' ;
+    }
+  }
+}