@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

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

@@ -0,0 +1,290 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { defineMessages } from 'react-intl-next';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import commonMessages from '@atlaskit/editor-common/messages';
+import { clearHoverSelection, hoverTable } from './commands';
+import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
+import { getPluginState } from './pm-plugins/plugin-factory';
+import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { TableCssClassName } from './types';
+import { isReferencedSource } from './utils/referentiality';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
+import { canMergeCells } from './transforms';
+import { splitCell } from '@atlaskit/editor-tables/utils';
+import tableMessages from './ui/messages';
+import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
+import { findParentDomRefOfType } from 'prosemirror-utils';
+import { closestElement } from '@atlaskit/editor-common/utils'; // TODO: ED-14403 investigate why these translations don't work
+
+export var messages = 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'
+  }
+});
+export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
+  var formatMessage = _ref.formatMessage;
+  var options = [{
+    id: 'editor.table.headerRow',
+    title: formatMessage(messages.headerRow),
+    onClick: toggleHeaderRowWithAnalytics(editorAnalyticsAPI),
+    selected: state.isHeaderRowEnabled,
+    hidden: !config.allowHeaderRow
+  }, {
+    id: 'editor.table.headerColumn',
+    title: formatMessage(messages.headerColumn),
+    onClick: toggleHeaderColumnWithAnalytics(editorAnalyticsAPI),
+    selected: state.isHeaderColumnEnabled,
+    hidden: !config.allowHeaderColumn
+  }, {
+    id: 'editor.table.numberedColumn',
+    title: formatMessage(messages.numberedColumn),
+    onClick: toggleNumberColumnWithAnalytics(editorAnalyticsAPI),
+    selected: state.isNumberColumnEnabled,
+    hidden: !config.allowNumberColumn
+  }, {
+    id: 'editor.table.collapseTable',
+    title: formatMessage(messages.collapseTable),
+    onClick: 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.
+
+export 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(tableMessages.insertColumn),
+    onClick: function onClick(state, dispatch, view) {
+      var selectionRect = getClosestSelectionRect(state);
+      var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
+
+      if (index) {
+        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+      }
+
+      return true;
+    },
+    selected: false,
+    disabled: false
+  }, {
+    id: 'editor.table.insertRow',
+    title: formatMessage(tableMessages.insertRow),
+    onClick: function onClick(state, dispatch) {
+      var selectionRect = getClosestSelectionRect(state);
+      var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom;
+
+      if (index) {
+        insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, {
+          index: index,
+          moveCursorToInsertedRow: true
+        })(state, dispatch);
+      }
+
+      return true;
+    },
+    selected: false,
+    disabled: false
+  }, {
+    id: 'editor.table.removeColumns',
+    title: formatMessage(tableMessages.removeColumns, {
+      0: numberOfColumns
+    }),
+    onClick: function onClick(state, dispatch, view) {
+      var selectionRect = getClosestSelectionRect(state);
+
+      if (selectionRect) {
+        deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
+      }
+
+      return true;
+    },
+    selected: false,
+    disabled: false
+  }, {
+    id: 'editor.table.removeRows',
+    title: formatMessage(tableMessages.removeRows, {
+      0: numberOfRows
+    }),
+    onClick: function onClick(state, dispatch) {
+      var selectionRect = getClosestSelectionRect(state);
+
+      if (selectionRect) {
+        deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, selectionRect, false)(state, dispatch);
+      }
+
+      return true;
+    },
+    selected: false,
+    disabled: false
+  }, {
+    id: 'editor.table.mergeCells',
+    title: formatMessage(ContextualMenuMessages.mergeCells),
+    onClick: mergeCellsWithAnalytics(editorAnalyticsAPI),
+    selected: false,
+    disabled: !canMergeCells(editorState.tr)
+  }, {
+    id: 'editor.table.splitCell',
+    title: formatMessage(ContextualMenuMessages.splitCell),
+    onClick: splitCellWithAnalytics(editorAnalyticsAPI),
+    selected: false,
+    disabled: !splitCell(editorState)
+  }, {
+    id: 'editor.table.clearCells',
+    title: formatMessage(ContextualMenuMessages.clearCells, {
+      0: Math.max(numberOfColumns, numberOfRows)
+    }),
+    onClick: function onClick(state, dispatch) {
+      var _getPluginState = getPluginState(state),
+          targetCellPosition = _getPluginState.targetCellPosition;
+
+      emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, targetCellPosition)(state, dispatch);
+      return true;
+    },
+    selected: false,
+    disabled: false
+  }];
+  return {
+    id: 'editor.table.cellOptions',
+    type: 'dropdown',
+    title: formatMessage(tableMessages.cellOptions),
+    hidden: true,
+    options: options
+  };
+};
+
+var getClosestSelectionRect = function getClosestSelectionRect(state) {
+  var selection = state.selection;
+  return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
+};
+
+export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+  return function (config) {
+    return function (state, intl) {
+      var tableObject = findTable(state.selection);
+      var pluginState = getPluginState(state);
+      var resizeState = tableResizingPluginKey.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 && isReferencedSource(state, localId)) {
+          confirmDialog = {
+            okButtonLabel: intl.formatMessage(tableMessages.confirmDeleteLinkedModalOKButton),
+            message: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessage)
+          };
+        }
+
+        var getDomRef = function getDomRef(editorView) {
+          var element;
+          var domAtPos = editorView.domAtPos.bind(editorView);
+          var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
+
+          if (parent) {
+            var tableRef = parent.querySelector('table') || undefined;
+
+            if (tableRef) {
+              element = closestElement(tableRef, ".".concat(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(_toConsumableArray(cellItems), [{
+            type: 'extensions-placeholder',
+            separator: 'end'
+          }, {
+            id: 'editor.table.delete',
+            type: 'button',
+            appearance: 'danger',
+            icon: RemoveIcon,
+            onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
+            disabled: !!resizeState && !!resizeState.dragging,
+            onMouseEnter: hoverTable(true),
+            onMouseLeave: clearHoverSelection(),
+            title: intl.formatMessage(commonMessages.remove),
+            confirmDialog: confirmDialog
+          }])
+        };
+      }
+
+      return;
+    };
+  };
+};
+
+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/esm/plugins/table/transforms/column-width.js

@@ -0,0 +1,175 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
+import { setMeta } from './metadata';
+import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
+import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
+export var updateColumnWidths = function updateColumnWidths(resizeState, table, start) {
+  return function (tr) {
+    var map = 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 = 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 = 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
+ */
+
+export 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 || !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 = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout); // The is the width the table can reach before overflowing
+
+      var maxSize = getTableMaxWidth({
+        table: table.node,
+        tableStart: table.start,
+        state: state,
+        layout: layout,
+        getEditorContainerWidth: getEditorContainerWidth
+      });
+      var resizeState = getResizeState({
+        minWidth: tableCellMinWidth,
+        table: table.node,
+        start: table.start,
+        tableRef: tableRef,
+        domAtPos: domAtPos,
+        maxSize: maxSize
+      });
+      var previousTableWidth = resizeState.tableWidth - 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 = scaleTableTo(resizeState, maxSize);
+      }
+
+      return updateColumnWidths(resizeState, table.node, table.start)(tr);
+    };
+  };
+};