@atlaskit/editor-plugin-table 5.4.10 → 5.4.12

package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -9,9 +9,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-/** @jsx jsx */
 import { Component } from 'react';
-import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -82,15 +80,15 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           value: {
             name: 'background'
           },
-          elemAfter: jsx("div", {
+          elemAfter: /*#__PURE__*/React.createElement("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
-          }, jsx("div", {
+          }, /*#__PURE__*/React.createElement("div", {
             css: cellColourPreviewStyles(background),
             className: ClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && jsx("div", {
+          }), isSubmenuOpen && /*#__PURE__*/React.createElement("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
-          }, jsx(ColorPalette, {
+          }, /*#__PURE__*/React.createElement(ColorPalette, {
             cols: 7,
             onClick: _this.setColor,
             selectedColor: background,
@@ -107,7 +105,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'insert_column'
         },
-        elemAfter: jsx("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter))
       });
@@ -116,7 +114,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'insert_row'
         },
-        elemAfter: jsx("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter))
       });
@@ -196,7 +194,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         value: {
           name: 'clear'
         },
-        elemAfter: jsx("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: shortcutStyle
         }, tooltip(backspace))
       });
@@ -358,10 +356,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       if (!items) {
         return null;
       }
-      return jsx("div", {
+      return /*#__PURE__*/React.createElement("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
-      }, jsx(DropdownMenu, {
+      }, /*#__PURE__*/React.createElement(DropdownMenu, {
         mountTo: mountPoint
         //This needs be removed when the a11y is completely handled
         //Disabling key navigation now as it works only partially

package/dist/esm/plugins/table/ui/FloatingContextualMenu/index.js

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -34,7 +32,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     return null;
   }
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-  return jsx(Popup, {
+  return /*#__PURE__*/React.createElement(Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -50,9 +48,9 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     forcePlacement: true,
     offset: [-7, 0],
     stick: true
-  }, jsx("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     css: tablePopupStyles
-  }, jsx(ContextualMenu, {
+  }, /*#__PURE__*/React.createElement(ContextualMenu, {
     editorView: editorView,
     offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],
     isOpen: isOpen,

package/dist/esm/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -1,6 +1,4 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -31,15 +29,15 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? jsx("div", {
+      elemBefore: item.icon ? /*#__PURE__*/React.createElement("div", {
         style: {
           marginRight: "var(--ds-space-negative-075, -6px)",
           display: 'flex'
         }
-      }, jsx(item.icon, {
+      }, /*#__PURE__*/React.createElement(item.icon, {
         label: item.title
       })) : undefined,
-      elemAfter: item.keymap ? jsx("div", {
+      elemAfter: item.keymap ? /*#__PURE__*/React.createElement("div", {
         css: shortcutStyle
       }, item.keymap) : undefined
     });
@@ -131,7 +129,7 @@ export var DragMenu = function DragMenu(_ref) {
   if (!menuItems) {
     return null;
   }
-  return jsx(DropdownMenu, {
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially

package/dist/esm/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -89,14 +89,11 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     }
     return [0];
   }, [tableRef, tableRect.height]);
-  if (!tableRef) {
+  if (!tableRef || !tableActive) {
     return null;
   }
   var colWidths = getColumnsWidths(editorView);
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  if (!tableActive) {
-    return null;
-  }
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.4.10",
+  "version": "5.4.12",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,8 +27,8 @@
     "releaseModel": "continuous"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^34.0.1",
-    "@atlaskit/custom-steps": "^0.0.5",
+    "@atlaskit/adf-schema": "^35.0.0",
+    "@atlaskit/custom-steps": "^0.0.6",
     "@atlaskit/editor-common": "^76.24.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.3.0",

package/src/plugins/table/index.tsx

@@ -238,8 +238,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         },
         {
           name: 'tableEditing',
-          plugin: () =>
-            tableEditing({
+          plugin: () => {
+            const { dragAndDropEnabled } =
+              options || ({} as TablePluginOptions);
+
+            return tableEditing({
               reportFixedTable: ({
                 tr,
                 reason,
@@ -257,7 +260,9 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                   eventType: EVENT_TYPE.TRACK,
                 })(tr);
               },
-            }) as SafePlugin,
+              dragAndDropEnabled,
+            }) as SafePlugin;
+          },
         },
         {
           name: 'tableStickyHeaders',

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

@@ -134,26 +134,35 @@ export const DragHandle = ({
   ]);
 
   return (
-    <button
-      className={classnames(
-        ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
-        appearance,
-        isDragAndDropEnabled &&
-          hasMergedCells &&
-          ClassName.DRAG_HANDLE_DISABLED,
-      )}
-      ref={dragHandleDivRef}
-      style={{
-        transform: direction === 'column' ? 'none' : 'rotate(90deg)',
-        pointerEvents: 'auto',
-      }}
-      data-testid="table-floating-column-controls-drag-handle"
-      onMouseOver={onMouseOver}
-      onMouseOut={onMouseOut}
-      onMouseUp={onMouseUp}
-      onClick={onClick}
-    >
-      <HandleIconComponent {...handleIconProps} />
+    <>
+      <button
+        className={classnames(
+          ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
+          ClassName.CONTROLS_BUTTON,
+          appearance,
+          {
+            [ClassName.DRAG_HANDLE_DISABLED]:
+              isDragAndDropEnabled && hasMergedCells,
+          },
+        )}
+        ref={dragHandleDivRef}
+        style={{
+          transform: direction === 'column' ? 'none' : 'rotate(90deg)',
+          pointerEvents: 'auto',
+        }}
+        data-testid="table-floating-column-controls-drag-handle"
+        onMouseOver={onMouseOver}
+        onMouseOut={onMouseOut}
+        onMouseUp={(e) => {
+          // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
+          // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
+          editorView.focus();
+          onMouseUp && onMouseUp(e);
+        }}
+        onClick={onClick}
+      >
+        <HandleIconComponent {...handleIconProps} />
+      </button>
       {previewContainer &&
         previewWidth !== undefined &&
         previewHeight !== undefined &&
@@ -165,6 +174,6 @@ export const DragHandle = ({
           />,
           previewContainer,
         )}
-    </button>
+    </>
   );
 };

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

@@ -108,7 +108,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
     return [0];
   }, [tableRef, tableRect.height]);
 
-  if (!tableRef) {
+  if (!tableRef || !tableActive) {
     return null;
   }
 
@@ -119,10 +119,6 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
       ? stickyHeader.top
       : undefined;
 
-  if (!tableActive) {
-    return null;
-  }
-
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}