@atlaskit/editor-plugin-table 0.2.5 → 1.0.0

package/dist/es2019/plugins/table/event-handlers.js

@@ -18,6 +18,8 @@ const isFocusingCalendar = event => event instanceof FocusEvent && event.related
 
 const isFocusingModal = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
 
+const isFocusingFloatingToolbar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="toolbar"]');
+
 export const handleBlur = (view, event) => {
   const {
     state,
@@ -25,7 +27,7 @@ export const handleBlur = (view, event) => {
   } = view; // IE version check for ED-4665
   // Calendar focus check for ED-10466
 
-  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event)) {
+  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event)) {
     setEditorFocus(false)(state, dispatch);
   }
 

package/dist/es2019/plugins/table/nodeviews/table.js

@@ -164,7 +164,19 @@ export default class TableView extends ReactNodeView {
     return super.viewShouldUpdate(nextNode);
   }
 
-  ignoreMutation() {
+  ignoreMutation(mutation) {
+    const {
+      type,
+      target: {
+        nodeName,
+        firstChild
+      }
+    } = mutation;
+
+    if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
+      return false;
+    }
+
     return true;
   }
 

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -138,14 +138,6 @@ export class TableRowNodeView {
 
       if (!tree) {
         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
 
 
@@ -157,7 +149,11 @@ export class TableRowNodeView {
         });
       }
 
-      const isCurrentTableSelected = tableRef === tree.table;
+      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;
@@ -236,6 +232,8 @@ export class TableRowNodeView {
     });
 
     _defineProperty(this, "makeHeaderRowSticky", tree => {
+      var _tbody$firstChild;
+
       // If header row height is more than 50% of viewport height don't do this
       if (this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
         return;
@@ -243,7 +241,15 @@ export class TableRowNodeView {
 
       const {
         table
-      } = tree;
+      } = tree; // ED-16035 Make sure sticky header is only applied to first row
+
+      const tbody = this.dom.parentElement;
+      const isFirstHeader = tbody === null || tbody === void 0 ? void 0 : (_tbody$firstChild = tbody.firstChild) === null || _tbody$firstChild === void 0 ? void 0 : _tbody$firstChild.isEqualNode(this.dom);
+
+      if (!isFirstHeader) {
+        return;
+      }
+
       const currentTableTop = this.getCurrentTableTop(tree);
       const domTop = currentTableTop > 0 ? this.topPosEditorElement : this.topPosEditorElement + currentTableTop;
 
@@ -335,7 +341,6 @@ export class TableRowNodeView {
     this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
-    this.isTableInit = false;
 
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');

package/dist/es2019/plugins/table/toolbar.js

@@ -3,13 +3,13 @@ import { jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import commonMessages from '@atlaskit/editor-common/messages';
-import { clearHoverSelection, hoverTable, hoverColumns, hoverRows } from './commands';
+import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescendantNodes } from './commands';
 import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, 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';
 import { TableCssClassName } from './types';
 import { getMergedCellsPositions, 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, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { canMergeCells } from './transforms';
@@ -83,6 +83,7 @@ export const getToolbarMenuConfig = (config, state, {
   return {
     id: 'editor.table.tableOptions',
     type: 'dropdown',
+    testId: 'table_options',
     title: formatMessage(messages.tableOptions),
     hidden: options.every(option => option.hidden),
     options
@@ -158,16 +159,9 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
 
       return true;
     },
-    onMouseOver: (state, dispatch) => {
-      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
@@ -185,16 +179,9 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
 
       return true;
     },
-    onMouseOver: (state, dispatch) => {
-      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
@@ -283,6 +270,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
   });
   return {
     id: 'editor.table.cellOptions',
+    testId: 'cell_options',
     type: 'dropdown',
     title: formatMessage(tableMessages.cellOptions),
     options,
@@ -312,13 +300,20 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
 
     let confirmDialog;
-    const localId = tableObject.node.attrs.localId;
 
-    if (localId && isReferencedSource(state, localId)) {
-      confirmDialog = {
+    if (isReferencedSource(state, tableObject.node)) {
+      confirmDialog = () => ({
+        title: intl.formatMessage(tableMessages.deleteElementTitle),
         okButtonLabel: intl.formatMessage(tableMessages.confirmDeleteLinkedModalOKButton),
-        message: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessage)
-      };
+        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 => {
@@ -354,7 +349,9 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
           formatMessage: intl.formatMessage,
           nodeType,
           onMouseEnter: hoverTable(false, true),
-          onMouseLeave: clearHoverSelection()
+          onMouseLeave: clearHoverSelection(),
+          onFocus: hoverTable(false, true),
+          onBlur: clearHoverSelection()
         }, {
           type: 'separator'
         }]
@@ -366,8 +363,11 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
         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
       }],
       scrollable: true
@@ -423,7 +423,7 @@ const getColorPicker = (state, menu, {
     border: DEFAULT_BORDER_COLOR
   };
   return [{
-    id: 'editor.panel.colorPicker',
+    id: 'editor.table.colorPicker',
     title: formatMessage(ContextualMenuMessages.cellBackground),
     type: 'select',
     selectType: 'color',
@@ -431,4 +431,40 @@ const getColorPicker = (state, menu, {
     options: cellBackgroundColorPalette,
     onChange: option => setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition)
   }, separator(menu.hidden)];
+};
+
+const clickWithCheckboxHandler = (isChecked, node, editorAnalyticsAPI) => (state, dispatch) => {
+  if (!node) {
+    return false;
+  }
+
+  if (!isChecked) {
+    return deleteTableWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+  } else {
+    removeDescendantNodes(node)(state, dispatch);
+  }
+
+  return true;
+};
+
+const highlightRowsHandler = (state, dispatch) => {
+  const selectionRect = getClosestSelectionRect(state);
+
+  if (selectionRect) {
+    hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
+    return true;
+  }
+
+  return false;
+};
+
+const highlightColumnsHandler = (state, dispatch) => {
+  const selectionRect = getClosestSelectionRect(state);
+
+  if (selectionRect) {
+    hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
+    return true;
+  }
+
+  return false;
 };

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -47,10 +47,17 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
       margin-bottom: ${columnControlsDecorationHeight}px;
     }
   }
-}`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
+}`; // 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 => {
-  var _props$featureFlags;
+  var _props$featureFlags, _props$featureFlags2;
 
   return css`
   .${ClassName.LAYOUT_BUTTON} button {
@@ -625,9 +632,12 @@ export const tableStyles = props => {
     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 !== null && props !== void 0 && (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.restartNumberedLists ? `` : listLargeNumericMarkersOldStyles}
 `;
 };
 export const tableFullPageEditorStyles = css`

package/dist/es2019/plugins/table/ui/messages.js

@@ -27,12 +27,27 @@ 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/dist/es2019/plugins/table/ui/ui-styles.js

@@ -186,24 +186,28 @@ export const DeleteButton = css`
     color: ${token('color.icon.inverse', 'white')};
     cursor: pointer;
   }
-`; // TODO: https://product-fabric.atlassian.net/browse/DSP-4451
-
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
+`;
 export const OverflowShadow = props => 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} {
@@ -211,23 +215,27 @@ export const OverflowShadow = props => 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, cssString) => css`
   background: ${tableToolbarColor(props)};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.2.5",
+	"version": "1.0.0",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/commands/index.js

@@ -4,4 +4,5 @@ export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRo
 export { clearMultipleCells } from './clear';
 export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectRow, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations } from './misc';
 export { sortByColumn } from './sort';
-export { goToNextCell } from './go-to-next-cell';
+export { goToNextCell } from './go-to-next-cell';
+export { removeDescendantNodes } from './referentiality';

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

@@ -0,0 +1,12 @@
+import { createCommand } from '../pm-plugins/plugin-factory';
+import { removeConnectedNodes } from '@atlaskit/editor-common/utils';
+export var removeDescendantNodes = function removeDescendantNodes(sourceNode) {
+  return createCommand({
+    type: 'UPDATE_STATE',
+    data: {
+      element: undefined
+    }
+  }, function (tr, state) {
+    return sourceNode ? removeConnectedNodes(state, sourceNode) : tr;
+  });
+};

package/dist/esm/plugins/table/event-handlers.js

@@ -23,12 +23,16 @@ var isFocusingModal = function isFocusingModal(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
 };
 
+var isFocusingFloatingToolbar = function isFocusingFloatingToolbar(event) {
+  return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="toolbar"]');
+};
+
 export var handleBlur = function handleBlur(view, event) {
   var state = view.state,
       dispatch = view.dispatch; // IE version check for ED-4665
   // Calendar focus check for ED-10466
 
-  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event)) {
+  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event)) {
     setEditorFocus(false)(state, dispatch);
   }
 

package/dist/esm/plugins/table/nodeviews/table.js

@@ -194,7 +194,16 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     }
   }, {
     key: "ignoreMutation",
-    value: function ignoreMutation() {
+    value: function ignoreMutation(mutation) {
+      var type = mutation.type,
+          _mutation$target = mutation.target,
+          nodeName = _mutation$target.nodeName,
+          firstChild = _mutation$target.firstChild;
+
+      if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
+        return false;
+      }
+
       return true;
     }
   }, {

package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -154,15 +154,6 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
       if (!tree) {
         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
 
 
@@ -174,7 +165,11 @@ export var TableRowNodeView = /*#__PURE__*/function () {
         });
       }
 
-      var isCurrentTableSelected = tableRef === tree.table;
+      var 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;
@@ -252,12 +247,21 @@ export var TableRowNodeView = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "makeHeaderRowSticky", function (tree) {
+      var _tbody$firstChild;
+
       // If header row height is more than 50% of viewport height don't do this
       if (_this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
         return;
       }
 
-      var table = tree.table;
+      var table = tree.table; // ED-16035 Make sure sticky header is only applied to first row
+
+      var tbody = _this.dom.parentElement;
+      var isFirstHeader = tbody === null || tbody === void 0 ? void 0 : (_tbody$firstChild = tbody.firstChild) === null || _tbody$firstChild === void 0 ? void 0 : _tbody$firstChild.isEqualNode(_this.dom);
+
+      if (!isFirstHeader) {
+        return;
+      }
 
       var currentTableTop = _this.getCurrentTableTop(tree);
 
@@ -364,7 +368,6 @@ export var TableRowNodeView = /*#__PURE__*/function () {
     this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
-    this.isTableInit = false;
 
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');