npm - @atlaskit/editor-plugin-card - Versions diffs - 2.13.5 → 2.14.0 - Mend

@atlaskit/editor-plugin-card 2.13.5 → 2.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/CHANGELOG.md +11 -0
package/dist/cjs/plugin.js +38 -2
package/dist/cjs/pm-plugins/main.js +4 -2
package/dist/cjs/toolbar.js +2 -1
package/dist/cjs/ui/HyperlinkToolbarAppearance.js +211 -68
package/dist/es2019/plugin.js +14 -1
package/dist/es2019/pm-plugins/main.js +4 -2
package/dist/es2019/toolbar.js +2 -1
package/dist/es2019/ui/HyperlinkToolbarAppearance.js +94 -13
package/dist/esm/plugin.js +39 -3
package/dist/esm/pm-plugins/main.js +4 -2
package/dist/esm/toolbar.js +2 -1
package/dist/esm/ui/HyperlinkToolbarAppearance.js +214 -71
package/dist/types/ui/HyperlinkToolbarAppearance.d.ts +6 -11
package/dist/types-ts4.5/ui/HyperlinkToolbarAppearance.d.ts +6 -11
package/package.json +2 -2

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-card
+## 2.14.0
+### Minor Changes
+- [`c4d2eb3f9f965`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c4d2eb3f9f965) -
+  [ux] Fix issue with card provider not updating asynchronously
+### Patch Changes
+- Updated dependencies
 ## 2.13.5
 ### Patch Changes

package/dist/cjs/plugin.js CHANGED Viewed

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.cardPlugin = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -32,6 +34,7 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
   var _options$lpLinkPicker;
   var options = _ref.config,
     api = _ref.api;
+  var previousCardProvider;
   var cardPluginEvents = (0, _createEventsQueue.createEventsQueue)();
   return {
     name: 'card',
@@ -111,6 +114,39 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
       }));
     },
     actions: {
+      setProvider: function () {
+        var _setProvider2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(providerPromise) {
+          var _api$core$actions$exe;
+          var provider;
+          return _regenerator.default.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 (0, _actions.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: _actions.hideLinkToolbar,
       queueCardsFromChangedTr: _doc.queueCardsFromChangedTr,
       getStartingToolbarItems: (0, _toolbar.getStartingToolbarItems)(options, api),
@@ -118,8 +154,8 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
     },
     pluginsOptions: {
       floatingToolbar: (0, _toolbar.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/cjs/pm-plugins/main.js CHANGED Viewed

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

package/dist/cjs/toolbar.js CHANGED Viewed

@@ -589,7 +589,8 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
           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/cjs/ui/HyperlinkToolbarAppearance.js CHANGED Viewed

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HyperlinkToolbarAppearance = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -15,6 +14,8 @@ 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 _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -27,13 +28,157 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; })(); }
+function HyperlinkToolbarAppearanceFunctional(props) {
+  var _props$cardOptions3;
+  var _useState = (0, _react.useState)(new Map()),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    supportedUrlsMap = _useState2[0],
+    setSupportedUrlsMap = _useState2[1];
+  var cardProvider = (0, _react.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _props$cardOptions;
+      var _props$cardOptions2;
+      return _regenerator.default.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(url) {
+      var isUrlSupported, _yield$provider$findP, provider, newMap;
+      return _regenerator.default.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);
+    };
+  }();
+  (0, _react.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.default.createElement(_primitives.Flex, null, !(0, _platformFeatureFlags.fg)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/_react.default.createElement(_EditDatasourceButton.EditDatasourceButton, {
+    url: url,
+    intl: intl,
+    editorView: editorView,
+    editorAnalyticsApi: editorAnalyticsApi,
+    currentAppearance: "url"
+  }), /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.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) && (0, _platformFeatureFlags.fg)('platform.linking-platform.enable-datasource-appearance-toolbar') && /*#__PURE__*/_react.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
+    intl: intl,
+    url: url,
+    editorState: editorState,
+    editorView: editorView,
+    editorAnalyticsApi: editorAnalyticsApi,
+    inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
+  }), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
+}
 // eslint-disable-next-line @repo/internal/react/no-class-components
-var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(HyperlinkToolbarAppearance, _Component);
-  var _super = _createSuper(HyperlinkToolbarAppearance);
-  function HyperlinkToolbarAppearance() {
+var HyperlinkToolbarAppearanceClass = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(HyperlinkToolbarAppearanceClass, _Component);
+  var _super = _createSuper(HyperlinkToolbarAppearanceClass);
+  function HyperlinkToolbarAppearanceClass() {
     var _this;
-    (0, _classCallCheck2.default)(this, HyperlinkToolbarAppearance);
+    (0, _classCallCheck2.default)(this, HyperlinkToolbarAppearanceClass);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -41,105 +186,97 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       supportedUrlsMap: new Map()
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getProvider", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-      var _this$props$cardOptio;
-      var _this$props$cardOptio2;
-      return _regenerator.default.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getProvider", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+      return _regenerator.default.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 && (0, _platformFeatureFlags.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_, cardProvider) {
-                  return _regenerator.default.wrap(function _callee$(_context) {
-                    while (1) switch (_context.prev = _context.next) {
+                var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(_, cardProvider) {
+                  return _regenerator.default.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);
     })));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveUrl", /*#__PURE__*/function () {
-      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(url) {
-        var supportedUrlsMap, isUrlSupported, _yield$provider$findP, provider, newMap;
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+      var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5(url) {
+        var supportedUrlsMap, isUrlSupported, _yield$provider$findP2, provider, newMap;
+        return _regenerator.default.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);
@@ -149,12 +286,12 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
               });
             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);
       };
     }());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
@@ -162,7 +299,7 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
     });
     return _this;
   }
-  (0, _createClass2.default)(HyperlinkToolbarAppearance, [{
+  (0, _createClass2.default)(HyperlinkToolbarAppearanceClass, [{
     key: "UNSAFE_componentWillReceiveProps",
     value:
     // needed so we display the right state on the Toolbar while the same Toolbar
@@ -187,7 +324,7 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
       if (!supportedUrlsMap.get(url)) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/_react.default.createElement(_EditDatasourceButton.EditDatasourceButton, {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, !(0, _platformFeatureFlags.fg)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/_react.default.createElement(_EditDatasourceButton.EditDatasourceButton, {
         url: url,
         intl: intl,
         editorView: editorView,
@@ -203,7 +340,7 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
         allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
         platform: platform,
         editorAnalyticsApi: editorAnalyticsApi
-      }), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar') && (cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowDatasource) && /*#__PURE__*/_react.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
+      }), (cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowDatasource) && (0, _platformFeatureFlags.fg)('platform.linking-platform.enable-datasource-appearance-toolbar') && /*#__PURE__*/_react.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
         intl: intl,
         url: url,
         editorState: editorState,
@@ -213,5 +350,11 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
       }), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
     }
   }]);
-  return HyperlinkToolbarAppearance;
-}(_react.Component);
+  return HyperlinkToolbarAppearanceClass;
+}(_react.Component);
+var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = function HyperlinkToolbarAppearance(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_get_card_provider_from_config')) {
+    return /*#__PURE__*/_react.default.createElement(HyperlinkToolbarAppearanceFunctional, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(HyperlinkToolbarAppearanceClass, props);
+};

package/dist/es2019/plugin.js CHANGED Viewed

@@ -5,7 +5,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, showDatasourceModal } from './pm-plugins/actions';
 import { queueCardsFromChangedTr } from './pm-plugins/doc';
 import { cardKeymap } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
@@ -23,6 +23,7 @@ export const cardPlugin = ({
   api
 }) => {
   var _options$lpLinkPicker;
+  let previousCardProvider;
   const cardPluginEvents = createEventsQueue();
   return {
     name: 'card',
@@ -105,6 +106,18 @@ export const cardPlugin = ({
       }));
     },
     actions: {
+      setProvider: async providerPromise => {
+        var _api$core$actions$exe;
+        const provider = await providerPromise;
+        // Prevent someone trying to set the exact same provider twice for performance reasons
+        if (previousCardProvider === provider) {
+          return false;
+        }
+        previousCardProvider = provider;
+        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+          tr
+        }) => setProvider(provider)(tr))) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
+      },
       hideLinkToolbar,
       queueCardsFromChangedTr,
       getStartingToolbarItems: getStartingToolbarItems(options, api),

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

@@ -152,8 +152,10 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
       const subscriptionHandler = (name, provider) => handleProvider(name, provider, view);
       const domAtPos = view.domAtPos.bind(view);
       const 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/es2019/toolbar.js CHANGED Viewed

@@ -574,7 +574,8 @@ export const getStartingToolbarItems = (options, api) => {
           cardOptions: options,
           providerFactory: providerFactory,
           platform: options === null || options === void 0 ? void 0 : options.platform,
-          editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
+          editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
+          editorPluginApi: api
         });
       }
     }, ...editLinkItem];

package/dist/es2019/ui/HyperlinkToolbarAppearance.js CHANGED Viewed

@@ -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/plugin.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);
+};

package/dist/types/ui/HyperlinkToolbarAppearance.d.ts CHANGED Viewed

@@ -1,11 +1,13 @@
-import { Component } from 'react';
+/// <reference types="react" />
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { CardOptions } from '@atlaskit/editor-common/card';
-import type { CardProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CardPlatform } from '@atlaskit/smart-card';
+import { type CardPlugin } from '../plugin';
 export interface HyperlinkToolbarAppearanceProps {
     intl: IntlShape;
     editorState: EditorState;
@@ -15,16 +17,9 @@ export interface HyperlinkToolbarAppearanceProps {
     platform?: CardPlatform;
     cardOptions?: CardOptions;
     editorAnalyticsApi: EditorAnalyticsAPI | undefined;
+    editorPluginApi: ExtractInjectionAPI<CardPlugin> | undefined;
 }
 export interface HyperlinkToolbarAppearanceState {
     supportedUrlsMap: Map<string, boolean>;
 }
-export declare class HyperlinkToolbarAppearance extends Component<HyperlinkToolbarAppearanceProps, HyperlinkToolbarAppearanceState> {
-    state: HyperlinkToolbarAppearanceState;
-    cardProvider?: CardProvider;
-    private getProvider;
-    private resolveUrl;
-    componentDidMount: () => Promise<void>;
-    UNSAFE_componentWillReceiveProps(nextProps: HyperlinkToolbarAppearanceProps): void;
-    render(): JSX.Element | null;
-}
+export declare const HyperlinkToolbarAppearance: (props: HyperlinkToolbarAppearanceProps) => JSX.Element;

package/dist/types-ts4.5/ui/HyperlinkToolbarAppearance.d.ts CHANGED Viewed

@@ -1,11 +1,13 @@
-import { Component } from 'react';
+/// <reference types="react" />
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { CardOptions } from '@atlaskit/editor-common/card';
-import type { CardProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CardPlatform } from '@atlaskit/smart-card';
+import { type CardPlugin } from '../plugin';
 export interface HyperlinkToolbarAppearanceProps {
     intl: IntlShape;
     editorState: EditorState;
@@ -15,16 +17,9 @@ export interface HyperlinkToolbarAppearanceProps {
     platform?: CardPlatform;
     cardOptions?: CardOptions;
     editorAnalyticsApi: EditorAnalyticsAPI | undefined;
+    editorPluginApi: ExtractInjectionAPI<CardPlugin> | undefined;
 }
 export interface HyperlinkToolbarAppearanceState {
     supportedUrlsMap: Map<string, boolean>;
 }
-export declare class HyperlinkToolbarAppearance extends Component<HyperlinkToolbarAppearanceProps, HyperlinkToolbarAppearanceState> {
-    state: HyperlinkToolbarAppearanceState;
-    cardProvider?: CardProvider;
-    private getProvider;
-    private resolveUrl;
-    componentDidMount: () => Promise<void>;
-    UNSAFE_componentWillReceiveProps(nextProps: HyperlinkToolbarAppearanceProps): void;
-    render(): JSX.Element | null;
-}
+export declare const HyperlinkToolbarAppearance: (props: HyperlinkToolbarAppearanceProps) => JSX.Element;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "2.13.5",
+	"version": "2.14.0",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^88.3.0",
+		"@atlaskit/editor-common": "^88.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",