@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/util.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findStickyHeaderForTable = void 0;
+
+// only worry about the first row for now
+var findStickyHeaderForTable = function findStickyHeaderForTable(state, tablePos) {
+  if (!state || tablePos === undefined) {
+    return undefined;
+  }
+
+  var rowInfo = state.find(function (rowInfo) {
+    return rowInfo.pos === tablePos + 1;
+  });
+
+  if (!rowInfo) {
+    return undefined;
+  }
+
+  return rowInfo.sticky ? rowInfo : undefined;
+};
+
+exports.findStickyHeaderForTable = findStickyHeaderForTable;

package/dist/cjs/plugins/table/pm-plugins/table-local-id.js

@@ -0,0 +1,205 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+
+var _adfSchema = require("@atlaskit/adf-schema");
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var pluginKey = new _prosemirrorState.PluginKey('tableLocalIdPlugin');
+
+var getPluginState = function getPluginState(state) {
+  return state && pluginKey.getState(state);
+};
+/**
+ * Traverses a transaction's steps to see if we're inserting any tables
+ */
+
+
+var checkIsAddingTable = function checkIsAddingTable(transaction, nodeType) {
+  return transaction.steps.some(function (step) {
+    return (0, _utils.stepAddsOneOf)(step, new Set([nodeType]));
+  });
+};
+/**
+ * Ensures uniqueness of `localId`s on tables being created or edited
+ */
+
+
+var createPlugin = function createPlugin(dispatch) {
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          parsedForLocalIds: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(pluginKey);
+
+        if (meta) {
+          var keys = Object.keys(meta);
+          var changed = keys.some(function (key) {
+            return pluginState[key] !== meta[key];
+          });
+
+          if (changed) {
+            var newState = _objectSpread(_objectSpread({}, pluginState), meta);
+
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+
+        return pluginState;
+      }
+    },
+    view: function view() {
+      return {
+        /**
+         * Utilise the update cycle for _one_ scan through an initial doc
+         * to ensure existing tables without IDs get them when this plugin is
+         * enabled.
+         *
+         * This entire block can be skipped if we simply remove the `checkIsAddingTable`
+         * check in appendTransaction, but that comes with 2 cons:
+         *
+         * 1. require a transaction before we actually add the local IDs
+         * 2. ever slightly more unncessary checks
+         *
+         * Finally, this never happens in practice when utilising this in
+         * confluence, as the collab/synchrony initialisation process will
+         * trigger a transaction which adds tables, and thus this plugin will
+         * add/dedupe the necessary IDs. But general usage of the editor
+         * without collab should still solve for IDs.
+         */
+        update: function update(editorView) {
+          var state = editorView.state;
+          var pluginState = getPluginState(state);
+
+          if (!pluginState) {
+            return;
+          }
+
+          var parsed = pluginState.parsedForLocalIds;
+
+          if (parsed) {
+            return;
+          }
+
+          var table = state.schema.nodes.table;
+          (0, _rafSchd.default)(function () {
+            var tr = state.tr;
+            var tableIdWasAdded = false;
+            editorView.state.doc.descendants(function (node, pos) {
+              var isTable = node.type === table;
+              var localId = node.attrs.localId;
+
+              if (isTable && !localId) {
+                tableIdWasAdded = true;
+                tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+                  localId: _adfSchema.uuid.generate()
+                }));
+                return false;
+              }
+              /**
+               * Otherwise continue traversing, we can encounter tables nested in
+               * expands/bodiedExtensions
+               */
+
+
+              return true;
+            });
+
+            if (tableIdWasAdded) {
+              tr.setMeta('addToHistory', false);
+              editorView.dispatch(tr);
+            }
+          })();
+          editorView.dispatch(state.tr.setMeta(pluginKey, {
+            parsedForLocalIds: true
+          }));
+        }
+      };
+    },
+    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+      var modified = false;
+      var tr = newState.tr;
+      var table = newState.schema.nodes.table;
+      var idsObserved = new Set();
+      transactions.forEach(function (transaction) {
+        if (!transaction.docChanged) {
+          return;
+        } // Don't interfere with cut as it clashes with fixTables & we don't need
+        // to handle any extra cut cases in this plugin
+
+
+        var uiEvent = transaction.getMeta('uiEvent');
+
+        if (uiEvent === 'cut') {
+          return;
+        }
+        /** Check if we're actually inserting a table, otherwise we can ignore this tr */
+
+
+        var isAddingTable = checkIsAddingTable(transaction, table);
+
+        if (!isAddingTable) {
+          return;
+        } // Can't simply look at changed nodes, as we could be adding a table
+
+
+        newState.doc.descendants(function (node, pos) {
+          var isTable = node.type === table;
+          var localId = node.attrs.localId; // Dealing with a table - make sure it's a unique ID
+
+          if (isTable) {
+            if (localId && !idsObserved.has(localId)) {
+              idsObserved.add(localId); // Also add a localId if it happens to not have one,
+            } else if (!localId || idsObserved.has(localId)) {
+              modified = true;
+              tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+                localId: _adfSchema.uuid.generate()
+              }));
+            }
+
+            return false;
+          }
+          /**
+           * Otherwise continue traversing, we can encounter tables nested in
+           * expands/bodiedExtensions
+           */
+
+
+          return true;
+        });
+      });
+
+      if (modified) {
+        return tr;
+      }
+
+      return;
+    }
+  });
+};
+
+exports.createPlugin = createPlugin;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/commands.js

@@ -0,0 +1,158 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stopResizing = exports.setResizeHandlePos = exports.setLastClick = exports.setDragging = exports.scaleTable = exports.evenColumns = exports.distributeColumnsWidths = void 0;
+
+var _utils = require("@atlaskit/editor-tables/utils");
+
+var _transforms = require("../../transforms");
+
+var _pluginFactory = require("./plugin-factory");
+
+var _utils2 = require("./utils");
+
+// Scale the table to meet new requirements (col, layout change etc)
+var scaleTable = function scaleTable(tableRef, options, domAtPos) {
+  return function (state, dispatch) {
+    if (!tableRef) {
+      return false;
+    }
+
+    var node = options.node,
+        start = options.start,
+        parentWidth = options.parentWidth; // If a table has not been resized yet, columns should be auto.
+
+    if ((0, _utils2.hasTableBeenResized)(node) === false) {
+      // If its not a re-sized table, we still want to re-create cols
+      // To force reflow of columns upon delete.
+      (0, _utils2.insertColgroupFromNode)(tableRef, node);
+      return false;
+    }
+
+    var resizeState;
+
+    if (parentWidth) {
+      resizeState = (0, _utils2.scaleWithParent)(tableRef, parentWidth, node, start, domAtPos);
+    } else {
+      resizeState = (0, _utils2.scale)(tableRef, options, domAtPos);
+    }
+
+    if (resizeState) {
+      var _tr = state.tr;
+      _tr = (0, _transforms.updateColumnWidths)(resizeState, node, start)(_tr);
+
+      if (_tr.docChanged && dispatch) {
+        _tr.setMeta('scrollIntoView', false); // TODO: ED-8995
+        // We need to do this check to reduce the number of race conditions when working with tables.
+        // This metadata is been used in the sendTransaction function in the Collab plugin
+
+
+        _tr.setMeta('scaleTable', true);
+
+        dispatch(_tr);
+        return true;
+      }
+    }
+
+    return false;
+  };
+};
+
+exports.scaleTable = scaleTable;
+
+var evenColumns = function evenColumns(_ref) {
+  var resizeState = _ref.resizeState,
+      table = _ref.table,
+      start = _ref.start,
+      event = _ref.event;
+  return function (state, dispatch) {
+    if (!(0, _utils.isTableSelected)(state.selection)) {
+      return false;
+    } // double click detection logic
+    // Note: ProseMirror's handleDoubleClick doesn't quite work with DOM mousedown event handler
+
+
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+        lastClick = _getPluginState.lastClick;
+
+    var now = Date.now();
+
+    if (lastClick && now - lastClick.time < 500 && (0, _utils2.isClickNear)(event, lastClick)) {
+      var newState = (0, _utils2.evenAllColumnsWidths)(resizeState);
+      setLastClick(null, function (tr) {
+        return (0, _transforms.updateColumnWidths)(newState, table, start)(tr);
+      })(state, dispatch);
+      return true;
+    }
+
+    setLastClick({
+      x: event.clientX,
+      y: event.clientY,
+      time: now
+    })(state, dispatch);
+    return false;
+  };
+};
+
+exports.evenColumns = evenColumns;
+
+var distributeColumnsWidths = function distributeColumnsWidths(newResizeState, table) {
+  return function (state, dispatch) {
+    if (dispatch) {
+      var _tr2 = (0, _transforms.updateColumnWidths)(newResizeState, table.node, table.start)(state.tr);
+
+      stopResizing(_tr2)(state, dispatch);
+    }
+
+    return true;
+  };
+};
+
+exports.distributeColumnsWidths = distributeColumnsWidths;
+
+var setResizeHandlePos = function setResizeHandlePos(resizeHandlePos) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'SET_RESIZE_HANDLE_POSITION',
+    data: {
+      resizeHandlePos: resizeHandlePos
+    }
+  });
+};
+
+exports.setResizeHandlePos = setResizeHandlePos;
+
+var stopResizing = function stopResizing(tr) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'STOP_RESIZING'
+  }, function (originalTr) {
+    return (tr || originalTr).setMeta('scrollIntoView', false);
+  });
+};
+
+exports.stopResizing = stopResizing;
+
+var setDragging = function setDragging(dragging, tr) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'SET_DRAGGING',
+    data: {
+      dragging: dragging
+    }
+  }, function (originalTr) {
+    return tr || originalTr;
+  });
+};
+
+exports.setDragging = setDragging;
+
+var setLastClick = function setLastClick(lastClick, transform) {
+  return (0, _pluginFactory.createCommand)({
+    type: 'SET_LAST_CLICK',
+    data: {
+      lastClick: lastClick
+    }
+  }, transform);
+};
+
+exports.setLastClick = setLastClick;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleMouseDown = void 0;
+
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+
+var _utils = require("@atlaskit/editor-tables/utils");
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
+
+var _transforms = require("../../transforms");
+
+var _utils2 = require("../../utils");
+
+var _commands = require("./commands");
+
+var _pluginFactory = require("./plugin-factory");
+
+var _utils3 = require("./utils");
+
+var _analytics = require("@atlaskit/editor-common/analytics");
+
+var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
+  var state = view.state,
+      dispatch = view.dispatch;
+  var editorDisabled = !view.editable;
+  var domAtPos = view.domAtPos.bind(view);
+
+  if (editorDisabled || localResizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(localResizeHandlePos))) {
+    return false;
+  }
+
+  event.preventDefault();
+  var mouseDownTime = event.timeStamp;
+  var cell = state.doc.nodeAt(localResizeHandlePos);
+  var $cell = state.doc.resolve(localResizeHandlePos);
+  var originalTable = $cell.node(-1);
+  var start = $cell.start(-1);
+  var dom = domAtPos(start).node;
+
+  if (dom && dom.nodeName !== 'TABLE') {
+    dom = dom.closest('table');
+  }
+
+  var containerWidth = getEditorContainerWidth();
+  var parentWidth = (0, _nodeWidth.getParentNodeWidth)(start, state, containerWidth);
+  var maxSize = parentWidth || (0, _utils3.getLayoutSize)(dom.getAttribute('data-layout'), containerWidth.width, {});
+
+  if (originalTable.attrs.isNumberColumnEnabled) {
+    maxSize -= _editorSharedStyles.akEditorTableNumberColumnWidth;
+  }
+
+  var resizeState = (0, _utils3.getResizeState)({
+    minWidth: _styles.tableCellMinWidth,
+    maxSize: maxSize,
+    table: originalTable,
+    tableRef: dom,
+    start: start,
+    domAtPos: domAtPos
+  });
+
+  if ((0, _commands.evenColumns)({
+    resizeState: resizeState,
+    table: originalTable,
+    start: start,
+    event: event
+  })(state, dispatch)) {
+    finish(event);
+    return true;
+  }
+
+  var width = (0, _utils3.currentColWidth)(view, localResizeHandlePos, cell.attrs);
+  (0, _commands.setDragging)({
+    startX: event.clientX,
+    startWidth: width
+  })(state, dispatch);
+
+  function finish(event) {
+    window.removeEventListener('mouseup', finish);
+    window.removeEventListener('mousemove', move);
+    var clientX = event.clientX;
+    var state = view.state,
+        dispatch = view.dispatch;
+
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+        dragging = _getPluginState.dragging,
+        resizeHandlePos = _getPluginState.resizeHandlePos;
+
+    if (resizeHandlePos === null) {
+      return (0, _commands.stopResizing)()(state, dispatch);
+    }
+
+    if (!(0, _utils3.pointsAtCell)(state.doc.resolve(resizeHandlePos))) {
+      return;
+    } // resizeHandlePos could be remapped via a collab change.
+    // Fetch a fresh reference of the table.
+
+
+    var $cell = state.doc.resolve(resizeHandlePos);
+    var start = $cell.start(-1);
+    var table = $cell.node(-1); // If we let go in the same place we started, dont need to do anything.
+
+    if (dragging && clientX === dragging.startX) {
+      return (0, _commands.stopResizing)()(state, dispatch);
+    }
+
+    var tr = state.tr;
+
+    if (dragging) {
+      var startX = dragging.startX; // If the table has changed (via collab for example) don't apply column widths
+      // For example, if a table col is deleted we won't be able to reliably remap the new widths
+      // There may be a more elegant solution to this, to avoid a jarring experience.
+
+      if (table.eq(originalTable)) {
+        var map = _tableMap.TableMap.get(table);
+
+        var colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
+        var selectionRect = (0, _utils.getSelectionRect)(state.selection);
+        var selectedColumns = selectionRect ? (0, _utils2.getSelectedColumnIndexes)(selectionRect) : []; // only selected (or selected - 1) columns should be distributed
+
+        var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
+        var newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, resizingSelectedColumns ? selectedColumns : undefined);
+        tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
+
+        if (colIndex === map.width - 1) {
+          var mouseUpTime = event.timeStamp;
+          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+            action: _analytics.TABLE_ACTION.ATTEMPTED_TABLE_WIDTH_CHANGE,
+            actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            attributes: {
+              type: 'table-border',
+              position: 'right',
+              duration: mouseUpTime - mouseDownTime,
+              delta: Math.abs(clientX - dragging.startX)
+            },
+            eventType: _analytics.EVENT_TYPE.UI
+          })(tr);
+        }
+      }
+
+      return (0, _commands.stopResizing)(tr)(state, dispatch);
+    }
+  }
+
+  function move(event) {
+    var clientX = event.clientX,
+        which = event.which;
+    var state = view.state;
+
+    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+        dragging = _getPluginState2.dragging,
+        resizeHandlePos = _getPluginState2.resizeHandlePos;
+
+    if (!which || !dragging || resizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(resizeHandlePos))) {
+      return finish(event);
+    }
+
+    var $cell = state.doc.resolve(resizeHandlePos);
+    var table = $cell.node(-1);
+
+    var map = _tableMap.TableMap.get(table);
+
+    var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
+    (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom);
+    (0, _utils3.updateControls)(getEditorFeatureFlags)(state);
+    (0, _utils2.updateResizeHandles)(dom);
+  }
+
+  window.addEventListener('mouseup', finish);
+  window.addEventListener('mousemove', move);
+  return true;
+};
+
+exports.handleMouseDown = handleMouseDown;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.createPlugin;
+  }
+});
+Object.defineProperty(exports, "pluginKey", {
+  enumerable: true,
+  get: function get() {
+    return _pluginKey.pluginKey;
+  }
+});
+Object.defineProperty(exports, "scaleTable", {
+  enumerable: true,
+  get: function get() {
+    return _commands.scaleTable;
+  }
+});
+
+var _plugin = require("./plugin");
+
+var _commands = require("./commands");
+
+var _pluginKey = require("./plugin-key");

package/dist/cjs/plugins/table/pm-plugins/table-resizing/plugin-factory.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPluginState = exports.createPluginState = exports.createCommand = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _pluginKey = require("./plugin-key");
+
+var _reducer = _interopRequireDefault(require("./reducer"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function mapping(tr, pluginState) {
+  if (pluginState && pluginState.resizeHandlePos !== null) {
+    return _objectSpread(_objectSpread({}, pluginState), {}, {
+      resizeHandlePos: tr.mapping.map(pluginState.resizeHandlePos)
+    });
+  }
+
+  return pluginState;
+}
+
+var factory = (0, _utils.pluginFactory)(_pluginKey.pluginKey, _reducer.default, {
+  mapping: mapping
+});
+var createCommand = factory.createCommand;
+exports.createCommand = createCommand;
+var createPluginState = factory.createPluginState;
+exports.createPluginState = createPluginState;
+var getPluginState = factory.getPluginState;
+exports.getPluginState = getPluginState;

package/dist/cjs/plugins/table/pm-plugins/table-resizing/plugin-key.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+var pluginKey = new _prosemirrorState.PluginKey('tableFlexiColumnResizing');
+exports.pluginKey = pluginKey;