@atlaskit/editor-plugin-card 14.0.1 → 14.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-card
 
+## 14.0.2
+
+### Patch Changes
+
+- [`24dad72901730`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/24dad72901730) -
+  Editor-6083: Fix border no shown when resize embed inside synced block
+- Updated dependencies
+
 ## 14.0.1
 
 ### Patch Changes

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -15,8 +15,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -101,6 +103,19 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
         resizedPctWidth: resizedPctWidth
       });
     });
+    (0, _defineProperty2.default)(_this, "handleResizeStart", function () {
+      var _this$props3 = _this.props,
+        view = _this$props3.view,
+        getPos = _this$props3.getPos;
+      if (typeof getPos === 'function') {
+        var pos = getPos();
+        if (typeof pos === 'number') {
+          var tr = view.state.tr.setSelection(_state.NodeSelection.create(view.state.doc, pos));
+          tr.setMeta('scrollIntoView', false);
+          view.dispatch(tr);
+        }
+      }
+    });
     (0, _defineProperty2.default)(_this, "highlights", function (newWidth, snapPoints) {
       var snapWidth = (0, _ui.snapTo)(newWidth, snapPoints);
       var _this$props$view$stat = _this.props.view.state.schema.nodes,
@@ -117,10 +132,10 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
       if (snapWidth > _this.wideLayoutWidth) {
         return ['full-width'];
       }
-      var _this$props3 = _this.props,
-        layout = _this$props3.layout,
-        lineLength = _this$props3.lineLength,
-        gridSize = _this$props3.gridSize;
+      var _this$props4 = _this.props,
+        layout = _this$props4.layout,
+        lineLength = _this$props4.lineLength,
+        gridSize = _this$props4.gridSize;
       var columns = (0, _ui.calcColumnsFromPx)(snapWidth, lineLength, gridSize);
       var columnWidth = Math.round(columns);
       var highlight = [];
@@ -231,9 +246,9 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
     key: "calcSnapPoints",
     value: function calcSnapPoints() {
       var offsetLeft = this.state.offsetLeft;
-      var _this$props4 = this.props,
-        containerWidth = _this$props4.containerWidth,
-        lineLength = _this$props4.lineLength;
+      var _this$props5 = this.props,
+        containerWidth = _this$props5.containerWidth,
+        lineLength = _this$props5.lineLength;
       var snapTargets = [];
       for (var i = 0; i < this.gridWidth; i++) {
         snapTargets.push((0, _ui.calcPxFromColumns)(i, lineLength, this.gridWidth) - offsetLeft);
@@ -283,9 +298,9 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
      * and hence we use `style` prop.
      */
     function getHeightDefiningComponent() {
-      var _this$props5 = this.props,
-        height = _this$props5.height,
-        aspectRatio = _this$props5.aspectRatio;
+      var _this$props6 = this.props,
+        height = _this$props6.height,
+        aspectRatio = _this$props6.aspectRatio;
       var heightDefiningStyles;
       if (height) {
         heightDefiningStyles = {
@@ -329,13 +344,13 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props6 = this.props,
-        layout = _this$props6.layout,
-        pctWidth = _this$props6.pctWidth,
-        containerWidth = _this$props6.containerWidth,
-        fullWidthMode = _this$props6.fullWidthMode,
-        isResizeDisabled = _this$props6.isResizeDisabled,
-        children = _this$props6.children;
+      var _this$props7 = this.props,
+        layout = _this$props7.layout,
+        pctWidth = _this$props7.pctWidth,
+        containerWidth = _this$props7.containerWidth,
+        fullWidthMode = _this$props7.fullWidthMode,
+        isResizeDisabled = _this$props7.isResizeDisabled,
+        children = _this$props7.children;
       var resizerProps = {
         width: this.calcPxWidth(),
         innerPadding: _editorSharedStyles.akEditorMediaResizeHandlerPadding
@@ -390,6 +405,7 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
         scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
         highlights: this.highlights,
         nodeType: "embed",
+        onResizeStart: (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_9') ? this.handleResizeStart : undefined,
         handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -9,8 +9,10 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPadding, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { embedHeaderHeight } from '@atlaskit/smart-card';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -93,6 +95,20 @@ export default class ResizableEmbedCard extends React.Component {
         resizedPctWidth
       });
     });
+    _defineProperty(this, "handleResizeStart", () => {
+      const {
+        view,
+        getPos
+      } = this.props;
+      if (typeof getPos === 'function') {
+        const pos = getPos();
+        if (typeof pos === 'number') {
+          const tr = view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos));
+          tr.setMeta('scrollIntoView', false);
+          view.dispatch(tr);
+        }
+      }
+    });
     _defineProperty(this, "highlights", (newWidth, snapPoints) => {
       const snapWidth = snapTo(newWidth, snapPoints);
       const {
@@ -371,6 +387,7 @@ export default class ResizableEmbedCard extends React.Component {
       scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
       highlights: this.highlights,
       nodeType: "embed",
+      onResizeStart: editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_9') ? this.handleResizeStart : undefined,
       handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/esm/ui/ResizableEmbedCard.js

@@ -18,8 +18,10 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPadding, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { embedHeaderHeight } from '@atlaskit/smart-card';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -97,6 +99,19 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         resizedPctWidth: resizedPctWidth
       });
     });
+    _defineProperty(_this, "handleResizeStart", function () {
+      var _this$props3 = _this.props,
+        view = _this$props3.view,
+        getPos = _this$props3.getPos;
+      if (typeof getPos === 'function') {
+        var pos = getPos();
+        if (typeof pos === 'number') {
+          var tr = view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos));
+          tr.setMeta('scrollIntoView', false);
+          view.dispatch(tr);
+        }
+      }
+    });
     _defineProperty(_this, "highlights", function (newWidth, snapPoints) {
       var snapWidth = snapTo(newWidth, snapPoints);
       var _this$props$view$stat = _this.props.view.state.schema.nodes,
@@ -113,10 +128,10 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
       if (snapWidth > _this.wideLayoutWidth) {
         return ['full-width'];
       }
-      var _this$props3 = _this.props,
-        layout = _this$props3.layout,
-        lineLength = _this$props3.lineLength,
-        gridSize = _this$props3.gridSize;
+      var _this$props4 = _this.props,
+        layout = _this$props4.layout,
+        lineLength = _this$props4.lineLength,
+        gridSize = _this$props4.gridSize;
       var columns = calcColumnsFromPx(snapWidth, lineLength, gridSize);
       var columnWidth = Math.round(columns);
       var highlight = [];
@@ -227,9 +242,9 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
     key: "calcSnapPoints",
     value: function calcSnapPoints() {
       var offsetLeft = this.state.offsetLeft;
-      var _this$props4 = this.props,
-        containerWidth = _this$props4.containerWidth,
-        lineLength = _this$props4.lineLength;
+      var _this$props5 = this.props,
+        containerWidth = _this$props5.containerWidth,
+        lineLength = _this$props5.lineLength;
       var snapTargets = [];
       for (var i = 0; i < this.gridWidth; i++) {
         snapTargets.push(calcPxFromColumns(i, lineLength, this.gridWidth) - offsetLeft);
@@ -279,9 +294,9 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
      * and hence we use `style` prop.
      */
     function getHeightDefiningComponent() {
-      var _this$props5 = this.props,
-        height = _this$props5.height,
-        aspectRatio = _this$props5.aspectRatio;
+      var _this$props6 = this.props,
+        height = _this$props6.height,
+        aspectRatio = _this$props6.aspectRatio;
       var heightDefiningStyles;
       if (height) {
         heightDefiningStyles = {
@@ -325,13 +340,13 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props6 = this.props,
-        layout = _this$props6.layout,
-        pctWidth = _this$props6.pctWidth,
-        containerWidth = _this$props6.containerWidth,
-        fullWidthMode = _this$props6.fullWidthMode,
-        isResizeDisabled = _this$props6.isResizeDisabled,
-        children = _this$props6.children;
+      var _this$props7 = this.props,
+        layout = _this$props7.layout,
+        pctWidth = _this$props7.pctWidth,
+        containerWidth = _this$props7.containerWidth,
+        fullWidthMode = _this$props7.fullWidthMode,
+        isResizeDisabled = _this$props7.isResizeDisabled,
+        children = _this$props7.children;
       var resizerProps = {
         width: this.calcPxWidth(),
         innerPadding: akEditorMediaResizeHandlerPadding
@@ -386,6 +401,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
         highlights: this.highlights,
         nodeType: "embed",
+        onResizeStart: editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_9') ? this.handleResizeStart : undefined,
         handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading

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

@@ -47,6 +47,7 @@ export default class ResizableEmbedCard extends React.Component<Props, State> {
     calcSnapPoints(): number[];
     calcPxWidth: (useLayout?: RichMediaLayout) => number;
     get insideInlineLike(): boolean;
+    private handleResizeStart;
     highlights: (newWidth: number, snapPoints: number[]) => string[] | number[];
     /**
      * Previously height of the box was controlled with paddingTop/paddingBottom trick inside Wrapper.

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

@@ -47,6 +47,7 @@ export default class ResizableEmbedCard extends React.Component<Props, State> {
     calcSnapPoints(): number[];
     calcPxWidth: (useLayout?: RichMediaLayout) => number;
     get insideInlineLike(): boolean;
+    private handleResizeStart;
     highlights: (newWidth: number, snapPoints: number[]) => string[] | number[];
     /**
      * Previously height of the box was controlled with paddingTop/paddingBottom trick inside Wrapper.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "14.0.1",
+	"version": "14.0.2",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.18.0",
+		"@atlaskit/editor-common": "^112.19.0",
 		"@atlaskit/link-provider": "^4.3.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -122,6 +122,9 @@
 		"platform_editor_adf_with_localid": {
 			"type": "boolean"
 		},
+		"platform_synced_block_patch_9": {
+			"type": "boolean"
+		},
 		"jim-lower-ranking-in-jira-macro-search": {
 			"type": "boolean"
 		}