@atlaskit/editor-plugin-card 2.9.2 → 2.9.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-card
 
+## 2.9.3
+
+### Patch Changes
+
+- [#125862](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125862)
+  [`6c72c192b5df6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6c72c192b5df6) -
+  [ux] Improve embed card fallback for lazy node view such that it matches the embed card loading
+  state.
+- Updated dependencies
+
 ## 2.9.2
 
 ### Patch Changes
@@ -7,6 +17,7 @@
 - [#125851](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125851)
   [`4ffe0a8ea7929`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4ffe0a8ea7929) -
   Refactor node views.
+- Updated dependencies
 
 ## 2.9.1
 

package/dist/cjs/plugin.js

@@ -18,6 +18,8 @@ var _doc = require("./pm-plugins/doc");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _pluginKey = require("./pm-plugins/plugin-key");
+var _blockCard = require("./toDOM-fixes/blockCard");
+var _embedCard = require("./toDOM-fixes/embedCard");
 var _toolbar = require("./toolbar");
 var _ModalWithState = _interopRequireDefault(require("./ui/DatasourceModal/ModalWithState"));
 var _EditorLinkingPlatformAnalytics = require("./ui/EditorLinkingPlatformAnalytics");
@@ -45,12 +47,12 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
         node: _adfSchema.inlineCard
       }, {
         name: 'blockCard',
-        node: _adfSchema.blockCard
+        node: (0, _blockCard.blockCardSpecWithFixedToDOM)()
       }];
       if (options.allowEmbeds) {
         nodes.push({
           name: 'embedCard',
-          node: _adfSchema.embedCard
+          node: (0, _embedCard.embedCardSpecWithFixedToDOM)()
         });
       }
       return nodes;

package/dist/cjs/toDOM-fixes/blockCard.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blockCardSpecWithFixedToDOM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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; }
+// @nodeSpecException:toDOM patch
+var blockCardSpecWithFixedToDOM = exports.blockCardSpecWithFixedToDOM = function blockCardSpecWithFixedToDOM() {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _adfSchema.blockCard;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.blockCard), {}, {
+    toDOM: function toDOM(node) {
+      var _node$attrs;
+      var _ref = node.attrs,
+        url = _ref.url;
+      var _ref2 = node.attrs,
+        data = _ref2.data;
+      var _ref3 = node.attrs,
+        layout = _ref3.layout,
+        width = _ref3.width,
+        datasource = _ref3.datasource;
+      var attrs = {
+        'data-block-card': '',
+        'data-card-url': url || '',
+        'data-card-data': data ? JSON.stringify(data) : '',
+        'data-datasource': datasource ? JSON.stringify(datasource) : '',
+        'data-layout': layout,
+        'data-width': "".concat(width),
+        class: 'blockCardView-content-wrap'
+      };
+      return ['div', attrs, ['a', {
+        // To match `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
+        // Which uses frame styling `packages/linking-platform/smart-card/src/view/InlineCard/Frame/styled.ts`
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          marginLeft: "var(--ds-space-negative-025, -2px)",
+          boxDecorationBreak: 'clone',
+          WebkitBoxDecorationBreak: 'clone',
+          padding: "var(--ds-space-025, 2px)".concat(" 0px"),
+          lineHeight: '22px'
+        }),
+        href: url || ''
+      }, (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url) || ' ']];
+    }
+  });
+};

package/dist/cjs/toDOM-fixes/embedCard.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.embedCardSpecWithFixedToDOM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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; } /**
+ * Some of these functions and styling are duplicated from their custom node view equivalents
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `@atlaskit/editor-common` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function calcMargin(layout) {
+  switch (layout) {
+    case 'wrap-right':
+      return '12px auto 12px 12px';
+    case 'wrap-left':
+      return '12px 12px 12px auto';
+    default:
+      return '24px auto';
+  }
+}
+
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function float(layout) {
+  switch (layout) {
+    case 'wrap-right':
+      return 'right';
+    case 'wrap-left':
+      return 'left';
+    default:
+      return 'none';
+  }
+}
+
+// From `packages/editor/editor-common/src/media-single/constants.ts`
+var MEDIA_SINGLE_GUTTER_SIZE = 24;
+
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function calcPxFromPct(pct, lineLength) {
+  var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth * pct - MEDIA_SINGLE_GUTTER_SIZE;
+}
+
+// ED-24488: We can't retrieve the editor width from here easily.
+// For now we're using the default line length here, but this will be
+// incorrect on smaller devices.
+var LINE_LENGTH = 760;
+
+// @nodeSpecException:toDOM patch
+var embedCardSpecWithFixedToDOM = exports.embedCardSpecWithFixedToDOM = function embedCardSpecWithFixedToDOM() {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _adfSchema.embedCard;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.embedCard), {}, {
+    toDOM: function toDOM(node) {
+      var _node$attrs = node.attrs,
+        url = _node$attrs.url,
+        layout = _node$attrs.layout,
+        width = _node$attrs.width,
+        originalWidth = _node$attrs.originalWidth,
+        originalHeight = _node$attrs.originalHeight;
+      var aspectRatio = originalWidth && originalHeight ? originalWidth / originalHeight : _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH / _editorSharedStyles.DEFAULT_EMBED_CARD_HEIGHT;
+      var attrs = {
+        'data-embed-card': '',
+        'data-card-url': url,
+        'data-layout': layout,
+        'data-width': width,
+        'data-original-width': originalWidth,
+        'data-original-height': originalHeight,
+        class: 'embedCardView-content-wrap',
+        // From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          margin: calcMargin(layout),
+          width: "".concat(Math.ceil(calcPxFromPct(width / 100, LINE_LENGTH)), "px"),
+          marginRight: layout === 'align-end' ? '0' : '',
+          marginLeft: layout === 'align-start' ? '0' : '',
+          float: float(layout)
+        })
+      };
+      return ['div', attrs,
+      // This is the only modification to the embed card `toDOM`
+      // This is to match the behaviour of Card which lazy loads
+      // and uses just a URL as a fallback
+      //
+      // To match: `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
+      ['a', {
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          marginLeft: "var(--ds-space-negative-025, -2px)",
+          boxDecorationBreak: 'clone',
+          WebkitBoxDecorationBreak: 'clone',
+          padding: "var(--ds-space-025, 2px)".concat(" 0px"),
+          lineHeight: '22px'
+        })
+      }, url !== null && url !== void 0 ? url : ''],
+      // From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
+      // The `getHeightDefiningComponent` that defines the height of the element
+      ['span', {
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          display: 'block',
+          paddingBottom: "calc(".concat((1 / aspectRatio * 100).toFixed(3), "% + ", "var(--ds-space-400, 32px)", ")")
+        })
+      }]];
+    }
+  });
+};

package/dist/es2019/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { blockCard, embedCard, inlineCard } from '@atlaskit/adf-schema';
+import { inlineCard } from '@atlaskit/adf-schema';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDatasourceJiraIssue } from '@atlaskit/editor-common/quick-insert';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
@@ -10,6 +10,8 @@ import { queueCardsFromChangedTr } from './pm-plugins/doc';
 import { cardKeymap } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
+import { blockCardSpecWithFixedToDOM } from './toDOM-fixes/blockCard';
+import { embedCardSpecWithFixedToDOM } from './toDOM-fixes/embedCard';
 import { floatingToolbar, getEndingToolbarItems, getStartingToolbarItems } from './toolbar';
 import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
 import { EditorLinkingPlatformAnalytics } from './ui/EditorLinkingPlatformAnalytics';
@@ -36,12 +38,12 @@ export const cardPlugin = ({
         node: inlineCard
       }, {
         name: 'blockCard',
-        node: blockCard
+        node: blockCardSpecWithFixedToDOM()
       }];
       if (options.allowEmbeds) {
         nodes.push({
           name: 'embedCard',
-          node: embedCard
+          node: embedCardSpecWithFixedToDOM()
         });
       }
       return nodes;

package/dist/es2019/toDOM-fixes/blockCard.js

@@ -0,0 +1,47 @@
+import { blockCard } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+// @nodeSpecException:toDOM patch
+export const blockCardSpecWithFixedToDOM = () => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return blockCard;
+  }
+  return {
+    ...blockCard,
+    toDOM: node => {
+      var _node$attrs;
+      const {
+        url
+      } = node.attrs;
+      const {
+        data
+      } = node.attrs;
+      const {
+        layout,
+        width,
+        datasource
+      } = node.attrs;
+      const attrs = {
+        'data-block-card': '',
+        'data-card-url': url || '',
+        'data-card-data': data ? JSON.stringify(data) : '',
+        'data-datasource': datasource ? JSON.stringify(datasource) : '',
+        'data-layout': layout,
+        'data-width': `${width}`,
+        class: 'blockCardView-content-wrap'
+      };
+      return ['div', attrs, ['a', {
+        // To match `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
+        // Which uses frame styling `packages/linking-platform/smart-card/src/view/InlineCard/Frame/styled.ts`
+        style: convertToInlineCss({
+          marginLeft: "var(--ds-space-negative-025, -2px)",
+          boxDecorationBreak: 'clone',
+          WebkitBoxDecorationBreak: 'clone',
+          padding: `${"var(--ds-space-025, 2px)"} 0px`,
+          lineHeight: '22px'
+        }),
+        href: url || ''
+      }, (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url) || ' ']];
+    }
+  };
+};

package/dist/es2019/toDOM-fixes/embedCard.js

@@ -0,0 +1,111 @@
+/**
+ * Some of these functions and styling are duplicated from their custom node view equivalents
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `@atlaskit/editor-common` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+import { embedCard } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function calcMargin(layout) {
+  switch (layout) {
+    case 'wrap-right':
+      return '12px auto 12px 12px';
+    case 'wrap-left':
+      return '12px 12px 12px auto';
+    default:
+      return '24px auto';
+  }
+}
+
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function float(layout) {
+  switch (layout) {
+    case 'wrap-right':
+      return 'right';
+    case 'wrap-left':
+      return 'left';
+    default:
+      return 'none';
+  }
+}
+
+// From `packages/editor/editor-common/src/media-single/constants.ts`
+const MEDIA_SINGLE_GUTTER_SIZE = 24;
+
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function calcPxFromPct(pct, lineLength) {
+  const maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth * pct - MEDIA_SINGLE_GUTTER_SIZE;
+}
+
+// ED-24488: We can't retrieve the editor width from here easily.
+// For now we're using the default line length here, but this will be
+// incorrect on smaller devices.
+const LINE_LENGTH = 760;
+
+// @nodeSpecException:toDOM patch
+export const embedCardSpecWithFixedToDOM = () => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return embedCard;
+  }
+  return {
+    ...embedCard,
+    toDOM: node => {
+      const {
+        url,
+        layout,
+        width,
+        originalWidth,
+        originalHeight
+      } = node.attrs;
+      const aspectRatio = originalWidth && originalHeight ? originalWidth / originalHeight : DEFAULT_EMBED_CARD_WIDTH / DEFAULT_EMBED_CARD_HEIGHT;
+      const attrs = {
+        'data-embed-card': '',
+        'data-card-url': url,
+        'data-layout': layout,
+        'data-width': width,
+        'data-original-width': originalWidth,
+        'data-original-height': originalHeight,
+        class: 'embedCardView-content-wrap',
+        // From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
+        style: convertToInlineCss({
+          margin: calcMargin(layout),
+          width: `${Math.ceil(calcPxFromPct(width / 100, LINE_LENGTH))}px`,
+          marginRight: layout === 'align-end' ? '0' : '',
+          marginLeft: layout === 'align-start' ? '0' : '',
+          float: float(layout)
+        })
+      };
+      return ['div', attrs,
+      // This is the only modification to the embed card `toDOM`
+      // This is to match the behaviour of Card which lazy loads
+      // and uses just a URL as a fallback
+      //
+      // To match: `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
+      ['a', {
+        style: convertToInlineCss({
+          marginLeft: "var(--ds-space-negative-025, -2px)",
+          boxDecorationBreak: 'clone',
+          WebkitBoxDecorationBreak: 'clone',
+          padding: `${"var(--ds-space-025, 2px)"} 0px`,
+          lineHeight: '22px'
+        })
+      }, url !== null && url !== void 0 ? url : ''],
+      // From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
+      // The `getHeightDefiningComponent` that defines the height of the element
+      ['span', {
+        style: convertToInlineCss({
+          display: 'block',
+          paddingBottom: `calc(${(1 / aspectRatio * 100).toFixed(3)}% + ${"var(--ds-space-400, 32px)"})`
+        })
+      }]];
+    }
+  };
+};

package/dist/esm/plugin.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import React from 'react';
-import { blockCard, embedCard, inlineCard } from '@atlaskit/adf-schema';
+import { inlineCard } from '@atlaskit/adf-schema';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDatasourceJiraIssue } from '@atlaskit/editor-common/quick-insert';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
@@ -13,6 +13,8 @@ import { queueCardsFromChangedTr } from './pm-plugins/doc';
 import { cardKeymap } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
+import { blockCardSpecWithFixedToDOM } from './toDOM-fixes/blockCard';
+import { embedCardSpecWithFixedToDOM } from './toDOM-fixes/embedCard';
 import { floatingToolbar, getEndingToolbarItems, getStartingToolbarItems } from './toolbar';
 import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
 import { EditorLinkingPlatformAnalytics } from './ui/EditorLinkingPlatformAnalytics';
@@ -38,12 +40,12 @@ export var cardPlugin = function cardPlugin(_ref) {
         node: inlineCard
       }, {
         name: 'blockCard',
-        node: blockCard
+        node: blockCardSpecWithFixedToDOM()
       }];
       if (options.allowEmbeds) {
         nodes.push({
           name: 'embedCard',
-          node: embedCard
+          node: embedCardSpecWithFixedToDOM()
         });
       }
       return nodes;

package/dist/esm/toDOM-fixes/blockCard.js

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import { blockCard } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+// @nodeSpecException:toDOM patch
+export var blockCardSpecWithFixedToDOM = function blockCardSpecWithFixedToDOM() {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return blockCard;
+  }
+  return _objectSpread(_objectSpread({}, blockCard), {}, {
+    toDOM: function toDOM(node) {
+      var _node$attrs;
+      var _ref = node.attrs,
+        url = _ref.url;
+      var _ref2 = node.attrs,
+        data = _ref2.data;
+      var _ref3 = node.attrs,
+        layout = _ref3.layout,
+        width = _ref3.width,
+        datasource = _ref3.datasource;
+      var attrs = {
+        'data-block-card': '',
+        'data-card-url': url || '',
+        'data-card-data': data ? JSON.stringify(data) : '',
+        'data-datasource': datasource ? JSON.stringify(datasource) : '',
+        'data-layout': layout,
+        'data-width': "".concat(width),
+        class: 'blockCardView-content-wrap'
+      };
+      return ['div', attrs, ['a', {
+        // To match `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
+        // Which uses frame styling `packages/linking-platform/smart-card/src/view/InlineCard/Frame/styled.ts`
+        style: convertToInlineCss({
+          marginLeft: "var(--ds-space-negative-025, -2px)",
+          boxDecorationBreak: 'clone',
+          WebkitBoxDecorationBreak: 'clone',
+          padding: "var(--ds-space-025, 2px)".concat(" 0px"),
+          lineHeight: '22px'
+        }),
+        href: url || ''
+      }, (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url) || ' ']];
+    }
+  });
+};

package/dist/esm/toDOM-fixes/embedCard.js

@@ -0,0 +1,112 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+/**
+ * Some of these functions and styling are duplicated from their custom node view equivalents
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `@atlaskit/editor-common` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+import { embedCard } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function calcMargin(layout) {
+  switch (layout) {
+    case 'wrap-right':
+      return '12px auto 12px 12px';
+    case 'wrap-left':
+      return '12px 12px 12px auto';
+    default:
+      return '24px auto';
+  }
+}
+
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function float(layout) {
+  switch (layout) {
+    case 'wrap-right':
+      return 'right';
+    case 'wrap-left':
+      return 'left';
+    default:
+      return 'none';
+  }
+}
+
+// From `packages/editor/editor-common/src/media-single/constants.ts`
+var MEDIA_SINGLE_GUTTER_SIZE = 24;
+
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function calcPxFromPct(pct, lineLength) {
+  var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth * pct - MEDIA_SINGLE_GUTTER_SIZE;
+}
+
+// ED-24488: We can't retrieve the editor width from here easily.
+// For now we're using the default line length here, but this will be
+// incorrect on smaller devices.
+var LINE_LENGTH = 760;
+
+// @nodeSpecException:toDOM patch
+export var embedCardSpecWithFixedToDOM = function embedCardSpecWithFixedToDOM() {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return embedCard;
+  }
+  return _objectSpread(_objectSpread({}, embedCard), {}, {
+    toDOM: function toDOM(node) {
+      var _node$attrs = node.attrs,
+        url = _node$attrs.url,
+        layout = _node$attrs.layout,
+        width = _node$attrs.width,
+        originalWidth = _node$attrs.originalWidth,
+        originalHeight = _node$attrs.originalHeight;
+      var aspectRatio = originalWidth && originalHeight ? originalWidth / originalHeight : DEFAULT_EMBED_CARD_WIDTH / DEFAULT_EMBED_CARD_HEIGHT;
+      var attrs = {
+        'data-embed-card': '',
+        'data-card-url': url,
+        'data-layout': layout,
+        'data-width': width,
+        'data-original-width': originalWidth,
+        'data-original-height': originalHeight,
+        class: 'embedCardView-content-wrap',
+        // From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
+        style: convertToInlineCss({
+          margin: calcMargin(layout),
+          width: "".concat(Math.ceil(calcPxFromPct(width / 100, LINE_LENGTH)), "px"),
+          marginRight: layout === 'align-end' ? '0' : '',
+          marginLeft: layout === 'align-start' ? '0' : '',
+          float: float(layout)
+        })
+      };
+      return ['div', attrs,
+      // This is the only modification to the embed card `toDOM`
+      // This is to match the behaviour of Card which lazy loads
+      // and uses just a URL as a fallback
+      //
+      // To match: `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
+      ['a', {
+        style: convertToInlineCss({
+          marginLeft: "var(--ds-space-negative-025, -2px)",
+          boxDecorationBreak: 'clone',
+          WebkitBoxDecorationBreak: 'clone',
+          padding: "var(--ds-space-025, 2px)".concat(" 0px"),
+          lineHeight: '22px'
+        })
+      }, url !== null && url !== void 0 ? url : ''],
+      // From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
+      // The `getHeightDefiningComponent` that defines the height of the element
+      ['span', {
+        style: convertToInlineCss({
+          display: 'block',
+          paddingBottom: "calc(".concat((1 / aspectRatio * 100).toFixed(3), "% + ", "var(--ds-space-400, 32px)", ")")
+        })
+      }]];
+    }
+  });
+};

package/dist/types/toDOM-fixes/blockCard.d.ts

@@ -0,0 +1 @@
+export declare const blockCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types/toDOM-fixes/embedCard.d.ts

@@ -0,0 +1 @@
+export declare const embedCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types-ts4.5/toDOM-fixes/blockCard.d.ts

@@ -0,0 +1 @@
+export declare const blockCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types-ts4.5/toDOM-fixes/embedCard.d.ts

@@ -0,0 +1 @@
+export declare const embedCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "2.9.2",
+	"version": "2.9.3",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/custom-steps": "^0.6.0",
-		"@atlaskit/editor-common": "^87.2.0",
+		"@atlaskit/editor-common": "^87.3.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
 		"@atlaskit/editor-plugin-decorations": "^1.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
@@ -47,18 +47,18 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/frontend-utilities": "^2.7.0",
-		"@atlaskit/icon": "^22.8.0",
+		"@atlaskit/icon": "^22.10.0",
 		"@atlaskit/link-analytics": "^8.3.0",
-		"@atlaskit/link-client-extension": "^1.10.0",
+		"@atlaskit/link-client-extension": "^1.11.0",
 		"@atlaskit/link-datasource": "^2.9.0",
 		"@atlaskit/linking-common": "^5.8.0",
 		"@atlaskit/linking-types": "^8.12.0",
 		"@atlaskit/menu": "2.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^11.1.0",
-		"@atlaskit/smart-card": "^27.11.0",
+		"@atlaskit/smart-card": "^27.12.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
@@ -104,6 +104,10 @@
 		}
 	},
 	"platform-feature-flags": {
+		"enable_datasource_react_sweet_state": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
 		"enable_datasource_nourl_edit_dropdown_datafetch": {
 			"type": "boolean"
 		},