@atlaskit/editor-plugin-card 0.5.3 → 0.5.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-card
 
+## 0.5.4
+
+### Patch Changes
+
+- [`dfb663969a0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dfb663969a0) - ED-19820: Fix for table scroll when insert media node when extended-resize-experience is off
+
 ## 0.5.3
 
 ### Patch Changes

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -216,6 +216,17 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         return _editorSharedStyles.akEditorWideLayoutWidth;
       }
     }
+
+    // check if is inside of a table
+  }, {
+    key: "isNestedInTable",
+    value: function isNestedInTable() {
+      var table = this.props.view.state.schema.nodes.table;
+      if (!this.$pos) {
+        return false;
+      }
+      return !!(0, _utils.findParentNodeOfTypeClosestToPos)(this.$pos, table);
+    }
   }, {
     key: "calcSnapPoints",
     value: function calcSnapPoints() {
@@ -330,6 +341,21 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
           enable[side] = false;
         }
       });
+      var nestedInTableHandleStyles = function nestedInTableHandleStyles(isNestedInTable) {
+        if (!isNestedInTable) {
+          return;
+        }
+        return {
+          left: {
+            left: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            paddingLeft: '0px'
+          },
+          right: {
+            right: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            paddingRight: '0px'
+          }
+        };
+      };
 
       /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
       return (0, _react2.jsx)("div", {
@@ -351,7 +377,8 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
         highlights: this.highlights,
         innerPadding: _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide,
-        nodeType: "embed"
+        nodeType: "embed",
+        handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
       }), children, this.getHeightDefiningComponent())));
       /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */
     }

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -194,6 +194,17 @@ export default class ResizableEmbedCard extends React.Component {
       return akEditorWideLayoutWidth;
     }
   }
+
+  // check if is inside of a table
+  isNestedInTable() {
+    const {
+      table
+    } = this.props.view.state.schema.nodes;
+    if (!this.$pos) {
+      return false;
+    }
+    return !!findParentNodeOfTypeClosestToPos(this.$pos, table);
+  }
   calcSnapPoints() {
     const {
       offsetLeft
@@ -304,6 +315,21 @@ export default class ResizableEmbedCard extends React.Component {
         enable[side] = false;
       }
     });
+    const nestedInTableHandleStyles = isNestedInTable => {
+      if (!isNestedInTable) {
+        return;
+      }
+      return {
+        left: {
+          left: `calc(${"var(--ds-space-025, 0.125em)"} * -0.5)`,
+          paddingLeft: '0px'
+        },
+        right: {
+          right: `calc(${"var(--ds-space-025, 0.125em)"} * -0.5)`,
+          paddingRight: '0px'
+        }
+      };
+    };
 
     /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
     return jsx("div", {
@@ -325,7 +351,8 @@ export default class ResizableEmbedCard extends React.Component {
       scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
       highlights: this.highlights,
       innerPadding: akEditorMediaResizeHandlerPaddingWide,
-      nodeType: "embed"
+      nodeType: "embed",
+      handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
     }), children, this.getHeightDefiningComponent())));
     /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */
   }

package/dist/esm/ui/ResizableEmbedCard.js

@@ -210,6 +210,17 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         return akEditorWideLayoutWidth;
       }
     }
+
+    // check if is inside of a table
+  }, {
+    key: "isNestedInTable",
+    value: function isNestedInTable() {
+      var table = this.props.view.state.schema.nodes.table;
+      if (!this.$pos) {
+        return false;
+      }
+      return !!findParentNodeOfTypeClosestToPos(this.$pos, table);
+    }
   }, {
     key: "calcSnapPoints",
     value: function calcSnapPoints() {
@@ -324,6 +335,21 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
           enable[side] = false;
         }
       });
+      var nestedInTableHandleStyles = function nestedInTableHandleStyles(isNestedInTable) {
+        if (!isNestedInTable) {
+          return;
+        }
+        return {
+          left: {
+            left: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            paddingLeft: '0px'
+          },
+          right: {
+            right: "calc(".concat("var(--ds-space-025, 0.125em)", " * -0.5)"),
+            paddingRight: '0px'
+          }
+        };
+      };
 
       /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
       return jsx("div", {
@@ -345,7 +371,8 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
         highlights: this.highlights,
         innerPadding: akEditorMediaResizeHandlerPaddingWide,
-        nodeType: "embed"
+        nodeType: "embed",
+        handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
       }), children, this.getHeightDefiningComponent())));
       /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */
     }

package/dist/types/ui/ResizableEmbedCard.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { RichMediaLayout } from '@atlaskit/adf-schema';
-import { ResizerProps } from '@atlaskit/editor-common/ui';
+import type { RichMediaLayout } from '@atlaskit/adf-schema';
+import type { ResizerProps } from '@atlaskit/editor-common/ui';
 type State = {
     offsetLeft: number;
     resizedPctWidth?: number;
@@ -39,6 +39,7 @@ export default class ResizableEmbedCard extends React.Component<Props, State> {
     calcColumnLeftOffset: () => number;
     wrapper?: HTMLElement;
     get wideLayoutWidth(): number;
+    isNestedInTable(): boolean;
     calcSnapPoints(): number[];
     calcPxWidth: (useLayout?: RichMediaLayout) => number;
     get insideInlineLike(): boolean;

package/dist/types-ts4.5/ui/ResizableEmbedCard.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { RichMediaLayout } from '@atlaskit/adf-schema';
-import { ResizerProps } from '@atlaskit/editor-common/ui';
+import type { RichMediaLayout } from '@atlaskit/adf-schema';
+import type { ResizerProps } from '@atlaskit/editor-common/ui';
 type State = {
     offsetLeft: number;
     resizedPctWidth?: number;
@@ -39,6 +39,7 @@ export default class ResizableEmbedCard extends React.Component<Props, State> {
     calcColumnLeftOffset: () => number;
     wrapper?: HTMLElement;
     get wideLayoutWidth(): number;
+    isNestedInTable(): boolean;
     calcSnapPoints(): number[];
     calcPxWidth: (useLayout?: RichMediaLayout) => number;
     get insideInlineLike(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -47,7 +47,7 @@
     "@atlaskit/link-analytics": "^8.2.0",
     "@atlaskit/link-datasource": "^1.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/smart-card": "^26.20.0",
+    "@atlaskit/smart-card": "^26.21.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.20.0",
     "@babel/runtime": "^7.0.0",