@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/cjs/plugins/table/toolbar.js

@@ -0,0 +1,325 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+
+var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
+
+var _commands = require("./commands");
+
+var _commandsWithAnalytics = require("./commands-with-analytics");
+
+var _pluginFactory = require("./pm-plugins/plugin-factory");
+
+var _tableResizing = require("./pm-plugins/table-resizing");
+
+var _types = require("./types");
+
+var _referentiality = require("./utils/referentiality");
+
+var _analytics = require("@atlaskit/editor-common/analytics");
+
+var _utils = require("@atlaskit/editor-tables/utils");
+
+var _transforms = require("./transforms");
+
+var _messages2 = _interopRequireDefault(require("./ui/messages"));
+
+var _ContextualMenu = require("./ui/FloatingContextualMenu/ContextualMenu");
+
+var _prosemirrorUtils = require("prosemirror-utils");
+
+var _utils2 = require("@atlaskit/editor-common/utils");
+
+// TODO: ED-14403 investigate why these translations don't work
+var messages = (0, _reactIntlNext.defineMessages)({
+  tableOptions: {
+    id: 'fabric.editor.tableOptions',
+    defaultMessage: 'Table options',
+    description: 'Opens a menu with additional table options'
+  },
+  headerRow: {
+    id: 'fabric.editor.headerRow',
+    defaultMessage: 'Header row',
+    description: 'Marks the first table row as a header row'
+  },
+  headerColumn: {
+    id: 'fabric.editor.headerColumn',
+    defaultMessage: 'Header column',
+    description: 'Marks the first table column as a header row'
+  },
+  numberedColumn: {
+    id: 'fabric.editor.numberedColumn',
+    defaultMessage: 'Numbered column',
+    description: 'Adds an auto-numbering column to your table'
+  },
+  collapseTable: {
+    id: 'fabric.editor.collapseTable',
+    defaultMessage: 'Collapse table',
+    description: 'Wraps table in an expand'
+  }
+});
+exports.messages = messages;
+
+var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
+  var formatMessage = _ref.formatMessage;
+  var options = [{
+    id: 'editor.table.headerRow',
+    title: formatMessage(messages.headerRow),
+    onClick: (0, _commandsWithAnalytics.toggleHeaderRowWithAnalytics)(editorAnalyticsAPI),
+    selected: state.isHeaderRowEnabled,
+    hidden: !config.allowHeaderRow
+  }, {
+    id: 'editor.table.headerColumn',
+    title: formatMessage(messages.headerColumn),
+    onClick: (0, _commandsWithAnalytics.toggleHeaderColumnWithAnalytics)(editorAnalyticsAPI),
+    selected: state.isHeaderColumnEnabled,
+    hidden: !config.allowHeaderColumn
+  }, {
+    id: 'editor.table.numberedColumn',
+    title: formatMessage(messages.numberedColumn),
+    onClick: (0, _commandsWithAnalytics.toggleNumberColumnWithAnalytics)(editorAnalyticsAPI),
+    selected: state.isNumberColumnEnabled,
+    hidden: !config.allowNumberColumn
+  }, {
+    id: 'editor.table.collapseTable',
+    title: formatMessage(messages.collapseTable),
+    onClick: (0, _commandsWithAnalytics.wrapTableInExpandWithAnalytics)(editorAnalyticsAPI),
+    selected: !!state.isTableCollapsed,
+    disabled: !state.canCollapseTable,
+    hidden: !config.allowCollapse
+  }];
+  return {
+    id: 'editor.table.tableOptions',
+    type: 'dropdown',
+    title: formatMessage(messages.tableOptions),
+    hidden: options.every(function (option) {
+      return option.hidden;
+    }),
+    options: options
+  };
+}; // Added these options for mobile. Mobile bridge translates this menu and
+// relay it to the native mobile. Native mobile displays the menu
+// with native widgets. It's enabled via a plugin config.
+
+
+exports.getToolbarMenuConfig = getToolbarMenuConfig;
+
+var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
+  var formatMessage = _ref2.formatMessage;
+  var top = initialSelectionRect.top,
+      bottom = initialSelectionRect.bottom,
+      right = initialSelectionRect.right,
+      left = initialSelectionRect.left;
+  var numberOfColumns = right - left;
+  var numberOfRows = bottom - top;
+  var options = [{
+    id: 'editor.table.insertColumn',
+    title: formatMessage(_messages2.default.insertColumn),
+    onClick: function onClick(state, dispatch, view) {
+      var selectionRect = getClosestSelectionRect(state);
+      var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
+
+      if (index) {
+        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+      }
+
+      return true;
+    },
+    selected: false,
+    disabled: false
+  }, {
+    id: 'editor.table.insertRow',
+    title: formatMessage(_messages2.default.insertRow),
+    onClick: function onClick(state, dispatch) {
+      var selectionRect = getClosestSelectionRect(state);
+      var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom;
+
+      if (index) {
+        (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, {
+          index: index,
+          moveCursorToInsertedRow: true
+        })(state, dispatch);
+      }
+
+      return true;
+    },
+    selected: false,
+    disabled: false
+  }, {
+    id: 'editor.table.removeColumns',
+    title: formatMessage(_messages2.default.removeColumns, {
+      0: numberOfColumns
+    }),
+    onClick: function onClick(state, dispatch, view) {
+      var selectionRect = getClosestSelectionRect(state);
+
+      if (selectionRect) {
+        (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
+      }
+
+      return true;
+    },
+    selected: false,
+    disabled: false
+  }, {
+    id: 'editor.table.removeRows',
+    title: formatMessage(_messages2.default.removeRows, {
+      0: numberOfRows
+    }),
+    onClick: function onClick(state, dispatch) {
+      var selectionRect = getClosestSelectionRect(state);
+
+      if (selectionRect) {
+        (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, selectionRect, false)(state, dispatch);
+      }
+
+      return true;
+    },
+    selected: false,
+    disabled: false
+  }, {
+    id: 'editor.table.mergeCells',
+    title: formatMessage(_ContextualMenu.messages.mergeCells),
+    onClick: (0, _commandsWithAnalytics.mergeCellsWithAnalytics)(editorAnalyticsAPI),
+    selected: false,
+    disabled: !(0, _transforms.canMergeCells)(editorState.tr)
+  }, {
+    id: 'editor.table.splitCell',
+    title: formatMessage(_ContextualMenu.messages.splitCell),
+    onClick: (0, _commandsWithAnalytics.splitCellWithAnalytics)(editorAnalyticsAPI),
+    selected: false,
+    disabled: !(0, _utils.splitCell)(editorState)
+  }, {
+    id: 'editor.table.clearCells',
+    title: formatMessage(_ContextualMenu.messages.clearCells, {
+      0: Math.max(numberOfColumns, numberOfRows)
+    }),
+    onClick: function onClick(state, dispatch) {
+      var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+          targetCellPosition = _getPluginState.targetCellPosition;
+
+      (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, targetCellPosition)(state, dispatch);
+      return true;
+    },
+    selected: false,
+    disabled: false
+  }];
+  return {
+    id: 'editor.table.cellOptions',
+    type: 'dropdown',
+    title: formatMessage(_messages2.default.cellOptions),
+    hidden: true,
+    options: options
+  };
+};
+
+exports.getToolbarCellOptionsConfig = getToolbarCellOptionsConfig;
+
+var getClosestSelectionRect = function getClosestSelectionRect(state) {
+  var selection = state.selection;
+  return (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
+};
+
+var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+  return function (config) {
+    return function (state, intl) {
+      var tableObject = (0, _utils.findTable)(state.selection);
+      var pluginState = (0, _pluginFactory.getPluginState)(state);
+
+      var resizeState = _tableResizing.pluginKey.getState(state);
+
+      if (tableObject && pluginState.editorHasFocus) {
+        var nodeType = state.schema.nodes.table;
+        var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
+        var cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI); // Check if we need to show confirm dialog for delete button
+
+        var confirmDialog;
+        var localId = tableObject.node.attrs.localId;
+
+        if (localId && (0, _referentiality.isReferencedSource)(state, localId)) {
+          confirmDialog = {
+            okButtonLabel: intl.formatMessage(_messages2.default.confirmDeleteLinkedModalOKButton),
+            message: intl.formatMessage(_messages2.default.confirmDeleteLinkedModalMessage)
+          };
+        }
+
+        var getDomRef = function getDomRef(editorView) {
+          var element;
+          var domAtPos = editorView.domAtPos.bind(editorView);
+          var parent = (0, _prosemirrorUtils.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
+
+          if (parent) {
+            var tableRef = parent.querySelector('table') || undefined;
+
+            if (tableRef) {
+              element = (0, _utils2.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
+            }
+          }
+
+          return element;
+        };
+
+        return {
+          title: 'Table floating controls',
+          getDomRef: getDomRef,
+          nodeType: nodeType,
+          offset: [0, 3],
+          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(cellItems), [{
+            type: 'extensions-placeholder',
+            separator: 'end'
+          }, {
+            id: 'editor.table.delete',
+            type: 'button',
+            appearance: 'danger',
+            icon: _remove.default,
+            onClick: (0, _commandsWithAnalytics.deleteTableWithAnalytics)(editorAnalyticsAPI),
+            disabled: !!resizeState && !!resizeState.dragging,
+            onMouseEnter: (0, _commands.hoverTable)(true),
+            onMouseLeave: (0, _commands.clearHoverSelection)(),
+            title: intl.formatMessage(_messages.default.remove),
+            confirmDialog: confirmDialog
+          }])
+        };
+      }
+
+      return;
+    };
+  };
+};
+
+exports.getToolbarConfig = getToolbarConfig;
+
+var separator = function separator(hidden) {
+  return {
+    type: 'separator',
+    hidden: hidden
+  };
+};
+
+var getCellItems = function getCellItems(pluginConfig, state, _ref3, getEditorContainerWidth, editorAnalyticsAPI) {
+  var formatMessage = _ref3.formatMessage;
+
+  if (pluginConfig.allowCellOptionsInFloatingToolbar) {
+    var initialSelectionRect = getClosestSelectionRect(state);
+
+    if (initialSelectionRect) {
+      var cellOptions = getToolbarCellOptionsConfig(state, initialSelectionRect, {
+        formatMessage: formatMessage
+      }, getEditorContainerWidth, editorAnalyticsAPI);
+      return [cellOptions, separator(cellOptions.hidden)];
+    }
+  }
+
+  return [];
+};

package/dist/cjs/plugins/table/transforms/column-width.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateColumnWidths = exports.rescaleColumns = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _utils = require("../pm-plugins/table-resizing/utils");
+
+var _metadata = require("./metadata");
+
+var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
+
+var _misc = require("../pm-plugins/table-resizing/utils/misc");
+
+var _scaleTable = require("../pm-plugins/table-resizing/utils/scale-table");
+
+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 updateColumnWidths = function updateColumnWidths(resizeState, table, start) {
+  return function (tr) {
+    var map = _tableMap.TableMap.get(table);
+
+    var updatedCellsAttrs = {}; // calculating new attributes for each cell
+
+    for (var columnIndex = 0; columnIndex < map.width; columnIndex++) {
+      for (var rowIndex = 0; rowIndex < map.height; rowIndex++) {
+        var width = resizeState.cols[columnIndex].width;
+        var mapIndex = rowIndex * map.width + columnIndex;
+        var cellPos = map.map[mapIndex];
+
+        var attrs = updatedCellsAttrs[cellPos] || _objectSpread({}, table.nodeAt(cellPos).attrs);
+
+        var colspan = attrs.colspan || 1;
+
+        if (attrs.colwidth && attrs.colwidth.length > colspan) {
+          tr = (0, _metadata.setMeta)({
+            type: 'UPDATE_COLUMN_WIDTHS',
+            problem: 'COLWIDTHS_BEFORE_UPDATE',
+            data: {
+              colwidths: attrs.colwidth,
+              colspan: colspan
+            }
+          })(tr);
+          attrs.colwidth = attrs.colwidth.slice(0, colspan);
+        } // Rowspanning cell that has already been handled
+
+
+        if (rowIndex && map.map[mapIndex] === map.map[mapIndex - map.width]) {
+          continue;
+        }
+
+        var colspanIndex = colspan === 1 ? 0 : columnIndex - map.colCount(cellPos);
+
+        if (attrs.colwidth && attrs.colwidth[colspanIndex] === width) {
+          continue;
+        }
+
+        var colwidths = attrs.colwidth ? attrs.colwidth.slice() : Array.from({
+          length: colspan
+        }, function (_) {
+          return 0;
+        });
+        colwidths[colspanIndex] = width;
+
+        if (colwidths.length > colspan) {
+          tr = (0, _metadata.setMeta)({
+            type: 'UPDATE_COLUMN_WIDTHS',
+            problem: 'COLWIDTHS_AFTER_UPDATE',
+            data: {
+              colwidths: colwidths,
+              colspan: colspan
+            }
+          })(tr);
+          colwidths = colwidths.slice(0, colspan);
+        }
+
+        updatedCellsAttrs[cellPos] = _objectSpread(_objectSpread({}, attrs), {}, {
+          colwidth: colwidths.includes(0) ? undefined : colwidths
+        });
+      }
+    } // updating all cells with new attributes
+
+
+    var rows = [];
+    var seen = {};
+
+    for (var _rowIndex = 0; _rowIndex < map.height; _rowIndex++) {
+      var row = table.child(_rowIndex);
+      var cells = [];
+
+      for (var _columnIndex = 0; _columnIndex < map.width; _columnIndex++) {
+        var _mapIndex = _rowIndex * map.width + _columnIndex;
+
+        var pos = map.map[_mapIndex];
+        var cell = table.nodeAt(pos);
+
+        if (!seen[pos] && cell) {
+          cells.push(cell.type.createChecked(updatedCellsAttrs[pos] || cell.attrs, cell.content, cell.marks));
+          seen[pos] = true;
+        }
+      }
+
+      rows.push(row.type.createChecked(row.attrs, cells, row.marks));
+    }
+
+    var tablePos = start - 1;
+    var selectionBookmark = tr.selection.getBookmark();
+    tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
+    /**
+     * We want to restore to the original selection but w/o applying the mapping. Function
+     * tr.replaceWith puts the selection after the inserted content. We need to manually
+     * set the selection back to original state. Mapping in this case doesn't quite work
+     * e.g. if we change the content before a selection. This is because mapping
+     * means moving it if the content in front of it changed. Instead we can get
+     * bookmark of selection.
+     *
+     * @see https://github.com/ProseMirror/prosemirror/issues/645
+     */
+
+    return tr.setSelection(selectionBookmark.resolve(tr.doc));
+  };
+};
+/**
+ * This function is called when user inserts/deletes a column in a table to;
+ * - rescale all columns (if the table did not overflow before the insertion)
+ * - and update column widths.
+ *
+ * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
+ * @param table
+ * @param view
+ * @returns Updated transaction with rescaled columns for a given table
+ */
+
+
+exports.updateColumnWidths = updateColumnWidths;
+
+var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
+  return function (table, view) {
+    return function (tr) {
+      // If the table has been not been resized we skip updating the size
+      // of columns here.
+      if (!view || !(0, _utils.hasTableBeenResized)(table.node)) {
+        return tr;
+      }
+
+      var state = view.state;
+      var domAtPos = view.domAtPos.bind(view);
+      var maybeTable = domAtPos(table.start).node;
+      var tableRef = maybeTable.closest('table');
+
+      if (!tableRef) {
+        return tr;
+      }
+
+      var layout = (0, _resizeState.normaliseTableLayout)(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout); // The is the width the table can reach before overflowing
+
+      var maxSize = (0, _misc.getTableMaxWidth)({
+        table: table.node,
+        tableStart: table.start,
+        state: state,
+        layout: layout,
+        getEditorContainerWidth: getEditorContainerWidth
+      });
+      var resizeState = (0, _resizeState.getResizeState)({
+        minWidth: _styles.tableCellMinWidth,
+        table: table.node,
+        start: table.start,
+        tableRef: tableRef,
+        domAtPos: domAtPos,
+        maxSize: maxSize
+      });
+      var previousTableWidth = resizeState.tableWidth - _styles.tableNewColumnMinWidth;
+      var tableDidntPreviouslyOverflow = previousTableWidth <= maxSize; // If the new table width will result in the table going into an overflow state
+      // we resize the cells to avoid the overflow occuring
+
+      if (tableDidntPreviouslyOverflow && resizeState.overflow) {
+        resizeState = (0, _scaleTable.scaleTableTo)(resizeState, maxSize);
+      }
+
+      return updateColumnWidths(resizeState, table.node, table.start)(tr);
+    };
+  };
+};
+
+exports.rescaleColumns = rescaleColumns;