@atlaskit/editor-plugin-table 2.9.0 → 2.10.0

package/src/__tests__/unit/utils/dom.ts

@@ -5,7 +5,6 @@ import {
 
 describe('table plugin: utils/dom.js', () => {
   let element: HTMLElement;
-  let mouseMoveOptimization = false;
   let elementContentRects: any;
   const elementRect: DOMRect = {
     width: 100,
@@ -30,7 +29,6 @@ describe('table plugin: utils/dom.js', () => {
 
   beforeEach(() => {
     element = document.createElement('div');
-    mouseMoveOptimization = false;
     element.getBoundingClientRect = () => elementRect;
   });
 
@@ -40,37 +38,18 @@ describe('table plugin: utils/dom.js', () => {
 
       describe('and when the mouse is outside of the gap', () => {
         describe('for 1px on the left', () => {
-          it('should return null when mouseMoveOptimization is disabled', () => {
-            const event = {
-              target: element,
-              clientX: GAP + elementRect.left + 1,
-            };
-
-            expect(
-              getMousePositionHorizontalRelativeByElement(
-                // @ts-ignore
-                event,
-                mouseMoveOptimization,
-                elementContentRects,
-                GAP,
-              ),
-            ).toBeNull();
-          });
-
-          it('should return null when mouseMoveOptimization is enabled', () => {
+          it('should return null', () => {
             const event = {
               target: element,
               offsetX: GAP + 1,
             };
 
-            mouseMoveOptimization = true;
             elementContentRects = { 'table-cell-id': { width: 100 } };
 
             expect(
               getMousePositionHorizontalRelativeByElement(
                 // @ts-ignore
                 event,
-                mouseMoveOptimization,
                 elementContentRects,
                 GAP,
               ),
@@ -79,37 +58,18 @@ describe('table plugin: utils/dom.js', () => {
         });
 
         describe('for 1px on the right', () => {
-          it('should return null when mouseMoveOptimization is disabled', () => {
-            const event = {
-              target: element,
-              clientX: elementRect.width + elementRect.left - GAP - 1,
-            };
-
-            expect(
-              getMousePositionHorizontalRelativeByElement(
-                // @ts-ignore
-                event,
-                mouseMoveOptimization,
-                elementContentRects,
-                GAP,
-              ),
-            ).toBeNull();
-          });
-
-          it('should return null when mouseMoveOptimization is enabled', () => {
+          it('should return null', () => {
             const event = {
               target: element,
               offsetX: elementRect.width - GAP - 1,
             };
 
-            mouseMoveOptimization = true;
             elementContentRects = { 'table-cell-id': { width: 100 } };
 
             expect(
               getMousePositionHorizontalRelativeByElement(
                 // @ts-ignore
                 event,
-                mouseMoveOptimization,
                 elementContentRects,
                 GAP,
               ),
@@ -119,74 +79,36 @@ describe('table plugin: utils/dom.js', () => {
       });
 
       describe('and when the mouse is inside of the gap', () => {
-        it('should return left when mouseMoveOptimization is disabled', () => {
-          const event = {
-            target: element,
-            clientX: GAP + elementRect.left,
-          };
-
-          expect(
-            getMousePositionHorizontalRelativeByElement(
-              // @ts-ignore
-              event,
-              mouseMoveOptimization,
-              elementContentRects,
-              GAP,
-            ),
-          ).toBe('left');
-        });
-
-        it('should return left when mouseMoveOptimization is enabled', () => {
+        it('should return left', () => {
           const event = {
             target: element,
             offsetX: GAP,
           };
 
-          mouseMoveOptimization = true;
           elementContentRects = { 'table-cell-id': { width: 100 } };
 
           expect(
             getMousePositionHorizontalRelativeByElement(
               // @ts-ignore
               event,
-              mouseMoveOptimization,
               elementContentRects,
               GAP,
             ),
           ).toBe('left');
         });
 
-        it('should return right when mouseMoveOptimization is disabled', () => {
-          const event = {
-            target: element,
-            clientX: elementRect.width + elementRect.left - GAP,
-          };
-
-          expect(
-            getMousePositionHorizontalRelativeByElement(
-              // @ts-ignore
-              event,
-              mouseMoveOptimization,
-              elementContentRects,
-              GAP,
-            ),
-          ).toBe('right');
-        });
-
-        it('should return right when mouseMoveOptimization is enabled', () => {
+        it('should return right', () => {
           const event = {
             target: element,
             offsetX: elementRect.width - GAP,
           };
 
-          mouseMoveOptimization = true;
           elementContentRects = { 'table-cell-id': { width: 100 } };
 
           expect(
             getMousePositionHorizontalRelativeByElement(
               // @ts-ignore
               event,
-              mouseMoveOptimization,
               elementContentRects,
               GAP,
             ),
@@ -195,63 +117,35 @@ describe('table plugin: utils/dom.js', () => {
       });
     });
 
-    it('should return left when the mouse is positioned before half of the element and mouseMoveOptimization is disabled', () => {
-      const event = {
-        target: element,
-        clientX: 50,
-      };
-
-      expect(
-        // @ts-ignore
-        getMousePositionHorizontalRelativeByElement(event),
-      ).toBe('left');
-    });
-
-    it('should return left when the mouse is positioned before half of the element and mouseMoveOptimization is enabled', () => {
+    it('should return left when the mouse is positioned before half of the element', () => {
       const event = {
         target: element,
         offsetX: 50,
       };
 
-      mouseMoveOptimization = true;
       elementContentRects = { 'table-cell-id': { width: 100 } };
 
       expect(
         getMousePositionHorizontalRelativeByElement(
           // @ts-ignore
           event,
-          mouseMoveOptimization,
           elementContentRects,
         ),
       ).toBe('left');
     });
 
-    it('should return right when the mouse is positioned after half of the element and mouseMoveOptimization is disabled', () => {
-      const event = {
-        target: element,
-        clientX: 101,
-      };
-
-      expect(
-        // @ts-ignore
-        getMousePositionHorizontalRelativeByElement(event),
-      ).toBe('right');
-    });
-
-    it('should return right when the mouse is positioned after half of the element and mouseMoveOptimization is enabled', () => {
+    it('should return right when the mouse is positioned after half of the element', () => {
       const event = {
         target: element,
         offsetX: 101,
       };
 
-      mouseMoveOptimization = true;
       elementContentRects = { 'table-cell-id': { width: 100 } };
 
       expect(
         getMousePositionHorizontalRelativeByElement(
           // @ts-ignore
           event,
-          mouseMoveOptimization,
           elementContentRects,
         ),
       ).toBe('right');

package/src/plugins/table/event-handlers.ts

@@ -4,7 +4,6 @@ import {
   EVENT_TYPE,
   TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import {
   browser,
   closestElement,
@@ -298,98 +297,92 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   return false;
 };
 
-export const handleMouseMove =
-  (getEditorFeatureFlags: GetEditorFeatureFlags) =>
-  (
-    view: EditorView,
-    event: Event,
-    elementContentRects?: ElementContentRects,
-  ) => {
-    if (!(event.target instanceof HTMLElement)) {
-      return false;
-    }
-    const element = event.target;
+export const handleMouseMove = (
+  view: EditorView,
+  event: Event,
+  elementContentRects?: ElementContentRects,
+) => {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+  const element = event.target;
 
-    if (isColumnControlsDecorations(element)) {
-      const { state, dispatch } = view;
-      const { insertColumnButtonIndex } = getPluginState(state);
-      const [startIndex, endIndex] = getColumnOrRowIndex(element);
-
-      const positionColumn =
-        getMousePositionHorizontalRelativeByElement(
-          event as MouseEvent,
-          false,
-          elementContentRects,
-        ) === 'right'
-          ? endIndex
-          : startIndex;
-
-      if (positionColumn !== insertColumnButtonIndex) {
-        return showInsertColumnButton(positionColumn)(state, dispatch);
-      }
+  if (isColumnControlsDecorations(element)) {
+    const { state, dispatch } = view;
+    const { insertColumnButtonIndex } = getPluginState(state);
+    const [startIndex, endIndex] = getColumnOrRowIndex(element);
+
+    const positionColumn =
+      getMousePositionHorizontalRelativeByElement(
+        event as MouseEvent,
+        elementContentRects,
+      ) === 'right'
+        ? endIndex
+        : startIndex;
+
+    if (positionColumn !== insertColumnButtonIndex) {
+      return showInsertColumnButton(positionColumn)(state, dispatch);
     }
+  }
 
-    if (isRowControlsButton(element)) {
-      const { state, dispatch } = view;
-      const { insertRowButtonIndex } = getPluginState(state);
-      const [startIndex, endIndex] = getColumnOrRowIndex(element);
+  if (isRowControlsButton(element)) {
+    const { state, dispatch } = view;
+    const { insertRowButtonIndex } = getPluginState(state);
+    const [startIndex, endIndex] = getColumnOrRowIndex(element);
 
-      const positionRow =
-        getMousePositionVerticalRelativeByElement(event as MouseEvent) ===
-        'bottom'
-          ? endIndex
-          : startIndex;
+    const positionRow =
+      getMousePositionVerticalRelativeByElement(event as MouseEvent) ===
+      'bottom'
+        ? endIndex
+        : startIndex;
 
-      if (positionRow !== insertRowButtonIndex) {
-        return showInsertRowButton(positionRow)(state, dispatch);
-      }
+    if (positionRow !== insertRowButtonIndex) {
+      return showInsertRowButton(positionRow)(state, dispatch);
     }
+  }
 
-    const { mouseMoveOptimization } = getEditorFeatureFlags();
+  if (!isResizeHandleDecoration(element) && isCell(element)) {
+    const positionColumn = getMousePositionHorizontalRelativeByElement(
+      event as MouseEvent,
+      elementContentRects,
+      RESIZE_HANDLE_AREA_DECORATION_GAP,
+    );
 
-    if (!isResizeHandleDecoration(element) && isCell(element)) {
-      const positionColumn = getMousePositionHorizontalRelativeByElement(
-        event as MouseEvent,
-        mouseMoveOptimization,
-        elementContentRects,
-        RESIZE_HANDLE_AREA_DECORATION_GAP,
+    if (positionColumn !== null) {
+      const { state, dispatch } = view;
+      const { resizeHandleColumnIndex, resizeHandleRowIndex } =
+        getPluginState(state);
+      const tableCell = closestElement(
+        element,
+        'td, th',
+      ) as HTMLTableCellElement;
+      const cellStartPosition = view.posAtDOM(tableCell, 0);
+      const rect = findCellRectClosestToPos(
+        state.doc.resolve(cellStartPosition),
       );
 
-      if (positionColumn !== null) {
-        const { state, dispatch } = view;
-        const { resizeHandleColumnIndex, resizeHandleRowIndex } =
-          getPluginState(state);
-        const tableCell = closestElement(
-          element,
-          'td, th',
-        ) as HTMLTableCellElement;
-        const cellStartPosition = view.posAtDOM(tableCell, 0);
-        const rect = findCellRectClosestToPos(
-          state.doc.resolve(cellStartPosition),
-        );
-
-        if (rect) {
-          const columnEndIndexTarget =
-            positionColumn === 'left' ? rect.left : rect.right;
-
-          const rowIndexTarget = rect.top;
-
-          if (
-            columnEndIndexTarget !== resizeHandleColumnIndex ||
-            rowIndexTarget !== resizeHandleRowIndex ||
-            !hasResizeHandler({ target: element, columnEndIndexTarget })
-          ) {
-            return addResizeHandleDecorations(
-              rowIndexTarget,
-              columnEndIndexTarget,
-            )(state, dispatch);
-          }
+      if (rect) {
+        const columnEndIndexTarget =
+          positionColumn === 'left' ? rect.left : rect.right;
+
+        const rowIndexTarget = rect.top;
+
+        if (
+          columnEndIndexTarget !== resizeHandleColumnIndex ||
+          rowIndexTarget !== resizeHandleRowIndex ||
+          !hasResizeHandler({ target: element, columnEndIndexTarget })
+        ) {
+          return addResizeHandleDecorations(
+            rowIndexTarget,
+            columnEndIndexTarget,
+          )(state, dispatch);
         }
       }
     }
+  }
 
-    return false;
-  };
+  return false;
+};
 
 export function handleTripleClick(view: EditorView, pos: number) {
   const { state, dispatch } = view;