@atlaskit/editor-plugin-card 1.6.2 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @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
+
+- [#89386](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89386) [`91d0fdc31828`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/91d0fdc31828) - Updates card plugin to leverage hyperlink plugins addToolbarItems action in order to inject link preferences button into the hyperlink floating toolbar. Also adds support to configure the link via card plugin options (smart links). Requires platform feature flag `platform.editor.card.inject-settings-button`.
+
+  Example usage:
+
+  ```tsx
+  <Editor
+    linking={{ smartLinks: { userPreferencesLink: 'https://example.com' } }}
+    {...restProps}
+  />
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.6.2
 
 ### Patch 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/cjs/pm-plugins/mountHyperlink.js

@@ -8,6 +8,8 @@ exports.mountHyperlinkPlugin = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _toolbar = require("../toolbar");
 var _HyperlinkToolbarAppearance = require("../ui/HyperlinkToolbarAppearance");
 var _ToolbarViewedEvent = require("../ui/ToolbarViewedEvent");
 var getToolbarViewedItem = function getToolbarViewedItem(link) {
@@ -56,6 +58,25 @@ var mountHyperlinkPlugin = exports.mountHyperlinkPlugin = function mountHyperlin
           view: editorView,
           skipAnalytics: true
         });
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.card.inject-settings-button')) {
+          /**
+           * Require either provider to be supplied (controls link preferences)
+           * Or explicit user preferences config in order to enable button
+           */
+          if (options.provider || options.userPreferencesLink) {
+            var _pluginInjectionApi$h2;
+            pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h2 = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h2 === void 0 || _pluginInjectionApi$h2.actions.addToolbarItems({
+              items: function items(_, intl) {
+                var _pluginInjectionApi$a2;
+                return [{
+                  type: 'separator'
+                }, (0, _toolbar.getHyperlinkToolbarSettingsButton)(intl, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions, options.userPreferencesLink)];
+              },
+              placement: 'end',
+              view: editorView
+            });
+          }
+        }
       });
       return {};
     }

package/dist/cjs/toolbar.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.visitCardLink = exports.shouldRenderToolbarPulse = exports.removeCard = exports.openLinkSettings = exports.floatingToolbar = void 0;
+exports.visitCardLink = exports.shouldRenderToolbarPulse = exports.removeCard = exports.openLinkSettings = exports.getSettingsButtonGroup = exports.getSettingsButton = exports.getHyperlinkToolbarSettingsButton = exports.floatingToolbar = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -83,12 +83,12 @@ var visitCardLink = exports.visitCardLink = function visitCardLink(editorAnalyti
     return true;
   };
 };
-var openLinkSettings = exports.openLinkSettings = function openLinkSettings(editorAnalyticsApi) {
+var openLinkSettings = exports.openLinkSettings = function openLinkSettings(editorAnalyticsApi, userPreferencesLink) {
   return function (state, dispatch) {
     if (!(state.selection instanceof _state.NodeSelection)) {
       return false;
     }
-    window.open((0, _link.getLinkPreferencesURLFromENV)());
+    window.open(userPreferencesLink || (0, _link.getLinkPreferencesURLFromENV)());
     if (dispatch) {
       var tr = state.tr,
         type = state.selection.node.type;
@@ -255,7 +255,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         }, {
           type: 'separator'
         }]
-      }], (0, _toConsumableArray2.default)(getSettingsButtonGroup(intl, editorAnalyticsApi)), [{
+      }], (0, _toConsumableArray2.default)(getSettingsButtonGroup(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)), [{
         id: 'editor.link.delete',
         focusEditoronEnter: true,
         type: 'button',
@@ -355,14 +355,28 @@ var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inli
     type: 'separator'
   }] : [];
 };
-var getSettingsButtonGroup = function getSettingsButtonGroup(intl, editorAnalyticsApi) {
-  return [{
+var getHyperlinkToolbarSettingsButton = exports.getHyperlinkToolbarSettingsButton = function getHyperlinkToolbarSettingsButton(intl, editorAnalyticsApi, userPreferencesLink) {
+  return {
     id: 'editor.link.settings',
     type: 'button',
     icon: _settings.default,
     title: intl.formatMessage(_messages.linkToolbarMessages.settingsLink),
-    onClick: openLinkSettings(editorAnalyticsApi)
-  }, {
+    onClick: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.card.inject-settings-button') ? openLinkSettings(editorAnalyticsApi, userPreferencesLink) : openLinkSettings(editorAnalyticsApi, undefined),
+    href: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.card.inject-settings-button') ? userPreferencesLink || (0, _link.getLinkPreferencesURLFromENV)() : (0, _link.getLinkPreferencesURLFromENV)(),
+    target: '_blank'
+  };
+};
+var getSettingsButton = exports.getSettingsButton = function getSettingsButton(intl, editorAnalyticsApi, userPreferencesLink) {
+  return {
+    id: 'editor.link.settings',
+    type: 'button',
+    icon: _settings.default,
+    title: intl.formatMessage(_messages.linkToolbarMessages.settingsLink),
+    onClick: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.card.inject-settings-button') ? openLinkSettings(editorAnalyticsApi, userPreferencesLink) : openLinkSettings(editorAnalyticsApi, undefined)
+  };
+};
+var getSettingsButtonGroup = exports.getSettingsButtonGroup = function getSettingsButtonGroup(intl, editorAnalyticsApi, userPreferencesLink) {
+  return [getSettingsButton(intl, editorAnalyticsApi, userPreferencesLink), {
     type: 'separator'
   }];
 };
@@ -458,7 +472,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     }, {
       type: 'separator'
     }]
-  }].concat((0, _toConsumableArray2.default)(getSettingsButtonGroup(intl, editorAnalyticsApi)), [{
+  }].concat((0, _toConsumableArray2.default)(getSettingsButtonGroup(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink)), [{
     id: 'editor.link.delete',
     focusEditoronEnter: true,
     type: 'button',

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;