@atlaskit/editor-plugin-card 11.5.12 → 11.5.13

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/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/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/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-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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "11.5.12",
+	"version": "11.5.13",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-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.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/frontend-utilities": "^3.2.0",
-		"@atlaskit/icon": "^29.1.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.16.0",
+		"@atlaskit/smart-card": "^43.17.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^15.12.0",
-		"@atlaskit/tokens": "^8.5.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.44.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"