@atlaskit/editor-plugin-card 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-card
 
+## 1.8.0
+
+### Minor Changes
+
+- [#89840](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89840) [`9f256dde75e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f256dde75e9) - [ux] Implement onClickCallback plugin option to editor-plugin-card, allowing a callback to be executed when a smartlink is clicked, used by CCFE for live view to open smartlinks on-click
+
+### Patch Changes
+
+- [#91106](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91106) [`b6ffa30186b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6ffa30186b9) - Bump ADF-schema package to version 35.0.0
+- Updated dependencies
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/blockCard.js

@@ -35,7 +35,6 @@ var BlockCardComponent = exports.BlockCardComponent = /*#__PURE__*/function (_Re
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function () {});
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResolve", function (data) {
       var _this$props = _this.props,
         getPos = _this$props.getPos,
@@ -96,7 +95,8 @@ var BlockCardComponent = exports.BlockCardComponent = /*#__PURE__*/function (_Re
         cardContext = _this$props2.cardContext,
         platform = _this$props2.platform,
         actionOptions = _this$props2.actionOptions,
-        showServerActions = _this$props2.showServerActions;
+        showServerActions = _this$props2.showServerActions,
+        onClick = _this$props2.onClick;
       var _node$attrs = node.attrs,
         url = _node$attrs.url,
         data = _node$attrs.data;
@@ -106,7 +106,7 @@ var BlockCardComponent = exports.BlockCardComponent = /*#__PURE__*/function (_Re
         data: data,
         container: this.scrollContainer,
         appearance: "block",
-        onClick: this.onClick,
+        onClick: onClick,
         onResolve: this.onResolve,
         onError: this.onError,
         platform: platform,
@@ -170,14 +170,18 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
       var _this$reactComponentP = this.reactComponentProps,
         platform = _this$reactComponentP.platform,
         actionOptions = _this$reactComponentP.actionOptions,
-        showServerActions = _this$reactComponentP.showServerActions;
+        showServerActions = _this$reactComponentP.showServerActions,
+        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
+        onClickCallback = _this$reactComponentP.onClickCallback;
       return /*#__PURE__*/_react.default.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
         getPos: this.getPos,
         platform: platform,
         actionOptions: actionOptions,
-        showServerActions: showServerActions
+        showServerActions: showServerActions,
+        pluginInjectionApi: pluginInjectionApi,
+        onClickCallback: onClickCallback
       });
     }
   }]);

package/dist/cjs/nodeviews/embedCard.js

@@ -111,7 +111,6 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "embedIframeRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function () {});
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       hasPreview: true
     });
@@ -272,7 +271,8 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
         getPos = _this$props.getPos,
         pluginInjectionApi = _this$props.pluginInjectionApi,
         actionOptions = _this$props.actionOptions,
-        showServerActions = _this$props.showServerActions;
+        showServerActions = _this$props.showServerActions,
+        onClick = _this$props.onClick;
       var _node$attrs = node.attrs,
         url = _node$attrs.url,
         pctWidth = _node$attrs.width,
@@ -303,7 +303,7 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
         key: url,
         url: url,
         appearance: "embed",
-        onClick: this.onClick,
+        onClick: onClick,
         onResolve: this.onResolve,
         onError: this.onError,
         frameStyle: "show",
@@ -389,7 +389,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         platform = _this$reactComponentP.platform,
         fullWidthMode = _this$reactComponentP.fullWidthMode,
         dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent,
-        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi;
+        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
+        onClickCallback = _this$reactComponentP.onClickCallback;
       return /*#__PURE__*/_react.default.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -399,7 +400,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         platform: platform,
         fullWidthMode: fullWidthMode,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        onClickCallback: onClickCallback
       });
     }
   }]);

package/dist/cjs/nodeviews/genericCard.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,16 +14,45 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _doc = require("../pm-plugins/doc");
 var _state = require("../pm-plugins/util/state");
 var _utils2 = require("../utils");
+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" != _typeof(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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var WithClickHandler = function WithClickHandler(_ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    url = _ref.url,
+    onClickCallback = _ref.onClickCallback,
+    children = _ref.children;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var onClick = (0, _react.useCallback)(function (event) {
+    if (typeof onClickCallback === 'function') {
+      try {
+        onClickCallback({
+          event: event,
+          url: url
+        });
+      } catch (_unused) {}
+    }
+  }, [url, onClickCallback]);
+
+  // Setting `onClick` to `undefined` ensures clicks on smartcards navigate to the URL.
+  // If in view mode and not overriding with onClickCallback option, then allow smartlinks to navigate on click.
+  var allowNavigation = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' && !onClickCallback;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children({
+    onClick: allowNavigation ? undefined : onClick
+  }));
+};
 function Card(SmartCardComponent, UnsupportedComponent) {
   var _class;
   return _class = /*#__PURE__*/function (_React$Component) {
@@ -38,12 +68,17 @@ function Card(SmartCardComponent, UnsupportedComponent) {
       (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
         isError: false
       });
+      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function () {});
       return _this;
     }
     (0, _createClass2.default)(_class, [{
       key: "render",
       value: function render() {
-        var _getPluginState;
+        var _getPluginState,
+          _this2 = this;
+        var _this$props = this.props,
+          pluginInjectionApi = _this$props.pluginInjectionApi,
+          onClickCallback = _this$props.onClickCallback;
         var _titleUrlPairFromNode = (0, _utils2.titleUrlPairFromNode)(this.props.node),
           url = _titleUrlPairFromNode.url;
         if (url && !(0, _adfSchema.isSafeUrl)(url)) {
@@ -72,10 +107,24 @@ function Card(SmartCardComponent, UnsupportedComponent) {
             // Below is added for the future implementation of Linking Platform namespaced analytics context
             location: analyticsEditorAppearance
           }
-        }, /*#__PURE__*/_react.default.createElement(SmartCardComponent, (0, _extends2.default)({
+        }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.on-click-callback') ? /*#__PURE__*/_react.default.createElement(WithClickHandler, {
+          pluginInjectionApi: pluginInjectionApi,
+          onClickCallback: onClickCallback,
+          url: url
+        }, function (_ref2) {
+          var onClick = _ref2.onClick;
+          return /*#__PURE__*/_react.default.createElement(SmartCardComponent, (0, _extends2.default)({
+            key: url,
+            cardContext: cardContext
+          }, _this2.props, {
+            onClick: onClick
+          }));
+        }) : /*#__PURE__*/_react.default.createElement(SmartCardComponent, (0, _extends2.default)({
           key: url,
           cardContext: cardContext
-        }, this.props)));
+        }, this.props, {
+          onClick: this.onClick
+        })));
       }
     }, {
       key: "componentDidCatch",
@@ -91,11 +140,11 @@ function Card(SmartCardComponent, UnsupportedComponent) {
           this.setState({
             isError: true
           });
-          var _this$props = this.props,
-            view = _this$props.view,
-            node = _this$props.node,
-            getPos = _this$props.getPos,
-            pluginInjectionApi = _this$props.pluginInjectionApi;
+          var _this$props2 = this.props,
+            view = _this$props2.view,
+            node = _this$props2.node,
+            getPos = _this$props2.getPos,
+            pluginInjectionApi = _this$props2.pluginInjectionApi;
           var _titleUrlPairFromNode2 = (0, _utils2.titleUrlPairFromNode)(node),
             url = _titleUrlPairFromNode2.url;
           if (!getPos || typeof getPos === 'boolean') {

package/dist/cjs/nodeviews/inlineCard.js

@@ -38,7 +38,6 @@ var InlineCardComponent = exports.InlineCardComponent = /*#__PURE__*/function (_
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function () {});
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResolve", function (data) {
       var _this$props = _this.props,
         getPos = _this$props.getPos,
@@ -92,7 +91,8 @@ var InlineCardComponent = exports.InlineCardComponent = /*#__PURE__*/function (_
         cardContext = _this$props2.cardContext,
         actionOptions = _this$props2.actionOptions,
         showServerActions = _this$props2.showServerActions,
-        useAlternativePreloader = _this$props2.useAlternativePreloader;
+        useAlternativePreloader = _this$props2.useAlternativePreloader,
+        onClick = _this$props2.onClick;
       var _node$attrs = node.attrs,
         url = _node$attrs.url,
         data = _node$attrs.data;
@@ -103,7 +103,7 @@ var InlineCardComponent = exports.InlineCardComponent = /*#__PURE__*/function (_
         url: url,
         data: data,
         appearance: "inline",
-        onClick: this.onClick,
+        onClick: onClick,
         container: this.scrollContainer,
         onResolve: this.onResolve,
         onError: this.onError,
@@ -135,7 +135,8 @@ function InlineCardNodeView(props) {
     allowEmbeds = props.allowEmbeds,
     allowBlockCards = props.allowBlockCards,
     enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
-    pluginInjectionApi = props.pluginInjectionApi;
+    pluginInjectionApi = props.pluginInjectionApi,
+    onClickCallback = props.onClickCallback;
   if (!(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.inline-switcher')) {
     return /*#__PURE__*/_react.default.createElement(WrappedInlineCard, {
       node: node,
@@ -143,7 +144,9 @@ function InlineCardNodeView(props) {
       getPos: getPos,
       actionOptions: actionOptions,
       showServerActions: showServerActions,
-      useAlternativePreloader: useAlternativePreloader
+      useAlternativePreloader: useAlternativePreloader,
+      pluginInjectionApi: pluginInjectionApi,
+      onClickCallback: onClickCallback
     });
   }
   return /*#__PURE__*/_react.default.createElement(WrappedInlineCardWithAwareness, (0, _extends2.default)({
@@ -153,7 +156,8 @@ function InlineCardNodeView(props) {
     actionOptions: actionOptions,
     showServerActions: showServerActions,
     useAlternativePreloader: useAlternativePreloader,
-    pluginInjectionApi: pluginInjectionApi
+    pluginInjectionApi: pluginInjectionApi,
+    onClickCallback: onClickCallback
   }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards)));
 }
 var getAwarenessProps = function getAwarenessProps(editorState, getPos, allowEmbeds, allowBlockCards) {

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -27,7 +27,8 @@ var InlineCard = function InlineCard(_ref) {
     isPulseEnabled = _ref.isPulseEnabled,
     pluginInjectionApi = _ref.pluginInjectionApi,
     _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    onClick = _ref.onClick;
   var _node$attrs = node.attrs,
     url = _node$attrs.url,
     data = _node$attrs.data;
@@ -105,7 +106,7 @@ var InlineCard = function InlineCard(_ref) {
       url: url,
       data: data,
       appearance: "inline",
-      onClick: function onClick() {},
+      onClick: onClick,
       container: scrollContainer,
       onResolve: onResolve,
       onError: onError,
@@ -114,7 +115,7 @@ var InlineCard = function InlineCard(_ref) {
       showServerActions: showServerActions,
       isHovered: isHovered
     });
-  }, [data, isHovered, onError, onResolve, scrollContainer, url, useAlternativePreloader, actionOptions, showServerActions]);
+  }, [data, isHovered, onError, onResolve, scrollContainer, url, useAlternativePreloader, actionOptions, showServerActions, onClick]);
   var card = (0, _react.useMemo)(function () {
     return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/_react.default.createElement(_AwarenessWrapper.AwarenessWrapper, {
       isOverlayEnabled: isOverlayEnabled,

package/dist/cjs/pm-plugins/main.js

@@ -59,7 +59,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
       cardPluginEvents = options.cardPluginEvents,
       showUpgradeDiscoverability = options.showUpgradeDiscoverability,
       allowEmbeds = options.allowEmbeds,
-      allowBlockCards = options.allowBlockCards;
+      allowBlockCards = options.allowBlockCards,
+      onClickCallback = options.onClickCallback;
     var enableInlineUpgradeFeatures = !!showUpgradeDiscoverability && platform !== 'mobile';
     var shouldUseUpgradeFeatures = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.inline-switcher') && enableInlineUpgradeFeatures;
     var inlineCardViewProducer = (0, _reactNodeView.getInlineNodeViewProducer)({
@@ -72,7 +73,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
         enableInlineUpgradeFeatures: enableInlineUpgradeFeatures,
         allowEmbeds: allowEmbeds,
         allowBlockCards: allowBlockCards,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        onClickCallback: onClickCallback
       }
     });
     return new _safePlugin.SafePlugin({
@@ -234,7 +236,9 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             var reactComponentProps = {
               platform: platform,
               actionOptions: actionOptions,
-              showServerActions: showServerActions
+              showServerActions: showServerActions,
+              pluginInjectionApi: pluginInjectionApi,
+              onClickCallback: options.onClickCallback
             };
             var hasIntlContext = true;
             var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.datasource);
@@ -272,7 +276,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
               dispatchAnalyticsEvent: dispatchAnalyticsEvent,
               pluginInjectionApi: pluginInjectionApi,
               actionOptions: actionOptions,
-              showServerActions: showServerActions
+              showServerActions: showServerActions,
+              onClickCallback: options.onClickCallback
             };
             var hasIntlContext = true;
             return new _embedCard.EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();

package/dist/es2019/nodeviews/blockCard.js

@@ -13,7 +13,6 @@ import { Card } from './genericCard';
 export class BlockCardComponent extends React.PureComponent {
   constructor(...args) {
     super(...args);
-    _defineProperty(this, "onClick", () => {});
     _defineProperty(this, "onResolve", data => {
       const {
         getPos,
@@ -75,7 +74,8 @@ export class BlockCardComponent extends React.PureComponent {
       cardContext,
       platform,
       actionOptions,
-      showServerActions
+      showServerActions,
+      onClick
     } = this.props;
     const {
       url,
@@ -87,7 +87,7 @@ export class BlockCardComponent extends React.PureComponent {
       data: data,
       container: this.scrollContainer,
       appearance: "block",
-      onClick: this.onClick,
+      onClick: onClick,
       onResolve: this.onResolve,
       onError: this.onError,
       platform: platform,
@@ -135,7 +135,9 @@ export class BlockCard extends ReactNodeView {
     const {
       platform,
       actionOptions,
-      showServerActions
+      showServerActions,
+      pluginInjectionApi,
+      onClickCallback
     } = this.reactComponentProps;
     return /*#__PURE__*/React.createElement(WrappedBlockCard, {
       node: this.node,
@@ -143,7 +145,9 @@ export class BlockCard extends ReactNodeView {
       getPos: this.getPos,
       platform: platform,
       actionOptions: actionOptions,
-      showServerActions: showServerActions
+      showServerActions: showServerActions,
+      pluginInjectionApi: pluginInjectionApi,
+      onClickCallback: onClickCallback
     });
   }
 }

package/dist/es2019/nodeviews/embedCard.js

@@ -88,7 +88,6 @@ export class EmbedCardComponent extends React.PureComponent {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "embedIframeRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "onClick", () => {});
     _defineProperty(this, "state", {
       hasPreview: true
     });
@@ -258,7 +257,8 @@ export class EmbedCardComponent extends React.PureComponent {
       getPos,
       pluginInjectionApi,
       actionOptions,
-      showServerActions
+      showServerActions,
+      onClick
     } = this.props;
     let {
       url,
@@ -292,7 +292,7 @@ export class EmbedCardComponent extends React.PureComponent {
       key: url,
       url: url,
       appearance: "embed",
-      onClick: this.onClick,
+      onClick: onClick,
       onResolve: this.onResolve,
       onError: this.onError,
       frameStyle: "show",
@@ -364,7 +364,8 @@ export class EmbedCard extends ReactNodeView {
       platform,
       fullWidthMode,
       dispatchAnalyticsEvent,
-      pluginInjectionApi
+      pluginInjectionApi,
+      onClickCallback
     } = this.reactComponentProps;
     return /*#__PURE__*/React.createElement(WrappedBlockCard, {
       node: this.node,
@@ -375,7 +376,8 @@ export class EmbedCard extends ReactNodeView {
       platform: platform,
       fullWidthMode: fullWidthMode,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      onClickCallback: onClickCallback
     });
   }
 }

package/dist/es2019/nodeviews/genericCard.js

@@ -1,13 +1,42 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
 import { getPluginState } from '../pm-plugins/util/state';
 import { titleUrlPairFromNode } from '../utils';
+const WithClickHandler = ({
+  pluginInjectionApi,
+  url,
+  onClickCallback,
+  children
+}) => {
+  const {
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
+  const onClick = useCallback(event => {
+    if (typeof onClickCallback === 'function') {
+      try {
+        onClickCallback({
+          event,
+          url
+        });
+      } catch {}
+    }
+  }, [url, onClickCallback]);
+
+  // Setting `onClick` to `undefined` ensures clicks on smartcards navigate to the URL.
+  // If in view mode and not overriding with onClickCallback option, then allow smartlinks to navigate on click.
+  const allowNavigation = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' && !onClickCallback;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children({
+    onClick: allowNavigation ? undefined : onClick
+  }));
+};
 export function Card(SmartCardComponent, UnsupportedComponent) {
   var _class;
   return _class = class extends React.Component {
@@ -16,9 +45,14 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
       _defineProperty(this, "state", {
         isError: false
       });
+      _defineProperty(this, "onClick", () => {});
     }
     render() {
       var _getPluginState;
+      const {
+        pluginInjectionApi,
+        onClickCallback
+      } = this.props;
       const {
         url
       } = titleUrlPairFromNode(this.props.node);
@@ -48,10 +82,23 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
           // Below is added for the future implementation of Linking Platform namespaced analytics context
           location: analyticsEditorAppearance
         }
-      }, /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
+      }, getBooleanFF('platform.linking-platform.smart-card.on-click-callback') ? /*#__PURE__*/React.createElement(WithClickHandler, {
+        pluginInjectionApi: pluginInjectionApi,
+        onClickCallback: onClickCallback,
+        url: url
+      }, ({
+        onClick
+      }) => /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
+        key: url,
+        cardContext: cardContext
+      }, this.props, {
+        onClick: onClick
+      }))) : /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
         key: url,
         cardContext: cardContext
-      }, this.props)));
+      }, this.props, {
+        onClick: this.onClick
+      })));
     }
     componentDidCatch(error) {
       const maybeAPIError = error;

package/dist/es2019/nodeviews/inlineCard.js

@@ -16,7 +16,6 @@ import { InlineCardWithAwareness } from './inlineCardWithAwareness';
 export class InlineCardComponent extends React.PureComponent {
   constructor(...args) {
     super(...args);
-    _defineProperty(this, "onClick", () => {});
     _defineProperty(this, "onResolve", data => {
       const {
         getPos,
@@ -72,7 +71,8 @@ export class InlineCardComponent extends React.PureComponent {
       cardContext,
       actionOptions,
       showServerActions,
-      useAlternativePreloader
+      useAlternativePreloader,
+      onClick
     } = this.props;
     const {
       url,
@@ -85,7 +85,7 @@ export class InlineCardComponent extends React.PureComponent {
       url: url,
       data: data,
       appearance: "inline",
-      onClick: this.onClick,
+      onClick: onClick,
       container: this.scrollContainer,
       onResolve: this.onResolve,
       onError: this.onError,
@@ -116,7 +116,8 @@ export function InlineCardNodeView(props) {
     allowEmbeds,
     allowBlockCards,
     enableInlineUpgradeFeatures,
-    pluginInjectionApi
+    pluginInjectionApi,
+    onClickCallback
   } = props;
   if (!getBooleanFF('platform.linking-platform.smart-card.inline-switcher')) {
     return /*#__PURE__*/React.createElement(WrappedInlineCard, {
@@ -125,7 +126,9 @@ export function InlineCardNodeView(props) {
       getPos: getPos,
       actionOptions: actionOptions,
       showServerActions: showServerActions,
-      useAlternativePreloader: useAlternativePreloader
+      useAlternativePreloader: useAlternativePreloader,
+      pluginInjectionApi: pluginInjectionApi,
+      onClickCallback: onClickCallback
     });
   }
   return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
@@ -135,7 +138,8 @@ export function InlineCardNodeView(props) {
     actionOptions: actionOptions,
     showServerActions: showServerActions,
     useAlternativePreloader: useAlternativePreloader,
-    pluginInjectionApi: pluginInjectionApi
+    pluginInjectionApi: pluginInjectionApi,
+    onClickCallback: onClickCallback
   }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards)));
 }
 const getAwarenessProps = (editorState, getPos, allowEmbeds, allowBlockCards) => {

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -15,7 +15,8 @@ const InlineCard = ({
   isOverlayEnabled,
   isPulseEnabled,
   pluginInjectionApi,
-  isSelected = false
+  isSelected = false,
+  onClick
 }) => {
   const {
     url,
@@ -85,7 +86,7 @@ const InlineCard = ({
     url: url,
     data: data,
     appearance: "inline",
-    onClick: () => {},
+    onClick: onClick,
     container: scrollContainer,
     onResolve: onResolve,
     onError: onError,
@@ -93,7 +94,7 @@ const InlineCard = ({
     actionOptions: actionOptions,
     showServerActions: showServerActions,
     isHovered: isHovered
-  }), [data, isHovered, onError, onResolve, scrollContainer, url, useAlternativePreloader, actionOptions, showServerActions]);
+  }), [data, isHovered, onError, onResolve, scrollContainer, url, useAlternativePreloader, actionOptions, showServerActions, onClick]);
   const card = useMemo(() => {
     return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/React.createElement(AwarenessWrapper, {
       isOverlayEnabled: isOverlayEnabled,

package/dist/es2019/pm-plugins/main.js

@@ -43,7 +43,8 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
     cardPluginEvents,
     showUpgradeDiscoverability,
     allowEmbeds,
-    allowBlockCards
+    allowBlockCards,
+    onClickCallback
   } = options;
   const enableInlineUpgradeFeatures = !!showUpgradeDiscoverability && platform !== 'mobile';
   const shouldUseUpgradeFeatures = getBooleanFF('platform.linking-platform.smart-card.inline-switcher') && enableInlineUpgradeFeatures;
@@ -57,7 +58,8 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
       enableInlineUpgradeFeatures,
       allowEmbeds,
       allowBlockCards,
-      pluginInjectionApi
+      pluginInjectionApi,
+      onClickCallback
     }
   });
   return new SafePlugin({
@@ -226,7 +228,9 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
           const reactComponentProps = {
             platform,
             actionOptions,
-            showServerActions
+            showServerActions,
+            pluginInjectionApi,
+            onClickCallback: options.onClickCallback
           };
           const hasIntlContext = true;
           const isDatasource = !!(node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.datasource);
@@ -266,7 +270,8 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
             dispatchAnalyticsEvent,
             pluginInjectionApi,
             actionOptions,
-            showServerActions
+            showServerActions,
+            onClickCallback: options.onClickCallback
           };
           const hasIntlContext = true;
           return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();