@atlaskit/editor-plugin-card 2.9.1 → 2.9.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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
+
+- [#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
 
 ### Patch Changes

package/dist/cjs/nodeviews/blockCard.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BlockCardComponent = exports.BlockCard = void 0;
+exports.blockCardNodeView = exports.BlockCardComponent = exports.BlockCard = void 0;
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -21,6 +21,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
+var _datasource = require("../nodeviews/datasource");
 var _actions = require("../pm-plugins/actions");
 var _utils2 = require("../utils");
 var _genericCard = require("./genericCard");
@@ -211,4 +212,46 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
     }
   }]);
   return BlockCard;
-}(_reactNodeView.default);
+}(_reactNodeView.default);
+var blockCardNodeView = exports.blockCardNodeView = function blockCardNodeView(_ref3) {
+  var pmPluginFactoryParams = _ref3.pmPluginFactoryParams,
+    platform = _ref3.platform,
+    actionOptions = _ref3.actionOptions,
+    showServerActions = _ref3.showServerActions,
+    pluginInjectionApi = _ref3.pluginInjectionApi,
+    onClickCallback = _ref3.onClickCallback,
+    allowDatasource = _ref3.allowDatasource,
+    inlineCardViewProducer = _ref3.inlineCardViewProducer;
+  return function (node, view, getPos, decorations) {
+    var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
+      eventDispatcher = pmPluginFactoryParams.eventDispatcher;
+    var reactComponentProps = {
+      platform: platform,
+      actionOptions: actionOptions,
+      showServerActions: showServerActions,
+      pluginInjectionApi: pluginInjectionApi,
+      onClickCallback: onClickCallback
+    };
+    var isDatasource = (0, _utils2.isDatasourceNode)(node);
+    if (isDatasource) {
+      var _node$attrs2;
+      if (allowDatasource && platform !== 'mobile' && (0, _utils.canRenderDatasource)(node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 || (_node$attrs2 = _node$attrs2.datasource) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.id)) {
+        var datasourcePosition = typeof getPos === 'function' && getPos();
+        var datasourceResolvedPosition = datasourcePosition && view.state.doc.resolve(datasourcePosition);
+        var isNodeNested = !!(datasourceResolvedPosition && datasourceResolvedPosition.depth > 0);
+        return new _datasource.Datasource({
+          node: node,
+          view: view,
+          getPos: getPos,
+          portalProviderAPI: portalProviderAPI,
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi,
+          isNodeNested: isNodeNested
+        }).init();
+      } else {
+        return inlineCardViewProducer(node, view, getPos, decorations);
+      }
+    }
+    return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
+  };
+};

package/dist/cjs/nodeviews/embedCard.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EmbedCardComponent = exports.EmbedCard = void 0;
+exports.embedCardNodeView = exports.EmbedCardComponent = exports.EmbedCard = void 0;
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -423,4 +423,31 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
     }
   }]);
   return EmbedCard;
-}(_reactNodeView.default);
+}(_reactNodeView.default);
+var embedCardNodeView = exports.embedCardNodeView = function embedCardNodeView(_ref4) {
+  var allowResizing = _ref4.allowResizing,
+    platform = _ref4.platform,
+    fullWidthMode = _ref4.fullWidthMode,
+    pmPluginFactoryParams = _ref4.pmPluginFactoryParams,
+    pluginInjectionApi = _ref4.pluginInjectionApi,
+    actionOptions = _ref4.actionOptions,
+    showServerActions = _ref4.showServerActions,
+    onClickCallback = _ref4.onClickCallback;
+  return function (node, view, getPos) {
+    var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
+      eventDispatcher = pmPluginFactoryParams.eventDispatcher,
+      dispatchAnalyticsEvent = pmPluginFactoryParams.dispatchAnalyticsEvent;
+    var reactComponentProps = {
+      eventDispatcher: eventDispatcher,
+      allowResizing: allowResizing,
+      platform: platform,
+      fullWidthMode: fullWidthMode,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      actionOptions: actionOptions,
+      showServerActions: showServerActions,
+      onClickCallback: onClickCallback
+    };
+    return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
+  };
+};

package/dist/cjs/nodeviews/lazy-block-card.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyBlockCardView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _blockCard = require("./blockCard");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var lazyBlockCardView = exports.lazyBlockCardView = function lazyBlockCardView(props) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return (0, _blockCard.blockCardNodeView)(props);
+  }
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'blockCard',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-tasks-and-decisions_task-item-nodeview" */
+        './blockCard'));
+      }).then(function (_ref) {
+        var blockCardNodeView = _ref.blockCardNodeView;
+        return blockCardNodeView(props);
+      });
+      return result;
+    }
+  });
+};

package/dist/cjs/nodeviews/lazy-embed-card.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyEmbedCardView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _embedCard = require("./embedCard");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var lazyEmbedCardView = exports.lazyEmbedCardView = function lazyEmbedCardView(props) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return (0, _embedCard.embedCardNodeView)(props);
+  }
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'embedCard',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-embed-card-item-nodeview" */
+        './embedCard'));
+      }).then(function (_ref) {
+        var embedCardNodeView = _ref.embedCardNodeView;
+        return embedCardNodeView(props);
+      });
+      return result;
+    }
+  });
+};

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/pm-plugins/main.js

@@ -18,19 +18,17 @@ var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactNodeView = require("@atlaskit/editor-common/react-node-view");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _styles = require("@atlaskit/editor-common/styles");
-var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _linkingCommon = require("@atlaskit/linking-common");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _eventsFromTr = require("../analytics/events-from-tr");
 var _localStorage = require("../common/local-storage");
-var _blockCard = require("../nodeviews/blockCard");
-var _datasource = require("../nodeviews/datasource");
-var _embedCard = require("../nodeviews/embedCard");
 var _inlineCard = require("../nodeviews/inlineCard");
-var _utils3 = require("../ui/LayoutButton/utils");
-var _utils4 = require("../utils");
+var _lazyBlockCard = require("../nodeviews/lazy-block-card");
+var _lazyEmbedCard = require("../nodeviews/lazy-embed-card");
+var _utils2 = require("../ui/LayoutButton/utils");
+var _utils3 = require("../utils");
 var _actions = require("./actions");
 var _pluginKey = require("./plugin-key");
 var _reducers = _interopRequireDefault(require("./reducers"));
@@ -152,8 +150,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             return newState;
           }
           var linkPosition = pluginState.requests[0].pos;
-          var canBeUpgradedToBlock = allowBlockCards && (0, _utils4.isBlockSupportedAtPosition)(linkPosition, prevEditorState, 'inline');
-          var canBeUpgradedToEmbed = allowEmbeds && (0, _utils4.isEmbedSupportedAtPosition)(linkPosition, prevEditorState, 'inline');
+          var canBeUpgradedToBlock = allowBlockCards && (0, _utils3.isBlockSupportedAtPosition)(linkPosition, prevEditorState, 'inline');
+          var canBeUpgradedToEmbed = allowEmbeds && (0, _utils3.isEmbedSupportedAtPosition)(linkPosition, prevEditorState, 'inline');
           if (canBeUpgradedToBlock || canBeUpgradedToEmbed) {
             newState.overlayCandidatePosition = linkPosition;
           }
@@ -187,13 +185,13 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             var isBlockCardSelected = selection instanceof _state.NodeSelection && ((_selection$node = selection.node) === null || _selection$node === void 0 ? void 0 : _selection$node.type) === schema.nodes.blockCard;
             if (isBlockCardSelected) {
               var _findDomRefAtPos, _node$attrs;
-              var datasourceTableRef = (_findDomRefAtPos = (0, _utils2.findDomRefAtPos)(selection.from, domAtPos)) === null || _findDomRefAtPos === void 0 ? void 0 : _findDomRefAtPos.querySelector(".".concat(_styles.DATASOURCE_INNER_CONTAINER_CLASSNAME));
+              var datasourceTableRef = (_findDomRefAtPos = (0, _utils.findDomRefAtPos)(selection.from, domAtPos)) === null || _findDomRefAtPos === void 0 ? void 0 : _findDomRefAtPos.querySelector(".".concat(_styles.DATASOURCE_INNER_CONTAINER_CLASSNAME));
               var node = selection.node;
               var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.datasource);
               var shouldUpdateTableRef = datasourceTableRef && (currentState === null || currentState === void 0 ? void 0 : currentState.datasourceTableRef) !== datasourceTableRef;
               if (isDatasource && shouldUpdateTableRef) {
                 // since we use the plugin state, which is a shared state, we need to update the datasourceTableRef, layout on each selection
-                var layout = (0, _utils3.isDatasourceTableLayout)(node.attrs.layout) ? node.attrs.layout : _linkingCommon.DATASOURCE_DEFAULT_LAYOUT;
+                var layout = (0, _utils2.isDatasourceTableLayout)(node.attrs.layout) ? node.attrs.layout : _linkingCommon.DATASOURCE_DEFAULT_LAYOUT;
                 var isNested = selection.$anchor.depth > 0;
 
                 // we want to disable resize button when datasource table is nested by not setting then datasourceTableRef on selection
@@ -255,55 +253,26 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
       props: _objectSpread({
         nodeViews: {
           inlineCard: inlineCardViewProducer,
-          blockCard: function blockCard(node, view, getPos, decorations) {
-            var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
-              eventDispatcher = pmPluginFactoryParams.eventDispatcher;
-            var reactComponentProps = {
-              platform: platform,
-              actionOptions: actionOptions,
-              showServerActions: showServerActions,
-              pluginInjectionApi: pluginInjectionApi,
-              onClickCallback: options.onClickCallback
-            };
-            var isDatasource = (0, _utils4.isDatasourceNode)(node);
-            if (isDatasource) {
-              var _node$attrs2;
-              if (options.allowDatasource && platform !== 'mobile' && (0, _utils.canRenderDatasource)(node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 || (_node$attrs2 = _node$attrs2.datasource) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.id)) {
-                var datasourcePosition = typeof getPos === 'function' && getPos();
-                var datasourceResolvedPosition = datasourcePosition && view.state.doc.resolve(datasourcePosition);
-                var isNodeNested = !!(datasourceResolvedPosition && datasourceResolvedPosition.depth > 0);
-                return new _datasource.Datasource({
-                  node: node,
-                  view: view,
-                  getPos: getPos,
-                  portalProviderAPI: portalProviderAPI,
-                  eventDispatcher: eventDispatcher,
-                  pluginInjectionApi: pluginInjectionApi,
-                  isNodeNested: isNodeNested
-                }).init();
-              } else {
-                return inlineCardViewProducer(node, view, getPos, decorations);
-              }
-            }
-            return new _blockCard.BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
-          },
-          embedCard: function embedCard(node, view, getPos) {
-            var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
-              eventDispatcher = pmPluginFactoryParams.eventDispatcher,
-              dispatchAnalyticsEvent = pmPluginFactoryParams.dispatchAnalyticsEvent;
-            var reactComponentProps = {
-              eventDispatcher: eventDispatcher,
-              allowResizing: allowResizing,
-              platform: platform,
-              fullWidthMode: fullWidthMode,
-              dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-              pluginInjectionApi: pluginInjectionApi,
-              actionOptions: actionOptions,
-              showServerActions: showServerActions,
-              onClickCallback: options.onClickCallback
-            };
-            return new _embedCard.EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
-          }
+          blockCard: (0, _lazyBlockCard.lazyBlockCardView)({
+            pmPluginFactoryParams: pmPluginFactoryParams,
+            platform: platform,
+            actionOptions: actionOptions,
+            showServerActions: showServerActions,
+            pluginInjectionApi: pluginInjectionApi,
+            onClickCallback: onClickCallback,
+            allowDatasource: options.allowDatasource,
+            inlineCardViewProducer: inlineCardViewProducer
+          }),
+          embedCard: (0, _lazyEmbedCard.lazyEmbedCardView)({
+            allowResizing: allowResizing,
+            platform: platform,
+            fullWidthMode: fullWidthMode,
+            pmPluginFactoryParams: pmPluginFactoryParams,
+            pluginInjectionApi: pluginInjectionApi,
+            actionOptions: actionOptions,
+            showServerActions: showServerActions,
+            onClickCallback: options.onClickCallback
+          })
         }
       }, enableInlineUpgradeFeatures && {
         handleKeyDown: function handleKeyDown(view) {

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/nodeviews/blockCard.js

@@ -4,9 +4,10 @@ import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
-import { browser } from '@atlaskit/editor-common/utils';
+import { browser, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
+import { Datasource } from '../nodeviews/datasource';
 import { registerCard } from '../pm-plugins/actions';
 import { isDatasourceNode } from '../utils';
 import { Card } from './genericCard';
@@ -168,4 +169,47 @@ export class BlockCard extends ReactNodeView {
     var _this$unsubscribe;
     (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
   }
-}
+}
+export const blockCardNodeView = ({
+  pmPluginFactoryParams,
+  platform,
+  actionOptions,
+  showServerActions,
+  pluginInjectionApi,
+  onClickCallback,
+  allowDatasource,
+  inlineCardViewProducer
+}) => (node, view, getPos, decorations) => {
+  const {
+    portalProviderAPI,
+    eventDispatcher
+  } = pmPluginFactoryParams;
+  const reactComponentProps = {
+    platform,
+    actionOptions,
+    showServerActions,
+    pluginInjectionApi,
+    onClickCallback: onClickCallback
+  };
+  const isDatasource = isDatasourceNode(node);
+  if (isDatasource) {
+    var _node$attrs, _node$attrs$datasourc;
+    if (allowDatasource && platform !== 'mobile' && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : (_node$attrs$datasourc = _node$attrs.datasource) === null || _node$attrs$datasourc === void 0 ? void 0 : _node$attrs$datasourc.id)) {
+      const datasourcePosition = typeof getPos === 'function' && getPos();
+      const datasourceResolvedPosition = datasourcePosition && view.state.doc.resolve(datasourcePosition);
+      const isNodeNested = !!(datasourceResolvedPosition && datasourceResolvedPosition.depth > 0);
+      return new Datasource({
+        node,
+        view,
+        getPos,
+        portalProviderAPI,
+        eventDispatcher,
+        pluginInjectionApi,
+        isNodeNested
+      }).init();
+    } else {
+      return inlineCardViewProducer(node, view, getPos, decorations);
+    }
+  }
+  return new BlockCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
+};

package/dist/es2019/nodeviews/embedCard.js

@@ -391,4 +391,32 @@ export class EmbedCard extends ReactNodeView {
     var _this$unsubscribe;
     (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
   }
-}
+}
+export const embedCardNodeView = ({
+  allowResizing,
+  platform,
+  fullWidthMode,
+  pmPluginFactoryParams,
+  pluginInjectionApi,
+  actionOptions,
+  showServerActions,
+  onClickCallback
+}) => (node, view, getPos) => {
+  const {
+    portalProviderAPI,
+    eventDispatcher,
+    dispatchAnalyticsEvent
+  } = pmPluginFactoryParams;
+  const reactComponentProps = {
+    eventDispatcher,
+    allowResizing,
+    platform,
+    fullWidthMode,
+    dispatchAnalyticsEvent,
+    pluginInjectionApi,
+    actionOptions,
+    showServerActions,
+    onClickCallback: onClickCallback
+  };
+  return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
+};

package/dist/es2019/nodeviews/lazy-block-card.js

@@ -0,0 +1,21 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { blockCardNodeView } from './blockCard';
+export const lazyBlockCardView = props => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return blockCardNodeView(props);
+  }
+  return withLazyLoading({
+    nodeName: 'blockCard',
+    getNodeViewOptions: () => {},
+    loader: () => {
+      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-tasks-and-decisions_task-item-nodeview" */
+      './blockCard').then(({
+        blockCardNodeView
+      }) => {
+        return blockCardNodeView(props);
+      });
+      return result;
+    }
+  });
+};