@atlaskit/editor-plugin-card 11.5.11 → 11.5.13

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-card
 
+## 11.5.13
+
+### Patch Changes
+
+- [`722f272e8b78f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/722f272e8b78f) -
+  Editor-2778: Smartlink card and embed transform
+- Updated dependencies
+
+## 11.5.12
+
+### Patch Changes
+
+- [`90abe9b926a6f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90abe9b926a6f) -
+  Icon entrypoint migration
+- Updated dependencies
+
 ## 11.5.11
 
 ### Patch Changes

package/dist/cjs/nodeviews/embedCard.js

@@ -134,7 +134,7 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
       }
       try {
         return getPos();
-      } catch (e) {
+      } catch (_unused) {
         // Can blow up in rare cases, when node has been removed.
       }
     });
@@ -180,7 +180,7 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
             hasPreview: false
           });
         }
-      } catch (e) {}
+      } catch (_unused2) {}
     });
     (0, _defineProperty2.default)(_this, "updateSize", function (pctWidth, layout) {
       var _this$props$view = _this.props.view,
@@ -198,6 +198,21 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
       dispatch(tr);
       return true;
     });
+    /**
+     * Defers line-length measurement until the embed card DOM has fully rendered.
+     *
+     * When put embed in the expand, reload the page and open that expand, the embed was collapsed.
+     * Because the `.rich-media-item` can temporarily report `offsetWidth = 1`, as proportional width styles have not been applied yet.
+     * Measuring at that moment would cache the bogus width and break resize calculations.
+     * Scheduling a measurement on the next animation frame ensures layout has
+     * settled. We then force the node view to re-render so `getLineLength`
+     * re-runs and captures the correct width.
+     */
+    (0, _defineProperty2.default)(_this, "scheduleLineLengthRemeasureRaf", (0, _rafSchd.default)(function (view) {
+      if (view) {
+        _this.forceUpdate();
+      }
+    }));
     (0, _defineProperty2.default)(_this, "getLineLength", function (view, pos, originalLineLength) {
       if (typeof pos === 'number' && (0, _utils.isRichMediaInsideOfBlockNode)(view, pos)) {
         var $pos = view.state.doc.resolve(pos);
@@ -206,7 +221,12 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
           return domNode.parentElement.offsetWidth;
         }
         if (domNode instanceof HTMLElement) {
-          return domNode.offsetWidth;
+          var measuredWidth = domNode.offsetWidth;
+          if (measuredWidth <= 1 && (0, _expValEquals.expValEquals)('editor_fix_embed_width_expand', 'isEnabled', true)) {
+            _this.scheduleLineLengthRemeasureRaf(view);
+            return originalLineLength;
+          }
+          return measuredWidth;
         }
       }
       return originalLineLength;

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

@@ -5,28 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DatasourceIcon = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _smartLinkList = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-list"));
 var _primitives = require("@atlaskit/primitives");
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 
-var IconDatasourceGlyph = function IconDatasourceGlyph(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none"
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M0 2C0 0.89543 0.895431 0 2 0H13C14.1046 0 15 0.895431 15 2V13C15 14.1046 14.1046 15 13 15H2C0.89543 15 0 14.1046 0 13V2ZM5 6C5 5.44772 5.44772 5 6 5L12 5C12.5523 5 13 5.44772 13 6C13 6.55229 12.5523 7 12 7L6 7C5.44772 7 5 6.55228 5 6ZM6 8C5.44772 8 5 8.44771 5 9C5 9.55228 5.44772 10 6 10L12 10C12.5523 10 13 9.55229 13 9C13 8.44772 12.5523 8 12 8L6 8ZM5 12C5 11.4477 5.44772 11 6 11L12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13L6 13C5.44772 13 5 12.5523 5 12ZM3 7C3.55228 7 4 6.55228 4 6C4 5.44772 3.55228 5 3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7ZM5 3C5 2.44772 5.44772 2 6 2L12 2C12.5523 2 13 2.44772 13 3C13 3.55229 12.5523 4 12 4L6 4C5.44772 4 5 3.55228 5 3ZM3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4ZM4 9C4 9.55229 3.55228 10 3 10C2.44772 10 2 9.55229 2 9C2 8.44771 2.44772 8 3 8C3.55228 8 4 8.44771 4 9ZM3 13C3.55228 13 4 12.5523 4 12C4 11.4477 3.55228 11 3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13Z",
-    fill: 'currentColor'
-  }));
-};
 var wrapperStyles = (0, _primitives.xcss)({
   padding: 'space.050',
   justifyContent: 'center',
@@ -38,7 +21,6 @@ var DatasourceIcon = exports.DatasourceIcon = function DatasourceIcon(props) {
   return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
     xcss: wrapperStyles
   }, /*#__PURE__*/_react.default.createElement(_smartLinkList.default, {
-    LEGACY_fallbackIcon: IconDatasourceGlyph,
     label: props === null || props === void 0 ? void 0 : props.label
   }));
 };

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

@@ -16,7 +16,7 @@ var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
-var _customizePreferences = _interopRequireDefault(require("@atlaskit/icon/core/migration/customize--preferences"));
+var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
 var _colors = require("@atlaskit/theme/colors");
 var _utils = require("./utils");
 var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
@@ -257,7 +257,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
       className: ICON_AND_LABEL_CLASSNAME
     }, (0, _react2.jsx)("span", {
       css: iconStyles
-    }, (0, _react2.jsx)(_customizePreferences.default, {
+    }, (0, _react2.jsx)(_customize.default, {
       label: label,
       LEGACY_size: iconSize.current,
       testId: "".concat(testId, "-icon")

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

@@ -13,8 +13,8 @@ var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _utils = require("@atlaskit/editor-common/utils");
-var _growHorizontalEditorExpand = _interopRequireDefault(require("@atlaskit/icon/core/migration/grow-horizontal--editor-expand"));
-var _shrinkHorizontalEditorCollapse = _interopRequireDefault(require("@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse"));
+var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
+var _shrinkHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-horizontal"));
 var _linkingCommon = require("@atlaskit/linking-common");
 var _colors = require("@atlaskit/theme/colors");
 var _actions = require("../../pm-plugins/actions");
@@ -70,9 +70,9 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
     css: toolbarButtonWrapperStyles,
     title: title,
     onClick: handleClick,
-    iconBefore: layout === 'full-width' ? (0, _react2.jsx)(_shrinkHorizontalEditorCollapse.default, {
+    iconBefore: layout === 'full-width' ? (0, _react2.jsx)(_shrinkHorizontal.default, {
       label: title
-    }) : (0, _react2.jsx)(_growHorizontalEditorExpand.default, {
+    }) : (0, _react2.jsx)(_growHorizontal.default, {
       label: title
     })
   }));

package/dist/cjs/ui/toolbar.js

@@ -27,10 +27,6 @@ var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
 var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _comment2 = _interopRequireDefault(require("@atlaskit/icon/core/migration/comment"));
-var _deleteEditorRemove = _interopRequireDefault(require("@atlaskit/icon/core/migration/delete--editor-remove"));
-var _linkBrokenEditorUnlink = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-broken--editor-unlink"));
-var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-external--shortcut"));
-var _settingsEditorSettings = _interopRequireDefault(require("@atlaskit/icon/core/migration/settings--editor-settings"));
 var _settings = _interopRequireDefault(require("@atlaskit/icon/core/settings"));
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _doc = require("../pm-plugins/doc");
@@ -351,7 +347,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         id: 'editor.link.openLink',
         type: 'button',
         icon: _linkExternal.default,
-        iconFallback: _linkExternalShortcut.default,
+        iconFallback: _linkExternal.default,
         metadata: metadata,
         className: 'hyperlink-open-link',
         title: intl.formatMessage(_messages.linkMessages.openLink),
@@ -377,7 +373,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         type: 'button',
         appearance: 'danger',
         icon: _delete.default,
-        iconFallback: _deleteEditorRemove.default,
+        iconFallback: _delete.default,
         onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
         onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
         onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
@@ -391,7 +387,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         id: 'editor.link.openLink',
         type: 'button',
         icon: _linkExternal.default,
-        iconFallback: _linkExternalShortcut.default,
+        iconFallback: _linkExternal.default,
         metadata: metadata,
         className: 'hyperlink-open-link',
         title: intl.formatMessage(_messages.linkMessages.openLink),
@@ -519,7 +515,7 @@ var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inli
     type: 'button',
     title: intl.formatMessage(_messages.linkToolbarMessages.unlink),
     icon: _linkBroken.default,
-    iconFallback: _linkBrokenEditorUnlink.default,
+    iconFallback: _linkBroken.default,
     onClick: withToolbarMetadata(unlinkCard(node, state, editorAnalyticsApi))
   }].concat((0, _toConsumableArray2.default)(areAnyNewToolbarFlagsEnabled ? [] : [{
     type: 'separator'
@@ -530,7 +526,7 @@ var getSettingsButton = exports.getSettingsButton = function getSettingsButton(i
     id: 'editor.link.settings',
     type: 'button',
     icon: _settings.default,
-    iconFallback: _settingsEditorSettings.default,
+    iconFallback: _settings.default,
     title: intl.formatMessage(_messages.linkToolbarMessages.settingsLink),
     onClick: openLinkSettings(editorAnalyticsApi),
     href: userPreferencesLink || (0, _link.getLinkPreferencesURLFromENV)(),
@@ -634,7 +630,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       id: 'editor.link.openLink',
       type: 'button',
       icon: _linkExternal.default,
-      iconFallback: _linkExternalShortcut.default,
+      iconFallback: _linkExternal.default,
       metadata: metadata,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(_messages.linkMessages.openLink),
@@ -667,7 +663,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       type: 'button',
       appearance: 'danger',
       icon: _delete.default,
-      iconFallback: _deleteEditorRemove.default,
+      iconFallback: _delete.default,
       onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
       onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
       onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),

package/dist/es2019/nodeviews/embedCard.js

@@ -119,7 +119,7 @@ export class EmbedCardComponent extends React.PureComponent {
       }
       try {
         return getPos();
-      } catch (e) {
+      } catch {
         // Can blow up in rare cases, when node has been removed.
       }
     });
@@ -170,7 +170,7 @@ export class EmbedCardComponent extends React.PureComponent {
             hasPreview: false
           });
         }
-      } catch (e) {}
+      } catch {}
     });
     _defineProperty(this, "updateSize", (pctWidth, layout) => {
       const {
@@ -190,6 +190,21 @@ export class EmbedCardComponent extends React.PureComponent {
       dispatch(tr);
       return true;
     });
+    /**
+     * Defers line-length measurement until the embed card DOM has fully rendered.
+     *
+     * When put embed in the expand, reload the page and open that expand, the embed was collapsed.
+     * Because the `.rich-media-item` can temporarily report `offsetWidth = 1`, as proportional width styles have not been applied yet.
+     * Measuring at that moment would cache the bogus width and break resize calculations.
+     * Scheduling a measurement on the next animation frame ensures layout has
+     * settled. We then force the node view to re-render so `getLineLength`
+     * re-runs and captures the correct width.
+     */
+    _defineProperty(this, "scheduleLineLengthRemeasureRaf", rafSchedule(view => {
+      if (view) {
+        this.forceUpdate();
+      }
+    }));
     _defineProperty(this, "getLineLength", (view, pos, originalLineLength) => {
       if (typeof pos === 'number' && isRichMediaInsideOfBlockNode(view, pos)) {
         const $pos = view.state.doc.resolve(pos);
@@ -198,7 +213,12 @@ export class EmbedCardComponent extends React.PureComponent {
           return domNode.parentElement.offsetWidth;
         }
         if (domNode instanceof HTMLElement) {
-          return domNode.offsetWidth;
+          const measuredWidth = domNode.offsetWidth;
+          if (measuredWidth <= 1 && expValEquals('editor_fix_embed_width_expand', 'isEnabled', true)) {
+            this.scheduleLineLengthRemeasureRaf(view);
+            return originalLineLength;
+          }
+          return measuredWidth;
         }
       }
       return originalLineLength;

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

@@ -1,24 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import SmartLinkListIcon from '@atlaskit/icon/core/smart-link-list';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Flex, xcss } from '@atlaskit/primitives';
-const IconDatasourceGlyph = props => {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none"
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M0 2C0 0.89543 0.895431 0 2 0H13C14.1046 0 15 0.895431 15 2V13C15 14.1046 14.1046 15 13 15H2C0.89543 15 0 14.1046 0 13V2ZM5 6C5 5.44772 5.44772 5 6 5L12 5C12.5523 5 13 5.44772 13 6C13 6.55229 12.5523 7 12 7L6 7C5.44772 7 5 6.55228 5 6ZM6 8C5.44772 8 5 8.44771 5 9C5 9.55228 5.44772 10 6 10L12 10C12.5523 10 13 9.55229 13 9C13 8.44772 12.5523 8 12 8L6 8ZM5 12C5 11.4477 5.44772 11 6 11L12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13L6 13C5.44772 13 5 12.5523 5 12ZM3 7C3.55228 7 4 6.55228 4 6C4 5.44772 3.55228 5 3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7ZM5 3C5 2.44772 5.44772 2 6 2L12 2C12.5523 2 13 2.44772 13 3C13 3.55229 12.5523 4 12 4L6 4C5.44772 4 5 3.55228 5 3ZM3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4ZM4 9C4 9.55229 3.55228 10 3 10C2.44772 10 2 9.55229 2 9C2 8.44771 2.44772 8 3 8C3.55228 8 4 8.44771 4 9ZM3 13C3.55228 13 4 12.5523 4 12C4 11.4477 3.55228 11 3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13Z",
-    fill: 'currentColor'
-  }));
-};
 const wrapperStyles = xcss({
   padding: 'space.050',
   justifyContent: 'center',
@@ -30,7 +13,6 @@ export const DatasourceIcon = props => {
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: wrapperStyles
   }, /*#__PURE__*/React.createElement(SmartLinkListIcon, {
-    LEGACY_fallbackIcon: IconDatasourceGlyph,
     label: props === null || props === void 0 ? void 0 : props.label
   }));
 };

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

@@ -13,7 +13,7 @@ import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
-import CustomizeIcon from '@atlaskit/icon/core/migration/customize--preferences';
+import CustomizeIcon from '@atlaskit/icon/core/customize';
 import { B100, N0, N700 } from '@atlaskit/theme/colors';
 import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
 const DEBOUNCE_IN_MS = 5;

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

@@ -11,8 +11,8 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
-import GrowHorizontalIcon from '@atlaskit/icon/core/migration/grow-horizontal--editor-expand';
-import ShrinkHorizontalIcon from '@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse';
+import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
+import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
 import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
 import { setCardLayout } from '../../pm-plugins/actions';

package/dist/es2019/ui/toolbar.js

@@ -17,11 +17,7 @@ import EditIcon from '@atlaskit/icon/core/edit';
 import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import LegacyCommentIcon from '@atlaskit/icon/core/migration/comment';
-import RemoveIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
-import UnlinkIcon from '@atlaskit/icon/core/migration/link-broken--editor-unlink';
-import OpenIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
-import CogIcon from '@atlaskit/icon/core/migration/settings--editor-settings';
-import SettingsIcon from '@atlaskit/icon/core/settings';
+import CogIcon from '@atlaskit/icon/core/settings';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeSelectedCardToText } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
@@ -339,7 +335,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
-      iconFallback: OpenIcon,
+      iconFallback: LinkExternalIcon,
       metadata: metadata,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
@@ -365,7 +361,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       type: 'button',
       appearance: 'danger',
       icon: DeleteIcon,
-      iconFallback: RemoveIcon,
+      iconFallback: DeleteIcon,
       onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
       onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
       onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
@@ -379,7 +375,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
-      iconFallback: OpenIcon,
+      iconFallback: LinkExternalIcon,
       metadata: metadata,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
@@ -504,7 +500,7 @@ const getUnlinkButtonGroup = (state, intl, node, inlineCard, editorAnalyticsApi,
     type: 'button',
     title: intl.formatMessage(linkToolbarMessages.unlink),
     icon: LinkBrokenIcon,
-    iconFallback: UnlinkIcon,
+    iconFallback: LinkBrokenIcon,
     onClick: withToolbarMetadata(unlinkCard(node, state, editorAnalyticsApi))
   }, ...(areAnyNewToolbarFlagsEnabled ? [] : [{
     type: 'separator'
@@ -514,7 +510,7 @@ export const getSettingsButton = (intl, editorAnalyticsApi, userPreferencesLink)
   return {
     id: 'editor.link.settings',
     type: 'button',
-    icon: SettingsIcon,
+    icon: CogIcon,
     iconFallback: CogIcon,
     title: intl.formatMessage(linkToolbarMessages.settingsLink),
     onClick: openLinkSettings(editorAnalyticsApi),
@@ -619,7 +615,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
-      iconFallback: OpenIcon,
+      iconFallback: LinkExternalIcon,
       metadata: metadata,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
@@ -652,7 +648,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       type: 'button',
       appearance: 'danger',
       icon: DeleteIcon,
-      iconFallback: RemoveIcon,
+      iconFallback: DeleteIcon,
       onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
       onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
       onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),

package/dist/esm/nodeviews/embedCard.js

@@ -128,7 +128,7 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
       }
       try {
         return getPos();
-      } catch (e) {
+      } catch (_unused) {
         // Can blow up in rare cases, when node has been removed.
       }
     });
@@ -174,7 +174,7 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
             hasPreview: false
           });
         }
-      } catch (e) {}
+      } catch (_unused2) {}
     });
     _defineProperty(_this, "updateSize", function (pctWidth, layout) {
       var _this$props$view = _this.props.view,
@@ -192,6 +192,21 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
       dispatch(tr);
       return true;
     });
+    /**
+     * Defers line-length measurement until the embed card DOM has fully rendered.
+     *
+     * When put embed in the expand, reload the page and open that expand, the embed was collapsed.
+     * Because the `.rich-media-item` can temporarily report `offsetWidth = 1`, as proportional width styles have not been applied yet.
+     * Measuring at that moment would cache the bogus width and break resize calculations.
+     * Scheduling a measurement on the next animation frame ensures layout has
+     * settled. We then force the node view to re-render so `getLineLength`
+     * re-runs and captures the correct width.
+     */
+    _defineProperty(_this, "scheduleLineLengthRemeasureRaf", rafSchedule(function (view) {
+      if (view) {
+        _this.forceUpdate();
+      }
+    }));
     _defineProperty(_this, "getLineLength", function (view, pos, originalLineLength) {
       if (typeof pos === 'number' && isRichMediaInsideOfBlockNode(view, pos)) {
         var $pos = view.state.doc.resolve(pos);
@@ -200,7 +215,12 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
           return domNode.parentElement.offsetWidth;
         }
         if (domNode instanceof HTMLElement) {
-          return domNode.offsetWidth;
+          var measuredWidth = domNode.offsetWidth;
+          if (measuredWidth <= 1 && expValEquals('editor_fix_embed_width_expand', 'isEnabled', true)) {
+            _this.scheduleLineLengthRemeasureRaf(view);
+            return originalLineLength;
+          }
+          return measuredWidth;
         }
       }
       return originalLineLength;

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

@@ -1,24 +1,7 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import SmartLinkListIcon from '@atlaskit/icon/core/smart-link-list';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Flex, xcss } from '@atlaskit/primitives';
-var IconDatasourceGlyph = function IconDatasourceGlyph(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "15",
-    height: "15",
-    viewBox: "0 0 15 15",
-    fill: "none"
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M0 2C0 0.89543 0.895431 0 2 0H13C14.1046 0 15 0.895431 15 2V13C15 14.1046 14.1046 15 13 15H2C0.89543 15 0 14.1046 0 13V2ZM5 6C5 5.44772 5.44772 5 6 5L12 5C12.5523 5 13 5.44772 13 6C13 6.55229 12.5523 7 12 7L6 7C5.44772 7 5 6.55228 5 6ZM6 8C5.44772 8 5 8.44771 5 9C5 9.55228 5.44772 10 6 10L12 10C12.5523 10 13 9.55229 13 9C13 8.44772 12.5523 8 12 8L6 8ZM5 12C5 11.4477 5.44772 11 6 11L12 11C12.5523 11 13 11.4477 13 12C13 12.5523 12.5523 13 12 13L6 13C5.44772 13 5 12.5523 5 12ZM3 7C3.55228 7 4 6.55228 4 6C4 5.44772 3.55228 5 3 5C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7ZM5 3C5 2.44772 5.44772 2 6 2L12 2C12.5523 2 13 2.44772 13 3C13 3.55229 12.5523 4 12 4L6 4C5.44772 4 5 3.55228 5 3ZM3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4ZM4 9C4 9.55229 3.55228 10 3 10C2.44772 10 2 9.55229 2 9C2 8.44771 2.44772 8 3 8C3.55228 8 4 8.44771 4 9ZM3 13C3.55228 13 4 12.5523 4 12C4 11.4477 3.55228 11 3 11C2.44772 11 2 11.4477 2 12C2 12.5523 2.44772 13 3 13Z",
-    fill: 'currentColor'
-  }));
-};
 var wrapperStyles = xcss({
   padding: 'space.050',
   justifyContent: 'center',
@@ -30,7 +13,6 @@ export var DatasourceIcon = function DatasourceIcon(props) {
   return /*#__PURE__*/React.createElement(Flex, {
     xcss: wrapperStyles
   }, /*#__PURE__*/React.createElement(SmartLinkListIcon, {
-    LEGACY_fallbackIcon: IconDatasourceGlyph,
     label: props === null || props === void 0 ? void 0 : props.label
   }));
 };

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

@@ -17,7 +17,7 @@ import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
-import CustomizeIcon from '@atlaskit/icon/core/migration/customize--preferences';
+import CustomizeIcon from '@atlaskit/icon/core/customize';
 import { B100, N0, N700 } from '@atlaskit/theme/colors';
 import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';
 var DEBOUNCE_IN_MS = 5;

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

@@ -14,8 +14,8 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
 import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
-import GrowHorizontalIcon from '@atlaskit/icon/core/migration/grow-horizontal--editor-expand';
-import ShrinkHorizontalIcon from '@atlaskit/icon/core/migration/shrink-horizontal--editor-collapse';
+import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
+import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
 import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
 import { setCardLayout } from '../../pm-plugins/actions';

package/dist/esm/ui/toolbar.js

@@ -21,11 +21,7 @@ import EditIcon from '@atlaskit/icon/core/edit';
 import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import LegacyCommentIcon from '@atlaskit/icon/core/migration/comment';
-import RemoveIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
-import UnlinkIcon from '@atlaskit/icon/core/migration/link-broken--editor-unlink';
-import OpenIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
-import CogIcon from '@atlaskit/icon/core/migration/settings--editor-settings';
-import SettingsIcon from '@atlaskit/icon/core/settings';
+import CogIcon from '@atlaskit/icon/core/settings';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeSelectedCardToText } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
@@ -342,7 +338,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         id: 'editor.link.openLink',
         type: 'button',
         icon: LinkExternalIcon,
-        iconFallback: OpenIcon,
+        iconFallback: LinkExternalIcon,
         metadata: metadata,
         className: 'hyperlink-open-link',
         title: intl.formatMessage(linkMessages.openLink),
@@ -368,7 +364,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         type: 'button',
         appearance: 'danger',
         icon: DeleteIcon,
-        iconFallback: RemoveIcon,
+        iconFallback: DeleteIcon,
         onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
         onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
         onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
@@ -382,7 +378,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         id: 'editor.link.openLink',
         type: 'button',
         icon: LinkExternalIcon,
-        iconFallback: OpenIcon,
+        iconFallback: LinkExternalIcon,
         metadata: metadata,
         className: 'hyperlink-open-link',
         title: intl.formatMessage(linkMessages.openLink),
@@ -510,7 +506,7 @@ var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inli
     type: 'button',
     title: intl.formatMessage(linkToolbarMessages.unlink),
     icon: LinkBrokenIcon,
-    iconFallback: UnlinkIcon,
+    iconFallback: LinkBrokenIcon,
     onClick: withToolbarMetadata(unlinkCard(node, state, editorAnalyticsApi))
   }].concat(_toConsumableArray(areAnyNewToolbarFlagsEnabled ? [] : [{
     type: 'separator'
@@ -520,7 +516,7 @@ export var getSettingsButton = function getSettingsButton(intl, editorAnalyticsA
   return {
     id: 'editor.link.settings',
     type: 'button',
-    icon: SettingsIcon,
+    icon: CogIcon,
     iconFallback: CogIcon,
     title: intl.formatMessage(linkToolbarMessages.settingsLink),
     onClick: openLinkSettings(editorAnalyticsApi),
@@ -625,7 +621,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
-      iconFallback: OpenIcon,
+      iconFallback: LinkExternalIcon,
       metadata: metadata,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
@@ -658,7 +654,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       type: 'button',
       appearance: 'danger',
       icon: DeleteIcon,
-      iconFallback: RemoveIcon,
+      iconFallback: DeleteIcon,
       onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
       onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
       onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),

package/dist/types/nodeviews/embedCard.d.ts

@@ -27,6 +27,17 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
         url?: string;
     }) => void;
     updateSize: (pctWidth: number | null, layout: RichMediaLayout) => true | undefined;
+    /**
+     * Defers line-length measurement until the embed card DOM has fully rendered.
+     *
+     * When put embed in the expand, reload the page and open that expand, the embed was collapsed.
+     * Because the `.rich-media-item` can temporarily report `offsetWidth = 1`, as proportional width styles have not been applied yet.
+     * Measuring at that moment would cache the bogus width and break resize calculations.
+     * Scheduling a measurement on the next animation frame ensures layout has
+     * settled. We then force the node view to re-render so `getLineLength`
+     * re-runs and captures the correct width.
+     */
+    private scheduleLineLengthRemeasureRaf;
     private getLineLength;
     /**
      * Even though render is capable of listening and reacting to iframely wrapper iframe sent `resize` events

package/dist/types/ui/preview/PreviewInvoker.d.ts

@@ -8,5 +8,5 @@ type PreviewInvokerProps = {
     }) => ReactNode;
     url: string;
 };
-export declare const PreviewInvoker: ({ url, appearance, children }: PreviewInvokerProps) => React.JSX.Element;
+export declare const PreviewInvoker: ({ url, appearance, children, }: PreviewInvokerProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/embedCard.d.ts

@@ -27,6 +27,17 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
         url?: string;
     }) => void;
     updateSize: (pctWidth: number | null, layout: RichMediaLayout) => true | undefined;
+    /**
+     * Defers line-length measurement until the embed card DOM has fully rendered.
+     *
+     * When put embed in the expand, reload the page and open that expand, the embed was collapsed.
+     * Because the `.rich-media-item` can temporarily report `offsetWidth = 1`, as proportional width styles have not been applied yet.
+     * Measuring at that moment would cache the bogus width and break resize calculations.
+     * Scheduling a measurement on the next animation frame ensures layout has
+     * settled. We then force the node view to re-render so `getLineLength`
+     * re-runs and captures the correct width.
+     */
+    private scheduleLineLengthRemeasureRaf;
     private getLineLength;
     /**
      * Even though render is capable of listening and reacting to iframely wrapper iframe sent `resize` events

package/dist/types-ts4.5/ui/preview/PreviewInvoker.d.ts

@@ -8,5 +8,5 @@ type PreviewInvokerProps = {
     }) => ReactNode;
     url: string;
 };
-export declare const PreviewInvoker: ({ url, appearance, children }: PreviewInvokerProps) => React.JSX.Element;
+export declare const PreviewInvoker: ({ url, appearance, children, }: PreviewInvokerProps) => React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "11.5.11",
+	"version": "11.5.13",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.5.1",
+		"@atlaskit/adf-schema": "^51.5.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/custom-steps": "^0.16.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
@@ -39,14 +39,14 @@
 		"@atlaskit/editor-plugin-editor-disabled": "^6.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^5.0.0",
-		"@atlaskit/editor-plugin-floating-toolbar": "^8.2.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^8.3.0",
 		"@atlaskit/editor-plugin-grid": "^6.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^3.4.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
-		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/frontend-utilities": "^3.2.0",
-		"@atlaskit/icon": "^29.0.0",
+		"@atlaskit/icon": "^29.3.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-analytics": "^11.0.0",
 		"@atlaskit/link-client-extension": "^6.0.0",
@@ -59,10 +59,10 @@
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/smart-card": "^43.14.0",
+		"@atlaskit/smart-card": "^43.17.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^15.0.0",
-		"@atlaskit/tokens": "^8.4.0",
+		"@atlaskit/tmp-editor-statsig": "^15.16.0",
+		"@atlaskit/tokens": "^8.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.40.0",
+		"@atlaskit/editor-common": "^110.46.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"