@atlaskit/editor-plugin-table 1.1.5 → 1.2.1

package/src/plugins/table/toolbar.tsx

@@ -475,6 +475,8 @@ export const getToolbarConfig =
       let confirmDialog;
 
       if (isReferencedSource(state, tableObject.node)) {
+        const localSourceName = intl.formatMessage(tableMessages.unnamedSource);
+
         confirmDialog = (): ConfirmDialogOptions => ({
           title: intl.formatMessage(tableMessages.deleteElementTitle),
           okButtonLabel: intl.formatMessage(
@@ -482,7 +484,9 @@ export const getToolbarConfig =
           ),
           message: intl.formatMessage(
             tableMessages.confirmDeleteLinkedModalMessage,
-            { nodeName: getNodeName(state, tableObject.node) },
+            {
+              nodeName: getNodeName(state, tableObject.node) || localSourceName,
+            },
           ),
           messagePrefix: intl.formatMessage(
             tableMessages.confirmDeleteLinkedModalMessagePrefix,
@@ -524,7 +528,7 @@ export const getToolbarConfig =
         title: 'Table floating controls',
         getDomRef,
         nodeType,
-        offset: [0, 3],
+        offset: [0, 18],
         zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
         items: [
           menu,

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

@@ -18,18 +18,25 @@ import {
 } from '@atlaskit/editor-common/keymaps';
 import {
   ColorPalette,
+  backgroundPaletteTooltipMessages,
   cellBackgroundColorPalette,
 } from '@atlaskit/editor-common/ui-color';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 
-import { DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import {
+  ArrowKeyNavigationType,
+  DropdownMenu,
+} from '@atlaskit/editor-common/ui-menu';
 
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { cellColourPreviewStyles } from './styles';
 import { closestElement } from '@atlaskit/editor-common/utils';
 
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 type DropdownItem = MenuItem & {
@@ -128,6 +135,7 @@ export interface Props {
   offset?: Array<number>;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
   getEditorContainerWidth: GetEditorContainerWidth;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
 }
 
 export interface State {
@@ -162,7 +170,10 @@ export class ContextualMenu extends Component<
           mountTo={mountPoint}
           //This needs be removed when the a11y is completely handled
           //Disabling key navigation now as it works only partially
-          disableArrowKeyNavigation={true}
+          arrowKeyNavigationProviderOptions={{
+            type: ArrowKeyNavigationType.MENU,
+            disableArrowKeyNavigation: true,
+          }}
           items={items}
           isOpen={isOpen}
           onOpenChange={this.handleOpenChange}
@@ -203,9 +214,11 @@ export class ContextualMenu extends Component<
       selectionRect,
       intl: { formatMessage },
       editorView,
+      getEditorFeatureFlags,
     } = this.props;
     const items: any[] = [];
     const { isSubmenuOpen } = this.state;
+    const { useSomewhatSemanticTextColorNames } = getEditorFeatureFlags();
     // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
     const {
       targetCellPosition,
@@ -233,9 +246,21 @@ export class ContextualMenu extends Component<
               >
                 <ColorPalette
                   cols={7}
-                  palette={cellBackgroundColorPalette}
                   onClick={this.setColor}
                   selectedColor={background}
+                  paletteOptions={{
+                    palette: cellBackgroundColorPalette,
+                    paletteColorTooltipMessages:
+                      backgroundPaletteTooltipMessages,
+                    // We did not want to create new FF or update
+                    //  useSomewhatSemanticTextColorNames name
+                    //  because it is temporary and require extra work.
+                    // So even though it says text color names,
+                    //  we are going to use for all color pickers
+                    //  such as text, background and table charts.
+                    showSomewhatSemanticTooltips:
+                      useSomewhatSemanticTextColorNames,
+                  }}
                 />
               </div>
             )}

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

@@ -23,7 +23,10 @@ import {
 import { tablePopupStyles } from './styles';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import ContextualMenu from './ContextualMenu';
 
 // offset of the contextual menu dropdown
@@ -46,6 +49,7 @@ export interface Props {
   editorView: EditorView;
   isOpen: boolean;
   getEditorContainerWidth: GetEditorContainerWidth;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
   targetCellPosition?: number;
   mountPoint?: HTMLElement;
   boundariesElement?: HTMLElement;
@@ -63,6 +67,7 @@ const FloatingContextualMenu = ({
   pluginConfig,
   editorAnalyticsAPI,
   getEditorContainerWidth,
+  getEditorFeatureFlags,
 }: Props) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const { targetCellPosition } = getPluginState(editorView.state);
@@ -103,6 +108,7 @@ const FloatingContextualMenu = ({
       zIndex={akEditorFloatingOverlapPanelZIndex}
       forcePlacement={true}
       offset={[-7, 0]}
+      stick={true}
     >
       <div css={tablePopupStyles}>
         <ContextualMenu
@@ -120,6 +126,7 @@ const FloatingContextualMenu = ({
           boundariesElement={boundariesElement}
           editorAnalyticsAPI={editorAnalyticsAPI}
           getEditorContainerWidth={getEditorContainerWidth}
+          getEditorFeatureFlags={getEditorFeatureFlags}
         />
       </div>
     </Popup>

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

@@ -362,6 +362,13 @@ export const tableStyles = (
 
       .${ClassName.ROW_CONTROLS_WRAPPER} {
         padding: 0 ${tablePadding}px;
+
+        // https://product-fabric.atlassian.net/browse/ED-16386
+        // Fixes issue where the extra padding that is added here throws off the position
+        // of the rows control dot
+        &::after {
+          right: 6px !important;
+        }
       }
 
       &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -707,10 +714,10 @@ export const tableStyles = (
     .${ClassName.TABLE_NODE_WRAPPER} {
       padding-right: ${insertColumnButtonOffset}px;
       margin-right: -${insertColumnButtonOffset}px;
-      padding-bottom: ${tableScrollbarOffset}px;
-      margin-bottom: -${tableScrollbarOffset}px;
+      padding-bottom: 0px;
       /* fixes gap cursor height */
       overflow: auto;
+      overflow-y: hidden;
       position: relative;
     }
   }
@@ -726,7 +733,7 @@ export const tableStyles = (
     cursor: col-resize;
   }
 
-  /* 
+  /*
   ED-15882: When custom start numbers is enabled for lists, we have
   styles that handle this generally (in editor-common) so we can
   throw away the older table-specific styles here.

package/src/plugins/table/ui/messages.ts

@@ -55,4 +55,9 @@ export default defineMessages({
     description:
       'Title text for confirm modal when deleting an extension linked to a data consumer.',
   },
+  unnamedSource: {
+    id: 'fabric.editor.extension.sourceNoTitledName',
+    defaultMessage: 'this element',
+    description: 'The current element without preset name been selected',
+  },
 });

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

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 import {
   tableCellBorderWidth,
-  tableMarginBottom,
   tableMarginTop,
+  tableMarginTopWithControl,
 } from '@atlaskit/editor-common/styles';
 import {
   akEditorShadowZIndex,
@@ -246,7 +246,7 @@ export const DeleteButton = css`
 export const OverflowShadow = (props: ThemeProps) => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
-    height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
+    height: calc(100% - ${tableMarginTop}px);
     position: absolute;
     pointer-events: none;
     top: ${tableMarginTop}px;
@@ -282,10 +282,13 @@ export const OverflowShadow = (props: ThemeProps) => css`
       );
     left: calc(100% + 2px);
   }
+  .${ClassName.TABLE_COLUMN_CONTROLS_DECORATIONS} {
+    z-index: 0;
+  }
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
-      top: ${tableMarginTop}px;
+      height: calc(100% - ${tableMarginTopWithControl}px);
+      top: ${tableMarginTopWithControl}px;
     }
     .${ClassName.TABLE_LEFT_SHADOW} {
       border-left: 1px solid ${tableBorderColor(props)};
@@ -326,6 +329,7 @@ export const columnControlsDecoration = (props: ThemeProps) => css`
     left: -1px;
     top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
     height: ${columnControlsDecorationHeight}px;
+    z-index: 0;
 
     &::before {
       content: ' ';

package/src/types/i18n.ts

@@ -0,0 +1,5 @@
+export interface MessageDescriptor {
+  id: string;
+  description: string;
+  defaultMessage: string;
+}