@atlaskit/editor-plugin-table 0.2.6 → 1.0.0

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

@@ -0,0 +1,14 @@
+import { createCommand } from '../pm-plugins/plugin-factory';
+import { Node as PMNode } from 'prosemirror-model';
+import { removeConnectedNodes } from '@atlaskit/editor-common/utils';
+
+export const removeDescendantNodes = (sourceNode: PMNode) =>
+  createCommand(
+    {
+      type: 'UPDATE_STATE',
+      data: { element: undefined },
+    },
+    (tr, state) => {
+      return sourceNode ? removeConnectedNodes(state, sourceNode) : tr;
+    },
+  );

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

@@ -78,6 +78,11 @@ const isFocusingModal = (event: Event) =>
   event.relatedTarget instanceof HTMLElement &&
   event.relatedTarget.closest('[role="dialog"]');
 
+const isFocusingFloatingToolbar = (event: Event) =>
+  event instanceof FocusEvent &&
+  event.relatedTarget instanceof HTMLElement &&
+  event.relatedTarget.closest('[role="toolbar"]');
+
 export const handleBlur = (view: EditorView, event: Event): boolean => {
   const { state, dispatch } = view;
   // IE version check for ED-4665
@@ -85,7 +90,8 @@ export const handleBlur = (view: EditorView, event: Event): boolean => {
   if (
     browser.ie_version !== 11 &&
     !isFocusingCalendar(event) &&
-    !isFocusingModal(event)
+    !isFocusingModal(event) &&
+    !isFocusingFloatingToolbar(event)
   ) {
     setEditorFocus(false)(state, dispatch);
   }

package/src/plugins/table/index.tsx

@@ -59,6 +59,7 @@ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
+  NextEditorPlugin,
 } from '@atlaskit/editor-common/types';
 import { EditorState, Transaction } from 'prosemirror-state';
 
@@ -76,7 +77,11 @@ interface TablePluginOptions {
 
 const defaultGetEditorFeatureFlags = () => ({});
 
-const tablesPlugin = (options?: TablePluginOptions): EditorPlugin => {
+const tablesPlugin: NextEditorPlugin<
+  'table',
+  never,
+  TablePluginOptions | undefined
+> = (options?: TablePluginOptions) => {
   const editorViewRef: Record<'current', EditorView | null> = { current: null };
   const defaultGetEditorContainerWidth: GetEditorContainerWidth = () => {
     if (!editorViewRef.current) {

package/src/plugins/table/nodeviews/table.tsx

@@ -209,7 +209,22 @@ export default class TableView extends ReactNodeView<Props> {
     return super.viewShouldUpdate(nextNode);
   }
 
-  ignoreMutation() {
+  ignoreMutation(
+    mutation: MutationRecord | { type: 'selection'; target: Element },
+  ) {
+    const {
+      type,
+      target: { nodeName, firstChild },
+    } = mutation;
+
+    if (
+      type === 'selection' &&
+      nodeName?.toUpperCase() === 'DIV' &&
+      firstChild?.nodeName.toUpperCase() === 'TABLE'
+    ) {
+      return false;
+    }
+
     return true;
   }
 

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -97,7 +97,6 @@ export class TableRowNodeView implements NodeView {
   focused = false;
   topPosEditorElement = 0;
   isSticky: boolean;
-  isTableInit: boolean;
   lastTimePainted: number;
 
   private intersectionObserver?: IntersectionObserver;
@@ -134,7 +133,6 @@ export class TableRowNodeView implements NodeView {
     this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
-    this.isTableInit = false;
 
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');
@@ -486,14 +484,6 @@ export class TableRowNodeView implements NodeView {
       return;
     }
 
-    // make it non-sticky initially to avoid making it look separated
-    if (!this.isTableInit) {
-      if (this.tree) {
-        this.makeRowHeaderNotSticky(this.tree.table);
-        this.isTableInit = true;
-      }
-    }
-
     // when header rows are toggled off - mark sentinels as unobserved
     if (!state.isHeaderRowEnabled) {
       [this.sentinels.top, this.sentinels.bottom].forEach((el) => {
@@ -504,6 +494,11 @@ export class TableRowNodeView implements NodeView {
     }
 
     const isCurrentTableSelected = tableRef === tree.table;
+
+    // If current table selected and header row is toggled off, turn off sticky header
+    if (isCurrentTableSelected && !state.isHeaderRowEnabled && this.tree) {
+      this.makeRowHeaderNotSticky(this.tree.table);
+    }
     if (isCurrentTableSelected !== this.focused) {
       focusChanged = true;
     }
@@ -598,6 +593,13 @@ export class TableRowNodeView implements NodeView {
 
     const { table } = tree;
 
+    // ED-16035 Make sure sticky header is only applied to first row
+    const tbody = this.dom.parentElement;
+    const isFirstHeader = tbody?.firstChild?.isEqualNode(this.dom);
+    if (!isFirstHeader) {
+      return;
+    }
+
     const currentTableTop = this.getCurrentTableTop(tree);
     const domTop =
       currentTableTop > 0

package/src/plugins/table/toolbar.tsx

@@ -7,6 +7,7 @@ import commonMessages from '@atlaskit/editor-common/messages';
 import type {
   Command,
   CommandDispatch,
+  ConfirmDialogOptions,
   DropdownOptionT,
   FloatingToolbarDropdown,
   FloatingToolbarHandler,
@@ -21,6 +22,7 @@ import {
   hoverTable,
   hoverColumns,
   hoverRows,
+  removeDescendantNodes,
 } from './commands';
 import {
   deleteTableWithAnalytics,
@@ -54,7 +56,12 @@ import {
   getSelectedColumnIndexes,
   getSelectedRowIndexes,
 } from './utils';
-import { isReferencedSource } from './utils/referentiality';
+import {
+  isReferencedSource,
+  getChildrenInfo,
+  getNodeName,
+} from '@atlaskit/editor-common/utils';
+
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import {
   findCellRectClosestToPos,
@@ -72,6 +79,7 @@ import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { Rect } from '@atlaskit/editor-tables/table-map';
 import { findParentDomRefOfType } from 'prosemirror-utils';
 import { EditorView } from 'prosemirror-view';
+import { Node as PMNode } from 'prosemirror-model';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import {
   addColumnAfter,
@@ -157,6 +165,7 @@ export const getToolbarMenuConfig = (
   return {
     id: 'editor.table.tableOptions',
     type: 'dropdown',
+    testId: 'table_options',
     title: formatMessage(messages.tableOptions),
     hidden: options.every((option) => option.hidden),
     options,
@@ -239,17 +248,9 @@ export const getToolbarCellOptionsConfig = (
         }
         return true;
       },
-      onMouseOver: (state: EditorState, dispatch?: CommandDispatch) => {
-        const selectionRect = getClosestSelectionRect(state);
-        if (selectionRect) {
-          hoverColumns(getSelectedColumnIndexes(selectionRect), true)(
-            state,
-            dispatch,
-          );
-          return true;
-        }
-        return false;
-      },
+      onFocus: highlightColumnsHandler,
+      onBlur: clearHoverSelection(),
+      onMouseOver: highlightColumnsHandler,
       onMouseLeave: clearHoverSelection(),
       selected: false,
       disabled: false,
@@ -270,17 +271,9 @@ export const getToolbarCellOptionsConfig = (
         }
         return true;
       },
-      onMouseOver: (state: EditorState, dispatch?: CommandDispatch) => {
-        const selectionRect = getClosestSelectionRect(state);
-        if (selectionRect) {
-          hoverRows(getSelectedRowIndexes(selectionRect), true)(
-            state,
-            dispatch,
-          );
-          return true;
-        }
-        return false;
-      },
+      onFocus: highlightRowsHandler,
+      onBlur: clearHoverSelection(),
+      onMouseOver: highlightRowsHandler,
       onMouseLeave: clearHoverSelection(),
       selected: false,
       disabled: false,
@@ -396,6 +389,7 @@ export const getToolbarCellOptionsConfig = (
 
   return {
     id: 'editor.table.cellOptions',
+    testId: 'cell_options',
     type: 'dropdown',
     title: formatMessage(tableMessages.cellOptions),
     options,
@@ -456,17 +450,28 @@ export const getToolbarConfig =
 
       // 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 = {
+      if (isReferencedSource(state, tableObject.node)) {
+        confirmDialog = (): ConfirmDialogOptions => ({
+          title: intl.formatMessage(tableMessages.deleteElementTitle),
           okButtonLabel: intl.formatMessage(
             tableMessages.confirmDeleteLinkedModalOKButton,
           ),
           message: intl.formatMessage(
             tableMessages.confirmDeleteLinkedModalMessage,
+            { nodeName: getNodeName(state, tableObject.node) },
+          ),
+          messagePrefix: intl.formatMessage(
+            tableMessages.confirmDeleteLinkedModalMessagePrefix,
           ),
-        };
+          isReferentialityDialog: true,
+          getChildrenInfo: () => getChildrenInfo(state, tableObject.node),
+          checkboxLabel: intl.formatMessage(
+            tableMessages.confirmModalCheckboxLabel,
+          ),
+          onConfirm: (isChecked = false) =>
+            clickWithCheckboxHandler(isChecked, tableObject.node),
+        });
       }
 
       const getDomRef = (editorView: EditorView) => {
@@ -516,6 +521,8 @@ export const getToolbarConfig =
                 nodeType,
                 onMouseEnter: hoverTable(false, true),
                 onMouseLeave: clearHoverSelection(),
+                onFocus: hoverTable(false, true),
+                onBlur: clearHoverSelection(),
               },
               { type: 'separator' },
             ],
@@ -528,8 +535,11 @@ export const getToolbarConfig =
             onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
             disabled: !!resizeState && !!resizeState.dragging,
             onMouseEnter: hoverTable(true),
+            onFocus: hoverTable(true),
+            onBlur: clearHoverSelection(),
             onMouseLeave: clearHoverSelection(),
             title: intl.formatMessage(commonMessages.remove),
+            focusEditoronEnter: true,
             confirmDialog,
           },
         ],
@@ -604,7 +614,7 @@ const getColorPicker = (
 
   return [
     {
-      id: 'editor.panel.colorPicker',
+      id: 'editor.table.colorPicker',
       title: formatMessage(ContextualMenuMessages.cellBackground),
       type: 'select',
       selectType: 'color',
@@ -620,3 +630,49 @@ const getColorPicker = (
     separator(menu.hidden),
   ];
 };
+
+const clickWithCheckboxHandler =
+  (
+    isChecked: boolean,
+    node?: PMNode,
+    editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null,
+  ): Command =>
+  (state, dispatch) => {
+    if (!node) {
+      return false;
+    }
+
+    if (!isChecked) {
+      return deleteTableWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+    } else {
+      removeDescendantNodes(node)(state, dispatch);
+    }
+    return true;
+  };
+
+const highlightRowsHandler = (
+  state: EditorState,
+  dispatch?: CommandDispatch,
+) => {
+  const selectionRect = getClosestSelectionRect(state);
+  if (selectionRect) {
+    hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
+    return true;
+  }
+  return false;
+};
+
+const highlightColumnsHandler = (
+  state: EditorState,
+  dispatch?: CommandDispatch,
+) => {
+  const selectionRect = getClosestSelectionRect(state);
+  if (selectionRect) {
+    hoverColumns(getSelectedColumnIndexes(selectionRect), true)(
+      state,
+      dispatch,
+    );
+    return true;
+  }
+  return false;
+};

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

@@ -4,6 +4,7 @@ import {
   tableMarginTop,
   tableSharedStyle,
 } from '@atlaskit/editor-common/styles';
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import { fontSize } from '@atlaskit/theme/constants';
 import { N40A, B300, N300, N20A, N0, R500 } from '@atlaskit/theme/colors';
 import {
@@ -112,8 +113,18 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
   }
 }`;
 
+// previous styles to add spacing to numbered lists with
+// large item markers (e.g. 101, 102, ...) when nested inside tables
+const listLargeNumericMarkersOldStyles = `
+  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {
+    padding-left: revert;
+  }
+`;
+
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
-export const tableStyles = (props: ThemeProps) => css`
+export const tableStyles = (
+  props: ThemeProps & { featureFlags?: FeatureFlags },
+) => css`
   .${ClassName.LAYOUT_BUTTON} button {
     background: ${token('color.background.neutral', N20A)};
     color: ${token('color.icon', N300)};
@@ -713,9 +724,14 @@ export const tableStyles = (props: ThemeProps) => css`
     cursor: col-resize;
   }
 
-  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {
-    padding-left: revert;
-  }
+  /* 
+  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.
+  */
+  ${props?.featureFlags?.restartNumberedLists
+    ? ``
+    : listLargeNumericMarkersOldStyles}
 `;
 
 export const tableFullPageEditorStyles = css`

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

@@ -29,15 +29,30 @@ export default defineMessages({
 
   confirmDeleteLinkedModalOKButton: {
     id: 'fabric.editor.tables.confirmDeleteLinkedModalOKButton',
-    defaultMessage: 'Remove table and data',
+    defaultMessage: 'Delete',
     description:
       'Action button label for confirm modal when deleting a table linked to an extension.',
   },
   confirmDeleteLinkedModalMessage: {
     id: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
-    defaultMessage:
-      'Removing this table will break all the charts connected to it.',
+    defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
     description:
       'Message for confirm modal when deleting a table linked to an extension.',
   },
+  confirmDeleteLinkedModalMessagePrefix: {
+    id: 'fabric.editor.extension.confirmDeleteLinkedModalMessagePrefix',
+    defaultMessage: 'Deleting',
+    description: 'prefix for confirmation dialog text',
+  },
+  confirmModalCheckboxLabel: {
+    id: 'fabric.editor.floatingToolbar.confirmModalCheckboxLabel',
+    defaultMessage: 'Also delete connected elements',
+    description: 'checkbox label text',
+  },
+  deleteElementTitle: {
+    id: 'fabric.editor.extension.deleteElementTitle',
+    defaultMessage: 'Delete element',
+    description:
+      'Title text for confirm modal when deleting an extension linked to a data consumer.',
+  },
 });

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

@@ -243,22 +243,27 @@ export const DeleteButton = css`
   }
 `;
 
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4451
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export const OverflowShadow = (props: ThemeProps) => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
-    height: calc(
-      100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px
-    );
+    height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
     position: absolute;
     pointer-events: none;
-    top: ${tableMarginTop + tableToolbarSize - 1}px;
+    top: ${tableMarginTop}px;
     z-index: ${akEditorShadowZIndex};
     width: 8px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
-    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ${N40A} 100%);
+    background: linear-gradient(
+        to left,
+        transparent 0,
+        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+      ),
+      linear-gradient(
+        to right,
+        ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
+        transparent 1px
+      );
     left: 0px;
   }
   .${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
@@ -266,23 +271,27 @@ export const OverflowShadow = (props: ThemeProps) => css`
   }
   .${ClassName.TABLE_RIGHT_SHADOW} {
     background: linear-gradient(
-      to right,
-      rgba(99, 114, 130, 0) 0,
-      ${N40A} 100%
-    );
+        to right,
+        transparent 0,
+        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+      ),
+      linear-gradient(
+        to left,
+        ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
+        transparent 1px
+      );
     left: calc(100% + 2px);
   }
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
-      top: ${tableMarginTop - 1}px;
+      height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
+      top: ${tableMarginTop}px;
     }
     .${ClassName.TABLE_LEFT_SHADOW} {
       border-left: 1px solid ${tableBorderColor(props)};
     }
   }
 `;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 const columnHeaderButton = (props: ThemeProps, cssString?: string) => css`
   background: ${tableToolbarColor(props)};

package/dist/cjs/plugins/table/utils/referentiality.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isReferencedSource = void 0;
-
-var isReferencedSource = function isReferencedSource(state, localId) {
-  var found = false;
-  state.doc.descendants(function (node) {
-    if (found) {
-      return false;
-    }
-
-    var dataConsumer = node.marks.find(function (mark) {
-      return mark.type === state.schema.marks.dataConsumer;
-    });
-
-    if (!dataConsumer) {
-      return true;
-    }
-
-    found = (dataConsumer.attrs.sources || []).includes(localId);
-    return !found;
-  });
-  return found;
-};
-
-exports.isReferencedSource = isReferencedSource;

package/dist/es2019/plugins/table/utils/referentiality.js

@@ -1,18 +0,0 @@
-export const isReferencedSource = (state, localId) => {
-  let found = false;
-  state.doc.descendants(node => {
-    if (found) {
-      return false;
-    }
-
-    const dataConsumer = node.marks.find(mark => mark.type === state.schema.marks.dataConsumer);
-
-    if (!dataConsumer) {
-      return true;
-    }
-
-    found = (dataConsumer.attrs.sources || []).includes(localId);
-    return !found;
-  });
-  return found;
-};

package/dist/esm/plugins/table/utils/referentiality.js

@@ -1,20 +0,0 @@
-export var isReferencedSource = function isReferencedSource(state, localId) {
-  var found = false;
-  state.doc.descendants(function (node) {
-    if (found) {
-      return false;
-    }
-
-    var dataConsumer = node.marks.find(function (mark) {
-      return mark.type === state.schema.marks.dataConsumer;
-    });
-
-    if (!dataConsumer) {
-      return true;
-    }
-
-    found = (dataConsumer.attrs.sources || []).includes(localId);
-    return !found;
-  });
-  return found;
-};

package/dist/types/plugins/table/utils/referentiality.d.ts

@@ -1,2 +0,0 @@
-import { EditorState } from 'prosemirror-state';
-export declare const isReferencedSource: (state: EditorState, localId: string) => boolean;

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

@@ -1,24 +0,0 @@
-import { EditorState } from 'prosemirror-state';
-
-export const isReferencedSource = (state: EditorState, localId: string) => {
-  let found = false;
-
-  state.doc.descendants((node) => {
-    if (found) {
-      return false;
-    }
-
-    const dataConsumer = node.marks.find(
-      (mark) => mark.type === state.schema.marks.dataConsumer,
-    );
-
-    if (!dataConsumer) {
-      return true;
-    }
-
-    found = (dataConsumer.attrs.sources || []).includes(localId);
-    return !found;
-  });
-
-  return found;
-};