@atlaskit/editor-plugin-card 2.13.4 → 2.14.0

package/dist/es2019/ui/HyperlinkToolbarAppearance.js

@@ -1,25 +1,100 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+import React, { Component, useEffect, useRef, useState } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
-import { fg, getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
 import { EditDatasourceButton } from './EditDatasourceButton';
 import { LinkToolbarAppearance } from './LinkToolbarAppearance';
+function HyperlinkToolbarAppearanceFunctional(props) {
+  var _props$cardOptions3;
+  const [supportedUrlsMap, setSupportedUrlsMap] = useState(new Map());
+  const cardProvider = useRef(undefined);
+  const {
+    url,
+    intl,
+    editorView,
+    editorState,
+    cardOptions,
+    platform,
+    editorAnalyticsApi
+  } = props;
+  const getProvider = async () => {
+    var _props$cardOptions;
+    if ((_props$cardOptions = props.cardOptions) !== null && _props$cardOptions !== void 0 && _props$cardOptions.provider) {
+      var _props$cardOptions2;
+      return (_props$cardOptions2 = props.cardOptions) === null || _props$cardOptions2 === void 0 ? void 0 : _props$cardOptions2.provider;
+    }
+    if (cardProvider.current) {
+      return cardProvider.current;
+    }
+    return new Promise(resolve => {
+      var _props$editorPluginAp, _props$editorPluginAp2, _props$editorPluginAp3, _props$editorPluginAp4;
+      const cardProvider = (_props$editorPluginAp = props.editorPluginApi) === null || _props$editorPluginAp === void 0 ? void 0 : (_props$editorPluginAp2 = _props$editorPluginAp.card) === null || _props$editorPluginAp2 === void 0 ? void 0 : (_props$editorPluginAp3 = _props$editorPluginAp2.sharedState) === null || _props$editorPluginAp3 === void 0 ? void 0 : (_props$editorPluginAp4 = _props$editorPluginAp3.currentState()) === null || _props$editorPluginAp4 === void 0 ? void 0 : _props$editorPluginAp4.provider;
+      if (cardProvider) {
+        resolve(cardProvider);
+      }
+    });
+  };
+  const resolveUrl = async url => {
+    if (supportedUrlsMap.has(url)) {
+      return;
+    }
+    let isUrlSupported = false;
+    try {
+      var _await$provider$findP;
+      const provider = await getProvider();
+      isUrlSupported = (_await$provider$findP = await (provider === null || provider === void 0 ? void 0 : provider.findPattern(url))) !== null && _await$provider$findP !== void 0 ? _await$provider$findP : false;
+    } catch (error) {
+      isUrlSupported = false;
+    }
+    const newMap = new Map(supportedUrlsMap);
+    newMap.set(url, isUrlSupported);
+    setSupportedUrlsMap(newMap);
+  };
+  useEffect(() => {
+    resolveUrl(url);
+    // before migrating from a class to a functional component, we were only reacting to changes in the url
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url, (_props$cardOptions3 = props.cardOptions) === null || _props$cardOptions3 === void 0 ? void 0 : _props$cardOptions3.provider, props.editorPluginApi]);
+  if (!supportedUrlsMap.get(url)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Flex, null, !fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/React.createElement(EditDatasourceButton, {
+    url: url,
+    intl: intl,
+    editorView: editorView,
+    editorAnalyticsApi: editorAnalyticsApi,
+    currentAppearance: "url"
+  }), /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+    key: "link-appearance",
+    url: url,
+    intl: intl,
+    editorView: editorView,
+    editorState: editorState,
+    allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
+    allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
+    platform: platform,
+    editorAnalyticsApi: editorAnalyticsApi
+  }), (cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowDatasource) && fg('platform.linking-platform.enable-datasource-appearance-toolbar') && /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
+    intl: intl,
+    url: url,
+    editorState: editorState,
+    editorView: editorView,
+    editorAnalyticsApi: editorAnalyticsApi,
+    inputMethod: INPUT_METHOD.FLOATING_TB
+  }), /*#__PURE__*/React.createElement(Separator, null));
+}
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
-export class HyperlinkToolbarAppearance extends Component {
+class HyperlinkToolbarAppearanceClass extends Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
       supportedUrlsMap: new Map()
     });
     _defineProperty(this, "getProvider", async () => {
-      var _this$props$cardOptio;
-      if ((_this$props$cardOptio = this.props.cardOptions) !== null && _this$props$cardOptio !== void 0 && _this$props$cardOptio.provider && fg('platform_editor_get_card_provider_from_config')) {
-        var _this$props$cardOptio2;
-        return (_this$props$cardOptio2 = this.props.cardOptions) === null || _this$props$cardOptio2 === void 0 ? void 0 : _this$props$cardOptio2.provider;
-      }
       if (this.cardProvider) {
         return this.cardProvider;
       }
@@ -45,9 +120,9 @@ export class HyperlinkToolbarAppearance extends Component {
       }
       let isUrlSupported = false;
       try {
-        var _await$provider$findP;
+        var _await$provider$findP2;
         const provider = await this.getProvider();
-        isUrlSupported = (_await$provider$findP = await (provider === null || provider === void 0 ? void 0 : provider.findPattern(url))) !== null && _await$provider$findP !== void 0 ? _await$provider$findP : false;
+        isUrlSupported = (_await$provider$findP2 = await (provider === null || provider === void 0 ? void 0 : provider.findPattern(url))) !== null && _await$provider$findP2 !== void 0 ? _await$provider$findP2 : false;
       } catch (error) {
         isUrlSupported = false;
       }
@@ -82,7 +157,7 @@ export class HyperlinkToolbarAppearance extends Component {
     if (!supportedUrlsMap.get(url)) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(Flex, null, !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/React.createElement(EditDatasourceButton, {
+    return /*#__PURE__*/React.createElement(Flex, null, !fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/React.createElement(EditDatasourceButton, {
       url: url,
       intl: intl,
       editorView: editorView,
@@ -98,7 +173,7 @@ export class HyperlinkToolbarAppearance extends Component {
       allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
       platform: platform,
       editorAnalyticsApi: editorAnalyticsApi
-    }), getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && (cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowDatasource) && /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
+    }), (cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowDatasource) && fg('platform.linking-platform.enable-datasource-appearance-toolbar') && /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
       intl: intl,
       url: url,
       editorState: editorState,
@@ -107,4 +182,10 @@ export class HyperlinkToolbarAppearance extends Component {
       inputMethod: INPUT_METHOD.FLOATING_TB
     }), /*#__PURE__*/React.createElement(Separator, null));
   }
-}
+}
+export const HyperlinkToolbarAppearance = props => {
+  if (fg('platform_editor_get_card_provider_from_config')) {
+    return /*#__PURE__*/React.createElement(HyperlinkToolbarAppearanceFunctional, props);
+  }
+  return /*#__PURE__*/React.createElement(HyperlinkToolbarAppearanceClass, props);
+};

package/dist/esm/nodeviews/datasource.js

@@ -299,6 +299,12 @@ export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
     value: function render() {
       var _attrs$datasource;
       var attrs = this.node.attrs;
+      if (fg('platform-datasources-enable-two-way-sync')) {
+        var _this$domRef;
+        // EDM-10607: Workaround to remove datasource table draggable attribute
+        // @ts-ignore TS2341: Property domRef is private
+        (_this$domRef = this.domRef) === null || _this$domRef === void 0 || _this$domRef.setAttribute('draggable', 'false');
+      }
       return jsx(DatasourceErrorBoundary, {
         unsupportedComponent: UnsupportedInline,
         view: this.view,

package/dist/esm/plugin.js

@@ -1,4 +1,6 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -8,7 +10,7 @@ import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDataso
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, CONFLUENCE_SEARCH_DATASOURCE_ID } from '@atlaskit/link-datasource';
 import { createEventsQueue } from './analytics/create-events-queue';
-import { hideLinkToolbar, showDatasourceModal } from './pm-plugins/actions';
+import { hideLinkToolbar, setProvider as _setProvider, showDatasourceModal } from './pm-plugins/actions';
 import { queueCardsFromChangedTr } from './pm-plugins/doc';
 import { cardKeymap } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
@@ -25,6 +27,7 @@ export var cardPlugin = function cardPlugin(_ref) {
   var _options$lpLinkPicker;
   var options = _ref.config,
     api = _ref.api;
+  var previousCardProvider;
   var cardPluginEvents = createEventsQueue();
   return {
     name: 'card',
@@ -104,6 +107,39 @@ export var cardPlugin = function cardPlugin(_ref) {
       }));
     },
     actions: {
+      setProvider: function () {
+        var _setProvider2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(providerPromise) {
+          var _api$core$actions$exe;
+          var provider;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return providerPromise;
+              case 2:
+                provider = _context.sent;
+                if (!(previousCardProvider === provider)) {
+                  _context.next = 5;
+                  break;
+                }
+                return _context.abrupt("return", false);
+              case 5:
+                previousCardProvider = provider;
+                return _context.abrupt("return", (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref4) {
+                  var tr = _ref4.tr;
+                  return _setProvider(provider)(tr);
+                })) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false);
+              case 7:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function setProvider(_x) {
+          return _setProvider2.apply(this, arguments);
+        }
+        return setProvider;
+      }(),
       hideLinkToolbar: hideLinkToolbar,
       queueCardsFromChangedTr: queueCardsFromChangedTr,
       getStartingToolbarItems: getStartingToolbarItems(options, api),
@@ -111,8 +147,8 @@ export var cardPlugin = function cardPlugin(_ref) {
     },
     pluginsOptions: {
       floatingToolbar: floatingToolbar(options, (_options$lpLinkPicker = options.lpLinkPicker) !== null && _options$lpLinkPicker !== void 0 ? _options$lpLinkPicker : false, options.platform, options.linkPicker, api, options.disableFloatingToolbar),
-      quickInsert: function quickInsert(_ref4) {
-        var formatMessage = _ref4.formatMessage;
+      quickInsert: function quickInsert(_ref5) {
+        var formatMessage = _ref5.formatMessage;
         var quickInsertArray = [];
         if (!options.allowDatasource) {
           return quickInsertArray;

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

@@ -154,8 +154,10 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
         };
         var domAtPos = _view.domAtPos.bind(_view);
         var rafCancellationCallbacks = [];
-        if (options.provider && fg('platform_editor_get_card_provider_from_config')) {
-          handleProvider('cardProvider', options.provider, _view);
+        if (fg('platform_editor_get_card_provider_from_config')) {
+          if (options.provider) {
+            handleProvider('cardProvider', options.provider, _view);
+          }
         } else {
           pmPluginFactoryParams.providerFactory.subscribe('cardProvider', subscriptionHandler);
         }

package/dist/esm/toolbar.js

@@ -579,7 +579,8 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
           cardOptions: options,
           providerFactory: providerFactory,
           platform: options === null || options === void 0 ? void 0 : options.platform,
-          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
+          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
+          editorPluginApi: api
         });
       }
     }].concat(editLinkItem);

package/dist/esm/ui/HyperlinkToolbarAppearance.js

@@ -1,4 +1,3 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -6,24 +5,170 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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, { Component } from 'react';
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { Component, useEffect, useRef, useState } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
-import { fg, getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
 import { EditDatasourceButton } from './EditDatasourceButton';
 import { LinkToolbarAppearance } from './LinkToolbarAppearance';
+function HyperlinkToolbarAppearanceFunctional(props) {
+  var _props$cardOptions3;
+  var _useState = useState(new Map()),
+    _useState2 = _slicedToArray(_useState, 2),
+    supportedUrlsMap = _useState2[0],
+    setSupportedUrlsMap = _useState2[1];
+  var cardProvider = useRef(undefined);
+  var url = props.url,
+    intl = props.intl,
+    editorView = props.editorView,
+    editorState = props.editorState,
+    cardOptions = props.cardOptions,
+    platform = props.platform,
+    editorAnalyticsApi = props.editorAnalyticsApi;
+  var getProvider = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _props$cardOptions;
+      var _props$cardOptions2;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!((_props$cardOptions = props.cardOptions) !== null && _props$cardOptions !== void 0 && _props$cardOptions.provider)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return", (_props$cardOptions2 = props.cardOptions) === null || _props$cardOptions2 === void 0 ? void 0 : _props$cardOptions2.provider);
+          case 2:
+            if (!cardProvider.current) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return", cardProvider.current);
+          case 4:
+            return _context.abrupt("return", new Promise(function (resolve) {
+              var _props$editorPluginAp;
+              var cardProvider = (_props$editorPluginAp = props.editorPluginApi) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.card) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.sharedState) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.currentState()) === null || _props$editorPluginAp === void 0 ? void 0 : _props$editorPluginAp.provider;
+              if (cardProvider) {
+                resolve(cardProvider);
+              }
+            }));
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function getProvider() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var resolveUrl = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(url) {
+      var isUrlSupported, _yield$provider$findP, provider, newMap;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!supportedUrlsMap.has(url)) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            isUrlSupported = false;
+            _context2.prev = 3;
+            _context2.next = 6;
+            return getProvider();
+          case 6:
+            provider = _context2.sent;
+            _context2.next = 9;
+            return provider === null || provider === void 0 ? void 0 : provider.findPattern(url);
+          case 9:
+            _context2.t1 = _yield$provider$findP = _context2.sent;
+            _context2.t0 = _context2.t1 !== null;
+            if (!_context2.t0) {
+              _context2.next = 13;
+              break;
+            }
+            _context2.t0 = _yield$provider$findP !== void 0;
+          case 13:
+            if (!_context2.t0) {
+              _context2.next = 17;
+              break;
+            }
+            _context2.t2 = _yield$provider$findP;
+            _context2.next = 18;
+            break;
+          case 17:
+            _context2.t2 = false;
+          case 18:
+            isUrlSupported = _context2.t2;
+            _context2.next = 24;
+            break;
+          case 21:
+            _context2.prev = 21;
+            _context2.t3 = _context2["catch"](3);
+            isUrlSupported = false;
+          case 24:
+            newMap = new Map(supportedUrlsMap);
+            newMap.set(url, isUrlSupported);
+            setSupportedUrlsMap(newMap);
+          case 27:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[3, 21]]);
+    }));
+    return function resolveUrl(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    resolveUrl(url);
+    // before migrating from a class to a functional component, we were only reacting to changes in the url
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url, (_props$cardOptions3 = props.cardOptions) === null || _props$cardOptions3 === void 0 ? void 0 : _props$cardOptions3.provider, props.editorPluginApi]);
+  if (!supportedUrlsMap.get(url)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Flex, null, !fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/React.createElement(EditDatasourceButton, {
+    url: url,
+    intl: intl,
+    editorView: editorView,
+    editorAnalyticsApi: editorAnalyticsApi,
+    currentAppearance: "url"
+  }), /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+    key: "link-appearance",
+    url: url,
+    intl: intl,
+    editorView: editorView,
+    editorState: editorState,
+    allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
+    allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
+    platform: platform,
+    editorAnalyticsApi: editorAnalyticsApi
+  }), (cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowDatasource) && fg('platform.linking-platform.enable-datasource-appearance-toolbar') && /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
+    intl: intl,
+    url: url,
+    editorState: editorState,
+    editorView: editorView,
+    editorAnalyticsApi: editorAnalyticsApi,
+    inputMethod: INPUT_METHOD.FLOATING_TB
+  }), /*#__PURE__*/React.createElement(Separator, null));
+}
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
-export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
-  _inherits(HyperlinkToolbarAppearance, _Component);
-  var _super = _createSuper(HyperlinkToolbarAppearance);
-  function HyperlinkToolbarAppearance() {
+var HyperlinkToolbarAppearanceClass = /*#__PURE__*/function (_Component) {
+  _inherits(HyperlinkToolbarAppearanceClass, _Component);
+  var _super = _createSuper(HyperlinkToolbarAppearanceClass);
+  function HyperlinkToolbarAppearanceClass() {
     var _this;
-    _classCallCheck(this, HyperlinkToolbarAppearance);
+    _classCallCheck(this, HyperlinkToolbarAppearanceClass);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -31,105 +176,97 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "state", {
       supportedUrlsMap: new Map()
     });
-    _defineProperty(_assertThisInitialized(_this), "getProvider", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var _this$props$cardOptio;
-      var _this$props$cardOptio2;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    _defineProperty(_assertThisInitialized(_this), "getProvider", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
           case 0:
-            if (!((_this$props$cardOptio = _this.props.cardOptions) !== null && _this$props$cardOptio !== void 0 && _this$props$cardOptio.provider && fg('platform_editor_get_card_provider_from_config'))) {
-              _context2.next = 2;
-              break;
-            }
-            return _context2.abrupt("return", (_this$props$cardOptio2 = _this.props.cardOptions) === null || _this$props$cardOptio2 === void 0 ? void 0 : _this$props$cardOptio2.provider);
-          case 2:
             if (!_this.cardProvider) {
-              _context2.next = 4;
+              _context4.next = 2;
               break;
             }
-            return _context2.abrupt("return", _this.cardProvider);
-          case 4:
-            return _context2.abrupt("return", new Promise(function (resolve) {
+            return _context4.abrupt("return", _this.cardProvider);
+          case 2:
+            return _context4.abrupt("return", new Promise(function (resolve) {
               var providerFactory = _this.props.providerFactory;
               providerFactory.subscribe('cardProvider', /*#__PURE__*/function () {
-                var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_, cardProvider) {
-                  return _regeneratorRuntime.wrap(function _callee$(_context) {
-                    while (1) switch (_context.prev = _context.next) {
+                var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_, cardProvider) {
+                  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+                    while (1) switch (_context3.prev = _context3.next) {
                       case 0:
                         if (cardProvider) {
-                          _context.next = 2;
+                          _context3.next = 2;
                           break;
                         }
-                        return _context.abrupt("return");
+                        return _context3.abrupt("return");
                       case 2:
-                        _context.next = 4;
+                        _context3.next = 4;
                         return cardProvider;
                       case 4:
-                        _this.cardProvider = _context.sent;
+                        _this.cardProvider = _context3.sent;
                         resolve(_this.cardProvider);
                       case 6:
                       case "end":
-                        return _context.stop();
+                        return _context3.stop();
                     }
-                  }, _callee);
+                  }, _callee3);
                 }));
-                return function (_x, _x2) {
-                  return _ref2.apply(this, arguments);
+                return function (_x2, _x3) {
+                  return _ref4.apply(this, arguments);
                 };
               }());
             }));
-          case 5:
+          case 3:
           case "end":
-            return _context2.stop();
+            return _context4.stop();
         }
-      }, _callee2);
+      }, _callee4);
     })));
     _defineProperty(_assertThisInitialized(_this), "resolveUrl", /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(url) {
-        var supportedUrlsMap, isUrlSupported, _yield$provider$findP, provider, newMap;
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(url) {
+        var supportedUrlsMap, isUrlSupported, _yield$provider$findP2, provider, newMap;
+        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               supportedUrlsMap = _this.state.supportedUrlsMap;
               if (!supportedUrlsMap.has(url)) {
-                _context3.next = 3;
+                _context5.next = 3;
                 break;
               }
-              return _context3.abrupt("return");
+              return _context5.abrupt("return");
             case 3:
               isUrlSupported = false;
-              _context3.prev = 4;
-              _context3.next = 7;
+              _context5.prev = 4;
+              _context5.next = 7;
               return _this.getProvider();
             case 7:
-              provider = _context3.sent;
-              _context3.next = 10;
+              provider = _context5.sent;
+              _context5.next = 10;
               return provider === null || provider === void 0 ? void 0 : provider.findPattern(url);
             case 10:
-              _context3.t1 = _yield$provider$findP = _context3.sent;
-              _context3.t0 = _context3.t1 !== null;
-              if (!_context3.t0) {
-                _context3.next = 14;
+              _context5.t1 = _yield$provider$findP2 = _context5.sent;
+              _context5.t0 = _context5.t1 !== null;
+              if (!_context5.t0) {
+                _context5.next = 14;
                 break;
               }
-              _context3.t0 = _yield$provider$findP !== void 0;
+              _context5.t0 = _yield$provider$findP2 !== void 0;
             case 14:
-              if (!_context3.t0) {
-                _context3.next = 18;
+              if (!_context5.t0) {
+                _context5.next = 18;
                 break;
               }
-              _context3.t2 = _yield$provider$findP;
-              _context3.next = 19;
+              _context5.t2 = _yield$provider$findP2;
+              _context5.next = 19;
               break;
             case 18:
-              _context3.t2 = false;
+              _context5.t2 = false;
             case 19:
-              isUrlSupported = _context3.t2;
-              _context3.next = 25;
+              isUrlSupported = _context5.t2;
+              _context5.next = 25;
               break;
             case 22:
-              _context3.prev = 22;
-              _context3.t3 = _context3["catch"](4);
+              _context5.prev = 22;
+              _context5.t3 = _context5["catch"](4);
               isUrlSupported = false;
             case 25:
               newMap = new Map(supportedUrlsMap);
@@ -139,12 +276,12 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
               });
             case 28:
             case "end":
-              return _context3.stop();
+              return _context5.stop();
           }
-        }, _callee3, null, [[4, 22]]);
+        }, _callee5, null, [[4, 22]]);
       }));
-      return function (_x3) {
-        return _ref3.apply(this, arguments);
+      return function (_x4) {
+        return _ref5.apply(this, arguments);
       };
     }());
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
@@ -152,7 +289,7 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _createClass(HyperlinkToolbarAppearance, [{
+  _createClass(HyperlinkToolbarAppearanceClass, [{
     key: "UNSAFE_componentWillReceiveProps",
     value:
     // needed so we display the right state on the Toolbar while the same Toolbar
@@ -177,7 +314,7 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
       if (!supportedUrlsMap.get(url)) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(Flex, null, !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/React.createElement(EditDatasourceButton, {
+      return /*#__PURE__*/React.createElement(Flex, null, !fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/React.createElement(EditDatasourceButton, {
         url: url,
         intl: intl,
         editorView: editorView,
@@ -193,7 +330,7 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
         allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
         platform: platform,
         editorAnalyticsApi: editorAnalyticsApi
-      }), getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && (cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowDatasource) && /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
+      }), (cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowDatasource) && fg('platform.linking-platform.enable-datasource-appearance-toolbar') && /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
         intl: intl,
         url: url,
         editorState: editorState,
@@ -203,5 +340,11 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
       }), /*#__PURE__*/React.createElement(Separator, null));
     }
   }]);
-  return HyperlinkToolbarAppearance;
-}(Component);
+  return HyperlinkToolbarAppearanceClass;
+}(Component);
+export var HyperlinkToolbarAppearance = function HyperlinkToolbarAppearance(props) {
+  if (fg('platform_editor_get_card_provider_from_config')) {
+    return /*#__PURE__*/React.createElement(HyperlinkToolbarAppearanceFunctional, props);
+  }
+  return /*#__PURE__*/React.createElement(HyperlinkToolbarAppearanceClass, props);
+};