@atlaskit/editor-plugin-card 12.0.0 → 12.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-card
 
+## 12.0.2
+
+### Patch Changes
+
+- [`b429c01ce6af9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b429c01ce6af9) -
+  icon migration entry point update
+- Updated dependencies
+
+## 12.0.1
+
+### Patch Changes
+
+- [`e56d251bf0184`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e56d251bf0184) -
+  [EDITOR-3966] Fix embed sizing issue in sync block
+- Updated dependencies
+
 ## 12.0.0
 
 ### Patch Changes

package/dist/cjs/pm-plugins/doc.js

@@ -402,7 +402,7 @@ var setSelectedCardAppearance = exports.setSelectedCardAppearance = function set
     if ((0, _utils2.appearanceForNodeType)(selectedNode.type) === appearance && !selectedNode.attrs.datasource) {
       return false;
     }
-    var attrs = getAttrsForAppearance(appearance, selectedNode);
+    var attrs = (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? getAttrsForAppearance(appearance, selectedNode, state.selection.$from.parent.type.name === 'bodiedSyncBlock') : getAttrsForAppearance(appearance, selectedNode);
     var _state$selection = state.selection,
       from = _state$selection.from,
       to = _state$selection.to;
@@ -546,10 +546,18 @@ var insertDatasource = exports.insertDatasource = function insertDatasource(stat
  * Get attributes for new Card Appearance
  */
 var getAttrsForAppearance = exports.getAttrsForAppearance = function getAttrsForAppearance(appearance, selectedNode) {
+  var isInsideBodiedSyncBlock = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   if (appearance === 'embed') {
+    var _selectedNode$attrs$w;
     return _objectSpread(_objectSpread({}, selectedNode.attrs), {}, {
       layout: 'center'
-    });
+    }, isInsideBodiedSyncBlock
+    // When converting to embed, width attribute is set to null and when the document is published, the width attribute is set to 100 as per schema default
+    // For editor, width is not required to render the embed card, but it's required in renderer
+    // Because sync block has nested renderer in editor, we need width to be defined even in editor so embed in reference sync block can be rendered properly
+    ? {
+      width: (_selectedNode$attrs$w = selectedNode.attrs.width) !== null && _selectedNode$attrs$w !== void 0 ? _selectedNode$attrs$w : 100
+    } : {});
   }
   if ((0, _utils2.isDatasourceNode)(selectedNode)) {
     return {

package/dist/cjs/ui/EditToolbarButton/EditToolbarButtonPresentation.js

@@ -12,8 +12,8 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _menu = require("@atlaskit/menu");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _utils = require("../../pm-plugins/utils");

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

@@ -13,7 +13,7 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _linkProvider = require("@atlaskit/link-provider");
 var _menu = require("@atlaskit/menu");
 var _compiled = require("@atlaskit/primitives/compiled");

package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -14,7 +14,7 @@ var _card = require("@atlaskit/editor-common/card");
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -17,7 +17,9 @@ var _react2 = require("@emotion/react");
 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");
+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; }
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -106,8 +108,11 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
         layoutColumn = _this$props$view$stat.layoutColumn,
         table = _this$props$view$stat.table,
         expand = _this$props$view$stat.expand,
-        nestedExpand = _this$props$view$stat.nestedExpand;
-      if (_this.$pos && !!(0, _utils.findParentNodeOfTypeClosestToPos)(_this.$pos, [layoutColumn, table, expand, nestedExpand].filter(Boolean))) {
+        nestedExpand = _this$props$view$stat.nestedExpand,
+        bodiedSyncBlock = _this$props$view$stat.bodiedSyncBlock;
+
+      // Hide resizing guideline when embed is nested
+      if (_this.$pos && !!(0, _utils.findParentNodeOfTypeClosestToPos)(_this.$pos, (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? [layoutColumn, table, expand, nestedExpand, bodiedSyncBlock] : [layoutColumn, table, expand, nestedExpand])) {
         return [];
       }
       if (snapWidth > _this.wideLayoutWidth) {

package/dist/es2019/pm-plugins/doc.js

@@ -372,7 +372,7 @@ export const setSelectedCardAppearance = (appearance, editorAnalyticsApi) => (st
   if (appearanceForNodeType(selectedNode.type) === appearance && !selectedNode.attrs.datasource) {
     return false;
   }
-  const attrs = getAttrsForAppearance(appearance, selectedNode);
+  const attrs = editorExperiment('platform_synced_block', true) && fg('platform_synced_block_dogfooding') ? getAttrsForAppearance(appearance, selectedNode, state.selection.$from.parent.type.name === 'bodiedSyncBlock') : getAttrsForAppearance(appearance, selectedNode);
   const {
     from,
     to
@@ -527,11 +527,19 @@ export const insertDatasource = (state, adf, view, sourceEvent) => {
 /**
  * Get attributes for new Card Appearance
  */
-export const getAttrsForAppearance = (appearance, selectedNode) => {
+export const getAttrsForAppearance = (appearance, selectedNode, isInsideBodiedSyncBlock = false) => {
   if (appearance === 'embed') {
+    var _selectedNode$attrs$w;
     return {
       ...selectedNode.attrs,
-      layout: 'center'
+      layout: 'center',
+      ...(isInsideBodiedSyncBlock
+      // When converting to embed, width attribute is set to null and when the document is published, the width attribute is set to 100 as per schema default
+      // For editor, width is not required to render the embed card, but it's required in renderer
+      // Because sync block has nested renderer in editor, we need width to be defined even in editor so embed in reference sync block can be rendered properly
+      ? {
+        width: (_selectedNode$attrs$w = selectedNode.attrs.width) !== null && _selectedNode$attrs$w !== void 0 ? _selectedNode$attrs$w : 100
+      } : {})
     };
   }
   if (isDatasourceNode(selectedNode)) {

package/dist/es2019/ui/EditToolbarButton/EditToolbarButtonPresentation.js

@@ -10,8 +10,8 @@ import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import EditIcon from '@atlaskit/icon/core/edit';
-import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { focusEditorView } from '../../pm-plugins/utils';

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

@@ -10,7 +10,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
-import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ButtonItem } from '@atlaskit/menu';
 import { Flex } from '@atlaskit/primitives/compiled';

package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -3,7 +3,7 @@ import { appearancePropsMap } from '@atlaskit/editor-common/card';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
-import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
 const CustomHyperlinkDropdown = props => {

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -11,7 +11,9 @@ import { jsx } from '@emotion/react';
 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, 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
 export default class ResizableEmbedCard extends React.Component {
   constructor(...args) {
@@ -98,9 +100,12 @@ export default class ResizableEmbedCard extends React.Component {
         layoutColumn,
         table,
         expand,
-        nestedExpand
+        nestedExpand,
+        bodiedSyncBlock
       } = this.props.view.state.schema.nodes;
-      if (this.$pos && !!findParentNodeOfTypeClosestToPos(this.$pos, [layoutColumn, table, expand, nestedExpand].filter(Boolean))) {
+
+      // Hide resizing guideline when embed is nested
+      if (this.$pos && !!findParentNodeOfTypeClosestToPos(this.$pos, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_dogfooding') ? [layoutColumn, table, expand, nestedExpand, bodiedSyncBlock] : [layoutColumn, table, expand, nestedExpand])) {
         return [];
       }
       if (snapWidth > this.wideLayoutWidth) {

package/dist/esm/pm-plugins/doc.js

@@ -396,7 +396,7 @@ export var setSelectedCardAppearance = function setSelectedCardAppearance(appear
     if (appearanceForNodeType(selectedNode.type) === appearance && !selectedNode.attrs.datasource) {
       return false;
     }
-    var attrs = getAttrsForAppearance(appearance, selectedNode);
+    var attrs = editorExperiment('platform_synced_block', true) && fg('platform_synced_block_dogfooding') ? getAttrsForAppearance(appearance, selectedNode, state.selection.$from.parent.type.name === 'bodiedSyncBlock') : getAttrsForAppearance(appearance, selectedNode);
     var _state$selection = state.selection,
       from = _state$selection.from,
       to = _state$selection.to;
@@ -540,10 +540,18 @@ export var insertDatasource = function insertDatasource(state, adf, view, source
  * Get attributes for new Card Appearance
  */
 export var getAttrsForAppearance = function getAttrsForAppearance(appearance, selectedNode) {
+  var isInsideBodiedSyncBlock = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   if (appearance === 'embed') {
+    var _selectedNode$attrs$w;
     return _objectSpread(_objectSpread({}, selectedNode.attrs), {}, {
       layout: 'center'
-    });
+    }, isInsideBodiedSyncBlock
+    // When converting to embed, width attribute is set to null and when the document is published, the width attribute is set to 100 as per schema default
+    // For editor, width is not required to render the embed card, but it's required in renderer
+    // Because sync block has nested renderer in editor, we need width to be defined even in editor so embed in reference sync block can be rendered properly
+    ? {
+      width: (_selectedNode$attrs$w = selectedNode.attrs.width) !== null && _selectedNode$attrs$w !== void 0 ? _selectedNode$attrs$w : 100
+    } : {});
   }
   if (isDatasourceNode(selectedNode)) {
     return {

package/dist/esm/ui/EditToolbarButton/EditToolbarButtonPresentation.js

@@ -11,8 +11,8 @@ import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import EditIcon from '@atlaskit/icon/core/edit';
-import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { focusEditorView } from '../../pm-plugins/utils';

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

@@ -13,7 +13,7 @@ import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
-import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ButtonItem } from '@atlaskit/menu';
 import { Flex } from '@atlaskit/primitives/compiled';

package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -6,7 +6,7 @@ import { appearancePropsMap } from '@atlaskit/editor-common/card';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
-import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
 var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {

package/dist/esm/ui/ResizableEmbedCard.js

@@ -20,7 +20,9 @@ import { jsx } from '@emotion/react';
 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, 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
 var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
   function ResizableEmbedCard() {
@@ -102,8 +104,11 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         layoutColumn = _this$props$view$stat.layoutColumn,
         table = _this$props$view$stat.table,
         expand = _this$props$view$stat.expand,
-        nestedExpand = _this$props$view$stat.nestedExpand;
-      if (_this.$pos && !!findParentNodeOfTypeClosestToPos(_this.$pos, [layoutColumn, table, expand, nestedExpand].filter(Boolean))) {
+        nestedExpand = _this$props$view$stat.nestedExpand,
+        bodiedSyncBlock = _this$props$view$stat.bodiedSyncBlock;
+
+      // Hide resizing guideline when embed is nested
+      if (_this.$pos && !!findParentNodeOfTypeClosestToPos(_this.$pos, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_dogfooding') ? [layoutColumn, table, expand, nestedExpand, bodiedSyncBlock] : [layoutColumn, table, expand, nestedExpand])) {
         return [];
       }
       if (snapWidth > _this.wideLayoutWidth) {

package/dist/types/pm-plugins/doc.d.ts

@@ -37,5 +37,5 @@ export declare const insertDatasource: (state: EditorState, adf: DatasourceAdf |
 /**
  * Get attributes for new Card Appearance
  */
-export declare const getAttrsForAppearance: (appearance: CardAppearance, selectedNode: Node) => import("prosemirror-model").Attrs;
+export declare const getAttrsForAppearance: (appearance: CardAppearance, selectedNode: Node, isInsideBodiedSyncBlock?: boolean) => import("prosemirror-model").Attrs;
 export {};

package/dist/types-ts4.5/pm-plugins/doc.d.ts

@@ -37,5 +37,5 @@ export declare const insertDatasource: (state: EditorState, adf: DatasourceAdf |
 /**
  * Get attributes for new Card Appearance
  */
-export declare const getAttrsForAppearance: (appearance: CardAppearance, selectedNode: Node) => import("prosemirror-model").Attrs;
+export declare const getAttrsForAppearance: (appearance: CardAppearance, selectedNode: Node, isInsideBodiedSyncBlock?: boolean) => import("prosemirror-model").Attrs;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "12.0.0",
+	"version": "12.0.2",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -122,6 +122,9 @@
 		"platform_editor_adf_with_localid": {
 			"type": "boolean"
 		},
+		"platform_synced_block_dogfooding": {
+			"type": "boolean"
+		},
 		"platform_editor_ai_generic_prep_for_aifc_2": {
 			"type": "boolean"
 		},