@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/dist/es2019/plugins/table/commands-with-analytics.js

@@ -0,0 +1,409 @@
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findCellClosestToPos, findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
+import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_BREAKOUT } from '@atlaskit/editor-common/analytics';
+import { clearMultipleCells } from './commands/clear';
+import { wrapTableInExpand } from './commands/collapse';
+import { insertColumn, insertRow } from './commands/insert';
+import { deleteTable, setMultipleCellAttrs, deleteTableIfSelected } from './commands/misc';
+import { sortByColumn } from './commands/sort';
+import { splitCell } from './commands/split-cell';
+import { getNextLayout, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './commands/toggle';
+import { distributeColumnsWidths } from './pm-plugins/table-resizing/commands';
+import { getPluginState } from './pm-plugins/plugin-factory';
+import { deleteColumns, deleteRows, mergeCells } from './transforms';
+import { checkIfNumberColumnEnabled, getSelectedCellInfo, getSelectedTableInfo } from './utils';
+import { withEditorAnalyticsAPI } from './utils/analytics';
+import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
+const TABLE_BREAKOUT_NAME_MAPPING = {
+  default: TABLE_BREAKOUT.NORMAL,
+  wide: TABLE_BREAKOUT.WIDE,
+  'full-width': TABLE_BREAKOUT.FULL_WIDTH
+}; // #region Analytics wrappers
+
+export const emptyMultipleCellsWithAnalytics = editorAnalyticsAPI => (inputMethod, targetCellPosition) => withEditorAnalyticsAPI(({
+  selection
+}) => {
+  const {
+    horizontalCells,
+    verticalCells,
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedCellInfo(selection);
+  return {
+    action: TABLE_ACTION.CLEARED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      inputMethod,
+      horizontalCells,
+      verticalCells,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)(clearMultipleCells(targetCellPosition));
+export const mergeCellsWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
+  selection
+}) => {
+  const {
+    horizontalCells,
+    verticalCells,
+    totalCells,
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedCellInfo(selection);
+  return {
+    action: TABLE_ACTION.MERGED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      horizontalCells,
+      verticalCells,
+      totalCells,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)((state, dispatch) => {
+  if (dispatch) {
+    dispatch(mergeCells(state.tr));
+  }
+
+  return true;
+});
+export const splitCellWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
+  selection
+}) => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedCellInfo(selection);
+  const cell = findCellClosestToPos(selection.$anchor);
+
+  if (cell) {
+    const {
+      rowspan: verticalCells,
+      colspan: horizontalCells
+    } = cell.node.attrs;
+    return {
+      action: TABLE_ACTION.SPLIT,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      actionSubjectId: null,
+      attributes: {
+        horizontalCells,
+        verticalCells,
+        totalCells: horizontalCells * verticalCells,
+        totalRowCount,
+        totalColumnCount
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+  }
+
+  return;
+})(editorAnalyticsAPI)(splitCell);
+export const setColorWithAnalytics = editorAnalyticsAPI => (cellColor, targetCellPosition) => withEditorAnalyticsAPI(({
+  selection
+}) => {
+  const {
+    horizontalCells,
+    verticalCells,
+    totalCells,
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedCellInfo(selection);
+  return {
+    action: TABLE_ACTION.COLORED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      cellColor: (tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
+      horizontalCells,
+      verticalCells,
+      totalCells,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)(setMultipleCellAttrs({
+  background: cellColor
+}, targetCellPosition));
+export const addRowAroundSelection = editorAnalyticsAPI => side => (state, dispatch) => {
+  const {
+    selection
+  } = state;
+  const isCellSelection = selection instanceof CellSelection;
+  const rect = isCellSelection ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
+
+  if (!rect) {
+    return false;
+  }
+
+  const position = isCellSelection && side === 'TOP' ? rect.top : rect.bottom - 1;
+  const offset = side === 'BOTTOM' ? 1 : 0;
+  return insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, {
+    index: position + offset,
+    moveCursorToInsertedRow: false
+  })(state, dispatch);
+};
+export const insertRowWithAnalytics = editorAnalyticsAPI => (inputMethod, options) => withEditorAnalyticsAPI(state => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+  return {
+    action: TABLE_ACTION.ADDED_ROW,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      inputMethod,
+      position: options.index,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow));
+export const insertColumnWithAnalytics = (getEditorContainerWidth, editorAnalyticsAPI) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+  return {
+    action: TABLE_ACTION.ADDED_COLUMN,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      inputMethod,
+      position,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)(insertColumn(getEditorContainerWidth)(position));
+export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect, isHeaderRowRequired) => withEditorAnalyticsAPI(({
+  selection
+}) => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(selection);
+  return {
+    action: TABLE_ACTION.DELETED_ROW,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      inputMethod,
+      position: rect.top,
+      count: rect.bottom - rect.top,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)((state, dispatch) => {
+  if (dispatch) {
+    dispatch(deleteRows(rect, isHeaderRowRequired)(state.tr));
+  }
+
+  return true;
+});
+export const deleteColumnsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect) => withEditorAnalyticsAPI(({
+  selection
+}) => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(selection);
+  return {
+    action: TABLE_ACTION.DELETED_COLUMN,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      inputMethod,
+      position: rect.left,
+      count: rect.right - rect.left,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)((state, dispatch) => {
+  if (dispatch) {
+    dispatch(deleteColumns(rect, getAllowAddColumnCustomStep(state))(state.tr));
+  }
+
+  return true;
+});
+
+const getTableDeletedAnalytics = (selection, inputMethod) => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(selection);
+  return {
+    action: TABLE_ACTION.DELETED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    attributes: {
+      inputMethod,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+};
+
+export const deleteTableWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
+  selection
+}) => getTableDeletedAnalytics(selection, INPUT_METHOD.FLOATING_TB))(editorAnalyticsAPI)(deleteTable);
+export const deleteTableIfSelectedWithAnalytics = editorAnalyticsAPI => inputMethod => withEditorAnalyticsAPI(({
+  selection
+}) => getTableDeletedAnalytics(selection, inputMethod))(editorAnalyticsAPI)(deleteTableIfSelected);
+export const toggleHeaderRowWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(state => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+  const {
+    isHeaderRowEnabled
+  } = getPluginState(state);
+  return {
+    action: TABLE_ACTION.TOGGLED_HEADER_ROW,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      newState: !isHeaderRowEnabled,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)(toggleHeaderRow);
+export const toggleHeaderColumnWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(state => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+  const {
+    isHeaderColumnEnabled
+  } = getPluginState(state);
+  return {
+    action: TABLE_ACTION.TOGGLED_HEADER_COLUMN,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      newState: !isHeaderColumnEnabled,
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)(toggleHeaderColumn);
+export const toggleNumberColumnWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(state => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+  return {
+    action: TABLE_ACTION.TOGGLED_NUMBER_COLUMN,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      newState: !checkIfNumberColumnEnabled(state.selection),
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)(toggleNumberColumn);
+export const toggleTableLayoutWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(state => {
+  const {
+    table,
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+
+  if (table) {
+    const {
+      layout
+    } = table.node.attrs;
+    return {
+      action: TABLE_ACTION.CHANGED_BREAKOUT_MODE,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      actionSubjectId: null,
+      attributes: {
+        newBreakoutMode: TABLE_BREAKOUT_NAME_MAPPING[getNextLayout(layout)],
+        previousBreakoutMode: TABLE_BREAKOUT_NAME_MAPPING[layout],
+        totalRowCount,
+        totalColumnCount
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+  }
+
+  return;
+})(editorAnalyticsAPI)(toggleTableLayout);
+export const sortColumnWithAnalytics = editorAnalyticsAPI => (inputMethod, columnIndex, sortOrder) => withEditorAnalyticsAPI(state => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+  return {
+    action: TABLE_ACTION.SORTED_COLUMN,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    attributes: {
+      inputMethod,
+      totalRowCount,
+      totalColumnCount,
+      position: columnIndex,
+      sortOrder,
+      mode: 'editor'
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)(sortByColumn(columnIndex, sortOrder));
+export const distributeColumnsWidthsWithAnalytics = editorAnalyticsAPI => (inputMethod, {
+  resizeState,
+  table,
+  attributes
+}) => {
+  return withEditorAnalyticsAPI(() => {
+    return {
+      action: TABLE_ACTION.DISTRIBUTED_COLUMNS_WIDTHS,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      actionSubjectId: null,
+      attributes: {
+        inputMethod,
+        ...attributes
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+  })(editorAnalyticsAPI)((state, dispatch) => {
+    if (dispatch) {
+      distributeColumnsWidths(resizeState, table)(state, dispatch);
+    }
+
+    return true;
+  });
+};
+export const wrapTableInExpandWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(state => {
+  const {
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+  return {
+    action: TABLE_ACTION.COLLAPSED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    attributes: {
+      totalRowCount,
+      totalColumnCount
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+})(editorAnalyticsAPI)(wrapTableInExpand); // #endregion

package/dist/es2019/plugins/table/create-plugin-config.js

@@ -0,0 +1,14 @@
+export const pluginConfig = (config = {}) => {
+  return config.advanced ? {
+    allowBackgroundColor: true,
+    allowColumnResizing: true,
+    allowHeaderColumn: true,
+    allowHeaderRow: true,
+    allowMergeCells: true,
+    allowNumberColumn: true,
+    stickToolbarToBottom: true,
+    permittedLayouts: 'all',
+    allowControls: true,
+    ...config
+  } : config;
+};