@atlaskit/editor-plugin-table 5.4.6 → 5.4.8

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

@@ -158,75 +158,81 @@ export default class TableFloatingControls extends Component<Props, State> {
         ? stickyHeader.top
         : undefined;
 
+    const wrapperClassName = isDragAndDropEnabled
+      ? ClassName.DRAG_ROW_CONTROLS_WRAPPER
+      : ClassName.ROW_CONTROLS_WRAPPER;
+
     return (
-      <div onMouseDown={(e) => !isDragAndDropEnabled && e.preventDefault()}>
-        {isNumberColumnEnabled ? (
-          <NumberColumn
-            editorView={editorView}
-            hoverRows={this.hoverRows}
-            tableRef={tableRef}
-            tableActive={tableActive}
-            hoveredRows={hoveredRows}
-            hasHeaderRow={hasHeaderRow}
-            isInDanger={isInDanger}
-            isResizing={isResizing}
-            selectRow={this.selectRow}
-            updateCellHoverLocation={this.updateCellHoverLocation}
-            stickyTop={stickyTop}
-            isDragAndDropEnabled={isDragAndDropEnabled}
-          />
-        ) : null}
+      <div className={wrapperClassName}>
+        <div onMouseDown={(e) => !isDragAndDropEnabled && e.preventDefault()}>
+          {isNumberColumnEnabled ? (
+            <NumberColumn
+              editorView={editorView}
+              hoverRows={this.hoverRows}
+              tableRef={tableRef}
+              tableActive={tableActive}
+              hoveredRows={hoveredRows}
+              hasHeaderRow={hasHeaderRow}
+              isInDanger={isInDanger}
+              isResizing={isResizing}
+              selectRow={this.selectRow}
+              updateCellHoverLocation={this.updateCellHoverLocation}
+              stickyTop={stickyTop}
+              isDragAndDropEnabled={isDragAndDropEnabled}
+            />
+          ) : null}
 
-        {tableActive && (
-          <>
-            {isDragAndDropEnabled ? (
-              <>
-                <DragCornerControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                />
-                <DragControls
-                  tableRef={tableRef}
-                  tableNode={tableNode}
-                  hoveredCell={hoveredCell}
-                  editorView={editorView}
-                  tableActive={tableActive}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  tableWidth={this.state.tableWrapperWidth}
-                  hoverRows={this.hoverRows}
-                  selectRow={this.selectRow}
-                  updateCellHoverLocation={this.updateCellHoverLocation}
-                />
-              </>
-            ) : (
-              <>
-                <CornerControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  isHeaderRowEnabled={isHeaderRowEnabled}
-                  isHeaderColumnEnabled={isHeaderColumnEnabled}
-                  hoveredRows={hoveredRows}
-                  stickyTop={tableActive ? stickyTop : undefined}
-                />
-                <RowControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  hoverRows={this.hoverRows}
-                  hoveredRows={hoveredRows}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  selectRow={this.selectRow}
-                  stickyTop={tableActive ? stickyTop : undefined}
-                />
-              </>
-            )}
-          </>
-        )}
+          {tableActive && (
+            <>
+              {isDragAndDropEnabled ? (
+                <>
+                  <DragCornerControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                  />
+                  <DragControls
+                    tableRef={tableRef}
+                    tableNode={tableNode}
+                    hoveredCell={hoveredCell}
+                    editorView={editorView}
+                    tableActive={tableActive}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    tableWidth={this.state.tableWrapperWidth}
+                    hoverRows={this.hoverRows}
+                    selectRow={this.selectRow}
+                    updateCellHoverLocation={this.updateCellHoverLocation}
+                  />
+                </>
+              ) : (
+                <>
+                  <CornerControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    isHeaderRowEnabled={isHeaderRowEnabled}
+                    isHeaderColumnEnabled={isHeaderColumnEnabled}
+                    hoveredRows={hoveredRows}
+                    stickyTop={tableActive ? stickyTop : undefined}
+                  />
+                  <RowControls
+                    editorView={editorView}
+                    tableRef={tableRef}
+                    hoverRows={this.hoverRows}
+                    hoveredRows={hoveredRows}
+                    isInDanger={isInDanger}
+                    isResizing={isResizing}
+                    selectRow={this.selectRow}
+                    stickyTop={tableActive ? stickyTop : undefined}
+                  />
+                </>
+              )}
+            </>
+          )}
+        </div>
       </div>
     );
   }

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

@@ -265,26 +265,6 @@ const tableStickyHeaderFirefoxFixStyle = (
   }
 };
 
-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`
@@ -558,7 +538,8 @@ export const tableStyles = (
     .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
@@ -1056,8 +1037,24 @@ export const tableStyles = (
         }
       }
     }
-    ${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/src/plugins/table/ui/ui-styles.ts

@@ -500,27 +500,24 @@ export const floatingColumnControls = (props: ThemeProps) => {
 };
 
 export const rowControlsWrapperDotStyle = (props: ThemeProps) => {
-  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: ThemeProps) => {

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

@@ -22,7 +22,6 @@ import {
   getCellsInRow,
   getSelectionRect,
 } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
@@ -219,37 +218,33 @@ export const createColumnControlsDecoration = (
 ): Decoration[] => {
   const cells: ContentNodeWithPos[] = 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 as CellAttributes).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,
-        },
-      );
-    });
-  }
+  let index = 0;
+  return cells.map((cell) => {
+    const colspan = (cell.node.attrs as CellAttributes).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,
+      },
+    );
+  });
 };
 
 export const updateDecorations = (

package/tsconfig.dev.json

@@ -96,6 +96,9 @@
     {
       "path": "../../media/media-integration-test-helpers/tsconfig.app.json"
     },
+    {
+      "path": "../../platform/feature-flags/tsconfig.app.json"
+    },
     {
       "path": "../synchrony-test-helpers/tsconfig.app.json"
     },