@atlaskit/editor-plugin-table 5.4.7 → 5.4.8

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

@@ -13,7 +13,6 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../types");
 var _ColumnResizeWidget = require("../ui/ColumnResizeWidget");
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
@@ -163,32 +162,28 @@ var createColumnSelectedDecoration = exports.createColumnSelectedDecoration = fu
 };
 var createColumnControlsDecoration = exports.createColumnControlsDecoration = function createColumnControlsDecoration(selection) {
   var cells = (0, _utils2.getCellsInRow)(0)(selection) || [];
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
-    return [];
-  } else {
-    var index = 0;
-    return cells.map(function (cell) {
-      var colspan = cell.node.attrs.colspan || 1;
-      // It's important these values are scoped locally as the widget callback could be executed anytime in the future
-      // and we want to avoid value leak
-      var startIndex = index;
-      var endIndex = startIndex + colspan;
+  var index = 0;
+  return cells.map(function (cell) {
+    var colspan = cell.node.attrs.colspan || 1;
+    // It's important these values are scoped locally as the widget callback could be executed anytime in the future
+    // and we want to avoid value leak
+    var startIndex = index;
+    var endIndex = startIndex + colspan;
 
-      // The next cell start index will commence from the current cell end index.
-      index = endIndex;
-      return _view.Decoration.widget(cell.pos + 1, function () {
-        var element = document.createElement('div');
-        element.classList.add(_types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
-        element.dataset.startIndex = "".concat(startIndex);
-        element.dataset.endIndex = "".concat(endIndex);
-        return element;
-      }, {
-        key: "".concat(_types.TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(endIndex),
-        // this decoration should be the first one, even before gap cursor.
-        side: -100
-      });
+    // The next cell start index will commence from the current cell end index.
+    index = endIndex;
+    return _view.Decoration.widget(cell.pos + 1, function () {
+      var element = document.createElement('div');
+      element.classList.add(_types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
+      element.dataset.startIndex = "".concat(startIndex);
+      element.dataset.endIndex = "".concat(endIndex);
+      return element;
+    }, {
+      key: "".concat(_types.TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(endIndex),
+      // this decoration should be the first one, even before gap cursor.
+      side: -100
     });
-  }
+  });
 };
 var updateDecorations = exports.updateDecorations = function updateDecorations(node, decorationSet, decorations, key) {
   var filteredDecorations = filterDecorationByKey(key, decorationSet);

package/dist/es2019/plugins/table/commands/misc.js

@@ -1,5 +1,3 @@
-// #region Imports
-
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -26,7 +24,9 @@ export const setTableRef = ref => createCommand(state => {
   const tablePos = ref && foundTable ? foundTable.pos : undefined;
   const tableWrapperTarget = closestElement(tableRef, `.${ClassName.TABLE_NODE_WRAPPER}`) || undefined;
   const layout = tableNode ? tableNode.attrs.layout : undefined;
-  const decorationSet = updatePluginStateDecorations(state, createColumnControlsDecoration(state.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
+  const {
+    isDragAndDropEnabled
+  } = getPluginState(state);
   return {
     type: 'SET_TABLE_REF',
     data: {
@@ -38,7 +38,8 @@ export const setTableRef = ref => createCommand(state => {
       isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
       isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
       isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
-      decorationSet,
+      // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
+      decorationSet: !isDragAndDropEnabled ? updatePluginStateDecorations(state, createColumnControlsDecoration(state.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS) : undefined,
       resizeHandleRowIndex: undefined,
       resizeHandleColumnIndex: undefined
     }

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

@@ -533,9 +533,7 @@ class TableComponent extends React.Component {
     const tableRef = this.table || undefined;
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
     const hasHeaderRow = containsHeaderRow(node);
-    const rowControls = /*#__PURE__*/React.createElement("div", {
-      className: ClassName.ROW_CONTROLS_WRAPPER
-    }, /*#__PURE__*/React.createElement(TableFloatingControls, {
+    const rowControls = /*#__PURE__*/React.createElement(TableFloatingControls, {
       editorView: view,
       tableRef: tableRef,
       tableNode: node,
@@ -555,7 +553,7 @@ class TableComponent extends React.Component {
       selection: view.state.selection,
       headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
       stickyHeader: this.state.stickyHeader
-    }));
+    });
     const colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
       editorView: view,
       tableRef: tableRef,

package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js

@@ -2,7 +2,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../table-width';
 import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils';
@@ -12,15 +11,21 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
   var _tableWidthPluginKey$, _tableWidthPluginKey$2;
   const isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   const wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
+  const {
+    isDragAndDropEnabled = false
+  } = tablePluginKey.getState(newState) || {};
   const changedResizing = isResizing !== wasResizing;
 
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
-  if (isResizing || getBooleanFF('platform.editor.table.drag-and-drop')) {
+  if (isResizing) {
     return DecorationSet.empty;
   } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
     return buildColumnControlsDecorations({
       decorationSet,
-      tr
+      tr,
+      options: {
+        isDragAndDropEnabled
+      }
     });
   } else if (tr.selectionSet) {
     const isTransactionFromMouseClick = !tr.docChanged && tr.selectionSet && tr.getMeta('pointer');
@@ -39,6 +44,7 @@ export const createPlugin = () => {
       init: () => DecorationSet.empty,
       apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
+        // main table plugin --->
         const meta = tr.getMeta(tablePluginKey);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;

package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -25,8 +25,6 @@ const maybeUpdateColumnControlsDecoration = ({
   tr
 }) => {
   const table = findTable(tr.selection);
-
-  // avoid re-drawing state if dnd decorations don't need to be updated
   if (!table) {
     return decorationSet;
   }
@@ -52,8 +50,15 @@ export const maybeUpdateColumnControlsSelectedDecoration = ({
 };
 export const buildColumnControlsDecorations = ({
   decorationSet,
-  tr
+  tr,
+  options
 }) => {
+  if (options.isDragAndDropEnabled) {
+    return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration])({
+      decorationSet,
+      tr
+    });
+  }
   return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
     decorationSet,
     tr

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

@@ -79,7 +79,8 @@ export const TableCssClassName = {
   CORNER_CONTROLS_INSERT_ROW_MARKER: `${tablePrefixSelector}-corner-controls__insert-row-marker`,
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
-  /** Controls with drag handle */
+  /** drag and drop controls */
+  DRAG_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-drag-row-controls-wrapper`,
   DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
   DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
   DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,

package/dist/es2019/plugins/table/ui/TableFloatingControls/index.js

@@ -128,7 +128,10 @@ export default class TableFloatingControls extends Component {
       return null;
     }
     const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
+    const wrapperClassName = isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
     return /*#__PURE__*/React.createElement("div", {
+      className: wrapperClassName
+    }, /*#__PURE__*/React.createElement("div", {
       onMouseDown: e => !isDragAndDropEnabled && e.preventDefault()
     }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
       editorView: editorView,
@@ -178,7 +181,7 @@ export default class TableFloatingControls extends Component {
       isResizing: isResizing,
       selectRow: this.selectRow,
       stickyTop: tableActive ? stickyTop : undefined
-    }))));
+    })))));
   }
 }
 _defineProperty(TableFloatingControls, "displayName", 'TableFloatingControls');

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

@@ -173,23 +173,6 @@ const tableStickyHeaderFirefoxFixStyle = props => {
     `;
   }
 };
-const tableRowControlStyles = () => {
-  return getBooleanFF('platform.editor.table.drag-and-drop') ? css`
-        .${ClassName.ROW_CONTROLS_WRAPPER} {
-          position: absolute;
-          margin-top: ${tableMarginTop}px;
-          left: -${tableToolbarSize + 1}px;
-          z-index: ${rowControlsZIndex + 4};
-        }
-      ` : css`
-        .${ClassName.ROW_CONTROLS_WRAPPER} {
-          position: absolute;
-          /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
-          top: ${tableMarginTop - cornerControlHeight + 1}px;
-          left: -${tableToolbarSize}px;
-        }
-      `;
-};
 const tableWrapperStyles = () => {
   if (getBooleanFF('platform.editor.custom-table-width')) {
     return css`
@@ -463,7 +446,8 @@ export const tableStyles = props => {
     .less-padding {
       padding: 0 ${tablePadding}px;
 
-      .${ClassName.ROW_CONTROLS_WRAPPER} {
+      .${ClassName.DRAG_ROW_CONTROLS_WRAPPER},
+        .${ClassName.ROW_CONTROLS_WRAPPER} {
         padding: 0 ${tablePadding}px;
 
         // https://product-fabric.atlassian.net/browse/ED-16386
@@ -935,8 +919,24 @@ export const tableStyles = props => {
         }
       }
     }
-    ${tableRowControlStyles()}
-    .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
+
+    // override for DnD controls
+    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER} {
+      position: absolute;
+      margin-top: ${tableMarginTop}px;
+      left: -${tableToolbarSize + 1}px;
+      z-index: ${rowControlsZIndex + 4};
+    }
+
+    .${ClassName.ROW_CONTROLS_WRAPPER} {
+      position: absolute;
+      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+      top: ${tableMarginTop - cornerControlHeight + 1}px;
+      left: -${tableToolbarSize}px;
+    }
+
+    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW},
+      .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
       z-index: ${akEditorUnitZIndex};
     }
 

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

@@ -400,27 +400,24 @@ export const floatingColumnControls = props => {
   `;
 };
 export const rowControlsWrapperDotStyle = props => {
-  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
-    return css`
-      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-        display: none;
-      }
-    `;
-  } else {
-    return css`
-      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-        content: ' ';
-        background-color: ${tableBorderColor(props)};
-        position: absolute;
-        height: ${lineMarkerSize}px;
-        width: ${lineMarkerSize}px;
-        border-radius: 50%;
-        pointer-events: none;
-        top: -${tableToolbarSize + tableCellBorderWidth}px;
-        right: -1px;
-      }
-    `;
-  }
+  return css`
+    // override for DnD controls
+    div.${ClassName.WITH_CONTROLS}>.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}::after {
+      display: none;
+    }
+
+    div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
+      content: ' ';
+      background-color: ${tableBorderColor(props)};
+      position: absolute;
+      height: ${lineMarkerSize}px;
+      width: ${lineMarkerSize}px;
+      border-radius: 50%;
+      pointer-events: none;
+      top: -${tableToolbarSize + tableCellBorderWidth}px;
+      right: -1px;
+    }
+  `;
 };
 export const columnControlsDecoration = props => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {

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

@@ -8,7 +8,6 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
 const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
@@ -138,32 +137,28 @@ export const createColumnSelectedDecoration = tr => {
 };
 export const createColumnControlsDecoration = selection => {
   const cells = getCellsInRow(0)(selection) || [];
-  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
-    return [];
-  } else {
-    let index = 0;
-    return cells.map(cell => {
-      const colspan = cell.node.attrs.colspan || 1;
-      // It's important these values are scoped locally as the widget callback could be executed anytime in the future
-      // and we want to avoid value leak
-      const startIndex = index;
-      const endIndex = startIndex + colspan;
+  let index = 0;
+  return cells.map(cell => {
+    const colspan = cell.node.attrs.colspan || 1;
+    // It's important these values are scoped locally as the widget callback could be executed anytime in the future
+    // and we want to avoid value leak
+    const startIndex = index;
+    const endIndex = startIndex + colspan;
 
-      // The next cell start index will commence from the current cell end index.
-      index = endIndex;
-      return Decoration.widget(cell.pos + 1, () => {
-        const element = document.createElement('div');
-        element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
-        element.dataset.startIndex = `${startIndex}`;
-        element.dataset.endIndex = `${endIndex}`;
-        return element;
-      }, {
-        key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${endIndex}`,
-        // this decoration should be the first one, even before gap cursor.
-        side: -100
-      });
+    // The next cell start index will commence from the current cell end index.
+    index = endIndex;
+    return Decoration.widget(cell.pos + 1, () => {
+      const element = document.createElement('div');
+      element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
+      element.dataset.startIndex = `${startIndex}`;
+      element.dataset.endIndex = `${endIndex}`;
+      return element;
+    }, {
+      key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${endIndex}`,
+      // this decoration should be the first one, even before gap cursor.
+      side: -100
     });
-  }
+  });
 };
 export const updateDecorations = (node, decorationSet, decorations, key) => {
   const filteredDecorations = filterDecorationByKey(key, decorationSet);

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

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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; }
-// #region Imports
-
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -32,7 +30,8 @@ export var setTableRef = function setTableRef(ref) {
     var tablePos = ref && foundTable ? foundTable.pos : undefined;
     var tableWrapperTarget = closestElement(tableRef, ".".concat(ClassName.TABLE_NODE_WRAPPER)) || undefined;
     var layout = tableNode ? tableNode.attrs.layout : undefined;
-    var decorationSet = updatePluginStateDecorations(state, createColumnControlsDecoration(state.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
+    var _getPluginState = getPluginState(state),
+      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
     return {
       type: 'SET_TABLE_REF',
       data: {
@@ -44,7 +43,8 @@ export var setTableRef = function setTableRef(ref) {
         isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
         isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
         isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
-        decorationSet: decorationSet,
+        // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
+        decorationSet: !isDragAndDropEnabled ? updatePluginStateDecorations(state, createColumnControlsDecoration(state.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS) : undefined,
         resizeHandleRowIndex: undefined,
         resizeHandleColumnIndex: undefined
       }
@@ -381,9 +381,9 @@ export var hideInsertColumnOrRowButton = function hideInsertColumnOrRowButton()
 export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
-    var _getPluginState = getPluginState(state),
-      allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState.getIntl;
+    var _getPluginState2 = getPluginState(state),
+      allowColumnResizing = _getPluginState2.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState2.getIntl;
     if (!tableNode || !allowColumnResizing) {
       return false;
     }
@@ -406,12 +406,12 @@ export var addResizeHandleDecorations = function addResizeHandleDecorations(rowI
 export var updateResizeHandleDecorations = function updateResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
-    var _getPluginState2 = getPluginState(state),
-      resizeHandleRowIndex = _getPluginState2.resizeHandleRowIndex,
-      resizeHandleColumnIndex = _getPluginState2.resizeHandleColumnIndex,
-      resizeHandleIncludeTooltip = _getPluginState2.resizeHandleIncludeTooltip,
-      allowColumnResizing = _getPluginState2.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState2.getIntl;
+    var _getPluginState3 = getPluginState(state),
+      resizeHandleRowIndex = _getPluginState3.resizeHandleRowIndex,
+      resizeHandleColumnIndex = _getPluginState3.resizeHandleColumnIndex,
+      resizeHandleIncludeTooltip = _getPluginState3.resizeHandleIncludeTooltip,
+      allowColumnResizing = _getPluginState3.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState3.getIntl;
     if (!tableNode || !allowColumnResizing) {
       return false;
     }

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

@@ -524,9 +524,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
       var hasHeaderRow = containsHeaderRow(node);
-      var rowControls = /*#__PURE__*/React.createElement("div", {
-        className: ClassName.ROW_CONTROLS_WRAPPER
-      }, /*#__PURE__*/React.createElement(TableFloatingControls, {
+      var rowControls = /*#__PURE__*/React.createElement(TableFloatingControls, {
         editorView: view,
         tableRef: tableRef,
         tableNode: node,
@@ -546,7 +544,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         selection: view.state.selection,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader
-      }));
+      });
       var colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
         editorView: view,
         tableRef: tableRef,

package/dist/esm/plugins/table/pm-plugins/decorations/plugin.js

@@ -2,7 +2,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../table-width';
 import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils';
@@ -14,15 +13,21 @@ export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr
   var _tableWidthPluginKey$, _tableWidthPluginKey$2;
   var isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   var wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
+  var _ref = tablePluginKey.getState(newState) || {},
+    _ref$isDragAndDropEna = _ref.isDragAndDropEnabled,
+    isDragAndDropEnabled = _ref$isDragAndDropEna === void 0 ? false : _ref$isDragAndDropEna;
   var changedResizing = isResizing !== wasResizing;
 
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
-  if (isResizing || getBooleanFF('platform.editor.table.drag-and-drop')) {
+  if (isResizing) {
     return DecorationSet.empty;
   } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
     return buildColumnControlsDecorations({
       decorationSet: decorationSet,
-      tr: tr
+      tr: tr,
+      options: {
+        isDragAndDropEnabled: isDragAndDropEnabled
+      }
     });
   } else if (tr.selectionSet) {
     var isTransactionFromMouseClick = !tr.docChanged && tr.selectionSet && tr.getMeta('pointer');
@@ -43,6 +48,7 @@ export var createPlugin = function createPlugin() {
       },
       apply: function apply(tr, decorationSet, oldState, newState) {
         var pluginState = decorationSet;
+        // main table plugin --->
         var meta = tr.getMeta(tablePluginKey);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;

package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -26,8 +26,6 @@ var maybeUpdateColumnControlsDecoration = function maybeUpdateColumnControlsDeco
   var decorationSet = _ref3.decorationSet,
     tr = _ref3.tr;
   var table = findTable(tr.selection);
-
-  // avoid re-drawing state if dnd decorations don't need to be updated
   if (!table) {
     return decorationSet;
   }
@@ -55,7 +53,14 @@ export var maybeUpdateColumnControlsSelectedDecoration = function maybeUpdateCol
 };
 export var buildColumnControlsDecorations = function buildColumnControlsDecorations(_ref6) {
   var decorationSet = _ref6.decorationSet,
-    tr = _ref6.tr;
+    tr = _ref6.tr,
+    options = _ref6.options;
+  if (options.isDragAndDropEnabled) {
+    return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration])({
+      decorationSet: decorationSet,
+      tr: tr
+    });
+  }
   return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
     decorationSet: decorationSet,
     tr: tr

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

@@ -81,7 +81,8 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   CORNER_CONTROLS_INSERT_ROW_MARKER: "".concat(tablePrefixSelector, "-corner-controls__insert-row-marker"),
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: "".concat(tablePrefixSelector, "-corner-controls__insert-column-marker"),
   CONTROLS_CORNER_BUTTON: "".concat(tablePrefixSelector, "-corner-button"),
-  /** Controls with drag handle */
+  /** drag and drop controls */
+  DRAG_ROW_CONTROLS_WRAPPER: "".concat(tablePrefixSelector, "-drag-row-controls-wrapper"),
   DRAG_ROW_CONTROLS: "".concat(tablePrefixSelector, "-drag-row-controls"),
   DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: "".concat(tablePrefixSelector, "-drag-row-floating-insert-dot-wrapper"),
   DRAG_ROW_FLOATING_INSERT_DOT: "".concat(tablePrefixSelector, "-drag-row-floating-insert-dot"),

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

@@ -156,7 +156,10 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         return null;
       }
       var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
+      var wrapperClassName = isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
       return /*#__PURE__*/React.createElement("div", {
+        className: wrapperClassName
+      }, /*#__PURE__*/React.createElement("div", {
         onMouseDown: function onMouseDown(e) {
           return !isDragAndDropEnabled && e.preventDefault();
         }
@@ -208,7 +211,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         isResizing: isResizing,
         selectRow: this.selectRow,
         stickyTop: tableActive ? stickyTop : undefined
-      }))));
+      })))));
     }
   }]);
   return TableFloatingControls;