@atlaskit/editor-plugin-table 0.0.10 → 0.1.1

package/src/plugins/table/pm-plugins/table-resizing/utils/dom.ts

@@ -20,61 +20,60 @@ import { getRowHeights } from '../../../utils/row-controls';
 import { colWidthsForRow } from '../../../utils/column-controls';
 import { getPluginState as getMainPluginState } from '../../plugin-factory';
 
-export const updateControls = (
-  getEditorFeatureFlags: GetEditorFeatureFlags,
-) => (state: EditorState) => {
-  const { tableRef } = getMainPluginState(state);
-  if (!tableRef) {
-    return;
-  }
-  const tr = tableRef.querySelector('tr');
-  if (!tr) {
-    return;
-  }
-  const wrapper = tableRef.parentElement;
-  if (!(wrapper && wrapper.parentElement)) {
-    return;
-  }
+export const updateControls =
+  (getEditorFeatureFlags: GetEditorFeatureFlags) => (state: EditorState) => {
+    const { tableRef } = getMainPluginState(state);
+    if (!tableRef) {
+      return;
+    }
+    const tr = tableRef.querySelector('tr');
+    if (!tr) {
+      return;
+    }
+    const wrapper = tableRef.parentElement;
+    if (!(wrapper && wrapper.parentElement)) {
+      return;
+    }
 
-  const rowControls = wrapper.parentElement.querySelectorAll<HTMLElement>(
-    `.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`,
-  );
-  const numberedRows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-    ClassName.NUMBERED_COLUMN_BUTTON,
-  );
+    const rowControls = wrapper.parentElement.querySelectorAll<HTMLElement>(
+      `.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`,
+    );
+    const numberedRows = wrapper.parentElement.querySelectorAll<HTMLElement>(
+      ClassName.NUMBERED_COLUMN_BUTTON,
+    );
 
-  syncStickyRowToTable(tableRef);
+    syncStickyRowToTable(tableRef);
 
-  const rowHeights = getRowHeights(tableRef);
+    const rowHeights = getRowHeights(tableRef);
 
-  // update rows controls height on resize
-  for (let i = 0, count = rowControls.length; i < count; i++) {
-    const height = rowHeights[i];
-    if (height) {
-      rowControls[i].style.height = `${height}px`;
+    // update rows controls height on resize
+    for (let i = 0, count = rowControls.length; i < count; i++) {
+      const height = rowHeights[i];
+      if (height) {
+        rowControls[i].style.height = `${height}px`;
 
-      if (numberedRows.length) {
-        numberedRows[i].style.height = `${height}px`;
+        if (numberedRows.length) {
+          numberedRows[i].style.height = `${height}px`;
+        }
       }
     }
-  }
 
-  const rightShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-    `.${ClassName.TABLE_RIGHT_SHADOW}`,
-  );
-
-  const leftShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-    `.${ClassName.TABLE_LEFT_SHADOW}`,
-  );
-
-  updateOverflowShadows(getEditorFeatureFlags)(
-    state,
-    wrapper,
-    tableRef,
-    rightShadows,
-    leftShadows,
-  );
-};
+    const rightShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
+      `.${ClassName.TABLE_RIGHT_SHADOW}`,
+    );
+
+    const leftShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
+      `.${ClassName.TABLE_LEFT_SHADOW}`,
+    );
+
+    updateOverflowShadows(getEditorFeatureFlags)(
+      state,
+      wrapper,
+      tableRef,
+      rightShadows,
+      leftShadows,
+    );
+  };
 
 export const isClickNear = (
   event: MouseEvent,

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,
   };
 };
 
@@ -274,100 +370,129 @@ const getClosestSelectionRect = (state: EditorState): Rect | undefined => {
     : findCellRectClosestToPos(selection.$from);
 };
 
-export const getToolbarConfig = (
-  getEditorContainerWidth: GetEditorContainerWidth,
-  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-) => (config: PluginConfig): FloatingToolbarHandler => (state, intl) => {
-  const tableObject = findTable(state.selection);
-  const pluginState = getPluginState(state);
-  const resizeState:
-    | ColumnResizingPluginState
-    | undefined = tableResizingPluginKey.getState(state);
-  if (tableObject && pluginState.editorHasFocus) {
-    const nodeType = state.schema.nodes.table;
-    const menu = getToolbarMenuConfig(
-      config,
-      pluginState,
-      intl,
-      editorAnalyticsAPI,
-    );
+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);
+    const resizeState: ColumnResizingPluginState | undefined =
+      tableResizingPluginKey.getState(state);
+    if (tableObject && pluginState.editorHasFocus) {
+      const nodeType = state.schema.nodes.table;
+      const menu = getToolbarMenuConfig(
+        config,
+        pluginState,
+        intl,
+        editorAnalyticsAPI,
+      );
 
-    const cellItems = getCellItems(
-      config,
-      state,
-      intl,
-      getEditorContainerWidth,
-      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
-    let confirmDialog;
-    const localId: string | undefined = tableObject.node.attrs.localId;
+      // Check if we need to show confirm dialog for delete button
+      let confirmDialog;
+      const localId: string | undefined = tableObject.node.attrs.localId;
 
-    if (localId && isReferencedSource(state, localId)) {
-      confirmDialog = {
-        okButtonLabel: intl.formatMessage(
-          tableMessages.confirmDeleteLinkedModalOKButton,
-        ),
-        message: intl.formatMessage(
-          tableMessages.confirmDeleteLinkedModalMessage,
-        ),
-      };
-    }
+      if (localId && isReferencedSource(state, localId)) {
+        confirmDialog = {
+          okButtonLabel: intl.formatMessage(
+            tableMessages.confirmDeleteLinkedModalOKButton,
+          ),
+          message: intl.formatMessage(
+            tableMessages.confirmDeleteLinkedModalMessage,
+          ),
+        };
+      }
 
-    const getDomRef = (editorView: EditorView) => {
-      let element: HTMLElement | undefined;
-      const domAtPos = editorView.domAtPos.bind(editorView);
-      const parent = findParentDomRefOfType(
-        nodeType,
-        domAtPos,
-      )(state.selection);
-      if (parent) {
-        const tableRef =
-          (parent as HTMLElement).querySelector<HTMLTableElement>('table') ||
-          undefined;
-        if (tableRef) {
-          element =
-            closestElement(
-              tableRef,
-              `.${TableCssClassName.TABLE_NODE_WRAPPER}`,
-            ) || undefined;
+      const getDomRef = (editorView: EditorView) => {
+        let element: HTMLElement | undefined;
+        const domAtPos = editorView.domAtPos.bind(editorView);
+        const parent = findParentDomRefOfType(
+          nodeType,
+          domAtPos,
+        )(state.selection);
+        if (parent) {
+          const tableRef =
+            (parent as HTMLElement).querySelector<HTMLTableElement>('table') ||
+            undefined;
+          if (tableRef) {
+            element =
+              closestElement(
+                tableRef,
+                `.${TableCssClassName.TABLE_NODE_WRAPPER}`,
+              ) || undefined;
+          }
         }
-      }
 
-      return element;
-    };
+        return element;
+      };
 
-    return {
-      title: 'Table floating controls',
-      getDomRef,
-      nodeType,
-      offset: [0, 3],
-      items: [
-        menu,
-        separator(menu.hidden),
-        ...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,
-        },
-      ],
-    };
-  }
-  return;
-};
+      return {
+        title: 'Table floating controls',
+        getDomRef,
+        nodeType,
+        offset: [0, 3],
+        items: [
+          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',
+            appearance: 'danger',
+            icon: RemoveIcon,
+            onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
+            disabled: !!resizeState && !!resizeState.dragging,
+            onMouseEnter: hoverTable(true),
+            onMouseLeave: clearHoverSelection(),
+            title: intl.formatMessage(commonMessages.remove),
+            confirmDialog,
+          },
+        ],
+        scrollable: true,
+      };
+    }
+    return;
+  };
 
 const separator = (hidden?: boolean): FloatingToolbarItem<Command> => {
   return {
@@ -382,8 +507,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 +527,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),
+  ];
+};