@atlaskit/editor-plugin-table 0.0.9 → 0.1.0

package/src/plugins/table/commands/hover.ts

@@ -59,13 +59,14 @@ export const hoverMergedCells = () =>
 export const hoverColumns = (hoveredColumns: number[], isInDanger?: boolean) =>
   createCommand(
     (state) => {
-      const cells = getCellsInColumn(hoveredColumns)(state.selection);
+      const cells = getCellsInColumn(hoveredColumns)(state.tr.selection);
       if (!cells) {
         return false;
       }
       const decorations = createControlsHoverDecoration(
         cells,
         'column',
+        state.tr,
         isInDanger,
       );
 
@@ -95,6 +96,7 @@ export const hoverRows = (hoveredRows: number[], isInDanger?: boolean) =>
       const decorations = createControlsHoverDecoration(
         cells,
         'row',
+        state.tr,
         isInDanger,
       );
 
@@ -131,6 +133,7 @@ export const hoverTable = (isInDanger?: boolean, isSelected?: boolean) =>
       const decorations = createControlsHoverDecoration(
         cells,
         'table',
+        state.tr,
         isInDanger,
         isSelected,
       );

package/src/plugins/table/commands-with-analytics.ts

@@ -96,7 +96,7 @@ export const emptyMultipleCellsWithAnalytics = (
 
 export const mergeCellsWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined,
-) =>
+) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) =>
   withEditorAnalyticsAPI(({ selection }) => {
     const {
       horizontalCells,
@@ -111,7 +111,7 @@ export const mergeCellsWithAnalytics = (
       actionSubject: ACTION_SUBJECT.TABLE,
       actionSubjectId: null,
       attributes: {
-        inputMethod: INPUT_METHOD.CONTEXT_MENU, // TODO: merge with floating toolbar once command is updated
+        inputMethod,
         horizontalCells,
         verticalCells,
         totalCells,
@@ -129,7 +129,7 @@ export const mergeCellsWithAnalytics = (
 
 export const splitCellWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-) =>
+) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) =>
   withEditorAnalyticsAPI(({ selection }) => {
     const { totalRowCount, totalColumnCount } = getSelectedCellInfo(selection);
     const cell = findCellClosestToPos(selection.$anchor);
@@ -144,7 +144,7 @@ export const splitCellWithAnalytics = (
         actionSubject: ACTION_SUBJECT.TABLE,
         actionSubjectId: null,
         attributes: {
-          inputMethod: INPUT_METHOD.CONTEXT_MENU, // TODO: merge with floating toolbar once command is updated
+          inputMethod,
           horizontalCells,
           verticalCells,
           totalCells: horizontalCells * verticalCells,
@@ -159,7 +159,11 @@ export const splitCellWithAnalytics = (
 
 export const setColorWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-) => (cellColor: string, targetCellPosition?: number) =>
+) => (
+  inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB,
+  cellColor: string,
+  targetCellPosition?: number,
+) =>
   withEditorAnalyticsAPI(({ selection }) => {
     const {
       horizontalCells,
@@ -174,7 +178,7 @@ export const setColorWithAnalytics = (
       actionSubject: ACTION_SUBJECT.TABLE,
       actionSubjectId: null,
       attributes: {
-        inputMethod: INPUT_METHOD.CONTEXT_MENU, // TODO: merge with floating toolbar once command is updated
+        inputMethod,
         cellColor: (
           tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor
         ).toLowerCase(),
@@ -457,7 +461,7 @@ export const toggleTableLayoutWithAnalytics = (
 export const sortColumnWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 ) => (
-  inputMethod: INPUT_METHOD.CONTEXT_MENU,
+  inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB,
   columnIndex: number,
   sortOrder: SortOrder,
 ) =>
@@ -483,7 +487,7 @@ export const sortColumnWithAnalytics = (
 export const distributeColumnsWidthsWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 ) => (
-  inputMethod: INPUT_METHOD.CONTEXT_MENU,
+  inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB,
   { resizeState, table, attributes }: ResizeStateWithAnalytics,
 ) => {
   return withEditorAnalyticsAPI(() => {

package/src/plugins/table/event-handlers.ts

@@ -23,7 +23,6 @@ import {
   isLastItemMediaGroup,
   setNodeSelection,
 } from '@atlaskit/editor-common/utils';
-// import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {

package/src/plugins/table/handlers.ts

@@ -3,7 +3,6 @@ import { Transaction, ReadonlyTransaction } from 'prosemirror-state';
 import { ContentNodeWithPos, findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
-// import { isTextInput } from '../../utils/is-text-input';
 import { isTextInput } from '@atlaskit/editor-common/utils';
 import { isTableCollapsible } from './utils/collapse';
 

package/src/plugins/table/index.tsx

@@ -20,6 +20,7 @@ import {
   ACTION_SUBJECT_ID,
   EVENT_TYPE,
   INPUT_METHOD,
+  TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 
@@ -59,6 +60,7 @@ import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
+import { EditorState, Transaction } from 'prosemirror-state';
 
 interface TablePluginOptions {
   tableOptions: PluginConfig;
@@ -177,8 +179,31 @@ const tablesPlugin = (options?: TablePluginOptions): EditorPlugin => {
           name: 'tableSelectionKeymap',
           plugin: () => tableSelectionKeymapPlugin(options?.editorSelectionAPI),
         },
-        { name: 'tableEditing', plugin: () => tableEditing() as SafePlugin },
-
+        {
+          name: 'tableEditing',
+          plugin: () =>
+            tableEditing({
+              reportFixedTable: ({
+                state,
+                tr,
+                reason,
+              }: {
+                state: EditorState;
+                tr: Transaction;
+                reason: string;
+              }) => {
+                options?.editorAnalyticsAPI?.attachAnalyticsEvent({
+                  action: TABLE_ACTION.FIXED,
+                  actionSubject: ACTION_SUBJECT.TABLE,
+                  actionSubjectId: null,
+                  attributes: {
+                    reason,
+                  },
+                  eventType: EVENT_TYPE.TRACK,
+                })(tr);
+              },
+            }) as SafePlugin,
+        },
         {
           name: 'tableStickyHeaders',
           plugin: ({ dispatch, eventDispatcher }) =>
@@ -432,6 +457,7 @@ const tablesPlugin = (options?: TablePluginOptions): EditorPlugin => {
       floatingToolbar: getToolbarConfig(
         defaultGetEditorContainerWidth,
         options?.editorAnalyticsAPI,
+        options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
       )(pluginConfig(options?.tableOptions)),
     },
   };

package/src/plugins/table/pm-plugins/keymap.ts

@@ -11,10 +11,10 @@ import {
   INPUT_METHOD,
 } from '@atlaskit/editor-common/analytics';
 import {
+  triggerUnlessTableHeader,
   createTable,
   goToNextCell,
   moveCursorBackward,
-  triggerUnlessTableHeader,
 } from '../commands';
 import {
   addRowAroundSelection,

package/src/plugins/table/pm-plugins/table-local-id.ts

@@ -10,7 +10,6 @@
  * TODO: https://product-fabric.atlassian.net/browse/ED-12714
  *
  */
-// import { Dispatch } from '../../../event-dispatcher';
 import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { EditorState, PluginKey, Transaction } from 'prosemirror-state';
@@ -19,7 +18,6 @@ import rafSchedule from 'raf-schd';
 
 import { uuid } from '@atlaskit/adf-schema';
 
-// import { stepAddsOneOf } from '../../../utils/step';
 import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 
 interface TableLocalIdPluginState {

package/src/plugins/table/pm-plugins/table-resizing/index.ts

@@ -1,3 +1,4 @@
 export { createPlugin } from './plugin';
 export { scaleTable } from './commands';
 export { pluginKey } from './plugin-key';
+export { getPluginState } from './plugin-factory';

package/src/plugins/table/{toolbar.ts → toolbar.tsx}

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
@@ -8,6 +10,7 @@ import type {
   FloatingToolbarDropdown,
   FloatingToolbarHandler,
   FloatingToolbarItem,
+  GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
@@ -26,6 +29,9 @@ import {
   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';
@@ -37,6 +43,7 @@ import {
   PluginConfig,
   TableCssClassName,
 } from './types';
+import { getMergedCellsPositions } from './utils';
 import { isReferencedSource } from './utils/referentiality';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import {
@@ -56,6 +63,19 @@ import { Rect } from '@atlaskit/editor-tables/table-map';
 import { findParentDomRefOfType } from 'prosemirror-utils';
 import { EditorView } from 'prosemirror-view';
 import { closestElement } from '@atlaskit/editor-common/utils';
+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';
 
 export const messages = defineMessages({
   tableOptions: {
@@ -145,6 +165,7 @@ export const getToolbarCellOptionsConfig = (
   const { top, bottom, right, left } = initialSelectionRect;
   const numberOfColumns = right - left;
   const numberOfRows = bottom - top;
+  const pluginState = getPluginState(editorState);
 
   const options = [
     {
@@ -167,6 +188,7 @@ export const getToolbarCellOptionsConfig = (
       },
       selected: false,
       disabled: false,
+      elemAfter: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
     },
     {
       id: 'editor.table.insertRow',
@@ -184,6 +206,7 @@ export const getToolbarCellOptionsConfig = (
       },
       selected: false,
       disabled: false,
+      elemAfter: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
     },
     {
       id: 'editor.table.removeColumns',
@@ -229,41 +252,114 @@ export const getToolbarCellOptionsConfig = (
     {
       id: 'editor.table.mergeCells',
       title: formatMessage(ContextualMenuMessages.mergeCells),
-      onClick: mergeCellsWithAnalytics(editorAnalyticsAPI),
+      onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(
+        INPUT_METHOD.FLOATING_TB,
+      ),
       selected: false,
       disabled: !canMergeCells(editorState.tr),
     },
     {
       id: 'editor.table.splitCell',
       title: formatMessage(ContextualMenuMessages.splitCell),
-      onClick: splitCellWithAnalytics(editorAnalyticsAPI),
+      onClick: splitCellWithAnalytics(editorAnalyticsAPI)(
+        INPUT_METHOD.FLOATING_TB,
+      ),
       selected: false,
       disabled: !splitCell(editorState),
     },
-    {
-      id: 'editor.table.clearCells',
-      title: formatMessage(ContextualMenuMessages.clearCells, {
-        0: Math.max(numberOfColumns, numberOfRows),
-      }),
+  ];
+
+  if (pluginState?.pluginConfig?.allowDistributeColumns) {
+    const distributeColumnWidths: Command = (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: EditorState, dispatch?: CommandDispatch) => {
-        const { targetCellPosition } = getPluginState(state);
-        emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(
+        sortColumnWithAnalytics(editorAnalyticsAPI)(
           INPUT_METHOD.FLOATING_TB,
-          targetCellPosition,
+          initialSelectionRect.left,
+          SortOrder.ASC,
         )(state, dispatch);
         return true;
       },
       selected: false,
-      disabled: false,
+      disabled: hasMergedCellsInTable,
+    });
+
+    options.push({
+      id: 'editor.table.sortColumnDesc',
+      title: formatMessage(ContextualMenuMessages.sortColumnDESC),
+      onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+        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: EditorState, dispatch?: CommandDispatch) => {
+      const { targetCellPosition } = getPluginState(state);
+      emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(
+        INPUT_METHOD.FLOATING_TB,
+        targetCellPosition,
+      )(state, dispatch);
+      return true;
     },
-  ];
+    selected: false,
+    disabled: false,
+    elemAfter: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
+  });
 
   return {
     id: 'editor.table.cellOptions',
     type: 'dropdown',
     title: formatMessage(tableMessages.cellOptions),
-    hidden: true,
     options,
+    // Increased dropdown item width to prevent labels from being truncated
+    dropdownWidth: 230,
+    showSelected: false,
   };
 };
 
@@ -277,6 +373,7 @@ const getClosestSelectionRect = (state: EditorState): Rect | undefined => {
 export const getToolbarConfig = (
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  getEditorFeatureFlags: GetEditorFeatureFlags,
 ) => (config: PluginConfig): FloatingToolbarHandler => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
@@ -292,12 +389,22 @@ export const getToolbarConfig = (
       editorAnalyticsAPI,
     );
 
+    const { tableCellOptionsInFloatingToolbar } = getEditorFeatureFlags() || {};
     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
@@ -347,10 +454,24 @@ export const getToolbarConfig = (
         menu,
         separator(menu.hidden),
         ...cellItems,
+        ...colorPicker,
         {
           type: 'extensions-placeholder',
           separator: 'end',
         },
+        {
+          type: 'copy-button',
+          items: [
+            {
+              state,
+              formatMessage: intl.formatMessage,
+              nodeType,
+              onMouseEnter: hoverTable(false, true),
+              onMouseLeave: clearHoverSelection(),
+            },
+            { type: 'separator' },
+          ],
+        },
         {
           id: 'editor.table.delete',
           type: 'button',
@@ -364,6 +485,7 @@ export const getToolbarConfig = (
           confirmDialog,
         },
       ],
+      scrollable: true,
     };
   }
   return;
@@ -382,8 +504,12 @@ const getCellItems = (
   { formatMessage }: ToolbarMenuContext,
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  tableCellOptionsInFloatingToolbar?: boolean,
 ): Array<FloatingToolbarItem<Command>> => {
-  if (pluginConfig.allowCellOptionsInFloatingToolbar) {
+  if (
+    pluginConfig.allowCellOptionsInFloatingToolbar ||
+    tableCellOptionsInFloatingToolbar
+  ) {
     const initialSelectionRect = getClosestSelectionRect(state);
     if (initialSelectionRect) {
       const cellOptions = getToolbarCellOptionsConfig(
@@ -398,3 +524,49 @@ const getCellItems = (
   }
   return [];
 };
+
+const getColorPicker = (
+  state: EditorState,
+  menu: FloatingToolbarItem<Command>,
+  { formatMessage }: ToolbarMenuContext,
+  getEditorContainerWidth: GetEditorContainerWidth,
+  editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined,
+  tableCellOptionsInFloatingToolbar?: boolean,
+): Array<FloatingToolbarItem<Command>> => {
+  const { targetCellPosition, pluginConfig } = getPluginState(state);
+  if (
+    !pluginConfig.allowBackgroundColor ||
+    !tableCellOptionsInFloatingToolbar
+  ) {
+    return [];
+  }
+  const node = targetCellPosition
+    ? state.doc.nodeAt(targetCellPosition)
+    : undefined;
+  const currentBackground = 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: any) =>
+        setColorWithAnalytics(editorAnalyticsAPI)(
+          INPUT_METHOD.FLOATING_TB,
+          option.value,
+          targetCellPosition,
+        ),
+    },
+    separator(menu.hidden),
+  ];
+};

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/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,11 +363,17 @@ 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':
@@ -511,12 +515,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/FloatingContextualMenu/__tests__/ContextualMenu.tsx

@@ -1,3 +1,4 @@
+export {};
 it.skip('TODO: restore unit', () => {});
 
 // import React from 'react';

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

@@ -1,3 +1,4 @@
+export {};
 it.skip('TODO: restore unit', () => {});
 
 // import React from 'react';

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

@@ -2,7 +2,6 @@ import React, { SyntheticEvent } from 'react';
 
 import { WrappedComponentProps, injectIntl } from 'react-intl-next';
 
-// import { MessageDescriptor } from '../../../../types/i18n';
 import { MessageDescriptor } from 'react-intl-next';
 import { TableCssClassName as ClassName } from '../../types';
 
@@ -30,7 +29,7 @@ const DeleteButton = ({
   >
     <button
       type="button"
-      title={formatMessage(removeLabel, { 0: 1 })}
+      aria-label={formatMessage(removeLabel, { 0: 1 })}
       className={ClassName.CONTROLS_DELETE_BUTTON}
       onMouseDown={onClick}
       onMouseMove={(e) => e.preventDefault()}

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

@@ -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';

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 {

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) ||
@@ -146,8 +145,7 @@ class LayoutButton extends React.Component<Props & WrappedComponentProps, any> {
       return null;
     }
 
-    // const title = this.getTitle();
-    const title = 'TODO MISSING TITLE';
+    const title = this.getTitle();
 
     return (
       <Popup