@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/cjs/plugins/table/utils/dom.js

@@ -0,0 +1,224 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _types = require("../types");
+
+var _consts = require("../ui/consts");
+
+// import { containsClassName } from '@atlaskit/editor-core/src/utils';
+// import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
+var SELECTOR_TABLE_LEAFS = ".".concat(_types.TableCssClassName.TABLE_CELL, ", .").concat(_types.TableCssClassName.TABLE_HEADER_CELL);
+
+var isCell = function isCell(node) {
+  return Boolean(node && (['TH', 'TD'].indexOf(node.tagName) > -1 || !!(0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.TABLE_HEADER_CELL)) || !!(0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.TABLE_CELL))));
+};
+
+exports.isCell = isCell;
+
+var isCornerButton = function isCornerButton(node) {
+  return (0, _utils.containsClassName)(node, _types.TableCssClassName.CONTROLS_CORNER_BUTTON);
+};
+
+exports.isCornerButton = isCornerButton;
+
+var isInsertRowButton = function isInsertRowButton(node) {
+  return (0, _utils.containsClassName)(node, _types.TableCssClassName.CONTROLS_INSERT_ROW) || (0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.CONTROLS_INSERT_ROW)) || (0, _utils.containsClassName)(node, _types.TableCssClassName.CONTROLS_BUTTON_OVERLAY) && (0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.ROW_CONTROLS));
+};
+
+exports.isInsertRowButton = isInsertRowButton;
+
+var getColumnOrRowIndex = function getColumnOrRowIndex(target) {
+  return [parseInt(target.getAttribute('data-start-index') || '-1', 10), parseInt(target.getAttribute('data-end-index') || '-1', 10)];
+};
+
+exports.getColumnOrRowIndex = getColumnOrRowIndex;
+
+var isColumnControlsDecorations = function isColumnControlsDecorations(node) {
+  return (0, _utils.containsClassName)(node, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
+};
+
+exports.isColumnControlsDecorations = isColumnControlsDecorations;
+
+var isRowControlsButton = function isRowControlsButton(node) {
+  return (0, _utils.containsClassName)(node, _types.TableCssClassName.ROW_CONTROLS_BUTTON) || (0, _utils.containsClassName)(node, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON);
+};
+
+exports.isRowControlsButton = isRowControlsButton;
+
+var isResizeHandleDecoration = function isResizeHandleDecoration(node) {
+  return (0, _utils.containsClassName)(node, _types.TableCssClassName.RESIZE_HANDLE_DECORATION);
+};
+
+exports.isResizeHandleDecoration = isResizeHandleDecoration;
+
+var isTableControlsButton = function isTableControlsButton(node) {
+  return (0, _utils.containsClassName)(node, _types.TableCssClassName.CONTROLS_BUTTON) || (0, _utils.containsClassName)(node, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP);
+};
+
+exports.isTableControlsButton = isTableControlsButton;
+
+var isTableContainerOrWrapper = function isTableContainerOrWrapper(node) {
+  return (0, _utils.containsClassName)(node, _types.TableCssClassName.TABLE_CONTAINER) || (0, _utils.containsClassName)(node, _types.TableCssClassName.TABLE_NODE_WRAPPER);
+};
+/*
+ * This function returns which side of a given element the mouse cursor is,
+ * using as a base the half of the width by default, for example:
+ *
+ * legend
+ * ⌖ = mouse pointer
+ * ▒ = gap
+ *
+ * given this box:
+ * ┏━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃                    ┊                     ┃
+ * ┃       left         ┊        right        ┃
+ * ┃                    ┊                     ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━┛
+ *
+ * if the mouse is on the left, it will return `left`,
+ * if it is on the right it will return `right`.
+ *
+ * You can extend this behavior using the parameter `gapInPixels`
+ * to determinate if the mouse is inside of a gap for each side,
+ * for example:
+ *
+ * given `gapInPixels` is `5`
+ * and given this box:
+ * ┏━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┃▒▒▒▒▒   left        ┊        right   ▒▒▒▒▒┃
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┗━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━┛
+ *
+ * if the mouse cursor is inside of the gap like that:
+ *
+ * ┏━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┃▒▒⌖▒▒   left        ┊        right   ▒▒▒▒▒┃
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┗━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━┛
+ *
+ * the function will return `left` because the mouse is inside of the gap on the left side.
+ *
+ * if the mouse cursor is outside of the gap like that:
+ *
+ * ┏━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┃▒▒▒▒▒   left  ⌖     ┊        right   ▒▒▒▒▒┃
+ * ┃▒▒▒▒▒               ┊                ▒▒▒▒▒┃
+ * ┗━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━┛
+ *
+ * the function will return `null` because the mouse is inside of left
+ * but is outside of the gap.
+ *
+ * the same is valid to the right side.
+ */
+
+
+exports.isTableContainerOrWrapper = isTableContainerOrWrapper;
+
+var getMousePositionHorizontalRelativeByElement = function getMousePositionHorizontalRelativeByElement(mouseEvent, mouseMoveOptimization, elementContentRects, gapInPixels) {
+  var element = mouseEvent.target;
+
+  if (element instanceof HTMLElement) {
+    var width, x;
+    var closestCell = element.closest(SELECTOR_TABLE_LEAFS);
+
+    if (mouseMoveOptimization) {
+      var _closestCell$id, _elementContentRects$, _elementContentRects$2;
+
+      var id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
+      width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
+      x = mouseEvent.offsetX;
+    } else {
+      var elementRect = element.getBoundingClientRect();
+      width = elementRect.width;
+      var left = elementRect.left;
+      x = mouseEvent.clientX - left;
+    }
+
+    if (width <= 0) {
+      return null;
+    }
+
+    if (!gapInPixels) {
+      return x / width > 0.5 ? 'right' : 'left';
+    } else {
+      if (x <= gapInPixels) {
+        return 'left';
+      } else if (x >= width - gapInPixels) {
+        return 'right';
+      }
+    }
+  }
+
+  return null;
+};
+
+exports.getMousePositionHorizontalRelativeByElement = getMousePositionHorizontalRelativeByElement;
+
+var getMousePositionVerticalRelativeByElement = function getMousePositionVerticalRelativeByElement(mouseEvent) {
+  var element = mouseEvent.target;
+
+  if (element instanceof HTMLElement) {
+    var elementRect = element.getBoundingClientRect();
+
+    if (elementRect.height <= 0) {
+      return null;
+    }
+
+    var y = mouseEvent.clientY - elementRect.top;
+    return y / elementRect.height > 0.5 ? 'bottom' : 'top';
+  }
+
+  return null;
+};
+
+exports.getMousePositionVerticalRelativeByElement = getMousePositionVerticalRelativeByElement;
+
+var updateResizeHandles = function updateResizeHandles(tableRef) {
+  if (!tableRef) {
+    return;
+  }
+
+  var height = tableRef.offsetHeight + _consts.tableToolbarSize; // see ED-7600
+
+  var nodes = Array.from(tableRef.querySelectorAll(".".concat(_types.TableCssClassName.RESIZE_HANDLE)));
+
+  if (!nodes || !nodes.length) {
+    return;
+  }
+
+  nodes.forEach(function (node) {
+    node.style.height = "".concat(height, "px");
+  });
+};
+
+exports.updateResizeHandles = updateResizeHandles;
+
+var hasResizeHandler = function hasResizeHandler(_ref) {
+  var columnEndIndexTarget = _ref.columnEndIndexTarget,
+      target = _ref.target;
+  var tableElement = (0, _utils.closestElement)(target, 'table');
+
+  if (!tableElement) {
+    return false;
+  }
+
+  var query = [".".concat(_types.TableCssClassName.RESIZE_HANDLE_DECORATION), "[data-end-index=\"".concat(columnEndIndexTarget, "\"]")];
+  var decorationElement = tableElement.querySelectorAll(query.join(''));
+
+  if (!decorationElement || decorationElement.length === 0) {
+    return false;
+  }
+
+  return true;
+};
+
+exports.hasResizeHandler = hasResizeHandler;

package/dist/cjs/plugins/table/utils/get-allow-add-column-custom-step.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAllowAddColumnCustomStep = getAllowAddColumnCustomStep;
+
+var _pluginFactory = require("../pm-plugins/plugin-factory");
+
+function getAllowAddColumnCustomStep(state) {
+  var tablePluginState = (0, _pluginFactory.getPluginState)(state);
+  return Boolean(tablePluginState) && Boolean(tablePluginState.pluginConfig.allowAddColumnWithCustomStep);
+}

package/dist/cjs/plugins/table/utils/index.js

@@ -0,0 +1,355 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "checkIfHeaderColumnEnabled", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.checkIfHeaderColumnEnabled;
+  }
+});
+Object.defineProperty(exports, "checkIfHeaderRowEnabled", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.checkIfHeaderRowEnabled;
+  }
+});
+Object.defineProperty(exports, "checkIfNumberColumnEnabled", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.checkIfNumberColumnEnabled;
+  }
+});
+Object.defineProperty(exports, "containsHeaderColumn", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.containsHeaderColumn;
+  }
+});
+Object.defineProperty(exports, "containsHeaderRow", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.containsHeaderRow;
+  }
+});
+Object.defineProperty(exports, "copyPreviousRow", {
+  enumerable: true,
+  get: function get() {
+    return _rowControls.copyPreviousRow;
+  }
+});
+Object.defineProperty(exports, "createCellHoverDecoration", {
+  enumerable: true,
+  get: function get() {
+    return _decoration.createCellHoverDecoration;
+  }
+});
+Object.defineProperty(exports, "createColumnControlsDecoration", {
+  enumerable: true,
+  get: function get() {
+    return _decoration.createColumnControlsDecoration;
+  }
+});
+Object.defineProperty(exports, "createColumnLineResize", {
+  enumerable: true,
+  get: function get() {
+    return _decoration.createColumnLineResize;
+  }
+});
+Object.defineProperty(exports, "createColumnSelectedDecoration", {
+  enumerable: true,
+  get: function get() {
+    return _decoration.createColumnSelectedDecoration;
+  }
+});
+Object.defineProperty(exports, "createControlsHoverDecoration", {
+  enumerable: true,
+  get: function get() {
+    return _decoration.createControlsHoverDecoration;
+  }
+});
+Object.defineProperty(exports, "createResizeHandleDecoration", {
+  enumerable: true,
+  get: function get() {
+    return _decoration.createResizeHandleDecoration;
+  }
+});
+Object.defineProperty(exports, "findControlsHoverDecoration", {
+  enumerable: true,
+  get: function get() {
+    return _decoration.findControlsHoverDecoration;
+  }
+});
+Object.defineProperty(exports, "getColumnClassNames", {
+  enumerable: true,
+  get: function get() {
+    return _columnControls.getColumnClassNames;
+  }
+});
+Object.defineProperty(exports, "getColumnDeleteButtonParams", {
+  enumerable: true,
+  get: function get() {
+    return _columnControls.getColumnDeleteButtonParams;
+  }
+});
+Object.defineProperty(exports, "getColumnOrRowIndex", {
+  enumerable: true,
+  get: function get() {
+    return _dom.getColumnOrRowIndex;
+  }
+});
+Object.defineProperty(exports, "getColumnsWidths", {
+  enumerable: true,
+  get: function get() {
+    return _columnControls.getColumnsWidths;
+  }
+});
+Object.defineProperty(exports, "getMergedCellsPositions", {
+  enumerable: true,
+  get: function get() {
+    return _table.getMergedCellsPositions;
+  }
+});
+Object.defineProperty(exports, "getMousePositionHorizontalRelativeByElement", {
+  enumerable: true,
+  get: function get() {
+    return _dom.getMousePositionHorizontalRelativeByElement;
+  }
+});
+Object.defineProperty(exports, "getMousePositionVerticalRelativeByElement", {
+  enumerable: true,
+  get: function get() {
+    return _dom.getMousePositionVerticalRelativeByElement;
+  }
+});
+Object.defineProperty(exports, "getRowClassNames", {
+  enumerable: true,
+  get: function get() {
+    return _rowControls.getRowClassNames;
+  }
+});
+Object.defineProperty(exports, "getRowDeleteButtonParams", {
+  enumerable: true,
+  get: function get() {
+    return _rowControls.getRowDeleteButtonParams;
+  }
+});
+Object.defineProperty(exports, "getRowHeights", {
+  enumerable: true,
+  get: function get() {
+    return _rowControls.getRowHeights;
+  }
+});
+Object.defineProperty(exports, "getRowsParams", {
+  enumerable: true,
+  get: function get() {
+    return _rowControls.getRowsParams;
+  }
+});
+Object.defineProperty(exports, "getSelectedCellInfo", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.getSelectedCellInfo;
+  }
+});
+Object.defineProperty(exports, "getSelectedColumnIndexes", {
+  enumerable: true,
+  get: function get() {
+    return _selection.getSelectedColumnIndexes;
+  }
+});
+Object.defineProperty(exports, "getSelectedRowIndexes", {
+  enumerable: true,
+  get: function get() {
+    return _selection.getSelectedRowIndexes;
+  }
+});
+Object.defineProperty(exports, "getSelectedTableInfo", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.getSelectedTableInfo;
+  }
+});
+Object.defineProperty(exports, "getTableWidth", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.getTableWidth;
+  }
+});
+Object.defineProperty(exports, "hasResizeHandler", {
+  enumerable: true,
+  get: function get() {
+    return _dom.hasResizeHandler;
+  }
+});
+Object.defineProperty(exports, "isCell", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isCell;
+  }
+});
+Object.defineProperty(exports, "isColumnControlsDecorations", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isColumnControlsDecorations;
+  }
+});
+Object.defineProperty(exports, "isColumnDeleteButtonVisible", {
+  enumerable: true,
+  get: function get() {
+    return _columnControls.isColumnDeleteButtonVisible;
+  }
+});
+Object.defineProperty(exports, "isCornerButton", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isCornerButton;
+  }
+});
+Object.defineProperty(exports, "isInsertRowButton", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isInsertRowButton;
+  }
+});
+Object.defineProperty(exports, "isIsolating", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.isIsolating;
+  }
+});
+Object.defineProperty(exports, "isLayoutSupported", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.isLayoutSupported;
+  }
+});
+Object.defineProperty(exports, "isResizeHandleDecoration", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isResizeHandleDecoration;
+  }
+});
+Object.defineProperty(exports, "isRowControlsButton", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isRowControlsButton;
+  }
+});
+Object.defineProperty(exports, "isRowDeleteButtonVisible", {
+  enumerable: true,
+  get: function get() {
+    return _rowControls.isRowDeleteButtonVisible;
+  }
+});
+Object.defineProperty(exports, "isSelectionUpdated", {
+  enumerable: true,
+  get: function get() {
+    return _selection.isSelectionUpdated;
+  }
+});
+Object.defineProperty(exports, "isTableContainerOrWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isTableContainerOrWrapper;
+  }
+});
+Object.defineProperty(exports, "isTableControlsButton", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isTableControlsButton;
+  }
+});
+Object.defineProperty(exports, "normalizeSelection", {
+  enumerable: true,
+  get: function get() {
+    return _selection.normalizeSelection;
+  }
+});
+Object.defineProperty(exports, "removeTableFromFirstChild", {
+  enumerable: true,
+  get: function get() {
+    return _paste.removeTableFromFirstChild;
+  }
+});
+Object.defineProperty(exports, "removeTableFromLastChild", {
+  enumerable: true,
+  get: function get() {
+    return _paste.removeTableFromLastChild;
+  }
+});
+Object.defineProperty(exports, "tablesHaveDifferentColumnWidths", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.tablesHaveDifferentColumnWidths;
+  }
+});
+Object.defineProperty(exports, "tablesHaveDifferentNoOfColumns", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.tablesHaveDifferentNoOfColumns;
+  }
+});
+Object.defineProperty(exports, "transformSliceToCorrectEmptyTableCells", {
+  enumerable: true,
+  get: function get() {
+    return _paste.transformSliceToCorrectEmptyTableCells;
+  }
+});
+Object.defineProperty(exports, "transformSliceToFixHardBreakProblemOnCopyFromCell", {
+  enumerable: true,
+  get: function get() {
+    return _paste.transformSliceToFixHardBreakProblemOnCopyFromCell;
+  }
+});
+Object.defineProperty(exports, "transformSliceToRemoveOpenTable", {
+  enumerable: true,
+  get: function get() {
+    return _paste.transformSliceToRemoveOpenTable;
+  }
+});
+Object.defineProperty(exports, "unwrapContentFromTable", {
+  enumerable: true,
+  get: function get() {
+    return _paste.unwrapContentFromTable;
+  }
+});
+Object.defineProperty(exports, "updateDecorations", {
+  enumerable: true,
+  get: function get() {
+    return _decoration.updateDecorations;
+  }
+});
+Object.defineProperty(exports, "updatePluginStateDecorations", {
+  enumerable: true,
+  get: function get() {
+    return _updatePluginStateDecorations.updatePluginStateDecorations;
+  }
+});
+Object.defineProperty(exports, "updateResizeHandles", {
+  enumerable: true,
+  get: function get() {
+    return _dom.updateResizeHandles;
+  }
+});
+
+var _selection = require("./selection");
+
+var _decoration = require("./decoration");
+
+var _nodes = require("./nodes");
+
+var _paste = require("./paste");
+
+var _dom = require("./dom");
+
+var _columnControls = require("./column-controls");
+
+var _rowControls = require("./row-controls");
+
+var _analytics = require("./analytics");
+
+var _table = require("./table");
+
+var _updatePluginStateDecorations = require("./update-plugin-state-decorations");