@atlaskit/editor-plugin-table 5.3.1 → 5.3.3

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

@@ -14,7 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _types = require("../types");
 var _consts = require("./consts");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
 var InsertLine = function InsertLine(props, cssString) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, (0, _consts.tableBorderSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, cssString);
 };
@@ -74,27 +74,36 @@ var floatingColumnControls = exports.floatingColumnControls = function floatingC
   return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      box-sizing: border-box;\n      position: absolute;\n\n      .", " {\n        display: flex;\n        flex-direction: row;\n      }\n    }\n  "])), _types.TableCssClassName.COLUMN_DROP_TARGET_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_INNER);
 };
 var columnControlsDecoration = exports.columnControlsDecoration = function columnControlsDecoration(props) {
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
+    return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n      .", " {\n        position: absolute;\n        // kinda a hacky way to center an element with absolute positioning inside a relative element\n        top: 25%;\n        left: 50%;\n        transform: translate(-50%, -100%);\n      }\n    "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG);
+  }
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.column-controls-styles-updated')) {
-    return (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n      .", " {\n        display: none;\n        cursor: pointer;\n        position: absolute;\n        width: 100%;\n        left: 0;\n        top: -", "px;\n        height: ", "px;\n        // floating dot for adding column button\n        &::before {\n          content: ' ';\n          background-color: ", ";\n          position: absolute;\n          height: ", "px;\n          width: ", "px;\n          border-radius: 50%;\n          pointer-events: none;\n          top: 2px;\n          right: -1px;\n        }\n\n        &::after {\n          content: ' ';\n\n          ", "\n        }\n      }\n\n      // floating dot for adding column button - overriding style on last column to avoid scroll\n      ", "\n\n      div.", ">.", "::after {\n        content: ' ';\n        background-color: ", ";\n        position: absolute;\n        height: ", "px;\n        width: ", "px;\n        border-radius: 50%;\n        pointer-events: none;\n        top: -", "px;\n        right: -1px;\n      }\n\n      .", " .", " {\n        display: block;\n      }\n\n      table tr:first-of-type th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border-color: ", ";\n            z-index: ", ";\n          }\n        }\n      }\n\n      table tr:first-of-type th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            ", ";\n            border-left: ", "px solid\n              ", ";\n            left: -", "px;\n          }\n        }\n      }\n\n      table tr:first-of-type th.", " {\n        &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border-color: ", ";\n            border-left: ", "px solid\n              ", ";\n            left: -", "px;\n            z-index: ", ";\n          }\n        }\n      }\n\n      .", "\n        table\n        tr:first-of-type\n        td.", ",\n        .", "\n        table\n        tr:first-of-type\n        th.", " {\n        .", "::after {\n          ", ";\n        }\n      }\n    "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-top: ").concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: ").concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        box-sizing: content-box;\n        height: ").concat(_consts.tableToolbarSize - 1, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _styles.tableCellBorderWidth, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _styles.tableCellBorderWidth, (0, _consts.tableBorderDeleteColor)(props), _styles.tableCellBorderWidth, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
+    return (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n      .", " {\n        display: none;\n        cursor: pointer;\n        position: absolute;\n        width: 100%;\n        left: 0;\n        top: -", "px;\n        height: ", "px;\n        // floating dot for adding column button\n        &::before {\n          content: ' ';\n          background-color: ", ";\n          position: absolute;\n          height: ", "px;\n          width: ", "px;\n          border-radius: 50%;\n          pointer-events: none;\n          top: 2px;\n          right: -1px;\n        }\n\n        &::after {\n          content: ' ';\n\n          ", "\n        }\n      }\n\n      // floating dot for adding column button - overriding style on last column to avoid scroll\n      ", "\n\n      div.", ">.", "::after {\n        content: ' ';\n        background-color: ", ";\n        position: absolute;\n        height: ", "px;\n        width: ", "px;\n        border-radius: 50%;\n        pointer-events: none;\n        top: -", "px;\n        right: -1px;\n      }\n\n      .", " .", " {\n        display: block;\n      }\n\n      table tr:first-of-type th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border-color: ", ";\n            z-index: ", ";\n          }\n        }\n      }\n\n      table tr:first-of-type th.", " {\n        &.", ", &.", " {\n          .", "::after {\n            ", ";\n            border-left: ", "px solid\n              ", ";\n            left: -", "px;\n          }\n        }\n      }\n\n      table tr:first-of-type th.", " {\n        &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border-color: ", ";\n            border-left: ", "px solid\n              ", ";\n            left: -", "px;\n            z-index: ", ";\n          }\n        }\n      }\n\n      .", "\n        table\n        tr:first-of-type\n        td.", ",\n        .", "\n        table\n        tr:first-of-type\n        th.", " {\n        .", "::after {\n          ", ";\n        }\n      }\n    "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-top: ").concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: ").concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        box-sizing: content-box;\n        height: ").concat(_consts.tableToolbarSize - 1, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _styles.tableCellBorderWidth, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _styles.tableCellBorderWidth, (0, _consts.tableBorderDeleteColor)(props), _styles.tableCellBorderWidth, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
   } else {
-    return (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n      .", " {\n        display: none;\n        cursor: pointer;\n        position: absolute;\n        width: calc(100% + ", "px);\n        left: -1px;\n        top: -", "px;\n        height: ", "px;\n        // floating dot for adding column button\n        &::before {\n          content: ' ';\n          background-color: ", ";\n          position: absolute;\n          height: ", "px;\n          width: ", "px;\n          border-radius: 50%;\n          pointer-events: none;\n          top: 2px;\n          right: -1px;\n        }\n\n        &::after {\n          content: ' ';\n\n          ", "\n        }\n      }\n\n      // floating dot for adding column button - overriding style on last column to avoid scroll\n      ", "\n\n      div.", ">.", "::after {\n        content: ' ';\n        background-color: ", ";\n        position: absolute;\n        height: ", "px;\n        width: ", "px;\n        border-radius: 50%;\n        pointer-events: none;\n        top: -", "px;\n        right: -1px;\n      }\n\n      .", " .", " {\n        display: block;\n      }\n\n      table\n        tr:first-of-type\n        td.", ",\n        table\n        tr:first-of-type\n        th.", " {\n        &.", ",\n          &.", ",\n          &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border: 1px solid ", ";\n            border-bottom: none;\n            z-index: ", ";\n          }\n        }\n      }\n\n      .", "\n        table\n        tr:first-of-type\n        td.", ",\n        .", "\n        table\n        tr:first-of-type\n        th.", " {\n        .", "::after {\n          ", ";\n        }\n      }\n    "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
+    return (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n      .", " {\n        display: none;\n        cursor: pointer;\n        position: absolute;\n        width: calc(100% + ", "px);\n        left: -1px;\n        top: -", "px;\n        height: ", "px;\n        // floating dot for adding column button\n        &::before {\n          content: ' ';\n          background-color: ", ";\n          position: absolute;\n          height: ", "px;\n          width: ", "px;\n          border-radius: 50%;\n          pointer-events: none;\n          top: 2px;\n          right: -1px;\n        }\n\n        &::after {\n          content: ' ';\n\n          ", "\n        }\n      }\n\n      // floating dot for adding column button - overriding style on last column to avoid scroll\n      ", "\n\n      div.", ">.", "::after {\n        content: ' ';\n        background-color: ", ";\n        position: absolute;\n        height: ", "px;\n        width: ", "px;\n        border-radius: 50%;\n        pointer-events: none;\n        top: -", "px;\n        right: -1px;\n      }\n\n      .", " .", " {\n        display: block;\n      }\n\n      table\n        tr:first-of-type\n        td.", ",\n        table\n        tr:first-of-type\n        th.", " {\n        &.", ",\n          &.", ",\n          &.", " {\n          .", "::after {\n            ", ";\n          }\n\n          &.", "\n            .", "::after {\n            background-color: ", ";\n            border: 1px solid ", ";\n            border-bottom: none;\n            z-index: ", ";\n          }\n        }\n      }\n\n      .", "\n        table\n        tr:first-of-type\n        td.", ",\n        .", "\n        table\n        tr:first-of-type\n        th.", " {\n        .", "::after {\n          ", ";\n        }\n      }\n    "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n        border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n        border-bottom: none;\n        height: ").concat(_consts.tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(_consts.columnControlsZIndex, ";\n      ")), getFloatingDotOverrides(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
   }
 };
 var hoveredDeleteButton = exports.hoveredDeleteButton = function hoveredDeleteButton(props) {
-  return (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderDeleteColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellDeleteColor)(props));
+  return (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderDeleteColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellDeleteColor)(props));
 };
 var hoveredCell = exports.hoveredCell = function hoveredCell(props) {
-  return (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props));
+  return (0, _react.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props));
 };
-var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
+var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
 
 // move the resize handle zone completely inside the table cell to avoid overflow
 var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex) : '';
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex) : '';
+};
+var resizeHandleOverrides = function resizeHandleOverrides(props) {
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
+    return (0, _react.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        left: ", ";\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        right: -1px;\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n    "])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
+  }
+  return (0, _react.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n  "])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 };
 var resizeHandle = exports.resizeHandle = function resizeHandle(props) {
-  return (0, _react.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
+  return (0, _react.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    ", "\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(props), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 };
 var insertLine = exports.insertLine = function insertLine(props) {
-  return (0, _react.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
+  return (0, _react.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -1px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      bottom: 0;\n      height: ", "px;\n      width: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      bottom: 0;\n      position: absolute;\n      height: ", "px;\n      width: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, "var(--ds-space-negative-025, -2px)", _consts.insertLineWidth, _styles.tableCellBorderWidth * 2, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2);
 };

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

@@ -13,8 +13,10 @@ 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");
+var _DragHandle = require("../ui/DragHandle");
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
@@ -153,30 +155,54 @@ var createColumnSelectedDecoration = exports.createColumnSelectedDecoration = fu
     });
   });
 };
-var createColumnControlsDecoration = exports.createColumnControlsDecoration = function createColumnControlsDecoration(selection) {
+var createColumnControlsDecoration = exports.createColumnControlsDecoration = function createColumnControlsDecoration(selection, hoverLocation) {
+  // todo: issue here where table may not be selected yet
   var cells = (0, _utils2.getCellsInRow)(0)(selection) || [];
-  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 table = (0, _utils2.findTable)(selection);
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop') && hoverLocation && !Number.isNaN(hoverLocation === null || hoverLocation === void 0 ? void 0 : hoverLocation.colIndex) && table) {
+    var colIndex = hoverLocation.colIndex;
+    var cell = cells[colIndex];
+    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);
+      element.classList.add(_types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG);
+      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_DragHandle.DragHandle, {
+        tableLocalId: table.node.attrs.localId,
+        direction: 'column',
+        indexes: [colIndex]
+      }), element);
       return element;
     }, {
-      key: "".concat(_types.TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(endIndex),
+      key: "".concat(_types.TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(colIndex),
       // this decoration should be the first one, even before gap cursor.
-      side: -100
+      side: -100,
+      destroy: function destroy(node) {
+        _reactDom.default.unmountComponentAtNode(node);
+      }
+    })];
+  } 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;
+
+      // 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/cjs/plugins/table/utils/dom.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
+exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowDragControlsButton = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isCornerButton = exports.isColumnDragControlsDecorations = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("../types");
 var _consts = require("../ui/consts");
@@ -23,9 +23,15 @@ var getColumnOrRowIndex = exports.getColumnOrRowIndex = function getColumnOrRowI
 var isColumnControlsDecorations = exports.isColumnControlsDecorations = function isColumnControlsDecorations(node) {
   return (0, _utils.containsClassName)(node, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
 };
+var isColumnDragControlsDecorations = exports.isColumnDragControlsDecorations = function isColumnDragControlsDecorations(node) {
+  return (0, _utils.containsClassName)(node, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG) || (0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS_WITH_DRAG));
+};
 var isRowControlsButton = exports.isRowControlsButton = function isRowControlsButton(node) {
   return (0, _utils.containsClassName)(node, _types.TableCssClassName.ROW_CONTROLS_BUTTON) || (0, _utils.containsClassName)(node, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON);
 };
+var isRowDragControlsButton = exports.isRowDragControlsButton = function isRowDragControlsButton(node) {
+  return (0, _utils.containsClassName)(node, _types.TableCssClassName.ROW_CONTROLS_WITH_DRAG) || (0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.ROW_CONTROLS_WITH_DRAG));
+};
 var isResizeHandleDecoration = exports.isResizeHandleDecoration = function isResizeHandleDecoration(node) {
   return (0, _utils.containsClassName)(node, _types.TableCssClassName.RESIZE_HANDLE_DECORATION);
 };

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

@@ -231,6 +231,12 @@ Object.defineProperty(exports, "isColumnDeleteButtonVisible", {
     return _columnControls.isColumnDeleteButtonVisible;
   }
 });
+Object.defineProperty(exports, "isColumnDragControlsDecorations", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isColumnDragControlsDecorations;
+  }
+});
 Object.defineProperty(exports, "isCornerButton", {
   enumerable: true,
   get: function get() {
@@ -273,6 +279,12 @@ Object.defineProperty(exports, "isRowDeleteButtonVisible", {
     return _rowControls.isRowDeleteButtonVisible;
   }
 });
+Object.defineProperty(exports, "isRowDragControlsButton", {
+  enumerable: true,
+  get: function get() {
+    return _dom.isRowDragControlsButton;
+  }
+});
 Object.defineProperty(exports, "isSelectionUpdated", {
   enumerable: true,
   get: function get() {

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

@@ -4,13 +4,7 @@ import { findTable, getCellsInColumn, getCellsInRow } from '@atlaskit/editor-tab
 import { createCommand } from '../pm-plugins/plugin-factory';
 import { TableDecorations } from '../types';
 import { createCellHoverDecoration, createColumnLineResize, createControlsHoverDecoration, getMergedCellsPositions, updatePluginStateDecorations } from '../utils';
-// #endregion
-
-// #region Utils
 const makeArray = n => Array.from(Array(n).keys());
-// #endregion
-
-// #region Commands
 export const hoverMergedCells = () => createCommand(state => {
   const mergedCellsPositions = getMergedCellsPositions(state.tr);
   if (!mergedCellsPositions.length) {
@@ -27,7 +21,7 @@ export const hoverMergedCells = () => createCommand(state => {
   }));
   const decorations = createCellHoverDecoration(mergedCells);
   return {
-    type: 'HOVER_CELLS',
+    type: 'HOVER_MERGED_CELLS',
     data: {
       decorationSet: updatePluginStateDecorations(state, decorations, TableDecorations.CELL_CONTROLS_HOVER)
     }
@@ -105,4 +99,14 @@ export const hideResizeHandleLine = () => createCommand(state => ({
     decorationSet: updatePluginStateDecorations(state, [], TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
   }
 }));
-// #endregion
+export const hoverCell = (rowIndex, colIndex) => createCommand(() => {
+  return {
+    type: 'HOVER_CELL',
+    data: {
+      hoveredCell: {
+        rowIndex,
+        colIndex
+      }
+    }
+  };
+}, tr => tr.setMeta('addToHistory', false));

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

@@ -1,4 +1,4 @@
-export { hoverColumns, hoverRows, hoverTable, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine } from './hover';
+export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine } from './hover';
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';
 export { clearMultipleCells } from './clear';

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

@@ -13,11 +13,6 @@ import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { createColumnControlsDecoration, createColumnSelectedDecoration } from '../utils/decoration';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isIsolating } from '../utils/nodes';
 import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations';
-// #endregion
-
-// #endregion
-
-// #region Commands
 export const setEditorFocus = editorHasFocus => createCommand({
   type: 'SET_EDITOR_FOCUS',
   data: {
@@ -419,5 +414,4 @@ export const addBoldInEmptyHeaderCells = tableCellHeader => (state, dispatch) =>
     return true;
   }
   return false;
-};
-// #endregion
+};

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

@@ -4,7 +4,7 @@ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
-import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
+import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
@@ -171,12 +171,16 @@ export const handleMouseLeave = (view, event) => {
   } = view;
   const {
     insertColumnButtonIndex,
-    insertRowButtonIndex
+    insertRowButtonIndex,
+    isDragAndDropEnabled
   } = getPluginState(state);
   const target = event.target;
   if (isTableControlsButton(target)) {
     return true;
   }
+  if (isDragAndDropEnabled) {
+    hoverCell(undefined, undefined)(state, dispatch);
+  }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;
   }
@@ -326,4 +330,26 @@ export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mo
     return false;
   }
   return eventHandler(view, mouseEvent, elementContentRects);
+};
+const trackCellLocation = (view, mouseEvent) => {
+  const target = mouseEvent.target;
+  const maybeTableCell = isElementInTableCell(target);
+  if (!maybeTableCell) {
+    return;
+  }
+  const colIndex = maybeTableCell.cellIndex;
+  const rowElement = closestElement(target, 'tr');
+  const rowIndex = rowElement && rowElement.rowIndex;
+  const {
+    hoveredCell
+  } = getPluginState(view.state);
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex) {
+    hoverCell(rowIndex, colIndex)(view.state, view.dispatch);
+  }
+};
+export const withCellTracking = (eventHandler, elementContentRects) => (view, mouseEvent) => {
+  if (getPluginState(view.state).isDragAndDropEnabled) {
+    trackCellLocation(view, mouseEvent);
+  }
+  return eventHandler(view, mouseEvent, elementContentRects);
 };

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

@@ -106,7 +106,7 @@ const tablesPlugin = ({
             getEditorFeatureFlags,
             dragAndDropEnabled
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api);
         }
       }, {
         name: 'tablePMColResizing',

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

@@ -466,7 +466,8 @@ class TableComponent extends React.Component {
     // doesn't work well with WithPluginState
     const {
       isInDanger,
-      hoveredRows
+      hoveredRows,
+      hoveredCell
     } = getPluginState(view.state);
     const tableRef = this.table || undefined;
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
@@ -478,10 +479,12 @@ class TableComponent extends React.Component {
       tableRef: tableRef,
       tableActive: tableActive,
       hoveredRows: hoveredRows,
+      hoveredCell: hoveredCell,
       isInDanger: isInDanger,
       isResizing: isResizing,
       isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
       isHeaderRowEnabled: isHeaderRowEnabled,
+      isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
       ordering: ordering,
       isHeaderColumnEnabled: isHeaderColumnEnabled,
       hasHeaderRow: hasHeaderRow
@@ -489,8 +492,7 @@ class TableComponent extends React.Component {
       ,
       selection: view.state.selection,
       headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-      stickyHeader: this.state.stickyHeader,
-      getEditorFeatureFlags: this.props.getEditorFeatureFlags
+      stickyHeader: this.state.stickyHeader
     }));
     const colControls = /*#__PURE__*/React.createElement("div", {
       className: ClassName.COLUMN_CONTROLS_WRAPPER

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

@@ -223,7 +223,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     isBreakoutEnabled,
     isFullWidthModeEnabled,
     wasFullWidthModeEnabled,
-    isTableResizingEnabled
+    isTableResizingEnabled,
+    isDragAndDropEnabled
   } = getPluginState(view.state);
   const {
     allowColumnResizing
@@ -240,7 +241,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
       isBreakoutEnabled,
       isFullWidthModeEnabled,
       wasFullWidthModeEnabled,
-      isTableResizingEnabled
+      isTableResizingEnabled,
+      isDragAndDropEnabled
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

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

@@ -1,7 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey
-// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-} from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { pluginKey as tablePluginKey } from '../plugin-key';
@@ -10,7 +8,7 @@ import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecora
 export const pluginKey = new PluginKey('tableDecorationsPlugin');
 export const getDecorations = state => pluginKey.getState(state);
 export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newState) => {
-  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2, _tr$getMeta;
   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 changedResizing = isResizing !== wasResizing;
@@ -18,7 +16,7 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
   // Remove column controls when resizing
   if (isResizing) {
     return DecorationSet.empty;
-  } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
+  } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing || ((_tr$getMeta = tr.getMeta(tablePluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type) === 'HOVER_CELL') {
     return buildColumnControlsDecorations({
       decorationSet,
       tr
@@ -39,12 +37,16 @@ export const createPlugin = () => {
     state: {
       init: () => DecorationSet.empty,
       apply: (tr, decorationSet, oldState, newState) => {
+        var _tablePluginKey$getSt, _tablePluginKey$getSt2;
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
+        const previousHover = (_tablePluginKey$getSt = tablePluginKey.getState(oldState)) === null || _tablePluginKey$getSt === void 0 ? void 0 : _tablePluginKey$getSt.hoveredCell;
+        const newHover = (_tablePluginKey$getSt2 = tablePluginKey.getState(newState)) === null || _tablePluginKey$getSt2 === void 0 ? void 0 : _tablePluginKey$getSt2.hoveredCell;
+        const changedCellHover = (previousHover === null || previousHover === void 0 ? void 0 : previousHover.colIndex) !== (newHover === null || newHover === void 0 ? void 0 : newHover.colIndex) || (previousHover === null || previousHover === void 0 ? void 0 : previousHover.rowIndex) !== (newHover === null || newHover === void 0 ? void 0 : newHover.rowIndex);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
         }
-        if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey)) {
+        if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey) || changedCellHover) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
         }

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

@@ -4,6 +4,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../../types';
 import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../../utils/decoration';
+import { pluginKey as tablePluginKey } from '../../plugin-key';
 import { composeDecorations } from './compose-decorations';
 const isColumnSelected = tr => tr.selection instanceof CellSelection && tr.selection.isColSelection();
 
@@ -24,11 +25,15 @@ const maybeUpdateColumnControlsDecoration = ({
   decorationSet,
   tr
 }) => {
+  var _meta$data;
   const table = findTable(tr.selection);
-  if (!table) {
+  const meta = tr.getMeta(tablePluginKey);
+
+  // avoid re-drawing state if dnd decorations don't need to be updated
+  if (!table && (meta === null || meta === void 0 ? void 0 : meta.type) !== 'HOVER_CELL') {
     return decorationSet;
   }
-  return updateDecorations(tr.doc, decorationSet, createColumnControlsDecoration(tr.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
+  return updateDecorations(tr.doc, decorationSet, createColumnControlsDecoration(tr.selection, meta === null || meta === void 0 ? void 0 : (_meta$data = meta.data) === null || _meta$data === void 0 ? void 0 : _meta$data.hoveredCell), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
 };
 
 // @see: https://product-fabric.atlassian.net/browse/ED-7304

package/dist/es2019/plugins/table/pm-plugins/default-table-selection.js

@@ -1,4 +1,17 @@
 export const defaultTableSelection = {
   hoveredColumns: [],
   hoveredRows: []
+};
+
+/**
+ * Creating a separate object for hoveredCell so it doesn't get defaulted when `handleDocOrSelectionChanged` runs.
+ *
+ * It is safe to persist this value as it gets removed when the mouse cursor leaves the table, so no need to remove it
+ * when doc changes.
+ */
+export const defaultHoveredCell = {
+  hoveredCell: {
+    rowIndex: undefined,
+    colIndex: undefined
+  }
 };

package/dist/es2019/plugins/table/pm-plugins/main.js

@@ -8,7 +8,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
-import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus } from '../event-handlers';
+import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
 import TableCell from '../nodeviews/TableCell';
 import TableRow from '../nodeviews/TableRow';
@@ -17,10 +17,10 @@ import { fixTables, replaceSelectedTable } from '../transforms';
 import { TableCssClassName as ClassName } from '../types';
 import { findControlsHoverDecoration, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, updateResizeHandles } from '../utils';
 import { isHeaderRowRequired } from '../utils/paste';
-import { defaultTableSelection } from './default-table-selection';
+import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi) => {
   var _window;
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -33,6 +33,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
     isDragAndDropEnabled: dragAndDropEnabled,
+    ...defaultHoveredCell,
     ...defaultTableSelection,
     getIntl
   });
@@ -234,8 +235,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       handleDOMEvents: {
         focus: handleFocus,
         blur: handleBlur,
-        mousedown: handleMouseDown,
-        mouseover: whenTableInFocus(handleMouseOver),
+        mousedown: withCellTracking(handleMouseDown),
+        mouseover: whenTableInFocus(withCellTracking(handleMouseOver)),
         mouseleave: whenTableInFocus(handleMouseLeave),
         mouseout: whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove, elementContentRects),

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

@@ -114,7 +114,8 @@ export default ((pluginState, action) => {
     case 'HOVER_ROWS':
     case 'HOVER_COLUMNS':
     case 'HOVER_TABLE':
-    case 'HOVER_CELLS':
+    case 'HOVER_MERGED_CELLS':
+    case 'HOVER_CELL':
     case 'SHOW_RESIZE_HANDLE_LINE':
     case 'SET_EDITOR_FOCUS':
       return {