@atlaskit/editor-plugin-table 7.6.11 → 7.6.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.6.11",
+  "version": "7.6.13",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,11 +30,12 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.8.0",
     "@atlaskit/custom-steps": "^0.0.17",
-    "@atlaskit/editor-common": "^78.23.0",
+    "@atlaskit/editor-common": "^78.24.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.0.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
+    "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
     "@atlaskit/editor-plugin-guideline": "^1.0.0",
     "@atlaskit/editor-plugin-selection": "^1.1.0",
     "@atlaskit/editor-plugin-width": "^1.0.0",

package/src/nodeviews/TableContainer.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
@@ -180,6 +181,9 @@ export const ResizableTableContainer = React.memo(
     );
 
     const tableWidth = getTableContainerWidth(node);
+    const { editorViewModeState } = useSharedPluginState(pluginInjectionApi, [
+      'editorViewMode',
+    ]);
 
     // 76 is currently an accepted padding value considering the spacing for resizer handle
     const responsiveContainerWidth = isTableScalingEnabled
@@ -239,11 +243,17 @@ export const ResizableTableContainer = React.memo(
           className={ClassName.TABLE_RESIZER_CONTAINER}
           ref={containerRef}
         >
-          <TableResizer {...tableResizerProps}>
+          {editorViewModeState?.mode === 'view' ? (
             <InnerContainer className={className} node={node}>
               {children}
             </InnerContainer>
-          </TableResizer>
+          ) : (
+            <TableResizer {...tableResizerProps}>
+              <InnerContainer className={className} node={node}>
+                {children}
+              </InnerContainer>
+            </TableResizer>
+          )}
         </div>
       </div>
     );

package/src/plugin.tsx

@@ -35,6 +35,7 @@ import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import type { AccessibilityUtilsPlugin } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
@@ -141,6 +142,7 @@ export type TablePlugin = NextEditorPlugin<
       GuidelinePlugin,
       SelectionPlugin,
       OptionalPlugin<MediaPlugin>,
+      OptionalPlugin<EditorViewModePlugin>,
     ];
   }
 >;

package/src/pm-plugins/main.ts

@@ -352,7 +352,10 @@ export const createPlugin = (
 
           if (
             targetClassList.contains(ClassName.CONTROLS_BUTTON) ||
-            targetClassList.contains(ClassName.CONTEXTUAL_MENU_BUTTON)
+            targetClassList.contains(ClassName.CONTEXTUAL_MENU_BUTTON) ||
+            targetClassList.contains(
+              ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
+            )
           ) {
             return true;
           }

package/src/ui/DragHandle/index.tsx

@@ -227,6 +227,15 @@ const DragHandleComponent = ({
           alignSelf: isColumn ? 'none' : 'center',
           zIndex: isColumn ? '-1' : 'auto',
         }}
+        onMouseUp={(e) => {
+          // should toggle menu if current drag menu open.
+          // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
+          // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
+          editorView.focus();
+          if (isDragMenuOpen) {
+            toggleDragMenu && toggleDragMenu('mouse', e);
+          }
+        }}
         onClick={onClick}
       />
       <button

package/src/ui/FloatingInsertButton/InsertButton.tsx

@@ -58,6 +58,19 @@ const getToolbarSize = (tableRef: HTMLElement): number => {
   return tableToolbarSize;
 };
 
+const getNumberColumnWidth = (
+  tableRef: HTMLElement,
+  isDragAndDropEnabled?: boolean,
+): number => {
+  const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
+  if (parent && isDragAndDropEnabled) {
+    return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`)
+      ? akEditorTableNumberColumnWidth - 1
+      : 0;
+  }
+  return 0;
+};
+
 const getInsertLineWidth = (
   tableRef: HTMLElement,
   isDragAndDropEnabled?: boolean,
@@ -78,7 +91,9 @@ const getInsertLineWidth = (
     Math.min(
       offsetWidth + toolbarSize,
       parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0),
-    ) + lineOffset
+    ) +
+    lineOffset +
+    getNumberColumnWidth(tableRef, isDragAndDropEnabled)
   );
 };
 

package/tsconfig.app.json

@@ -51,6 +51,9 @@
     {
       "path": "../editor-plugin-content-insertion/tsconfig.app.json"
     },
+    {
+      "path": "../editor-plugin-editor-viewmode/tsconfig.app.json"
+    },
     {
       "path": "../editor-plugin-guideline/tsconfig.app.json"
     },