@atlaskit/editor-plugin-card 1.6.2 → 1.8.0

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();

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getHyperlinkToolbarSettingsButton } from '../toolbar';
 import { HyperlinkToolbarAppearance } from '../ui/HyperlinkToolbarAppearance';
 import { ToolbarViewedEvent } from '../ui/ToolbarViewedEvent';
 const getToolbarViewedItem = link => {
@@ -44,6 +46,25 @@ export const mountHyperlinkPlugin = (pluginInjectionApi, options) => {
           view: editorView,
           skipAnalytics: true
         });
+        if (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$h3;
+            pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$h3 = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h3 === void 0 ? void 0 : _pluginInjectionApi$h3.actions.addToolbarItems({
+              items: (_, intl) => {
+                var _pluginInjectionApi$a2;
+                return [{
+                  type: 'separator'
+                }, getHyperlinkToolbarSettingsButton(intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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/es2019/toolbar.js

@@ -72,11 +72,11 @@ export const visitCardLink = editorAnalyticsApi => (state, dispatch) => {
   }
   return true;
 };
-export const openLinkSettings = editorAnalyticsApi => (state, dispatch) => {
+export const openLinkSettings = (editorAnalyticsApi, userPreferencesLink) => (state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
   }
-  window.open(getLinkPreferencesURLFromENV());
+  window.open(userPreferencesLink || getLinkPreferencesURLFromENV());
   if (dispatch) {
     const {
       tr,
@@ -249,7 +249,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       }, {
         type: 'separator'
       }]
-    }, ...getSettingsButtonGroup(intl, editorAnalyticsApi), {
+    }, ...getSettingsButtonGroup(intl, editorAnalyticsApi, cardOptions.userPreferencesLink), {
       id: 'editor.link.delete',
       focusEditoronEnter: true,
       type: 'button',
@@ -346,14 +346,28 @@ const getUnlinkButtonGroup = (state, intl, node, inlineCard, editorAnalyticsApi)
     type: 'separator'
   }] : [];
 };
-const getSettingsButtonGroup = (intl, editorAnalyticsApi) => {
-  return [{
+export const getHyperlinkToolbarSettingsButton = (intl, editorAnalyticsApi, userPreferencesLink) => {
+  return {
     id: 'editor.link.settings',
     type: 'button',
     icon: CogIcon,
     title: intl.formatMessage(linkToolbarMessages.settingsLink),
-    onClick: openLinkSettings(editorAnalyticsApi)
-  }, {
+    onClick: getBooleanFF('platform.editor.card.inject-settings-button') ? openLinkSettings(editorAnalyticsApi, userPreferencesLink) : openLinkSettings(editorAnalyticsApi, undefined),
+    href: getBooleanFF('platform.editor.card.inject-settings-button') ? userPreferencesLink || getLinkPreferencesURLFromENV() : getLinkPreferencesURLFromENV(),
+    target: '_blank'
+  };
+};
+export const getSettingsButton = (intl, editorAnalyticsApi, userPreferencesLink) => {
+  return {
+    id: 'editor.link.settings',
+    type: 'button',
+    icon: CogIcon,
+    title: intl.formatMessage(linkToolbarMessages.settingsLink),
+    onClick: getBooleanFF('platform.editor.card.inject-settings-button') ? openLinkSettings(editorAnalyticsApi, userPreferencesLink) : openLinkSettings(editorAnalyticsApi, undefined)
+  };
+};
+export const getSettingsButtonGroup = (intl, editorAnalyticsApi, userPreferencesLink) => {
+  return [getSettingsButton(intl, editorAnalyticsApi, userPreferencesLink), {
     type: 'separator'
   }];
 };
@@ -451,7 +465,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     }, {
       type: 'separator'
     }]
-  }, ...getSettingsButtonGroup(intl, editorAnalyticsApi), {
+  }, ...getSettingsButtonGroup(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
     id: 'editor.link.delete',
     focusEditoronEnter: true,
     type: 'button',

package/dist/esm/nodeviews/blockCard.js

@@ -29,7 +29,6 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "onClick", function () {});
     _defineProperty(_assertThisInitialized(_this), "onResolve", function (data) {
       var _this$props = _this.props,
         getPos = _this$props.getPos,
@@ -90,7 +89,8 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         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;
@@ -100,7 +100,7 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         data: data,
         container: this.scrollContainer,
         appearance: "block",
-        onClick: this.onClick,
+        onClick: onClick,
         onResolve: this.onResolve,
         onError: this.onError,
         platform: platform,
@@ -164,14 +164,18 @@ export var 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.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/esm/nodeviews/embedCard.js

@@ -104,7 +104,6 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "embedIframeRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "onClick", function () {});
     _defineProperty(_assertThisInitialized(_this), "state", {
       hasPreview: true
     });
@@ -265,7 +264,8 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         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,
@@ -296,7 +296,7 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         key: url,
         url: url,
         appearance: "embed",
-        onClick: this.onClick,
+        onClick: onClick,
         onResolve: this.onResolve,
         onError: this.onError,
         frameStyle: "show",
@@ -382,7 +382,8 @@ export var 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.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -392,7 +393,8 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         platform: platform,
         fullWidthMode: fullWidthMode,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        onClickCallback: onClickCallback
       });
     }
   }]);

package/dist/esm/nodeviews/genericCard.js

@@ -8,14 +8,41 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-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';
+var WithClickHandler = function WithClickHandler(_ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    url = _ref.url,
+    onClickCallback = _ref.onClickCallback,
+    children = _ref.children;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var onClick = 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.createElement(React.Fragment, null, children({
+    onClick: allowNavigation ? undefined : onClick
+  }));
+};
 export function Card(SmartCardComponent, UnsupportedComponent) {
   var _class;
   return _class = /*#__PURE__*/function (_React$Component) {
@@ -31,12 +58,17 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
       _defineProperty(_assertThisInitialized(_this), "state", {
         isError: false
       });
+      _defineProperty(_assertThisInitialized(_this), "onClick", function () {});
       return _this;
     }
     _createClass(_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 = titleUrlPairFromNode(this.props.node),
           url = _titleUrlPairFromNode.url;
         if (url && !isSafeUrl(url)) {
@@ -65,10 +97,24 @@ 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
+        }, function (_ref2) {
+          var onClick = _ref2.onClick;
+          return /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
+            key: url,
+            cardContext: cardContext
+          }, _this2.props, {
+            onClick: onClick
+          }));
+        }) : /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
           key: url,
           cardContext: cardContext
-        }, this.props)));
+        }, this.props, {
+          onClick: this.onClick
+        })));
       }
     }, {
       key: "componentDidCatch",
@@ -84,11 +130,11 @@ export 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 = titleUrlPairFromNode(node),
             url = _titleUrlPairFromNode2.url;
           if (!getPos || typeof getPos === 'boolean') {

package/dist/esm/nodeviews/inlineCard.js

@@ -31,7 +31,6 @@ export var InlineCardComponent = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "onClick", function () {});
     _defineProperty(_assertThisInitialized(_this), "onResolve", function (data) {
       var _this$props = _this.props,
         getPos = _this$props.getPos,
@@ -85,7 +84,8 @@ export var InlineCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         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;
@@ -96,7 +96,7 @@ export var InlineCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         url: url,
         data: data,
         appearance: "inline",
-        onClick: this.onClick,
+        onClick: onClick,
         container: this.scrollContainer,
         onResolve: this.onResolve,
         onError: this.onError,
@@ -128,7 +128,8 @@ export function InlineCardNodeView(props) {
     allowEmbeds = props.allowEmbeds,
     allowBlockCards = props.allowBlockCards,
     enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
-    pluginInjectionApi = props.pluginInjectionApi;
+    pluginInjectionApi = props.pluginInjectionApi,
+    onClickCallback = props.onClickCallback;
   if (!getBooleanFF('platform.linking-platform.smart-card.inline-switcher')) {
     return /*#__PURE__*/React.createElement(WrappedInlineCard, {
       node: node,
@@ -136,7 +137,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({
@@ -146,7 +149,8 @@ export 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/esm/nodeviews/inlineCardWithAwareness.js

@@ -17,7 +17,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;
@@ -95,7 +96,7 @@ var InlineCard = function InlineCard(_ref) {
       url: url,
       data: data,
       appearance: "inline",
-      onClick: function onClick() {},
+      onClick: onClick,
       container: scrollContainer,
       onResolve: onResolve,
       onError: onError,
@@ -104,7 +105,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 = useMemo(function () {
     return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/React.createElement(AwarenessWrapper, {
       isOverlayEnabled: isOverlayEnabled,

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

@@ -47,7 +47,8 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
       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 = getBooleanFF('platform.linking-platform.smart-card.inline-switcher') && enableInlineUpgradeFeatures;
     var inlineCardViewProducer = getInlineNodeViewProducer({
@@ -60,7 +61,8 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
         enableInlineUpgradeFeatures: enableInlineUpgradeFeatures,
         allowEmbeds: allowEmbeds,
         allowBlockCards: allowBlockCards,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        onClickCallback: onClickCallback
       }
     });
     return new SafePlugin({
@@ -222,7 +224,9 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
             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);
@@ -260,7 +264,8 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
               dispatchAnalyticsEvent: dispatchAnalyticsEvent,
               pluginInjectionApi: pluginInjectionApi,
               actionOptions: actionOptions,
-              showServerActions: showServerActions
+              showServerActions: showServerActions,
+              onClickCallback: options.onClickCallback
             };
             var hasIntlContext = true;
             return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();

package/dist/esm/pm-plugins/mountHyperlink.js

@@ -1,6 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React from 'react';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getHyperlinkToolbarSettingsButton } from '../toolbar';
 import { HyperlinkToolbarAppearance } from '../ui/HyperlinkToolbarAppearance';
 import { ToolbarViewedEvent } from '../ui/ToolbarViewedEvent';
 var getToolbarViewedItem = function getToolbarViewedItem(link) {
@@ -49,6 +51,25 @@ export var mountHyperlinkPlugin = function mountHyperlinkPlugin(pluginInjectionA
           view: editorView,
           skipAnalytics: true
         });
+        if (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'
+                }, 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/esm/toolbar.js

@@ -73,12 +73,12 @@ export var visitCardLink = function visitCardLink(editorAnalyticsApi) {
     return true;
   };
 };
-export var openLinkSettings = function openLinkSettings(editorAnalyticsApi) {
+export var openLinkSettings = function openLinkSettings(editorAnalyticsApi, userPreferencesLink) {
   return function (state, dispatch) {
     if (!(state.selection instanceof NodeSelection)) {
       return false;
     }
-    window.open(getLinkPreferencesURLFromENV());
+    window.open(userPreferencesLink || getLinkPreferencesURLFromENV());
     if (dispatch) {
       var tr = state.tr,
         type = state.selection.node.type;
@@ -245,7 +245,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         }, {
           type: 'separator'
         }]
-      }], _toConsumableArray(getSettingsButtonGroup(intl, editorAnalyticsApi)), [{
+      }], _toConsumableArray(getSettingsButtonGroup(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)), [{
         id: 'editor.link.delete',
         focusEditoronEnter: true,
         type: 'button',
@@ -345,14 +345,28 @@ var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inli
     type: 'separator'
   }] : [];
 };
-var getSettingsButtonGroup = function getSettingsButtonGroup(intl, editorAnalyticsApi) {
-  return [{
+export var getHyperlinkToolbarSettingsButton = function getHyperlinkToolbarSettingsButton(intl, editorAnalyticsApi, userPreferencesLink) {
+  return {
     id: 'editor.link.settings',
     type: 'button',
     icon: CogIcon,
     title: intl.formatMessage(linkToolbarMessages.settingsLink),
-    onClick: openLinkSettings(editorAnalyticsApi)
-  }, {
+    onClick: getBooleanFF('platform.editor.card.inject-settings-button') ? openLinkSettings(editorAnalyticsApi, userPreferencesLink) : openLinkSettings(editorAnalyticsApi, undefined),
+    href: getBooleanFF('platform.editor.card.inject-settings-button') ? userPreferencesLink || getLinkPreferencesURLFromENV() : getLinkPreferencesURLFromENV(),
+    target: '_blank'
+  };
+};
+export var getSettingsButton = function getSettingsButton(intl, editorAnalyticsApi, userPreferencesLink) {
+  return {
+    id: 'editor.link.settings',
+    type: 'button',
+    icon: CogIcon,
+    title: intl.formatMessage(linkToolbarMessages.settingsLink),
+    onClick: getBooleanFF('platform.editor.card.inject-settings-button') ? openLinkSettings(editorAnalyticsApi, userPreferencesLink) : openLinkSettings(editorAnalyticsApi, undefined)
+  };
+};
+export var getSettingsButtonGroup = function getSettingsButtonGroup(intl, editorAnalyticsApi, userPreferencesLink) {
+  return [getSettingsButton(intl, editorAnalyticsApi, userPreferencesLink), {
     type: 'separator'
   }];
 };
@@ -448,7 +462,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     }, {
       type: 'separator'
     }]
-  }].concat(_toConsumableArray(getSettingsButtonGroup(intl, editorAnalyticsApi)), [{
+  }].concat(_toConsumableArray(getSettingsButtonGroup(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink)), [{
     id: 'editor.link.delete',
     focusEditoronEnter: true,
     type: 'button',