@atlaskit/editor-core 174.0.0 → 175.0.1

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

@@ -1,394 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-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, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } 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 { getMergedCellsPositions } from './utils';
-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';
-import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
-import { addColumnAfter, addRowAfter, tooltip, backspace } from '@atlaskit/editor-common/keymaps';
-import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
-import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
-import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
-import { getFeatureFlags } from '../feature-flags-context';
-// TODO: ED-14403 investigate why these translations don't work
-export const 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 const getToolbarMenuConfig = (config, state, {
-  formatMessage
-}, editorAnalyticsAPI) => {
-  const 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(option => option.hidden),
-    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 const getToolbarCellOptionsConfig = (editorState, initialSelectionRect, {
-  formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI) => {
-  const {
-    top,
-    bottom,
-    right,
-    left
-  } = initialSelectionRect;
-  const numberOfColumns = right - left;
-  const numberOfRows = bottom - top;
-  const pluginState = getPluginState(editorState);
-  const options = [{
-    id: 'editor.table.insertColumn',
-    title: formatMessage(tableMessages.insertColumn),
-    onClick: (state, dispatch, view) => {
-      const selectionRect = getClosestSelectionRect(state);
-      const 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,
-    elemAfter: jsx("div", {
-      css: shortcutStyle
-    }, tooltip(addColumnAfter))
-  }, {
-    id: 'editor.table.insertRow',
-    title: formatMessage(tableMessages.insertRow),
-    onClick: (state, dispatch) => {
-      const selectionRect = getClosestSelectionRect(state);
-      const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom;
-
-      if (index) {
-        insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, {
-          index,
-          moveCursorToInsertedRow: true
-        })(state, dispatch);
-      }
-
-      return true;
-    },
-    selected: false,
-    disabled: false,
-    elemAfter: jsx("div", {
-      css: shortcutStyle
-    }, tooltip(addRowAfter))
-  }, {
-    id: 'editor.table.removeColumns',
-    title: formatMessage(tableMessages.removeColumns, {
-      0: numberOfColumns
-    }),
-    onClick: (state, dispatch, view) => {
-      const 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: (state, dispatch) => {
-      const 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)(INPUT_METHOD.FLOATING_TB),
-    selected: false,
-    disabled: !canMergeCells(editorState.tr)
-  }, {
-    id: 'editor.table.splitCell',
-    title: formatMessage(ContextualMenuMessages.splitCell),
-    onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
-    selected: false,
-    disabled: !splitCell(editorState)
-  }];
-
-  if (pluginState.pluginConfig.allowDistributeColumns) {
-    const distributeColumnWidths = (state, dispatch, view) => {
-      const newResizeStateWithAnalytics = view ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, view.domAtPos.bind(view), getEditorContainerWidth) : undefined;
-
-      if (newResizeStateWithAnalytics) {
-        distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
-        return true;
-      }
-
-      return false;
-    };
-
-    options.push({
-      id: 'editor.table.distributeColumns',
-      title: formatMessage(ContextualMenuMessages.distributeColumns),
-      onClick: distributeColumnWidths,
-      selected: false,
-      disabled: numberOfColumns <= 1
-    });
-  }
-
-  if (pluginState.pluginConfig.allowColumnSorting) {
-    const hasMergedCellsInTable = getMergedCellsPositions(editorState.tr).length > 0;
-    options.push({
-      id: 'editor.table.sortColumnAsc',
-      title: formatMessage(ContextualMenuMessages.sortColumnASC),
-      onClick: (state, dispatch) => {
-        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.ASC)(state, dispatch);
-        return true;
-      },
-      selected: false,
-      disabled: hasMergedCellsInTable
-    });
-    options.push({
-      id: 'editor.table.sortColumnDesc',
-      title: formatMessage(ContextualMenuMessages.sortColumnDESC),
-      onClick: (state, dispatch) => {
-        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.DESC)(state, dispatch);
-        return true;
-      },
-      selected: false,
-      disabled: hasMergedCellsInTable
-    });
-  }
-
-  options.push({
-    id: 'editor.table.clearCells',
-    title: formatMessage(ContextualMenuMessages.clearCells, {
-      0: Math.max(numberOfColumns, numberOfRows)
-    }),
-    onClick: (state, dispatch) => {
-      const {
-        targetCellPosition
-      } = getPluginState(state);
-      emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, targetCellPosition)(state, dispatch);
-      return true;
-    },
-    selected: false,
-    disabled: false,
-    elemAfter: jsx("div", {
-      css: shortcutStyle
-    }, tooltip(backspace))
-  });
-  return {
-    id: 'editor.table.cellOptions',
-    type: 'dropdown',
-    title: formatMessage(tableMessages.cellOptions),
-    options,
-    // Increased dropdown item width to prevent labels from being truncated
-    dropdownWidth: 230,
-    showSelected: false
-  };
-};
-
-const getClosestSelectionRect = state => {
-  const selection = state.selection;
-  return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
-};
-
-export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI) => config => (state, intl) => {
-  const tableObject = findTable(state.selection);
-  const pluginState = getPluginState(state);
-  const resizeState = tableResizingPluginKey.getState(state);
-
-  if (tableObject && pluginState.editorHasFocus) {
-    const nodeType = state.schema.nodes.table;
-    const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-    const {
-      tableCellOptionsInFloatingToolbar
-    } = getFeatureFlags(state) || {};
-    const cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
-    const colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
-
-    let confirmDialog;
-    const localId = tableObject.node.attrs.localId;
-
-    if (localId && isReferencedSource(state, localId)) {
-      confirmDialog = {
-        okButtonLabel: intl.formatMessage(tableMessages.confirmDeleteLinkedModalOKButton),
-        message: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessage)
-      };
-    }
-
-    const getDomRef = editorView => {
-      let element;
-      const domAtPos = editorView.domAtPos.bind(editorView);
-      const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
-
-      if (parent) {
-        const tableRef = parent.querySelector('table') || undefined;
-
-        if (tableRef) {
-          element = closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
-        }
-      }
-
-      return element;
-    };
-
-    return {
-      title: 'Table floating controls',
-      getDomRef,
-      nodeType,
-      offset: [0, 3],
-      items: [menu, separator(menu.hidden), ...cellItems, ...colorPicker, {
-        type: 'extensions-placeholder',
-        separator: 'end'
-      }, ...(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, nodeType, hoverTable(false, true), clearHoverSelection()), {
-        type: 'separator'
-      }] : []), {
-        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
-      }]
-    };
-  }
-
-  return;
-};
-
-const separator = hidden => {
-  return {
-    type: 'separator',
-    hidden: hidden
-  };
-};
-
-const getCellItems = (pluginConfig, state, {
-  formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) => {
-  if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
-    const initialSelectionRect = getClosestSelectionRect(state);
-
-    if (initialSelectionRect) {
-      const cellOptions = getToolbarCellOptionsConfig(state, initialSelectionRect, {
-        formatMessage
-      }, getEditorContainerWidth, editorAnalyticsAPI);
-      return [cellOptions, separator(cellOptions.hidden)];
-    }
-  }
-
-  return [];
-};
-
-const getColorPicker = (state, menu, {
-  formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) => {
-  var _node$attrs;
-
-  const {
-    targetCellPosition,
-    pluginConfig
-  } = getPluginState(state);
-
-  if (!pluginConfig.allowBackgroundColor || !tableCellOptionsInFloatingToolbar) {
-    return [];
-  }
-
-  const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
-  const currentBackground = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
-  const defaultPalette = cellBackgroundColorPalette.find(item => item.value === currentBackground) || {
-    label: 'Custom',
-    value: currentBackground,
-    border: DEFAULT_BORDER_COLOR
-  };
-  return [{
-    id: 'editor.panel.colorPicker',
-    title: formatMessage(ContextualMenuMessages.cellBackground),
-    type: 'select',
-    selectType: 'color',
-    defaultValue: defaultPalette,
-    options: cellBackgroundColorPalette,
-    onChange: option => setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition)
-  }, separator(menu.hidden)];
-};

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

@@ -1,163 +0,0 @@
-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 const updateColumnWidths = (resizeState, table, start) => tr => {
-  const map = TableMap.get(table);
-  const updatedCellsAttrs = {}; // calculating new attributes for each cell
-
-  for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-      const {
-        width
-      } = resizeState.cols[columnIndex];
-      const mapIndex = rowIndex * map.width + columnIndex;
-      const cellPos = map.map[mapIndex];
-      const attrs = updatedCellsAttrs[cellPos] || { ...table.nodeAt(cellPos).attrs
-      };
-      const 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
-          }
-        })(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;
-      }
-
-      const colspanIndex = colspan === 1 ? 0 : columnIndex - map.colCount(cellPos);
-
-      if (attrs.colwidth && attrs.colwidth[colspanIndex] === width) {
-        continue;
-      }
-
-      let colwidths = attrs.colwidth ? attrs.colwidth.slice() : Array.from({
-        length: colspan
-      }, _ => 0);
-      colwidths[colspanIndex] = width;
-
-      if (colwidths.length > colspan) {
-        tr = setMeta({
-          type: 'UPDATE_COLUMN_WIDTHS',
-          problem: 'COLWIDTHS_AFTER_UPDATE',
-          data: {
-            colwidths,
-            colspan
-          }
-        })(tr);
-        colwidths = colwidths.slice(0, colspan);
-      }
-
-      updatedCellsAttrs[cellPos] = { ...attrs,
-        colwidth: colwidths.includes(0) ? undefined : colwidths
-      };
-    }
-  } // updating all cells with new attributes
-
-
-  const rows = [];
-  const seen = {};
-
-  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-    const row = table.child(rowIndex);
-    const cells = [];
-
-    for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-      const mapIndex = rowIndex * map.width + columnIndex;
-      const pos = map.map[mapIndex];
-      const 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));
-  }
-
-  const tablePos = start - 1;
-  const 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 const rescaleColumns = getEditorContainerWidth => (table, view) => tr => {
-  // If the table has been not been resized we skip updating the size
-  // of columns here.
-  if (!view || !hasTableBeenResized(table.node)) {
-    return tr;
-  }
-
-  const {
-    state
-  } = view;
-  const domAtPos = view.domAtPos.bind(view);
-  const maybeTable = domAtPos(table.start).node;
-  const tableRef = maybeTable.closest('table');
-
-  if (!tableRef) {
-    return tr;
-  }
-
-  const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout); // The is the width the table can reach before overflowing
-
-  const maxSize = getTableMaxWidth({
-    table: table.node,
-    tableStart: table.start,
-    state,
-    layout,
-    getEditorContainerWidth
-  });
-  let resizeState = getResizeState({
-    minWidth: tableCellMinWidth,
-    table: table.node,
-    start: table.start,
-    tableRef,
-    domAtPos,
-    maxSize
-  });
-  const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-  const 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);
-};