@atlaskit/editor-plugin-table 0.0.10 → 0.1.1

package/src/plugins/table/transforms/delete-rows.ts

@@ -8,139 +8,138 @@ import { CellAttributes } from '@atlaskit/adf-schema';
 import { removeEmptyColumns } from './merge';
 import { setMeta } from './metadata';
 
-export const deleteRows = (
-  rect: Rect,
-  isHeaderRowRequired: boolean = false,
-) => (tr: Transaction): Transaction => {
-  const table = findTable(tr.selection);
-  if (!table) {
-    return tr;
-  }
-
-  const rowsToDelete: number[] = [];
-
-  const map = TableMap.get(table.node);
-
-  for (let i = rect.top; i < rect.bottom; i++) {
-    // skip header row if its required
-    if (isHeaderRowRequired) {
-      const cell = table.node.nodeAt(map.map[i * map.width]);
-      if (cell && cell.type !== cell.type.schema.nodes.tableHeader) {
+export const deleteRows =
+  (rect: Rect, isHeaderRowRequired: boolean = false) =>
+  (tr: Transaction): Transaction => {
+    const table = findTable(tr.selection);
+    if (!table) {
+      return tr;
+    }
+
+    const rowsToDelete: number[] = [];
+
+    const map = TableMap.get(table.node);
+
+    for (let i = rect.top; i < rect.bottom; i++) {
+      // skip header row if its required
+      if (isHeaderRowRequired) {
+        const cell = table.node.nodeAt(map.map[i * map.width]);
+        if (cell && cell.type !== cell.type.schema.nodes.tableHeader) {
+          rowsToDelete.push(i);
+        }
+      } else {
         rowsToDelete.push(i);
       }
-    } else {
-      rowsToDelete.push(i);
     }
-  }
 
-  if (!rowsToDelete.length) {
-    return tr;
-  }
+    if (!rowsToDelete.length) {
+      return tr;
+    }
 
-  const rows: PMNode[] = [];
-  const seen: { [key: string]: boolean } = {};
-  const deletedCells: { [key: string]: boolean } = {};
+    const rows: PMNode[] = [];
+    const seen: { [key: string]: boolean } = {};
+    const deletedCells: { [key: string]: boolean } = {};
 
-  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-    const rowCells: PMNode[] = [];
-    const row = table.node.child(rowIndex);
+    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+      const rowCells: PMNode[] = [];
+      const row = table.node.child(rowIndex);
 
-    for (let colIndex = 0; colIndex < map.width; colIndex++) {
-      const cellPos = map.map[rowIndex * map.width + colIndex];
-      const cell = table.node.nodeAt(cellPos);
-      if (!cell) {
-        continue;
-      }
-      const cellsInRow = map.cellsInRect({
-        left: 0,
-        top: rowIndex,
-        right: map.width,
-        bottom: rowIndex + 1,
-      });
-      if (rowsToDelete.indexOf(rowIndex) === -1 && !seen[cellPos]) {
-        // decrement rowspans for row-spanning cells that overlap deleted rows
-        if (cellsInRow.indexOf(cellPos) > -1) {
-          let overlappingRows = 0;
-          rowsToDelete.forEach((rowIndexToDelete) => {
-            if (
-              rowIndex < rowIndexToDelete &&
-              cell.attrs.rowspan + rowIndex - 1 >= rowIndexToDelete
-            ) {
-              overlappingRows += 1;
+      for (let colIndex = 0; colIndex < map.width; colIndex++) {
+        const cellPos = map.map[rowIndex * map.width + colIndex];
+        const cell = table.node.nodeAt(cellPos);
+        if (!cell) {
+          continue;
+        }
+        const cellsInRow = map.cellsInRect({
+          left: 0,
+          top: rowIndex,
+          right: map.width,
+          bottom: rowIndex + 1,
+        });
+        if (rowsToDelete.indexOf(rowIndex) === -1 && !seen[cellPos]) {
+          // decrement rowspans for row-spanning cells that overlap deleted rows
+          if (cellsInRow.indexOf(cellPos) > -1) {
+            let overlappingRows = 0;
+            rowsToDelete.forEach((rowIndexToDelete) => {
+              if (
+                rowIndex < rowIndexToDelete &&
+                cell.attrs.rowspan + rowIndex - 1 >= rowIndexToDelete
+              ) {
+                overlappingRows += 1;
+              }
+            });
+            if (overlappingRows > 0) {
+              const newCell = cell.type.createChecked(
+                {
+                  ...cell.attrs,
+                  rowspan: cell.attrs.rowspan - overlappingRows,
+                },
+                cell.content,
+                cell.marks,
+              );
+              rowCells.push(newCell);
+              seen[cellPos] = true;
+              continue;
+            }
+          } else if (deletedCells[cellPos]) {
+            // if we're removing a row-spanning cell, we need to add missing cells to rows below
+            const attrs: CellAttributes = {
+              ...cell.attrs,
+              colspan: 1,
+              rowspan: 1,
+            };
+            if (cell.attrs.colwidth) {
+              const pos = colIndex > 0 ? colIndex - map.colCount(cellPos) : 0;
+              attrs.colwidth = cell.attrs.colwidth.slice().splice(pos, 1);
             }
-          });
-          if (overlappingRows > 0) {
             const newCell = cell.type.createChecked(
-              {
-                ...cell.attrs,
-                rowspan: cell.attrs.rowspan - overlappingRows,
-              },
-              cell.content,
+              attrs,
+              cell.type.schema.nodes.paragraph.createChecked(),
               cell.marks,
             );
             rowCells.push(newCell);
-            seen[cellPos] = true;
             continue;
           }
-        } else if (deletedCells[cellPos]) {
-          // if we're removing a row-spanning cell, we need to add missing cells to rows below
-          const attrs: CellAttributes = {
-            ...cell.attrs,
-            colspan: 1,
-            rowspan: 1,
-          };
-          if (cell.attrs.colwidth) {
-            const pos = colIndex > 0 ? colIndex - map.colCount(cellPos) : 0;
-            attrs.colwidth = cell.attrs.colwidth.slice().splice(pos, 1);
+
+          // normal cells that we want to keep
+          if (!seen[cellPos]) {
+            seen[cellPos] = true;
+            rowCells.push(cell);
           }
-          const newCell = cell.type.createChecked(
-            attrs,
-            cell.type.schema.nodes.paragraph.createChecked(),
-            cell.marks,
-          );
-          rowCells.push(newCell);
-          continue;
+        } else if (cellsInRow.indexOf(cellPos) > -1) {
+          deletedCells[cellPos] = true;
         }
+      }
 
-        // normal cells that we want to keep
-        if (!seen[cellPos]) {
-          seen[cellPos] = true;
-          rowCells.push(cell);
-        }
-      } else if (cellsInRow.indexOf(cellPos) > -1) {
-        deletedCells[cellPos] = true;
+      if (rowCells.length) {
+        rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
       }
     }
 
-    if (rowCells.length) {
-      rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
+    if (!rows.length) {
+      return setMeta({ type: 'DELETE_ROWS', problem: 'EMPTY_TABLE' })(tr);
     }
-  }
-
-  if (!rows.length) {
-    return setMeta({ type: 'DELETE_ROWS', problem: 'EMPTY_TABLE' })(tr);
-  }
-
-  const newTable = table.node.type.createChecked(
-    table.node.attrs,
-    rows,
-    table.node.marks,
-  );
-  const fixedTable = removeEmptyColumns(newTable);
-  if (fixedTable === null) {
-    return setMeta({ type: 'DELETE_ROWS', problem: 'REMOVE_EMPTY_COLUMNS' })(
-      tr,
+
+    const newTable = table.node.type.createChecked(
+      table.node.attrs,
+      rows,
+      table.node.marks,
+    );
+    const fixedTable = removeEmptyColumns(newTable);
+    if (fixedTable === null) {
+      return setMeta({ type: 'DELETE_ROWS', problem: 'REMOVE_EMPTY_COLUMNS' })(
+        tr,
+      );
+    }
+    const cursorPos = getNextCursorPos(newTable, rowsToDelete);
+
+    return setMeta({ type: 'DELETE_ROWS' })(
+      tr
+        .replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)
+        // move cursor before the deleted rows if possible, otherwise - to the first row
+        .setSelection(Selection.near(tr.doc.resolve(table.pos + cursorPos))),
     );
-  }
-  const cursorPos = getNextCursorPos(newTable, rowsToDelete);
-
-  return setMeta({ type: 'DELETE_ROWS' })(
-    tr
-      .replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)
-      // move cursor before the deleted rows if possible, otherwise - to the first row
-      .setSelection(Selection.near(tr.doc.resolve(table.pos + cursorPos))),
-  );
-};
+  };
 
 function getNextCursorPos(table: PMNode, deletedRows: number[]): number {
   const minRow = Math.min(...deletedRows);

package/src/plugins/table/transforms/fix-tables.ts

@@ -9,9 +9,8 @@ import {
   akEditorWideLayoutWidth,
 } from '@atlaskit/editor-shared-styles';
 
-// import { sendLogs } from '../../../utils/sendLogs';
-// import { sendLogs } from '@atlaskit/editor-core/src/utils/sendLogs';
-import { sendLogs } from '../todo-stubs';
+import { sendLogs } from '@atlaskit/editor-common/utils';
+
 import {
   calculateColumnWidth,
   contentWidth,

package/src/plugins/table/transforms/metadata.ts

@@ -24,12 +24,12 @@ export type TableMetaData =
       problem?: TableProblems;
     };
 
-export const setMeta = (meta: TableMetaData) => (
-  tr: Transaction,
-): Transaction => {
-  if ('problem' in meta) {
-    // Send analytics event whenever we encounter with a problem
-    fireAnalytics(meta);
-  }
-  return tr.setMeta(pluginKey, meta);
-};
+export const setMeta =
+  (meta: TableMetaData) =>
+  (tr: Transaction): Transaction => {
+    if ('problem' in meta) {
+      // Send analytics event whenever we encounter with a problem
+      fireAnalytics(meta);
+    }
+    return tr.setMeta(pluginKey, meta);
+  };

package/src/plugins/table/ui/FloatingContextualButton/index.tsx

@@ -167,7 +167,6 @@ export class FloatingContextualButtonInner extends React.Component<
       this.props.stickyHeader !== nextProps.stickyHeader
     );
   }
-  // TODO: restore
   private handleClick = () => {
     const { state, dispatch } = this.props.editorView;
     // Clicking outside the dropdown handles toggling the menu closed

package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -29,9 +29,7 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-// import { DropdownItem } from '../../../block-type/ui/ToolbarBlockType';
 
-// TODO ED-15449 - unstub type?
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 type DropdownItem = MenuItem & {
   value: {
@@ -365,20 +363,27 @@ export class ContextualMenu extends Component<
         this.toggleOpen();
         break;
       case 'merge':
-        mergeCellsWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+        mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU)(
+          state,
+          dispatch,
+        );
         this.toggleOpen();
         break;
       case 'split':
-        splitCellWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+        splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU)(
+          state,
+          dispatch,
+        );
         this.toggleOpen();
         break;
       case 'distribute_columns':
-        const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(
-          selectionRect,
-          state,
-          editorView.domAtPos.bind(editorView),
-          getEditorContainerWidth,
-        );
+        const newResizeStateWithAnalytics =
+          getNewResizeStateFromSelectedColumns(
+            selectionRect,
+            state,
+            editorView.domAtPos.bind(editorView),
+            getEditorContainerWidth,
+          );
 
         if (newResizeStateWithAnalytics) {
           distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(
@@ -511,12 +516,11 @@ export class ContextualMenu extends Component<
     // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
     const { targetCellPosition } = getPluginState(editorView.state);
     const { state, dispatch } = editorView;
-    // setColorWithAnalytics(color, targetCellPosition)(state, dispatch);
-    // TODO: restore
-    setColorWithAnalytics(editorAnalyticsAPI)(color, targetCellPosition)(
-      state,
-      dispatch,
-    );
+    setColorWithAnalytics(editorAnalyticsAPI)(
+      INPUT_METHOD.CONTEXT_MENU,
+      color,
+      targetCellPosition,
+    )(state, dispatch);
     this.toggleOpen();
   };
 }

package/src/plugins/table/ui/FloatingDeleteButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, SyntheticEvent } from 'react';
 
 import { Selection } from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -12,7 +12,6 @@ import { createPortal } from 'react-dom';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 
-// import { closestElement } from '../../../../utils/dom';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
@@ -264,7 +263,8 @@ class FloatingDeleteButton extends Component<Props, State> {
    * @private
    * @memberof FloatingDeleteButton
    */
-  private handleClick = () => {
+  private handleClick = (event: SyntheticEvent) => {
+    event.preventDefault();
     const { editorAnalyticsAPI } = this.props;
     let { state, dispatch } = this.props.editorView;
     const {

package/src/plugins/table/ui/FloatingInsertButton/index.tsx

@@ -10,7 +10,6 @@ import { WrappedComponentProps, injectIntl } from 'react-intl-next';
 
 import { Popup } from '@atlaskit/editor-common/ui';
 
-// import { closestElement } from '../../../../utils/dom';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import {
@@ -203,11 +202,8 @@ export class FloatingInsertButton extends React.Component<
   }
 
   private getCellPosition(type: 'column' | 'row'): number | null {
-    const {
-      tableNode,
-      insertColumnButtonIndex,
-      insertRowButtonIndex,
-    } = this.props;
+    const { tableNode, insertColumnButtonIndex, insertRowButtonIndex } =
+      this.props;
     const tableMap = TableMap.get(tableNode!);
 
     if (type === 'column') {

package/src/plugins/table/ui/LayoutButton/index.tsx

@@ -107,8 +107,7 @@ class LayoutButton extends React.Component<Props & WrappedComponentProps, any> {
   }
 
   renderSticky(button: JSX.Element, targetRef: Node, tableRef: Node) {
-    // const title = this.getTitle();
-    const title = 'TODO MISSING TITLE';
+    const title = this.getTitle();
 
     if (
       !(targetRef instanceof HTMLElement) ||
@@ -135,19 +134,14 @@ class LayoutButton extends React.Component<Props & WrappedComponentProps, any> {
   }
 
   renderPopup(button: JSX.Element) {
-    const {
-      mountPoint,
-      boundariesElement,
-      scrollableElement,
-      targetRef,
-    } = this.props;
+    const { mountPoint, boundariesElement, scrollableElement, targetRef } =
+      this.props;
 
     if (!targetRef) {
       return null;
     }
 
-    // const title = this.getTitle();
-    const title = 'TODO MISSING TITLE';
+    const title = this.getTitle();
 
     return (
       <Popup

package/src/plugins/table/ui/TableFloatingControls/CornerControls/index.tsx

@@ -63,6 +63,7 @@ class CornerControlComponent extends Component<
               ? `${this.props.stickyTop}px`
               : undefined,
         }}
+        contentEditable={false}
       >
         <button
           aria-label={formatMessage(messages.cornerControl)}

package/src/plugins/table/ui/common-styles.ts

@@ -333,9 +333,7 @@ export const tableStyles = (props: ThemeProps) => css`
     }
 
     ${props.featureFlags?.stickyHeadersOptimization ? sentinelStyles : ''}
-    ${OverflowShadow(
-      props,
-    )}
+    ${OverflowShadow(props)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
       height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts

package/src/plugins/table/utils/analytics.ts

@@ -33,9 +33,8 @@ export function getSelectedCellInfo(selection: Selection) {
   let verticalCells = 1;
   let totalCells = 1;
 
-  const { table, map, totalRowCount, totalColumnCount } = getSelectedTableInfo(
-    selection,
-  );
+  const { table, map, totalRowCount, totalColumnCount } =
+    getSelectedTableInfo(selection);
 
   if (table && map) {
     const rect = getSelectionRect(selection);
@@ -55,27 +54,27 @@ export function getSelectedCellInfo(selection: Selection) {
   };
 }
 
-export const withEditorAnalyticsAPI = (
-  payload: AnalyticsEventPayload | AnalyticsEventPayloadCallback,
-) => (
-  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-): HigherOrderCommand => {
-  return (command) => (state, dispatch, view) =>
-    command(
-      state,
-      (tr) => {
-        const dynamicPayload =
-          payload instanceof Function ? payload(state) : payload;
+export const withEditorAnalyticsAPI =
+  (payload: AnalyticsEventPayload | AnalyticsEventPayloadCallback) =>
+  (
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  ): HigherOrderCommand => {
+    return (command) => (state, dispatch, view) =>
+      command(
+        state,
+        (tr) => {
+          const dynamicPayload =
+            payload instanceof Function ? payload(state) : payload;
 
-        if (dynamicPayload) {
-          editorAnalyticsAPI?.attachAnalyticsEvent(dynamicPayload)(tr);
-        }
+          if (dynamicPayload) {
+            editorAnalyticsAPI?.attachAnalyticsEvent(dynamicPayload)(tr);
+          }
 
-        if (dispatch) {
-          dispatch(tr);
-        }
-        return true;
-      },
-      view,
-    );
-};
+          if (dispatch) {
+            dispatch(tr);
+          }
+          return true;
+        },
+        view,
+      );
+  };

package/src/plugins/table/utils/column-controls.ts

@@ -12,7 +12,6 @@ import {
 
 import { EditorView } from 'prosemirror-view';
 
-// import { maphElem } from '@atlaskit/editor-core/src/utils/dom';
 import { maphElem } from '@atlaskit/editor-common/utils';
 
 import { TableCssClassName as ClassName } from '../types';

package/src/plugins/table/utils/decoration.ts

@@ -12,7 +12,6 @@ import { Decoration, DecorationSet } from 'prosemirror-view';
 
 import { CellAttributes } from '@atlaskit/adf-schema';
 
-// import { nonNullable } from '@atlaskit/editor-core/src/utils';
 import { nonNullable } from '@atlaskit/editor-common/utils';
 import {
   Cell,
@@ -61,10 +60,49 @@ export const createCellHoverDecoration = (
 export const createControlsHoverDecoration = (
   cells: Cell[],
   type: 'row' | 'column' | 'table',
+  tr: Transaction | ReadonlyTransaction,
   danger?: boolean,
   selected?: boolean,
-): Decoration[] =>
-  cells.map((cell) => {
+): Decoration[] => {
+  const table = findTable(tr.selection);
+  if (!table) {
+    return [];
+  }
+
+  const map = TableMap.get(table.node);
+  const [min, max] = cells.reduce<[number | null, number | null]>(
+    ([min, max], cell) => {
+      if (min === null || cell.pos < min) {
+        min = cell.pos;
+      }
+      if (max === null || cell.pos > max) {
+        max = cell.pos;
+      }
+
+      return [min, max];
+    },
+    [null, null],
+  );
+
+  if (min === null || max === null) {
+    return [];
+  }
+
+  let updatedCells: number[] = cells.map((x) => x.pos);
+
+  // ED-15246 fixed trello card table overflow issue
+  // If columns / rows have been merged the hovered selection is different to the actual selection
+  // So If the table cells are in danger we want to create a "rectangle" selection
+  // to match the "clicked" selection
+
+  if (danger) {
+    const rect = map.rectBetween(min - table.start, max - table.start);
+    updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
+  }
+
+  return updatedCells.map((pos) => {
+    const cell = tr.doc.nodeAt(pos);
+
     const classes = [ClassName.HOVERED_CELL];
     if (danger) {
       classes.push(ClassName.HOVERED_CELL_IN_DANGER);
@@ -97,14 +135,15 @@ export const createControlsHoverDecoration = (
     }
 
     return Decoration.node(
-      cell.pos,
-      cell.pos + cell.node.nodeSize,
+      pos,
+      pos + cell!.nodeSize,
       {
         class: classes.join(' '),
       },
       { key },
     );
   });
+};
 
 export const createColumnSelectedDecoration = (
   tr: Transaction | ReadonlyTransaction,

package/src/plugins/table/utils/dom.ts

@@ -1,5 +1,3 @@
-// import { containsClassName } from '@atlaskit/editor-core/src/utils';
-// import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 import {
   closestElement,
   containsClassName,
@@ -170,9 +168,9 @@ export const updateResizeHandles = (tableRef?: HTMLElement) => {
   const height = tableRef.offsetHeight + tableToolbarSize;
   // see ED-7600
   const nodes = Array.from(
-    tableRef.querySelectorAll(`.${ClassName.RESIZE_HANDLE}`) as NodeListOf<
-      HTMLElement
-    >,
+    tableRef.querySelectorAll(
+      `.${ClassName.RESIZE_HANDLE}`,
+    ) as NodeListOf<HTMLElement>,
   );
   if (!nodes || !nodes.length) {
     return;

package/src/plugins/table/utils/paste.ts

@@ -2,7 +2,6 @@ import { Fragment, Node as PMNode, Schema, Slice } from 'prosemirror-model';
 import { EditorState } from 'prosemirror-state';
 import { flatten } from 'prosemirror-utils';
 
-// import { flatmap, mapSlice } from '@atlaskit/editor-core/src/utils/slice';
 import { flatmap, mapSlice } from '@atlaskit/editor-common/utils';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';