@atlaskit/editor-plugin-card 1.5.0 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-card
 
+## 1.6.1
+
+### Patch Changes
+
+- [#88724](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88724) [`df44cd13bfac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/df44cd13bfac) - Fix datasources breakout layout button to refresh node reference when making a layout change transaction
+
+## 1.6.0
+
+### Minor Changes
+
+- [#88000](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88000) [`61b44e565851`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/61b44e565851) - [ux] FF clean up platform.editor.show-embed-card-frame-renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/cjs/ui/DatasourceModal/index.js

@@ -210,6 +210,7 @@ var DatasourceModal = exports.DatasourceModal = function DatasourceModal(_ref) {
       "data-testid": "confluence-search-config-modal"
     }, /*#__PURE__*/_react.default.createElement(_linkDatasource.ConfluenceSearchConfigModal, {
       datasourceId: _datasourceId2,
+      viewMode: isRegularCardNode ? 'inline' : 'table',
       visibleColumnKeys: _visibleColumnKeys2,
       parameters: _parameters2,
       url: (_existingNode8 = existingNode) === null || _existingNode8 === void 0 ? void 0 : _existingNode8.attrs.url,

package/dist/cjs/ui/LayoutButton/index.js

@@ -89,12 +89,15 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     layout = _ref3$layout === void 0 ? (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || 'center' : _ref3$layout;
   var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.datasource);
   var onLayoutChange = function onLayoutChange(layout) {
+    var _getDatasource$node;
     if (pos === undefined) {
       return;
     }
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node === null || node === void 0 ? void 0 : node.attrs), {}, {
+    // If the button does not re-render due to no card state change, node reference will be stale
+    var datasourceNode = (_getDatasource$node = (0, _utils2.getDatasource)(editorView).node) !== null && _getDatasource$node !== void 0 ? _getDatasource$node : node;
+    var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, datasourceNode === null || datasourceNode === void 0 ? void 0 : datasourceNode.attrs), {}, {
       layout: layout
     }));
     tr.setMeta('scrollIntoView', false);

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -15,11 +15,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 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");
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -333,12 +331,9 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
         containerWidth = _this$props6.containerWidth,
         fullWidthMode = _this$props6.fullWidthMode,
         children = _this$props6.children;
-      var resizerProps = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.show-embed-card-frame-renderer') ? {
+      var resizerProps = {
         width: this.calcPxWidth(),
         innerPadding: _editorSharedStyles.akEditorMediaResizeHandlerPadding
-      } : {
-        width: this.calcPxWidth() - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide,
-        innerPadding: _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide
       };
       var enable = {};
       _ui.handleSides.forEach(function (side) {
@@ -366,7 +361,6 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
 
       /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
       return (0, _react2.jsx)("div", {
-        css: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.show-embed-card-frame-renderer') ? {} : _styles.embedSpacingStyles,
         "data-testid": "resizable-embed-card-spacing"
       }, (0, _react2.jsx)("div", {
         css: (0, _ui.wrapperStyle)({

package/dist/es2019/ui/DatasourceModal/index.js

@@ -170,6 +170,7 @@ export const DatasourceModal = ({
       "data-testid": "confluence-search-config-modal"
     }, /*#__PURE__*/React.createElement(ConfluenceSearchConfigModal, {
       datasourceId: datasourceId,
+      viewMode: isRegularCardNode ? 'inline' : 'table',
       visibleColumnKeys: visibleColumnKeys,
       parameters: parameters,
       url: (_existingNode8 = existingNode) === null || _existingNode8 === void 0 ? void 0 : _existingNode8.attrs.url,

package/dist/es2019/ui/LayoutButton/index.js

@@ -84,6 +84,7 @@ const LayoutButtonWrapper = ({
   } = cardState !== null && cardState !== void 0 ? cardState : {};
   const isDatasource = !!(node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.datasource);
   const onLayoutChange = layout => {
+    var _getDatasource$node;
     if (pos === undefined) {
       return;
     }
@@ -91,8 +92,10 @@ const LayoutButtonWrapper = ({
       state,
       dispatch
     } = editorView;
+    // If the button does not re-render due to no card state change, node reference will be stale
+    const datasourceNode = (_getDatasource$node = getDatasource(editorView).node) !== null && _getDatasource$node !== void 0 ? _getDatasource$node : node;
     const tr = state.tr.setNodeMarkup(pos, undefined, {
-      ...(node === null || node === void 0 ? void 0 : node.attrs),
+      ...(datasourceNode === null || datasourceNode === void 0 ? void 0 : datasourceNode.attrs),
       layout
     });
     tr.setMeta('scrollIntoView', false);

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -3,11 +3,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { embedSpacingStyles } from '@atlaskit/editor-common/styles';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPadding, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { embedHeaderHeight } from '@atlaskit/smart-card';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class ResizableEmbedCard extends React.Component {
@@ -307,12 +305,9 @@ export default class ResizableEmbedCard extends React.Component {
       fullWidthMode,
       children
     } = this.props;
-    const resizerProps = getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? {
+    const resizerProps = {
       width: this.calcPxWidth(),
       innerPadding: akEditorMediaResizeHandlerPadding
-    } : {
-      width: this.calcPxWidth() - akEditorMediaResizeHandlerPaddingWide,
-      innerPadding: akEditorMediaResizeHandlerPaddingWide
     };
     const enable = {};
     handleSides.forEach(side => {
@@ -340,7 +335,6 @@ export default class ResizableEmbedCard extends React.Component {
 
     /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
     return jsx("div", {
-      css: getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? {} : embedSpacingStyles,
       "data-testid": "resizable-embed-card-spacing"
     }, jsx("div", {
       css: wrapperStyle({

package/dist/esm/ui/DatasourceModal/index.js

@@ -200,6 +200,7 @@ export var DatasourceModal = function DatasourceModal(_ref) {
       "data-testid": "confluence-search-config-modal"
     }, /*#__PURE__*/React.createElement(ConfluenceSearchConfigModal, {
       datasourceId: _datasourceId2,
+      viewMode: isRegularCardNode ? 'inline' : 'table',
       visibleColumnKeys: _visibleColumnKeys2,
       parameters: _parameters2,
       url: (_existingNode8 = existingNode) === null || _existingNode8 === void 0 ? void 0 : _existingNode8.attrs.url,

package/dist/esm/ui/LayoutButton/index.js

@@ -83,12 +83,15 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     layout = _ref3$layout === void 0 ? (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || 'center' : _ref3$layout;
   var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.datasource);
   var onLayoutChange = function onLayoutChange(layout) {
+    var _getDatasource$node;
     if (pos === undefined) {
       return;
     }
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node === null || node === void 0 ? void 0 : node.attrs), {}, {
+    // If the button does not re-render due to no card state change, node reference will be stale
+    var datasourceNode = (_getDatasource$node = getDatasource(editorView).node) !== null && _getDatasource$node !== void 0 ? _getDatasource$node : node;
+    var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, datasourceNode === null || datasourceNode === void 0 ? void 0 : datasourceNode.attrs), {}, {
       layout: layout
     }));
     tr.setMeta('scrollIntoView', false);

package/dist/esm/ui/ResizableEmbedCard.js

@@ -13,11 +13,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { embedSpacingStyles } from '@atlaskit/editor-common/styles';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPadding, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { embedHeaderHeight } from '@atlaskit/smart-card';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
@@ -327,12 +325,9 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         containerWidth = _this$props6.containerWidth,
         fullWidthMode = _this$props6.fullWidthMode,
         children = _this$props6.children;
-      var resizerProps = getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? {
+      var resizerProps = {
         width: this.calcPxWidth(),
         innerPadding: akEditorMediaResizeHandlerPadding
-      } : {
-        width: this.calcPxWidth() - akEditorMediaResizeHandlerPaddingWide,
-        innerPadding: akEditorMediaResizeHandlerPaddingWide
       };
       var enable = {};
       handleSides.forEach(function (side) {
@@ -360,7 +355,6 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
 
       /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
       return jsx("div", {
-        css: getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? {} : embedSpacingStyles,
         "data-testid": "resizable-embed-card-spacing"
       }, jsx("div", {
         css: wrapperStyle({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "@atlaskit/adf-schema": "^35.8.0",
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/custom-steps": "^0.0.17",
-    "@atlaskit/editor-common": "^78.25.0",
+    "@atlaskit/editor-common": "^78.26.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -49,12 +49,12 @@
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/link-analytics": "^8.3.0",
     "@atlaskit/link-client-extension": "^1.8.0",
-    "@atlaskit/link-datasource": "^1.26.0",
+    "@atlaskit/link-datasource": "^1.27.0",
     "@atlaskit/linking-common": "^5.6.0",
     "@atlaskit/linking-types": "^8.8.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^5.5.0",
-    "@atlaskit/smart-card": "^26.52.0",
+    "@atlaskit/smart-card": "^26.54.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
@@ -107,9 +107,6 @@
     "platform.linking-platform.smart-card.inline-switcher": {
       "type": "boolean"
     },
-    "platform.editor.show-embed-card-frame-renderer": {
-      "type": "boolean"
-    },
     "platform.linking-platform.datasource-word_wrap": {
       "type": "boolean"
     },