@atlaskit/editor-plugin-card 2.9.1 → 2.9.3

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

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

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

@@ -2,19 +2,17 @@ import rafSchedule from 'raf-schd';
 import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DATASOURCE_INNER_CONTAINER_CLASSNAME } from '@atlaskit/editor-common/styles';
-import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { eventsFromTransaction } from '../analytics/events-from-tr';
 import { isLocalStorageKeyDiscovered } from '../common/local-storage';
-import { BlockCard } from '../nodeviews/blockCard';
-import { Datasource } from '../nodeviews/datasource';
-import { EmbedCard } from '../nodeviews/embedCard';
 import { InlineCardNodeView } from '../nodeviews/inlineCard';
+import { lazyBlockCardView } from '../nodeviews/lazy-block-card';
+import { lazyEmbedCardView } from '../nodeviews/lazy-embed-card';
 import { isDatasourceTableLayout } from '../ui/LayoutButton/utils';
-import { isBlockSupportedAtPosition, isDatasourceNode, isEmbedSupportedAtPosition } from '../utils';
+import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from '../utils';
 import { clearOverlayCandidate, setCardLayoutAndDatasourceTableRef, setDatasourceTableRef } from './actions';
 import { pluginKey } from './plugin-key';
 import reducer from './reducers';
@@ -246,59 +244,26 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
     props: {
       nodeViews: {
         inlineCard: inlineCardViewProducer,
-        blockCard: (node, view, getPos, decorations) => {
-          const {
-            portalProviderAPI,
-            eventDispatcher
-          } = pmPluginFactoryParams;
-          const reactComponentProps = {
-            platform,
-            actionOptions,
-            showServerActions,
-            pluginInjectionApi,
-            onClickCallback: options.onClickCallback
-          };
-          const isDatasource = isDatasourceNode(node);
-          if (isDatasource) {
-            var _node$attrs2, _node$attrs2$datasour;
-            if (options.allowDatasource && platform !== 'mobile' && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : (_node$attrs2$datasour = _node$attrs2.datasource) === null || _node$attrs2$datasour === void 0 ? void 0 : _node$attrs2$datasour.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();
-        },
-        embedCard: (node, view, getPos) => {
-          const {
-            portalProviderAPI,
-            eventDispatcher,
-            dispatchAnalyticsEvent
-          } = pmPluginFactoryParams;
-          const reactComponentProps = {
-            eventDispatcher,
-            allowResizing,
-            platform,
-            fullWidthMode,
-            dispatchAnalyticsEvent,
-            pluginInjectionApi,
-            actionOptions,
-            showServerActions,
-            onClickCallback: options.onClickCallback
-          };
-          return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
-        }
+        blockCard: lazyBlockCardView({
+          pmPluginFactoryParams,
+          platform,
+          actionOptions,
+          showServerActions,
+          pluginInjectionApi,
+          onClickCallback,
+          allowDatasource: options.allowDatasource,
+          inlineCardViewProducer
+        }),
+        embedCard: lazyEmbedCardView({
+          allowResizing,
+          platform,
+          fullWidthMode,
+          pmPluginFactoryParams,
+          pluginInjectionApi,
+          actionOptions,
+          showServerActions,
+          onClickCallback: options.onClickCallback
+        })
       },
       ...(enableInlineUpgradeFeatures && {
         handleKeyDown: view => {

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

@@ -13,9 +13,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';
@@ -205,4 +206,46 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
     }
   }]);
   return BlockCard;
-}(ReactNodeView);
+}(ReactNodeView);
+export var 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 = isDatasourceNode(node);
+    if (isDatasource) {
+      var _node$attrs2;
+      if (allowDatasource && platform !== 'mobile' && 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({
+          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/esm/nodeviews/embedCard.js

@@ -416,4 +416,31 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
     }
   }]);
   return EmbedCard;
-}(ReactNodeView);
+}(ReactNodeView);
+export var 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/esm/nodeviews/lazy-block-card.js

@@ -0,0 +1,20 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { blockCardNodeView } from './blockCard';
+export var lazyBlockCardView = function lazyBlockCardView(props) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return blockCardNodeView(props);
+  }
+  return withLazyLoading({
+    nodeName: 'blockCard',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = import( /* 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/esm/nodeviews/lazy-embed-card.js

@@ -0,0 +1,20 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { embedCardNodeView } from './embedCard';
+export var lazyEmbedCardView = function lazyEmbedCardView(props) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return embedCardNodeView(props);
+  }
+  return withLazyLoading({
+    nodeName: 'embedCard',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-embed-card-item-nodeview" */
+      './embedCard').then(function (_ref) {
+        var embedCardNodeView = _ref.embedCardNodeView;
+        return embedCardNodeView(props);
+      });
+      return result;
+    }
+  });
+};

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

@@ -6,19 +6,17 @@ import rafSchedule from 'raf-schd';
 import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DATASOURCE_INNER_CONTAINER_CLASSNAME } from '@atlaskit/editor-common/styles';
-import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { eventsFromTransaction } from '../analytics/events-from-tr';
 import { isLocalStorageKeyDiscovered } from '../common/local-storage';
-import { BlockCard } from '../nodeviews/blockCard';
-import { Datasource } from '../nodeviews/datasource';
-import { EmbedCard } from '../nodeviews/embedCard';
 import { InlineCardNodeView } from '../nodeviews/inlineCard';
+import { lazyBlockCardView } from '../nodeviews/lazy-block-card';
+import { lazyEmbedCardView } from '../nodeviews/lazy-embed-card';
 import { isDatasourceTableLayout } from '../ui/LayoutButton/utils';
-import { isBlockSupportedAtPosition, isDatasourceNode, isEmbedSupportedAtPosition } from '../utils';
+import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from '../utils';
 import { clearOverlayCandidate, setCardLayoutAndDatasourceTableRef, setDatasourceTableRef } from './actions';
 import { pluginKey } from './plugin-key';
 import reducer from './reducers';
@@ -242,55 +240,26 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
       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 = isDatasourceNode(node);
-            if (isDatasource) {
-              var _node$attrs2;
-              if (options.allowDatasource && platform !== 'mobile' && 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({
-                  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();
-          },
-          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(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
-          }
+          blockCard: lazyBlockCardView({
+            pmPluginFactoryParams: pmPluginFactoryParams,
+            platform: platform,
+            actionOptions: actionOptions,
+            showServerActions: showServerActions,
+            pluginInjectionApi: pluginInjectionApi,
+            onClickCallback: onClickCallback,
+            allowDatasource: options.allowDatasource,
+            inlineCardViewProducer: inlineCardViewProducer
+          }),
+          embedCard: 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/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) || ' ']];
+    }
+  });
+};